/* ============================================================================================
   HMS design tokens.

   Every colour in the app is meant to come from one of these variables, so a theme is a block of
   values and nothing else. The values here are the NATIVE theme — the original "Ocean" look,
   kept exactly as it was. themes.css redefines the same names for the Light and Dark themes
   (selected on <html data-theme="...">). A colour that encodes DATA (a status, a roster chip, a
   chart series) keeps its own token so a theme can retune it without touching layout rules.

   Surfaces: --bg (page) · --panel (cards, tables) · --surface-2 (chips, insets, code) · --surface-3
   (pressed/hover of surface-2) · --hover (row hover) · --active-bg (selected row / nav item)
   Text: --ink · --ink-2 (icons, secondary) · --muted · --on-brand (text on brand-coloured fills)
   Lines: --line · --line-2 (hover border) · --focus (focus ring) · --scrollbar
   Brand: --brand (dark fill: room pills, mobile top bar) · --brand-2 (primary buttons, links) ·
   --brand-2-hover · --accent · --link
   Status: --ok/--ok-bg · --warn/--warn-bg · --danger/--danger-bg · --info/--info-bg
   Paper: --paper/--paper-ink — surfaces that must stay light in every theme (email bodies,
   PDF and print previews, payslips).
   ============================================================================================ */
:root {
  color-scheme: light;
  --theme-color: #1f3a5f;   /* browser / PWA title-bar colour for this theme */

  /* Ocean palette — smooth slate-grays + soft dark blues (global) */
  --bg: #eef1f6;
  --panel: #ffffff;
  --surface-2: #eef2f7;
  --surface-3: #e2e8f1;
  --hover: #f1f5fb;
  --active-bg: #e8f0fc;
  --ink: #1f2a3a;
  --ink-2: #5b6b7d;
  --muted: #69768a;
  --on-brand: #ffffff;
  --line: #dde4ee;
  --line-2: #c9d6e6;
  --focus: #bcd4ee;
  --scrollbar: #dde3ea;
  --brand: #223049;       /* deep slate navy */
  --brand-2: #41699c;     /* soft ocean blue (primary) */
  --brand-2-hover: #245a96;
  --link: #41699c;
  --accent: #3f7d80;      /* muted teal */
  --ok: #2f7d5b;
  --ok-bg: #e7f6ee;
  --warn: #b07a39;
  --warn-bg: #fff4e0;
  --danger: #b04a3f;
  --danger-bg: #fdeaea;
  --info: #41699c;
  --info-bg: #eaf1fa;
  --paper: #ffffff;
  --paper-ink: #1f2a3a;
  --input-bg: #ffffff;
  --tooltip-bg: #1f2733;
  --tooltip-ink: #ffffff;
  --backdrop: rgba(15,23,42,.45);
  --shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --shadow-2: 0 4px 14px rgba(16,24,40,.10);
  --radius: 10px;

  /* app shell */
  --side-bg: #ffffff;
  --side-ink: #5b6b7d;
  --side-hover: #f1f5fb;
  --side-active-bg: #e8f0fc;
  --side-active-ink: #41699c;
  --topbar-bg: #223049;
  --topbar-ink: #ffffff;
  --logo-plate: transparent; /* behind a tenant logo — dark themes give it a light plate */

  /* toasts */
  --toast-ok-bg: #e7f6ec; --toast-ok-ink: #15633a; --toast-ok-line: #b6e0c4;
  --toast-bad-bg: #fdecec; --toast-bad-ink: #8a1c1c; --toast-bad-line: #f3bcbc;

  /* field highlight palette (matches the PDF colour spec) */
  --hl-name: #ffe6c7;     /* orange  */
  --hl-source: #ffd6d6;   /* red     */
  --hl-booking: #d4f5d8;  /* green   */
  --hl-arrival: #d6ecff;  /* light blue */
  --hl-departure: #e7ddfb; /* purple  */
  --hl-amount: #fff7c2;   /* light yellow */
  --hl-gray: #e9edf2;     /* grey    */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   App shell: light vertical icon rail (monday-style).
   Mode A (default): icon + label underneath.
   Mode B (body.nav-compact): icons only, name on hover. Toggle via pin.
   ============================================================ */
:root { --rail: 98px; --rail-compact: 68px; }

.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail);
  background: var(--side-bg); border-right: 1px solid var(--line); color: var(--side-ink);
  z-index: 60; display: flex; flex-direction: column; overflow: hidden;
}
body.nav-compact .sidebar { width: var(--rail-compact); }

/* brand */
.side-brand { display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 6px 10px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); }
.side-logo { width:46px; height:46px; flex:0 0 46px; display:flex; align-items:center; justify-content:center; font-size:24px; background:transparent; border-radius:10px; overflow:hidden; }
.side-logo img { width:100%; height:100%; object-fit:contain; }
.side-logo.is-emoji { background:var(--brand); color:var(--on-brand); } /* tile only for the emoji fallback */
.side-brand-name { font-size:10px; font-weight:700; color:var(--muted); text-align:center; line-height:1.15; max-width:86px; }
body.nav-compact .side-brand-name { display:none; }

/* nav items: vertical icon-over-label */
.side-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 0; }
.side-nav::-webkit-scrollbar { width:6px; }
.side-nav::-webkit-scrollbar-thumb { background:var(--scrollbar); border-radius:6px; }
.side-nav a, .side-bell, .side-signout, .side-pin {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  margin:3px 8px; padding:10px 4px; border-radius:12px; text-align:center; position:relative;
  color:var(--side-ink); text-decoration:none; font-weight:600; font-size:10.5px;
  background:none; border:none; cursor:pointer; width:calc(100% - 16px);
}
.side-ico { display:flex; align-items:center; justify-content:center; line-height:1; }
.side-ico svg { width:22px; height:22px; display:block; }
.side-label { font-size:10.5px; line-height:1.15; word-break:break-word; }
.side-nav a:hover, .side-bell:hover, .side-signout:hover, .side-pin:hover { background:var(--side-hover); color:var(--ink); }
.side-nav a.active { background:var(--side-active-bg); color:var(--side-active-ink); }

/* compact: hide labels, bigger icons, hover flyout name */
body.nav-compact .side-label { display:none; }
body.nav-compact .side-ico svg { width:25px; height:25px; }
body.nav-compact .side-nav a, body.nav-compact .side-bell, body.nav-compact .side-signout, body.nav-compact .side-pin { padding:12px 4px; }
body.nav-compact .sidebar a:hover::after, body.nav-compact .sidebar button:hover::after {
  content: attr(data-name); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:var(--tooltip-bg); color:var(--tooltip-ink); padding:5px 10px; border-radius:7px; font-size:12px; font-weight:600; white-space:nowrap; z-index:80; box-shadow:var(--shadow);
}

/* foot */
.side-foot { border-top:1px solid var(--line); padding:6px 0 8px; }
.side-user { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; }
.side-user .avatar { width:36px; height:36px; border-radius:50%; background:var(--brand-2); color:var(--on-brand); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.side-user-meta { font-size:10px; color:var(--muted); text-align:center; line-height:1.25; }
body.nav-compact .side-user-meta { display:none; }
.role-badge { font-size:9px; background:var(--active-bg); color:var(--brand-2); padding:1px 7px; border-radius:99px; }
.side-pin .side-ico svg { width:18px; height:18px; }
.notif-badge { position:absolute; top:6px; right:22px; display:none; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; background:#e2445c; color:#fff; border-radius:99px; font-size:10px; font-weight:700; }
body.nav-compact .notif-badge { right:14px; }

/* content */
.app-main { margin-left: var(--rail); min-height:100vh; display:flex; flex-direction:column; }
body.nav-compact .app-main { margin-left: var(--rail-compact); }
.content { flex:1; padding:20px 26px 40px; width:100%; }

/* slim top bar — mobile only */
.topbar-slim { display:none; align-items:center; gap:12px; background:var(--topbar-bg); color:var(--topbar-ink); padding:10px 14px; position:sticky; top:0; z-index:30; box-shadow:var(--shadow); }
.hamburger { background:none; border:none; color:var(--topbar-ink); font-size:22px; cursor:pointer; line-height:1; padding:2px 6px; }
.topbar-brand { font-weight:700; }
.topbar-spacer { flex:1; }
.topbar-bell { color:var(--topbar-ink); text-decoration:none; font-size:18px; position:relative; display:flex; align-items:center; }
.topbar-bell .notif-badge { position:absolute; top:-6px; right:-9px; }
.side-backdrop { display:none; position:fixed; inset:0; background:var(--backdrop); z-index:55; }

@media (max-width: 900px) {
  .sidebar, body.nav-compact .sidebar { width:0; border-right:none; }
  .sidebar.open, body.nav-compact .sidebar.open { width:256px; border-right:1px solid var(--line); box-shadow:6px 0 24px rgba(0,0,0,.3); }
  /* mobile drawer: horizontal rows with labels */
  .sidebar.open .side-nav a, .sidebar.open .side-bell, .sidebar.open .side-signout {
    flex-direction:row; justify-content:flex-start; gap:14px; padding:12px 18px; text-align:left; margin:2px 10px; font-size:14px;
  }
  .sidebar.open .side-label, body.nav-compact .sidebar.open .side-label { display:block !important; font-size:14px; }
  .sidebar.open .side-ico { font-size:20px; }
  .sidebar.open .side-brand { flex-direction:row; justify-content:flex-start; gap:12px; padding:14px 18px; }
  .sidebar.open .side-brand-name, body.nav-compact .sidebar.open .side-brand-name { display:block !important; font-size:15px; max-width:none; }
  .sidebar.open .side-user { flex-direction:row; justify-content:flex-start; gap:12px; padding:10px 18px; }
  .sidebar.open .side-user-meta, body.nav-compact .sidebar.open .side-user-meta { display:block !important; }
  .side-pin { display:none; }
  .app-main, body.nav-compact .app-main { margin-left:0; }
  .topbar-slim { display:flex; }
  .side-backdrop.show { display:block; }
  .content { padding:14px 14px 32px; }
}

.page-title { font-size: 20px; font-weight: 650; margin: 0 0 4px; }
.page-sub { color: var(--muted); margin: 0 0 18px; }
.wrap { width:100%; }

/* ---- cards / panels ---- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel + .panel { margin-top: 18px; }
/* …but not when the panels sit side by side in a grid: the second one's top edge was 18px lower
   than the first's (Connected mailboxes vs AI assistant, Add contact vs Address book, the HR
   Insights rows). A grid's gap already separates them. */
:where(.grid-2, .grid-3, .grid-4, .hr-ins-4, .hr-ins-3, .pl-grid, .ppl-wrap, [style*="display:grid"], [style*="display: grid"]) > .panel + .panel { margin-top: 0; }
:where(.hr-ins-4, .hr-ins-3) { align-items: stretch; }
:where(.hr-ins-4, .hr-ins-3) > .panel { height: 100%; display: flex; flex-direction: column; }
:where(.hr-ins-4, .hr-ins-3) > .panel > .panel-body { flex: 1 1 auto; }
.panel-head { padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 600; display:flex; align-items:center; gap:10px; }
.panel-body { padding: 16px 18px; }

/* ---- toolbar ---- */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .grow { flex: 1; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=date],
input[type=time], input[type=tel], input[type=url], input:not([type]), select, textarea {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background:var(--input-bg); color: var(--ink);
}
input:focus, select:focus { outline: 2px solid var(--focus); border-color: var(--brand-2); }
.btn {
  display:inline-flex; align-items:center; gap:6px; cursor: pointer;
  background: var(--brand-2); color: var(--on-brand); border: none; padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 14px;
}
.btn:hover { background: var(--brand-2-hover); }
.btn.secondary { background: var(--surface-2); color: var(--ink); }
.btn.secondary:hover { background: var(--surface-3); }
.btn.danger { background: var(--danger); }
.btn.ghost { background: transparent; color: var(--brand-2); }
.btn.sm { padding: 5px 10px; font-size: 13px; }

/* ---- guest rows ---- */
.guest-list { display: flex; flex-direction: column; gap: 8px; }
.guest-row {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: box-shadow .12s ease, border-color .12s ease;
  overflow: hidden;
}
.guest-row:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.guest-mini {
  display: flex; gap: 12px; align-items: center; padding: 11px 14px; cursor: pointer;
}
.guest-mini .cell { min-width: 0; flex: 1 1 0; }
.cell.c-room   { flex: 0 0 56px; }
.cell.c-name   { flex: 2 1 0; }
.cell.c-source { flex: 1.6 1 0; }
.cell.c-arr,
.cell.c-dep    { flex: 0 0 92px; }
.cell.c-amount { flex: 0 0 110px; text-align: right; }
.cell.c-type   { flex: 0 0 80px; }
.cell.c-booking{ flex: 0 0 110px; }
.cell.c-hotel  { flex: 0 0 168px; }
.cell.c-chev   { flex: 0 0 18px; }
.cell .label { display:block; font-size: 10px; text-transform: uppercase; letter-spacing:.04em; color: var(--muted); margin-bottom:1px; }
.cell .val { display:block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .val.tag { display:inline-block; padding: 1px 8px; border-radius: 6px; font-weight: 600; }

.hl-name .val.tag    { background: var(--hl-name); }
.hl-source .val.tag  { background: var(--hl-source); }
.hl-booking .val.tag { background: var(--hl-booking); font-family: ui-monospace, monospace; }
.hl-arrival .val.tag { background: var(--hl-arrival); }
.hl-departure .val.tag { background: var(--hl-departure); }
.hl-amount .val.tag  { background: var(--hl-amount); font-variant-numeric: tabular-nums; }
.hl-gray .val.tag    { background: var(--hl-gray); }

.room-pill {
  background: var(--brand); color: var(--on-brand); border-radius: 7px; text-align:center; padding: 6px 0; font-weight: 700;
}
.room-pill.empty { background: var(--surface-3); color:var(--ink-2); font-weight:600; }

.chevron { color: var(--muted); justify-self: center; transition: transform .15s ease; }
.guest-row.open .chevron { transform: rotate(90deg); }

/* hotel allocation select inline */
.alloc select { width: 100%; font-size: 13px; padding: 6px 8px; }
.alloc.assigned select { border-color: var(--ok); background: var(--ok-bg); }

/* expanded detail */
.guest-detail { display: none; border-top: 1px dashed var(--line); background: var(--hover); padding: 14px 16px; }
.guest-row.open .guest-detail { display: block; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px 22px; }
.detail-item .k { font-size: 11px; text-transform: uppercase; letter-spacing:.04em; color: var(--muted); }
.detail-item .v { font-weight: 500; }
.detail-block { margin-top: 12px; }
.detail-block h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing:.04em; color: var(--muted); }
.notes { background: var(--hl-gray); border-radius: 8px; padding: 8px 11px; white-space: pre-wrap; font-size: 13px; }
.chips { display:flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--surface-2); border-radius: 99px; padding: 2px 10px; font-size: 12px; }

/* column chooser popover */
.colchooser { position: relative; }
.colchooser .menu {
  display:none; position: absolute; right:0; top: 110%; z-index: 30;
  background:var(--panel); border:1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 10px 12px; min-width: 180px;
}
.colchooser.open .menu { display:block; }
.colchooser .menu label { display:flex; align-items:center; gap:8px; padding: 4px 2px; cursor:pointer; font-weight:500; }

/* tables (admin) */
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th, table.tbl td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
table.tbl th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing:.04em; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.badge.on { background:var(--ok-bg); color: var(--ok); }
.badge.off { background:var(--danger-bg); color: var(--danger); }
.badge.role { background:var(--info-bg); color: var(--brand-2); }

/* login */
.login-wrap { min-height: 100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#1f3a5f,#2b6cb0); }
.login-card { width: 380px; background:var(--panel); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.25); padding: 28px; }
.login-card h1 { font-size: 20px; margin: 6px 0 2px; }
.login-card .sub { color: var(--muted); margin: 0 0 18px; }
.login-card label { display:block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.login-card input { width: 100%; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 16px; }
.login-tabs { display:flex; gap: 6px; margin-bottom: 6px; }
.login-tabs button { flex:1; background:var(--surface-2); border:none; padding: 8px; border-radius: 8px; cursor:pointer; font-weight:600; color: var(--muted); }
.login-tabs button.active { background: var(--brand-2); color:var(--on-brand); }
.oauth-sep { display:flex; align-items:center; gap:10px; color: var(--muted); margin: 16px 0 12px; font-size: 12px; }
.oauth-sep::before, .oauth-sep::after { content:""; flex:1; height:1px; background: var(--line); }
.ms-btn { width:100%; justify-content:center; background:#2f2f2f; color:#fff; display:flex; align-items:center; gap:8px; }
.ms-btn:hover { background:#1f1f1f; text-decoration:none; }
.ms-logo { width:16px; height:16px; display:inline-block; background:
  linear-gradient(to right,#f25022 50%, #7fba00 50%) top/100% 49% no-repeat,
  linear-gradient(to right,#00a4ef 50%, #ffb900 50%) bottom/100% 49% no-repeat; }
.alert { padding: 9px 12px; border-radius: 8px; font-size: 13px; margin: 10px 0; }
.alert.err { background:var(--danger-bg); color: var(--danger); }
.alert.ok { background:var(--ok-bg); color: var(--ok); }
.muted { color: var(--muted); }
.empty-state { text-align:center; padding: 50px 20px; color: var(--muted); }
.row-actions { display:flex; gap:6px; align-items:center; }
form.inline { display:inline; }
.help { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pager { display:flex; gap: 8px; align-items:center; justify-content:center; margin-top: 16px; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) {
  .grid-2 { grid-template-columns: 1fr; }

  /* guest row becomes a stacked card: room+name on top, fields wrap below */
  .guest-mini { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; padding: 12px; }
  .guest-mini .cell { flex: 0 0 auto !important; }
  .cell.c-room  { order: 1; }
  .cell.c-name  { order: 2; flex: 1 1 60% !important; }
  .cell.c-chev  { order: 3; margin-left: auto; }
  .cell.c-source, .cell.c-booking, .cell.c-arr, .cell.c-dep, .cell.c-type, .cell.c-amount {
    order: 4; flex: 1 1 44% !important; min-width: 130px;
  }
  .cell.c-hotel { order: 5; flex: 1 1 100% !important; }
  .cell.c-hotel .alloc select { width: 100%; }
  .cell .val.tag { white-space: normal; }            /* let long names wrap, not overlap */
  .cell .val { white-space: normal; }
  .room-pill { padding: 8px 12px; }
}

/* draggable sidebar reorder */
.side-nav a.nav-dragging { opacity: .4; }
.side-nav a[draggable="true"]:active { cursor: grabbing; }

/* ---- global toast (see app.js) ---------------------------------------------------------------
   Success is green and fades; an error is red and lingers. Blocking dialogs are reserved for
   decisions the user actually has to make. */
.hmstoast, .hrtoast {
  position: fixed; left: 50%; bottom: 26px; z-index: 9999;
  transform: translateX(-50%) translateY(14px);
  padding: 11px 20px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  max-width: min(92vw, 560px); text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  background: var(--toast-ok-bg); color: var(--toast-ok-ink); border: 1px solid var(--toast-ok-line);
  box-shadow: 0 8px 28px rgba(16, 64, 38, .16);
}
.hmstoast.on, .hrtoast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.hmstoast.bad, .hrtoast.bad {
  background: var(--toast-bad-bg); color: var(--toast-bad-ink); border-color: var(--toast-bad-line);
  box-shadow: 0 8px 28px rgba(120, 20, 20, .16);
}
@media (prefers-reduced-motion: reduce) { .hmstoast, .hrtoast { transition: none; } }

/* ---- equal-height panels ---------------------------------------------------------------------
   Two panels side by side should end level. Grid items stretch by default, but a .panel that sizes
   to its own content leaves one card visibly shorter than its neighbour. */
.grid-2 { align-items: stretch; }
.grid-2 > .panel, .grid-3 > .panel { height: 100%; display: flex; flex-direction: column; }
.grid-2 > .panel > .panel-body, .grid-3 > .panel > .panel-body { flex: 1 1 auto; }

/* ---- installable app (pwa.js) -------------------------------------------------------------- */
.side-install[hidden], .topbar-install[hidden] { display: none !important; }
.side-install { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; margin:3px 8px; padding:10px 4px; border-radius:12px; text-align:center; position:relative; color:var(--side-ink); text-decoration:none; font-weight:600; font-size:10.5px; width:calc(100% - 16px); }
.side-install:hover { background:var(--side-hover); color:var(--ink); text-decoration:none; }
body.nav-compact .side-install .side-label { display:none; }
.sidebar.open .side-install { flex-direction:row; justify-content:flex-start; gap:14px; padding:12px 18px; text-align:left; margin:2px 10px; font-size:14px; }
.topbar-install { background:none; border:1px solid rgba(255,255,255,.35); color:var(--topbar-ink); border-radius:8px; font-size:16px; line-height:1; padding:3px 8px; cursor:pointer; }
.pwa-sheet { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:950; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-2); padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.pwa-sheet-text { display:flex; flex-direction:column; gap:2px; font-size:13px; }
.pwa-sheet-text span { color:var(--muted); }
.pwa-sheet-btns { display:flex; gap:8px; justify-content:flex-end; }
.pwa-modal { position:fixed; inset:0; z-index:1000; background:var(--backdrop); display:flex; align-items:flex-end; justify-content:center; padding:16px; }
@media (min-width: 640px) { .pwa-modal { align-items:center; } }
.pwa-modal-card { background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:14px; width:100%; max-width:440px; box-shadow:var(--shadow-2); }
.pwa-modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); font-size:16px; }
.pwa-x { background:none; border:none; font-size:24px; line-height:1; cursor:pointer; color:var(--muted); }
.pwa-modal-body { padding:14px 16px 18px; }
.pwa-note { margin:0 0 12px; font-size:13px; color:var(--muted); }
.pwa-steps { margin:0; padding:0 0 0 22px; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.pwa-steps li { display:flex; align-items:center; gap:10px; }
.pwa-ico { display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:8px; background:var(--surface-2); color:var(--brand-2); flex:0 0 30px; }
html[data-pwa="installed"] .pwa-only-browser { display:none !important; }

/* ---- appearance picker (Security & preferences) ------------------------------------------- */
.theme-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.theme-card { position:relative; cursor:pointer; border:2px solid var(--line); border-radius:12px; padding:8px; background:var(--panel); transition:border-color .12s, box-shadow .12s; }
.theme-card:hover { border-color:var(--line-2); box-shadow:var(--shadow); }
.theme-card input { position:absolute; opacity:0; width:0; height:0; }
.theme-card.on, .theme-card:has(input:checked) { border-color:var(--brand-2); box-shadow:0 0 0 3px var(--focus); }
.theme-card .tp { display:grid; grid-template-columns:22px 1fr; height:76px; border-radius:8px; overflow:hidden; border:1px solid rgba(0,0,0,.08); }
.theme-card .tp-rail { display:flex; flex-direction:column; align-items:center; gap:5px; padding-top:7px; }
.theme-card .tp-rail i { width:9px; height:9px; border-radius:3px; display:block; }
.theme-card .tp-main { padding:8px; display:flex; flex-direction:column; gap:5px; }
.theme-card .tp-main b { display:block; height:7px; border-radius:3px; width:55%; }
.theme-card .tp-main s { display:block; height:22px; border-radius:5px; text-decoration:none; }
.theme-card .tp-main u { display:block; height:8px; width:34px; border-radius:4px; text-decoration:none; }
.theme-card .tn { display:flex; flex-direction:column; align-items:flex-start; gap:1px; margin-top:8px; font-weight:600; font-size:13px; }
.theme-card .tn small { color:var(--muted); font-weight:500; font-size:11.5px; line-height:1.3; }

/* ---- standard right-click menu (HMSMenu in app.js) — Boards, MailVault and Cloud Drive menus
   share the same look --------------------------------------------------------------------------- */
.hms-ctx { position: fixed; z-index: 2100; min-width: 220px; max-width: 320px; max-height: 70vh; overflow-y: auto;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--fx-shadow-lg, var(--shadow-2)); padding: 5px; outline: none; animation: hms-ctx-in .09s ease-out; }
@keyframes hms-ctx-in { from { opacity: 0; transform: translateY(-3px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hms-ctx { animation: none; } }
.hms-ctx-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 7px; cursor: pointer;
  font-size: 13px; line-height: 1.3; color: var(--ink); outline: none; user-select: none; }
.hms-ctx-item:hover, .hms-ctx-item:focus { background: var(--hover); }
.hms-ctx-item.danger { color: var(--danger); }
.hms-ctx-item.danger:hover, .hms-ctx-item.danger:focus { background: var(--danger-bg); }
.hms-ctx-item.disabled { color: var(--muted); cursor: default; opacity: .6; }
.hms-ctx-item.disabled:hover { background: none; }
.hms-ctx-ic { width: 16px; flex: 0 0 16px; text-align: center; font-size: 12px; color: var(--ink-2); opacity: .85; }
.hms-ctx-item.danger .hms-ctx-ic { color: inherit; }
.hms-ctx-lb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hms-ctx-hint { margin-left: 12px; font-size: 11px; color: var(--muted); }
.hms-ctx-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.mail-ctx, .drive-ctx, .g-ctx { border-radius: 11px !important; box-shadow: var(--fx-shadow-lg, var(--shadow-2)) !important; }
@media print { .hms-ctx { display: none !important; } }

/* ---- recipient suggestions (mailsuggest.js) — global: compose-from-anywhere opens on any page ---- */
.mv-suggest { position: fixed; z-index: 6000; max-height: 280px; overflow-y: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--fx-shadow-lg, var(--shadow-2)); padding: 4px; max-width: 520px; }
.mv-suggest-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.mv-suggest-item .n { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-suggest-item .e { color: var(--muted); font-size: 12px; grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-suggest-item .h { color: var(--muted); font-size: 11px; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.mv-suggest-item:hover, .mv-suggest-item.on { background: var(--hover); }


/* ---- searchable selects (app.js) ---- */
.sel-search { position: relative; display: inline-block; max-width: 100%; }
.sel-search .sel-search-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.sel-search-in { width: 100%; min-width: 180px; }
.sel-search-list { position: absolute; left: 0; top: calc(100% + 3px); z-index: 2100; max-height: 260px; overflow-y: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--fx-shadow-lg, var(--shadow-2)); padding: 4px; min-width: 240px; max-width: 420px; }
.sel-search-opt { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-search-opt:hover, .sel-search-opt.on { background: var(--hover); }
.sel-search-opt.cur { font-weight: 700; }
.sel-search-none { padding: 8px 10px; color: var(--muted); font-size: 13px; }