/* Shared page foundation. Page-specific styles remain in legacy routes while they are migrated. */
:root {
  --app-nav-height: 64px;
  --app-ink: var(--color-302119);
  --app-orange: var(--color-bd722f);
  --app-background: var(--color-f5efe9);
  --app-card: var(--color-fffdf9);
  --app-text: var(--color-3b2c22);
  --app-muted: var(--color-766b63);
  --app-line: var(--color-e8ddd3);
  --app-green: var(--color-408853);
  --app-red: var(--color-ad4540);
  --app-blue: var(--color-4f86af);
  --app-yellow: var(--color-d5a237);
  /* aliases used by legacy pages */
  --dark: var(--app-ink); --sidebar: var(--app-ink); --sidebar-light: var(--color-976534);
  --sidebar-active: var(--color-976534); --background: var(--app-background); --card: var(--app-card);
  --text: var(--app-text); --muted: var(--app-muted); --line: var(--app-line);
  --border: var(--app-line); --brown: var(--color-976534); --green: var(--app-green);
  --green-dark: var(--color-416147); --green-light: var(--color-e3f2e6); --green-bg: var(--color-e3f2e6);
  --red: var(--app-red); --red-dark: var(--color-8d332e); --red-light: var(--color-fae5e3); --red-bg: var(--color-fae5e3);
  --orange: var(--app-orange); --orange-light: var(--color-faecd9); --blue: var(--app-blue);
  --blue-light: var(--color-e7f1f9); --yellow: var(--app-yellow); --yellow-light: var(--color-fff3d0);
}
html { min-height: 100%; background: var(--app-background); }
/* Use one page canvas across every route. Bootstrap is loaded after some
   legacy page styles and otherwise resets Dashboard to white. */
body {
  min-height: 100%;
  background-color: var(--app-background) !important;
  color: var(--app-text);
}
.app,
.layout,
body > main { background-color: transparent; }
a, button { -webkit-tap-highlight-color: var(--color-transparent); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-status { padding:10px 14px; border-radius:10px; font-size:14px; }
.app-status.success { color:var(--color-11633c); background:var(--color-e8f6ee); }
.app-status.error { color:var(--color-9a2d2d); background:var(--color-fdeceb); }
@media (max-width: 640px) { body { overflow-x:hidden; } }

/* Keep the relay page on the same brown/cream visual system as the dashboards. */
body:has(.wrap) { background: var(--app-background) !important; color: var(--app-text) !important; }
body:has(.wrap) .card { background: var(--app-card); }
/* Page controls inherit the shared palette without overriding Navbar controls. */
body:has(.wrap) > .wrap button {
  background: var(--app-orange);
  color: var(--action-text) !important;
}
body:has(.wrap) > .wrap button.stop { background: var(--app-red); }
body:has(.wrap) > .wrap a { color: var(--app-orange); }

.recipe-page { font-family: Tahoma, Arial, sans-serif; font-size: 18px; line-height: 1.6; }
.recipe-page h1 { font-size: 2.15rem; font-weight: 700; }
.recipe-page h2 { font-size: 1.45rem; font-weight: 700; }
.recipe-page h3 { font-size: 1.2rem; font-weight: 700; overflow-wrap: anywhere; }
.recipe-page .recipe-muted { color: var(--app-muted); font-size: 1rem; }
.recipe-page .small { font-size: .9rem !important; }
.recipe-panel { background: var(--app-card); border: 1px solid var(--app-line); border-radius: 18px; padding: 24px; }
.recipe-item { display: flex; flex-direction: column; border: 1px solid var(--app-line); border-radius: 14px; padding: 20px; }
.recipe-description { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; }
.recipe-values { display: flex; flex-wrap: wrap; gap: 16px; padding-block: 16px; border-block: 1px solid var(--app-line); }
.recipe-values dt { font-size: .9rem; color: var(--app-muted); font-weight: normal; }
.recipe-values dd { margin: 4px 0 0; font-size: 1.08rem; font-weight: bold; }
.recipe-badge { font-size: .85rem; white-space: nowrap; border: 1px solid var(--app-line); border-radius: 30px; padding: 5px 10px; }
.recipe-page .recipe-action { display: inline-block; background: var(--app-orange); color: var(--app-card); border: 0; border-radius: 10px; padding: 12px 18px; font-size: 1.05rem; font-weight: 700; text-decoration: none; }
.recipe-page .recipe-secondary { display: inline-block; background: var(--app-card); color: var(--app-text); border: 1px solid var(--app-line); border-radius: 8px; padding: 9px 13px; font-size: 1rem; text-decoration: none; }
.recipe-page .form-label { font-size: 1.05rem; font-weight: 600; }
.recipe-page .form-control { background: var(--app-card); color: var(--app-text); border-color: var(--app-line); border-radius: 9px; padding: 11px 13px; font-size: 1.05rem; }
.recipe-page .form-control:focus { border-color: var(--app-orange); box-shadow: none; outline: 2px solid var(--app-line); }
#recipe-form { scroll-margin-top: 90px; }

.devices-page { font-family: Tahoma, Arial, sans-serif; }
.devices-header { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.devices-eyebrow { margin:0 0 5px; color:var(--app-orange); font-size:.9rem; letter-spacing:.08em; font-weight:bold; }
.devices-header h1 { margin:0; font-size:2.05rem; }
.devices-muted { color:var(--app-muted); }
.devices-read { color:var(--app-muted); font-size:.85rem; }
.devices-note { margin-bottom:20px; padding:12px 15px; border:1px solid var(--app-line); border-radius:10px; color:var(--app-muted); background:var(--app-card); font-size:1rem; }
.devices-page > .row { justify-content:center; }
.devices-page > .row > .col-lg-6 { max-width:760px; }
.devices-panel { background:var(--app-card); border:1px solid var(--app-line); border-radius:16px; padding:22px; }
.device-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.device-top h2 { margin:0; font-size:1.45rem; }
.device-status { display:inline-flex; align-items:center; gap:7px; border-radius:30px; padding:6px 11px; font-size:.82rem; font-weight:bold; }
.device-status i { width:8px; height:8px; border-radius:50%; background:currentColor; }
.device-status.is-online { color:var(--app-green); background:var(--color-e3f2e6); }
.device-status.is-offline { color:var(--app-red); background:var(--color-fae5e3); }
.device-details { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0; padding:16px 0; border-block:1px solid var(--app-line); }
.device-details dt { color:var(--app-muted); font-size:.9rem; }
.device-details dd { margin:4px 0 0; font-size:1rem; overflow-wrap:anywhere; }
.device-sensors { display:flex; flex-wrap:wrap; gap:18px; color:var(--app-muted); font-size:1rem; }
.device-sensors strong { color:var(--app-text); }
.devices-empty { text-align:center; padding:45px; }
@media (max-width:640px) { .device-details { grid-template-columns:1fr; gap:10px; } }