/* =========================================================================
   "Line & Station" - THE staff design (Mohammed chose it on 2026-09-27; the
   guest app uses the same one). style.css holds the layout and components;
   this file sets the look. Every page renders <html data-theme="line">, so
   these rules always apply. Values: hotel-design-tokens.md "OPTION B".
   ========================================================================= */
html[data-theme="line"] {
  --ink: #15181C;
  --ink-soft: #4A5259;
  --bg: #F2F3F0;              /* tile */
  --surface: #FFFFFF;
  --surface-sunken: #E4E7E9;
  --border: #D3D7DA;          /* rule */
  --enamel: #1A1E23;
  --enamel-raised: #252A30;
  --enamel-ink: #F2F3F0;
  --enamel-soft: #B8BFC6;
  --signal: #F5B301;
  --signal-deep: #D99A00;
  --danger: #B42318;
  --link: #0062AD;

  /* A's names mapped onto B, so every A component follows */
  --brass: var(--signal);             /* decorative accent: focus on enamel, selection */
  --brass-dark: var(--ink);           /* main button in the work area */
  --brass-deep: #2C3238;              /* its hover */
  --rust: var(--danger);

  --font-display: 'Readex Pro', system-ui, sans-serif;
  --font-body: 'Readex Pro', system-ui, sans-serif;
  --font-mono: 'Readex Pro', system-ui, sans-serif;

  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 10px;
  --shadow-card: 0 1px 2px rgba(21, 24, 28, 0.08), 0 8px 20px rgba(21, 24, 28, 0.06);

  /* shared component names, B's values */
  --text-button: 16px;
  --input-height: 48px;
  --control-min: 44px;
  --title-page: clamp(2rem, 4.2vw, 3.25rem);
  --radius-card: 10px;
  --radius-panel: 10px;
}
html[data-theme="line"][lang="ar"] {   /* one family for both languages */
  --font-display: 'Readex Pro', system-ui, sans-serif;
  --font-body: 'Readex Pro', system-ui, sans-serif;
}
html[data-theme="line"] body { font-variation-settings: "HEXP" 0; }
html[data-theme="line"] ::selection { background: var(--signal); color: var(--ink); }
html[data-theme="line"] :focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
html[data-theme="line"] td,
html[data-theme="line"] .stat-value,
html[data-theme="line"] .hotel-tile .big { font-variant-numeric: tabular-nums; }

/* ---- headings: no eyebrow style in B; the small line above a title is plain meta text */
html[data-theme="line"] h1 { font-weight: 600; letter-spacing: -0.02em; font-variation-settings: "HEXP" 30; }
html[data-theme="line"] h2 { font-size: 1.375rem; }
html[data-theme="line"] h3, html[data-theme="line"] .section-heading { font-size: 1.125rem; }
html[data-theme="line"] .eyebrow,
html[data-theme="line"] .eyebrow.eyebrow-name { font-size: 0.92rem; font-weight: 400; color: var(--ink-soft); }
html[data-theme="line"] .hotel-tile-name,
html[data-theme="line"] .hotel-tile .big,
html[data-theme="line"] .stat-value { font-variation-settings: "HEXP" 20; }

/* ---- header: enamel band, wordmark with the ringed roundel, B language pill */
html[data-theme="line"] .topbar { background: var(--enamel); color: var(--enamel-ink); padding: 8px 20px; }
html[data-theme="line"] .primary-nav > a,
html[data-theme="line"] .nav-dropdown-toggle {
  color: var(--enamel-ink); font-size: 0.95rem; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center;
}
html[data-theme="line"] .primary-nav > a:hover { border-bottom-color: var(--signal); }
html[data-theme="line"] .topbar :focus-visible { outline: 3px solid var(--signal); }
html[data-theme="line"] .search input { background: var(--enamel-raised); border-color: rgba(242, 243, 240, 0.25); border-radius: var(--radius-s); }
html[data-theme="line"] .search button { background: var(--signal); border-color: var(--signal); color: var(--ink); font-weight: 600; border-radius: var(--radius-s); }
html[data-theme="line"] .search button:hover { background: var(--signal-deep); }

html[data-theme="line"] .brand {
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  font-variation-settings: "HEXP" 60;
  letter-spacing: -0.01em;
  color: var(--enamel-ink);
}
html[data-theme="line"] .brand > span { color: #B8863E; }   /* the original brass middle dot (Mohammed, 2026-09-27) */

html[data-theme="line"] .lang-switch { border-color: rgba(242, 243, 240, 0.45); font-family: 'Readex Pro', system-ui, sans-serif; }
html[data-theme="line"] .lang-option { padding: 0 12px; color: var(--enamel-ink); }
html[data-theme="line"] .lang-option.is-current { background: #F2F3F0; color: #15181C; }
html[data-theme="line"] button.lang-option:hover { background: transparent; text-decoration: underline; }
html[data-theme="line"] button.lang-option:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }

html[data-theme="line"] .nav-dropdown-menu { border-radius: var(--radius-l); }

/* ---- sign in / register */
html[data-theme="line"] .auth-shell { background: var(--bg); }
html[data-theme="line"] .auth-brand { background: var(--enamel); border-radius: var(--radius-l) var(--radius-l) 0 0; }

/* ---- buttons: 48px, ink by default; yellow only on dark panels */
html[data-theme="line"] .btn,
html[data-theme="line"] .btn-small,
html[data-theme="line"] .key-tag-actions button {
  min-height: 48px; padding: 0 20px; font-size: 1rem; border-radius: var(--radius-s);
}
html[data-theme="line"] .btn-small { padding: 0 14px; }
html[data-theme="line"] .btn-brass { background: var(--ink); color: #fff; }
html[data-theme="line"] .btn-brass:hover { background: #2C3238; }
html[data-theme="line"] .btn-ghost { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
html[data-theme="line"] .btn-ghost:hover { background: var(--surface-sunken); }
html[data-theme="line"] .btn-danger { color: var(--danger); border-color: var(--danger); }
html[data-theme="line"] .btn-danger:hover { background: var(--danger); color: #fff; }
html[data-theme="line"] .key-tag-actions a,
html[data-theme="line"] .key-tag-actions button { border-color: var(--ink); color: var(--ink); border-radius: var(--radius-s); }

/* ---- forms: 48px fields, radius 4, focus ring in link blue */
html[data-theme="line"] main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
html[data-theme="line"] main select:not([multiple]),
html[data-theme="line"] main textarea:not([hidden]),
html[data-theme="line"] .auth-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  border-radius: var(--radius-s); border-color: var(--border); padding-inline: 12px;
}
html[data-theme="line"] main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
html[data-theme="line"] main select:not([multiple]):focus,
html[data-theme="line"] main textarea:not([hidden]):focus,
html[data-theme="line"] .auth-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus {
  border-color: var(--link); box-shadow: none; outline: 3px solid var(--link); outline-offset: 2px;
}
html[data-theme="line"] .field input[type="checkbox"],
html[data-theme="line"] .field input[type="radio"],
html[data-theme="line"] .aTable input[type="checkbox"] { accent-color: var(--ink); }

/* ---- surfaces: white cards/tables, radius 10, no outlines */
html[data-theme="line"] .form-card,
html[data-theme="line"] .aTable,
html[data-theme="line"] .attention-panel,
html[data-theme="line"] .hotel-tile,
html[data-theme="line"] .stat-tile,
html[data-theme="line"] .stock-card,
html[data-theme="line"] .photo-item { border-radius: 10px; box-shadow: var(--shadow-card); border: 0; }
html[data-theme="line"] .key-tag { border-radius: 10px; }
html[data-theme="line"] .action-card { border-radius: var(--radius-l); border-style: solid; border-color: var(--border); background: var(--surface); }
html[data-theme="line"] .action-card:hover { border-color: var(--ink); background: var(--surface); }
html[data-theme="line"] .banner-warning { border-radius: var(--radius-m); }
html[data-theme="line"] .messages li { border-radius: var(--radius-m); }
html[data-theme="line"] .pill-neutral { background: #E4E7E9; color: #4A5259; }
html[data-theme="line"] .hotel-subnav a { border-radius: var(--radius-s); }
html[data-theme="line"] .hotel-subnav a[aria-current="page"] { background: var(--enamel); border-color: var(--enamel); color: var(--enamel-ink); }
html[data-theme="line"] .view-switch a[aria-current="page"] { background: var(--enamel); color: var(--enamel-ink); }
html[data-theme="line"] .occ-bar > span { background: var(--link); }
html[data-theme="line"] .spark polyline { stroke: var(--ink); }

/* ---- the hotel's line: one colour per city, as a ringed roundel by its name (identity, not status) */
html[data-theme="line"] .line-roundel {
  display: inline-block; width: 0.62em; height: 0.62em; margin-inline-end: 0.35em;
  border: 0.16em solid var(--line, #5A6268); border-radius: 50%; vertical-align: 0.04em;
}
html[data-theme="line"] .line-blue { --line: #0062AD; }
html[data-theme="line"] .line-red { --line: #C8262B; }
html[data-theme="line"] .line-green { --line: #0B7A3E; }
html[data-theme="line"] .line-orange { --line: #B45309; }
html[data-theme="line"] .line-purple { --line: #6E3A96; }
html[data-theme="line"] .line-yellow { --line: #F2B203; }
html[data-theme="line"] .line-none { --line: #5A6268; }

/* ---- footer on enamel, like the guest app */
html[data-theme="line"] .app-footer { max-width: none; margin-top: 1rem; padding: 1rem 20px; background: var(--enamel); color: var(--enamel-soft); }
html[data-theme="line"] .auth-shell h1 { font-size: 2rem; }   /* the page-title clamp is for the work area, not the sign-in card */

/* ---- Room cards: vacant = the 2 actions stacked full width; occupied = 4 actions in a
   2 x 2 grid (Mohammed, 2026-09-27: roomy buttons, and the same card height either way). */
html[data-theme="line"] .key-tag-actions {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem;
}
html[data-theme="line"] .key-tag-actions:has(> :nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-theme="line"] .key-tag-actions > a,
html[data-theme="line"] .key-tag-actions > button {
  min-width: 0; min-height: 48px; padding: 0.25rem 0.75rem; white-space: normal; text-align: center; line-height: 1.2;
}

/* ---- Room cards pulse by status: amber = needs cleaning, red = maintenance, blue = occupied.
   A slow ring (one cycle every 2 s, far under the 3-flashes-a-second limit); the status is
   also written on the card. With "reduce motion" turned on, the ring stays still. */
html[data-theme="line"] .key-tag.is-occupied,
html[data-theme="line"] .room-row.is-occupied { --pulse: #0062AD; }
html[data-theme="line"] .key-tag.status-need-cleaning,
html[data-theme="line"] .room-row.status-need-cleaning { --pulse: #D99A00; }
html[data-theme="line"] .key-tag.status-maintenance,
html[data-theme="line"] .room-row.status-maintenance { --pulse: #B42318; }
html[data-theme="line"] .key-tag.is-occupied::after,
html[data-theme="line"] .key-tag.status-need-cleaning::after,
html[data-theme="line"] .key-tag.status-maintenance::after {
  content: ""; position: absolute; inset: 0; border: 3px solid var(--pulse); border-radius: inherit;
  pointer-events: none; animation: room-pulse 2s ease-in-out infinite;
}
/* the ring above the room number blinks in the same colour, in step with the card */
html[data-theme="line"] .key-tag.is-occupied .key-tag-hole,
html[data-theme="line"] .key-tag.status-need-cleaning .key-tag-hole,
html[data-theme="line"] .key-tag.status-maintenance .key-tag-hole {
  border-color: var(--pulse); border-width: 3px; animation: hole-pulse 2s ease-in-out infinite;
}
/* Rooms LIST view (N7): the same pulse - a dot before the room number and a bar on the
   row's leading edge; the status pill still says it in words. */
html[data-theme="line"] .room-cell { position: relative; white-space: nowrap; }
html[data-theme="line"] .room-dot {
  display: inline-block; inline-size: 0.8rem; block-size: 0.8rem; margin-inline-end: 0.45rem;
  border: 2px solid var(--border); border-radius: 50%; vertical-align: -0.05em;
}
html[data-theme="line"] .room-row.is-occupied .room-dot,
html[data-theme="line"] .room-row.status-need-cleaning .room-dot,
html[data-theme="line"] .room-row.status-maintenance .room-dot {
  border: 3px solid var(--pulse); animation: hole-pulse 2s ease-in-out infinite;
}
html[data-theme="line"] .room-row.is-occupied .room-cell::before,
html[data-theme="line"] .room-row.status-need-cleaning .room-cell::before,
html[data-theme="line"] .room-row.status-maintenance .room-cell::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px;
  background: var(--pulse); pointer-events: none; animation: room-pulse 2s ease-in-out infinite;
}
@keyframes hole-pulse { 0%, 100% { background: var(--bg); } 50% { background: var(--pulse); } }
@keyframes room-pulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="line"] .key-tag::after { animation: none !important; opacity: 1; }
  html[data-theme="line"] .key-tag .key-tag-hole { animation: none !important; background: var(--pulse, var(--bg)); }
  html[data-theme="line"] .room-row .room-cell::before { animation: none !important; opacity: 1; }
  html[data-theme="line"] .room-row .room-dot { animation: none !important; background: var(--pulse, transparent); }
}

/* QA B9: one label style everywhere (spec 14px / 600); a label wrapped around its own checkbox keeps the sentence weight */
html[data-theme="line"] label:not(:has(> input, > select, > textarea)) { font-size: 14px; font-weight: 600; }