/* Shared visual refinement for operational Smart Oven pages.
   This file intentionally sits after legacy route styles. It harmonizes the
   existing UI without changing markup, data, controls, or state handling. */

:root {
  --ui-radius: 14px;
  --ui-radius-sm: 10px;
  --ui-shadow: 0 6px 18px rgba(70, 45, 28, .045);
  --ui-focus: 0 0 0 3px rgba(189, 114, 47, .18);
}

body {
  letter-spacing: .005em;
  text-rendering: optimizeLegibility;
}

/* A calm application surface: hierarchy comes from spacing and type first. */
body :is(.app, .layout) > .main,
body > main.wrap,
body > .wrap,
body .page-content,
body .page-shell {
  isolation: isolate;
}

body main :is(.header, .topbar) {
  box-shadow: var(--ui-shadow);
  border-color: var(--app-line);
}

body main :is(.header, .topbar) h1 {
  letter-spacing: -.02em;
}

body main :is(.header, .topbar) p {
  max-width: 62ch;
}

/* Retain cards that hold controls or readings, while reducing ornamental chrome. */
body main .card,
body main .recipe-panel,
body main .devices-panel {
  border-color: var(--app-line);
  box-shadow: var(--ui-shadow);
}

/* One visual language for content containers on every route. Heights remain
 * content-driven, while radius, border and shadow are deliberately uniform. */
body :is(main, .app, .layout) :is(.card, .settingsCard, .recipe-panel, .devices-panel, .online-card, .api-card, .device-card, .network-adapter) {
  box-sizing: border-box;
  border-radius: var(--ui-radius) !important;
  border-color: var(--app-line) !important;
  box-shadow: var(--ui-shadow) !important;
}

body main :is(.tableWrap, .table-wrap, .table-responsive) {
  border: 1px solid var(--app-line);
  border-radius: var(--ui-radius);
  overflow: auto;
  background: var(--app-card);
}

body main table {
  margin-bottom: 0;
}

body main :is(th, .table th) {
  color: var(--app-muted);
  font-size: .84em;
  font-weight: 700;
  letter-spacing: .025em;
}

body main :is(input, select, textarea, .form-control, .form-select) {
  border-radius: var(--ui-radius-sm);
  border-color: var(--app-line);
}

body main :is(input, select, textarea, .form-control, .form-select):focus {
  border-color: var(--app-orange);
  box-shadow: var(--ui-focus);
}

body main button,
body main .btn,
body main .recipe-action,
body main .recipe-secondary {
  border-radius: var(--ui-radius-sm);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

@media (hover: hover) {
  body main :is(button, .btn, .recipe-action, .recipe-secondary):not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(70, 45, 28, .12);
  }
}

body main :is(button, a, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--ui-focus);
}

/* Keep messages compact and easy to scan; color communicates status only. */
body main :is(.message, .alert, .app-status) {
  border-radius: var(--ui-radius-sm);
  box-shadow: none;
}

@media (max-width: 700px) {
  body main :is(.header, .topbar) {
    padding: 18px;
  }
  body main :is(.header, .topbar) h1 {
    font-size: 1.65rem !important;
  }
  body main :is(th, td, .table th, .table td) {
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}