/* ─────────────────────────────────────────────────────────
   NTD International Piano Competition — Management System
   Theme: Dark sidebar + cream content + gold accent
   ───────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* Bundled Georgia so all pages (projection, print, etc.) have a stable copy */
@font-face {
  font-family: 'Georgia';
  src: url('/assets/fonts/Georgia-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Georgia';
  src: url('/assets/fonts/Georgia-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Georgia';
  src: url('/assets/fonts/Georgia-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Georgia';
  src: url('/assets/fonts/Georgia-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Miller Display';
  src: url('/assets/fonts/MillerDisplay-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Hide raw page content until Layout.render wraps it in sidebar+topbar chrome.
   Prevents the "un-chromed content flash" on every page navigation. Layout
   replaces #app-root with a wrapped .app structure, so the rule no longer
   matches after render and the content becomes visible. */
#app-root { visibility: hidden; }

:root {
  --sidebar-bg:      #0e0a05;
  --sidebar-bg-2:    #15100a;
  --sidebar-text:    #d8cdb4;
  --sidebar-muted:   #6b614e;
  --gold:            #c9a961;
  --gold-light:      #e6d4a4;
  --gold-dark:       #8a7438;
  --gold-bg:         rgba(201,169,97,.10);
  --cream:           #f5f3ee;
  --cream-2:         #ece8de;
  --paper:           #ffffff;
  --ink:             #1f1a12;
  --ink-soft:        #3d342a;
  --muted:           #7a7163;
  --line:            #e2dccd;
  --line-soft:       #efebdf;
  --shadow-sm:       0 1px 2px rgba(31,26,18,.06);
  --shadow:          0 2px 8px rgba(31,26,18,.08);
  --shadow-lg:       0 8px 24px rgba(31,26,18,.10);
  --serif:           'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
  --sans:            'Inter', -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --display:         'Playfair Display', 'Miller Banner Light', 'Miller Banner', 'Cormorant Garamond', Georgia, serif;
}
/* Typography rules:
   - Only .page-title (topbar main heading) uses Miller Display serif.
   - Every other UI heading uses Inter sans-serif. Hierarchy comes from
     weight, size, letter-spacing, and small-caps — not from switching
     to a serif family. */
.display-title,
.wizard-title,
.card-title,
.done-title {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--ink);
}
/* Small-caps eyebrow — use above a section for a subtle label. */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--sans); color: var(--ink); background: var(--cream); font-size: 14px; }
a { color: var(--gold-dark); text-decoration: none; }
a:hover { color: var(--gold); }

/* ─── Layout ─────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }

/* ─── Sidebar ────────────────────────────────────── */
.sidebar {
  width: 260px; min-width: 260px;
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  color: var(--sidebar-text);
  display: flex; flex-direction: column;
  padding: 24px 0;
  border-right: 1px solid #2a1f10;
  transition: width .25s, min-width .25s;
  position: relative;
}
.sidebar.collapsed { width: 68px; min-width: 68px; padding: 24px 0; }

.sidebar-collapse-btn {
  position: absolute;
  top: 18px; right: -12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sidebar-bg-2);
  border: 1px solid rgba(201,169,97,.35);
  color: var(--gold-light);
  cursor: pointer;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  padding: 0;
  transition: transform .25s, background .15s;
}
.sidebar-collapse-btn:hover { background: var(--gold-dark); color: white; }
.sidebar.collapsed .sidebar-collapse-btn { transform: rotate(180deg); }

.sidebar-brand {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 24px 24px;
  border-bottom: 1px solid rgba(201,169,97,.18);
  margin-bottom: 16px;
  overflow: hidden;
}
.sidebar-brand img { width: 88px; height: 88px; object-fit: contain; margin-bottom: 12px; transition: width .25s, height .25s, margin-bottom .25s; }
.sidebar.collapsed .sidebar-brand img { width: 40px; height: 40px; margin-bottom: 0; }
.sidebar.collapsed .sidebar-brand { padding: 0 12px 18px; }
.sidebar-brand .title-en, .sidebar-brand .title-zh, .sidebar-brand .system-label {
  transition: opacity .15s, max-height .25s;
  overflow: hidden;
}
.sidebar.collapsed .sidebar-brand .title-en,
.sidebar.collapsed .sidebar-brand .title-zh,
.sidebar.collapsed .sidebar-brand .system-label {
  opacity: 0; max-height: 0;
}
.sidebar-brand .title-en {
  font-family: var(--sans);
  font-size: 13px; line-height: 1.2;
  color: var(--gold-light);
  text-align: center;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
}
.sidebar-brand .title-zh {
  font-size: 11px;
  color: var(--sidebar-muted);
  margin-top: 6px;
  letter-spacing: 2px;
  text-align: center;
}
.sidebar-brand .system-label {
  font-size: 10px;
  color: var(--sidebar-muted);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ─── Page-level tab bar (used e.g. in Adjudication) ─── */
.page-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-soft); }
.page-tab {
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s, background .15s;
}
.page-tab:hover { color: var(--gold-dark); background: var(--cream); }
.page-tab.active {
  color: var(--gold-dark);
  border-bottom-color: var(--gold);
  font-weight: 500;
}

/* ─── On-site Workflow — daily rundown timeline ─── */
.sidebar-flow {
  padding: 4px 14px 14px 14px;
  border-bottom: 1px solid rgba(201, 169, 97, .08);
  margin-bottom: 10px;
  position: relative;
}
.sidebar.collapsed .sidebar-flow { padding: 4px 8px 10px; }
.sidebar-flow .flow-header {
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--sidebar-muted, #8a7d64);
  padding: 6px 8px 4px;
  transition: opacity .15s;
}
.sidebar-flow .flow-subheader {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--gold-light);
  padding: 0 8px 12px;
  letter-spacing: 1.5px;
  font-weight: 500;
  text-transform: uppercase;
  transition: opacity .15s;
}
.sidebar.collapsed .flow-header,
.sidebar.collapsed .flow-subheader { opacity: 0; height: 0; padding: 0; overflow: hidden; }

/* Timeline rail (single line running through all step markers) */
.sidebar-flow .flow-timeline {
  position: relative;
  padding-left: 22px;   /* room for markers + rail */
}
.sidebar-flow .flow-timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201, 169, 97, .18) 8%,
    rgba(201, 169, 97, .18) 92%,
    transparent 100%);
}
.sidebar.collapsed .flow-timeline { padding-left: 0; }
.sidebar.collapsed .flow-timeline::before { display: none; }

/* Base step (top-level or child) */
.flow-step {
  display: flex; align-items: center;
  padding: 8px 10px;
  color: var(--sidebar-text, #a89b82);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .3px;
  position: relative;
  border-radius: 4px;
  transition: color .15s, background .15s;
  cursor: pointer;
}
/* Circular dot marker on the rail for top-level (non-child) steps */
.flow-timeline > .flow-step::before,
.flow-timeline > .flow-group > .flow-step::before {
  content: '';
  position: absolute;
  left: -18px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sidebar-bg, #1a1308);
  border: 1.5px solid rgba(201, 169, 97, .3);
  z-index: 1;
  transition: all .18s;
}
.flow-timeline > .flow-step:hover::before,
.flow-timeline > .flow-group > .flow-step:hover::before {
  border-color: rgba(201, 169, 97, .55);
}
.flow-timeline > .flow-step.active::before,
.flow-timeline > .flow-group > .flow-step.flow-parent.active::before {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .15);
}
/* Step index number faded in front of label (rundown feel) */
.flow-step > .flow-label::before,
.flow-parent > .flow-parent-link > .flow-label::before {
  content: attr(data-step);
  display: inline-block;
  width: 22px;
  margin-right: 4px;
  color: rgba(201, 169, 97, .35);
  font-size: 11px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 1px;
  vertical-align: 2px;
}
.flow-step.active > .flow-label::before,
.flow-parent.active > .flow-parent-link > .flow-label::before {
  color: var(--gold);
}
/* Children don't get a step number */
.flow-child > .flow-label::before { display: none; }
.flow-step .flow-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s; }
.flow-step:hover { color: var(--gold-light); background: rgba(201, 169, 97, .05); }
.flow-step.active {
  color: var(--gold-light);
  font-weight: 500;
}
/* Thin golden accent bar on the right for the currently-active step */
.flow-step.active::after {
  content: '';
  position: absolute;
  right: -14px;
  top: 20%; bottom: 20%;
  width: 2px;
  background: var(--gold);
  border-radius: 2px;
}

/* Parent (group) row: contains the label link + a chevron toggle */
.flow-parent { padding-right: 4px; }
.flow-parent .flow-parent-link {
  flex: 1; min-width: 0;
  color: inherit; text-decoration: none;
  display: block; padding: 0;
}
.flow-parent .flow-toggle {
  background: none; border: 0; padding: 4px; margin-left: 4px;
  color: var(--sidebar-muted, #8a7d64);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  transition: color .15s, transform .18s;
}
.flow-parent .flow-toggle svg { width: 10px; height: 10px; display: block; }
.flow-parent .flow-toggle:hover { color: var(--gold-light); }
.flow-group.expanded .flow-toggle { transform: rotate(90deg); }
/* Parent active state uses the ::after golden bar too — no background */

/* Children container: hidden by default, revealed when parent .expanded */
.flow-children {
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease;
  padding-left: 14px;
  border-left: 1px solid rgba(201, 169, 97, .1);
  margin: 2px 0 4px 12px;
}
.flow-group.expanded .flow-children { max-height: 320px; }
.flow-child {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  padding: 5px 10px;
  color: var(--sidebar-muted, #8a7d64);
  opacity: .82;
}
.flow-child:hover { opacity: 1; }
.flow-child.active { opacity: 1; color: var(--gold-light); font-weight: 500; }

/* Collapsed-sidebar behavior: only show top-level items as tooltip-only hover */
.sidebar.collapsed .flow-step { padding: 6px 4px; justify-content: center; }
.sidebar.collapsed .flow-parent { padding-right: 0; }
.sidebar.collapsed .flow-parent .flow-parent-link { flex: 0 0 auto; text-align: center; }
/* Hide the full text label; keep the ::before step number visible */
.sidebar.collapsed .flow-step .flow-label {
  font-size: 0;                 /* hide text but keep ::before pseudo */
  overflow: visible;
  text-align: center;
  flex: 0 0 auto;
}
.sidebar.collapsed .flow-step > .flow-label::before,
.sidebar.collapsed .flow-parent > .flow-parent-link > .flow-label::before {
  font-size: 12px;
  font-weight: 600;
  color: rgba(201,169,97,.7);
  width: auto;
  margin: 0;
  letter-spacing: 0.5px;
}
.sidebar.collapsed .flow-step.active > .flow-label::before,
.sidebar.collapsed .flow-parent.active > .flow-parent-link > .flow-label::before {
  color: var(--gold);
}
/* Native title="…" attribute on .flow-step provides the hover tooltip */
.sidebar.collapsed .flow-toggle,
.sidebar.collapsed .flow-children { display: none; }
.sidebar.collapsed .flow-step.active::after { right: 4px; }
/* Dots stay visible in collapsed mode too */
.sidebar.collapsed .flow-timeline > .flow-step::before,
.sidebar.collapsed .flow-timeline > .flow-group > .flow-step::before {
  left: -2px;
}

.sidebar-tools {
  padding: 0 14px 12px;
  margin: 4px 0 8px;
}
.sidebar.collapsed .sidebar-tools { padding: 0 8px 8px; }
.sidebar-tools .tools-header {
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.42); font-weight: 600;
  padding: 8px 4px 6px; margin-bottom: 4px;
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px;
}
.sidebar.collapsed .sidebar-tools .tools-header { display: none; }
.sidebar-tools .tool-item {
  display: block; padding: 8px 10px; margin-bottom: 3px;
  color: var(--sidebar-text); text-decoration: none;
  border-radius: 5px; font-size: 12px;
  transition: background 0.15s, color 0.15s;
  border-left: 2px solid transparent;
}
.sidebar-tools .tool-item:hover {
  background: rgba(255,255,255,0.05); color: white;
  border-left-color: rgba(201,169,97,0.5);
}
.sidebar-tools .tool-item.active {
  background: rgba(201,169,97,0.12); color: white;
  border-left-color: #c9a961;
}
.sidebar-tools .tool-label { display: block; font-weight: 500; letter-spacing: 0.3px; }
.sidebar-tools .tool-hint {
  display: block; font-size: 10px;
  color: rgba(255,255,255,0.4); margin-top: 2px; letter-spacing: 0.3px;
}
.sidebar.collapsed .sidebar-tools .tool-hint { display: none; }
.sidebar.collapsed .sidebar-tools .tool-item { text-align: center; padding: 6px 4px; }
.sidebar.collapsed .sidebar-tools .tool-label { font-size: 10px; }

.sidebar-nav { flex: 1; padding: 0 12px; overflow-y: auto; overflow-x: hidden; }
.sidebar.collapsed .sidebar-nav { padding: 0 10px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 2px;
  color: var(--sidebar-text); text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  transition: background .15s, color .15s;
  white-space: nowrap;
  position: relative;
}
.nav-item:hover { background: rgba(201,169,97,.08); color: var(--gold-light); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(201,169,97,.18) 0%, rgba(201,169,97,.05) 100%);
  color: var(--gold-light);
  border-left: 3px solid var(--gold);
  padding-left: 11px;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.6; }
.nav-item .nav-label { transition: opacity .15s; }
.sidebar.collapsed .nav-item { padding: 11px 0; justify-content: center; }
.sidebar.collapsed .nav-item.active { border-left-width: 0; padding: 11px 0; }
.sidebar.collapsed .nav-item .nav-label { opacity: 0; position: absolute; left: 56px; top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--cream); padding: 4px 10px; border-radius: 4px; font-size: 12px; pointer-events: none; white-space: nowrap; z-index: 10; box-shadow: var(--shadow); }
.sidebar.collapsed .nav-item:hover .nav-label { opacity: 1; }

/* Nested nav children (e.g. Stage Manager sub-views) */
.nav-children {
  display: none;
  padding: 2px 0 6px 4px;
  margin-bottom: 2px;
  border-left: 1px solid rgba(201,169,97,.18);
  margin-left: 24px;
}
.nav-children.expanded { display: block; }
.nav-child {
  display: block;
  padding: 7px 10px 7px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--sidebar-muted, #8a7438);
  text-decoration: none;
  border-radius: 4px;
  letter-spacing: .3px;
  transition: background .12s, color .12s;
}
.nav-child:hover { background: rgba(201,169,97,.08); color: var(--gold-light, #e6d4a4); }
.nav-child.active {
  color: var(--cream);
  background: rgba(201,169,97,.14);
  font-weight: 500;
}
.sidebar.collapsed .nav-children { display: none !important; }

.sidebar-user {
  padding: 12px 18px;
  border-top: 1px solid rgba(201,169,97,.18);
  display: flex; align-items: center; gap: 10px;
  transition: opacity .15s, padding .25s;
}
.sidebar.collapsed .sidebar-user { padding: 10px 8px; justify-content: center; }
.sidebar.collapsed .sidebar-user .su-info { display: none; }
.sidebar-user .su-info { flex: 1; min-width: 0; }
.sidebar-user .su-name { font-size: 13px; color: var(--gold-light); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .su-role { font-size: 10px; color: var(--sidebar-muted); margin-top: 1px; letter-spacing: 1px; text-transform: uppercase; }
.sidebar-user .su-logout {
  background: transparent; color: var(--sidebar-muted);
  border: 1px solid rgba(201,169,97,.25);
  width: 30px; height: 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-user .su-logout:hover { color: white; border-color: #c0392b; background: #c0392b; }

.sidebar-footer {
  padding: 12px 24px 0;
  border-top: 1px solid rgba(201,169,97,.12);
  font-size: 11px;
  color: var(--sidebar-muted);
  letter-spacing: .5px;
  transition: opacity .15s;
}
.sidebar.collapsed .sidebar-footer { opacity: 0; pointer-events: none; }

/* ─── Main area ─────────────────────────────────── */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 16px 32px;
  display: flex; align-items: center; gap: 24px;
}
/* Account chip in the top-right — circular avatar + chevron, opens a dropdown menu */
.topbar-user { position: relative; margin-left: 6px; }
.topbar-user .tu-trigger {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer; padding: 4px 6px 4px 4px;
  border-radius: 24px;
  transition: background .12s;
}
.topbar-user .tu-trigger:hover { background: rgba(0,0,0,.05); }
.topbar-user .tu-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: white; font-weight: 600; font-size: 14px; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  user-select: none;
}
.topbar-user .tu-chevron { color: var(--muted); transition: transform .15s; }
.topbar-user .tu-trigger[aria-expanded="true"] .tu-chevron { transform: rotate(180deg); }

.topbar-user .tu-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: white;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  padding: 6px 0;
  z-index: 60;
}
.topbar-user .tu-menu-head { padding: 10px 16px 6px; }
.topbar-user .tu-menu-name { font-size: 13px; color: var(--ink); font-weight: 500; }
.topbar-user .tu-menu-role { font-size: 10px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }
.topbar-user .tu-menu-sep { height: 1px; background: var(--line-soft); margin: 6px 0; }
.topbar-user .tu-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  color: var(--ink);
  background: transparent; border: 0; width: 100%;
  font-size: 13px; text-align: left;
  cursor: pointer; text-decoration: none;
  font-family: inherit;
  transition: background .1s;
}
.topbar-user .tu-menu-item:hover { background: var(--cream); }
.topbar-user .tu-menu-item svg { color: var(--muted); flex-shrink: 0; }
.topbar-user .tu-menu-signout { color: #c0392b; }
.topbar-user .tu-menu-signout svg { color: #c0392b; }
.topbar-user .tu-menu-signout:hover { background: #fbe9e6; }
.page-title {
  /* The single page-level H1 that keeps the Miller Display serif. */
  font-family: var(--display);
  font-size: 26px; font-weight: 500;
  color: var(--ink);
  letter-spacing: .3px;
  margin: 0;
}
.topbar-divider { width: 1px; height: 24px; background: var(--line); }
.topbar-meta {
  font-size: 13px;
  color: var(--muted);
  display: flex; gap: 16px; align-items: center;
}
.topbar-meta strong { color: var(--ink-soft); font-weight: 500; }
.topbar-meta .round-badge {
  background: var(--gold-bg);
  color: var(--gold-dark);
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
}
.topbar .spacer { flex: 1; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }

.search-input {
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 8px 14px 8px 36px;
  width: 240px;
  font-size: 13px;
  font-family: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a7163' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
}

/* ─── Notification bell ─── */
.bell-btn {
  position: relative;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  width: 36px; height: 36px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.bell-btn svg { width: 18px; height: 18px; }
.bell-btn:hover { background: var(--cream-2); }
.bell-btn.has-pending { color: #a83232; border-color: #d18a86; background: #fbe9e7; }
.bell-btn.has-pending:hover { background: #f6d4d1; }
.bell-count {
  position: absolute;
  top: -4px; right: -4px;
  background: #c0392b;
  color: white;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--cream);
  font-family: var(--sans);
}

.bell-panel {
  position: absolute;
  top: 60px; right: 32px;
  width: 360px; max-width: 90vw;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  max-height: 70vh;
  display: flex; flex-direction: column;
}
.bell-panel-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--sans);
  font-size: 15px; color: var(--ink);
}
.bell-panel-list { flex: 1; overflow-y: auto; }
.bell-empty { padding: 30px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.bell-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.bell-row:last-child { border-bottom: none; }
.bell-row:hover { background: var(--cream); }
.bell-row-name { font-size: 13px; color: var(--ink); font-weight: 500; }
.bell-row-meta { font-size: 11px; color: var(--gold-dark); margin-top: 2px; line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
.bell-row-time { font-size: 10px; color: var(--muted); margin-top: 1px; }
.bell-review-btn {
  background: #e8f3e3; color: #3d6b27;
  border: 1px solid #b8d9a9;
  border-radius: 50%;
  width: 28px; height: 28px;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.bell-review-btn:hover { background: #3d6b27; color: white; }

/* ─── Layout Editor Toolbar (shared component) ─── */
.le-toolbar {
  position: fixed; top: 0; left: 0; right: 0;
  background: #1a1208; color: #e6d4a4;
  padding: 8px 14px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12px; z-index: 200;
  border-bottom: 1px solid #c9a961;
}
.le-toolbar label { font-size: 10px; letter-spacing: 1px; color: #8a7438; text-transform: uppercase; margin: 0; }
.le-toolbar input, .le-toolbar select {
  background: #0a0703; color: #e6d4a4;
  border: 1px solid #c9a961;
  padding: 3px 6px; font-size: 11px; border-radius: 3px;
  font-family: inherit; margin: 0;
}
.le-toolbar input.le-tiny { width: 60px; text-align: right; }
.le-toolbar .le-group { display: flex; align-items: center; gap: 4px; padding: 0 6px; border-right: 1px solid #3d342a; }
.le-toolbar .le-group:last-of-type { border-right: none; }
.le-toolbar .le-tab {
  background: transparent; color: #8a7438; border: 1px solid transparent;
  padding: 4px 10px; cursor: pointer; font-size: 11px; border-radius: 3px;
}
.le-toolbar .le-tab.active { background: #c9a961; color: #1a1208; }
.le-toolbar .le-save {
  background: #c9a961; color: #1a1208; border: none;
  padding: 6px 14px; border-radius: 3px; font-size: 12px; cursor: pointer; font-weight: 500;
}
.le-toolbar .le-save:hover { background: #e6d4a4; }

/* Editable overlay marker while editing */
.le-overlay {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%);
  font-size: var(--size, 24px);
  letter-spacing: var(--tracking, 0);
  line-height: var(--leading, 1.3);
  font-family: var(--ff);
  font-weight: var(--weight, 500);
  color: var(--color, #1a1208);
  text-align: var(--align, center);
  white-space: pre-wrap;
  max-width: 90%;
  pointer-events: none;
}
/* In edit mode, overlays must accept clicks so they can be dragged */
body.editing .le-overlay {
  pointer-events: auto;
  user-select: none;
}
/* Hover feedback so overlapping elements can be told apart before clicking */
body.editing .le-overlay:hover {
  outline: 1px dashed rgba(201, 169, 97, .6);
  outline-offset: 3px;
  background: rgba(201, 169, 97, .06);
}
body.editing .le-overlay:hover::after {
  content: attr(data-target);
  position: absolute;
  top: -22px; left: 0;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  background: rgba(192, 57, 43, .9);
  color: white;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}
.le-overlay.editing {
  outline: 2px dashed #c0392b;
  outline-offset: 4px;
  background: rgba(192, 57, 43, .08);
  /* NO padding here: outline lives outside the box so it won't shift the
     visual centering (elements use transform: translate(-50%,-50%)). */
}
@media print {
  .le-overlay.editing { outline: none; background: transparent; padding: 0; }
  .le-toolbar { display: none !important; }
}

/* ─── Row "needs review" indicator ─── */
/* Put the red bar as a left border on the row's FIRST td, so it never adds an
   extra layout box that pushes the row's content right (which pseudo-elements
   on <tr> do inconsistently across browsers). */
.needs-review-pulse > td:first-child {
  box-shadow: inset 4px 0 0 #c0392b;
}
.needs-review-badge {
  display: inline-block;
  background: #fbe9e7; color: #c0392b;
  padding: 2px 8px 2px 20px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}
.needs-review-badge::before {
  content: '';
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #c0392b;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}

.content { flex: 1; padding: 28px 32px; overflow-y: auto; }

/* ─── Cards ────────────────────────────────────── */
.card {
  background: var(--paper);
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  border: 1px solid var(--line-soft);
}
.card h2 {
  font-family: var(--sans);
  margin: 0 0 16px;
  font-size: 22px; font-weight: 500;
  color: var(--ink);
}
.card h2 .accent { color: var(--gold); }
.card .card-subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-top: -8px; margin-bottom: 16px;
}

/* ─── Buttons / Inputs ───────────────────────────── */
button, .btn {
  background: var(--ink);
  color: var(--cream);
  border: none;
  padding: 9px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: .3px;
  transition: background .15s, transform .05s;
}
button:hover, .btn:hover { background: #2a2117; }
button:active { transform: scale(.98); }
button.primary { background: var(--gold-dark); }
button.primary:hover { background: var(--gold); color: var(--ink); }
button.secondary { background: var(--cream-2); color: var(--ink-soft); }
button.secondary:hover { background: var(--line); }
button.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
button.ghost:hover { background: var(--cream); }
button.danger { background: #a83232; }
button.danger:hover { background: #8a2828; }
button:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }
button.icon-only { padding: 8px; line-height: 0; }

input[type=text], input[type=number], input[type=email], input[type=date], textarea, select {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  background: white;
  color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201,169,97,.20);
}
label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: uppercase;
}

input[type=checkbox] { width: auto; vertical-align: middle; margin-right: 6px; }

/* ─── Table ──────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  background: var(--cream-2);
  color: var(--ink-soft);
  padding: 12px 14px;
  text-align: left;
  border-bottom: 2px solid var(--gold);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:hover td { background: var(--cream); }

/* ─── Tags ───────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3px;
}
.tag.ok { background: #e8f3e3; color: #3d6b27; }
.tag.warn { background: #fbf0d4; color: #7a5814; }
.tag.err { background: #f7dcd9; color: #842424; }
.tag.gold { background: var(--gold-bg); color: var(--gold-dark); }

/* ─── Grid helpers ───────────────────────────────── */
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.col { flex: 1; min-width: 200px; }

/* ─── Photo — all photos display at 4:5 portrait to match the card ──── */
.photo-thumb { width: 40px; aspect-ratio: 4/5; height: auto; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: var(--cream-2); }
.photo-large { width: 160px; aspect-ratio: 4/5; height: auto; object-fit: cover; border-radius: 6px; border: 1px solid var(--gold); background: var(--cream-2); display: block; }

/* ─── Modal ──────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(15,10,5,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--paper);
  border-radius: 8px;
  padding: 28px;
  max-width: 900px;
  width: 90%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal h3 {
  font-family: var(--sans);
  margin: 0 0 16px;
  font-size: 20px; font-weight: 600;
  letter-spacing: .2px;
  color: var(--ink);
}

/* ─── Toolbar ────────────────────────────────────── */
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }

/* ─── Dashboard tiles ───────────────────────────── */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.tile {
  background: var(--paper);
  padding: 22px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gold); }
.tile .tile-icon {
  width: 44px; height: 44px;
  background: var(--gold-bg);
  color: var(--gold-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.tile .tile-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
.tile .tile-title { font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--ink); }
.tile .tile-desc { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.4; }
.tile .tile-arrow { position: absolute; bottom: 16px; right: 16px; color: var(--gold); opacity: .5; }

/* ─── Overview stat cards ───────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.stat-card { background: var(--paper); padding: 16px 18px; border-radius: 6px; border: 1px solid var(--line-soft); display: flex; align-items: center; gap: 14px; }
.stat-card .stat-icon { width: 36px; height: 36px; background: var(--gold-bg); color: var(--gold-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.stat-card .stat-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.stat-card .stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.stat-card .stat-value { font-family: var(--sans); font-size: 20px; font-weight: 500; color: var(--ink); line-height: 1.1; margin-top: 2px; }

/* ─── Day Tabs (Dashboard) ──────────────────────── */
.day-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; }
.day-tab {
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.day-tab:hover { color: var(--ink); }
.day-tab.active {
  color: var(--gold-dark);
  border-bottom-color: var(--gold);
}
.day-tab .day-num { font-weight: 600; }
.day-tab .day-date { font-size: 11px; color: var(--muted); font-family: var(--sans); display: block; letter-spacing: .5px; text-transform: uppercase; }
.day-tab.active .day-date { color: var(--gold-dark); }

/* ─── Schedule timeline ─────────────────────────── */
.schedule {
  background: var(--paper);
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.schedule-header {
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #fcfaf3 0%, var(--paper) 100%);
}
.schedule-header .day-title {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--ink);
}
.schedule-header .day-subtitle { color: var(--muted); font-size: 13px; margin-top: 4px; }
.schedule-row {
  display: grid;
  grid-template-columns: 200px 1fr 180px;
  gap: 24px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
  transition: background .12s;
}
.schedule-row:last-child { border-bottom: none; }
.schedule-row.clickable { cursor: pointer; }
.schedule-row.clickable:hover { background: var(--cream); }
.schedule-time { font-family: var(--sans); font-size: 13px; color: var(--muted); letter-spacing: 1px; }
.schedule-activity .activity-en { font-size: 15px; font-weight: 500; color: var(--ink); }
.schedule-activity .activity-zh { font-size: 12px; color: var(--muted); margin-top: 2px; }
.schedule-activity .activity-notes { font-size: 12px; color: var(--muted); margin-top: 6px; font-style: italic; }
.schedule-location { font-size: 12px; color: var(--muted); text-align: right; }
.schedule-row.clickable .schedule-activity .activity-en::after {
  content: ' →';
  color: var(--gold);
  opacity: 0;
  transition: opacity .15s;
}
.schedule-row.clickable:hover .schedule-activity .activity-en::after { opacity: 1; }

/* ─── Edit-schedule editor ──────────────────────── */
.sched-edit-row {
  display: grid;
  grid-template-columns: 150px 1fr 1fr 130px 140px 36px;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
}

/* ─── Print results helpers ─────────────────────── */
.batch-results { max-height: 200px; overflow-y: auto; font-size: 13px; margin-top: 10px; }
.batch-results .ok { color: #3d6b27; }
.batch-results .skip { color: #7a5814; }
.batch-results .error { color: #842424; }

/* ─── Empty state ───────────────────────────────── */
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty-title { font-family: var(--sans); font-size: 18px; color: var(--ink-soft); margin-bottom: 8px; }

/* ─── Sub-section heading ───────────────────────── */
.section-heading {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 24px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
}

/* ──────────────────────────────────────────────
   RESPONSIVE — mobile & tablet
   Breakpoints:
     mobile:  ≤ 640px
     tablet:  641 – 1023px
     desktop: 1024px +
   ────────────────────────────────────────────── */

.hamburger {
  display: none;
  align-items: center; justify-content: center;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.hamburger svg { width: 22px; height: 22px; }
.hamburger .ham-close { display: none; }
.hamburger:hover { background: var(--cream); color: var(--gold-dark); border-color: var(--gold); }
/* When the drawer is open the hamburger visually sits on top of the dark
   sidebar overlay — switch to a light stroke + no border so it reads against
   that background, and flip to the close (✕) glyph. */
body:has(.sidebar.mobile-open) .hamburger {
  color: #e6d4a4; border-color: rgba(201,169,97,.35); background: transparent;
}
body:has(.sidebar.mobile-open) .hamburger:hover { background: rgba(201,169,97,.14); color: white; }
body:has(.sidebar.mobile-open) .hamburger .ham-open  { display: none; }
body:has(.sidebar.mobile-open) .hamburger .ham-close { display: block; }

.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 10, 5, 0.55);
  backdrop-filter: blur(2px);
  z-index: 90;
  display: none;
  animation: fadeIn .2s;
}
.sidebar-backdrop.show { display: block; }

/* Tablet — when the sidebar is a 68px rail, hide flow labels (only the step
   number stays via the ::before pseudo). When the operator expands the rail
   via the collapse chevron (.mobile-open state), labels come back. */
@media (max-width: 1279px) {
  .sidebar:not(.mobile-open) .flow-step .flow-label {
    font-size: 0;
    text-align: center;
  }
  .sidebar:not(.mobile-open) .flow-step > .flow-label::before,
  .sidebar:not(.mobile-open) .flow-parent > .flow-parent-link > .flow-label::before {
    font-size: 12px;
    color: rgba(201,169,97,.75);
    letter-spacing: .5px;
  }
  .sidebar:not(.mobile-open) .flow-toggle,
  .sidebar:not(.mobile-open) .flow-children { display: none; }
  .sidebar:not(.mobile-open) .flow-timeline::before { display: none; }
  .sidebar:not(.mobile-open) .flow-timeline > .flow-step::before,
  .sidebar:not(.mobile-open) .flow-timeline > .flow-group > .flow-step::before { display: none; }
  .sidebar:not(.mobile-open) .flow-step { padding: 8px 2px; justify-content: center; }
  .sidebar:not(.mobile-open) .flow-header,
  .sidebar:not(.mobile-open) .flow-subheader { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
}

/* Tablet — auto-collapse sidebar to icon strip.
   Raised from 1023 → 1279 so iPad Pro portrait (1024px wide) and iPad Pro 11"
   landscape (1194px) both fall into the tablet layout — otherwise the sidebar
   sits at full desktop width and squeezes the main content. The collapse
   button is kept visible so the operator can manually expand the rail. */
@media (max-width: 1279px) {
  .sidebar:not(.mobile-open) {
    width: 68px; min-width: 68px;
  }
  .sidebar:not(.mobile-open) .sidebar-brand img { width: 40px; height: 40px; margin-bottom: 0; }
  .sidebar:not(.mobile-open) .sidebar-brand { padding: 0 12px 18px; }
  .sidebar:not(.mobile-open) .sidebar-brand .title-en,
  .sidebar:not(.mobile-open) .sidebar-brand .title-zh,
  .sidebar:not(.mobile-open) .sidebar-brand .system-label,
  .sidebar:not(.mobile-open) .sidebar-footer { opacity: 0; max-height: 0; pointer-events: none; }
  .sidebar:not(.mobile-open) .sidebar-nav { padding: 0 10px; }
  .sidebar:not(.mobile-open) .nav-item { padding: 11px 0; justify-content: center; }
  .sidebar:not(.mobile-open) .nav-item.active { border-left-width: 0; padding: 11px 0; }
  .sidebar:not(.mobile-open) .nav-item .nav-label {
    opacity: 0; position: absolute; left: 56px; top: 50%; transform: translateY(-50%);
    background: var(--ink); color: var(--cream); padding: 4px 10px; border-radius: 4px;
    font-size: 12px; pointer-events: none; white-space: nowrap; z-index: 10; box-shadow: var(--shadow);
  }
  .sidebar:not(.mobile-open) .nav-item:hover .nav-label { opacity: 1; }
  /* On touch devices the tiny circular chevron is easy to miss — hide it and
     use the topbar hamburger instead as the primary expand/collapse control. */
  .sidebar-collapse-btn { display: none; }
  .hamburger {
    display: inline-flex !important; align-items: center; justify-content: center;
    /* Sit above the drawer overlay so tapping again closes it. */
    position: relative; z-index: 110;
  }
  /* Tablet expanded state: overlay the content instead of squeezing it, so
     the operator's page keeps its layout while the drawer is open. Also
     override the desktop .collapsed rules that would otherwise still keep
     labels hidden if the sidebar's collapsed state was cached in localStorage. */
  .sidebar.mobile-open {
    position: fixed; inset: 0 auto 0 0; width: 260px; min-width: 260px;
    z-index: 100; box-shadow: 8px 0 32px rgba(0,0,0,.35);
    padding: 24px 0;
  }
  /* Restore the desktop rundown layout (padding for rail, dot markers, step
     numbers with fixed-width column, all in place) — necessary because the
     sidebar may still carry the `.collapsed` class from localStorage even
     when the operator has expanded it as a drawer. */
  .sidebar.mobile-open .flow-timeline { padding-left: 22px; }
  .sidebar.mobile-open .flow-timeline::before { display: block; }
  .sidebar.mobile-open .flow-timeline > .flow-step::before,
  .sidebar.mobile-open .flow-timeline > .flow-group > .flow-step::before {
    display: block; left: -18px; top: 50%; transform: translateY(-50%);
  }
  .sidebar.mobile-open .flow-step {
    padding: 8px 10px; justify-content: flex-start;
    flex-direction: row; align-items: center;
  }
  .sidebar.mobile-open .flow-parent .flow-parent-link {
    flex: 1; flex-direction: row; text-align: left; align-items: center;
  }
  .sidebar.mobile-open .flow-step .flow-label {
    font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center;
  }
  .sidebar.mobile-open .flow-step > .flow-label::before,
  .sidebar.mobile-open .flow-parent > .flow-parent-link > .flow-label::before {
    content: attr(data-step);
    display: inline-block;
    width: 22px;
    margin: 0 6px 0 0 !important;
    text-align: left;
    font-size: 13px;
    color: rgba(201,169,97,.55);
    font-weight: 500;
    letter-spacing: .3px;
  }
  .sidebar.mobile-open .flow-header,
  .sidebar.mobile-open .flow-subheader { opacity: 1; height: auto; padding: revert; margin: revert; overflow: visible; }
  .sidebar.mobile-open .flow-toggle { display: flex; }
  .sidebar.mobile-open .sidebar-brand img { width: 88px; height: 88px; margin-bottom: 12px; }
  .sidebar.mobile-open .sidebar-brand { padding: 0 24px 24px; }
  .sidebar.mobile-open .sidebar-brand .title-en,
  .sidebar.mobile-open .sidebar-brand .title-zh,
  .sidebar.mobile-open .sidebar-brand .system-label,
  .sidebar.mobile-open .sidebar-footer { opacity: 1; max-height: none; pointer-events: auto; }
  .sidebar.mobile-open .sidebar-nav { padding: 0 12px; }
  .sidebar.mobile-open .nav-item { padding: 11px 14px; justify-content: flex-start; }
  .sidebar.mobile-open .nav-item .nav-label {
    opacity: 1; position: static; transform: none;
    background: none; box-shadow: none; padding: 0; color: inherit;
  }
  /* Tablet topbar: keep one row on iPad portrait (~1024px) — the culprits
     are the long event name + divider, which push the meta row into a second
     line. Hide those on tablet, keep only the round badge as compact context;
     shrink title + search so bell + user chip stay on the right. */
  .topbar { padding: 14px 22px; flex-wrap: nowrap; gap: 12px; }
  .page-title { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .topbar-divider { display: none; }
  .topbar-meta { font-size: 12px; gap: 10px; flex-shrink: 0; }
  .topbar-meta > span:not(.round-badge) { display: none; }
  .topbar-actions { flex-shrink: 0; }
  .search-input { width: 140px; }
}
/* Just under iPad portrait — drop the search field so bell + user chip stay
   visible without wrapping. Round badge still visible as context. */
@media (max-width: 900px) {
  .search-input { display: none; }
}

/* Mobile — sidebar becomes drawer overlay */
@media (max-width: 640px) {
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 240px; min-width: 240px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 100;
    box-shadow: 6px 0 24px rgba(0,0,0,.3);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  /* On mobile open: full sidebar (don't collapse) */
  .sidebar.mobile-open { width: 240px; min-width: 240px; }
  .sidebar.mobile-open .sidebar-brand img { width: 70px; height: 70px; margin-bottom: 10px; }
  .sidebar.mobile-open .sidebar-brand .title-en,
  .sidebar.mobile-open .sidebar-brand .title-zh,
  .sidebar.mobile-open .sidebar-brand .system-label,
  .sidebar.mobile-open .sidebar-footer { opacity: 1; max-height: none; pointer-events: auto; }
  .sidebar.mobile-open .nav-item { justify-content: flex-start; padding: 11px 14px; }
  .sidebar.mobile-open .nav-item .nav-label { opacity: 1; position: static; transform: none; background: none; box-shadow: none; padding: 0; color: inherit; }

  .topbar {
    padding: 12px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .page-title { font-size: 19px; flex: 1; min-width: 0; }
  .topbar-divider, .topbar-meta { display: none; }
  .topbar-actions { width: 100%; order: 99; }
  .search-input { width: 100%; }
  /* Profile dropdown pinned to viewport edges — the default `right: 0`
     anchors the menu to the trigger, which pushes it off-screen when the
     avatar sits on the right of a narrow phone. Fix: viewport-fixed with
     both left/right insets so it fills the available width. */
  .topbar-user .tu-menu {
    position: fixed;
    top: 68px;
    left: 12px;
    right: 12px;
    min-width: 0;
    width: auto;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
  }

  .content { padding: 16px 14px; }
  .card { padding: 16px; border-radius: 6px; }
  .card h2 { font-size: 18px; }
  .modal { width: 96%; padding: 18px; }
  .modal h3 { font-size: 18px; }

  /* Tables — horizontal scroll wrapper */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 12px; }
  th, td { padding: 8px 10px; }

  /* Toolbar wraps cleanly */
  .toolbar { gap: 6px; }
  .toolbar button, .toolbar .btn { font-size: 12px; padding: 7px 12px; }

  /* Form rows stack on mobile */
  .row { gap: 10px; }
  .row .col { min-width: 100%; }

  /* Dashboard day tabs scroll horizontally */
  .day-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .day-tab { padding: 12px 16px; font-size: 14px; }
  .schedule-row { grid-template-columns: 1fr; padding: 14px 18px; gap: 8px; }
  .schedule-location { text-align: left; font-size: 11px; }

  /* Tile grid: 1 column on phone */
  .tile-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* ─── Read-only user overlay ───
   For accounts flagged as readonly (e.g. Reporter, Stage Manager) we hide any
   control that would create/edit/delete data. Pages don't need to be
   individually reworked: buttons, inputs, action toolbars and rows tagged
   [data-edit] simply disappear. Anything genuinely view-only should carry the
   .ro-safe class to opt out. */
body.readonly-user [data-edit],
body.readonly-user .toolbar button:not(.ro-safe),
body.readonly-user .toolbar .btn:not(.ro-safe),
body.readonly-user .toolbar-row button:not(.ro-safe),
body.readonly-user .action-bar button:not(.ro-safe):not(.primary):not(.ghost),
body.readonly-user .adj-row .status-btn,
body.readonly-user .adj-row .award-btn,
body.readonly-user .next-draw-row,
body.readonly-user .confirm-advance-bar,
body.readonly-user .badge-toolbar button:not(.ro-safe),
body.readonly-user .badge-tweak,
body.readonly-user .le-toolbar,
body.readonly-user .import-btn,
body.readonly-user .danger,
body.readonly-user button.primary:not(.ro-safe),
body.readonly-user .btn-add-row,
body.readonly-user .row-delete,
body.readonly-user input[type=file] {
  display: none !important;
}
/* Row-level click-to-edit affordances become inert */
body.readonly-user .row-clickable {
  cursor: default !important;
}
body.readonly-user .row-clickable:hover { background: transparent !important; }
body.readonly-user input:not(.ro-safe),
body.readonly-user select:not(.ro-safe),
body.readonly-user textarea:not(.ro-safe) {
  pointer-events: none;
  background: var(--cream-2, #f5efe0);
  color: var(--muted, #8a7438);
}
body.readonly-user .readonly-hide { display: none !important; }
.readonly-badge {
  display: inline-block; padding: 3px 10px; margin-left: 8px;
  background: #e9dfc4; color: #6b5a2a;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 3px;
  font-family: 'Inter', sans-serif;
}

/* ─── Unified Print button ───
   Every "Print"-flavored button across the app uses the same olive-gold
   background so operators recognize the action instantly. Applied via the
   .btn-print utility class OR automatically to any .toolbar button whose
   surrounding page is a /print/*.html toolbar. */
.btn-print, button.btn-print, a.btn-print {
  background: #8a7438 !important;
  color: white !important;
  border: 1px solid #8a7438 !important;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px; font-weight: 500; letter-spacing: .3px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-print:hover { background: #a06a25 !important; border-color: #a06a25 !important; }