/* =========================================================================
   PHENIX MORNING DASHBOARD — visual system "dawn-shift console"
   -------------------------------------------------------------------------
   Identity motifs (see DESIGN.md):
   1. DAWN SEAM     — warm light hairline across the top of brand/topbar/panels/dialogs
   2. STUB CORNERS  — panels & plates clip the top-right corner sharp + punch a
                      ticket hole (accent dot) beside it
   3. ROOM KEY TAGS — room numbers as angular monospace plaques with a notch
   4. INDICATOR LAMPS — statuses as control-panel lamp plates (dot + glow)
   Every original selector is preserved so all functionality, markup, ids and
   data-view hooks behave exactly as before — only the skin changed.
   ========================================================================= */

/* ------------------------------------------------------------------ */
/* 1. THEME TOKENS                                                     */
/* ------------------------------------------------------------------ */

:root {
  /* structure */
  --bg: #08090a;
  --panel: #0f1011;
  --surface: #17181a;
  --surface-2: #202125;
  --border: rgba(255, 255, 255, .08);
  --border-soft: rgba(255, 255, 255, .05);
  /* ink */
  --text: #f7f8f8;
  --secondary: #d0d6e0;
  --muted: #8a8f98;
  --faint: #62666d;
  /* accents (vary per theme) */
  --accent: #5e6ad2;
  --accent-hover: #7170ff;
  /* semantic status colors — unchanged meaning */
  --green: #30b77b;
  --amber: #e2ad4c;
  --pink: #db6e9f;
  --purple: #9c82e6;
  --red: #ef6b73;
  /* selection / priority signal (existing convention, formalized) */
  --signal: color-mix(in srgb, var(--accent) 58%, #ffffff);
  --signal-soft: color-mix(in srgb, var(--accent) 24%, transparent);
  /* motion & corners */
  --radius: 12px;
  --radius-s: 4px;
  --radius-m: 14px;
  --radius-l: 20px;
  --sidebar: 224px;
  --motion: 140ms;
  --motion-slow: 240ms;

  /* ======= derived system tokens (adapt to every theme) =========== */
  /* recessed well for inputs / recessed slots */
  --well: rgba(0, 0, 0, .28);
  --well-border: var(--border);
  /* raised hover tint */
  --raise: rgba(255, 255, 255, .06);
  /* soft accent fill (adapts to custom colors via color-mix) */
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-soft-2: color-mix(in srgb, var(--accent) 24%, transparent);
  /* accent-lit ink (readable accent text) */
  --accent-ink: color-mix(in srgb, var(--accent) 58%, #ffffff);
  /* tab-sheet ink stays readable on the dark mobile sheet */
  --sheet-ink: #ffffff;

  --on-accent: #ffffff;
  /* punch-hole + seam gradient: warm light rising off the accent */
  --seam: linear-gradient(90deg, rgba(255, 199, 135, .0), rgba(255, 199, 135, .55) 8%, var(--accent-soft-2) 46%, transparent 78%);
  --seam-strong: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #ffd9a0) 0%, var(--accent) 55%, transparent 85%);
  /* focus ring */
  --ring: color-mix(in srgb, var(--accent) 38%, transparent);
  /* ambient dawn glow (cherry-picked warm fade into theme glow) */
  --dawn-glow-a: rgba(255, 166, 92, .05);
  --dawn-glow-b: rgba(255, 92, 92, .028);
  /* elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 28px -14px rgba(0, 0, 0, .5);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 64px -20px rgba(0, 0, 0, .62);
  --shadow-pop: 0 1px 0 rgba(255, 255, 255, .05), 0 32px 90px rgba(0, 0, 0, .6);
  /* interior top highlight (catches light) */
  --lit-edge: inset 0 1px 0 rgba(255, 255, 255, .065);
  /* board texture */
  --board-lines: repeating-linear-gradient(180deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 64px);
}

html[data-theme="midnight"] { --glow: rgba(94, 106, 210, .14); }

html[data-theme="teal"] {
  --bg: #0a1e1c; --panel: #0e2724; --surface: #14332e; --surface-2: #1c413a;
  --accent: #2ec9b4; --accent-hover: #47e0d4;
  --border: rgba(200, 232, 220, .14); --border-soft: rgba(200, 232, 220, .08);
  --muted: #b5b39e; --faint: #837f67; --glow: rgba(46, 201, 185, .16);
  --accent-soft: rgba(46, 201, 185, .14); --accent-ink: #a9f1e5;
  --ring: rgba(46, 201, 185, .40);
  --well: rgba(0, 0, 0, .30);
  --on-accent: #0a2b25;
  --text: #f6f0de; --secondary: #e8e0c8;
}
html[data-theme="forest"] {
  --bg: #071007; --panel: #0c140b; --surface: #111f10; --surface-2: #1a2c18;
  --accent: #4fae4f; --accent-hover: #6cc86c;
  --border: rgba(140, 214, 132, .12); --border-soft: rgba(140, 214, 132, .07);
  --muted: #93b58e; --faint: #5f7f5b; --glow: rgba(79, 174, 79, .16);
  --accent-soft: rgba(79, 174, 79, .13); --accent-ink: #a5dfa5;
  --ring: rgba(79, 174, 79, .36);
}
html[data-theme="royal"] {
  --bg: #0b0910; --panel: #0f0d16; --surface: #171326; --surface-2: #211b33;
  --accent: #8a5fd6; --accent-hover: #a37cf0;
  --border: rgba(184, 151, 230, .12); --border-soft: rgba(184, 151, 230, .07);
  --muted: #a292c4; --faint: #6b5f82; --glow: rgba(138, 95, 214, .17);
  --accent-soft: rgba(138, 95, 214, .14); --accent-ink: #c5a8f5;
  --ring: rgba(138, 95, 214, .38);
}
html[data-theme="rose"] {
  --bg: #100809; --panel: #150c0d; --surface: #211215; --surface-2: #2f1a1e;
  --accent: #d65f7f; --accent-hover: #ee7f9c;
  --border: rgba(230, 151, 170, .12); --border-soft: rgba(230, 151, 170, .07);
  --muted: #c09aa6; --faint: #82606b; --glow: rgba(214, 95, 127, .17);
  --accent-soft: rgba(214, 95, 127, .13); --accent-ink: #f4a8bc;
  --ring: rgba(214, 95, 127, .36);
}
html[data-theme="gold"] {
  --bg: #0f0c06; --panel: #151106; --surface: #211b0c; --surface-2: #302715;
  --accent: #d0a345; --accent-hover: #e8be63;
  --border: rgba(230, 197, 128, .12); --border-soft: rgba(230, 197, 128, .07);
  --muted: #b8a079; --faint: #7d6c4c; --glow: rgba(208, 163, 69, .16);
  --accent-soft: rgba(208, 163, 69, .14); --accent-ink: #ffdf9e;
  --ring: rgba(208, 163, 69, .36);
}
html[data-theme="ocean"] {
  --accent: #1687e8; --accent-hover: #48a2f3; --glow: rgba(22, 135, 232, .17);
  --accent-soft: rgba(22, 135, 232, .13); --accent-ink: #9cd2ff;
  --ring: rgba(22, 135, 232, .36);
}
html[data-theme="coral"] {
  --accent: #e56d5a; --accent-hover: #ef927f; --glow: rgba(229, 109, 90, .17);
  --accent-soft: rgba(229, 109, 90, .13); --accent-ink: #ffb9ab;
  --ring: rgba(229, 109, 90, .36);
}
html[data-theme="lavender"] {
  --accent: #9b7be6; --accent-hover: #b19af0; --glow: rgba(155, 123, 230, .18);
  --accent-soft: rgba(155, 123, 230, .14); --accent-ink: #cdb8ff;
  --ring: rgba(155, 123, 230, .38);
}
html[data-theme="ember"] {
  --accent: #df8a31; --accent-hover: #eca653; --glow: rgba(223, 138, 49, .18);
  --accent-soft: rgba(223, 138, 49, .14); --accent-ink: #ffc98a;
  --ring: rgba(223, 138, 49, .38);
}

/* Retro-modern hotel themes. Each keeps the operational color semantics but
   gives the dashboard a distinct boutique-hotel silhouette and finish. */
html[data-theme="atelier"] { --bg:#102824; --panel:#173830; --surface:#214940; --surface-2:#2d5b50; --accent:#d0a45b; --accent-hover:#e5be7c; --muted:#b9c8b7; --faint:#789389; --glow:rgba(208,164,91,.16); --accent-soft:rgba(208,164,91,.14); --accent-ink:#f5dca7; --ring:rgba(208,164,91,.4); --text:#f4eddd; --secondary:#e8ddc6; }
html[data-theme="command"] { --bg:#101619; --panel:#172126; --surface:#1a2a2e; --surface-2:#274044; --accent:#62d0a0; --accent-hover:#8be6bc; --muted:#91a59e; --faint:#667d78; --glow:rgba(98,208,160,.16); --accent-soft:rgba(98,208,160,.14); --accent-ink:#baffd8; --ring:rgba(98,208,160,.4); }
html[data-theme="floorplan"] { --bg:#182538; --panel:#223653; --surface:#2d4668; --surface-2:#3d5d84; --accent:#ff836d; --accent-hover:#ffad9d; --muted:#b9c7d5; --faint:#7d91aa; --glow:rgba(255,131,109,.16); --accent-soft:rgba(255,131,109,.14); --accent-ink:#ffd0c7; --ring:rgba(255,131,109,.38); }
html[data-theme="deco"] { --bg:#211b1d; --panel:#2c2225; --surface:#392a2f; --surface-2:#4a353a; --accent:#c49a50; --accent-hover:#e0bb70; --muted:#c9aa9b; --faint:#8b6c67; --glow:rgba(196,154,80,.17); --accent-soft:rgba(196,154,80,.14); --accent-ink:#f3d58c; --ring:rgba(196,154,80,.4); --text:#f7ead5; --secondary:#ead8c1; }
html[data-theme="palm"] { --bg:#173e3a; --panel:#20524b; --surface:#2b655b; --surface-2:#3e7a6d; --accent:#f2aa77; --accent-hover:#ffc39c; --muted:#c5e2d8; --faint:#87aaa0; --glow:rgba(242,170,119,.17); --accent-soft:rgba(242,170,119,.14); --accent-ink:#ffe0c3; --ring:rgba(242,170,119,.4); --text:#fff8ea; --secondary:#f6e7d2; }
html[data-theme="ledger"] { --bg:#2f302b; --panel:#3b3b33; --surface:#4b493d; --surface-2:#5d5949; --accent:#c06a58; --accent-hover:#d98b75; --muted:#c7c1ae; --faint:#96917f; --glow:rgba(192,106,88,.16); --accent-soft:rgba(192,106,88,.14); --accent-ink:#f2b09b; --ring:rgba(192,106,88,.38); --text:#f8f0df; --secondary:#e6dcc6; }
html[data-theme="riviera"] { --bg:#173c3c; --panel:#205550; --surface:#2f6b63; --surface-2:#47857a; --accent:#e88b76; --accent-hover:#f4aa95; --muted:#bfddd3; --faint:#82aba1; --glow:rgba(232,139,118,.17); --accent-soft:rgba(232,139,118,.14); --accent-ink:#ffd1c5; --ring:rgba(232,139,118,.4); --text:#fff9ee; --secondary:#f8e8d6; }
html[data-theme="veranda"] { --bg:#173d38; --panel:#234d45; --surface:#2e6156; --surface-2:#467668; --accent:#c49b4f; --accent-hover:#e0bf79; --muted:#bfd3c7; --faint:#7d9e90; --glow:rgba(196,155,79,.16); --accent-soft:rgba(196,155,79,.14); --accent-ink:#f1d796; --ring:rgba(196,155,79,.4); --text:#fff4df; --secondary:#eadcc2; }
html[data-theme="lounge"] { --bg:#172238; --panel:#222e48; --surface:#2d3a57; --surface-2:#40516e; --accent:#b4685d; --accent-hover:#d18c7e; --muted:#b8c4d1; --faint:#7d8da2; --glow:rgba(180,104,93,.16); --accent-soft:rgba(180,104,93,.14); --accent-ink:#efb0a0; --ring:rgba(180,104,93,.38); --text:#f6efdf; --secondary:#e4d9c4; }
html[data-theme="noir"] { --bg:#0d0d0e; --panel:#171617; --surface:#242021; --surface-2:#332a28; --accent:#c9a15a; --accent-hover:#e6c57e; --muted:#aa9b8a; --faint:#71645a; --glow:rgba(201,161,90,.18); --accent-soft:rgba(201,161,90,.14); --accent-ink:#f5d896; --ring:rgba(201,161,90,.42); --text:#f2e8d5; --secondary:#e5d4b8; }
html[data-theme="continental"] { --bg:#262628; --panel:#312d30; --surface:#393236; --surface-2:#4a3c42; --accent:#d0ab66; --accent-hover:#e6c889; --muted:#ad9f93; --faint:#776b68; --glow:rgba(116,53,63,.2); --accent-soft:rgba(116,53,63,.2); --accent-ink:#f0d49a; --ring:rgba(208,171,102,.4); --text:#f1e5d0; --secondary:#e4d3b9; }
html[data-theme="concierge"] { --bg:#111a2a; --panel:#1b2739; --surface:#223148; --surface-2:#31445d; --accent:#d4b477; --accent-hover:#ebd39b; --muted:#9eabb9; --faint:#697b91; --glow:rgba(108,155,193,.18); --accent-soft:rgba(108,155,193,.15); --accent-ink:#f0d69d; --ring:rgba(212,180,119,.4); --text:#f4ecdc; --secondary:#d9d6ca; }
html[data-theme="future"] { --bg:#07111f; --panel:#0d1e31; --surface:#122b43; --surface-2:#1c4461; --accent:#6de5ff; --accent-hover:#a3f1ff; --muted:#9cb8c8; --faint:#668498; --glow:rgba(109,229,255,.2); --accent-soft:rgba(109,229,255,.14); --accent-ink:#baf7ff; --ring:rgba(109,229,255,.45); --text:#ecfbff; --secondary:#c6dce5; }
html[data-theme="cyberpunk"] { --bg:#12051b; --panel:#200b2b; --surface:#32103d; --surface-2:#51164e; --accent:#f5ed3a; --accent-hover:#fff77a; --muted:#d0a8d4; --faint:#96659f; --glow:rgba(255,35,179,.22); --accent-soft:rgba(255,35,179,.16); --accent-ink:#fff77a; --ring:rgba(255,35,179,.45); --text:#fff3ff; --secondary:#f0c9eb; }
html[data-theme="anime"] { --bg:#10162b; --panel:#172343; --surface:#20315a; --surface-2:#30477b; --accent:#ff7fb8; --accent-hover:#ffa8d0; --muted:#b7c5e4; --faint:#7d91bb; --glow:rgba(127,220,255,.2); --accent-soft:rgba(255,127,184,.15); --accent-ink:#ffd0e5; --ring:rgba(255,127,184,.42); --text:#fff7fb; --secondary:#d7e4ff; }
html[data-theme="cozy"] { --bg:#211a17; --panel:#30231e; --surface:#463127; --surface-2:#604538; --accent:#e5a86b; --accent-hover:#f4c58d; --muted:#d0b9a5; --faint:#9e826f; --glow:rgba(229,168,107,.18); --accent-soft:rgba(229,168,107,.15); --accent-ink:#ffe1b9; --ring:rgba(229,168,107,.4); --text:#fff6eb; --secondary:#f0dcc8; }
html[data-theme="library"] { --bg:#17151d; --panel:#25202b; --surface:#342b3c; --surface-2:#4a3b52; --accent:#d3a85f; --accent-hover:#e8c984; --muted:#c8bbca; --faint:#90819a; --glow:rgba(211,168,95,.17); --accent-soft:rgba(211,168,95,.14); --accent-ink:#f5d99a; --ring:rgba(211,168,95,.4); --text:#f8f1e8; --secondary:#e8d9c8; }
html[data-theme="plants"] { --bg:#10221b; --panel:#183127; --surface:#244638; --surface-2:#35624c; --accent:#8dd18a; --accent-hover:#b0e7a8; --muted:#b9d4bf; --faint:#789d82; --glow:rgba(141,209,138,.18); --accent-soft:rgba(141,209,138,.14); --accent-ink:#c9f2c1; --ring:rgba(141,209,138,.4); --text:#eff9ed; --secondary:#d8eed8; }
html[data-theme="zen"] { --bg:#1b2221; --panel:#27302d; --surface:#37403b; --surface-2:#4a554e; --accent:#b8c6a5; --accent-hover:#d4dfc4; --muted:#c0cbc1; --faint:#85938a; --glow:rgba(184,198,165,.14); --accent-soft:rgba(184,198,165,.12); --accent-ink:#e0ebd2; --ring:rgba(184,198,165,.36); --text:#eef2eb; --secondary:#dce5db; }
html[data-theme="sunset"] { --bg:#2a1715; --panel:#3b211d; --surface:#552c25; --surface-2:#704137; --accent:#f0a06b; --accent-hover:#ffc08f; --muted:#d7b3a2; --faint:#a27a6e; --glow:rgba(240,160,107,.18); --accent-soft:rgba(240,160,107,.15); --accent-ink:#ffe0c6; --ring:rgba(240,160,107,.4); --text:#fff4ec; --secondary:#f3d7c7; }
html[data-theme="conservatory"] { --bg:#0d1b1b; --panel:#142929; --surface:#1d3a37; --surface-2:#2c5550; --accent:#c39ad9; --accent-hover:#dfb9ef; --muted:#b5ccc3; --faint:#71958b; --glow:rgba(130,214,190,.18); --accent-soft:rgba(195,154,217,.14); --accent-ink:#e8cbf2; --ring:rgba(195,154,217,.4); --text:#eff9f3; --secondary:#d7eee4; }
html[data-theme="rain"] { --bg:#111a29; --panel:#1a293c; --surface:#243b55; --surface-2:#365675; --accent:#82c7e8; --accent-hover:#a9def2; --muted:#b6cbe0; --faint:#718ca7; --glow:rgba(130,199,232,.18); --accent-soft:rgba(130,199,232,.14); --accent-ink:#cceeff; --ring:rgba(130,199,232,.4); --text:#eef7ff; --secondary:#d7e6f3; }
html[data-theme="porcelain"] { --bg:#11151d; --panel:#202735; --surface:#2b3547; --surface-2:#3d4d67; --accent:#78a9e8; --accent-hover:#a4c7f3; --muted:#b8c7dc; --faint:#778aa7; --glow:rgba(120,169,232,.18); --accent-soft:rgba(120,169,232,.14); --accent-ink:#c9ddff; --ring:rgba(120,169,232,.4); --text:#f3f7ff; --secondary:#dbe5f5; }
html[data-theme="citrus"] { --bg:#182019; --panel:#27321f; --surface:#3b4726; --surface-2:#566238; --accent:#e3d36b; --accent-hover:#f3e493; --muted:#cbd0a9; --faint:#909868; --glow:rgba(227,211,107,.17); --accent-soft:rgba(227,211,107,.14); --accent-ink:#fff2a8; --ring:rgba(227,211,107,.4); --text:#f8fae9; --secondary:#e7ebc9; }

html[data-theme="atelier"] .room-card, html[data-theme="palm"] .room-card, html[data-theme="riviera"] .room-card { border-radius: 22px 8px 22px 8px; }
html[data-theme="deco"] .room-card, html[data-theme="noir"] .room-card { border-radius: 3px 20px 3px 3px; }
html[data-theme="ledger"] .room-card, html[data-theme="lounge"] .room-card { border-radius: 3px; }
html[data-theme="veranda"] .room-card, html[data-theme="concierge"] .room-card { border-radius: 5px 5px 22px 5px; }
html[data-theme="continental"] .room-card { border-radius: 14px 4px 14px 4px; }
html[data-theme="floorplan"] .room-card { border-radius: 18px 18px 4px 18px; }
html[data-theme="command"] .room-card { border-radius: 4px; }
html[data-theme="atelier"] .panel, html[data-theme="palm"] .panel, html[data-theme="riviera"] .panel { border-radius: 20px; }
html[data-theme="deco"] .panel, html[data-theme="noir"] .panel, html[data-theme="ledger"] .panel { border-radius: 3px; }
html[data-theme="continental"] .panel { border-radius: 12px; }
html[data-theme="concierge"] .panel { border-radius: 5px; }

html[data-theme="scallop"] { --bg:#24111f; --panel:#35192d; --surface:#48213c; --surface-2:#63304f; --accent:#f09ac2; --accent-hover:#ffc0df; --muted:#d6b0c8; --faint:#a27496; --glow:rgba(240,154,194,.2); --accent-soft:rgba(240,154,194,.15); --accent-ink:#ffd8ea; --ring:rgba(240,154,194,.42); --text:#fff3f8; --secondary:#f3d9e7; }
html[data-theme="archival"] { --bg:#172421; --panel:#243832; --surface:#315047; --surface-2:#42675a; --accent:#d7c27c; --accent-hover:#f1dfa0; --muted:#bfd0c3; --faint:#819c8e; --glow:rgba(215,194,124,.18); --accent-soft:rgba(215,194,124,.14); --accent-ink:#f8eab4; --ring:rgba(215,194,124,.4); --text:#f5f0df; --secondary:#e1dcc4; }
/* Silhouettes adapted from Stephanie's label reference: lobes, ticket cuts, facets, and arch notches. */
html[data-theme="scallop"] .panel, html[data-theme="scallop"] .room-card, html[data-theme="scallop"] .metric { border-radius: 28px; }
html[data-theme="ticket"] .panel, html[data-theme="ticket"] .room-card, html[data-theme="ticket"] .metric { border-radius: 16px; clip-path: polygon(0 9%, 4% 9%, 5% 0, 95% 0, 96% 9%, 100% 9%, 100% 91%, 96% 91%, 95% 100%, 5% 100%, 4% 91%, 0 91%); }
html[data-theme="sunburst"] .panel, html[data-theme="sunburst"] .room-card, html[data-theme="sunburst"] .metric { border-radius: 18px; clip-path: polygon(50% 0, 58% 5%, 68% 2%, 75% 9%, 86% 8%, 91% 18%, 99% 25%, 95% 36%, 100% 50%, 95% 63%, 99% 75%, 91% 82%, 86% 92%, 75% 91%, 68% 98%, 58% 95%, 50% 100%, 42% 95%, 32% 98%, 25% 91%, 14% 92%, 9% 82%, 1% 75%, 5% 63%, 0 50%, 5% 36%, 1% 25%, 9% 18%, 14% 8%, 25% 9%, 32% 2%, 42% 5%); }
html[data-theme="archival"] .panel, html[data-theme="archival"] .room-card, html[data-theme="archival"] .metric { border-radius: 22px 22px 6px 6px; }
html[data-theme="archival"] .panel::before, html[data-theme="archival"] .room-card::before { border-radius: 50% 50% 0 0; }
html[data-theme="cozy"] .panel, html[data-theme="cozy"] .room-card, html[data-theme="cozy"] .metric { border-radius: 22px 10px 22px 10px; }
html[data-theme="library"] .panel, html[data-theme="library"] .room-card, html[data-theme="library"] .metric { border-radius: 5px 16px 5px 5px; }
html[data-theme="plants"] .panel, html[data-theme="plants"] .room-card, html[data-theme="plants"] .metric { border-radius: 18px 6px 18px 6px; }
html[data-theme="zen"] .panel, html[data-theme="zen"] .room-card, html[data-theme="zen"] .metric { border-radius: 14px; }
html[data-mode="light"][data-theme="cozy"] { --bg:#f6eee7; --panel:#fffaf5; --surface:#f3dfcd; --surface-2:#e8c4a7; --accent:#a85e2d; --accent-hover:#87451f; --muted:#745d50; --faint:#a18473; --text:#34251e; --secondary:#5a4032; --border:rgba(123,70,38,.2); }
html[data-mode="light"][data-theme="library"] { --bg:#f0edf3; --panel:#fcfaff; --surface:#e5ddec; --surface-2:#d0c1dc; --accent:#80572c; --accent-hover:#65411f; --muted:#675a70; --faint:#91839b; --text:#2a2330; --secondary:#514455; --border:rgba(91,63,111,.2); }
html[data-mode="light"][data-theme="plants"] { --bg:#edf6ee; --panel:#fbfffb; --surface:#dceede; --surface-2:#c0dfc2; --accent:#317344; --accent-hover:#245b34; --muted:#55725c; --faint:#78947d; --text:#1f3325; --secondary:#3c5843; --border:rgba(49,115,68,.2); }
html[data-mode="light"][data-theme="zen"] { --bg:#eef1ed; --panel:#fbfcfa; --surface:#e1e8e0; --surface-2:#cad8cc; --accent:#657b65; --accent-hover:#4f654f; --muted:#5f6e63; --faint:#849188; --text:#26332b; --secondary:#435347; --border:rgba(76,101,80,.2); }
html[data-mode="light"][data-theme="conservatory"] { --bg:#eaf4ef; --panel:#f9fffb; --surface:#d9eee5; --surface-2:#bddbce; --accent:#7a5290; --accent-hover:#613b78; --muted:#587267; --faint:#7d998d; --text:#20352d; --secondary:#3d5a4c; --border:rgba(70,111,91,.2); }
html[data-mode="light"][data-theme="rain"] { --bg:#eaf2f8; --panel:#f9fcff; --surface:#dcebf5; --surface-2:#c4ddec; --accent:#317ca2; --accent-hover:#24617f; --muted:#587184; --faint:#7a92a4; --text:#20303b; --secondary:#40586a; --border:rgba(49,103,135,.2); }
html[data-mode="light"][data-theme="porcelain"] { --bg:#eef2f8; --panel:#fbfdff; --surface:#dfe8f5; --surface-2:#c7d7ec; --accent:#3568a3; --accent-hover:#285486; --muted:#5d6f88; --faint:#7e91aa; --text:#202b3a; --secondary:#41536d; --border:rgba(53,104,163,.2); }
html[data-mode="light"][data-theme="citrus"] { --bg:#f3f5e7; --panel:#fcfff4; --surface:#e8edc5; --surface-2:#d6dfa0; --accent:#6d741f; --accent-hover:#565d16; --muted:#6d7548; --faint:#929966; --text:#30351b; --secondary:#50582f; --border:rgba(109,116,31,.2); }
html[data-mode="light"][data-theme="sunset"] { --bg:#fff0e7; --panel:#fffaf6; --surface:#f7dcca; --surface-2:#edbca3; --accent:#b5532f; --accent-hover:#913e23; --muted:#785d52; --faint:#a17c6e; --text:#3b281f; --secondary:#624238; --border:rgba(181,83,47,.2); }

html[data-mode="light"][data-theme="cozy"] .panel, html[data-mode="light"][data-theme="cozy"] .room-card, html[data-mode="light"][data-theme="cozy"] .metric { border-radius:22px 10px 22px 10px; }
html[data-mode="light"][data-theme="library"] .panel, html[data-mode="light"][data-theme="library"] .room-card, html[data-mode="light"][data-theme="library"] .metric { border-radius:5px 16px 5px 5px; }
html[data-mode="light"][data-theme="plants"] .panel, html[data-mode="light"][data-theme="plants"] .room-card, html[data-mode="light"][data-theme="plants"] .metric { border-radius:18px 6px 18px 6px; }
html[data-mode="light"][data-theme="zen"] .panel, html[data-mode="light"][data-theme="zen"] .room-card, html[data-mode="light"][data-theme="zen"] .metric { border-radius:14px; }
html[data-mode="light"][data-theme="conservatory"] .panel, html[data-mode="light"][data-theme="conservatory"] .room-card, html[data-mode="light"][data-theme="conservatory"] .metric { border-radius: 24px 8px 24px 8px; }
html[data-mode="light"][data-theme="rain"] .panel, html[data-mode="light"][data-theme="rain"] .room-card, html[data-mode="light"][data-theme="rain"] .metric { border-radius: 18px 4px 18px 4px; }
html[data-mode="light"][data-theme="porcelain"] .panel, html[data-mode="light"][data-theme="porcelain"] .room-card, html[data-mode="light"][data-theme="porcelain"] .metric { border-radius: 4px; }
html[data-mode="light"][data-theme="citrus"] .panel, html[data-mode="light"][data-theme="citrus"] .room-card, html[data-mode="light"][data-theme="citrus"] .metric { border-radius: 20px 7px 20px 7px; }
html[data-mode="light"][data-theme="sunset"] .panel, html[data-mode="light"][data-theme="sunset"] .room-card, html[data-mode="light"][data-theme="sunset"] .metric { border-radius: 22px 9px 22px 9px; }
html[data-mode="light"][data-theme="scallop"] { --bg:#f6e8ef; --panel:#fff8fb; --surface:#f8dce9; --surface-2:#efbfd5; --accent:#ae477b; --accent-hover:#8e3564; --muted:#6f5362; --faint:#967584; --text:#38222d; --secondary:#573e4b; --border:rgba(122,54,91,.2); }
html[data-mode="light"][data-theme="ticket"] { --bg:#eaf1f7; --panel:#f9fcff; --surface:#dceaf5; --surface-2:#c2d9e9; --accent:#17638e; --accent-hover:#0e4d72; --muted:#536b7d; --faint:#71899b; --text:#1b2d3b; --secondary:#385267; --border:rgba(29,83,119,.2); }
html[data-mode="light"][data-theme="sunburst"] { --bg:#fff1df; --panel:#fffaf3; --surface:#ffe1bd; --surface-2:#f5c68d; --accent:#b94c16; --accent-hover:#963b0e; --muted:#765d4c; --faint:#a27c60; --text:#392418; --secondary:#5f4332; --border:rgba(146,67,19,.2); }
html[data-mode="light"][data-theme="archival"] { --bg:#edf2e9; --panel:#fbfdf8; --surface:#e0ebdf; --surface-2:#c8dcc9; --accent:#587a57; --accent-hover:#426443; --muted:#5c7060; --faint:#819485; --text:#23352a; --secondary:#405645; --border:rgba(63,99,68,.2); }
html[data-mode="light"][data-theme="scallop"] .panel, html[data-mode="light"][data-theme="scallop"] .room-card, html[data-mode="light"][data-theme="scallop"] .metric { border-radius:28px; }
html[data-mode="light"][data-theme="ticket"] .panel, html[data-mode="light"][data-theme="ticket"] .room-card, html[data-mode="light"][data-theme="ticket"] .metric { border-radius:16px; }
html[data-mode="light"][data-theme="sunburst"] .panel, html[data-mode="light"][data-theme="sunburst"] .room-card, html[data-mode="light"][data-theme="sunburst"] .metric { border-radius:18px; }
html[data-mode="light"][data-theme="archival"] .panel, html[data-mode="light"][data-theme="archival"] .room-card, html[data-mode="light"][data-theme="archival"] .metric { border-radius:22px 22px 6px 6px; }

/* dilute-token fallbacks for browsers without color-mix (older phones) */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root {
    --accent-soft: rgba(94, 106, 210, .13);
    --accent-soft-2: rgba(94, 106, 210, .22);
    --accent-ink: #aab3ff;
    --ring: rgba(94, 106, 210, .36);
    --seam: linear-gradient(90deg, transparent, rgba(94, 106, 210, .22) 46%, transparent 78%);
    --signal: #aab3ff;
    --signal-soft: rgba(94, 106, 210, .22);
  }
}

/* ------------------------------------------------------------------ */
/* 2. BASE + BOARD TEXTURE                                             */
/* ------------------------------------------------------------------ */

* { box-sizing: border-box; }

html {
  background: var(--bg);
  color-scheme: dark;
  font-family: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv01", "ss03";
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* thin, quiet scrollbars with accent-tinted thumb */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-soft-2); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ambient light layer — theme glow + board texture + first light (was .ambient) */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    /* faint horizontal board rules — the ledger sheet */
    var(--board-lines),
    /* warm first light falling from the top-left */
    radial-gradient(920px 480px at 18% -8%, var(--dawn-glow-b), transparent 62%),
    radial-gradient(680px 420px at 108% -12%, var(--dawn-glow-a), transparent 60%),
    /* accent-lit glow per theme */
    radial-gradient(820px 420px at 82% -10%, var(--glow, rgba(94, 106, 210, .14)), transparent 68%);
  z-index: 0;
}
.app-shell { position: relative; z-index: 2; }

/* phone nav is a dropdown menu — hidden on desktop, shown in the mobile query */
#mobile-nav-select{display:none}

button, input, select, textarea { font: inherit; }
button, input, select, textarea { min-height: 44px; }
button { cursor: pointer; }
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------------------------ */
/* 3. TYPOGRAPHY & TEXT UTILITIES                                      */
/* ------------------------------------------------------------------ */

/* console-ticker eyebrow: a tiny punched flag precedes the label */
.eyebrow {
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--faint);
  font-weight: 620;
  margin: 18px 0 7px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 38% 42%, 0 42%);
  box-shadow: 0 0 10px var(--accent-soft-2);
}

.auth-card h1, .topbar h1 {
  font-size: 28px;
  letter-spacing: -.6px;
  font-weight: 540;
  margin: 0;
  font-variant-numeric: normal;
}

.muted { color: var(--muted); }

h1, h2, h3, h4 { font-variant-numeric: normal; }

/* Theme typography and highlight language. The operational UI stays readable,
   while headings and active controls carry each room's personality. */
html[data-theme="cozy"], html[data-theme="cozy"] button, html[data-theme="cozy"] input, html[data-theme="cozy"] select, html[data-theme="cozy"] textarea { font-family: "Space Grotesk", "Trebuchet MS", sans-serif; }
html[data-theme="library"] , html[data-theme="library"] button, html[data-theme="library"] input, html[data-theme="library"] select, html[data-theme="library"] textarea { font-family: "Avenir Next", "Helvetica Neue", sans-serif; }
html[data-theme="plants"], html[data-theme="plants"] button, html[data-theme="plants"] input, html[data-theme="plants"] select, html[data-theme="plants"] textarea { font-family: "Trebuchet MS", "Space Grotesk", sans-serif; }
html[data-theme="zen"], html[data-theme="zen"] button, html[data-theme="zen"] input, html[data-theme="zen"] select, html[data-theme="zen"] textarea { font-family: "Avenir Next", "Helvetica Neue", sans-serif; }
html[data-theme="conservatory"], html[data-theme="conservatory"] button, html[data-theme="conservatory"] input, html[data-theme="conservatory"] select, html[data-theme="conservatory"] textarea { font-family: "Avenir Next", "Helvetica Neue", sans-serif; }
html[data-theme="rain"], html[data-theme="rain"] button, html[data-theme="rain"] input, html[data-theme="rain"] select, html[data-theme="rain"] textarea { font-family: "Space Grotesk", "Helvetica Neue", sans-serif; }
html[data-theme="porcelain"], html[data-theme="porcelain"] button, html[data-theme="porcelain"] input, html[data-theme="porcelain"] select, html[data-theme="porcelain"] textarea { font-family: "Space Grotesk", "Helvetica Neue", sans-serif; }
html[data-theme="citrus"], html[data-theme="citrus"] button, html[data-theme="citrus"] input, html[data-theme="citrus"] select, html[data-theme="citrus"] textarea { font-family: "Space Grotesk", "Trebuchet MS", sans-serif; }
html[data-theme="sunset"], html[data-theme="sunset"] button, html[data-theme="sunset"] input, html[data-theme="sunset"] select, html[data-theme="sunset"] textarea { font-family: "Avenir Next", "Helvetica Neue", sans-serif; }
html[data-theme="cozy"] h1, html[data-theme="cozy"] h2, html[data-theme="cozy"] h3, html[data-theme="cozy"] h4,
html[data-theme="library"] h1, html[data-theme="library"] h2, html[data-theme="library"] h3, html[data-theme="library"] h4,
html[data-theme="conservatory"] h1, html[data-theme="conservatory"] h2, html[data-theme="conservatory"] h3, html[data-theme="conservatory"] h4,
html[data-theme="sunset"] h1, html[data-theme="sunset"] h2, html[data-theme="sunset"] h3, html[data-theme="sunset"] h4 { font-family: "Sentient", Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.02em; }
html[data-theme="plants"] h1, html[data-theme="plants"] h2, html[data-theme="plants"] h3, html[data-theme="plants"] h4 { font-weight: 600; letter-spacing: -.015em; }
html[data-theme="zen"] h1, html[data-theme="zen"] h2, html[data-theme="zen"] h3, html[data-theme="zen"] h4 { font-weight: 400; letter-spacing: .01em; }
html[data-theme="porcelain"] h1, html[data-theme="porcelain"] h2, html[data-theme="porcelain"] h3, html[data-theme="porcelain"] h4 { font-family: "Space Grotesk", "Helvetica Neue", sans-serif; font-weight: 600; letter-spacing: .015em; }
html[data-theme="citrus"] h1, html[data-theme="citrus"] h2, html[data-theme="citrus"] h3, html[data-theme="citrus"] h4 { font-weight: 650; letter-spacing: -.025em; }

html[data-theme="cozy"] .nav-item.active, html[data-theme="cozy"] .mobile-nav-sheet-item.active { border-radius: 18px 8px 18px 8px; box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.16); }
html[data-theme="library"] .nav-item.active, html[data-theme="library"] .mobile-nav-sheet-item.active { border-radius: 4px 12px 4px 4px; box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 1px 0 rgba(255,255,255,.14); }
html[data-theme="plants"] .nav-item.active, html[data-theme="plants"] .mobile-nav-sheet-item.active { border-radius: 14px 5px 14px 5px; box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.14); }
html[data-theme="zen"] .nav-item.active, html[data-theme="zen"] .mobile-nav-sheet-item.active { border-radius: 10px; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 14%, transparent), inset 0 1px 0 rgba(255,255,255,.1); }
html[data-theme="conservatory"] .nav-item.active, html[data-theme="conservatory"] .mobile-nav-sheet-item.active { border-radius: 18px 6px 18px 6px; box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.16); }
html[data-theme="rain"] .nav-item.active, html[data-theme="rain"] .mobile-nav-sheet-item.active { border-radius: 12px 4px 12px 4px; box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.14); }
html[data-theme="porcelain"] .nav-item.active, html[data-theme="porcelain"] .mobile-nav-sheet-item.active { border-radius: 3px; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 1px 0 rgba(255,255,255,.18); }
html[data-theme="citrus"] .nav-item.active, html[data-theme="citrus"] .mobile-nav-sheet-item.active { border-radius: 16px 5px 16px 5px; box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.15); }
html[data-theme="sunset"] .nav-item.active, html[data-theme="sunset"] .mobile-nav-sheet-item.active { border-radius: 18px 7px 18px 7px; box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 23%, transparent), inset 0 1px 0 rgba(255,255,255,.16); }
html[data-theme="cozy"] ::selection, html[data-theme="library"] ::selection, html[data-theme="plants"] ::selection, html[data-theme="zen"] ::selection, html[data-theme="conservatory"] ::selection, html[data-theme="rain"] ::selection, html[data-theme="porcelain"] ::selection, html[data-theme="citrus"] ::selection, html[data-theme="sunset"] ::selection { background: var(--accent); color: var(--on-accent); }

/* monospace data — room numbers, clocks, counts */
.ui-mono, .room-number, .vacant-room, .checkin-countdown, .sync-meta,
.summary-room-number, .arrival-room, .maintenance-room, .need-list-room,
.vacant-picker-room, .checkout-picker-room {
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* Bed marker shown beside every room number: K = king, Q = queen. */
.room-bed-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  margin-left: 7px;
  border-radius: 5px;
  font: 800 0.72em/1 "Space Mono", ui-monospace, monospace;
  vertical-align: .12em;
  letter-spacing: 0;
}
.room-bed-marker.bed-k {
  color: #baffc8;
  border: 1px solid #34f56b;
  background: rgba(18, 220, 76, .25);
  box-shadow: 0 0 8px rgba(25, 255, 91, .9), 0 0 18px rgba(25, 255, 91, .45);
  animation: bed-marker-green-pulse 1.25s ease-in-out infinite;
}
.room-bed-marker.bed-q {
  color: #c4e7ff;
  border: 1px solid #2ca9ff;
  background: rgba(24, 137, 235, .25);
  box-shadow: 0 0 8px rgba(35, 167, 255, .9), 0 0 18px rgba(35, 167, 255, .45);
  animation: bed-marker-blue-pulse 1.25s ease-in-out infinite;
}
@keyframes bed-marker-green-pulse {
  0%, 100% { filter: brightness(.95); transform: scale(1); }
  50% { filter: brightness(1.45); transform: scale(1.08); }
}
@keyframes bed-marker-blue-pulse {
  0%, 100% { filter: brightness(.95); transform: scale(1); }
  50% { filter: brightness(1.45); transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .room-bed-marker { animation: none; }
}


.button {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 15px;
  color: var(--secondary);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)),
    rgba(255, 255, 255, .035);
  font-weight: 540;
  letter-spacing: .01em;
  transition: background var(--motion) ease, border-color var(--motion) ease,
    color var(--motion) ease, box-shadow var(--motion) ease, transform var(--motion) ease;
  box-shadow: var(--lit-edge), 0 2px 0 -1px rgba(0, 0, 0, .45);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.button:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03)),
    rgba(255, 255, 255, .05);
  color: var(--text);
  border-color: rgba(255, 255, 255, .16);
  transform: translateY(-1px);
}
.button:active {
  transform: translateY(1px);
  box-shadow: var(--lit-edge), 0 0 0 rgba(0, 0, 0, .45);
  transition-duration: 60ms;
}
.button.primary {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 62%, #ffffff) 0%, color-mix(in srgb, var(--accent) 24%, #ffffff) 7%, var(--accent) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 42%),
    var(--accent);
  border-color: color-mix(in srgb, var(--accent) 38%, #ffffff);
  color: var(--on-accent);
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 0 -1px rgba(0, 0, 0, .5);
}
.button.primary:hover {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, #ffffff) 0%, color-mix(in srgb, var(--accent) 40%, #ffffff) 8%, var(--accent-hover) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 45%),
    var(--accent-hover);
  border-color: color-mix(in srgb, var(--accent-hover) 50%, #ffffff);
}
.button.primary:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 2px 6px rgba(0, 0, 0, .25);
}
.button.danger {
  color: #ffd7da;
  border-color: rgba(239, 107, 115, .38);
  background: linear-gradient(180deg, rgba(239, 107, 115, .06), rgba(239, 107, 115, .02));
  box-shadow: var(--lit-edge), 0 2px 0 -1px rgba(0, 0, 0, .45);
}
.button.danger:hover {
  background: rgba(239, 107, 115, .14);
  border-color: rgba(239, 107, 115, .55);
  color: #ffe3e5;
}
.button.ghost {
  background: transparent;
  box-shadow: none;
}
.button.ghost:hover {
  background: rgba(255, 255, 255, .045);
  box-shadow: var(--lit-edge);
}
.button.full { width: 100%; }
.button.small {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 7px;
}
/* Mark finished / Mark replaced / Mark complete — compact, sized to the
   label ("just big enough for the words, no bigger", Stephanie 2026-08-22).
   NOTE: these selectors repeat .button.small so they OUT-SPECIFICITY the
   .button.small rule (0,3,1 > 0,2,0) — the old `button.<class>` form lost
   the cascade and the buttons rendered at .button.small size (30px/12px). */
button.button.small.finish-task,
button.button.small.inv-replaced-button,
button.button.small.quick-add-done-button,
button.button.small.room-item-finish {
  min-height: 22px;
  padding: 3px 9px;
  font-size: 11px;
  line-height: 1.2;
  border-radius: 7px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 62%, #ffffff) 0%, color-mix(in srgb, var(--accent) 24%, #ffffff) 7%, var(--accent) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 42%),
    var(--accent);
  border-color: color-mix(in srgb, var(--accent) 38%, #ffffff);
  color: var(--on-accent);
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 0 -1px rgba(0, 0, 0, .5);
}
.button:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--lit-edge), 0 2px 0 -1px rgba(0, 0, 0, .4);
  filter: saturate(.7);
}
.button.primary:disabled { filter: saturate(.6) brightness(.9); }

/* Prepare Today's Plan — a primary "key" that follows the chosen theme.
   --on-accent is computed in app.js (dark ink on light accents, light ink
   on dark accents) so button labels stay readable in every theme. */
#prepare-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #ffffff) 0%, var(--accent) 62%, color-mix(in srgb, var(--accent) 84%, #000000) 100%);
  border-color: color-mix(in srgb, var(--accent) 55%, #ffffff);
  color: var(--on-accent);
}
/* Sisyphus icon (gold boulder artwork, /icon.png) on the Prepare button —
   desktop shows it beside the label, phone mode icon-only (Stephanie,
   2026-08-28). */
/* Icon-only always (Stephanie, 2026-08-29): compact square button, same
   footprint as the print button; tooltip carries "Prepare Today's Plan". */
#prepare-button.prepare-icon-button {
  width: 46px; min-width: 46px; padding: 0; justify-content: center;
  font-size: 0;
}
#prepare-button .prepare-icon { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; display: inline-block; flex: 0 0 auto; margin: 0 auto; }
#prepare-button:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent-hover) 78%, #ffffff) 0%, var(--accent-hover) 62%, var(--accent-hover) 100%);
  border-color: color-mix(in srgb, var(--accent-hover) 60%, #ffffff);
  color: var(--on-accent);
}

/* done-state buttons (Stripped / Bed made / Finished timestamps) read as
   quiet punched tickets, not disabled rubble */
.button.stripped-button:disabled,
.button.bedmade-button:disabled,
.button.finished-button:disabled,
.button.messaged-button:disabled {
  opacity: 1;
  background: rgba(48, 183, 123, .07);
  border-color: rgba(48, 183, 123, .28);
  color: var(--muted);
  filter: none;
  box-shadow: none;
  font-weight: 540;
}

/* ------------------------------------------------------------------ */
/* 5. FORMS — recessed keywells                                        */
/* ------------------------------------------------------------------ */

.form-stack { display: grid; gap: 15px; margin-top: 24px; }
.form-stack.compact { margin-top: 4px; }
.form-stack label {
  display: grid;
  gap: 7px;
  color: var(--secondary);
  font-size: 13px;
  font-weight: 540;
}

input, select, textarea { border-radius: 8px; }

.form-stack input, .form-stack select, textarea, select,
.task-form input, .task-form select,
.schedule-name-input, .schedule-shift-input, .schedule-checkout-input,
.timeoff-date, .timeoff-details,
.fix-add-form input, .need-add-form input,
.manager-room-card .fix-add-form input,
.linen-entry-form input,
.linen-stock-input,
.message-compose-form select, .message-compose-form textarea,
.employee-message-form textarea,
.edit-field input,
.checkout-history-bar input[type=date] {
  width: 100%;
  border: 1px solid var(--well-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 55%),
    rgba(255, 255, 255, .024);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .32), inset 0 -1px 0 rgba(255, 255, 255, .03);
  transition: border-color var(--motion) ease, box-shadow var(--motion) ease, background var(--motion) ease;
}
.form-stack input:focus, .form-stack select:focus, textarea:focus, select:focus,
.task-form input:focus, .task-form select:focus, .schedule-name-input:focus,
.schedule-shift-input:focus, .schedule-checkout-input:focus, .timeoff-date:focus,
.timeoff-details:focus, .fix-add-form input:focus, .need-add-form input:focus,
.linen-entry-form input:focus, .linen-stock-input:focus, .message-compose-form select:focus,
.message-compose-form textarea:focus, .employee-message-form textarea:focus,
.edit-field input:focus, .checkout-history-bar input[type=date]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring), inset 0 1px 2px rgba(0, 0, 0, .3);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
/* Schedule shift placeholders ("OFF") read brighter (Stephanie, 2026-08-27). */
.schedule-shift-input::placeholder { color: var(--secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
textarea { resize: vertical; min-height: 96px; }
input[type=checkbox] { accent-color: var(--accent); }
input[type=date] { color-scheme: dark; }

.form-message { min-height: 20px; color: var(--red); font-size: 13px; }
.security-note {
  text-align: center;
  color: var(--faint);
  font-size: 12px;
  margin: 20px 0 0;
  letter-spacing: .02em;
}
.security-note::before { content: "◈ "; color: var(--accent); }

/* ------------------------------------------------------------------ */
/* 6. AUTH — the front desk sign-in plate                              */
/* ------------------------------------------------------------------ */

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.auth-card {
  position: relative;
  width: min(420px, 100%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 26%),
    rgba(15, 16, 17, .96);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 36px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
/* dawn seam */
.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--seam-strong);
  opacity: .7;
}
/* ticket punch — a crisp ring-hole on every plate */
.auth-card::after {
  content: "";
  position: absolute;
  top: 10px; right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 8px var(--accent-soft-2);
}

/* flame-cut brand mark: a sharp-cut plate holding the P */
.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-m) 6px 6px var(--radius-m);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(155deg, color-mix(in srgb, var(--accent) 70%, #ffffff), var(--accent) 55%, color-mix(in srgb, var(--accent) 30%, #101018) 140%);
  color: white;
  font-size: 22px;
  font-weight: 640;
  line-height: 1;
  box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 8px 22px -8px var(--accent-soft-2);
  letter-spacing: -.02em;
}
.brand-mark.small {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-m) 5px 5px var(--radius-m);
  font-size: 16px;
}

/* login card: the Sisyphus icon (rounded plaque is baked into the artwork) */
.brand-mark-img {
  background: none;
  box-shadow: none;
  border-radius: 9px;
  object-fit: cover;
  display: block;
}

.auth-brand-mark {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 10px 30px -12px var(--accent-soft-2);
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* 7. SHELL — sidebar rail + topbar                                    */
/* ------------------------------------------------------------------ */

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 20px 14px;
  border-right: 1px solid var(--border-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .016), rgba(255, 255, 255, 0) 34%),
    #0b0c0d;
  display: flex;
  flex-direction: column;
  z-index: 3;
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 2px 6px 22px;
  position: relative;
}
/* dawn seam under the brand block */
.brand::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; bottom: 12px;
  height: 1px;
  background: var(--seam);
  opacity: .75;
}
.brand > div:last-child { display: grid; }
.brand strong { font-size: 14px; font-weight: 620; letter-spacing: .02em; }
.brand span:last-child { font-size: 11px; color: var(--faint); letter-spacing: .14em; text-transform: uppercase; }

nav { display: grid; gap: 3px; }

/* rail navigation: flat console keys, active = lit tick */
.nav-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 0;
  border-radius: 8px;
  padding: 11px 10px 9px 13px;
  min-height: 40px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-weight: 520;
  letter-spacing: .01em;
  transition: background var(--motion) ease, color var(--motion) ease, box-shadow var(--motion) ease;
  box-shadow: none;
}
.nav-item::before {
  /* left tick — lights on hover, filled when active */
  content: "";
  position: absolute;
  left: 2px; top: 50%;
  width: 3px; height: 16px;
  transform: translateY(-50%) scaleY(.35);
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--motion) ease, transform var(--motion) ease, box-shadow var(--motion) ease;
}
.nav-item:hover {
  /* Hover highlight follows the theme accent (not a fixed pink/white) —
     a soft accent-tinted wash plus a dimmed label (Stephanie, 2026-08-27).
     The first background line is the fallback for browsers without
     color-mix() (older phones); the color-mix gradient overrides it where
     supported. */
  background: var(--accent-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
  color: var(--text);
}
/* Kill the phone browser's default tap-highlight (a pink/purple ripple that
   never follows the theme) app-wide — our own accent states show feedback
   instead (Stephanie, 2026-08-27: "hover highlight is still bright pink and
   doesnt change with the theme"). */
html {
  -webkit-tap-highlight-color: transparent;
}
.nav-item, #mobile-nav-select, button, a {
  -webkit-tap-highlight-color: transparent;
}
.nav-item:hover::before { opacity: .4; transform: translateY(-50%) scaleY(.85); }
.nav-item.active {
  /* Active tab: vivid accent, but TRANSLUCENT like the header (Stephanie,
     2026-08-27 — "color looks good but now it's more opaque than the header").
     The accent is blended with transparent (not a solid base), so the tab
     reads at the header's translucency while the stronger percentage keeps
     the saturated color. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 16%, transparent));
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.nav-item.active::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
  box-shadow: 0 0 10px var(--accent-soft-2);
}
.nav-item span { color: var(--faint); width: 22px; text-align: center; font-size: 15px; line-height: 1; }
.nav-item.active span { color: var(--accent-ink); }
/* No gray focus ring on the tab selector — the active state already shows
   the current tab clearly (Stephanie, 2026-08-27, "grayish bubble around the
   tab selector"). */
.nav-item:focus, .nav-item:focus-visible,
#mobile-nav-select:focus, #mobile-nav-select:focus-visible { outline: none; box-shadow: none; }

/* drag-sort states (existing behavior, better visuals) */
.nav-item.dragging { opacity: .45; box-shadow: 0 0 0 2px var(--ring); border-radius: 8px; }
.nav-item.drag-over { box-shadow: 0 0 0 2px var(--ring); }

/* Tab reorder control (desktop + mobile). Arrow buttons move the active tab. */
.nav-reorder {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 10px;
  padding: 3px 4px;
}
.nav-reorder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)), rgba(255,255,255,.035);
  color: var(--text);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--lit-edge);
  transition: background var(--motion) ease, border-color var(--motion) ease, color var(--motion) ease;
}
.nav-reorder-btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03)), rgba(255,255,255,.05); color: var(--accent); border-color: rgba(255,255,255,.16); }
.nav-reorder-hint { font-size: 10px; color: var(--muted); letter-spacing: .02em; }

.sidebar-foot { margin-top: auto; }
.user-chip {
  padding: 12px 8px;
  margin-bottom: 6px;
  display: grid;
  border-top: 1px solid var(--border-soft);
  margin-top: 8px;
}
.user-chip strong { font-size: 13px; }
.user-chip span { font-size: 11px; color: var(--muted); text-transform: capitalize; }

.workspace {
  margin-left: var(--sidebar);
  min-height: 100vh;
  padding: 0 34px 72px;
  box-shadow: inset 5px 0 12px -10px rgba(0, 0, 0, .7);
}

.topbar {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px;
  /* Header color + translucence match the active tab selector exactly — the
     same accent-tinted glass recipe as .nav-item.active (34% → 16%,
     translucent, accent 60% border) so both read identically (Stephanie,
     2026-08-27 — she prefers the tab selector look). */
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 16%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: var(--radius-m);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  position: sticky;
  top: 0;
  z-index: 2;
}
/* the roof line — dawn seam along the top of the board */
.topbar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--seam);
  opacity: .55;
  z-index: 1;
}
/* punched ticket hole, same as the cards */
.topbar::after {
  content: "";
  position: absolute;
  top: 9px; right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 7px var(--accent-soft-2);
  z-index: 1;
}
.topbar .eyebrow { margin: 0 0 5px; }
.topbar h1 { font-size: 22px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
/* Header controls share one quiet instrument-panel treatment. Individual
   actions still communicate through their labels/tooltips, not loud colors. */
.top-actions > .button,
.top-actions .notification-button {
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0)),
    var(--surface);
  border-color: var(--border);
  color: var(--secondary);
  box-shadow: var(--lit-edge), 0 2px 0 -1px rgba(0, 0, 0, .45);
}
.top-actions > .button:hover,
.top-actions .notification-button:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, 0)),
    var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--text);
}

/* gate clock — the check-in countdown as a departure-board plate */
.checkin-countdown {
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 680;
  color: var(--accent-ink);
  letter-spacing: .02em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.checkin-countdown::before {
  content: "CHECK-IN";
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--faint);
  margin-right: 9px;
  font-weight: 590;
  font-family: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.theme-select {
  min-height: 34px;
  padding: 5px 9px 5px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--secondary);
  font-size: 12px;
  font-weight: 540;
  cursor: pointer;
  box-shadow: var(--lit-edge);
}
.theme-select:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ------------------------------------------------------------------ */
/* 8. STATUS STRIP / SECTION HEADINGS                                  */
/* ------------------------------------------------------------------ */

.view { padding-top: 24px; animation: view-rise var(--motion-slow) cubic-bezier(.2, .7, .25, 1); }
@keyframes view-rise {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.status-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.status-strip h2, .section-heading h2 {
  font-size: 22px;
  font-weight: 560;
  letter-spacing: -.4px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
/* punched room-stamp beside page headings */
.status-strip h2::before, .section-heading h2::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  background: var(--accent);
  border-radius: var(--radius-s) var(--radius-s) var(--radius-s) 2px;
  box-shadow: 0 0 12px var(--accent-soft-2);
}
.status-strip p { margin: 4px 0 0; }
.sync-meta {
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--faint);
  font-size: 11px;
}

.mode-banner {
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid rgba(226, 173, 76, .26);
  background: linear-gradient(90deg, rgba(226, 173, 76, .08), rgba(226, 173, 76, .02));
  color: #e7c98d;
  margin-bottom: 18px;
  font-size: 13px;
  box-shadow: var(--lit-edge);
}
.mode-banner.live {
  border-color: rgba(48, 183, 123, .32);
  background: linear-gradient(90deg, rgba(48, 183, 123, .08), rgba(48, 183, 123, .02));
  color: #9be0bf;
}

.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }

/* Housekeeper/bedmaker Today greeting (2026-08-28, Stephanie): centered,
   warm Sentient serif across the WHOLE line. */
.housekeeper-greeting {
  font-family: "Sentient", Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.2px;
  text-align: center;
  margin: 2px 0 18px;
  color: var(--accent);
  /* WHOLE LINE one theme color (Stephanie, 2026-08-29: "make the whole good
     morning name one color, a bit brighter") — the greeting reads as a single
     accent-colored line instead of text+colored-name. */
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.housekeeper-greeting em {
  font-style: italic;
  font-weight: 700;
  font-size: 34px;
  color: var(--accent-hover, var(--accent));
  /* Brighter name tint + a NOTICEABLE glow (Stephanie, 2026-08-29): a wider,
     double-layer halo in the accent color so the name visibly lights up. */
  text-shadow:
    0 0 14px color-mix(in srgb, var(--accent) 70%, transparent),
    0 0 34px color-mix(in srgb, var(--accent) 45%, transparent),
    0 1px 0 rgba(0, 0, 0, .25);
  /* SUBTLE PULSE (Stephanie, 2026-08-29): the halo breathes — the glow eases
     between the base strength and a slightly wider bloom on a slow, gentle
     rhythm. Color and text never change, only the glow's reach. */
  animation: greeting-glow-pulse 3.2s ease-in-out infinite;
}
@keyframes greeting-glow-pulse {
  0%, 100% {
    text-shadow:
      0 0 14px color-mix(in srgb, var(--accent) 70%, transparent),
      0 0 34px color-mix(in srgb, var(--accent) 45%, transparent),
      0 1px 0 rgba(0, 0, 0, .25);
  }
  50% {
    text-shadow:
      0 0 20px color-mix(in srgb, var(--accent) 85%, transparent),
      0 0 52px color-mix(in srgb, var(--accent) 60%, transparent),
      0 1px 0 rgba(0, 0, 0, .25);
  }
}
@media (prefers-reduced-motion: reduce) {
  .housekeeper-greeting em { animation: none; }
}
.section-heading .eyebrow { margin: 0 0 4px; }
.section-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Reference tab (housekeepers/bedmakers, 2026-08-28): one card per room. */
.reference-room-card { break-inside: avoid; }
.reference-block { padding: 8px 14px 4px; }
.reference-block strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.reference-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; color: var(--text);
}
.reference-item:last-child { border-bottom: none; }
.reference-item.done span:first-child { text-decoration: line-through; opacity: .6; }
.reference-state { font-size: 11px; color: var(--muted); white-space: nowrap; }
.reference-item.done .reference-state { color: var(--faint); }

/* ------------------------------------------------------------------ */
/* 9. METRICS — arrival-board numerals                                 */
/* ------------------------------------------------------------------ */

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.metric {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 30%),
    rgba(255, 255, 255, .018);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 16px 17px 15px;
  overflow: hidden;
  box-shadow: var(--lit-edge), 0 10px 26px -22px rgba(0, 0, 0, .6);
  transition: border-color var(--motion) ease, transform var(--motion) ease;
}
.metric::before {
  /* punched ticket hole */
  content: "";
  position: absolute;
  top: 9px; right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 7px var(--accent-soft-2);
}
.metric::after {
  /* dawn seam */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--seam);
  opacity: .6;
}
.metric span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 8px; letter-spacing: .03em; }
.metric strong {
  font-size: 28px;
  letter-spacing: -.8px;
  font-weight: 560;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.metric small { display: block; color: var(--faint); font-size: 10px; margin-top: 6px; }
.today-work-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 17px 16px;
}
.today-work-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, .018);
  color: var(--secondary);
  text-align: left;
}
.today-work-link:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }
.today-work-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.today-work-link strong { flex: 0 0 auto; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/* 10. PANELS — ticket-stub plates                                     */
/* ------------------------------------------------------------------ */

.ops-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 14px; }
/* Even vertical rhythm for the assignments grid (matches the 18px card gap
   used everywhere else) — top/bottom margins + row gap all 18px. */
#checkout-view .ops-grid { margin: 18px 0; row-gap: 18px; }

.panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .026), rgba(255, 255, 255, 0) 22%),
    rgba(255, 255, 255, .018);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--lit-edge), 0 14px 34px -26px rgba(0, 0, 0, .7);
  transition: border-color var(--motion) ease, box-shadow var(--motion) ease;
}
.panel::before {
  /* dawn seam */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--seam);
  opacity: .55;
  z-index: 1;
}
.panel::after {
  /* punched ticket hole */
  content: "";
  position: absolute;
  top: 9px; right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 7px var(--accent-soft-2);
  z-index: 1;
}
.panel + .panel { margin-top: 18px; }
@media (hover: hover) {
  .panel:hover {
    border-color: rgba(255, 255, 255, .14);
    box-shadow: var(--lit-edge), 0 20px 44px -28px rgba(0, 0, 0, .8);
  }
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 17px 13px;
  border-bottom: 1px solid var(--border-soft);
}
.panel-head h3 {
  font-size: 14px;
  font-weight: 620;
  margin: 0;
  letter-spacing: .012em;
}
.panel-head h3::before {
  content: "▸ ";
  color: var(--accent);
  font-size: 11px;
  vertical-align: 1px;
}
.panel-body { padding: 14px 17px; }
.panel-head-actions { display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------------ */
/* 11. TABLES                                                           */
/* ------------------------------------------------------------------ */

.room-table { width: 100%; border-collapse: collapse; }
.room-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--faint);
  font-weight: 620;
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent);
}
.room-table th:first-child, .room-table td:first-child { padding-left: 17px; }
.room-table th:last-child, .room-table td:last-child { padding-right: 17px; }
.room-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.room-table tr:last-child td { border-bottom: 0; }
.room-table tbody tr { transition: background var(--motion) ease, box-shadow var(--motion) ease; }
.room-table tbody tr:hover td {
  background: linear-gradient(90deg, var(--accent-soft), transparent 75%);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Fix items under each Today's Remaining Checkouts row (2026-08-25) */
.today-fix-row td {
  padding: 0 17px 12px 17px;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
}
.today-fix-row:hover td { background: transparent; box-shadow: none; }
.today-fix-block { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.today-fix-block .fix-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.today-fix-block .fix-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 7px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)), rgba(255,255,255,.035); border: 1px solid var(--border); }
.today-assign-list { display: grid; gap: 6px; }
.today-assign-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), rgba(255,255,255,.03); border: 1px solid var(--border); }
.today-assign-person { flex: 1 1 auto; min-height: 34px; text-align: left; border: 0; background: transparent; color: var(--text); font-weight: 600; cursor: pointer; padding: 0; border-radius: 7px; }
.today-assign-person:hover { color: var(--accent-ink); }
.today-assign-count { margin-left: 6px; }
.hk-assign-body { display: grid; gap: 7px; margin-top: 14px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.hk-assign-room { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), rgba(255,255,255,.03); border: 1px solid var(--border); cursor: pointer; flex-wrap: wrap; }
.hk-assign-room.checked { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(255,255,255,.02)); }
.hk-assign-room input[type="checkbox"] { accent-color: var(--accent); width: 17px; height: 17px; flex: 0 0 auto; }
.hk-room-no { font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; min-width: 40px; }
.hk-room-kind { color: var(--muted); font-size: 12px; }
.hk-assign-owner { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.hk-assign-dialog { width: min(560px, calc(100vw - 28px)); }
.hk-assign-common-wrap { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; }
.hk-assign-common-head { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hk-assign-common-list { display: grid; gap: 7px; max-height: 30vh; overflow: auto; padding-right: 4px; }
.hk-assign-common { display: flex; align-items: baseline; gap: 8px; padding: 8px 11px; border-radius: 9px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), rgba(255,255,255,.03); border: 1px solid var(--border); font-size: 13px; }
.hk-assign-common::before { content: '🧹'; font-size: 12px; flex: 0 0 auto; }
.hk-assign-common-head.muted { font-weight: 500; letter-spacing: 0; text-transform: none; }
.today-fix-add-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.today-fix-add-form input { width: 170px; padding: 5px 9px; border: 1px solid var(--well-border); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)), rgba(255,255,255,.035); color: var(--text); min-height: 30px; }
.today-fix-add-form .button { min-height: 30px; padding: 4px 10px; font-size: 12px; }

/* room key tag — the app's signature data artifact */
.room-number {
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 640;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.room-number::before {
  content: "";
  width: 7px; height: 7px;
  flex: 0 0 auto;
  background: var(--accent);
  opacity: .8;
  clip-path: polygon(0 0, 100% 22%, 100% 78%, 0 100%, 38% 50%);
}

.status-badge { padding: 3px 8px; }

/* ------------------------------------------------------------------ */
/* 12. ROOM CARDS & ARRIVAL TIERS                                      */
/* ------------------------------------------------------------------ */

.housekeeper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.room-card {
  position: relative;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, 0) 30%),
    rgba(255, 255, 255, .02);
  overflow: hidden;
  box-shadow: var(--lit-edge), 0 14px 30px -24px rgba(0, 0, 0, .7);
  transition: border-color var(--motion) ease, transform var(--motion) ease, box-shadow var(--motion) ease;
}
.room-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--seam);
  opacity: .55;
}
.room-card::after {
  content: "";
  position: absolute;
  top: 9px; right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 7px var(--accent-soft-2);
}
@media (hover: hover) {
  .room-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: var(--lit-edge), 0 22px 46px -26px rgba(0, 0, 0, .85);
  }
}
.room-card-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.room-card .room-number { font-size: 27px; font-weight: 680; }
.room-card .room-number::before {
  width: 10px; height: 10px;
  background: var(--accent);
  opacity: .85;
  clip-path: polygon(0 0, 100% 22%, 100% 78%, 0 100%, 38% 50%);
}
.room-card p { color: var(--muted); font-size: 12px; margin: 5px 0; }
.room-card .button { width: 100%; }
.room-card.finished {
  border-color: rgba(48, 183, 123, .32);
  background:
    linear-gradient(180deg, rgba(48, 183, 123, .05), rgba(48, 183, 123, .015)),
    rgba(255, 255, 255, .012);
}
.room-card.finished::before {
  background: linear-gradient(90deg, rgba(48, 183, 123, .6), transparent 80%);
  opacity: .7;
}
.room-card.finished::after { background: var(--green); box-shadow: 0 0 8px rgba(48, 183, 123, .5); }

/* Housekeeper room cards — a little more boutique-hotel, while keeping the
   operational information calm and readable. */
.housekeeper-grid .room-card {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 32%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -18px 34px rgba(0, 0, 0, .12),
    0 16px 34px -25px color-mix(in srgb, var(--accent) 46%, #000);
}
.housekeeper-grid .room-card::before {
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 82%, #fff), transparent);
  box-shadow: 0 0 13px color-mix(in srgb, var(--accent) 50%, transparent);
  opacity: .9;
}
.housekeeper-grid .room-card::after {
  top: 13px;
  right: 13px;
  width: 7px;
  height: 7px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 78%, transparent);
}
.housekeeper-grid .room-card-head {
  position: relative;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.housekeeper-grid .room-card .room-number {
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 32%, transparent);
}
.housekeeper-grid .room-card:not(.finished).arrival-tier {
  border-color: color-mix(in srgb, var(--purple) 58%, var(--border));
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--purple) 22%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--purple) 13%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
}
.housekeeper-grid .room-card:not(.finished).early-tier {
  border-color: color-mix(in srgb, #ff2fb4 58%, var(--border));
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, #ff2fb4 22%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, #ff2fb4 12%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
}
.housekeeper-grid .room-card.finished {
  border-color: color-mix(in srgb, var(--green) 48%, var(--border));
  background:
    radial-gradient(circle at 92% 8%, rgba(48, 183, 123, .18), transparent 34%),
    linear-gradient(145deg, rgba(48, 183, 123, .11), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 -18px 34px rgba(0, 0, 0, .1),
    0 16px 34px -25px rgba(48, 183, 123, .64);
}
@media (hover: hover) {
  .housekeeper-grid .room-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .12),
      0 20px 40px -24px color-mix(in srgb, var(--accent) 72%, #000);
  }
}
@media (prefers-reduced-motion: reduce) {
  .housekeeper-grid .room-card { transition: none; }
}

/* Manager room cards should feel like the same polished operational surface as
   housekeeper cards. Keep status-specific colors below/above this treatment
   intact by only adding the shared depth, highlight, and motion language. */
.manager-room-card {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 32%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -18px 34px rgba(0, 0, 0, .12),
    0 16px 34px -25px color-mix(in srgb, var(--accent) 46%, #000);
}
.manager-room-card::before {
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 82%, #fff), transparent);
  box-shadow: 0 0 13px color-mix(in srgb, var(--accent) 50%, transparent);
  opacity: .9;
}
.manager-room-card::after {
  top: 13px;
  right: 13px;
  width: 7px;
  height: 7px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 78%, transparent);
}
.manager-room-card .room-card-head {
  position: relative;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.manager-room-card .room-number { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 32%, transparent); }
@media (hover: hover) {
  .manager-room-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .12),
      0 20px 40px -24px color-mix(in srgb, var(--accent) 72%, #000);
  }
}
@media (prefers-reduced-motion: reduce) {
  .manager-room-card { transition: none; }
}

.room-row td { background: transparent; }
.room-card.arrival-tier {
  border-color: color-mix(in srgb, var(--signal) 55%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--signal) 30%, transparent), color-mix(in srgb, var(--signal) 8%, transparent)),
    rgba(255, 255, 255, .012);
  box-shadow: inset 3px 0 0 var(--signal);
}
.room-card.early-tier {
  border-color: color-mix(in srgb, var(--signal) 45%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--signal) 18%, transparent), color-mix(in srgb, var(--signal) 4%, transparent)),
    rgba(255, 255, 255, .012);
}
.room-card.finished.arrival-tier, .room-card.finished.early-tier {
  border-color: rgba(48, 183, 123, .32);
  background:
    linear-gradient(180deg, rgba(48, 183, 123, .05), rgba(48, 183, 123, .015)),
    rgba(255, 255, 255, .012);
}

/* STAR + PRIORITY REMOVED (Stephanie, 2026-08-29): no more priority stars —
   arrivals show a purple Arrival badge, early arrivals a HOT PINK badge with a
   pulsing glow. Never both on one room (mutually exclusive server-side). */
.badge.early-badge {
  color: #ff2fb4;
  border-color: color-mix(in srgb, #ff2fb4 55%, transparent);
  background: color-mix(in srgb, #ff2fb4 10%, transparent);
  animation: early-pulse 1.6s ease-in-out infinite;
}
#dashboard-view .badge.early-badge {
  color: #ff2fb4;
  border-color: color-mix(in srgb, #ff2fb4 55%, transparent);
  background: color-mix(in srgb, #ff2fb4 12%, transparent);
}
@keyframes early-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, #ff2fb4 45%, transparent);
    text-shadow: 0 0 6px color-mix(in srgb, #ff2fb4 55%, transparent);
    border-color: color-mix(in srgb, #ff2fb4 55%, transparent);
  }
  50% {
    box-shadow: 0 0 14px 3px color-mix(in srgb, #ff2fb4 60%, transparent);
    text-shadow: 0 0 14px color-mix(in srgb, #ff2fb4 95%, transparent), 0 0 26px color-mix(in srgb, #ff2fb4 55%, transparent);
    border-color: #ff2fb4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .badge.early-badge { animation: none; }
}
/* "Arrival" tag shown next to a room's checkout status (Stephanie, 2026-08-26). */
.badge.arrival-badge { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 48%, transparent); }
#dashboard-view .badge.arrival-badge { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 45%, transparent); background: color-mix(in srgb, var(--purple) 10%, transparent); }
.priority-toggle { margin-left: 10px; }

.room-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.room-card-actions .button { flex: 1 1 auto; }

/* Housekeeper room actions: the card-wide button rule above is useful for
   single actions, but makes Stripped / Bed Made / Finished each claim a full
   row. Keep these controls intrinsic-width and let the group wrap as one unit
   when a narrow card cannot hold all three labels. */
.room-card-actions { flex-wrap: wrap; }
.room-card-actions .button {
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  padding: 8px 10px;
  box-sizing: border-box;
}

/* My Rooms keeps every room-status action on the same compact type scale. */
.myrooms-view .room-card-actions .button {
  font-size: 12px;
}

/* ------------------------------------------------------------------ */
/* 13. LISTS & ROWS                                                     */
/* ------------------------------------------------------------------ */

.notes-list { display: grid; gap: 8px; }
.note {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .012));
  border: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--secondary);
  box-shadow: var(--lit-edge);
}
.note strong { flex: 0 0 auto; }
.note span { min-width: 0; text-align: right; }
.note-replace { align-items: center; }
/* Keep the action button (and "Replaced" badge) at label width instead of
   letting it stretch to fill the flexible column in .notes-list's grid —
   "just big enough for the words, no bigger" (Stephanie 2026-08-22). Higher
   specificity than .notes-list .note, so it wins in every media query. */
.notes-list .note.note-replace { grid-template-columns: minmax(0, 1fr) auto; }
.note-replace .note-main { display: grid; text-align: left; }
.note-replace .note-main span { font-size: 11px; color: var(--muted); }
.notes-list .note { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-content: start; }

/* tasks */
.task-list { display: grid; }
.task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--motion) ease;
}
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: rgba(255, 255, 255, .018); }
.task-main { display: grid; gap: 2px; min-width: 0; }
.task-main strong { font-size: 13px; }
.task-main span { font-size: 11px; color: var(--muted); }
.task-controls { display: flex; gap: 8px; align-items: center; }
.task-meta { display: flex; align-items: center; }

.task-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; padding: 14px 17px; }
.deep-clean-task-form { grid-template-columns: 110px minmax(0, 1fr) auto; }

/* staff */
.staff-list { display: grid; }
.staff-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--motion) ease;
}
/* Name/details block sits leftmost; controls in the middle, buttons right. */
.staff-row .staff-main { order: -1; min-width: 0; }
.staff-row:last-child { border-bottom: 0; }
.staff-row:hover { background: rgba(255, 255, 255, .02); }
.staff-row strong { display: block; font-size: 13px; }
.staff-row span { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.staff-row-actions { display: flex; gap: 6px; }
.staff-row-actions { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.staff-limit-col { flex: 0 0 auto; }
.staff-info { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.staff-main { min-width: 0; display: grid; justify-items: start; }
.room-limit-field { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); font-weight: 560; }
.room-limit-field .room-limit-input { width: 58px; min-height: 30px; padding: 3px 6px; border-radius: 7px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)), rgba(255,255,255,.035); color: var(--secondary); font: 500 12px/1 "Space Mono", ui-monospace, Menlo, monospace; text-align: center; box-shadow: var(--lit-edge); }
.room-limit-note { display: block; margin-top: 4px; font-size: 10px; }
.staff-role-field { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); font-weight: 560; }
.staff-role-field .staff-role-select { min-height: 30px; padding: 4px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 7px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)), rgba(255,255,255,.035); color: var(--secondary); box-shadow: var(--lit-edge); }
.staff-mentor-col { flex: 0 0 auto; margin-top: 4px; }
.mentor-field { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); font-weight: 560; }
.mentor-field .mentor-select { min-height: 30px; padding: 4px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 7px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)), rgba(255,255,255,.035); color: var(--secondary); box-shadow: var(--lit-edge); }
.room-limit-field .room-limit-input:hover, .staff-role-field .staff-role-select:hover, .mentor-field .mentor-select:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03)), rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  color: var(--text);
}
.room-limit-field .room-limit-input:focus, .staff-role-field .staff-role-select:focus, .mentor-field .mentor-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring), var(--lit-edge);
}
.staff-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.staff-form-actions .button { flex: 1 1 140px; }
.removal-warning { color: var(--red); font-size: 12px; font-weight: 620; }

/* schedule rows */
.schedule-list { display: grid; }
.schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--border-soft);
}
.schedule-row:last-child { border-bottom: 0; }
.schedule-name { font-weight: 600; font-size: 14px; }
.schedule-shift { color: var(--text); font-size: 13px; font-weight: 560; }
.schedule-shift.off { color: var(--secondary); text-transform: uppercase; letter-spacing: .04em; font-weight: 660; }

/* alerts / messages */
.alert-list { display: grid; }
.alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--motion) ease;
}
.alert-row:last-child { border-bottom: 0; }
.alert-row:hover { background: rgba(255, 255, 255, .018); }
.alert-row.read { opacity: .6; }
.alert-main { display: grid; gap: 3px; min-width: 0; }
.alert-text { font-size: 13px; }
.alert-meta { font-size: 11px; color: var(--faint); text-transform: capitalize; }

/* needs */
.need-list { display: grid; }
.need-list-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--border-soft);
}
.need-list-row:last-child { border-bottom: 0; }
.need-list-room { font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 660; }
.need-list-item { font-size: 13px; }

/* vacant */
.vacant-list { display: grid; }
.vacant-item {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--border-soft);
}
.vacant-item:last-child { border-bottom: 0; }
.vacant-room { font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; font-weight: 700; }
.vacant-time { color: var(--green); font-size: 12px; }
.vacant-button { color: #9be0bf; border-color: rgba(48, 183, 123, .38); }
.vacant-badge { color: #9be0bf; }
.vacant-notes { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 6px; }

/* todos */
.todo-list { display: grid; }
.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--border-soft);
}
.todo-item:last-child { border-bottom: 0; }
.todo-item.done { opacity: .55; }
.todo-item.scheduled { border-style: dashed; opacity: .82; }
.todo-main { display: grid; gap: 2px; min-width: 0; }
.todo-text { font-size: 13px; }
.todo-meta { font-size: 11px; color: var(--muted); }
.todo-add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.todo-add-form label { display: grid; gap: 5px; color: var(--secondary); font-size: 12px; }
.todo-add-form input { min-width: 0; }
/* Translucent entry box + add button, matching the buttons' glass. */
.todo-add-form input {
  border: 1px solid var(--well-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)),
    rgba(255, 255, 255, .035);
  color: var(--text);
  box-shadow: var(--lit-edge);
}
.todo-add-form .button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)),
    rgba(255, 255, 255, .035);
  border-color: var(--border);
  color: var(--text);
}
.todo-add-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring), var(--lit-edge);
}
.todo-add-form .button:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03)),
    rgba(255, 255, 255, .05);
  color: var(--text);
  border-color: rgba(255, 255, 255, .16);
}
.todo-schedule-form { grid-template-columns: minmax(0, 1fr) minmax(130px, .5fr) auto; }

/* timeoff */
.timeoff-panel .panel-head .muted { color: var(--secondary); font-weight: 560; }
.timeoff-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; }
.timeoff-form label { display: grid; gap: 5px; font-size: 11px; color: var(--secondary); font-weight: 580; }
.timeoff-history, .timeoff-approvals { margin-top: 10px; border-top: 1px solid var(--border-soft); padding: 4px 0; }
/* Manager notes list (durable, survives Clear — 2026-08-29) */
.manager-note-form { display: flex; gap: 8px; margin-bottom: 10px; }
.manager-note-form input { flex: 1; min-width: 0; }
.manager-note-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border-soft);
}
.manager-note-row:last-child { border-bottom: none; }
.manager-note-text { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.manager-note-row.done .manager-note-text { text-decoration: line-through; color: var(--muted); }
.manager-note-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }
.manager-note-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.manager-notes-done summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 6px 0; }
.manager-notes-free { margin-top: 10px; }
.manager-notes-free summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.manager-notes-free textarea { width: 100%; min-height: 70px; margin-top: 6px; }

/* Room Control Board: one compact row per room — room | status | category | assignee */
.room-board-body { padding: 8px 10px 12px; }
.board-head, .board-row {
  display: grid;
  grid-template-columns: 3.2em 1fr 1fr 1fr;
  gap: 6px;
  align-items: center;
}
.board-head {
  padding: 4px 6px 8px;
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #667085);
}
.board-row { padding: 3px 6px; border-radius: 10px; }
.board-row:nth-child(odd) { background: color-mix(in srgb, var(--border-soft, #e5e7eb) 40%, transparent); }
.board-row.blocked { opacity: .6; }
.board-room { font-weight: 640; font-variant-numeric: tabular-nums; }
.board-row .status-badge { width: 100%; text-align: left; }
.board-row select {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  font-size: 12.5px;
  border: 1px solid var(--border-soft, #e5e7eb);
  border-radius: 9px;
  /* Translucent, theme-matched (Stephanie, 2026-08-29): tints from the active
     theme instead of a solid white box. */
  background: color-mix(in srgb, var(--surface, #fff) 55%, transparent);
  color: var(--text, #111);
}
.board-row.board-vacant { background: linear-gradient(90deg, rgba(43, 190, 137, .15), rgba(43, 190, 137, .04)); border-left: 3px solid #2fbe89; }
.board-row.board-occupied { background: linear-gradient(90deg, rgba(255, 159, 67, .16), rgba(255, 159, 67, .04)); border-left: 3px solid #ff9f43; }
.board-row.board-finished { background: linear-gradient(90deg, rgba(55, 196, 155, .14), rgba(55, 196, 155, .035)); border-left: 3px solid #37c49b; }
.board-row.board-checkout { background: linear-gradient(90deg, rgba(74, 145, 255, .12), rgba(74, 145, 255, .025)); border-left: 3px solid #4a91ff; }
.board-row.board-blocked { background: linear-gradient(90deg, rgba(239, 94, 117, .14), rgba(239, 94, 117, .035)); border-left: 3px solid #ef5e75; }
.board-row.board-vacant .board-room, .board-row.board-occupied .board-room, .board-row.board-finished .board-room, .board-row.board-checkout .board-room, .board-row.board-blocked .board-room { color: var(--text); }
@media (max-width: 700px) {
  .today-work-links { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 14px 14px; }
  .room-board-body { padding: 8px; }
  .board-head { display: none; }
  .board-row {
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 7px;
    padding: 9px 8px 9px 7px;
    margin: 6px 0;
    border: 1px solid var(--border-soft, rgba(255,255,255,.12));
    border-left-width: 4px;
    border-radius: 13px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .12);
  }
  .board-room {
    grid-row: 1 / 3;
    align-self: stretch;
    display: grid;
    place-items: center;
    min-height: 58px;
    padding: 4px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface, #fff) 72%, transparent);
    font-size: 17px;
    letter-spacing: -.02em;
  }
  .board-row .board-status,
  .board-row .board-cat,
  .board-row .board-assignee { min-width: 0; width: 100%; }
  .board-row .board-status { grid-column: 2 / 4; grid-row: 1; text-align: center; font-size: 12px; padding: 7px 8px; border-radius: 9px; }
  .board-row .board-cat { grid-column: 2; grid-row: 2; padding: 7px 6px; font-size: 11px; }
  .board-row .board-assignee { grid-column: 3; grid-row: 2; padding: 7px 6px; font-size: 11px; }
  .board-row select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 9px; }
  .board-row.board-vacant .board-room { color: #168b63; }
  .board-row.board-occupied .board-room { color: #c66b17; }
  .board-row.board-finished .board-room { color: #159a78; }
  .board-row.board-checkout .board-room { color: #3479d5; }
  .board-row.board-blocked .board-room { color: #d54861; }
}
.late-callout-card.static-panel { margin-top: 18px; }
.late-callout-card .timeoff-history { margin-top: 4px; }
.late-callout-row .late-callout-reason {
  display: block;
  margin-top: 2px;
  color: var(--muted-foreground, #667085);
}
.late-callout-name {
  margin: 10px 0 4px;
  font-size: 0.95em;
}
.timeoff-history-heading {
  font-size: 11px; color: var(--secondary); text-transform: uppercase; letter-spacing: .08em;
  margin: 8px 0 4px; font-weight: 680;
}
/* Submit request button sized to match the Start date / Note boxes beside it
   (Stephanie, 2026-08-27). */
.timeoff-form .timeoff-submit { padding: 7px 14px; font-size: 12px; align-self: end; min-height: 34px; }
.timeoff-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.timeoff-row:last-child { border-bottom: 0; }
.timeoff-main { display: grid; gap: 2px; min-width: 0; }
.timeoff-main strong { font-size: 12px; }
.timeoff-main span { font-size: 11px; color: var(--muted); }
.timeoff-actions { display: flex; gap: 8px; }
.timeoff-row.approval { align-items: center; }

/* maintenance */
.maintenance-panel { margin-bottom: 14px; }
.maintenance-add-form { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; }
/* quick-add cards (Deep Clean / Room inventory) share the maintenance form layout */
.quick-add-form { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; }
.maintenance-list { display: grid; margin-top: 10px; }
.maintenance-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.maintenance-item:last-child { border-bottom: 0; }
.maintenance-room { font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.maintenance-item.done { opacity: .55; }
.maintenance-done { margin-top: 8px; border-top: 1px dashed var(--border-soft); padding-top: 6px; }
.maintenance-time { display: block; color: var(--faint); font-size: 10px; margin-top: 2px; }
.maintenance-logged-by {
  display: block;
  width: fit-content;
  margin-top: 3px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 999px;
  color: var(--accent-ink);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .02em;
}

/* employee bubbles (messages view) */
.employee-groups { display: grid; gap: 14px; padding: 14px; }
.employee-groups h4 {
  margin: 0 0 7px; color: var(--muted); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 620;
}
.employee-bubbles { display: grid; gap: 7px; }
.employee-bubble {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0));
  box-shadow: var(--lit-edge);
}
.employee-bubble.scheduled {
  border-color: rgba(48, 183, 123, .38);
  background: linear-gradient(180deg, rgba(48, 183, 123, .07), rgba(48, 183, 123, .02));
}
.employee-bubble > div { display: grid; gap: 2px; min-width: 0; }
.employee-bubble strong { font-size: 13px; }
.employee-bubble span { color: var(--muted); font-size: 11px; }
.employee-message-form {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--accent-soft), rgba(255, 255, 255, .01));
  box-shadow: 0 0 0 3px var(--ring);
}
.employee-message-form > div { display: flex; gap: 8px; flex-wrap: wrap; }

/* mixed view helpers */
.approval-box { padding: 15px; }
.approval-box p { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.approval-actions { display: grid; gap: 8px; }
.split-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 14px; }
.split-grid > .panel + .panel { margin-top: 0; }
.ops-grid > * { min-width: 0; }

/* ------------------------------------------------------------------ */
/* 14. BADGES & INDICATOR LAMPS                                        */
/* ------------------------------------------------------------------ */

/* status lamps — control-panel lights, not pills */
.badge, .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--secondary);
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 570;
  letter-spacing: .02em;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0));
  box-shadow: var(--lit-edge);
}
.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(48, 183, 123, .55);
}
.badge.dry::before { background: var(--amber); box-shadow: 0 0 8px rgba(226, 173, 76, .5); }

.status-badge.waiting::before, .status-badge.out::before, .status-badge.finished::before,
.status-badge.arrival::before, .status-badge.knock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
}
.status-badge.out::before { background: var(--amber); box-shadow: 0 0 8px rgba(226, 173, 76, .5); }
.status-badge.finished::before { background: var(--green); box-shadow: 0 0 8px rgba(48, 183, 123, .55); }
/* Manager Inspected summary badge mirrors Finished, using the manager pink
   accent instead of green. */
.status-badge.inspected-summary {
  color: #ff8dce;
  border-color: color-mix(in srgb, #ff2fb4 55%, transparent);
  background: color-mix(in srgb, #ff2fb4 10%, transparent);
}
.status-badge.inspected-summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff2fb4;
  box-shadow: 0 0 8px rgba(255, 47, 180, .65);
}
.status-badge.occupied::before { background: var(--accent); box-shadow: 0 0 8px rgba(46, 201, 180, .55); }
.status-badge.occupied { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.status-badge.arrival::before { background: var(--pink); box-shadow: 0 0 8px rgba(219, 110, 159, .55); }
.status-badge.knock::before { background: #f0b23a; box-shadow: 0 0 8px rgba(240, 178, 58, .55); }
.status-badge.knock { color: #f5c76b; border-color: rgba(240, 178, 58, .38); }

/* LATE CHECKOUT — pulsing red so it's noticeable (Stephanie, 2026-08-30).
   Mirrors the early-arrival hot-pink pulse, in red. */
.status-badge.late-checkout {
  color: #ff5a63;
  border-color: color-mix(in srgb, #ff2f3d 55%, transparent);
  background: color-mix(in srgb, #ff2f3d 10%, transparent);
  animation: late-checkout-pulse 1.6s ease-in-out infinite;
}
.status-badge.late-checkout::before { background: #ff2f3d; box-shadow: 0 0 8px rgba(255, 47, 61, .6); }
@keyframes late-checkout-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, #ff2f3d 45%, transparent);
    text-shadow: 0 0 6px color-mix(in srgb, #ff2f3d 55%, transparent);
    border-color: color-mix(in srgb, #ff2f3d 55%, transparent);
  }
  50% {
    box-shadow: 0 0 14px 3px color-mix(in srgb, #ff2f3d 60%, transparent);
    text-shadow: 0 0 14px color-mix(in srgb, #ff2f3d 95%, transparent), 0 0 26px color-mix(in srgb, #ff2f3d 55%, transparent);
    border-color: #ff5a63;
  }
}
@media (prefers-reduced-motion: reduce) {
  .status-badge.late-checkout { animation: none; }
}

.badge.timeoff-pending { color: var(--amber); border-color: rgba(226, 173, 76, .42); }
.badge.timeoff-approved { color: var(--green); border-color: rgba(48, 183, 123, .42); }
.badge.timeoff-denied { color: var(--red); border-color: rgba(239, 107, 115, .42); }

/* room kind / assignee helpers */
.room-kind { color: var(--muted); font-size: 12px; }
.assignee-select { min-height: 36px; padding: 5px 8px; font-size: 12px; min-width: 125px; }
.manager-sort { min-height: 32px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)), rgba(255, 255, 255, .035); color: var(--secondary); font-size: 12px; }
.inline-update { color: var(--green); font-size: 10px; font-weight: 700; }

/* fix / need chips — now stub tags with lamps */
.fix-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.fix-chip {
  background: linear-gradient(180deg, rgba(239, 107, 115, .16), rgba(239, 107, 115, .05));
  border: 1px solid rgba(239, 107, 115, .4);
  color: #ffd7da;
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 11px;
  box-shadow: var(--lit-edge);
}
.fix-chip::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px rgba(239, 107, 115, .6);
  margin-right: 6px;
  vertical-align: 2px;
}
.vacant-notes .fix-chip.deep {
  background: linear-gradient(180deg, rgba(156, 130, 230, .16), rgba(156, 130, 230, .05));
  border-color: rgba(156, 130, 230, .45);
  color: #d8cdff;
}
.vacant-notes .fix-chip.deep::before { background: var(--purple); box-shadow: 0 0 6px rgba(156, 130, 230, .6); }

.need-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 10px; }
.need-chip {
  background: linear-gradient(180deg, rgba(226, 173, 76, .16), rgba(226, 173, 76, .05));
  border: 1px solid rgba(226, 173, 76, .45);
  color: #f3d9a3;
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 11px;
  box-shadow: var(--lit-edge);
}
.need-chip::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 6px rgba(226, 173, 76, .6);
  margin-right: 6px;
  vertical-align: 2px;
}

.needs-box { margin: 8px 0 2px; }
.needs-heading { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--amber); font-weight: 620; }
.need-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(90deg, rgba(226, 173, 76, .09), rgba(226, 173, 76, .02));
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 12px;
}
.need-item.done { background: rgba(48, 183, 123, .08); border-left-color: var(--green); color: var(--muted); }
.fix-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(90deg, rgba(239, 107, 115, .1), rgba(239, 107, 115, .02));
  border-left: 3px solid var(--red);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 12px;
}
.fix-item.done { background: rgba(48, 183, 123, .08); border-left-color: var(--green); color: var(--muted); }
.fix-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.fix-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 5px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  box-shadow: 0 0 8px rgba(239, 107, 115, .45);
}

/* empty state — an open slot awaiting data */
.empty-state {
  padding: 38px 22px;
  text-align: center;
  color: var(--muted);
  position: relative;
}
.empty-state::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  margin: 0 auto 14px;
  background:
    linear-gradient(135deg, var(--accent-soft-2), transparent 70%);
  clip-path: polygon(0 8%, 38% 0, 100% 20%, 88% 92%, 44% 100%, 0 78%);
  opacity: .8;
}
.empty-state strong { display: block; color: var(--secondary); margin-bottom: 6px; font-weight: 600; }

/* ------------------------------------------------------------------ */
/* 15. OVERLAYS — notification + dialogs                               */
/* ------------------------------------------------------------------ */

.notification-wrap { position: relative; }
.notification-button {
  position: relative;
  min-width: 42px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)),
    var(--surface);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
  box-shadow: var(--lit-edge);
  transition: border-color var(--motion) ease, transform var(--motion) ease, box-shadow var(--motion) ease;
}
.notification-button:hover { border-color: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.notification-button:active { transform: translateY(0); }
.notification-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--red);
  color: white;
  font: 700 10px/16px system-ui;
  box-shadow: 0 0 10px rgba(239, 107, 115, .55);
  border: 1px solid rgba(255, 255, 255, .25);
}
.notification-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: min(340px, calc(100vw - 24px));
  max-height: min(480px, 65vh);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--panel);
  box-shadow: var(--shadow-2);
  animation: pop-in var(--motion-slow) cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.notification-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: 620;
}
.notification-head span { color: var(--muted); font-weight: 500; }
.notification-row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.notification-row:hover { background: rgba(255, 255, 255, .022); }
.notification-row.unread { background: linear-gradient(90deg, var(--accent-soft), transparent 80%); }
.notification-row.unread:hover { background: linear-gradient(90deg, var(--accent-soft-2), transparent 80%); }
.notification-row strong, .notification-row small { display: block; }
.notification-row strong { font-size: 12px; }
.notification-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.notification-kind {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-soft-2);
}
.notification-kind.finished { background: var(--green); box-shadow: 0 0 6px rgba(48, 183, 123, .5); }
.notification-kind.room-status { background: var(--amber); box-shadow: 0 0 6px rgba(226, 173, 76, .5); }
.notification-kind.message { background: var(--purple); box-shadow: 0 0 6px rgba(156, 130, 230, .5); }
.notification-empty { padding: 16px; color: var(--muted); font-size: 12px; }

/* dialogs — raised translucent plates with the same dawn seam and stub
   corner as the rest of the app's panels */
dialog,
.staff-access-dialog, .vacant-picker-dialog, .today-checkout-dialog, .today-summary-dialog {
  width: min(560px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .026), rgba(255, 255, 255, 0) 22%),
    color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--text);
  padding: 20px;
  box-shadow: var(--shadow-pop);
  position: relative;
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
}
dialog::before,
.staff-access-dialog::before, .vacant-picker-dialog::before,
.today-checkout-dialog::before, .today-summary-dialog::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--seam-strong);
  opacity: .7;
}
dialog::after,
.staff-access-dialog::after, .vacant-picker-dialog::after,
.today-checkout-dialog::after, .today-summary-dialog::after {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 8px var(--accent-soft-2);
}
dialog::backdrop,
.staff-access-dialog::backdrop, .vacant-picker-dialog::backdrop,
.today-checkout-dialog::backdrop, .today-summary-dialog::backdrop {
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: blur(8px) saturate(.9);
  -webkit-backdrop-filter: blur(8px) saturate(.9);
}
.vacant-picker-dialog { width: min(640px, calc(100vw - 28px)); }

.staff-access-form { display: grid; gap: 16px; }
.staff-access-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.staff-access-head .eyebrow { margin: 0 0 6px; }
.staff-access-head h3 { margin: 0; font-size: 20px; }
.staff-access-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.access-help {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent-soft), transparent);
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.5;
}
.staff-access-form fieldset { margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.staff-access-form legend { padding: 0 6px; color: var(--secondary); font-size: 13px; font-weight: 620; }
.access-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.access-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--secondary);
  font-size: 12px;
  border: 1px solid transparent;
  transition: border-color var(--motion) ease, background var(--motion) ease;
}
.access-option:hover { border-color: var(--border); }
.access-option input { min-height: 18px; width: 18px; margin: 0; accent-color: var(--accent); }
.staff-access-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* custom job roles (Staff & PINs) */
.custom-roles-wrap { margin-top: 18px; }
.custom-roles-body { padding: 2px 0 0; }
.custom-roles-body .empty-state { margin: 0; }
.custom-roles-heading { margin: 14px 0 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.custom-roles-heading:first-child { margin-top: 4px; }
.custom-roles-actions { padding: 10px 0 2px; }
.role-receives-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--secondary);
  font-size: 12px;
  border: 1px solid var(--well-border);
}
.role-receives-row input { min-height: 18px; width: 18px; margin: 0; accent-color: var(--accent); }

/* today summary */
.today-summary-dialog { width: min(500px, calc(100vw - 28px)); }
/* The room list scrolls INSIDE the popup (Stephanie, 2026-08-30: "the
   finished rooms pop up items dont fit the screen") — the dialog already caps
   its height, but the list could overflow past it. display flex must be
   scoped to [open] (the black-box pitfall: an unscoped display on <dialog>
   renders it while closed). */
.today-summary-dialog[open] { display: flex; flex-direction: column; max-height: min(760px, calc(100vh - 28px)); }
.today-summary-dialog .summary-room-list { overflow-y: auto; min-height: 0; max-height: min(56vh, 520px); -webkit-overflow-scrolling: touch; padding-right: 2px; }
.today-summary-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.today-summary-dialog-head h3 { margin: 2px 0 4px; }
.today-summary-dialog-head p { margin: 0; color: var(--muted); font-size: 13px; }
.summary-room-list-button {
  appearance: none;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 30%),
    rgba(255, 255, 255, .018);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--lit-edge), 0 10px 26px -22px rgba(0, 0, 0, .6);
  transition: border-color var(--motion) ease, background var(--motion) ease, transform var(--motion) ease;
}
.summary-room-list-button:hover {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, 0) 30%),
    rgba(255, 255, 255, .035);
  transform: translateX(2px);
}
.summary-room-list-button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.summary-room-list { display: grid; gap: 8px; margin: 16px 0 0; }
.summary-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0));
  box-shadow: var(--lit-edge);
}
.summary-room-main { display: grid; gap: 2px; flex: 1 1 100%; }
/* Row internals: pills wrap instead of overflowing off the dialog edge
   (Stephanie, 2026-08-30 screenshot: "Sent back" cut off at the right). */
.summary-room-row .summary-room-meta { overflow-wrap: anywhere; }
.summary-room-actions { flex-wrap: wrap; max-width: 100%; }
.summary-room-actions .status-badge { max-width: 100%; white-space: normal; text-align: left; }
/* Manager Send Back / I Fixed quick-add (Stephanie, 2026-08-30) */
.manager-send-back-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.manager-send-back-form input[name="item"] {
  flex: 1 1 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-m, 10px);
  background: var(--card);
  color: var(--foreground);
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
}
.button.warning { border-color: rgba(226, 173, 76, .55); color: #f5c76b; }
.summary-room-fixbox { flex: 1 1 100%; border-top: 1px dashed var(--border); padding-top: 6px; margin-top: 4px; }
.summary-room-fixbox .fix-list { margin: 0 0 4px; }
.summary-room-number { font: 700 16px "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.summary-room-meta { font-size: 12px; color: var(--muted); }
.summary-room-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.summary-room-actions .messaged-button { margin-left: 0; flex: 0 0 auto; }

/* today checkout mini-dialog */
.today-checkout-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.today-checkout-dialog-head h3 { margin: 2px 0 4px; font-size: 20px; }
.today-checkout-dialog-head p { margin: 0; color: var(--muted); font-size: 13px; }
.today-checkout-room {
  font: 700 18px "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 30px;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 9px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--lit-edge);
  transition: border-color var(--motion) ease, background var(--motion) ease, box-shadow var(--motion) ease;
  appearance: none;
}
.today-checkout-room:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 38%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
  box-shadow: 0 0 0 2px var(--ring), var(--lit-edge);
}
.today-checkout-assigned { font-size: 13px; color: var(--muted); }
.today-checkout-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ */
/* 16. ROOM PICKERS — key-tag plates                                   */
/* ------------------------------------------------------------------ */

.vacant-picker-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.vacant-picker-head h3 { margin: 2px 0 4px; font-size: 20px; }
.vacant-picker-head p { margin: 0; color: var(--muted); font-size: 13px; }
.vacant-picker-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 18px 0; max-height: 52vh; overflow: auto; padding-right: 3px; }
.vacant-picker-room {
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)),
    var(--panel);
  color: var(--text);
  font: 700 15px "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
  box-shadow: var(--lit-edge);
  transition: border-color var(--motion) ease, transform var(--motion) ease, box-shadow var(--motion) ease;
}
.vacant-picker-room:hover { border-color: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.vacant-picker-room small { display: block; margin-top: 3px; font: 500 10px/1 system-ui; color: var(--muted); }
.vacant-picker-room.selected {
  border-color: var(--signal);
  background: linear-gradient(180deg, var(--signal-soft), color-mix(in srgb, var(--signal) 6%, transparent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--signal) 28%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--signal) 60%, transparent);
}
.vacant-picker-room.already-vacant { opacity: .55; cursor: not-allowed; }
.vacant-picker-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

.checkout-add-card { margin-bottom: 14px; }
.room-assign-tabs { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.room-assign-tab {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  border-radius: var(--radius-s);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--motion) ease, color var(--motion) ease, background var(--motion) ease;
}
.room-assign-tab:hover { border-color: rgba(255, 255, 255, .22); color: var(--text); }
.room-assign-tab.active { border-color: var(--accent); color: var(--text); background: var(--signal-soft); }
.hk-person-card { margin-bottom: 14px; }
.hk-sort-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 16px 2px; }
.hk-sort-bar .manager-sort { min-width: 120px; }
.hk-room-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 6px 17px 16px; }
.hk-room-chip {
  border: 1px solid var(--well-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .02);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hk-room-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.hk-room-no { font: 700 13px "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
.hk-room-sub { font-size: 10px; color: var(--muted); }
.hk-room-chip .status-badge { align-self: flex-start; font-size: 10px; }
.hk-room-chip .fix-list { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.hk-room-chip .fix-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--muted); }
.hk-room-chip .fix-item.done span:first-child { text-decoration: line-through; opacity: .7; }
.hk-room-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.hk-room-actions .button { font-size: 11px; padding: 4px 9px; }
.hk-fix-add-form { display: flex; gap: 5px; margin-top: 2px; }
.hk-fix-add-form input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--well-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-size: 11px;
  padding: 5px 8px;
}
.hk-fix-add-form input:focus { border-color: var(--accent); outline: none; }
.hk-fix-add-form .button { font-size: 11px; padding: 5px 9px; white-space: nowrap; }
.checkout-add-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.checkout-add-head:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 8px; }
.checkout-add-head h3 { margin: 0; }
.checkout-add-chevron { font-size: 14px; color: var(--muted); transition: transform var(--motion) ease; }
.checkout-add-chevron.open { transform: rotate(90deg); }
.checkout-picker-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.checkout-picker-room {
  min-height: 50px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)),
    rgba(255, 255, 255, .035);
  color: var(--text);
  font: 700 15px "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
  box-shadow: var(--lit-edge);
  transition: border-color var(--motion) ease, transform var(--motion) ease, box-shadow var(--motion) ease;
}
.checkout-picker-room:hover { border-color: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.checkout-picker-room small { display: block; margin-top: 3px; font: 500 10px/1 system-ui; color: var(--muted); }
.checkout-picker-room.selected {
  border-color: var(--signal);
  background: linear-gradient(180deg, var(--signal-soft), color-mix(in srgb, var(--signal) 6%, transparent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--signal) 28%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--signal) 60%, transparent);
}
.checkout-picker-room.already-planned { opacity: .5; cursor: not-allowed; }
.checkout-picker-room.morning-listed { background: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 6px, transparent 6px 12px); border-style: dashed; }
.checkout-picker-room.morning-listed:not(.selected) small { color: var(--faint); }
.checkout-picker-tools { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.checkout-picker-actions { display: flex; justify-content: flex-end; gap: 12px; align-items: center; }
.checkout-picker-count { font-size: 12px; color: var(--muted); }

/* Edit Room Status: per-room translucent category buttons (Checkout / Occupied / Vacant). */
.checkout-cat-room { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.checkout-cat-roomno { font: 700 15px "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
.checkout-cat-group { display: flex; width: 100%; gap: 4px; }
.checkout-cat-select {
  width: 100%;
  min-height: 34px;
  padding: 5px 9px;
  font-size: 13px;
  font-weight: 540;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)), rgba(255, 255, 255, .035);
  box-shadow: var(--lit-edge);
  cursor: pointer;
  transition: border-color var(--motion) ease, background var(--motion) ease;
}
.checkout-cat-select:hover { border-color: var(--accent); }
.checkout-cat-select:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.checkout-cat-select option { background: var(--panel); color: var(--text); }

.checkout-history-bar { gap: 10px; align-items: center; }
/* Logs tab controls (2026-08-28, Stephanie): one compact row — small date
   selector, search, buttons side by side. */
#logs-controls { flex-wrap: nowrap; }
#logs-controls input[type="date"] {
  width: auto;
  padding: 5px 8px;
  font-size: 12px;
}
#logs-controls input[type="search"] {
  flex: 1 1 220px;
  min-width: 140px;
  max-width: 320px;
  padding: 5px 8px;
  font-size: 12px;
}
.history-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.history-badges .badge::before { display: none; }

/* ------------------------------------------------------------------ */
/* 17. DRY-RUN / ARRIVAL / PEST / BLOCKED / INSPECTED / LAUNDRY CARDS  */
/* ------------------------------------------------------------------ */

.global-message {
  margin-top: 16px;
  padding: 12px 14px;
  background: linear-gradient(90deg, var(--accent-soft), transparent);
  border: 1px solid rgba(94, 106, 210, .3);
  border-radius: 8px;
  color: var(--secondary);
  box-shadow: var(--lit-edge);
}

.arrival-alerts { margin-bottom: 14px; border-color: rgba(48, 183, 123, .34); }
.arrival-alerts .badge { white-space: nowrap; }
.arrival-alert { align-items: center; flex-wrap: wrap; }
.arrival-main { display: flex; align-items: baseline; gap: 10px; }
.arrival-room { font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 700; }
.arrival-time { color: var(--green); font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; }
.arrival-note { color: var(--muted); font-size: 11px; min-width: 0; }
.arrival-actions { display: flex; gap: 6px; margin-left: auto; }

.low-stock-card { margin-bottom: 18px; }
.low-stock-card .panel-head > div { display: grid; gap: 3px; }
.low-stock-items { padding: 0 14px 14px; }
.low-stock-items ul { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 0; }
.low-stock-items li {
  padding: 5px 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(226, 173, 76, .15), rgba(226, 173, 76, .04));
  border: 1px solid rgba(226, 173, 76, .34);
  font-size: 12px;
  box-shadow: var(--lit-edge);
}
.low-stock-form { display: grid; gap: 12px; padding: 14px; border-top: 1px solid var(--border-soft); }
.low-stock-form fieldset { margin: 0; padding: 0; border: 0; }
.low-stock-form legend { margin-bottom: 9px; color: var(--secondary); font-size: 12px; font-weight: 620; }
.low-stock-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.low-stock-option {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
  font-size: 12px;
  transition: border-color var(--motion) ease, background var(--motion) ease;
}
.low-stock-option:hover { border-color: var(--border); }
.low-stock-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.low-stock-option span { min-width: 0; }
.low-stock-option small { margin-left: auto; color: var(--muted); font-size: 9px; }
.low-stock-option.listed { opacity: .55; }
.low-stock-custom { display: grid; gap: 5px; color: var(--secondary); font-size: 12px; }

.pest-control-panel { border-color: rgba(226, 173, 76, .5); }
.pest-control-list { display: grid; padding: 0 14px 14px; }
.pest-control-room { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.pest-control-room:last-child { border-bottom: 0; }
.pest-control-room > div { display: grid; gap: 3px; }
.pest-control-room span { color: var(--muted); font-size: 12px; }

.blocked-rooms-panel { border-color: rgba(221, 81, 89, .52); }
.blocked-rooms-list { display: grid; padding: 0 14px 14px; }
.blocked-room { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.blocked-room:last-child { border-bottom: 0; }
.blocked-room > div { display: grid; gap: 3px; }
.blocked-room span { color: var(--muted); font-size: 12px; }

.inspected-panel { border-color: rgba(48, 183, 123, .45); }
.inspected-list { display: grid; padding: 0 14px 14px; }
.inspected-room { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.inspected-room:last-child { border-bottom: 0; }
.inspected-room > div { display: grid; gap: 3px; }
.inspected-room span { color: var(--muted); font-size: 12px; }

.manager-status-select {
  appearance: auto;
  min-width: 112px;
  border: 1px solid currentColor;
  cursor: pointer;
  font: 650 12px/1.2 system-ui, -apple-system, sans-serif;
  padding: 6px 24px 6px 9px;
  border-radius: 7px;
  background: transparent;
}
.manager-status-select:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.manager-status-select.late-checkout { color: var(--amber); border-color: rgba(226, 173, 76, .7); }

.manager-room-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, max-content)); justify-content: start; gap: 12px; padding: 14px; }
.manager-room-card .manager-assignee { display: grid; gap: 4px; margin-bottom: 10px; font-size: 12px; }
.manager-room-card .manager-assignee label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 620; }
.manager-room-card .priority-toggle { width: 100%; margin: 10px 0 0; }
.manager-room-card .fix-add-form { display: flex; gap: 8px; margin: 6px 0 0; }
.manager-room-card .fix-add-form input { flex: 1 1 auto; min-width: 0; }

/* Compact star priority-toggle + finished-line, shared by the Today Checkouts
   Remaining cards AND the room cards on the Rooms tab (Assignments by room +
   checkouts remaining) so they all look the same (Stephanie, 2026-08-27). The
   full-width .priority-toggle rule above must NOT stretch the star; it stays a
   small round icon beside the room number. */
.room-card .today-finished-line {
  font-size: 12px; color: var(--green); margin: -4px 0 10px;
  font-weight: 600; letter-spacing: .01em;
}

/* ------------------------------------------------------------------ */
/* 18. LAUNDRY + LINEN                                                 */
/* ------------------------------------------------------------------ */

.laundry-list { width: 100%; border-collapse: collapse; }
.laundry-list td, .laundry-list th { padding: 8px 12px; border-bottom: 1px solid var(--border-soft); font-size: 12px; text-align: right; }
.laundry-list td:first-child, .laundry-list th:first-child { text-align: left; }
.laundry-list th { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }

.linen-progress-list { display: grid; }
.linen-progress-row {
  display: grid;
  grid-template-columns: minmax(150px, max-content) repeat(6, 58px) minmax(150px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px 17px;
  border-bottom: 1px solid var(--border-soft);
}
.linen-progress-row:last-child { border-bottom: 0; }
.linen-progress-row:hover { background: rgba(255, 255, 255, .015); }
.linen-item { display: grid; gap: 3px; }
.linen-item strong { font-size: 12px; }
.linen-item small { color: var(--muted); font-size: 10px; }
.linen-stat { display: grid; grid-template-rows: 44px 18px; gap: 0; text-align: center; }
.linen-stat span { color: var(--faint); font-size: 9px; line-height: 11px; text-transform: uppercase; letter-spacing: .08em; display: block; height: 44px; overflow: hidden; }
.linen-stat strong { font-size: 18px; font-weight: 560; font-variant-numeric: tabular-nums; line-height: 18px; height: 18px; display: block; }
.linen-stat.remaining strong { color: #9be0bf; }
.linen-stat.remaining.arrivals strong { color: #d2fbe7; }
.linen-stat.closet strong { color: var(--amber); }
.linen-stat.stock strong { color: var(--accent); }
.linen-stat small { color: var(--green); font-size: 9px; }
.linen-stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; padding: 14px 17px 0; }
.linen-stock-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.linen-stock-item { font-size: 12px; font-weight: 560; }
.linen-stock-input { width: 78px; text-align: center; font-variant-numeric: tabular-nums; }
.linen-stock-form { padding: 0 17px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.linen-stock-form .linen-stock-grid { padding: 0; width: 100%; }
.linen-entry-form { display: grid; grid-template-columns: minmax(54px, 1fr) auto; gap: 7px; }
.linen-history { border-top: 1px solid var(--border-soft); padding: 14px 17px; }
.linen-history h4 { margin: 0 0 9px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 620; }
.linen-history-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.linen-history-row:last-child { border-bottom: 0; }
.linen-history-row > div { display: grid; }
.linen-history-row strong { font-size: 12px; }
.linen-history-row span { color: var(--muted); font-size: 10px; }
.linen-history-row.voided { opacity: .55; text-decoration: line-through; }
.expected-add-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.expected-add-head:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 8px; }
.expected-add-head h3 { margin: 0; }
.expected-add-body { display: block; padding: 0 17px 16px; }
.linen-expected-card { margin-top: 0; margin-bottom: 14px; }
.linen-estimate-card { margin-top: 0; margin-bottom: 14px; }
.linen-estimate-card .expected-result-row { padding: 6px 17px; }
.linen-estimate-card .expected-result-row:first-child { border-top: 1px solid var(--border-soft); }
.linen-estimate-card .panel-head { border-bottom: 0; }
.expected-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px 12px; padding: 14px 0 4px; }
.expected-room { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; border: 1px solid var(--well-border); border-radius: 8px; background: rgba(255,255,255,.02); }
.expected-room.muted { opacity: .55; }
.expected-check { display: flex; align-items: center; gap: 6px; font: 600 12px "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.expected-arr { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--pink); cursor: pointer; }
.expected-arr.muted { opacity: .5; }
.expected-arr input { accent-color: var(--pink); }
.expected-check input { accent-color: var(--accent); }
.expected-results { border-top: 1px solid var(--border-soft); padding: 12px 0 4px; margin-top: 12px; }
.expected-results h4 { margin: 0 0 8px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 620; }
.expected-result-row { display: grid; grid-template-columns: minmax(150px, 1fr) 86px 86px 86px 72px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 12px; }
.expected-result-row:last-child { border-bottom: 0; }
.expected-item { font-weight: 620; }
.expected-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.expected-total { text-align: right; color: #9be0bf; font-variant-numeric: tabular-nums; }
.expected-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 12px 0 2px; }
@media(max-width:700px){ .expected-result-row { grid-template-columns: 1fr; gap: 2px; } .expected-total { text-align: left; } }
/* Totals cards keep ONE line per item on phones too: item name left, count
   right (Stephanie, 2026-08-29 — the two-column totals cards, unlike the
   full estimate breakdown, are short enough to stay on a single row). */
.linen-totals-card .expected-result-row,
.linen-estimate-totals-card .expected-result-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.linen-totals-card .expected-total,
.linen-estimate-totals-card .expected-total { text-align: right; font-size: 15px; }
.linen-totals-card, .linen-estimate-totals-card { margin-top: 0; margin-bottom: 14px; }
.linen-totals-card .expected-result-row, .linen-totals-card .expected-result-row:first-child,
.linen-estimate-totals-card .expected-result-row, .linen-estimate-totals-card .expected-result-row:first-child { padding: 7px 17px; border-top: 0; }

/* ------------------------------------------------------------------ */
/* 19. SCHEDULE BOARD                                                   */
/* ------------------------------------------------------------------ */

.schedule-grid-wrap { overflow-x: auto; }
.schedule-grid { display: table; border-collapse: separate; border-spacing: 0; width: 100%; min-width: 540px; }
.schedule-grid th { padding: 7px 4px; font-size: 11px; color: var(--secondary); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)); }
.schedule-grid th:first-child, .schedule-grid td:first-child { text-align: left; }
.schedule-grid th .day-label { display: block; font-size: 10px; font-weight: 660; color: var(--text); }
.schedule-grid th .day-num { display: block; font-size: 10px; color: var(--text); white-space: nowrap; font-weight: 650; }
/* Today's date in the schedule header: highlighted accent instead of the old
   " · today" text (Stephanie, 2026-08-27). */
.schedule-grid th .day-num.today { color: var(--accent); font-weight: 700; }
.schedule-grid td { padding: 8px 4px; font-size: 13px; }
.schedule-grid tr:nth-child(even) { background: rgba(255, 255, 255, .015); }
.schedule-grid tr:hover td { background: rgba(255, 255, 255, .02); }
.schedule-week-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.schedule-week-nav .button { padding: 7px 12px; font-size: 12px; }
.schedule-editor-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.schedule-editor-actions .button { flex: 1 1 auto; min-width: 0; }
.schedule-checkouts-row td { background: rgba(226, 173, 76, .07); }
.schedule-checkouts-row .schedule-checkouts-label { font-weight: 660; font-size: 12px; color: var(--amber); }
.schedule-expected-row td { background: rgba(78, 205, 196, .06); }
.schedule-expected-row .schedule-expected-label { font-weight: 660; font-size: 12px; color: var(--accent); }

/* ------------------------------------------------------------------ */
/* 20. MESSAGES                                                        */
/* ------------------------------------------------------------------ */

.message-compose-form { display: grid; gap: 11px; }
.message-compose-form label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 540; }
.message-compose-form .button { justify-self: start; }
.direct-message-list { padding: 0 17px; }
.direct-message-row { padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.direct-message-row:last-child { border-bottom: 0; }
.direct-message-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.direct-message-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }

/* ------------------------------------------------------------------ */
/* 21. LOGS                                                            */
/* ------------------------------------------------------------------ */

.table-wrap { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.log-table th, .log-table td { padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.log-table th { color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; font-weight: 620; }
.log-table td { color: var(--text); }
.log-table tbody tr:hover td { background: linear-gradient(90deg, rgba(255, 255, 255, .028), transparent); }
.logs-actions { white-space: nowrap; }
.logs-actions .button { padding: 3px 8px; font-size: 12px; }
.edit-field { display: grid; gap: 4px; font-size: 12px; color: var(--secondary); }
.logs-card-head {
  width: 100%;
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.logs-card-head:focus-visible { outline: 2px solid var(--ring); outline-offset: -3px; border-radius: 8px; }
.logs-card-head .muted { margin-left: auto; }
.logs-chevron { color: var(--muted); transition: transform var(--motion) ease; font-size: 12px; line-height: 1; }
.logs-card.is-collapsed .logs-chevron { transform: rotate(90deg); }
.logs-card.is-collapsed .table-wrap { display: none; }
.logs-card.is-collapsed .panel-head .muted { opacity: .65; }
.logs-empty { color: var(--muted); font-size: 13px; padding: 14px 11px; }

/* Assignments by room — collapsible header */
.assign-panel-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.assign-panel-toggle h3 { font-size: inherit; }
.assign-panel-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: -3px; border-radius: 8px; }
.assign-chevron { color: var(--muted); transition: transform var(--motion) ease; font-size: 11px; line-height: 1; }
.assign-panel.is-collapsed .assign-chevron { transform: rotate(90deg); }
.assign-panel.is-collapsed .manager-room-grid,
.assign-panel.is-collapsed .empty-state { display: none; }

/* Generic collapsible card: tap the whole header to collapse; hide everything
   but the header. Scoped to non-specialty panels (Today/Logs/Assignments keep
   their own rules). The pointer cursor + ▾ marker make it obvious the entire
   header is the tap target, not just the title text (Stephanie, 2026-08-27). */
.panel:not(.today-card):not(.logs-card):not(.assign-panel) > .panel-head { cursor: pointer; user-select: none; }
.panel:not(.today-card):not(.logs-card):not(.assign-panel) > .panel-head h3::after {
  content: "▾"; margin-left: 8px; font-size: 10px; color: var(--muted);
}
.panel.is-collapsed:not(.today-card):not(.logs-card):not(.assign-panel):not(.static-panel) > :not(.panel-head) { display: none; }
.panel.is-collapsed:not(.today-card):not(.logs-card):not(.assign-panel) > .panel-head h3::after { content: "▸"; }
/* Shrink-to-fit panels (e.g. Checkouts Remaining on the Rooms tab): hug the
   room cards when expanded, and the header alone when collapsed (Stephanie,
   2026-08-27). */
.panel.fit-panel { width: fit-content; max-width: 100%; }
.panel.fit-panel.is-collapsed { width: fit-content; }
.panel.fit-panel .manager-room-grid { padding: 14px; }

/* ------------------------------------------------------------------ */
/* 22. DASHBOARD COLLAPSE + PRESENCE                                   */
/* ------------------------------------------------------------------ */

#dashboard-view .today-card-title { cursor: pointer; }
#dashboard-view .today-card-title:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
#dashboard-view .today-card.is-collapsed.panel > :not(.panel-head),
#dashboard-view .today-card.is-collapsed.room-card > :not(.room-card-head) { display: none; }
#dashboard-view .today-card.is-collapsed.panel .panel-head .muted,
#dashboard-view .today-card.is-collapsed.panel .panel-head-actions,
#dashboard-view .today-card.is-collapsed.panel .panel-head > select,
#dashboard-view .today-card.is-collapsed.panel .panel-head > .button { display: none; }
#dashboard-view .today-card.is-collapsed.room-card .room-card-head p,
#dashboard-view .today-card.is-collapsed.room-card .room-card-head > :not(:first-child) { display: none; }
#dashboard-view .today-card.is-collapsed.employee-bubble > div > span,
#dashboard-view .today-card.is-collapsed.employee-bubble > .employee-message-button,
#dashboard-view .today-card.is-collapsed.employee-bubble > .muted { display: none; }

/* Today's plan — dark teal shell, same theme as every other view (2026-08-22,
   per Stephanie: "the today screen should be the colors as the rest of the
   pages"). The warm-paper sheet skin was removed; panels, cards, inputs, and
   text inside Today now use the exact same global dark tokens as the other
   tabs (--panel, --surface, --text, --muted, --accent, ...). */
#dashboard-view {
  padding: 20px 18px 28px;
  border-radius: var(--radius-m);
}

@media (max-width: 700px) {
  #dashboard-view { padding: 14px 12px 22px; }
}

.signed-in-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 7px 1px 0;
  border-radius: 50%;
  background: #30d27e;
  box-shadow: 0 0 0 3px rgba(48, 210, 126, .15), 0 0 11px rgba(48, 210, 126, .95);
  vertical-align: middle;
}
.signed-in-dot.inactive {
  background: #ef6b73;
  box-shadow: 0 0 0 3px rgba(239, 107, 115, .15), 0 0 11px rgba(239, 107, 115, .95);
}

/* Glowing dot next to a housekeeper in the Today Assignments card who is
   scheduled to work that day (Stephanie, 2026-08-26). */
.sched-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 7px 1px 0;
  border-radius: 50%;
  background: #30d27e;
  box-shadow: 0 0 0 3px rgba(48, 210, 126, .15), 0 0 11px rgba(48, 210, 126, .95);
  vertical-align: middle;
}

/* Green lamp marking the CURRENT DAY's checkout list (Stephanie, 2026-08-22). */
.today-checkout-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 7px 1px 0;
  border-radius: 50%;
  background: #30d27e;
  box-shadow: 0 0 0 3px rgba(48, 210, 126, .15), 0 0 11px rgba(48, 210, 126, .95);
  vertical-align: middle;
}
/* Live count of checkouts still to be inspected (drops as rooms are inspected). */
.today-checkout-count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 8px;
  margin-left: 2px;
  border-radius: 999px;
  font: 600 12px/1.4 "Space Mono", ui-monospace, Menlo, monospace;
  color: #30d27e;
  background: rgba(48, 210, 126, .12);
  border: 1px solid rgba(48, 210, 126, .35);
  vertical-align: middle;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* 23. COUNTDOWN ALERT STATE                                          */
/* ------------------------------------------------------------------ */

.checkin-countdown.checkin-countdown-urgent {
  color: #ff1f2d !important;
  text-shadow: 0 0 10px rgba(255, 31, 45, .65);
}
/* 2 PM NEON-RED PULSE (Stephanie, 2026-08-29): the countdown text and its
   outline glow pulse bright neon red together, like the early-arrival badge.
   Applied from 2:00 PM until the 3:00 PM check-in. */
@keyframes checkin-countdown-flash {
  0%, 100% {
    color: #ff1f2d;
    text-shadow: 0 0 10px rgba(255, 31, 45, .75), 0 0 24px rgba(255, 31, 45, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 0 rgba(255, 31, 45, 0);
    border-color: color-mix(in srgb, #ff1f2d 55%, transparent);
  }
  50% {
    color: #ff5a63;
    text-shadow: 0 0 18px rgba(255, 31, 45, 1), 0 0 40px rgba(255, 31, 45, .75), 0 0 44px rgba(255, 31, 45, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 24px 5px rgba(255, 31, 45, .75);
    border-color: #ff4752;
  }
}
.checkin-countdown.checkin-countdown-flashing {
  animation: checkin-countdown-flash 0.9s ease-in-out infinite;
  color: #ff1f2d !important;
  border-color: #ff1f2d;
}
@media (prefers-reduced-motion: reduce) {
  .checkin-countdown.checkin-countdown-flashing { animation: none; }
}

/* ------------------------------------------------------------------ */
/* 24. RESPONSIVE                                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 1000px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .ops-grid, .split-grid { grid-template-columns: 1fr; }
  .split-grid > .panel + .panel { margin-top: 0; }
}

@media(max-width:700px){
  :root { --sidebar: 0px; }
  html, body, .app-shell, .workspace, .view, .ops-grid, .panel {
    max-width: 100%;
    min-width: 0;
  }

  /* bottom console dock */
  .sidebar {
    position: fixed;
    inset: auto 0 0;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 4px 8px;
    display: block;
    /* No charcoal tray: the dock now shows only the tab-selector pill, so no
       gray shows around it (Stephanie, 2026-08-27, "grey around the tab
       selector"). */
    background: transparent;
    border-right: 0;
    border-top: 0;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    padding-bottom: max(3px, calc(env(safe-area-inset-bottom) - 26px));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  /* Even with a background photo set, the mobile dock must not show the
     charcoal tray around the tab selector (Stephanie, 2026-08-27).
     Higher specificity than html.has-photo-background .sidebar. */
  html.has-photo-background .sidebar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .brand, .sidebar-foot .user-chip, .sidebar-foot .button { display: none; }
  .sidebar nav{display:flex;flex-wrap:wrap;gap:4px 6px;overflow-x:visible;scrollbar-width:none;-ms-overflow-style:none}
  .sidebar nav::-webkit-scrollbar { display: none; }
  .sidebar nav .nav-item{display:none}
  .sidebar nav #mobile-logout-button { display: none; }
  .nav-item{flex:1 1 auto;min-width:0;white-space:nowrap;min-height:34px;padding:4px 10px}
  .nav-item span { width: auto; font-size: 12px; }
  .sidebar-foot { display: none; }

  .mobile-only { display: flex; }

  /* NO backdrop-filter here: WebKit mis-anchors the native <select> picker
     when the control itself has a filter — the tab list pops up centered on
     screen instead of docked at the bottom (Stephanie, 2026-08-28). The
     translucent gradient alone gives the same glass look. */
  #mobile-nav-select{display:block;width:min(320px, calc(100% - 20px));margin:0 auto;padding:5px 10px;min-height:36px;border:1px solid color-mix(in srgb, var(--accent) 60%, transparent);border-radius:12px;background:var(--panel);background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, var(--panel)), color-mix(in srgb, var(--accent) 16%, var(--panel)));color:var(--text);font-size:13px;font-weight:540;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);appearance:none;-webkit-appearance:none}
  /* Custom tab sheet (2026-08-28): the NATIVE select picker pops centered on
     the phone screen and cannot be styled or moved, so a pointerdown/click
     handler on the select preventDefaults the tap and opens OUR bottom sheet
     instead — it slides up from the tab dock. The select stays in the DOM as
     the visual pill only. */
  #mobile-nav-sheet{position:fixed;left:calc(8px + 13px);right:calc(8px + 13px);bottom:calc(48px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid color-mix(in srgb, var(--accent) 60%, transparent);border-radius:18px;background:var(--panel);background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, var(--panel)), color-mix(in srgb, var(--accent) 12%, var(--panel)));box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6)}
  #mobile-nav-sheet[hidden]{display:none}
  .mobile-nav-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 6px}
  .mobile-nav-sheet-head strong{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
  .mobile-nav-sheet-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .mobile-nav-sheet-item{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03);color:var(--sheet-ink);font-size:14px;text-align:left}
  .mobile-nav-sheet-item.active{background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 16%, transparent));border-color:color-mix(in srgb, var(--accent) 60%, transparent)}
  .mobile-nav-sheet-item.signout{grid-column:1 / -1;color:var(--faint)}
  /* Reorder row at the bottom of the tab sheet (Stephanie, 2026-08-28). */
  .mobile-nav-sheet-reorder{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--border)}
  .mobile-nav-sheet-reorder span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-right:auto}
  #mobile-nav-backdrop{position:fixed;inset:0;z-index:59;background:rgba(3,8,16,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  #mobile-nav-backdrop[hidden]{display:none}
  .nav-reorder { display: none; }

  .workspace{margin-left:0;padding:0 14px 58px}
  .topbar { height: 72px; }
  .topbar .button { font-size: 0; width: 44px; padding: 0; }
  .topbar .button::first-letter { font-size: 17px; }
  /* Prepare Today's Plan: icon-only on phones — the Sisyphus icon stands in
     for the label (Stephanie, 2026-08-28). */
  #prepare-button { font-size: 0; width: 46px; }
  #prepare-button::first-letter { font-size: 0; }
  #prepare-button .prepare-icon { width: 22px; height: 22px; border-radius: 6px; display: inline-block; margin: 0 auto; }
  #prepare-button .prepare-label { display: none; }
  .top-actions { gap: 6px; }
  .topbar h1 { font-size: 19px; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .metric { padding: 13px; }
  .metric strong { font-size: 23px; }
  .ops-grid { grid-template-columns: 1fr; }
  .panel { overflow-x: auto; }
  .room-table { min-width: 620px; }
  .status-strip { align-items: flex-start; }
  .housekeeper-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 26px 22px; }
  /* iOS Safari auto-zooms (and stays zoomed) when tapping an input whose font
     is under 16px — 15px inherited text triggered it on every load. 16px is
     the threshold iOS respects, so inputs keep native-size on phones. */
  input, select, textarea { font-size: 16px; }
  .section-heading { align-items: flex-start; }
  .badge { white-space: nowrap; }
  .view { padding-top: 18px; }

  .task-form { grid-template-columns: 1fr; }
  .linen-progress-row { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .linen-item, .linen-entry-form { grid-column: 1 / -1; }
  .linen-stat { text-align: left; }
  .staff-row { display: grid; grid-template-columns: 1fr; align-items: flex-start; }
  .staff-row-actions { width: 100%; justify-content: flex-start; }
  .staff-row-actions .button { flex: 1 1 auto; }
  .panel { overflow: hidden; }
  .room-table { min-width: 0; }

  /* Logs tab controls (2026-08-29): the one-row desktop bar needs ~467px but a
     phone only has ~362px inside the padding — with nowrap it stretched the
     whole page to ~481px so the app opened too wide and had to be zoomed out
     (Stephanie). On phones the bar wraps and the search box shrinks. */
  #logs-controls { flex-wrap: wrap; }
  #logs-controls input[type="search"] { flex: 1 1 140px; min-width: 0; max-width: none; }

  .assignment-table, .source-table, .assignment-table tbody, .source-table tbody { display: block; width: 100%; }
  .assignment-table thead, .source-table thead { display: none; }
  .assignment-table tr, .source-table tr {
    display: grid;
    width: 100%;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 7px 10px;
    padding: 12px 13px;
    border-bottom: 1px solid var(--border-soft);
  }
  .assignment-table tr:last-child, .source-table tr:last-child { border-bottom: 0; }
  .assignment-table td, .source-table td { display: block; width: auto; padding: 0; border: 0; min-width: 0; }
  .assignment-table td:nth-child(1), .source-table td:nth-child(1) { grid-column: 1; grid-row: 1; align-self: center; font-size: 17px; }
  .assignment-table td:nth-child(2), .source-table td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .assignment-table td:nth-child(3), .source-table td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .assignment-table td:nth-child(4), .source-table td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .assignment-table td:nth-child(5), .source-table td:nth-child(5) { grid-column: 1 / -1; grid-row: 4; }
  .source-table td:nth-child(6) { grid-column: 1 / -1; grid-row: 5; }
  .source-table tr.today-fix-row { display: block; }
  .source-table tr.today-fix-row td { display: block; grid-column: auto; grid-row: auto; padding: 0 14px 10px; }
  .today-fix-block { flex-direction: column; align-items: stretch; }
  .today-fix-add-form { width: 100%; }
  .today-fix-add-form input { flex: 1 1 auto; width: auto; }
  .assignment-table select, .assignment-table button, .source-table select, .source-table button { width: 100%; min-width: 0; }
  .source-table .room-status-wrap { display: block; }
  .panel-head { flex-wrap: wrap; }
  .note { font-size: 12px; }
  .note span { text-align: left; }
  .notes-list .note { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-content: start; }
}

@media (max-width: 520px) {
  .vacant-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .vacant-picker-room { min-height: 50px; }
  .vacant-picker-dialog { padding: 15px; }
  .vacant-picker-head { gap: 10px; }
  .staff-access-dialog, .today-checkout-dialog { padding: 15px; }
  .access-options { grid-template-columns: 1fr; }
  .staff-access-head h3 { font-size: 18px; }
  .pest-control-room { align-items: flex-start; flex-direction: column; }
  .pest-control-room .manager-status-select { width: 100%; }
  .blocked-room { align-items: flex-start; flex-direction: column; }
  .blocked-room .manager-status-select { width: 100%; }
  .today-summary-dialog { padding: 15px; }
  .summary-room-row { padding: 10px; }
}

@media (max-width: 620px) {
  .todo-add-form, .todo-schedule-form { grid-template-columns: 1fr; }
  .todo-add-form .button { width: 100%; }
  .low-stock-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .summary-grid { gap: 7px; }
  .metric small { display: none; }
  .top-actions .badge { display: none; }
  .status-strip { display: block; }
  .sync-meta { margin-top: 7px; }
  .nav-item { font-size: 12px; }
  .checkin-countdown { display: none; }
  .notification-panel { right: -6px; }
}

@media (max-width: 760px) {
  .checkout-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .checkout-picker-room { min-height: 48px; }
}

@media (max-width: 390px) {
  .low-stock-options { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* 25. PHOTO BACKGROUND + LIGHT MODE (preserved behavior)              */
/* ------------------------------------------------------------------ */

html.has-photo-background body {
  background-image: linear-gradient(rgba(8, 9, 10, .48), rgba(8, 9, 10, .62)), var(--photo-background);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
html.has-photo-background .sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)), rgba(11, 12, 13, .45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* On phones the sidebar is the bottom tab tray — never let the photo-mode
   charcoal backdrop show around the tab selector (Stephanie, 2026-08-27).
   Declared AFTER html.has-photo-background .sidebar so it wins the cascade. */
@media (max-width: 700px) {
  html.has-photo-background .sidebar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
html.has-photo-background .topbar {
  /* Header matches the tab selector Stephanie prefers — the SAME pure
     accent gradient (34% → 16% like .nav-item.active), no dark base layer,
     so it reads at the tab's translucency instead of the denser berry
     (Stephanie, 2026-08-27, "prefer the tab selector, make them match"). */
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 16%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
}

/* light mode — same motifs, daylight register */
html[data-mode="light"] {
  color-scheme: light;
  --bg: #f3f6fa;
  --panel: #ffffff;
  --surface: #f7f9fc;
  --surface-2: #e9eef5;
  --border: rgba(16, 31, 51, .15);
  --border-soft: rgba(16, 31, 51, .09);
  --text: #172033;
  --secondary: #36435a;
  /* Darkened so muted/faint text stays readable on light backgrounds
     (Stephanie, 2026-08-27). */
  --muted: #4c5c74;
  --faint: #5d6b82;
  --well: rgba(16, 31, 51, .04);
  --raise: rgba(16, 31, 51, .07);
  --accent-soft: rgba(94, 106, 210, .1);
  --accent-soft-2: rgba(94, 106, 210, .2);
  --ring: rgba(94, 106, 210, .28);
  --lit-edge: inset 0 1px 0 rgba(255, 255, 255, .8);
  --board-lines: repeating-linear-gradient(180deg, rgba(16, 31, 51, .02) 0 1px, transparent 1px 64px);
  --dawn-glow-a: rgba(255, 166, 92, .07);
  --dawn-glow-b: rgba(255, 120, 120, .05);
  --shadow-1: 0 1px 2px rgba(16, 31, 51, .08), 0 14px 30px -18px rgba(16, 31, 51, .18);
  --shadow-2: 0 2px 4px rgba(16, 31, 51, .1), 0 24px 60px -24px rgba(16, 31, 51, .3);
  --shadow-pop: 0 1px 0 rgba(255, 255, 255, .9), 0 30px 80px rgba(16, 31, 51, .3);
  /* Named themes assume dark consoles and give --accent-ink/--on-accent light
     values; on light backgrounds that's white-on-light and unreadable. Force a
     dark ink for accent-tinted surfaces in light mode (Stephanie, 2026-08-27). */
  --accent-ink: #24334a;
  --on-accent: #1b2430;
  /* Dark-theme status colors wash out on white — deepen for light mode */
  --green: #1e7a4d;
  --amber: #92660f;
  --red: #c03949;
  --signal: color-mix(in srgb, var(--accent) 72%, #1b2430);
}
html[data-mode="light"] body {
  background: var(--bg);
  color: var(--text);
}
/* Tiny letter-spaced eyebrow labels need the strongest ink in light mode so
   they stay readable over light/photo backgrounds (Stephanie, 2026-08-27). */
html[data-mode="light"] .eyebrow { color: var(--secondary); }
html[data-mode="light"] .sidebar .user-chip span,
html[data-mode="light"] .sidebar-foot .muted,
html[data-mode="light"] .nav-reorder-hint { color: var(--secondary); }
html[data-mode="light"] .sidebar {
  background: rgba(255, 255, 255, .93);
  border-color: var(--border-soft);
}
html[data-mode="light"] .topbar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, .7)), color-mix(in srgb, var(--accent) 7%, rgba(255, 255, 255, .85)));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
}
html[data-mode="light"] .panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 26%),
    rgba(255, 255, 255, .85);
}
html[data-mode="light"] .button { background: rgba(28, 48, 79, .04); }
html[data-mode="light"] .room-limit-field .room-limit-input,
html[data-mode="light"] .staff-role-field .staff-role-select,
html[data-mode="light"] .mentor-field .mentor-select {
  background: rgba(28, 48, 79, .04);
  border-color: rgba(16, 31, 51, .15);
  box-shadow: none;
}
html[data-mode="light"] .room-limit-field .room-limit-input:hover,
html[data-mode="light"] .staff-role-field .staff-role-select:hover,
html[data-mode="light"] .mentor-field .mentor-select:hover { background: rgba(28, 48, 79, .08); }
html[data-mode="light"] .button.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, #ffffff), var(--accent) 90%);
  border-color: var(--accent);
  color: var(--on-accent);
  text-shadow: none;
}
html[data-mode="light"] .button:hover { background: rgba(28, 48, 79, .08); }
html[data-mode="light"] .nav-item:hover, html[data-mode="light"] .nav-item.active {
  background: rgba(28, 48, 79, .08);
}
html[data-mode="light"] .nav-item.active {
  /* Light-mode active tab matches the light header recipe (Stephanie, 2026-08-27). */
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, .7)), color-mix(in srgb, var(--accent) 7%, rgba(255, 255, 255, .85)));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
html[data-mode="light"].has-photo-background body {
  background-image: linear-gradient(rgba(255, 255, 255, .38), rgba(243, 246, 250, .64)), var(--photo-background);
}
html[data-mode="light"].has-photo-background .sidebar {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html[data-mode="light"].has-photo-background .topbar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, .7)), color-mix(in srgb, var(--accent) 7%, rgba(255, 255, 255, .85)));
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
}
html[data-mode="light"] .form-stack input, html[data-mode="light"] .form-stack select,
html[data-mode="light"] textarea, html[data-mode="light"] .task-form input,
html[data-mode="light"] .task-form select, html[data-mode="light"] .schedule-name-input,
html[data-mode="light"] .schedule-shift-input, html[data-mode="light"] .schedule-checkout-input,
html[data-mode="light"] .timeoff-date, html[data-mode="light"] .timeoff-details,
html[data-mode="light"] .fix-add-form input, html[data-mode="light"] .need-add-form input,
html[data-mode="light"] .linen-entry-form input, html[data-mode="light"] .message-compose-form select,
html[data-mode="light"] .message-compose-form textarea, html[data-mode="light"] .employee-message-form textarea,
html[data-mode="light"] .edit-field input, html[data-mode="light"] .checkout-history-bar input[type=date] {
  background: linear-gradient(180deg, rgba(16, 31, 51, .03), rgba(16, 31, 51, 0));
  box-shadow: inset 0 1px 2px rgba(16, 31, 51, .06);
}

/* ------------------------------------------------------------------ */
/* 26. SAFETY & RESPONSIVE OVERRIDES (verified; behave as before)      */
/* ------------------------------------------------------------------ */

[hidden] { display: none !important; }
.mobile-only { display: none; }

/* restored rules from the original sheet (kept for identical behavior) */
.today-section { margin-bottom: 18px; }
/* Manual early-arrival toggle row on manager room cards (2026-08-28). */
.manager-early-arrival-row { margin: 6px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.manager-early-arrival-row .early-arrival-toggle.active,
.manager-early-arrival-row .arrival-toggle.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 16%, transparent));
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
/* SENT BACK button + badge (Stephanie, 2026-08-30). */
.room-card-actions .sent-back-button.active {
  background: linear-gradient(180deg, color-mix(in srgb, #ff2f3d 30%, transparent), color-mix(in srgb, #ff2f3d 14%, transparent));
  border-color: color-mix(in srgb, #ff2f3d 65%, transparent);
  color: #ff5a63;
}
.badge.sent-back-badge {
  color: #ff5a63;
  border-color: color-mix(in srgb, #ff2f3d 55%, transparent);
  background: color-mix(in srgb, #ff2f3d 10%, transparent);
}
/* Late/Callout tab: "Active now" chips (who is on the app, 2026-08-28). */
.late-active-list { display: flex; flex-wrap: wrap; gap: 8px; }
.late-active-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  font-size: 13px; color: var(--text);
}
/* Extra breathing room between the items-needed panels and the Checkouts
   Remaining card on the Still Needed tab (Stephanie, 2026-08-28). */
#needs-view .today-section { margin-top: 26px; }
.manager-room-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.fix-add-form { display: flex; gap: 8px; margin: 4px 0 6px; }
.need-add-form { display: flex; gap: 8px; margin: 6px 0 0; }
.room-fix-row td { padding: 4px 12px 10px; }
.assignment-table td.room-number, .source-table td.room-number { text-align:center; }
.maintenance-add-form select, .maintenance-add-form input,
.quick-add-form select, .quick-add-form input {
  padding: 8px 10px;
  border: 1px solid var(--well-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 55%),
    rgba(255, 255, 255, .024);
  color: var(--text);
  min-width: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .32), inset 0 -1px 0 rgba(255, 255, 255, .03);
  transition: border-color var(--motion) ease, box-shadow var(--motion) ease;
}
.maintenance-add-form select:focus, .maintenance-add-form input:focus,
.quick-add-form select:focus, .quick-add-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring), inset 0 1px 2px rgba(0, 0, 0, .3);
}
.task-controls select {
  padding: 5px 8px;
  font-size: 12px;
  min-height: 34px;
  border: 1px solid var(--well-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 55%),
    rgba(255, 255, 255, .024);
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .32), inset 0 -1px 0 rgba(255, 255, 255, .03);
}
.task-controls select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring), inset 0 1px 2px rgba(0, 0, 0, .3);
}
/* manager-only control used across special panels */
.manager-sort, .assignee-select, .theme-select { border-radius: 8px; }

/* ---- Room List (manager) ---- */
.room-list-count { color: var(--muted, inherit); font-size: .85em; font-weight: 600; margin-left: 6px; }
.room-list { display: flex; flex-direction: column; gap: 10px; }
.room-list-row { border: 1px solid var(--ring, rgba(255,255,255,.12)); border-radius: var(--radius-m, 14px); overflow: visible; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)), rgba(255, 255, 255, .035); }
.room-list-row.arrival-tier { border-color: color-mix(in srgb, var(--signal) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 30%, transparent), color-mix(in srgb, var(--signal) 8%, transparent)), rgba(255, 255, 255, .012); box-shadow: inset 3px 0 0 var(--signal); }
.room-list-row.early-tier { border-color: color-mix(in srgb, var(--signal) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 18%, transparent), color-mix(in srgb, var(--signal) 4%, transparent)), rgba(255, 255, 255, .012); box-shadow: inset 3px 0 0 var(--signal); }
.room-list-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; flex-wrap: wrap; user-select: none; }
.room-list-head:hover { background: color-mix(in srgb, var(--accent, #4fd8ff) 8%, transparent); border-radius: var(--radius-m, 14px); }
.room-list-chevron { display: inline-block; width: 12px; text-align: center; color: var(--muted, #9aa0b0); transition: transform .15s ease; font-size: 12px; }
.room-list-chevron.open { transform: rotate(90deg); }
.room-list-bed { color: var(--muted, #9aa0b0); font-size: 12px; min-width: 42px; }
.room-list-summary { margin-left: auto; font-size: 12px; white-space: nowrap; }
.room-list-cat { display: inline-block; font-size: 11px; letter-spacing: .03em; padding: 3px 8px; border-radius: 20px; font-weight: 700; text-transform: uppercase; }
.room-list-cat.checkout { color: var(--signal); background: color-mix(in srgb, var(--signal) 18%, transparent); }
.room-list-cat.vacant { color: #b8f5c8; background: color-mix(in srgb, #3ecf6f 18%, transparent); }
.room-list-cat.occupied { color: var(--muted, #9aa0b0); background: color-mix(in srgb, #9aa0b0 14%, transparent); }
/* Plastic scoop tracking chips (Stephanie, 2026-08-31). */
.plastic-room-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 16px; }
.plastic-room-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3em; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px;
  font-family: var(--mono, monospace); font-size: 14px; font-weight: 600;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}
/* Flat item rows on the Inventory / Deep Clean tabs (Stephanie, 2026-08-31). */
.flat-item-list { display: grid; gap: 8px; padding: 4px 16px 16px; }
.flat-item-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
.flat-item-row.done { opacity: .62; }
.flat-item-room { min-width: 2.6em; font-family: var(--mono, monospace); font-size: 14px; }
.flat-item-name { flex: 1 1 160px; min-width: 0; }
.flat-item-controls { display: flex; gap: 6px; }
@media (max-width: 700px) {
  .flat-item-row { grid-template-columns: none; }
  .flat-item-controls { margin-left: auto; }
}
.room-list-cat.blocked { color: #ffb0b5; background: color-mix(in srgb, #dd5159 18%, transparent); }
.room-list-body { padding: 4px 14px 14px; display: grid; grid-template-columns: max-content max-content; gap: 12px; align-items: start; }
@media (max-width: 720px) { .room-list-body { grid-template-columns: 1fr; } }
.room-status-wrap { position: relative; display: inline-flex; }
.room-status-toggle { cursor: pointer; white-space: nowrap; }
.room-status-menu { position: absolute; z-index: 9000; min-width: 212px; max-width: 88vw; padding: 6px; display: flex; flex-direction: column; gap: 3px; background: var(--panel, #14161c); border: 1px solid var(--ring, rgba(255,255,255,.14)); border-radius: var(--radius-m, 14px); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.room-status-menu-title { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #9aa0b0); padding: 4px 10px 6px; border-bottom: 1px solid var(--ring, rgba(255,255,255,.09)); margin-bottom: 4px; }
.room-status-option { text-align: left; font: inherit; color: var(--foreground, #eef1f6); background: transparent; border: 0; border-radius: 10px; padding: 8px 10px; cursor: pointer; white-space: nowrap; }
.room-status-option:hover { background: color-mix(in srgb, var(--accent, #4fd8ff) 12%, transparent); }
.room-status-option.active { color: var(--accent, #4fd8ff); font-weight: 600; }
.room-status-option:disabled { opacity: .55; cursor: default; }
@media (max-width: 720px) { .pest-control-room .room-status-wrap, .blocked-room .room-status-wrap { width: 100%; } .pest-control-room .room-status-toggle, .blocked-room .room-status-toggle { flex: 1; } }
.room-list-block { border: 1px dashed var(--ring, rgba(255,255,255,.14)); border-radius: var(--radius-m, 14px); padding: 8px 10px; display: block; width: 100%; min-width: 0; box-sizing: border-box; }
/* Compact inline sections used on room cards (deep-clean / inventory in the
   housekeeper + checkouts views): title → [items] → Add row, no empty box. */
.room-list-block.room-list-inline { margin-top: 8px; }
.room-list-block-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.room-list-block-head strong { color: var(--muted, #9aa0b0); min-width: 0; }
.room-list-block-head .muted { text-transform: none; letter-spacing: 0; font-size: 11px; white-space: nowrap; }
.room-list-items { display: flex; flex-direction: column; gap: 4px; margin: 0 0 6px; min-width: 0; }
.room-list-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 10px; background: color-mix(in srgb, var(--panel, #14161c) 60%, transparent); min-width: 0; }
.room-list-item.done .room-list-item-name { text-decoration: line-through; color: var(--muted, #9aa0b0); }
.room-list-item-name { min-width: 0; flex: 1 1 auto; font-size: 13px; overflow-wrap: anywhere; }
.room-list-item-controls { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; }
.room-list-add-form { display: flex; gap: 8px; min-width: 0; }
.room-list-add-form input { min-width: 0; }
.room-list-add-form input {
  flex: 1 1 140px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--well-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 55%),
    rgba(255, 255, 255, .024);
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .32), inset 0 -1px 0 rgba(255, 255, 255, .03);
  transition: border-color var(--motion) ease, box-shadow var(--motion) ease;
}
.room-list-add-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring), inset 0 1px 2px rgba(0, 0, 0, .3);
}
.room-item-delete { line-height: 1; }
/* ------------------------------------------------------------------ */
/* 31. TODAY CARD-HEADER QUICK-ADD BARS                               */
/* ------------------------------------------------------------------ */
/* Room selector + item box + Add sit in each card's panel head, under
   its title, and stay visible when the card is collapsed. */
#dashboard-view .panel-head.quick-head { flex-wrap: wrap; row-gap: 10px; }
.today-quick-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  /* Fixed width + right-align so every card's controls share one column:
     the room select starts at the same x on every card and the item input
     gets the same width everywhere (Stephanie 2026-08-22). */
  flex: 0 1 auto;
  width: min(100%, 460px);
  margin-left: auto;
  justify-content: flex-end;
}
.today-quick-form select { flex: 0 0 92px; width: auto; }
.today-quick-form input { flex: 1 1 160px; min-width: 0; }
/* Common-area quick-add: entry box + assignee select match the assignment
   dropdown's size (assignee-select: min-height 36px, 12px font, 125px width —
   Stephanie, 2026-08-30). */
.common-area-quick-form input,
.common-area-quick-form .assignee-select {
  min-height: 36px;
  padding: 5px 8px;
  font-size: 12px;
}
.common-area-quick-form .assignee-select { flex: 0 0 125px; min-width: 125px; border-radius: 8px; }
.today-quick-form button.button { white-space: nowrap; padding: 8px 12px; }
#dashboard-view .low-stock-items.todo-list { display: grid; padding: 0 14px 14px; }
#dashboard-view .low-stock-items .todo-item { padding: 9px 0; }

/* Room List manager editing: category + assignee controls (2026-08-23) */
.room-list-manager-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 0 12px; border-bottom: 1px solid var(--border, rgba(128,128,128,.25)); margin-bottom: 8px; }
.room-list-ctl-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground, inherit); }
.room-list-manager-actions select { padding: 4px 8px; border-radius: var(--radius-m, 8px); }
.room-list-occupied-note { font-size: 12px; }

/* ------------------------------------------------------------------ */
/* 23. PRINT — Today board, every card expanded (2026-08-24)           */
/* ------------------------------------------------------------------ */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff !important; color: #111 !important; }
  /* Picker-driven print run (2026-08-28): when a card-selection run is active,
     print ONLY #print-run-root — the styled checked cards — and nothing else
     of the app. */
  body.print-run-active #app-view,
  body.print-run-active #auth-view,
  body.print-run-active dialog,
  body.print-run-active #print-run-root ~ *:not(#print-run-root) { display: none !important; }
  body.print-run-active #print-run-root { display: block !important; }
  /* Kill app chrome so only the board prints. Hidden in print (not display, to
     keep the on-screen layout intact): sidebar, topbar, mobile nav, ambient
     backdrop, notifications, message strip, and the DRY/RUN/live mode banner. */
  .sidebar, .topbar, #mobile-nav-select, .ambient, .notification-button,
  #notification-panel, #global-message, #print-today, .mode-banner {
    display: none !important;
  }
  .workspace { margin-left: 0 !important; padding: 0; }
  /* Print the ACTIVE view only (the one the user is looking at) full-width. */
  .view { display: none !important; }
  .view:not([hidden]) { display: block !important; }

  /* Cards the user un-checked in the print picker are skipped on paper. */
  .print-hide { display: none !important; }

  /* Force every Today card to render expanded, overriding its .is-collapsed
     state, so the paper copy shows every panel / room card / employee card
     fully even when it is collapsed on screen. */
  #dashboard-view .today-card.is-collapsed { display: block !important; }
  #dashboard-view .today-card.is-collapsed.panel > :not(.panel-head),
  #dashboard-view .today-card.is-collapsed.room-card > :not(.room-card-head),
  #dashboard-view .today-card.is-collapsed.panel .panel-head .muted,
  #dashboard-view .today-card.is-collapsed.panel .panel-head-actions,
  #dashboard-view .today-card.is-collapsed.panel .panel-head > select,
  #dashboard-view .today-card.is-collapsed.panel .panel-head > .button,
  #dashboard-view .today-card.is-collapsed.room-card .room-card-head p,
  #dashboard-view .today-card.is-collapsed.room-card .room-card-head > :not(:first-child),
  #dashboard-view .today-card.is-collapsed.employee-bubble > div > span,
  #dashboard-view .today-card.is-collapsed.employee-bubble > .employee-message-button,
  #dashboard-view .today-card.is-collapsed.employee-bubble > .muted {
    display: initial !important;
  }
  /* Generic collapsible panels (other tabs) also print expanded. */
  .view :is(.panel, .room-card).is-collapsed > :not(.panel-head):not(.room-card-head),
  .view :is(.panel, .room-card).is-collapsed .panel-head .muted {
    display: initial !important;
  }

  /* Interactive controls are meaningless on paper — hide them so the printout
     reads as a report, not a living UI. Keep the summary metrics (they carry
     the day's real counts) and the data lists. */
  form, input, select, textarea,
  .button, .todo-done-button, .fix-done-button, .need-done-button,
  .employee-message-button, .approve-late-out-note, .approval-actions,
  .clear-assignments-button, .today-quick-form, .quick-add-form,
  .need-add-form, .summary-actions, .sort-select, .manager-sort {
    display: none !important;
  }

  /* Report-friendly rhythm: cards keep a light panel instead of a heavy
     card look, room lists break across pages cleanly. */
  .panel, .room-card { break-inside: avoid; }
  h3, h2 { break-after: avoid; }
}

/* ----- Print picker dialog + icon button (2026-08-26) ----- */
.print-button svg { display: block; }
.print-select-dialog { width: min(520px, calc(100vw - 28px)); }
.print-card-list {
  display: grid;
  gap: 4px;
  margin: 14px 0;
  max-height: min(50vh, 420px);
  overflow: auto;
  padding-right: 2px;
}
.print-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  cursor: pointer;
  transition: border-color var(--motion) ease, background var(--motion) ease;
}
.print-card-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.print-card-row input { accent-color: var(--accent); min-height: 18px; min-width: 18px; flex: 0 0 auto; }
.print-card-row span { font-size: 13px; color: var(--text); }
/* Item-count chip on the right of each print-picker row (2026-08-28). */
.print-card-row .print-card-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  flex: 0 0 auto;
}
.print-select-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ----- Print preview dialog (2026-08-27) — embedded, popup-blocker-proof ----- */
.print-preview-dialog {
  width: min(920px, calc(100vw - 24px));
  height: min(86vh, 900px);
  max-height: calc(100vh - 24px);
  padding: 14px 16px;
  /* display:flex ONLY while open — without [open] this overrides the
     browser's closed-dialog display:none and the empty dialog renders as a
     large dark box with a light border on every page (Stephanie,
     2026-08-27: "large black boxes with white outline on the housekeeper
     view on each tab"). */
}
.print-preview-dialog[open] {
  display: flex;
  flex-direction: column;
}
.print-preview-dialog .print-preview-frame {
  flex: 1;
  width: 100%;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

/* ----- Productivity tab ----- */
#productivity-view .productivity-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
#productivity-view .history-picker { display: flex; align-items: center; gap: 8px; }
#productivity-view .history-date-picker { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; }
#productivity-view .table-wrap { overflow-x: auto; }
#productivity-view .productivity-table { width: 100%; border-collapse: collapse; font-size: 14px; }
#productivity-view .productivity-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--secondary); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
#productivity-view .productivity-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
#productivity-view .productivity-table .prod-num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
#productivity-view .productivity-table .prod-name { font-weight: 600; white-space: nowrap; color: var(--text); }
#productivity-view .productivity-table .prod-role { font-weight: 400; text-transform: capitalize; color: var(--secondary); }
#productivity-view .productivity-table tr.leader td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
#productivity-view .productivity-table tr.leader .prod-name strong { color: var(--accent); }
#productivity-view .prod-hours-entry { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#productivity-view .prod-hours-entry input[type="time"] { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; width: 96px; font-family: "Space Mono", monospace; font-size: 13px; }
#productivity-view .prod-hours-entry .prod-hours-save { white-space: nowrap; }
#productivity-view .productivity-hint { color: var(--secondary); font-size: 12px; margin: 10px 2px 0; }
#productivity-view .prod-hours-preview { color: var(--secondary); }
#productivity-view .prod-score-of { color: var(--secondary); }
#productivity-view .prod-score-stats small { color: var(--secondary); }
#productivity-view .prod-score-reasons li { color: var(--secondary); }
#productivity-view .prod-score-card { background: var(--surface); }
#productivity-view .prod-score-card.leader { background: var(--surface-2); }
#productivity-view .laundry-total { color: var(--accent); }
#productivity-view .laundry-add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
#productivity-view .laundry-add select, #productivity-view .laundry-add input { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
#productivity-view .laundry-add input { flex: 1 1 160px; }
#productivity-view .laundry-by-person { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; font-size: 13px; }
#productivity-view .laundry-load-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
#productivity-view .laundry-load-row:last-child { border-bottom: none; }
#productivity-view .laundry-load-who { min-width: 90px; font-weight: 600; }
#productivity-view .laundry-load-note { flex: 1 1 auto; color: var(--text); }
#productivity-view .laundry-load-time { font-size: 11px; white-space: nowrap; }
#productivity-view .laundry-load-del { color: var(--danger, #ff6b6b); }
@media (max-width: 700px) {
  #productivity-view .productivity-table th, #productivity-view .productivity-table td { padding: 8px 6px; font-size: 12px; }
  #productivity-view .prod-hours-entry input[type="time"] { width: 82px; }
}

/* Card drag-to-rearrange (2026-08-29) */
body.card-drag-active { user-select: none; -webkit-user-select: none; }
body.card-drag-active .panel-head { cursor: grabbing; }
.panel.card-dragging { opacity: 0.55; outline: 2px dashed var(--accent); outline-offset: 3px; }
.panel.card-dragging .panel-head { cursor: grabbing; }
.panel .panel-head { touch-action: pan-y; }
.nav-item.drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; background: var(--accent-soft); }

/* Productivity Edit Activity dialog (2026-08-29) */
.prod-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.prod-edit-field { display: grid; gap: 4px; font-size: 13px; }
.prod-edit-field span { color: var(--muted); font-size: 12px; }
.prod-edit-field input { width: 100%; }
.prod-hours-preview { font-weight: 600; min-width: 34px; display: inline-block; text-align: right; }

/* Log-a-load builder (2026-08-29): one form, one load, many items */
.linen-load-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 14px; }
.linen-load-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.linen-load-item { font-size: 13px; color: var(--text); }
.linen-load-qty { width: 84px; text-align: center; }
.linen-load-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 12px; }
.linen-load-total { font-weight: 600; }
@media (max-width: 700px) { .linen-load-grid { grid-template-columns: 1fr 1fr; } }

/* Productivity score cards (2026-08-29) */
.prod-scores-panel { margin-bottom: 18px; }
.prod-scores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.prod-score-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--card); }
.prod-score-card.leader { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.prod-score-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.prod-score-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--accent); flex-shrink: 0; }
.prod-score-num { font-size: 22px; font-weight: 700; line-height: 1; }
.prod-score-of { font-size: 10px; color: var(--muted-foreground); }
.prod-score-who { display: flex; flex-direction: column; gap: 2px; }
.prod-score-stats { display: flex; gap: 14px; margin-top: 6px; }
.prod-score-stats span { display: inline-flex; align-items: baseline; gap: 4px; }
.prod-score-stats strong { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; }
.prod-score-stats small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.prod-score-label { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.4px; }
.prod-score-reasons { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.prod-score-reasons li { font-size: 13px; color: var(--muted-foreground); line-height: 1.45; }
.prod-score-card.tier-outstanding .prod-score-ring { border-color: #2fbf71; }
.prod-score-card.tier-outstanding .prod-score-label { color: #2fbf71; }
.prod-score-card.tier-attention .prod-score-ring { border-color: #e05252; }
.prod-score-card.tier-attention .prod-score-label { color: #e05252; }
@media (max-width: 700px) { .prod-scores-grid { grid-template-columns: 1fr; } }

/* Repeating room-list items (2026-08-30): frequency select on add forms +
   badge on repeating rows (Stephanie: WiFi extender check, deep clean too). */
.room-list-repeat-select {
  max-width: 9.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-m, 10px);
  background: var(--card);
  color: var(--foreground);
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
}
.repeat-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}

/* Assignments tab (2026-08-30): expandable per-housekeeper cards */
.assignments-card .panel-head.assignments-head { cursor: pointer; user-select: none; }
.assignments-card .assignments-body { padding: 0 16px 16px; display: grid; gap: 14px; }
.assignments-card .checkout-add-chevron { transition: transform 0.15s ease; }
.assignments-card .checkout-add-chevron.open { transform: rotate(90deg); }
.assignments-card h3 { margin: 0; }
.assignments-card h4 { margin: 0 0 8px; }

/* Learn from these card (2026-08-30): completed fixes on the viewer's rooms */
.learn-fix-list { display: grid; gap: 6px; }
.learn-fix-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 7px 10px; border: 1px solid var(--border-soft); border-radius: 10px; }
.learn-fix-room { font: 700 13px "Space Mono", ui-monospace, monospace; }
.learn-fix-item { flex: 1 1 auto; }
.learn-fix-by { font-size: 12px; }

/* My Rooms & Tasks (2026-08-30): assigned common-area tasks nested in the card */
.my-tasks-block { border-top: 1px dashed var(--border); margin-top: 12px; padding-top: 8px; }
.my-tasks-head h4 { margin: 0 0 2px; font-size: 15px; }
.my-tasks-head .room-list-count { margin-left: 6px; }

/* Lost & Found (2026-08-30): quick add + manager tab */
.lost-found-form { display: flex; flex-wrap: wrap; gap: 8px; }
.lost-found-form select, .lost-found-form input { border: 1px solid var(--border); border-radius: var(--radius-m, 10px); background: var(--card); color: var(--foreground); padding: 0.45rem 0.6rem; font: inherit; font-size: 0.9rem; }
.lost-found-form input { flex: 1 1 220px; }
.lost-found-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.lost-found-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; flex: 1 1 auto; }
.lost-found-room { font: 700 14px "Space Mono", ui-monospace, monospace; }
.lost-found-controls { display: flex; flex-wrap: wrap; gap: 6px; }

.lost-found-form .lf-photo-input {
  /* Visually hidden, NOT display:none — display:none can stop the file
     chooser opening on some browsers (the "photo button does nothing" bug,
     Stephanie 2026-08-30). Stays in the layout at 1px so the label always
     triggers it. */
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}
.lost-found-form .lf-photo-label { cursor: pointer; display: inline-flex; align-items: center; }
.lost-found-form .lf-photo-preview { max-height: 64px; border-radius: 8px; border: 1px solid var(--border-soft); }
.lost-found-photo { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-soft); flex: 0 0 auto; }

/* Lost & Found is a quick action on Today, so keep its phone layout calm:
   room + description get their own full-width rows, then the two main actions
   share a comfortable tap row instead of squeezing beside the description. */
@media (max-width: 700px) {
  .lost-found-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }
  .lost-found-form select,
  .lost-found-form input[name="item"] {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
  }
  .lost-found-form .lf-photo-label,
  .lost-found-form > button[type="submit"] {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    box-sizing: border-box;
  }
  .lost-found-form .lf-photo-preview {
    max-width: 100%;
    max-height: 44px;
    object-fit: contain;
    justify-self: start;
  }
  .lost-found-form .lf-photo-cancel {
    min-height: 44px;
    width: 100%;
  }
  .lost-found-row {
    align-items: start;
    gap: 8px;
  }
  .lost-found-main {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .lost-found-controls {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .lost-found-controls .button {
    width: 100%;
    min-height: 40px;
  }
}

/* Final light-mode contrast pass. These rules intentionally live after the
   restored component rules below so translucent dark-console highlights and
   pale status text cannot override the daylight palette. */
html[data-mode="light"] {
  --pink: #a21876;
  --purple: #6440a6;
  --amber: #855700;
  --sheet-ink: #2f496b;
}
html[data-mode="light"] .room-card,
html[data-mode="light"] .room-list-row,
html[data-mode="light"] .flat-item-row,
html[data-mode="light"] .plastic-room-chip {
  background: var(--surface);
}
html[data-mode="light"] .room-card.finished,
html[data-mode="light"] .room-card.finished.arrival-tier,
html[data-mode="light"] .room-card.finished.early-tier {
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--green) 48%, var(--border));
}
html[data-mode="light"] .badge.early-badge,
html[data-mode="light"] #dashboard-view .badge.early-badge {
  color: #9b176f;
  border-color: color-mix(in srgb, #9b176f 55%, transparent);
  background: color-mix(in srgb, #9b176f 12%, transparent);
  text-shadow: none;
}
html[data-mode="light"] .status-badge.knock {
  color: #704700;
  border-color: color-mix(in srgb, #855700 48%, transparent);
}
html[data-mode="light"] .status-badge.late-checkout {
  color: #a5222e;
  border-color: color-mix(in srgb, #a5222e 55%, transparent);
  background: color-mix(in srgb, #a5222e 10%, transparent);
  text-shadow: none;
}
html[data-mode="light"] .room-list-cat.vacant { color: #176b3b; }
html[data-mode="light"] .room-list-cat.blocked { color: #a5222e; }
html[data-mode="light"] .button,
html[data-mode="light"] .late-active-chip {
  border-color: var(--border);
  color: var(--text);
}
html[data-mode="light"] #mobile-nav-sheet {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 249, 252, .98));
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  box-shadow: 0 18px 50px rgba(16, 31, 51, .24), inset 0 1px 0 rgba(255, 255, 255, .95);
}
html[data-mode="light"] .mobile-nav-sheet-head strong,
html[data-mode="light"] .mobile-nav-sheet-reorder span {
  color: var(--secondary);
}
html[data-mode="light"] .mobile-nav-sheet-item {
  background: rgba(16, 31, 51, .035);
  border-color: var(--border);
  color: var(--sheet-ink);
  font-weight: 620;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .55);
}
html[data-mode="light"] .mobile-nav-sheet-item:hover {
  background: rgba(16, 31, 51, .075);
}
html[data-mode="light"] .mobile-nav-sheet-item.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, #fff), color-mix(in srgb, var(--accent) 10%, #fff));
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  color: var(--sheet-ink);
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .7);
}
html[data-mode="light"] .mobile-nav-sheet-item.signout { color: var(--sheet-ink); }
html[data-mode="light"] #mobile-nav-sheet .button {
  color: var(--sheet-ink);
}
html[data-mode="light"] #mobile-nav-sheet .button:hover {
  color: #3f4d63;
}
html[data-mode="light"] #mobile-nav-backdrop { background: rgba(16, 31, 51, .22); }

/* Manager verification: recurring checkout checks stay noticeable while
   following the selected theme (including custom colors). */
.manager-recurring-checks {
  margin: 10px 0;
  padding: 10px 12px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 27%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)),
    var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 18px color-mix(in srgb, var(--accent) 24%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.manager-recurring-checks .needs-heading {
  color: var(--accent-ink);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.manager-recurring-check-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 42%);
  align-items: center;
  gap: 10px;
  padding: 7px 0 0;
  font-weight: 700;
}
.manager-recurring-check-row > span { min-width: 0; }
.manager-check-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.manager-photo-meta {
  font-size: 11px;
  font-weight: 700;
  opacity: .82;
}
.manager-check-copy > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.manager-check-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.manager-photo-button { cursor: pointer; min-width: 42px !important; padding: 6px 10px !important; text-align: center; }
.manager-check-photo { display: none; }
.manager-recurring-check-row .button {
  flex: 0 1 auto;
  white-space: normal;
  min-width: 118px;
  max-width: 100%;
  padding: 6px 9px;
  border-color: color-mix(in srgb, var(--accent) 72%, #000000);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
}
.manager-recurring-check-row .button:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}
.manager-recurring-check-row .button:disabled { opacity: .65; }
@media (max-width: 980px) {
  .manager-recurring-check-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .manager-check-actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .manager-recurring-check-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .manager-check-actions { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
  .manager-recurring-check-row .manager-check-item { width: 100%; }
}

/* PC mode: keep verification controls compact so the room card stays scannable. */
@media (min-width: 981px) {
  .manager-recurring-checks {
    margin: 8px 0;
    padding: 9px 10px;
  }
  .manager-recurring-check-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding-top: 6px;
  }
  .manager-recurring-checks .button {
    width: auto;
  }
  .manager-check-actions {
    flex-wrap: nowrap;
    gap: 5px;
  }
  .manager-recurring-check-row .button {
    min-width: 0;
  }
  .manager-recurring-checks .manager-photo-button,
  .manager-recurring-checks .manager-check-item[data-checked="1"] {
    width: 32px;
    min-width: 32px;
    height: 26px;
    padding: 4px 5px !important;
    font-size: 12px;
    line-height: 1;
  }
  .manager-recurring-checks .manager-check-item[data-checked="1"] {
    overflow: hidden;
    white-space: nowrap;
  }
}

/* Shared card finish — carry the housekeeper card's boutique treatment across
   every role and every card-like surface. Existing status-specific rules remain
   more specific, so Finished/Arrival/Early colors keep their meaning. */
:is(.panel, .metric, .room-card, .employee-bubble, .prod-score-card, .note) {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 32%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 16px 34px -26px color-mix(in srgb, var(--accent) 42%, #000);
}
:is(.panel, .metric, .room-card, .employee-bubble, .prod-score-card, .note)::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 72%, #fff), transparent);
  box-shadow: 0 0 13px color-mix(in srgb, var(--accent) 42%, transparent);
  opacity: .78;
}
@media (hover: hover) {
  :is(.panel, .metric, .room-card, .employee-bubble, .prod-score-card, .note):hover {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .11),
      0 20px 40px -24px color-mix(in srgb, var(--accent) 66%, #000);
  }
  :is(.metric, .room-card, .employee-bubble, .prod-score-card):hover {
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.panel, .metric, .room-card, .employee-bubble, .prod-score-card, .note) { transition: none; }
}

/* Palm Court needs its own daylight register. The generic light-mode block is
   intentionally neutral for the older themes; this restores the mockup's
   teal, coral, cream, and offset-card language when Palm Court is selected. */
html[data-mode="light"][data-theme="palm"] {
  --bg: #f1dfcb;
  --panel: #fffaf1;
  --surface: #fffdf8;
  --surface-2: #dcebe0;
  --border: #d7c4ad;
  --border-soft: #e7d8c4;
  --text: #253f3a;
  --secondary: #41645b;
  --muted: #6a7b72;
  --faint: #87958e;
  --accent: #1d6258;
  --accent-hover: #28796d;
  --accent-soft: rgba(29, 98, 88, .12);
  --accent-soft-2: rgba(29, 98, 88, .2);
  --accent-ink: #1d6258;
  --on-accent: #fff8ea;
  --ring: rgba(29, 98, 88, .28);
  --glow: rgba(242, 170, 119, .16);
  --lit-edge: inset 0 1px 0 rgba(255, 255, 255, .85);
}
html[data-mode="light"][data-theme="palm"] body { background: var(--bg); color: var(--text); }
html[data-mode="light"][data-theme="palm"] .sidebar {
  background: #1d6258;
  color: #fff8ea;
  border-color: #1d6258;
}
html[data-mode="light"][data-theme="palm"] .sidebar .brand,
html[data-mode="light"][data-theme="palm"] .sidebar .user-chip strong { color: #fff8ea; }
html[data-mode="light"][data-theme="palm"] .sidebar .user-chip span,
html[data-mode="light"][data-theme="palm"] .sidebar-foot .muted,
html[data-mode="light"][data-theme="palm"] .nav-reorder-hint { color: #c5e2d8; }
html[data-mode="light"][data-theme="palm"] .nav-item { color: #c5e2d8; }
html[data-mode="light"][data-theme="palm"] .nav-item.active { background: #f6d9ba; color: #1d6258; }
html[data-mode="light"][data-theme="palm"] .workspace { background: #fffaf1; }
html[data-mode="light"][data-theme="palm"] .topbar {
  background: linear-gradient(180deg, #fffaf1, #f7ead9);
  border-color: #d7c4ad;
}
html[data-mode="light"][data-theme="palm"] .panel,
html[data-mode="light"][data-theme="palm"] .metric,
html[data-mode="light"][data-theme="palm"] .room-card,
html[data-mode="light"][data-theme="palm"] .employee-bubble,
html[data-mode="light"][data-theme="palm"] .prod-score-card {
  background: #fffdf8;
  border-color: #d7c4ad;
  box-shadow: 4px 5px 0 rgba(202, 164, 122, .15), var(--lit-edge);
}
html[data-mode="light"][data-theme="palm"] .metric:nth-child(2) { background: #dcebe0; }
html[data-mode="light"][data-theme="palm"] .room-card { border-radius: 22px 8px 22px 8px; }
html[data-mode="light"][data-theme="palm"] .room-card:hover,
html[data-mode="light"][data-theme="palm"] .metric:hover,
html[data-mode="light"][data-theme="palm"] .employee-bubble:hover {
  transform: translateY(-3px);
  box-shadow: 7px 9px 0 rgba(202, 164, 122, .2), 0 0 0 1px rgba(29, 98, 88, .22);
}
html[data-mode="light"][data-theme="palm"] .button.primary,
html[data-mode="light"][data-theme="palm"] #prepare-button { background: #1d6258; color: #fff8ea; }
html[data-mode="light"][data-theme="palm"] .room-card-actions .button.warning,
html[data-mode="light"][data-theme="palm"] .room-card-actions .button:first-child { background: #f7d8bb; color: #88563a; border-color: #e6b38e; }
html[data-mode="light"][data-theme="palm"] .room-card-actions .button { border-color: #d7c4ad; color: #41645b; }

/* Curated daylight registers for every selectable theme. The shared rules below
   keep accessibility and interaction behavior consistent while each palette
   supplies its own identity. */
html[data-mode="light"][data-theme="atelier"] { --bg:#eee5d4; --panel:#f8f1e4; --surface:#fffaf0; --surface-2:#dcebe3; --accent:#247266; --accent-hover:#338c7d; --text:#173d36; --secondary:#42645b; --muted:#657b73; --border:#d4c3a9; --border-soft:#e4d8c4; --accent-soft:rgba(36,114,102,.12); --ring:rgba(36,114,102,.28); }
html[data-mode="light"][data-theme="command"] { --bg:#e7eef0; --panel:#f7fbfb; --surface:#fff; --surface-2:#d6e7e7; --accent:#087b68; --accent-hover:#0a9b82; --text:#12272a; --secondary:#3d5d60; --muted:#61777a; --border:#b9d0d0; --border-soft:#d5e3e3; --accent-soft:rgba(8,123,104,.11); --ring:rgba(8,123,104,.28); }
html[data-mode="light"][data-theme="floorplan"] { --bg:#e7edf5; --panel:#f8fbff; --surface:#fff; --surface-2:#dbe6f3; --accent:#d85d4b; --accent-hover:#ed735f; --text:#18314e; --secondary:#48627e; --muted:#647a93; --border:#c2d2e4; --border-soft:#d9e4f0; --accent-soft:rgba(216,93,75,.12); --ring:rgba(216,93,75,.28); }
html[data-mode="light"][data-theme="deco"] { --bg:#eadfe1; --panel:#fbf3e7; --surface:#fffaf1; --surface-2:#ead2b6; --accent:#936d2d; --accent-hover:#b18a45; --text:#32232a; --secondary:#67515a; --muted:#7c6970; --border:#d6b98e; --border-soft:#e6d5c0; --accent-soft:rgba(147,109,45,.12); --ring:rgba(147,109,45,.28); }
html[data-mode="light"][data-theme="ledger"] { --bg:#e8e2d3; --panel:#faf5e8; --surface:#fffaf0; --surface-2:#eadfc7; --accent:#a7463c; --accent-hover:#c15d4f; --text:#3b3029; --secondary:#66554a; --muted:#7d6e61; --border:#d3c1a1; --border-soft:#e2d5bd; --accent-soft:rgba(167,70,60,.12); --ring:rgba(167,70,60,.28); }
html[data-mode="light"][data-theme="riviera"] { --bg:#dcece9; --panel:#f7faf0; --surface:#fffdf5; --surface-2:#cfe3dd; --accent:#d56858; --accent-hover:#e58370; --text:#174943; --secondary:#4c7069; --muted:#66817a; --border:#b9d3ca; --border-soft:#d0e2da; --accent-soft:rgba(213,104,88,.12); --ring:rgba(213,104,88,.28); }
html[data-mode="light"][data-theme="veranda"] { --bg:#e7ead8; --panel:#fbf6e9; --surface:#fffdf5; --surface-2:#d9e5d2; --accent:#92702e; --accent-hover:#b08d43; --text:#29453d; --secondary:#5c7165; --muted:#718278; --border:#d2c69f; --border-soft:#e2dcc1; --accent-soft:rgba(146,112,46,.12); --ring:rgba(146,112,46,.28); }
html[data-mode="light"][data-theme="lounge"] { --bg:#e1e5ee; --panel:#f7f4ed; --surface:#fffdf7; --surface-2:#d9dfeb; --accent:#985047; --accent-hover:#b56b5e; --text:#26344d; --secondary:#5b6579; --muted:#737d90; --border:#c2cbdc; --border-soft:#d9dfeb; --accent-soft:rgba(152,80,71,.12); --ring:rgba(152,80,71,.28); }
html[data-mode="light"][data-theme="noir"] { --bg:#dedddd; --panel:#f6f2e9; --surface:#fffdf7; --surface-2:#e8d9c4; --accent:#896624; --accent-hover:#a7833e; --text:#201c1d; --secondary:#5c5047; --muted:#726960; --border:#cbb895; --border-soft:#ddd2bd; --accent-soft:rgba(137,102,36,.12); --ring:rgba(137,102,36,.28); }
html[data-mode="light"][data-theme="continental"] { --bg:#e4e1df; --panel:#f7f0e6; --surface:#fffaf1; --surface-2:#eadbd0; --accent:#7f3c49; --accent-hover:#9d5663; --text:#2d292c; --secondary:#665b59; --muted:#79706d; --border:#d1b9a9; --border-soft:#e1d1c5; --accent-soft:rgba(127,60,73,.12); --ring:rgba(127,60,73,.28); }
html[data-mode="light"][data-theme="concierge"] { --bg:#dfe5ee; --panel:#f5f2e9; --surface:#fffdf7; --surface-2:#d5e0ec; --accent:#9a7336; --accent-hover:#b18f55; --text:#223148; --secondary:#5b6573; --muted:#707b8b; --border:#bdc9d7; --border-soft:#d7e0ea; --accent-soft:rgba(154,115,54,.12); --ring:rgba(154,115,54,.28); }
html[data-mode="light"][data-theme="future"] { --bg:#e2f1f5; --panel:#f5fcff; --surface:#fff; --surface-2:#d2edf3; --accent:#087d9c; --accent-hover:#0b9dbd; --text:#102b3a; --secondary:#426573; --muted:#617d88; --border:#afd3dc; --border-soft:#d1e7eb; --accent-soft:rgba(8,125,156,.12); --ring:rgba(8,125,156,.3); }
html[data-mode="light"][data-theme="cyberpunk"] { --bg:#f0dfee; --panel:#fff4fb; --surface:#fffaff; --surface-2:#f3d1e8; --accent:#b20d82; --accent-hover:#d51aa0; --text:#35103b; --secondary:#704c78; --muted:#866b8d; --border:#dfb4d3; --border-soft:#efd3e5; --accent-soft:rgba(178,13,130,.12); --ring:rgba(178,13,130,.3); }
html[data-mode="light"][data-theme="anime"] { --bg:#e6eafb; --panel:#f8f6ff; --surface:#fff; --surface-2:#dce9fa; --accent:#d44783; --accent-hover:#e86a9d; --text:#202d56; --secondary:#53658d; --muted:#7080a3; --border:#bdcae5; --border-soft:#dbe3f2; --accent-soft:rgba(212,71,131,.12); --ring:rgba(212,71,131,.3); }

html[data-mode="light"][data-theme="atelier"] .sidebar, html[data-mode="light"][data-theme="palm"] .sidebar, html[data-mode="light"][data-theme="riviera"] .sidebar, html[data-mode="light"][data-theme="veranda"] .sidebar { background:var(--accent); color:#fff8ea; border-color:var(--accent); }
html[data-mode="light"][data-theme="command"] .sidebar, html[data-mode="light"][data-theme="future"] .sidebar { background:#123b4a; color:#effcff; border-color:#123b4a; }
html[data-mode="light"][data-theme="deco"] .sidebar, html[data-mode="light"][data-theme="ledger"] .sidebar, html[data-mode="light"][data-theme="noir"] .sidebar, html[data-mode="light"][data-theme="continental"] .sidebar, html[data-mode="light"][data-theme="concierge"] .sidebar { background:#3b2930; color:#fff6e9; border-color:#3b2930; }
html[data-mode="light"][data-theme="floorplan"] .sidebar, html[data-mode="light"][data-theme="lounge"] .sidebar, html[data-mode="light"][data-theme="anime"] .sidebar { background:#263b62; color:#f5f8ff; border-color:#263b62; }
html[data-mode="light"][data-theme="cyberpunk"] .sidebar { background:#3a0c45; color:#fff3ff; border-color:#3a0c45; }
html[data-mode="light"][data-theme="atelier"] .sidebar .brand, html[data-mode="light"][data-theme="palm"] .sidebar .brand, html[data-mode="light"][data-theme="riviera"] .sidebar .brand, html[data-mode="light"][data-theme="veranda"] .sidebar .brand, html[data-mode="light"][data-theme="command"] .sidebar .brand, html[data-mode="light"][data-theme="future"] .sidebar .brand, html[data-mode="light"][data-theme="deco"] .sidebar .brand, html[data-mode="light"][data-theme="ledger"] .sidebar .brand, html[data-mode="light"][data-theme="noir"] .sidebar .brand, html[data-mode="light"][data-theme="continental"] .sidebar .brand, html[data-mode="light"][data-theme="concierge"] .sidebar .brand, html[data-mode="light"][data-theme="floorplan"] .sidebar .brand, html[data-mode="light"][data-theme="lounge"] .sidebar .brand, html[data-mode="light"][data-theme="anime"] .sidebar .brand, html[data-mode="light"][data-theme="cyberpunk"] .sidebar .brand { color:inherit; }
html[data-mode="light"]:is([data-theme="atelier"],[data-theme="palm"],[data-theme="riviera"],[data-theme="veranda"],[data-theme="floorplan"],[data-theme="command"],[data-theme="deco"],[data-theme="ledger"],[data-theme="lounge"],[data-theme="noir"],[data-theme="continental"],[data-theme="concierge"],[data-theme="future"],[data-theme="cyberpunk"],[data-theme="anime"]) .nav-item { color:color-mix(in srgb, currentColor 72%, transparent); }
html[data-mode="light"]:is([data-theme="atelier"],[data-theme="palm"],[data-theme="riviera"],[data-theme="veranda"],[data-theme="floorplan"],[data-theme="command"],[data-theme="deco"],[data-theme="ledger"],[data-theme="lounge"],[data-theme="noir"],[data-theme="continental"],[data-theme="concierge"],[data-theme="future"],[data-theme="cyberpunk"],[data-theme="anime"]) .nav-item.active { background:color-mix(in srgb, var(--accent) 18%, #fff); color:var(--accent); }
html[data-mode="light"]:is([data-theme="atelier"],[data-theme="palm"],[data-theme="riviera"],[data-theme="veranda"],[data-theme="floorplan"],[data-theme="command"],[data-theme="deco"],[data-theme="ledger"],[data-theme="lounge"],[data-theme="noir"],[data-theme="continental"],[data-theme="concierge"],[data-theme="future"],[data-theme="cyberpunk"],[data-theme="anime"]) .workspace { background:var(--bg); }
html[data-mode="light"]:is([data-theme="atelier"],[data-theme="palm"],[data-theme="riviera"],[data-theme="veranda"],[data-theme="floorplan"],[data-theme="command"],[data-theme="deco"],[data-theme="ledger"],[data-theme="lounge"],[data-theme="noir"],[data-theme="continental"],[data-theme="concierge"],[data-theme="future"],[data-theme="cyberpunk"],[data-theme="anime"]) .topbar { background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 78%,var(--bg))); border-color:var(--border); }
html[data-mode="light"]:is([data-theme="atelier"],[data-theme="palm"],[data-theme="riviera"],[data-theme="veranda"],[data-theme="floorplan"],[data-theme="command"],[data-theme="deco"],[data-theme="ledger"],[data-theme="lounge"],[data-theme="noir"],[data-theme="continental"],[data-theme="concierge"],[data-theme="future"],[data-theme="cyberpunk"],[data-theme="anime"]) :is(.panel,.metric,.room-card,.employee-bubble,.prod-score-card,.note) { background:var(--surface); border-color:var(--border); box-shadow:4px 5px 0 color-mix(in srgb,var(--accent) 12%,transparent),var(--lit-edge); }
html[data-mode="light"]:is([data-theme="atelier"],[data-theme="palm"],[data-theme="riviera"],[data-theme="veranda"],[data-theme="floorplan"],[data-theme="command"],[data-theme="deco"],[data-theme="ledger"],[data-theme="lounge"],[data-theme="noir"],[data-theme="continental"],[data-theme="concierge"],[data-theme="future"],[data-theme="cyberpunk"],[data-theme="anime"]) :is(.room-card,.metric,.employee-bubble,.prod-score-card) { transition:transform var(--motion) ease,box-shadow var(--motion) ease,border-color var(--motion) ease; }
html[data-mode="light"]:is([data-theme="atelier"],[data-theme="palm"],[data-theme="riviera"],[data-theme="veranda"],[data-theme="floorplan"],[data-theme="command"],[data-theme="deco"],[data-theme="ledger"],[data-theme="lounge"],[data-theme="noir"],[data-theme="continental"],[data-theme="concierge"],[data-theme="future"],[data-theme="cyberpunk"],[data-theme="anime"]) :is(.room-card,.metric,.employee-bubble,.prod-score-card):hover { transform:translateY(-3px); }

/* New silhouettes: forward-looking but still operationally calm. */
html[data-theme="future"] :is(.panel,.metric,.room-card) { border-radius:10px 22px 10px 22px; }
html[data-theme="cyberpunk"] :is(.panel,.metric,.room-card) { border-radius:2px; }
html[data-theme="anime"] :is(.panel,.metric,.room-card) { border-radius:22px 8px 22px 8px; }

/* Daylight tokens for the original named themes, too. */
html[data-mode="light"][data-theme="teal"] { --bg:#e0eee9; --panel:#f7fbf8; --surface:#fff; --surface-2:#d2e5dd; --accent:#1d6c5d; --accent-hover:#2a8875; --text:#173a35; --secondary:#486a62; --muted:#687e77; --border:#b9d4ca; --border-soft:#d5e5de; }
html[data-mode="light"][data-theme="midnight"] { --bg:#e5e7ee; --panel:#f7f8fc; --surface:#fff; --surface-2:#dce0ed; --accent:#4f59b0; --accent-hover:#6974ca; --text:#202640; --secondary:#58627c; --muted:#707a94; --border:#c3cae0; --border-soft:#dde1ee; }
html[data-mode="light"][data-theme="forest"] { --bg:#e3ecdf; --panel:#f7fbf4; --surface:#fff; --surface-2:#d4e5d0; --accent:#2c7046; --accent-hover:#3d8b59; --text:#1e3a29; --secondary:#52705b; --muted:#718576; --border:#bfd5bf; --border-soft:#d9e6d6; }
html[data-mode="light"][data-theme="royal"] { --bg:#e9e5f3; --panel:#f9f7fd; --surface:#fff; --surface-2:#dfd8ef; --accent:#6549a6; --accent-hover:#7d61c0; --text:#2e2449; --secondary:#635879; --muted:#7b7290; --border:#cfc4e5; --border-soft:#e2dcef; }
html[data-mode="light"][data-theme="rose"] { --bg:#f2e4ea; --panel:#fff8fb; --surface:#fff; --surface-2:#eed6e0; --accent:#b04b76; --accent-hover:#c8648c; --text:#482638; --secondary:#755467; --muted:#886f7d; --border:#dfbdcc; --border-soft:#eed9e2; }
html[data-mode="light"][data-theme="gold"] { --bg:#f0e8d6; --panel:#fcf8ee; --surface:#fffdf7; --surface-2:#eadcbc; --accent:#997024; --accent-hover:#b28c43; --text:#3d3322; --secondary:#6e614a; --muted:#817764; --border:#d9c49a; --border-soft:#e8dcc2; }
html[data-mode="light"][data-theme="ocean"] { --bg:#deedf5; --panel:#f6fbfe; --surface:#fff; --surface-2:#d2e6f1; --accent:#1b6d9b; --accent-hover:#2a88bb; --text:#183448; --secondary:#4e6b7e; --muted:#6d8493; --border:#b7d3e2; --border-soft:#d5e5ed; }
html[data-mode="light"][data-theme="coral"] { --bg:#f5e2da; --panel:#fff8f4; --surface:#fff; --surface-2:#f1d5ca; --accent:#c65e48; --accent-hover:#dc765d; --text:#492c27; --secondary:#795a52; --muted:#8d7068; --border:#e2bcae; --border-soft:#efd9d1; }
html[data-mode="light"][data-theme="lavender"] { --bg:#eee8f7; --panel:#fbf9ff; --surface:#fff; --surface-2:#e3daf2; --accent:#7656a8; --accent-hover:#9070c1; --text:#33264b; --secondary:#675a7d; --muted:#7c7191; --border:#d2c4e6; --border-soft:#e5dcef; }
html[data-mode="light"][data-theme="ember"] { --bg:#f4e4d5; --panel:#fff8f0; --surface:#fff; --surface-2:#f0d7c1; --accent:#b9561f; --accent-hover:#d16f34; --text:#452b1e; --secondary:#765a48; --muted:#8b7160; --border:#e2bca0; --border-soft:#efdacf; }
html[data-mode="light"]:is([data-theme="teal"],[data-theme="midnight"],[data-theme="forest"],[data-theme="royal"],[data-theme="rose"],[data-theme="gold"],[data-theme="ocean"],[data-theme="coral"],[data-theme="lavender"],[data-theme="ember"]) .sidebar { background:var(--accent); color:#fff; border-color:var(--accent); }
html[data-mode="light"]:is([data-theme="teal"],[data-theme="midnight"],[data-theme="forest"],[data-theme="royal"],[data-theme="rose"],[data-theme="gold"],[data-theme="ocean"],[data-theme="coral"],[data-theme="lavender"],[data-theme="ember"]) .workspace { background:var(--bg); }
html[data-mode="light"]:is([data-theme="teal"],[data-theme="midnight"],[data-theme="forest"],[data-theme="royal"],[data-theme="rose"],[data-theme="gold"],[data-theme="ocean"],[data-theme="coral"],[data-theme="lavender"],[data-theme="ember"]) .topbar { background:var(--panel); border-color:var(--border); }
html[data-mode="light"]:is([data-theme="teal"],[data-theme="midnight"],[data-theme="forest"],[data-theme="royal"],[data-theme="rose"],[data-theme="gold"],[data-theme="ocean"],[data-theme="coral"],[data-theme="lavender"],[data-theme="ember"]) :is(.panel,.metric,.room-card,.employee-bubble,.prod-score-card,.note) { background:var(--surface); border-color:var(--border); }

/* Six original studio themes: distinct visual systems, not palette swaps. */
html[data-theme="observatory"] { --bg:#241719; --panel:#332021; --surface:#45282a; --surface-2:#633738; --accent:#e58b63; --accent-hover:#f2ad82; --muted:#d4aaa0; --faint:#9d7771; --glow:rgba(229,139,99,.2); --accent-soft:rgba(229,139,99,.14); --accent-ink:#ffd0b4; --ring:rgba(229,139,99,.4); --text:#fff0df; --secondary:#edd2c1; }
html[data-theme="moss"] { --bg:#101b18; --panel:#172821; --surface:#20392d; --surface-2:#315241; --accent:#b8c96b; --accent-hover:#d5df8a; --muted:#b1c3a7; --faint:#728c79; --glow:rgba(184,201,107,.18); --accent-soft:rgba(184,201,107,.13); --accent-ink:#e9f0b1; --ring:rgba(184,201,107,.4); --text:#eff5df; --secondary:#d1ddc1; }
html[data-theme="lantern"] { --bg:#24130f; --panel:#3b1f15; --surface:#512819; --surface-2:#71391e; --accent:#f0b44d; --accent-hover:#ffd06f; --muted:#e1b99a; --faint:#a57759; --glow:rgba(240,180,77,.22); --accent-soft:rgba(240,180,77,.15); --accent-ink:#ffe2a1; --ring:rgba(240,180,77,.42); --text:#fff2d8; --secondary:#f0d0ab; }
html[data-theme="mineral"] { --bg:#111b24; --panel:#182833; --surface:#213743; --surface-2:#355563; --accent:#8fd6cf; --accent-hover:#b3ebe1; --muted:#a4c4c7; --faint:#6f929a; --glow:rgba(143,214,207,.18); --accent-soft:rgba(143,214,207,.13); --accent-ink:#c9fff6; --ring:rgba(143,214,207,.4); --text:#edf9f7; --secondary:#c8dcdf; }
html[data-theme="arcade"] { --bg:#1a1022; --panel:#261633; --surface:#351d44; --surface-2:#51275d; --accent:#f06cae; --accent-hover:#ff9ccb; --muted:#d0afd2; --faint:#94709d; --glow:rgba(53,221,190,.2); --accent-soft:rgba(240,108,174,.14); --accent-ink:#ffc5df; --ring:rgba(240,108,174,.42); --text:#fff1fb; --secondary:#ead0e9; }
html[data-theme="solar"] { --bg:#17130e; --panel:#282018; --surface:#392c1c; --surface-2:#554026; --accent:#f2c45e; --accent-hover:#ffdc82; --muted:#cfbd93; --faint:#998665; --glow:rgba(242,196,94,.2); --accent-soft:rgba(242,196,94,.14); --accent-ink:#ffe7a8; --ring:rgba(242,196,94,.4); --text:#fff5da; --secondary:#e9d5a5; }
html[data-theme="observatory"] :is(.panel,.metric,.room-card) { border-radius:18px 4px 18px 4px; }
html[data-theme="moss"] :is(.panel,.metric,.room-card) { border-radius:10px 24px 10px 24px; }
html[data-theme="lantern"] :is(.panel,.metric,.room-card) { border-radius:28px 6px 28px 6px; }
html[data-theme="mineral"] :is(.panel,.metric,.room-card) { border-radius:5px 18px 5px 18px; }
html[data-theme="arcade"] :is(.panel,.metric,.room-card) { border-radius:14px; }
html[data-theme="solar"] :is(.panel,.metric,.room-card) { border-radius:3px 16px 3px 16px; }
html[data-mode="light"][data-theme="observatory"] { --bg:#f2dfd4; --panel:#fff4eb; --surface:#fffaf4; --surface-2:#f0cbbb; --accent:#b6533f; --accent-hover:#ce6e56; --text:#402525; --secondary:#765656; --muted:#8a6b68; --border:#dfb9aa; --border-soft:#efd8ce; }
html[data-mode="light"][data-theme="moss"] { --bg:#e5eadc; --panel:#f6faf0; --surface:#fcfff7; --surface-2:#d5e1c5; --accent:#5d7636; --accent-hover:#78964b; --text:#263b29; --secondary:#58705b; --muted:#718273; --border:#c2d2b1; --border-soft:#dbe6d1; }
html[data-mode="light"][data-theme="lantern"] { --bg:#f4e2c7; --panel:#fff7e8; --surface:#fffaf0; --surface-2:#f4d09b; --accent:#a45b1d; --accent-hover:#bf762e; --text:#482b18; --secondary:#765337; --muted:#8d7156; --border:#dfbd8f; --border-soft:#efdbbd; }
html[data-mode="light"][data-theme="mineral"] { --bg:#dfecef; --panel:#f5fbfa; --surface:#fbffff; --surface-2:#cee3e4; --accent:#277c7b; --accent-hover:#389995; --text:#1e3d45; --secondary:#4d6f75; --muted:#6e8589; --border:#b5d2d4; --border-soft:#d6e7e8; }
html[data-mode="light"][data-theme="arcade"] { --bg:#eee0f0; --panel:#fff5fd; --surface:#fffaff; --surface-2:#e8cbe2; --accent:#ad397e; --accent-hover:#c95698; --text:#3d2146; --secondary:#735579; --muted:#896f8d; --border:#d9b5d2; --border-soft:#eed9e9; }
html[data-mode="light"][data-theme="solar"] { --bg:#f2e8d2; --panel:#fff9e9; --surface:#fffdf5; --surface-2:#ead6a5; --accent:#9b681c; --accent-hover:#b9852f; --text:#40301c; --secondary:#6e5b3d; --muted:#83755e; --border:#d8c18e; --border-soft:#eadcbb; }
html[data-mode="light"]:is([data-theme="observatory"],[data-theme="moss"],[data-theme="lantern"],[data-theme="mineral"],[data-theme="arcade"],[data-theme="solar"]) .sidebar { background:var(--accent); color:#fffdf5; border-color:var(--accent); }
html[data-mode="light"]:is([data-theme="observatory"],[data-theme="moss"],[data-theme="lantern"],[data-theme="mineral"],[data-theme="arcade"],[data-theme="solar"]) .workspace { background:var(--bg); }
html[data-mode="light"]:is([data-theme="observatory"],[data-theme="moss"],[data-theme="lantern"],[data-theme="mineral"],[data-theme="arcade"],[data-theme="solar"]) .topbar { background:var(--panel); border-color:var(--border); }
html[data-mode="light"]:is([data-theme="observatory"],[data-theme="moss"],[data-theme="lantern"],[data-theme="mineral"],[data-theme="arcade"],[data-theme="solar"]) :is(.panel,.metric,.room-card,.employee-bubble,.prod-score-card,.note) { background:var(--surface); border-color:var(--border); }

/* Greeting typography follows the selected theme instead of using one global
   display face. The message remains the same accessible text and markup. */
html[data-theme="atelier"] .housekeeper-greeting,
html[data-theme="palm"] .housekeeper-greeting,
html[data-theme="deco"] .housekeeper-greeting,
html[data-theme="ledger"] .housekeeper-greeting,
html[data-theme="veranda"] .housekeeper-greeting,
html[data-theme="lounge"] .housekeeper-greeting,
html[data-theme="noir"] .housekeeper-greeting,
html[data-theme="continental"] .housekeeper-greeting,
html[data-theme="concierge"] .housekeeper-greeting { font-family:"Sentient", Georgia, serif; }
html[data-theme="atelier"] .housekeeper-greeting em,
html[data-theme="palm"] .housekeeper-greeting em,
html[data-theme="deco"] .housekeeper-greeting em,
html[data-theme="ledger"] .housekeeper-greeting em,
html[data-theme="veranda"] .housekeeper-greeting em,
html[data-theme="lounge"] .housekeeper-greeting em,
html[data-theme="noir"] .housekeeper-greeting em,
html[data-theme="continental"] .housekeeper-greeting em,
html[data-theme="concierge"] .housekeeper-greeting em { font-family:"Sentient", Georgia, serif; }
html[data-theme="command"] .housekeeper-greeting,
html[data-theme="future"] .housekeeper-greeting { font-family:"Space Grotesk", Inter, sans-serif; font-weight:600; letter-spacing:.01em; }
html[data-theme="command"] .housekeeper-greeting em,
html[data-theme="future"] .housekeeper-greeting em { font-family:"Space Mono", ui-monospace, monospace; font-style:normal; font-size:.92em; letter-spacing:-.04em; }
html[data-theme="cyberpunk"] .housekeeper-greeting { font-family:"Space Mono", ui-monospace, monospace; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
html[data-theme="cyberpunk"] .housekeeper-greeting em { font-family:"Space Grotesk", Inter, sans-serif; font-style:normal; font-weight:700; text-transform:none; letter-spacing:-.03em; }
html[data-theme="floorplan"] .housekeeper-greeting,
html[data-theme="riviera"] .housekeeper-greeting,
html[data-theme="ocean"] .housekeeper-greeting,
html[data-theme="coral"] .housekeeper-greeting { font-family:"Space Grotesk", Inter, sans-serif; font-weight:500; }
html[data-theme="floorplan"] .housekeeper-greeting em,
html[data-theme="riviera"] .housekeeper-greeting em,
html[data-theme="ocean"] .housekeeper-greeting em,
html[data-theme="coral"] .housekeeper-greeting em { font-family:"Space Grotesk", Inter, sans-serif; font-style:normal; font-weight:700; }
html[data-theme="anime"] .housekeeper-greeting { font-family:"Sentient", Georgia, serif; font-weight:500; letter-spacing:.01em; }
html[data-theme="anime"] .housekeeper-greeting em { font-family:"Space Grotesk", Inter, sans-serif; font-style:normal; font-weight:700; letter-spacing:-.04em; }

/* -------------------------------------------------------------------------
   THEME PERSONALITY PASS — each surface gets its own punch mark, while
   operational cards keep the same readable layout and status colors.
   ------------------------------------------------------------------------- */
@keyframes phx-accent-breathe {
  0%, 100% { opacity: .72; filter: saturate(.92); }
  50% { opacity: 1; filter: saturate(1.25); }
}
@keyframes phx-highlight-sweep {
  0% { transform: translateX(-115%); opacity: 0; }
  18%, 72% { opacity: .34; }
  100% { transform: translateX(115%); opacity: 0; }
}
@keyframes phx-ripple {
  0%, 100% { box-shadow: 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
  50% { box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* The seam is now a restrained moving highlight on interactive surfaces. */
:is(.topbar, .panel, .metric, .room-card)::before {
  transform-origin: left center;
}
@media (hover: hover) {
  :is(.panel, .metric, .room-card):hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  }
  :is(.panel, .metric, .room-card):hover::before {
    animation: phx-highlight-sweep 1.15s ease-out both;
  }
}
:is(.nav-item.active, .top-actions .button:hover, .top-actions .notification-button:hover) {
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Punch marks: intentionally small, but unmistakably different by room. */
:is(.topbar, .panel, .room-card)::after,
.metric::before {
  transition: border-radius var(--motion) ease, clip-path var(--motion) ease,
    transform var(--motion) ease, box-shadow var(--motion) ease;
}
html[data-theme="anime"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="anime"] .metric::before {
  width: 10px; height: 10px; border: 0; border-radius: 0;
  background: var(--accent);
  clip-path: polygon(50% 0, 61% 34%, 100% 38%, 69% 58%, 78% 100%, 50% 72%, 22% 100%, 31% 58%, 0 38%, 39% 34%);
  box-shadow: 0 0 9px var(--accent-soft-2);
}
html[data-theme="scallop"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="scallop"] .metric::before {
  width: 10px; height: 10px; border-radius: 50% 50% 50% 8%;
  background: var(--accent); transform: rotate(45deg);
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 9px var(--accent-soft-2);
}
html[data-theme="cozy"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="cozy"] .metric::before {
  width: 10px; height: 9px; border-radius: 60% 40% 55% 45%;
  background: var(--accent); transform: rotate(-32deg);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, #fff), 0 0 11px var(--accent-soft-2);
}
html[data-theme="library"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="library"] .metric::before {
  width: 9px; height: 12px; border-radius: 1px 1px 4px 4px;
  background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 73%, 0 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 72%, #fff), 0 0 8px var(--accent-soft-2);
}
html[data-theme="plants"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="plants"] .metric::before {
  width: 11px; height: 8px; border-radius: 100% 0 100% 0;
  background: var(--accent); transform: rotate(-38deg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, #fff), 0 0 10px var(--accent-soft-2);
}
html[data-theme="zen"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="zen"] .metric::before {
  width: 10px; height: 10px; border-radius: 50%; background: transparent;
  border: 1px solid var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
  animation: phx-ripple 3.4s ease-in-out infinite;
}
html[data-theme="conservatory"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="conservatory"] .metric::before {
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  box-shadow: inset 3px 0 0 var(--panel), 0 0 9px var(--accent-soft-2);
  transform: rotate(-22deg);
}
html[data-theme="rain"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="rain"] .metric::before {
  width: 9px; height: 11px; border-radius: 70% 30% 65% 35%;
  background: var(--accent); transform: rotate(45deg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, #fff), 0 0 9px var(--accent-soft-2);
}
html[data-theme="porcelain"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="porcelain"] .metric::before {
  width: 9px; height: 9px; border-radius: 2px; background: transparent;
  border: 1px solid var(--accent); transform: rotate(45deg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
}
html[data-theme="citrus"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="citrus"] .metric::before {
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 11px var(--accent-soft-2);
  animation: phx-accent-breathe 2.8s ease-in-out infinite;
}
html[data-theme="sunset"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="sunset"] .metric::before {
  width: 11px; height: 6px; border-radius: 11px 11px 2px 2px;
  background: var(--accent); box-shadow: 0 0 0 1.5px var(--accent), 0 0 10px var(--accent-soft-2);
}
html[data-theme="ticket"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="ticket"] .metric::before {
  width: 10px; height: 8px; border-radius: 1px; background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 35%, 84% 50%, 100% 65%, 100% 100%, 0 100%, 0 65%, 16% 50%, 0 35%);
}
html[data-theme="sunburst"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="sunburst"] .metric::before {
  width: 10px; height: 10px; border-radius: 0; background: var(--accent);
  clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
}
html[data-theme="archival"] :is(.topbar, .panel, .room-card)::after,
html[data-theme="archival"] .metric::before {
  width: 10px; height: 7px; border-radius: 10px 10px 2px 2px; background: transparent;
  border: 1px solid var(--accent); border-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  :is(.topbar, .panel, .metric, .room-card)::before,
  :is(.topbar, .panel, .metric, .room-card)::after,
  .metric::before { animation: none !important; transition: none !important; }
}

/* Rainy Window: layered pane-of-glass rain. Fine distant streaks sit behind
   a few soft foreground beads, all below .app-shell. */
@keyframes phx-rainfall {
  from { background-position: 0 -320px, 24px -520px, -42px -260px; }
  to { background-position: -22px 320px, -30px 520px, -66px 260px; }
}
@keyframes phx-droplet-drift {
  0%, 100% { transform: translate3d(0, -18px, 0); opacity: .1; }
  18% { opacity: .2; }
  52% { transform: translate3d(-7px, 12px, 0); opacity: .26; }
  82% { opacity: .14; }
}
html[data-theme="rain"] .ambient::before {
  content: "";
  position: absolute;
  inset: -320px -100px;
  pointer-events: none;
  opacity: .3;
  background-image:
    /* close, thin trails */
    repeating-linear-gradient(103deg, transparent 0 31px, rgba(178, 225, 245, .16) 32px, rgba(178, 225, 245, .05) 34px, transparent 36px 92px),
    /* smaller distant rain */
    repeating-linear-gradient(103deg, transparent 0 46px, rgba(130, 199, 232, .11) 47px, transparent 49px 137px),
    /* occasional longer trails */
    repeating-linear-gradient(103deg, transparent 0 128px, rgba(191, 231, 247, .12) 129px, rgba(191, 231, 247, .025) 133px, transparent 136px 241px);
  background-size: 92px 180px, 151px 260px, 241px 410px;
  animation: phx-rainfall 3.8s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 17%, #000 81%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 17%, #000 81%, transparent 100%);
}
html[data-theme="rain"] .ambient::after {
  content: "";
  position: absolute;
  inset: -8% -4%;
  pointer-events: none;
  opacity: .18;
  filter: blur(1px);
  background-image:
    radial-gradient(ellipse 6px 22px at 18% 27%, rgba(207, 239, 252, .32) 0 12%, rgba(135, 201, 230, .12) 35%, transparent 72%),
    radial-gradient(ellipse 4px 15px at 57% 12%, rgba(207, 239, 252, .27) 0 13%, rgba(135, 201, 230, .1) 38%, transparent 72%),
    radial-gradient(ellipse 7px 27px at 82% 67%, rgba(207, 239, 252, .22) 0 11%, rgba(135, 201, 230, .08) 38%, transparent 72%),
    radial-gradient(ellipse 3px 12px at 39% 84%, rgba(207, 239, 252, .24) 0 14%, transparent 72%);
  background-size: 100% 100%;
  animation: phx-droplet-drift 7.5s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
html[data-mode="light"][data-theme="rain"] .ambient::before { opacity: .2; }
html[data-mode="light"][data-theme="rain"] .ambient::after { opacity: .13; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="rain"] .ambient::before,
  html[data-theme="rain"] .ambient::after { animation: none; }
  html[data-theme="rain"] .ambient::before { opacity: .14; }
  html[data-theme="rain"] .ambient::after { opacity: .1; }
}

/* Theme atmospheres — small pieces of art, kept behind the working surface. */
@keyframes phx-neon-scan { to { background-position: 0 72px, 96px 0; } }
@keyframes phx-neon-stars { 0%, 100% { opacity: .35; transform: translate3d(0, 0, 0); } 50% { opacity: .8; transform: translate3d(-8px, 5px, 0); } }
@keyframes phx-ember-float { 0%, 100% { transform: translate3d(0, 22px, 0) scale(.98); opacity: .12; } 50% { transform: translate3d(-8px, -18px, 0) scale(1.04); opacity: .42; } }
@keyframes phx-dust-drift { from { transform: translate3d(-12px, 18px, 0); } to { transform: translate3d(14px, -22px, 0); } }
@keyframes phx-leaf-drift { 0%, 100% { transform: translate3d(0, 10px, 0) rotate(-1deg); } 50% { transform: translate3d(-12px, -16px, 0) rotate(2deg); } }
@keyframes phx-zen-mist { 0%, 100% { transform: translate3d(-3%, 1%, 0) scale(1); opacity: .18; } 50% { transform: translate3d(3%, -2%, 0) scale(1.08); opacity: .32; } }
@keyframes phx-firefly { 0%, 100% { transform: translate3d(-5px, 8px, 0); opacity: .12; } 45% { opacity: .65; } 70% { transform: translate3d(8px, -10px, 0); opacity: .28; } }
@keyframes phx-glaze { from { transform: translateX(-42%); } to { transform: translateX(42%); } }
@keyframes phx-sun-rotate { to { transform: rotate(360deg); } }
@keyframes phx-bokeh { 0%, 100% { transform: translate3d(-8px, 5px, 0) scale(.96); opacity: .16; } 50% { transform: translate3d(10px, -9px, 0) scale(1.06); opacity: .34; } }
@keyframes phx-tide { from { background-position: 0 0, 55px 0; } to { background-position: 130px 0, -35px 0; } }

/* Neo Tokyo — scanlines and drifting city lights. */
html[data-theme="anime"] .ambient::before,
html[data-theme="cyberpunk"] .ambient::before,
html[data-theme="future"] .ambient::before {
  inset: 0; opacity: .18;
  background-image: repeating-linear-gradient(0deg, transparent 0 8px, color-mix(in srgb, var(--accent) 15%, transparent) 9px, transparent 10px), repeating-linear-gradient(90deg, transparent 0 95px, color-mix(in srgb, var(--purple) 12%, transparent) 96px, transparent 97px);
  background-size: 100% 72px, 192px 100%;
  animation: phx-neon-scan 5s linear infinite;
}
html[data-theme="anime"] .ambient::after,
html[data-theme="cyberpunk"] .ambient::after,
html[data-theme="future"] .ambient::after {
  inset: 0; opacity: .38;
  background-image: radial-gradient(circle at 14% 22%, var(--accent) 0 1px, transparent 3px), radial-gradient(circle at 72% 34%, var(--purple) 0 1px, transparent 3px), radial-gradient(circle at 42% 76%, var(--accent) 0 1px, transparent 3px), radial-gradient(circle at 88% 82%, var(--purple) 0 1px, transparent 3px);
  animation: phx-neon-stars 6s ease-in-out infinite;
  filter: blur(.2px);
}
/* Cozy Hearth — floating firelight and a soft woven glow. */
html[data-theme="cozy"] .ambient::before {
  inset: -12%; opacity: .25;
  background-image: radial-gradient(circle at 18% 78%, #ffb45e 0 1px, transparent 4px), radial-gradient(circle at 63% 66%, #f28d58 0 1px, transparent 4px), radial-gradient(circle at 82% 88%, #ffd18a 0 1px, transparent 5px), radial-gradient(ellipse at 22% 100%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 48%);
  animation: phx-ember-float 5.8s ease-in-out infinite;
  filter: blur(.4px);
}
html[data-theme="cozy"] .ambient::after {
  inset: 0; opacity: .08;
  background: repeating-linear-gradient(45deg, transparent 0 8px, color-mix(in srgb, var(--accent) 18%, transparent) 9px, transparent 10px);
  animation: phx-tide 18s linear infinite;
}
/* Quiet Library — floating dust in lamplight and quiet page rules. */
html[data-theme="library"] .ambient::before {
  inset: -10%; opacity: .18;
  background-image: repeating-linear-gradient(0deg, transparent 0 38px, color-mix(in srgb, var(--accent) 12%, transparent) 39px, transparent 40px), radial-gradient(circle at 16% 28%, #f2d28c 0 1px, transparent 3px), radial-gradient(circle at 78% 42%, #e4bd73 0 1px, transparent 3px), radial-gradient(circle at 48% 78%, #f2d28c 0 1px, transparent 3px);
  animation: phx-dust-drift 14s ease-in-out infinite alternate;
}
html[data-theme="library"] .ambient::after {
  inset: 0; opacity: .11;
  background: radial-gradient(ellipse at 12% 10%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 32%), radial-gradient(ellipse at 86% 22%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 30%);
  animation: phx-bokeh 11s ease-in-out infinite;
}
/* Indoor Garden — drifting leaves and filtered greenhouse light. */
html[data-theme="plants"] .ambient::before,
html[data-theme="conservatory"] .ambient::before {
  inset: -12%; opacity: .2;
  background-image: radial-gradient(ellipse 8px 18px at 15% 31%, color-mix(in srgb, var(--accent) 48%, transparent) 0 35%, transparent 70%), radial-gradient(ellipse 6px 15px at 72% 64%, color-mix(in srgb, var(--green) 42%, transparent) 0 35%, transparent 70%), radial-gradient(ellipse 7px 17px at 87% 20%, color-mix(in srgb, var(--accent) 32%, transparent) 0 35%, transparent 70%), radial-gradient(ellipse at 10% 0%, color-mix(in srgb, var(--green) 18%, transparent), transparent 42%);
  animation: phx-leaf-drift 12s ease-in-out infinite;
  filter: blur(.2px);
}
html[data-theme="plants"] .ambient::after,
html[data-theme="conservatory"] .ambient::after {
  inset: 0; opacity: .2;
  background-image: radial-gradient(circle at 21% 22%, #d9f59b 0 1px, transparent 4px), radial-gradient(circle at 68% 30%, #f3dda0 0 1px, transparent 4px), radial-gradient(circle at 81% 72%, #d9f59b 0 1px, transparent 4px);
  animation: phx-firefly 8s ease-in-out infinite;
}
/* Stillwater Zen — slow ink-wash mist and a barely moving water field. */
html[data-theme="zen"] .ambient::before {
  inset: -18%; opacity: .24;
  background: radial-gradient(ellipse at 20% 35%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 40%), radial-gradient(ellipse at 80% 68%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 42%), linear-gradient(178deg, transparent 0 68%, color-mix(in srgb, var(--accent) 10%, transparent) 69% 70%, transparent 71%);
  animation: phx-zen-mist 18s ease-in-out infinite;
  filter: blur(3px);
}
html[data-theme="zen"] .ambient::after {
  inset: 8% 12%; opacity: .13;
  background: repeating-radial-gradient(ellipse at 52% 78%, transparent 0 24px, color-mix(in srgb, var(--accent) 24%, transparent) 25px 26px, transparent 27px 52px);
  animation: phx-tide 22s ease-in-out infinite alternate;
  filter: blur(.4px);
}
/* Moonlit Conservatory — small fireflies over cool glass. */
html[data-theme="conservatory"] .ambient::after { opacity: .3; animation-duration: 9.5s; }
/* Rainy Window is defined above with its dedicated layered rainfall. */
/* Ink & Porcelain — a slow ceramic glaze passing across the pane. */
html[data-theme="porcelain"] .ambient::before {
  inset: -10% -40%; opacity: .16;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--accent) 30%, #fff) 48%, transparent 59%);
  animation: phx-glaze 9s ease-in-out infinite alternate;
  filter: blur(7px);
}
html[data-theme="porcelain"] .ambient::after {
  inset: 0; opacity: .1;
  background-image: radial-gradient(circle at 20% 24%, var(--accent) 0 1px, transparent 2px), radial-gradient(circle at 67% 72%, var(--accent) 0 1px, transparent 2px);
  background-size: 83px 97px, 127px 143px;
  animation: phx-dust-drift 17s ease-in-out infinite alternate;
}
/* Citrus Morning — a rotating sunburst and warm floating motes. */
html[data-theme="citrus"] .ambient::before {
  width: 72vmin; height: 72vmin; left: 58%; top: -32%; opacity: .13;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 35%, transparent) 0 5deg, transparent 5deg 18deg);
  border-radius: 50%;
  animation: phx-sun-rotate 42s linear infinite;
  filter: blur(1px);
}
html[data-theme="citrus"] .ambient::after {
  inset: 0; opacity: .22;
  background-image: radial-gradient(circle at 26% 68%, #f6e781 0 2px, transparent 6px), radial-gradient(circle at 75% 32%, #e9bf62 0 1px, transparent 5px);
  animation: phx-bokeh 8s ease-in-out infinite;
}
/* Sunset Terrace — low bokeh drifting through evening light. */
html[data-theme="sunset"] .ambient::before {
  inset: 0; opacity: .2;
  background: linear-gradient(180deg, transparent 0 54%, color-mix(in srgb, var(--accent) 16%, transparent) 78%, transparent 100%);
}
html[data-theme="sunset"] .ambient::after {
  inset: 0; opacity: .25;
  background-image: radial-gradient(circle at 18% 68%, #f6bf83 0 3px, transparent 18px), radial-gradient(circle at 72% 40%, #db876c 0 2px, transparent 15px), radial-gradient(circle at 88% 78%, #f3ad71 0 3px, transparent 21px), radial-gradient(circle at 48% 22%, #ffd4a0 0 1px, transparent 12px);
  animation: phx-bokeh 10s ease-in-out infinite;
  filter: blur(1px);
}
/* Original studio themes — each family gets a restrained signature texture. */
html[data-theme="teal"] .ambient::before,
html[data-theme="ocean"] .ambient::before,
html[data-theme="coral"] .ambient::before { inset: 0; opacity: .12; background: repeating-linear-gradient(168deg, transparent 0 28px, color-mix(in srgb, var(--accent) 22%, transparent) 29px 30px, transparent 31px 70px); background-size: 180px 140px; animation: phx-tide 15s linear infinite; }
html[data-theme="midnight"] .ambient::after,
html[data-theme="observatory"] .ambient::after,
html[data-theme="royal"] .ambient::after { inset: 0; opacity: .28; background-image: radial-gradient(circle at 18% 24%, var(--accent) 0 1px, transparent 3px), radial-gradient(circle at 73% 18%, var(--accent) 0 1px, transparent 3px), radial-gradient(circle at 56% 72%, var(--accent) 0 1px, transparent 3px), radial-gradient(circle at 88% 62%, var(--accent) 0 1px, transparent 3px); animation: phx-neon-stars 8s ease-in-out infinite; }
html[data-theme="forest"] .ambient::after,
html[data-theme="moss"] .ambient::after,
html[data-theme="lantern"] .ambient::after { inset: 0; opacity: .2; background-image: radial-gradient(circle at 15% 35%, var(--accent) 0 1px, transparent 4px), radial-gradient(circle at 76% 28%, var(--accent) 0 1px, transparent 4px), radial-gradient(circle at 62% 76%, var(--accent) 0 1px, transparent 4px); animation: phx-firefly 9s ease-in-out infinite; }
html[data-theme="rose"] .ambient::after,
html[data-theme="lavender"] .ambient::after { inset: -8%; opacity: .16; background-image: radial-gradient(ellipse 8px 4px at 20% 25%, var(--accent) 0 30%, transparent 72%), radial-gradient(ellipse 7px 4px at 74% 58%, var(--accent) 0 30%, transparent 72%); animation: phx-bokeh 12s ease-in-out infinite; filter: blur(1px); }
html[data-theme="gold"] .ambient::before,
html[data-theme="mineral"] .ambient::before { inset: -10% -35%; opacity: .13; background: linear-gradient(110deg, transparent 36%, color-mix(in srgb, var(--accent) 38%, #fff) 49%, transparent 61%); animation: phx-glaze 12s ease-in-out infinite alternate; filter: blur(6px); }
html[data-theme="ember"] .ambient::after,
html[data-theme="solar"] .ambient::after { inset: 0; opacity: .26; background-image: radial-gradient(circle at 22% 72%, var(--accent) 0 1px, transparent 5px), radial-gradient(circle at 70% 54%, var(--accent) 0 1px, transparent 5px), radial-gradient(circle at 84% 22%, var(--accent) 0 1px, transparent 4px); animation: phx-ember-float 7s ease-in-out infinite; }
html[data-theme="deco"] .ambient::before,
html[data-theme="ledger"] .ambient::before,
html[data-theme="lounge"] .ambient::before,
html[data-theme="noir"] .ambient::before,
html[data-theme="continental"] .ambient::before,
html[data-theme="concierge"] .ambient::before { inset: 0; opacity: .08; background: repeating-linear-gradient(90deg, transparent 0 74px, color-mix(in srgb, var(--accent) 28%, transparent) 75px 76px); animation: phx-glaze 18s ease-in-out infinite alternate; }
html[data-theme="command"] .ambient::before { inset: 0; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--accent) 18%, transparent) 24px), repeating-linear-gradient(90deg, transparent 0 79px, color-mix(in srgb, var(--accent) 12%, transparent) 80px); background-size: 100% 96px, 160px 100%; animation: phx-neon-scan 8s linear infinite; }

/* Make the signature art visible on the glass header too. This is deliberately
   a background treatment, never a layer over text or controls. */
@keyframes phx-surface-glide { from { background-position: -35% 0, 0 0; } to { background-position: 135% 0, 0 0; } }
@keyframes phx-surface-drift { from { background-position: 0 0, 0 0; } to { background-position: 90px -18px, -40px 0; } }
html[data-theme="anime"] .topbar,
html[data-theme="cyberpunk"] .topbar,
html[data-theme="future"] .topbar,
html[data-theme="command"] .topbar {
  background-image: repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb, var(--accent) 16%, transparent) 8px, transparent 10px), linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  background-size: 100% 54px, 100% 100%;
  animation: phx-surface-drift 6s linear infinite;
}
html[data-theme="cozy"] .topbar,
html[data-theme="ember"] .topbar,
html[data-theme="sunset"] .topbar {
  background-image: radial-gradient(circle at 18% 72%, color-mix(in srgb, var(--accent) 34%, transparent) 0 2px, transparent 14px), radial-gradient(circle at 76% 28%, color-mix(in srgb, var(--accent) 25%, transparent) 0 2px, transparent 18px), linear-gradient(180deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent) 9%, transparent));
  background-size: 100% 100%, 100% 100%, 100% 100%;
  animation: phx-surface-drift 8s ease-in-out infinite alternate;
}
html[data-theme="library"] .topbar,
html[data-theme="deco"] .topbar,
html[data-theme="ledger"] .topbar,
html[data-theme="lounge"] .topbar,
html[data-theme="noir"] .topbar,
html[data-theme="continental"] .topbar,
html[data-theme="concierge"] .topbar {
  background-image: linear-gradient(105deg, transparent 24%, color-mix(in srgb, var(--accent) 22%, transparent) 48%, transparent 70%), repeating-linear-gradient(0deg, transparent 0 22px, color-mix(in srgb, var(--accent) 9%, transparent) 23px, transparent 24px);
  background-size: 180% 100%, 100% 48px;
  animation: phx-surface-glide 12s ease-in-out infinite alternate;
}
html[data-theme="plants"] .topbar,
html[data-theme="conservatory"] .topbar,
html[data-theme="forest"] .topbar,
html[data-theme="moss"] .topbar,
html[data-theme="lantern"] .topbar {
  background-image: radial-gradient(ellipse 18px 7px at 18% 34%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%), radial-gradient(ellipse 16px 6px at 76% 72%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  background-size: 145% 145%, 130% 130%, 100% 100%;
  animation: phx-surface-drift 13s ease-in-out infinite alternate;
}
html[data-theme="zen"] .topbar,
html[data-theme="lavender"] .topbar {
  background-image: radial-gradient(ellipse at 22% 35%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 48%), radial-gradient(ellipse at 78% 65%, color-mix(in srgb, var(--accent) 23%, transparent), transparent 48%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 7%, transparent));
  background-size: 130% 130%, 130% 130%, 100% 100%;
  animation: phx-surface-drift 18s ease-in-out infinite alternate;
}
html[data-theme="porcelain"] .topbar,
html[data-theme="gold"] .topbar,
html[data-theme="mineral"] .topbar {
  background-image: linear-gradient(105deg, transparent 24%, color-mix(in srgb, var(--accent) 30%, #fff) 48%, transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 7%, transparent));
  background-size: 180% 100%, 100% 100%;
  animation: phx-surface-glide 10s ease-in-out infinite alternate;
}
html[data-theme="citrus"] .topbar,
html[data-theme="solar"] .topbar {
  background-image: repeating-linear-gradient(115deg, transparent 0 20px, color-mix(in srgb, var(--accent) 19%, transparent) 21px 23px, transparent 24px 52px), linear-gradient(180deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  background-size: 160% 100%, 100% 100%;
  animation: phx-surface-glide 16s linear infinite;
}
html[data-theme="midnight"] .topbar,
html[data-theme="observatory"] .topbar,
html[data-theme="royal"] .topbar {
  background-image: radial-gradient(circle at 18% 28%, var(--accent) 0 1px, transparent 4px), radial-gradient(circle at 74% 62%, var(--accent) 0 1px, transparent 4px), linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 7%, transparent));
  background-size: 100% 100%, 100% 100%, 100% 100%;
  animation: phx-surface-drift 14s ease-in-out infinite alternate;
}
html[data-theme="teal"] .topbar,
html[data-theme="ocean"] .topbar,
html[data-theme="coral"] .topbar {
  background-image: repeating-linear-gradient(168deg, transparent 0 22px, color-mix(in srgb, var(--accent) 18%, transparent) 23px 24px, transparent 25px 62px), linear-gradient(180deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  background-size: 180% 100%, 100% 100%;
  animation: phx-surface-drift 12s linear infinite;
}
html[data-theme="rose"] .topbar {
  background-image: radial-gradient(ellipse 30px 12px at 22% 35%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 72%), radial-gradient(ellipse 24px 10px at 76% 68%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 7%, transparent));
  background-size: 140% 140%, 140% 140%, 100% 100%;
  animation: phx-surface-drift 11s ease-in-out infinite alternate;
}

/* Full-width atmosphere layer: visible through the workspace gaps, beneath
   every operational card. The header treatment above remains as a focal point. */
.workspace { position: relative; }
.workspace::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 94px; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  opacity: .26;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 92%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 92%, transparent);
}
.workspace > * { position: relative; z-index: 1; }
html[data-theme="anime"] .workspace::before,
html[data-theme="cyberpunk"] .workspace::before,
html[data-theme="future"] .workspace::before,
html[data-theme="command"] .workspace::before {
  background-image: repeating-linear-gradient(0deg, transparent 0 17px, color-mix(in srgb, var(--accent) 18%, transparent) 18px 19px, transparent 20px 72px), repeating-linear-gradient(90deg, transparent 0 112px, color-mix(in srgb, var(--purple) 15%, transparent) 113px 114px, transparent 115px 210px);
  background-size: 100% 144px, 420px 100%;
  animation: phx-neon-scan 7s linear infinite;
}
html[data-theme="cozy"] .workspace::before,
html[data-theme="ember"] .workspace::before,
html[data-theme="sunset"] .workspace::before {
  background-image: radial-gradient(circle at 12% 78%, color-mix(in srgb, var(--accent) 44%, transparent) 0 2px, transparent 16px), radial-gradient(circle at 46% 62%, color-mix(in srgb, var(--accent) 32%, transparent) 0 2px, transparent 13px), radial-gradient(circle at 84% 32%, color-mix(in srgb, var(--accent) 38%, transparent) 0 2px, transparent 18px), radial-gradient(ellipse at 20% 100%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 46%);
  animation: phx-ember-float 7.5s ease-in-out infinite;
  filter: blur(.5px);
}
html[data-theme="library"] .workspace::before,
html[data-theme="deco"] .workspace::before,
html[data-theme="ledger"] .workspace::before,
html[data-theme="lounge"] .workspace::before,
html[data-theme="noir"] .workspace::before,
html[data-theme="continental"] .workspace::before,
html[data-theme="concierge"] .workspace::before {
  background-image: repeating-linear-gradient(0deg, transparent 0 54px, color-mix(in srgb, var(--accent) 14%, transparent) 55px 56px, transparent 57px 128px), linear-gradient(105deg, transparent 22%, color-mix(in srgb, var(--accent) 17%, transparent) 48%, transparent 72%);
  background-size: 100% 160px, 220% 100%;
  animation: phx-surface-glide 14s ease-in-out infinite alternate;
}
html[data-theme="plants"] .workspace::before,
html[data-theme="conservatory"] .workspace::before,
html[data-theme="forest"] .workspace::before,
html[data-theme="moss"] .workspace::before,
html[data-theme="lantern"] .workspace::before {
  background-image: radial-gradient(ellipse 12px 26px at 12% 28%, color-mix(in srgb, var(--accent) 42%, transparent) 0 35%, transparent 72%), radial-gradient(ellipse 9px 22px at 76% 58%, color-mix(in srgb, var(--accent) 34%, transparent) 0 35%, transparent 72%), radial-gradient(ellipse 11px 24px at 88% 18%, color-mix(in srgb, var(--accent) 28%, transparent) 0 35%, transparent 72%);
  animation: phx-leaf-drift 15s ease-in-out infinite alternate;
  filter: blur(.3px);
}
html[data-theme="zen"] .workspace::before,
html[data-theme="lavender"] .workspace::before {
  background-image: radial-gradient(ellipse at 18% 30%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 42%), radial-gradient(ellipse at 78% 72%, color-mix(in srgb, var(--accent) 27%, transparent), transparent 44%), repeating-radial-gradient(ellipse at 52% 94%, transparent 0 34px, color-mix(in srgb, var(--accent) 13%, transparent) 35px 36px, transparent 37px 82px);
  animation: phx-zen-mist 20s ease-in-out infinite;
  filter: blur(4px);
}
html[data-theme="porcelain"] .workspace::before,
html[data-theme="gold"] .workspace::before,
html[data-theme="mineral"] .workspace::before {
  background: linear-gradient(105deg, transparent 28%, color-mix(in srgb, var(--accent) 34%, #fff) 49%, transparent 69%);
  background-size: 220% 100%;
  animation: phx-surface-glide 11s ease-in-out infinite alternate;
  filter: blur(8px);
}
html[data-theme="citrus"] .workspace::before,
html[data-theme="solar"] .workspace::before {
  background-image: repeating-conic-gradient(from 0deg at 78% 4%, color-mix(in srgb, var(--accent) 22%, transparent) 0 4deg, transparent 4deg 15deg), radial-gradient(circle at 32% 74%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 18%);
  animation: phx-sun-rotate 50s linear infinite;
  filter: blur(.7px);
}
html[data-theme="midnight"] .workspace::before,
html[data-theme="observatory"] .workspace::before,
html[data-theme="royal"] .workspace::before {
  background-image: radial-gradient(circle at 14% 20%, var(--accent) 0 1px, transparent 4px), radial-gradient(circle at 70% 28%, var(--accent) 0 1px, transparent 4px), radial-gradient(circle at 42% 76%, var(--accent) 0 1px, transparent 4px), radial-gradient(circle at 88% 64%, var(--accent) 0 1px, transparent 4px);
  animation: phx-neon-stars 9s ease-in-out infinite;
}
html[data-theme="teal"] .workspace::before,
html[data-theme="ocean"] .workspace::before,
html[data-theme="coral"] .workspace::before {
  background: repeating-linear-gradient(168deg, transparent 0 26px, color-mix(in srgb, var(--accent) 24%, transparent) 27px 29px, transparent 30px 80px);
  background-size: 260px 180px;
  animation: phx-tide 16s linear infinite;
}

/* Personal preference: turn off decorative and interface motion without
   changing status colors, click behavior, or other dashboard functionality. */
html[data-animations="off"] *,
html[data-animations="off"] *::before,
html[data-animations="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Today quick logs: a compact, accent-led entry card that keeps the form
   readable on a phone instead of squeezing four controls into one row. */
.quick-panel-heading { display: grid; gap: 3px; min-width: 0; }
.quick-panel-heading h3 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0; }
.quick-panel-kicker {
  color: var(--accent);
  font: 700 10px/1.2 var(--mono, ui-monospace, monospace);
  letter-spacing: .13em;
}
.today-quick-form,
.lost-found-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 12px 14px 14px; }
.quick-add-input-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; min-width: 0; }
.quick-add-action-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; min-width: 0; }
.quick-add-input-row select,
.quick-add-input-row input { width: 100%; min-width: 0; box-sizing: border-box; }
.quick-add-action-row .button { min-height: 38px; }
.quick-add-action-row .primary { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 5px 16px color-mix(in srgb, var(--accent) 17%, transparent); }
.maintenance-photo-label,
.lost-found-form .lf-photo-label { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-ink); }
.maintenance-photo-label.photo-ready,
.lost-found-form .lf-photo-label:has(+ .lf-photo-preview:not([hidden])) { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); border-color: var(--accent); }
.maintenance-photo-input,
.lost-found-form .lf-photo-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
.maintenance-quick-panel .panel-body { padding-top: 4px; }
.maintenance-quick-panel .maintenance-list { margin-top: 0; }
.maintenance-quick-panel .maintenance-item { padding: 10px 0; }
.lost-found-quick-panel .lost-found-form { padding-top: 12px; }
.lost-found-quick-panel .lost-found-form select,
.lost-found-quick-panel .lost-found-form input { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); color: var(--text); }
.lost-found-quick-panel .lost-found-form select:focus,
.lost-found-quick-panel .lost-found-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.lost-found-quick-panel .today-lost-found-list { border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-soft)); padding: 10px 14px 14px; }
.lost-found-quick-panel .lost-found-row { border-color: color-mix(in srgb, var(--accent) 20%, var(--border-soft)); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.lost-found-quick-panel .lost-found-room { color: var(--accent); }
.lost-found-quick-panel .lf-photo-preview { max-width: 64px; object-fit: cover; }

@media (max-width: 700px) {
  .quick-action-panel .panel-head { padding: 13px 14px 11px; }
  .today-quick-form,
  .lost-found-form { padding: 11px 12px 12px; gap: 8px; }
  .quick-add-input-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .quick-add-action-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .quick-add-action-row .button { width: 100%; min-height: 44px; justify-content: center; box-sizing: border-box; }
  .quick-add-action-row .lf-photo-preview { grid-column: 1 / -1; justify-self: start; max-height: 44px; }
  .quick-add-action-row .lf-photo-cancel { grid-column: 1 / -1; }
  .maintenance-quick-panel .maintenance-item { grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 7px; }
  .maintenance-quick-panel .maintenance-item > .button,
  .maintenance-quick-panel .maintenance-item > select { grid-column: 2; justify-self: start; }
  .maintenance-quick-panel .maintenance-item .maintenance-photo-thumb { grid-row: 1 / span 2; }
  .lost-found-quick-panel .lost-found-row { padding: 9px 10px; }
}

/* Manager approval actions use the same contained, readable button treatment
   as the other Today cards; long labels may wrap instead of widening the card. */
.approval-box .approval-actions { align-items: stretch; }
.approval-box .approval-button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  padding-inline: 10px;
}

/* Theme-specific panel surfaces now flow through unchanged; the rules below
   only normalize controls inside the quick-log cards. */
.quick-panel-heading .room-list-count {
  color: var(--muted);
  margin-left: 6px;
  font: inherit;
  font-size: .85em;
  font-weight: 600;
  letter-spacing: normal;
}
.quick-action-panel .quick-add-input-row select,
.quick-action-panel .quick-add-input-row input {
  padding: 8px 10px;
  border: 1px solid var(--well-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 55%),
    rgba(255, 255, 255, .024);
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .32), inset 0 -1px 0 rgba(255, 255, 255, .03);
}
.quick-action-panel .quick-add-input-row select:focus,
.quick-action-panel .quick-add-input-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring), inset 0 1px 2px rgba(0, 0, 0, .3);
}
.quick-add-action-row .primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 0 -1px rgba(0, 0, 0, .5);
}
.lost-found-quick-panel .lost-found-form select,
.lost-found-quick-panel .lost-found-form input {
  border-color: var(--well-border);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 55%),
    rgba(255, 255, 255, .024);
  color: var(--text);
}
.lost-found-quick-panel .lost-found-row {
  border-color: var(--border-soft);
  background: transparent;
}
.lost-found-quick-panel .lost-found-room { color: var(--text); }