/* ============================================================
   SIDE_MENU_V1 (2026-10-19) — the Marketing look on the dashboard.
   >>> SWITCHED ON FOR ALL STAFF 2026-10-20 (operator: "Now deploy to staff too"): AdminApps.init() now adds
   >>> html.adm-shell for EVERY account. The notes below describe the admin-preview period and are
   >>> kept as history; "admins only" there now means "everyone".
   ------------------------------------------------------------
   Operator: move the dashboard's crowded top menu to the left like /marketing/ (MKT_SHELL_V1)
   and give the metric cards the Marketing Overview tile design, "only for admin to see, not
   staff yet". DEPLOY_RULES_V1 rule 2 (admin-first):
     - EVERY rule below is scoped to html.adm-shell. Nothing sets that class for staff, so
       for them this file matches nothing and the dashboard is unchanged.
     - The class is set by AdminApps.init() (index.html) from AdminApps.ADMIN_IDS (SP-000,
       SP-002). It runs inside Auth.showApp() in the same task that reveals #app-screen, so
       no old layout is painted first, and on every login, so an account switch drops it.
       No <head> script: Rocket Loader defers those anyway, and #app-screen is hidden until then.
   Display only: no new data, no new endpoint, no server gate needed.
   Switching on for staff = make the AdminApps.init() toggle unconditional (add the class
   always), or drop the `html.adm-shell` prefix here and the .adm-head default below.
   Tokens are Marketing's (--mkt-* in css/marketing.css), restated here because the
   dashboard does not load that file.
============================================================ */
html.adm-shell {
  --adm-navy: #0f1f3d;
  --adm-gold: #a07a22;
  --adm-hairline: #e8e0cf;
}
/* GREY_GROUND_V1 (2026-10-19, operator): the page keeps the dashboard's own grey-blue ground
   (base.css --gray-100). Cream was tried and REJECTED for staff usability: the arrived /
   checked-out cards' gold tint disappears on cream and reads clearly only on grey-blue.
   Only the menu and the metric tiles take the Marketing design. Do not re-propose cream here. */

/* The header strip exists in the markup for everyone and is HIDDEN BY DEFAULT
   (Rocket Loader runs scripts after first paint, so only a CSS default can keep it off). */
.adm-head { display: none; }

/* ============ METRIC TILES (every tab's .stats-grid) ============
   Marketing's sTile(): label on top (11px caps, grey), value 20px bold, sub 12px grey,
   white tile, 1px border, radius 10; the row sits in a white hairline card. The card
   builders are untouched: the label is moved to the top with `order`, and the progress
   bar is replaced by colouring the number the way Marketing colours a status value. */
html.adm-shell #app-screen .stats-grid {
  display: grid;
  /* 130px, not Marketing's 150: the room board's 8 tiles then still fit on one row.
     TILE_PROPORTION_V1 (2026-10-19, operator: "fix the metric proportion"): auto-FIT, not auto-fill -
     auto-fill kept empty tracks, so 6 check-in tiles left a gap at the right and the 2-wide sales tile
     looked longer than its figure. auto-fit shares the whole row equally among the tiles present. */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  background: #fff; border: 1px solid var(--adm-hairline); border-radius: 12px;
  padding: 16px 18px; box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
html.adm-shell #app-screen .stats-grid:empty { display: none; }
html.adm-shell #app-screen .stat-card {
  display: flex; flex-direction: column; justify-content: flex-start;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 12px 14px; box-shadow: none; transform: none;
  transition: border-color .2s ease;
}
html.adm-shell #app-screen .stat-card:hover { transform: none; box-shadow: none; border-color: var(--adm-gold); }
/* TILE_LABEL_READABLE_V1 (2026-11-03, operator: "the metric text looks faded"): labels were 11px / weight 400 /
   #6b7280 and the % beside the number 12px / 400 / #6b7280 - thin and washed out in Japanese at that size.
   V2 same evening: 600 / #374151 read "saturated, not very elegant" (operator) -> labels 12px / 500 (Noto Sans JP
   has a real medium) / #4b5563 (7.6:1), the % 12px / 400 / #4b5563. Every tab's tiles read these rules. */
html.adm-shell #app-screen .stat-label {
  order: -1;
  font-size: 12px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase;
  color: #4b5563; margin: 0 0 3px;
  word-break: auto-phrase;   /* Japanese wraps at a phrase (本日の|チェックイン売上), not mid-word; ignored elsewhere */
}
html.adm-shell #app-screen .stat-top-row {
  display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; margin: 0;
}
html.adm-shell #app-screen .stat-number {
  font-size: 20px; font-weight: 700; line-height: 1.3; color: #1e3a5f;
}
html.adm-shell #app-screen .stat-pct,
html.adm-shell #app-screen .stat-sub,
html.adm-shell #app-screen .stat-sales-note {
  font-size: 12px; font-weight: 400; color: #4b5563;
}
html.adm-shell #app-screen .stat-bar { display: none; }
/* Status colour = Marketing's palette (#15803d good · #b45309 attention · #b91c1c problem),
   read from the bar the card would have drawn. A 0% amber/red bar is "nothing to do" → green,
   as Marketing shows "0 unpaid" in green. The width test matches the builders' literal
   style="width:N%" (integers only). */
html.adm-shell #app-screen .stat-card:has(.stat-bar-fill.green) .stat-number { color: #15803d; }
html.adm-shell #app-screen .stat-card:has(.stat-bar-fill.amber) .stat-number { color: #b45309; }
html.adm-shell #app-screen .stat-card:has(.stat-bar-fill.red)   .stat-number { color: #b91c1c; }
html.adm-shell #app-screen .stat-card:has(.stat-bar-fill.amber[style*="width:0%"]) .stat-number,
html.adm-shell #app-screen .stat-card:has(.stat-bar-fill.red[style*="width:0%"])   .stat-number { color: #15803d; }
/* FOLLOWUP_BADGE_V1 (2026-10-19, operator): the Follow-ups tile gets an icon with a RED COUNT BADGE,
   like the Tools button, to draw the eye to open cases. The count comes from the card's data-n
   (written by checkin.js followupCard() and followup.js updateStatCard()). Hidden at 0. Sits on the
   number row (bottom-right): the label above runs almost the full tile width.
   RESTORED same day: V2 (the count itself as a red pill, no icon) was rejected by the operator -
   "I prefer when it was with the clipboard". */
html.adm-shell #app-screen .stat-card-followup { position: relative; }
html.adm-shell #app-screen .stat-card-followup::before {
  content: ''; position: absolute; right: 12px; bottom: 8px; width: 24px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E") center / 22px no-repeat;
}
html.adm-shell #app-screen .stat-card-followup::after {
  content: attr(data-n); position: absolute; right: 3px; bottom: 22px;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
  background: #dc2626; color: #fff; font: 700 10.5px/18px 'Noto Sans JP', sans-serif; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
html.adm-shell #app-screen .stat-card-followup[data-n="0"]::after,
html.adm-shell #app-screen .stat-card-followup:not([data-n])::after { display: none; }

/* Today's sales: same tile, money keeps its gold. One column like every other tile (base.css spans it
   over 2, which made it twice as long as its figure; TILE_PROPORTION_V1). */
html.adm-shell #app-screen .stat-card-sales { grid-column: auto; }
html.adm-shell #app-screen .stat-sales-amount {
  font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--gold-600); margin: 0;
}
/* Report tab: its wide card takes one column on a computer like the rest (TILE_PROPORTION_V1);
   report.css still makes it full width on a phone. */
html.adm-shell #tab-report .stat-card.rp-wide .stat-number { font-size: 20px; }

@media (max-width: 768px) {
  html.adm-shell #app-screen .stats-grid {
    grid-template-columns: repeat(2, 1fr); padding: 12px; gap: 8px;
  }
  /* MOBILE_TILES_COMPACT_V1 (2026-10-19): tighter tiles so the six check-in figures take less of a
     phone screen before the booking list starts. */
  html.adm-shell #app-screen .stat-card { padding: 8px 11px; }
  html.adm-shell #app-screen .stat-label { margin-bottom: 1px; }
  html.adm-shell #app-screen .stat-number,
  html.adm-shell #app-screen .stat-sales-amount { font-size: 18px; line-height: 1.25; }

  /* MOBILE_TABBAR_V1 (2026-10-19, operator: "is the mobile well optimized with the new tab?"):
     the phone bottom bar takes the new tab style too - navy bar with a gold top edge (as
     Marketing's phone bar), SELECTED = white tile + navy icon, hover = faint lift. Same rule as
     the desktop menu (SIDE_MENU_ACTIVE_V2). Layout (grid, labels off below 560px) is untouched. */
  html.adm-shell .mobile-bottom-bar {
    background: var(--adm-navy); backdrop-filter: none;
    border-top: 2px solid var(--adm-gold);
  }
  html.adm-shell .mobile-tab-btn { color: rgba(255,255,255,.60); border-radius: 10px; }
  html.adm-shell .mobile-tab-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
  html.adm-shell .mobile-tab-btn.active,
  html.adm-shell .mobile-tab-btn.active:hover { background: rgba(255,255,255,.82); color: var(--adm-navy); } /* .82 = SIDE_MENU_ACTIVE_V5 softened white, was .95 */
}

/* ============ TASK ROW BUTTONS (FU_BUTTONS_V1, 2026-10-19, operator: "redesign the button done edit delete") ============
   Follow-up / handover rows on the Check-in Tools pane. The buttons are built in js/followup.js with one class
   (.followup-action-btn) and are told apart here by their onclick, so no JS changes: markDone / saveDone = Done
   (green), reopen = Reopen / Unread, startEdit = Edit, del = Delete (red, quiet until hovered), saveEdit = Save
   (navy), load = Cancel. Icons are CSS masks in currentColor, so they follow each button's ink. Text stays
   (EN/JA from t()). Admins only, like the rest of this file. */
html.adm-shell .followup-actions { gap: 6px; align-items: center; }
html.adm-shell .followup-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 11px; border-radius: 8px;
  border: 1px solid #e2e8f0; background: #fff; color: #334155;
  font: 600 12px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
html.adm-shell .followup-action-btn::before {
  content: ''; width: 14px; height: 14px; flex: 0 0 14px; background-color: currentColor;
  -webkit-mask: var(--fu-ico) center / contain no-repeat; mask: var(--fu-ico) center / contain no-repeat;
}
html.adm-shell .followup-action-btn:not([onclick*="markDone"]):not([onclick*="saveDone"]):not([onclick*="reopen"]):not([onclick*="startEdit"]):not([onclick*=".del("])::before { display: none; }
html.adm-shell .followup-action-btn:hover { background: #f1f5f9; border-color: #cbd5e1; color: #0f1f3d; }
/* Done / Mark done / Read */
html.adm-shell .followup-action-btn[onclick*="markDone"],
html.adm-shell .followup-action-btn[onclick*="saveDone"] { --fu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
html.adm-shell .followup-action-btn[onclick*="markDone"]:hover,
html.adm-shell .followup-action-btn[onclick*="saveDone"]:hover { background: #047857; border-color: #047857; color: #fff; }
/* Reopen / Unread */
html.adm-shell .followup-action-btn[onclick*="reopen"] { --fu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v6h6'/%3E%3Cpath d='M4.5 15a8 8 0 1 0 1.9-8.3L4 10'/%3E%3C/svg%3E"); }
/* Edit */
html.adm-shell .followup-action-btn[onclick*="startEdit"] { --fu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.1 2.1 0 0 0-4-4L4 16v4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); }
/* Delete: red ink, no frame until hovered, a little apart from the others */
html.adm-shell .followup-action-btn.followup-action-danger { --fu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E"); color: #b91c1c; border-color: transparent; background: transparent; margin-left: 2px; }
html.adm-shell .followup-action-btn.followup-action-danger:hover { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
/* Edit form: Save is the primary action */
html.adm-shell .followup-action-btn[onclick*="saveEdit"] { background: #0f1f3d; border-color: #0f1f3d; color: #fff; }
html.adm-shell .followup-action-btn[onclick*="saveEdit"]:hover { background: #1a365d; border-color: #1a365d; color: #fff; }

/* Phones: three labelled buttons (~234px) squeezed the name/date beside them into a ~60px column, worse than
   the old small buttons. Icon-only there (the label stays in the DOM as the button's accessible name). */
@media (max-width: 600px) {
  html.adm-shell .followup-action-btn[onclick*="markDone"],
  html.adm-shell .followup-action-btn[onclick*="reopen"],
  html.adm-shell .followup-action-btn[onclick*="startEdit"],
  html.adm-shell .followup-action-btn.followup-action-danger {
    font-size: 0; gap: 0; width: 34px; height: 30px; padding: 0; justify-content: center; margin-left: 0;
  }
  html.adm-shell .followup-action-btn::before { width: 15px; height: 15px; flex-basis: 15px; }
  html.adm-shell .followup-action-btn.followup-action-danger { border-color: #fecaca; }
}

/* ============ THE LEFT MENU (desktop only) ============
   Below 769px the dashboard already uses a bottom bar (as Marketing does), so phones keep
   their current layout. The .top-bar keeps its markup and every handler; it is laid out as
   Marketing's .mkt-rail. Tabs hidden per account by Auth.applyTabs (inline display:none)
   stay hidden: display:'' falls back to the flex set here. */
@media (min-width: 769px) {
  html.adm-shell #app-screen.visible { padding-left: 88px; }

  html.adm-shell .top-bar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 88px; height: 100vh;
    flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 16px 0 14px; gap: 5px;
    background: var(--adm-navy); backdrop-filter: none;
    border-bottom: none; border-right: 2px solid var(--adm-gold);
    z-index: 60;
  }
  /* Logo: Marketing's white emblem inside a white ring. Click still reloads.
     LOGO_BIGGER_V1 (2026-10-19, operator: "increase it"): ring 44 -> 58px, emblem 28 -> 40px. */
  html.adm-shell .top-bar-logo {
    width: 58px; height: 58px; margin: 0 0 12px; flex: 0 0 auto;
    justify-content: center; gap: 0;
    border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; overflow: hidden;
  }
  html.adm-shell .top-bar-logo img { width: 40px; height: 40px; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
  html.adm-shell .top-bar-logo span { display: none; }

  /* Nine tabs: the list scrolls on a short screen; the tools below never scroll away. */
  /* MENU_OVERFLOW_CUE_V1 (2026-10-20, operator: "on small screen not all data showing and new staff can't tell
     if there are other tabs"). The list still scrolls when it cannot fit, but no longer silently: a thin
     scrollbar appears ONLY when it overflows, plus the classic CSS-only scroll shadows (Lea Verou): the two
     'local' navy covers ride with the content and hide the two 'scroll' glows at either end, so a soft light
     edge shows at the bottom (or top) only while there are more tabs that way. No JS. */
  html.adm-shell .top-bar-tabs {
    flex: 1 1 auto; min-height: 0; width: 100%;
    flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent;
    background:
      linear-gradient(#0f1f3d 30%, rgba(15,31,61,0)) center top / 100% 26px no-repeat local,
      linear-gradient(rgba(15,31,61,0), #0f1f3d 70%) center bottom / 100% 26px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(255,255,255,.30), rgba(255,255,255,0)) center top / 100% 14px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(255,255,255,.30), rgba(255,255,255,0)) center bottom / 100% 14px no-repeat scroll;
  }
  html.adm-shell .top-bar-tabs::-webkit-scrollbar { width: 4px; }
  html.adm-shell .top-bar-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 2px; }
  html.adm-shell .tab-btn {
    flex: 0 0 auto; width: 76px; padding: 9px 2px 7px;
    flex-direction: column; align-items: center; gap: 4px;
    border: 1px solid transparent; border-radius: 10px;
    color: rgba(255,255,255,.60);
    font-size: 9.5px; font-weight: 600; letter-spacing: .02em; line-height: 1.2;
    text-align: center; white-space: nowrap;
    transition: background .15s ease, color .15s ease;
  }
  html.adm-shell .tab-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
  /* SIDE_MENU_ACTIVE_V2 (2026-10-19, operator): the SELECTED item is the white tile with navy ink
     that used to be the hover ("keep it even after select"). Marketing's framed style (white
     hairline box + gold inset edge) was rejected as not elegant. Hover is therefore only a faint
     lift, so pointing at an item never looks like selecting it. */
  /* SIDE_MENU_ACTIVE_V5 (2026-10-20, operator: "keep the white we had before but soften it"). Back to V2's
     white tile with navy ink, at .82 instead of .95 so it reads as a soft light-grey tile (~#d4d7dc on the navy)
     rather than a bright white block. Hover back to V2's faint .08 lift.
     Tried and left the same day: V3 original gold accent (gold-100 tint + gold-500 ink); V4 sample B soft
     tile (white .10 + white label + gold-500 icon, hover .05). V2 = .95 white. */
  html.adm-shell .tab-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
  html.adm-shell .tab-btn.active,
  html.adm-shell .tab-btn.active:hover {
    background: rgba(255,255,255,.82); border-color: transparent; color: var(--adm-navy);
    box-shadow: none;
  }

  /* Tools at the foot of the menu = ☰ and Refresh only, stacked with room between them (HEAD_ACCOUNT_V1, operator
     2026-10-20). JP/EN and Logout moved to the header beside the staff ID, so they are hidden here ON DESKTOP ONLY
     (phones keep the top bar's own). Replaces the 2x2 grid + gold divider (TOOLS_GRID_ORDER_V1/V2, TOOLS_DIVIDER_V1). */
  html.adm-shell .top-bar-right {
    flex: 0 0 auto; margin: 8px 0 0; padding-top: 12px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    border-top: 1px solid rgba(255,255,255,.12); width: 64px;
  }
  /* more specific than the button rule below (which sets display:flex), so it wins regardless of order */
  html.adm-shell .top-bar-right .top-bar-lang,
  html.adm-shell .top-bar-right .top-bar-logout { display: none; }
  html.adm-shell .top-bar-email { display: none; } /* shown in the header instead */
  html.adm-shell .admin-apps-btn,
  html.adm-shell .top-bar-refresh,
  html.adm-shell .top-bar-lang,
  html.adm-shell .top-bar-logout {
    width: 34px; height: 34px; min-width: 0; padding: 0; gap: 0;
    border-radius: 10px; border: 1px solid transparent; background: transparent;
    color: rgba(255,255,255,.60);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
  }
  html.adm-shell .top-bar-lang { font-size: 12px; font-weight: 700; letter-spacing: .06em; }
  /* Same faint hover as the tabs (SIDE_MENU_ACTIVE_V2); white is kept only for the Tools button
     while its menu is OPEN, the one tool that has a "selected" state. */
  html.adm-shell .admin-apps-btn:hover,
  html.adm-shell .top-bar-refresh:hover,
  html.adm-shell .top-bar-lang:hover { background: rgba(255,255,255,.08); color: #fff; border-color: transparent; }
  /* TOOLS_TILE_V2 (2026-10-19, operator): ONLY the ☰ Tools button always shows the faint tile, so the
     admin-tools launcher reads apart from everything else; hover goes one step brighter. V1 put the tile
     on Refresh / JP / Logout too - the operator's "tools only" meant the Tools button alone. Placed after
     the hover rule above on purpose (same specificity, later wins). */
  html.adm-shell .admin-apps-btn { background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); }
  html.adm-shell .admin-apps-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
  html.adm-shell .admin-apps-btn[aria-expanded="true"] { background: rgba(255,255,255,.82); color: var(--adm-navy); border-color: transparent; } /* softened like the selected tab (V5) */
  html.adm-shell .top-bar-logout svg { display: block; width: 19px; height: 19px; }
  html.adm-shell .top-bar-logout .logout-label { display: none; }
  html.adm-shell .top-bar-logout:hover { background: rgba(220,38,38,.92); color: #fff; }
  /* The Tools menu opens to the RIGHT of the menu, bottom-aligned, instead of below. */
  html.adm-shell .admin-apps-menu { left: calc(100% + 36px); right: auto; top: auto; bottom: 0; } /* ☰ is centred again: clears the 88px menu */

  /* Header strip = Marketing's .mkt-head, on the page's grey-blue (GREY_GROUND_V1): brand left, gold hairline. */
  html.adm-shell .adm-head {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 40;
    background: var(--gray-100); padding: 11px 26px;
  }
  html.adm-shell .adm-head::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-600) 14%, var(--gold-500) 86%, transparent);
  }
  html.adm-shell .adm-head .brand { font-family: var(--font-display); font-size: 19px; letter-spacing: .5px; color: var(--adm-navy); }
  html.adm-shell .adm-head .brand .accent { color: var(--adm-gold); }
  html.adm-shell .adm-head .spacer { flex: 1; }
  html.adm-shell .adm-head .adm-id {
    height: 32px; padding: 0 12px; border-radius: 16px;
    background: rgba(15,31,61,.85); color: #fff; border: 1px solid rgba(255,255,255,.4);
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    display: flex; align-items: center;
  }
  /* HEAD_ACCOUNT_V1 — language + logout beside the staff ID. Logout keeps the dashboard's red-tint language. */
  html.adm-shell .adm-head-lang,
  html.adm-shell .adm-head-logout {
    height: 32px; padding: 0 12px; border-radius: 16px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font: 700 12px/1 var(--font-sans); letter-spacing: .04em; white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  html.adm-shell .adm-head-lang { background: #fff; color: var(--adm-navy); border: 1px solid rgba(15,31,61,.25); }
  html.adm-shell .adm-head-lang:hover { border-color: var(--adm-gold); color: var(--adm-gold); }
  html.adm-shell .adm-head-lang .lg-to-en { display: none; }
  html[lang="ja"].adm-shell .adm-head-lang .lg-to-ja { display: none; }
  html[lang="ja"].adm-shell .adm-head-lang .lg-to-en { display: inline; }
  html.adm-shell .adm-head-logout { background: rgba(220,38,38,.10); color: #b91c1c; border: 1px solid rgba(220,38,38,.25); font-weight: 600; letter-spacing: 0; }
  html.adm-shell .adm-head-logout svg { width: 15px; height: 15px; }
  /* HEAD_LOGOUT_ICON_V1 (2026-10-20, operator: "logout only icon is ok, no need word logout"): a 32px round icon
     button; the word stays in the markup for the walker, hidden, and title/aria-label name the button. */
  html.adm-shell .adm-head-logout { width: 32px; padding: 0; justify-content: center; }
  html.adm-shell .adm-head-logout span { display: none; }
  html.adm-shell .adm-head-logout:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
  html.adm-shell .main-content { min-height: calc(100vh - 56px); }

  /* The gold AI button and its panel sit bottom-LEFT, i.e. on the menu: move them past it. */
  html.adm-shell .ai-fab-btn,
  html.adm-shell .ai-fab-panel { left: 108px; }
}

/* DONE_TINT_CREAM_V1 (a solid #fbefcc on done cards) was tried and REMOVED the same day: operator
   found it "not elegant"; with the grey-blue ground back, the original faint tint is clear again. */

/* ============ SHORT SCREENS (MENU_COMPACT_V1, 2026-10-20) ============
   On a laptop the full menu (58px logo, 9 roomy tabs, 4 stacked tools) needs ~810px and was cut off, with
   Staff and Report hidden below Pricing. Below 860px tall: smaller logo, tighter tabs, smaller tool buttons (the 2x2 grid itself
   is used at every height since TOOLS_GRID_ORDER_V2), so all nine tabs fit down to ~600px. Shorter than that, MENU_OVERFLOW_CUE_V1 shows there is more. */
@media (min-width: 769px) and (max-height: 860px) {
  html.adm-shell .top-bar { padding: 10px 0 8px; gap: 3px; }
  /* LOGO_MATCH_V1 (2026-10-20, operator: "why is the Marketing logo different from the dashboard logo"): the logo
     keeps Marketing's 58/40px at every height - only the space under it tightens here. */
  html.adm-shell .top-bar-logo { margin-bottom: 6px; }
  html.adm-shell .top-bar-tabs { gap: 2px; }
  html.adm-shell .tab-btn { padding: 6px 2px 5px; gap: 3px; }
  html.adm-shell .tab-btn svg { width: 18px; height: 18px; }
  html.adm-shell .top-bar-right { gap: 10px; margin-top: 4px; padding-top: 8px; }
  html.adm-shell .admin-apps-btn,
  html.adm-shell .top-bar-refresh,
  html.adm-shell .top-bar-lang,
  html.adm-shell .top-bar-logout { width: 32px; height: 32px; }
  html.adm-shell .top-bar-lang { font-size: 11px; }
}