:root {
  /* ===== OFFICIAL LOGO PALETTE (AYENTRO ADMIN) -- the only source of colour.
     Everything below derives from these five. See _docs/central_portal_theme.md */
  --logo-slate:      #29353C;   /* octopus body + AYENTRO wordmark + footer */
  --logo-blue:       #44576D;   /* primary accent / action blue */
  --logo-steel:      #768A96;   /* muted accent, borders, off-state */
  --logo-mist:       #E6EDEB;   /* light panel / off-white surface */
  --logo-orange:     #FF931E;   /* primary highlight */

  --header-bg: var(--logo-slate);   /* header beam */
  --footer-bg: var(--logo-slate);
  --body-bg: #ffffff;     /* pure white */
  --text-color: #000000;  /* Black text for body */
  --header-text: #ffffff;
  --footer-text: #ffffff;

  /* Brand tokens -- ALL derived from the official logo palette above. */
  --brand-slate: var(--logo-slate);
  --brand-orange: var(--logo-orange);
  --brand-orange-hover: #e07d0a;              /* darker logo orange */
  --brand-blue: #2f6f8a;                       /* unified accent = the original switch teal the user likes */
  --brand-blue-hover: #255a70;                 /* darker teal */
  --brand-steel: var(--logo-steel);           /* muted / off-state / borders */
  --brand-steel-hover: #64757f;
  --brand-mist: var(--logo-mist);             /* light surface */
  --brand-teal: var(--brand-blue);            /* legacy alias -> unified accent */
  /* Neutral grey (secondary buttons) + status colours */
  --brand-grey: #8a949c;
  --brand-grey-hover: #6f787f;
  --danger: #c00000;
  --danger-hover: #a00000;
  --success: #2e7d32;
  --success-hover: #256628;
  /* Categorical chart palette (pie/donut slices). Central source of truth so
     pages never hardcode chart colours. --chart-other = merged tiny slices. */
  --chart-1: var(--brand-blue);
  --chart-2: var(--brand-orange);
  --chart-3: var(--brand-slate);
  --chart-4: #6a9fb5;
  --chart-5: #b5726a;
  --chart-6: #7d9b76;
  --chart-7: #9a7fb0;
  --chart-8: #c9a24b;
  --chart-other: #c9d2d6;
  /* E-sign editor: one colour per signer (Documents page boxes). */
  --esign-s1: var(--brand-blue);
  --esign-s2: var(--brand-orange);
  --esign-s3: var(--chart-6);
  --esign-s4: var(--chart-7);
  /* Tabs (central component). Change these to restyle every page's tabs. */
  --tab-bg: #f4f4f4;          /* inactive tab background */
  --tab-text: #555;           /* inactive tab text */
  --tab-active-bg: #ffffff;   /* active tab background */
  --tab-active: var(--brand-blue);   /* active tab text = unified teal accent */
  --tab-border: #ccc;
  --input-border: #cccccc;    /* form field / select border */
  --placeholder-color: #9aa3ab;  /* input/textarea placeholder text (muted, never bold) */
  /* Warm orange panel background for .section containers. */
  --panel-bg: #fdf5ea;
  /* Shared card / list surface: white card with a defined logo-blue border. */
  --card-bg: #ffffff;
  --card-bg-hover: #f4f9fb;
  --card-border: var(--brand-steel);        /* logo steel blue-grey */
  --card-border-hover: var(--brand-blue);    /* teal accent on hover */
  --card-shadow: 0 1px 4px rgba(40,53,59,0.08);
  --card-shadow-hover: 0 3px 12px rgba(40,53,59,0.14);
  /* Standard table grid / raster lines (light grey). */
  --table-border: #e2e2e2;
  /* Toggle switch "on" colour (standard = teal accent). */
  --switch-on: var(--brand-blue);

  /* ===== POST-IT WALL (Thoughts tab). Official Post-it note palette, in
     expansion order: one colour per topic, assigned by topic index. Add more
     slots here to grow the palette as topics grow. Notes are light, so a single
     dark ink reads on all of them. */
  --postit-ink: #2b2b26;
  --sign-ink: #1a3a9e;                         /* pen blue for signatures drawn on screen */
  /* House palette (matches the generated art + decks). Kept in sync with
     POSTIT_PALETTE in business_intel.py. Light-to-mid brand tints that read
     under the dark post-it ink. */
  --postit-1: #e6edeb;   /* mist             */
  --postit-2: #ffb25a;   /* orange light     */
  --postit-3: #9db9cf;   /* steel sky light  */
  --postit-4: #8fa99b;   /* sage green       */
  --postit-5: #c9976b;   /* warm tan         */
  --postit-6: #a7b7c1;   /* grey-blue light  */
  --postit-7: #c9d4d3;   /* mist mid         */
  --postit-8: #c98a83;   /* brick red light  */
  --wall-bg: #dfe4e0;    /* soft grey-green board behind the notes */

  /* Header beam height. base_admin.html restates it; this is the fallback
     so the menu rules below stand on their own. */
  --header-beam-height: 72px;
  /* ===== SIDE MENU (icon rail + page panel). All derived from the logo
     palette above so the menu restyles with the rest of the portal. ===== */
  --menu-rail-w: 74px;      /* icon rail width                    */
  --menu-panel-w: 258px;    /* page-list panel width              */
  --menu-w: 332px;          /* rail + panel                       */
  --menu-rail-bg: #1e282e;  /* rail ground, one step below slate  */
  --menu-panel-bg: var(--logo-slate);
  --menu-item-bg: #33434c;      /* rail icon, off state           */
  --menu-item-hover: #3d5563;   /* rail icon, hover               */
  --menu-active: var(--brand-blue);
  --menu-active-hover: var(--brand-blue-hover);
  --menu-text: #e9f1f7;
  --menu-head: var(--brand-orange);   /* section name + sub-heads  */
}

body {
  background-color: var(--body-bg);
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;      /* Ensure footer at bottom */
  color: var(--text-color);
}

.logo-container {
  text-align: center;
  padding: 6px 0 0;
}

.logo-container img {
  max-height: 144px;
  width: auto;
}

header {
  background-color: var(--header-bg);
  height: 40px;
  color: var(--header-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Impact, sans-serif;
  font-size: 40px;
  font-weight: bold;
  margin: 0;
}

header h1 {
  font-family: Impact, sans-serif;
  font-size: 30px;
  color: var(--header-text);
  letter-spacing: 3px;
  margin: 0;
}

main {
  flex: 1 0 auto;         /* Grow main, push footer down */
  padding: 10px 40px;
  text-align: left;
  /* padding counts inside the width, so the page never runs past the window;
     1180 = 1100 content + 2 x 40 padding */
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
  /* small + fixed to the bottom of the window; page scrolls behind it */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
}
footer p { margin: 0; padding: 0; font-size: 0.68rem; }
main { padding-bottom: 30px; }

pre, textarea, code, .terminal-output {
  text-align: left !important;
  font-family: monospace;
  white-space: pre-wrap;
}

/* Sub text under a field/label: own line, smaller, muted grey. */
.subtext {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  color: var(--brand-steel);
}

/* Placeholder text (inputs / selects / textareas): muted grey, never bold. */
::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--placeholder-color);
  font-weight: 400;
  font-style: normal;
  opacity: 1;   /* Firefox lowers placeholder opacity by default */
}

button {
  background: var(--brand-grey);
  color: #fff;
  border: none;
  min-height: 32px;
  width: 160px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: bold;
  margin-top: 8px;
  letter-spacing: 1.5px;
  border-radius: 5px;
  box-sizing: border-box;
  vertical-align: middle;
}

button#abort-btn,
button#abort-fetch {
  background: #c9302c;
  color: white;
}

button:hover {
  background-color: #e0e0e0;
  color: #323F49;
}

.btn-primary {
  background: var(--brand-orange);
  color: #ffffff;
}
.btn-primary:hover {
  background: var(--brand-orange-hover);
  color: #ffffff;
}

.btn-primary:disabled {
  background: #cccccc;
  color: #ffffff;
  cursor: not-allowed;
}

/* Secondary action = blue */
.btn-secondary {
  background: var(--brand-blue);
  color: #ffffff;
}
.btn-secondary:hover {
  background: var(--brand-blue-hover);
  color: #ffffff;
}

/* Deep-red delete button */
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); color: #fff; }

/* Anchor action button (dashboard quick actions, back-to links) */
.btn-main {
  display: inline-block;
  background: var(--brand-blue);
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.btn-main:hover { background: var(--brand-blue-hover); color: #fff; }

/* Tiny button -- a class beats the global `button{width:200px}` rule, so these
   stay small. Use anywhere: <button class="btn-xs blue">. */
.btn-xs {
  /* works on <button> and on <a> */
  display: inline-block; text-decoration: none;
  width: auto; min-width: 0; max-width: none;
  min-height: 0; height: auto; margin: 0;
  padding: 2px 8px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  border: none; border-radius: 4px; cursor: pointer; line-height: 1.5;
  box-shadow: none; color: #fff;
}
a.btn-xs:hover { color: #fff; text-decoration: none; }
.btn-xs.blue   { background: var(--brand-blue); }   .btn-xs.blue:hover   { background: var(--brand-blue-hover); }
.btn-xs.orange { background: var(--brand-orange); } .btn-xs.orange:hover { background: var(--brand-orange-hover); }
.btn-xs.grey   { background: var(--brand-grey); }   .btn-xs.grey:hover   { background: var(--brand-grey-hover); }
.btn-xs:disabled { opacity: .6; cursor: default; }
/* Fixed-width blue/orange box-color tag (prod active color), so tags line up. */
.btn-xs.color-tag { width: 64px; text-align: center; box-sizing: border-box; cursor: default; }

/* ===== ICONS (central) — CONVENTION: all icons MUST be inline SVG.
   No emoji, no icon fonts. Inline SVG inherits currentColor and scales with
   the button, so a single colour rule themes it. Draw with stroke/currentColor.
   Standard sizing for any SVG sitting inside a button/icon. */
button svg, .btn svg, .action-btn svg, .icon-btn svg {
  width: 15px; height: 15px;
  vertical-align: -3px;
  flex: 0 0 auto;
}
/* Plain SVG icon button (no chrome) — use for row edit/delete etc. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 4px; margin: 0 2px;
  width: auto; min-width: 0; min-height: 0; height: auto;
  cursor: pointer; line-height: 1; color: var(--brand-blue);
}
.icon-btn:hover { color: var(--brand-blue-hover); background: none; }
a.icon-btn { text-decoration: none; }
.icon-btn:disabled { opacity: .35; cursor: default; }          /* greyed out, e.g. no photos */          /* same icon button as a link */

/* ===== DROP ZONE (central) =====
   A dashed area that takes dragged files and opens the file window on click. */
.drop-zone {
  border: 2px dashed var(--card-border, #c9cfd3); border-radius: 6px;
  padding: 14px 16px; text-align: center; cursor: pointer;
  color: var(--text-muted, #6a737d); background: var(--card-bg, #fff);
}
.drop-zone:hover { border-color: var(--brand-blue); }
.drop-zone.dragover { border-color: var(--brand-blue); background: var(--card-bg-hover, #f3f7fa); }
.icon-btn.danger { color: var(--danger); }
.icon-btn.danger:hover { color: var(--danger-hover); }
/* Status icons (e.g. a purchase linked to a bank line = ok, settled without one = muted). */
.icon-btn.ok { color: var(--success); }
.icon-btn.muted { color: var(--brand-steel); }

/* ===== SWITCH / TOGGLE (central) =====
   <label class="switch"><input type="checkbox"><span class="slider"></span></label>
   On-colour = --switch-on. Variants: .switch.blue / .switch.danger. */
.switch { position: relative; display: inline-block; width: 42px; height: 22px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: #ccc; border-radius: 22px; transition: .2s; }
.switch .slider:before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--switch-on); }
.switch input:checked + .slider:before { transform: translateX(20px); }
.switch.blue   input:checked + .slider,
.switch.on-blue input:checked + .slider { background: var(--brand-blue); }
.switch.danger input:checked + .slider { background: var(--danger); }

/* ===== SELECT / DROPDOWN (central) -- matches the portal's field style.
   Use: <select class="ui-select">. Custom chevron (logo slate), no native arrow. */
.ui-select {
  height: 36px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background-color: #ffffff;
  color: var(--text-color);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2329353C' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
/* Text box in the same look as .ui-select (e.g. a search box next to filter dropdowns). */
.ui-input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background-color: #ffffff;
  color: var(--text-color);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.ui-input:hover { border-color: var(--brand-blue); }
.ui-input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 2px rgba(47,111,138,.18); }
.ui-select:hover { border-color: var(--brand-blue); }
/* Compact dropdown for inside table rows (e.g. pick a bank line per invoice). */
.ui-select.ui-select-sm { height: 28px; font-size: 12px; font-weight: 400; padding: 0 26px 0 8px; background-position: right 8px center; }
.ui-select:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 2px rgba(47,111,138,.18); }

/* ===== STANDARD DROPDOWN ARROW (central) — every <select> gets the same
   custom slate chevron (slightly larger than a native arrow), no matter the
   page. !important so page `background:` shorthands don't wipe the arrow. */
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path fill='%2329353C' d='M8 10 0 0h16z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 15px 10px !important;
  padding-right: 34px !important;
}

/* Right-aligned action-button row, vertically centred with adjacent fields.
   Use: <div class="actions-right"> … buttons … </div>. Put a field first with
   `style="flex:1"` to push the buttons to the right. */
.actions-right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ===== PILL / BADGE (central) -- small rounded status label.
   Use: <span class="pill success">TONIGHT</span>. Variants below. */
.pill {
  display: inline-block; vertical-align: middle;
  font-size: 9px; font-weight: 700; letter-spacing: .4px;
  padding: 2px 8px; border-radius: 9px; color: #fff; line-height: 1.6;
  background: var(--brand-steel);
}
.pill.success { background: var(--success); }
.pill.info    { background: var(--brand-blue); }
.pill.warn    { background: var(--brand-orange); }
.pill.danger  { background: var(--danger); }
.pill.muted   { background: var(--brand-grey); }
.pill.recon   { background: var(--chart-7); }   /* reconciled — distinct purple */

/* ===== PROCESSING / LOG BOX (central) -- terminal-style output for background
   runs (sweeps, pipeline). Use: <pre class="processing-box">...</pre>. */
.processing-box {
  white-space: pre-wrap; font-size: 11px; line-height: 1.5;
  background: var(--logo-slate); color: #d6e9d6;
  border-radius: 6px; padding: 10px; margin-top: 8px;
  overflow: auto; max-height: 260px;
}

/* ===== FRAMELESS ICON ACTIONS (central) -- pen / trash / etc.
   One colour for ALL icon actions (overrides the global button{} sizing). */
.icon-act {
  background: none !important; border: none !important; box-shadow: none !important;
  width: auto !important; min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 2px 4px !important; letter-spacing: normal !important;
  cursor: pointer; color: var(--brand-blue); line-height: 0;
  display: inline-flex; align-items: center;
}
.icon-act:hover { color: var(--brand-blue-hover); background: none !important; }
.icon-act svg { display: block; }
.icon-act.danger { color: var(--danger); }
.icon-act.danger:hover { color: var(--danger-hover); }
.icon-act.lg { padding: 4px 6px !important; }
.icon-act.lg svg { width: 19px; height: 19px; }

/* Checkboxes / radios use the teal accent (same as the switch). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-blue); }

/* Accent panels: keep whatever background .section has -- ONLY add an accent
   border + accent header text. danger = red, run/action = blue. */
.section.danger-zone { border: 2px solid #c00000; background: #fff5f5; }
.section.danger-zone > h3 { color: #c00000; }
.section.run-zone { border: 2px solid var(--brand-slate); }
.section.run-zone > h3 { color: var(--brand-slate); }

/* ======================================================
   NORMALIZE doc-btn-small TO MATCH my-button
   ====================================================== */

button.doc-btn-small {
  all: unset;                       /* kill global button rule */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #6c757d;
  color: #ffffff;

  min-height: 40px;
  padding: 8px 20px;

  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 3px;

  border-radius: 5px;
  cursor: pointer;
  box-sizing: border-box;
}

button.doc-btn-small:hover {
  background-color: #e0e0e0;
  color: #323F49;
}

/* primary variant */
button.doc-btn-small.btn-primary {
  background: var(--brand-orange);
  color: #ffffff;
}

#flask-terminal, #script-terminal {
  background-color: black;
  color: white;
  padding-left: 5px !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
  height: 400px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 12px;
  white-space: pre !important;
  word-break: normal !important;
  width: 100%;
  box-sizing: border-box;
}

.terminal-container {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.terminal-wrapper {
  flex: 1 0 48%;           /* Fixed basis width 48% */
  display: flex;
  flex-direction: column;
  min-width: 0;            /* Prevent flex overflow */
}

.terminal-box {
  background-color: black;
  color: white;
  padding: 10px;
  height: 400px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 13px;
  white-space: pre !important;
  word-break: normal !important;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;            /* Fix flex overflow issues */
}

/* Terminal line colours (bright, for the black box). Reusable via span classes. */
:root {
  --term-blue:   #4fc1ff;
  --term-green:  #5fd75f;
  --term-yellow: #ffd479;
  --term-red:    #ff6b6b;
}
.terminal-box .t-info { color: var(--term-blue);   font-weight: 600; }
.terminal-box .t-ok   { color: var(--term-green);  font-weight: 600; }
.terminal-box .t-cost { color: var(--term-yellow); font-weight: 700; }
.terminal-box .t-err  { color: var(--term-red);    font-weight: 600; }

/* ===============================
   ADMIN SECTION HEADERS (BLACK)
   =============================== */

main .section > h3 {
  background-color: #28353B;/* #1f1f1f*/
  color: #ffffff;
  padding: 10px 14px;
  margin: -16px -16px 14px -16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* SECTION FRAME */
.section {
  padding: 16px;
  border: 1px solid #f0e4d1;
  border-radius: 10px;
  background: var(--panel-bg);   /* warm orange panel; blue-grey cards sit on it */
  box-shadow: var(--card-shadow);
  overflow-x: auto;
  margin-bottom: 16px;           /* consistent spacing between stacked panels */
}

/* TABS (central component). Every page's tabs inherit these; change the
   --tab-* tokens above to restyle all tabs at once. */
.tabs{
  display:flex;
  gap:0;
  border-bottom:1px solid var(--tab-border);
  margin-bottom:12px;
}
.tabs .tab{
  padding:10px 18px;
  cursor:pointer;
  background:var(--tab-bg);
  border:1px solid var(--tab-border);
  border-bottom:none;
  border-radius:6px 6px 0 0;
  margin-right:4px;
  font-weight:600;
  font-size:14px;
  color:var(--tab-text);
  user-select:none;
}
.tabs .tab.active{
  background:var(--tab-active-bg);
  color:var(--tab-active);
  position:relative;
  top:1px;
}

/* Tab panels: only the active one shows. Pages give sibling panels the .tab-panel
   class and toggle .active to switch. */
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* Shared list cards (blue-grey, matches the logo). Any page using .sl-list /
   .sl-row gets the same look; pages with their own copy override it locally. */
.sl-list{display:flex;flex-direction:column;gap:8px;}
.sl-row{background:var(--card-bg);border:1px solid var(--card-border);border-radius:9px;overflow:hidden;box-shadow:var(--card-shadow);transition:box-shadow .15s,border-color .15s,background .15s;}
.sl-row:hover{border-color:var(--card-border-hover);background:var(--card-bg-hover);box-shadow:var(--card-shadow-hover);}
/* report file table (Content Studio > Reports): fixed columns, actions right */
.doc-table { table-layout: fixed; width: 100%; }
.doc-table .doc-col-name  { width: auto; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-table .doc-col-files { width: 230px; white-space: nowrap; }
.doc-table .doc-col-date  { width: 140px; white-space: nowrap; font-size: 12px; color: var(--brand-steel); }
.doc-table .doc-col-acts  { width: 210px; }
.doc-table .doc-col-mail  { width: 200px; font-size: 12px; color: var(--brand-steel); }
.doc-mail-to { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--brand-steel); }
.doc-actions { display: flex; align-items: center; gap: 6px; }
.doc-actions .btn-xs { width: 64px; text-align: center; }
.doc-actions .icon-btn svg { width: 18px; height: 18px; }
.doc-row-empty { padding: 24px; text-align: center; font-size: 14px; color: var(--brand-steel); }

/* compact one-line drop strip (icon + text side by side) */
.file-drop.compact { flex-direction: row; gap: 12px; padding: 12px 16px; }
.file-drop.compact svg { width: 22px; height: 22px; }
.sl-empty{padding:30px;text-align:center;color:#888;font-style:italic;}

/* BLACK SECTION HEADER (REUSE EXISTING STYLE) */
.section > h3 {
  background-color: #28353B;/* #1f1f1f*/
  color: #ffffff;
  padding: 10px 14px;
  margin: -16px -16px 14px -16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

:root {
    --popup-header-bg: #28353B;
    --popup-header-text: #fff;
}

.popup-box {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.popup-header {
    background: var(--popup-header-bg);
    color: var(--popup-header-text);
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 12px;
    margin: -20px -20px 16px -20px;
}

/* === STANDARD ADMIN INPUT STYLE === */

.admin-field {
    max-width: 420px;
    width: 100%;
}

.admin-field label {
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.admin-field input[type="text"],
.admin-field input[type="email"],
.admin-field input[type="password"],
.admin-field input[type="url"],
.admin-field input[type="number"],
.admin-field input[type="date"],
.admin-field input[type="time"],
.admin-field select,
.admin-field textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fafafa;
    box-sizing: border-box;
}
.admin-field + .admin-field { margin-top: 10px; }
.admin-field.admin-field-wide { max-width: none; }

/* ===== MULTI-SELECT DROPDOWN (central) -- a dropdown with a tick box per item.
   Use inside .admin-field:
     <div class="ui-multi">
       <select class="ui-multi-btn" onmousedown="(preventDefault + open menu)"><option>All</option></select>
       <div class="ui-multi-menu">
         <div class="ui-multi-actions"><a>Select all</a><a>Deselect all</a></div>
         <label><input type="checkbox"> Item</label> …
       </div>
     </div>
   The trigger is a real <select> (one option = the label), so its font, arrow
   and box are exactly those of every other dropdown; mousedown is cancelled so
   the browser list never opens. Open/close by toggling .open on .ui-multi-menu. */
.ui-multi { position: relative; width: 100%; }
.ui-multi-btn { cursor: pointer; }
/* fixed (placed under the trigger by the page JS on open), so a .section with
   overflow cannot clip it */
.ui-multi-menu {
    display: none; position: fixed; z-index: 1000; box-sizing: border-box;
    background: var(--card-bg); border: 1px solid var(--input-border); border-radius: 8px;
    box-shadow: var(--card-shadow-hover); padding: 6px; max-height: 320px; overflow-y: auto;
}
.ui-multi-menu.open { display: block; }
.ui-multi .ui-multi-menu label {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 8px;
    font-size: 14px; font-weight: 400; line-height: 1.3; border-radius: 6px; cursor: pointer;
}
.ui-multi-menu label input[type="checkbox"] { margin: 0; }
.ui-multi-menu label:hover { background: var(--card-bg-hover); }
/* pick list under a text field (To-Do category): opens with every choice, filters while typing */
.ui-multi-menu .ui-pick { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1.3; }
.ui-multi-menu .ui-pick:hover { background: var(--card-bg-hover); }
.ui-multi-menu .ui-pick.active { color: var(--brand-blue); font-weight: 700; }
.ui-multi-actions {
    display: flex; gap: 14px; padding: 4px 8px 8px; margin-bottom: 4px;
    border-bottom: 1px solid var(--table-border); font-size: 12px;
}
.ui-multi-actions a { cursor: pointer; color: var(--brand-blue); }

/* A disabled button that still explains itself: wrap it in .disabled-wrap and
   put the hover/click handler on the wrapper (a disabled button gets no mouse events). */
.disabled-wrap { display: inline-block; cursor: not-allowed; }
.disabled-wrap > button:disabled { pointer-events: none; }

/* A pill you can drag (e.g. a fill-in field dragged into a text field). */
.pill[draggable="true"] { cursor: grab; user-select: none; }
.pill[draggable="true"]:active { cursor: grabbing; }

/* Short fields side by side, so a long form fits a wide popup instead of
   scrolling off the screen. Wrap the fields in <div class="field-row">. */
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row + .field-row,
.field-row + .admin-field,
.admin-field + .field-row { margin-top: 10px; }
/* A box that wraps more rows (shown or hidden as one) keeps the same gap. */
.field-row + .field-group { margin-top: 10px; }
.field-row > .admin-field { flex: 1 1 150px; max-width: none; margin-top: 0; }
/* A table right under a row of fields needs air, same as between two rows. */
.field-row + .table-wrapper,
.admin-field + .table-wrapper,
.field-grid + .table-wrapper,
.actions-right + .table-wrapper,
.actions-right + .sl-list,
.field-grid + .field-grid { margin-top: 12px; }

/* even, aligned form grid: every field the same width, labels never wrap */
.field-grid { display: grid; gap: 12px 16px; margin-top: 12px; }
.field-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid > .admin-field { width: 100%; max-width: none; margin-top: 0;
    display: flex; flex-direction: column; }
.field-grid > .admin-field label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-grid.align-end { align-items: end; }
.field-grid > .admin-field > button { width: 100%; margin-top: 0; flex: 1 1 auto; }
.field-grid > .admin-field > textarea,
.field-grid > .admin-field > .drop-zone { flex: 1 1 auto; }
.field-grid.grow-first { grid-template-columns: 1fr auto; }
.field-grid > .admin-field.field-btn { width: auto; }
.field-grid > .admin-field.field-btn > button { width: auto; }
/* row that grows to fill the rest of the panel height */
.field-grid.fill { flex: 1 1 auto; align-items: stretch; }
.field-grid.fill > .admin-field { height: 100%; }

/* Collapsible group: a clickable header with a caret, count and a body that
   folds away. Same markup as the Costs page categories.
   <div class="cat"><div class="cat-head" onclick="..."><span class="cat-caret open">&#9656;</span>
   <span class="cat-name">Title</span><span class="cat-count">3</span></div>
   <div class="cat-body">...</div></div> */
.cat { margin-bottom: 6px; }
.cat-head {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 7px 8px; border: 1px solid var(--card-border); border-radius: 6px;
    background: var(--brand-mist); user-select: none;
}
.cat-caret { color: var(--brand-steel); font-size: 11px; transition: transform .12s; }
.cat-caret.open { transform: rotate(90deg); }
.cat-name {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    font-weight: 700; color: var(--brand-slate);
}
.cat-count {
    margin-left: auto; font-size: 11px; font-weight: 700; color: var(--brand-steel);
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 10px; padding: 1px 8px;
}
.cat-body { padding: 6px 2px 2px; }

/* Group heading inside a popup ("BANKING DETAILS"), same look as the
   sidebar / home category titles. */
.popup-subhead {
    margin: 16px 0 8px;
    padding-top: 12px;
    border-top: 1px solid var(--table-border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-steel);
}

/* ===== SYSTEM POPUP (CENTER, WHITE) ===== */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  background: #ffffff;
  color: #111827;
  padding: 20px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
  min-width: 320px;
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* optional variants */
.toast.error { color:#991b1b; }
.toast.warn  { color:#92400e; }

.ui-overlay {
    position: fixed;
    inset: 0;
    background: rgba(41,53,60,0.45);   /* slate tint, matches the in-progress popup */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300000;   /* MUST be higher than other popups */
}
/* the hidden attribute must beat display:flex for every overlay */
.ui-overlay[hidden] { display: none !important; }
.icon-btn[hidden] { display: none !important; }
/* the Beacon picture viewer must sit ABOVE every other overlay, incl. the enlarged
   preview, so zooming a slide image in enlarge mode shows it on top, not behind. */
#imgViewer { z-index: 300001; }

.ui-popup {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    min-width: 320px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    overflow: hidden;
}

/* Pull the first-child header div out so the dark beam spans the full
   width of the popup (admin_ui.js builds it as the first child without
   knowing about .ui-popup's 20px padding). */
.ui-popup > div:first-child {
    margin: -20px -20px 0 -20px !important;
    border-radius: 8px 8px 0 0;
}

.ui-popup-text{
    font-weight:400;
    margin-bottom:16px;
}
/* white space between the header beam and the message */
.ui-popup > .popup-header + .ui-popup-text{
    margin-top:20px;
}
/* same white space when a form field or field row comes right under the header */
.ui-popup > .popup-header + .admin-field,
.ui-popup > .popup-header + .field-row{
    margin-top:20px;
}

.ui-popup-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

/* ===== INFO POPUP (showInfo in admin_ui.js, texts in static/admin_instructions.json) ===== */
.ui-popup.info-pop { max-width: 520px; }
.info-body { padding: 18px 0 16px; max-height: 60vh; overflow-y: auto; font-size: 14px; }
.info-body .info-head { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.info-body .info-line { font-size: 14px; font-weight: 400; margin: 0 0 6px; line-height: 1.45; }
.info-body .info-gap  { height: 10px; }
.info-body code { font-size: 12px; }
/* page-level info button in the header beam (base_admin.html, block info_key) */
header .icon-btn.header-info { color: var(--header-text); margin-left: 8px; vertical-align: middle; }
header .icon-btn.header-info:hover { color: var(--brand-orange); }
header .icon-btn.header-info svg { width: 18px; height: 18px; }

/* ===== SIGNATURES & STAMPS (sign_stamp.js picker, signatures.html, phone signing) ===== */
.ui-popup.sign-pick { width: 640px; max-width: 94vw; }
.ui-popup.sign-pick > .popup-header + .field-grid { margin-top: 20px; }
.sign-pick-prev { height: 120px; display: flex; align-items: center; justify-content: center; margin-top: 8px; }
.sign-pick-prev img, .sign-thumb img, .sign-preview-lg img { max-height: 100%; max-width: 100%; }
.sign-thumb { height: 70px; width: 180px; display: flex; align-items: center; justify-content: center; }
.sign-preview-lg { height: 240px; display: flex; align-items: center; justify-content: center;
                   background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 6px; }
/* 16px stops the iPhone zooming in on the name / rank fields */
/* Phone signing card (Deliveries): every field on its own line, big boxes.
   16px text also stops the iPhone zooming in on the fields. */
.phone-sign .admin-field { margin-top: 14px; }
.phone-sign .admin-field label { font-size: 14px; }
.phone-sign .admin-field input[type="text"] { font-size: 16px; padding: 12px; min-height: 48px; }
.phone-sign .sign-pad { height: 260px; }
/* Landscape: use the full width, and make the signature box most of the screen high */
@media (orientation: landscape) {
    .phone-main:has(.phone-sign) { max-width: none; }
    .phone-sign .sign-pad { height: calc(100vh - 140px); min-height: 200px; }
}
.sign-pick-check { display: flex; align-items: center; gap: 10px; margin: 12px 0 16px; }
.sign-pad { width: 100%; height: 220px; display: block; touch-action: none;
            background: var(--card-bg); border: 1px dashed var(--brand-steel); border-radius: 6px; }

/* ===== SEARCH RESULT LIST =====
   Results under a search field: central .sl-list / .sl-row cards with
   .manual-row inside. Whole card is clickable; .active = keyboard choice. */
.search-list { margin-top: 12px; max-height: 480px; overflow-y: auto; }
.search-list[hidden] { display: none; }
.sl-row.clickable { cursor: pointer; }
.sl-row.active { border-color: var(--card-border-hover); background: var(--card-bg-hover); box-shadow: var(--card-shadow-hover); }
.search-type { flex: 0 0 72px; text-align: center; }

/* ===== TABLE WRAPPERS ===== */

table.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--body-bg);   /* same as page background */
    font-size: 12px;
    border-radius: 8px;
    overflow: hidden;
}

/* HEADER */
table.data-table thead th {
    background: var(--header-bg); /* beam color */
    color: #ffffff;
    font-weight: 700;
}

/* CELLS */
table.data-table th,
table.data-table td {
    border-right: 1px solid var(--table-border);
    border-bottom: 1px solid var(--table-border);
    color: var(--text-color);
    padding: 6px 8px;
    vertical-align: top;
}

/* REMOVE RIGHT BORDER LAST COLUMN */
table.data-table th:last-child,
table.data-table td:last-child {
    border-right: none;
}

/* REMOVE LEFT OUTER BORDER */
table.data-table th:first-child,
table.data-table td:first-child {
    border-left: none !important;
}

/* REMOVE BOTTOM OUTER BORDER */
table.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Fixed-layout table: columns keep the widths set by the col-* classes and
   long text is cut with "..." instead of stretching the table. */
table.data-table.fixed { table-layout: fixed; }
table.data-table .col-date { width: 120px; }
table.data-table .col-people { width: 280px; }
table.data-table .col-num { width: 70px; }
table.data-table.fixed td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "first item +N more" cell: the first item is cut, the +N more link always shows. */
.list-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.list-cell-first { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-link { flex: 0 0 auto; color: var(--brand-blue); font-weight: 700; cursor: pointer; white-space: nowrap; }
.more-link:hover { text-decoration: underline; }
.popup-list { margin: 14px 0 0; padding-left: 18px; max-height: 50vh; overflow-y: auto; }

/* Optional subtle row separator */
table.data-table tbody tr + tr td {
    border-top: 1px solid var(--table-border);
}

/* ===== TABLE WRAPPER ===== */

.table-wrapper {
    overflow-x: auto;
    width: 100%;
}

table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}

th, td {
    white-space: nowrap;
    padding: 6px 10px;
}

/* ===== PREVIEW TABLE ===== */

.preview-table {
    font-size: 12px;
}

.preview-table th,
.preview-table td {
    padding: 4px 6px;
    line-height: 1.2;
}

/* ============================================================================
   POST-IT WALL (Thoughts tab)
   A sticky note. Colour comes from the topic slot class .postit-c1 .. .postit-c8.
   ========================================================================== */
.postit {
    position: relative;
    background-color: var(--postit-1);
    /* faint paper grain/sheen so the colour reads like paper, not flat plastic */
    background-image:
        linear-gradient(160deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 34%),
        linear-gradient(0deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0) 20%);
    color: var(--postit-ink);
    padding: 12px 14px 14px;
    border-radius: 3px 3px 4px 3px;
    box-shadow: 0 8px 16px rgba(40, 53, 59, .24), 0 1px 2px rgba(40, 53, 59, .16);
    font-family: "Marker Felt", "Comic Sans MS", "Segoe Print", cursive;
}
/* colour from the topic slot (background-COLOR so the paper sheen image stays) */
.postit-c1 { background-color: var(--postit-1); }
.postit-c2 { background-color: var(--postit-2); }
.postit-c3 { background-color: var(--postit-3); }
.postit-c4 { background-color: var(--postit-4); }
.postit-c5 { background-color: var(--postit-5); }
.postit-c6 { background-color: var(--postit-6); }
.postit-c7 { background-color: var(--postit-7); }
.postit-c8 { background-color: var(--postit-8); }
/* ---- paper templates: 5 curled-corner + rotation looks, picked per note ---- */
.postit::after { content: ""; position: absolute; width: 30px; height: 30px; pointer-events: none; }
.postit.paper1 { transform: rotate(-1.7deg); }
.postit.paper1::after { right: -2px; bottom: -2px; border-radius: 0 0 6px 0;
    background: linear-gradient(315deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 55%); box-shadow: -5px -5px 9px rgba(0, 0, 0, .10); }
.postit.paper2 { transform: rotate(1.4deg); }
.postit.paper2::after { left: -2px; bottom: -2px; border-radius: 0 0 0 6px;
    background: linear-gradient(45deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 55%); box-shadow: 5px -5px 9px rgba(0, 0, 0, .10); }
.postit.paper3 { transform: rotate(-0.7deg); }
.postit.paper3::after { right: -2px; top: -2px; border-radius: 0 6px 0 0;
    background: linear-gradient(225deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0) 55%); box-shadow: -5px 5px 9px rgba(0, 0, 0, .09); }
.postit.paper4 { transform: rotate(2.2deg); }
.postit.paper4::after { right: -2px; bottom: -2px; width: 42px; height: 26px; border-radius: 0 0 9px 0;
    background: linear-gradient(320deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 60%); box-shadow: -6px -4px 10px rgba(0, 0, 0, .12); }
.postit.paper5 { transform: rotate(-2.4deg); }
.postit.paper5::after { left: -2px; top: -2px; border-radius: 6px 0 0 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0) 55%); box-shadow: 5px 5px 9px rgba(0, 0, 0, .09); }
/* a freshly added note: glows and shows a NEW tag until you drag it */
.postit.is-new { animation: postitNew 1.3s ease-in-out infinite alternate; }
@keyframes postitNew {
    from { box-shadow: 0 0 0 3px rgba(47, 111, 138, .35), 0 8px 16px rgba(40, 53, 59, .24); }
    to   { box-shadow: 0 0 0 4px rgba(47, 111, 138, .70), 0 12px 22px rgba(40, 53, 59, .30); } }
.postit-new { position: absolute; top: -9px; left: 10px; z-index: 5; font-family: Arial, sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #fff;
    background: var(--brand-blue); padding: 2px 8px; border-radius: 10px; box-shadow: 0 2px 5px rgba(40, 53, 59, .3); }
.postit-title { font-size: 15px; font-weight: 700; margin-bottom: 5px; line-height: 1.25; }
.postit-text  { font-size: 13px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
/* editable variants (review step): transparent fields on the note itself */
.postit input.postit-title, .postit textarea.postit-text {
    width: 100%; background: transparent; border: none; color: var(--postit-ink);
    font-family: inherit; box-sizing: border-box; padding: 0; }
.postit input.postit-title { font-weight: 700; font-size: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, .15); padding-bottom: 3px; margin-bottom: 0; }
.postit textarea.postit-text { font-size: 13px; min-height: 80px; resize: vertical; margin-top: 6px; }
.postit input.postit-title:focus, .postit textarea.postit-text:focus { outline: none; }
.postit-foot  { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.postit-topic { font-size: 11px; font-family: Arial, sans-serif; padding: 2px 6px; border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, .18); background: rgba(255, 255, 255, .35); color: var(--postit-ink); }
.postit-del   { margin-left: auto; cursor: pointer; color: rgba(0, 0, 0, .45); background: none; border: none;
    font-family: Arial, sans-serif; line-height: 1; padding: 0; width: auto; min-width: 0; }
.postit-del:hover { color: var(--danger); }
/* a small solid colour chip for the topic dropdown preview in the review step */
.pt-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .18); vertical-align: middle; }

/* THE WALL: a free-placement board. Notes are dropped anywhere and dragged to
   any position (grouping comes later). */
.wall { position: relative; overflow: hidden; background: var(--wall-bg);
    border-radius: 12px; box-shadow: inset 0 2px 10px rgba(40, 53, 59, .12); height: 640px;
    cursor: grab; touch-action: none; }
.wall.panning { cursor: grabbing; }
.wall-canvas { position: absolute; top: 0; left: 0; width: 2200px; height: 1500px;
    transform-origin: 0 0; }               /* pan + zoom via transform */
.wall .postit { position: absolute; width: 194px; cursor: grab; user-select: none;
    transition: box-shadow .12s; }   /* rotation comes from the .paper1..5 template */
.wall .postit.dragging { cursor: grabbing; z-index: 50; opacity: .96;
    box-shadow: 0 18px 32px rgba(40, 53, 59, .36); }
.wall .postit .postit-text { max-height: 150px; overflow: auto; }
.wall-empty { position: absolute; top: 22px; left: 22px; font-family: Arial, sans-serif;
    font-size: 13px; color: var(--brand-steel); font-style: italic; }
/* wall controls: a row ABOVE the board in normal view; floats top-right when the
   wrapper goes true full screen (Fullscreen API, no page shell). */
#wallFsWrap { position: relative; }
.wall-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
/* kill the global button margin-top (and any stray margin) so nothing sits lower */
.wall-controls > * { margin: 0; align-self: center; }
/* every control in the row is the SAME 32px-tall, border-box pill, vertically centred */
.wall-controls .count, .wall-zoom, .wall-ctrl-btn, .wall-dim-wrap {
    height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; }
.wall-select { height: 32px; box-sizing: border-box; }   /* native select: height only, no flex */
.wall-controls .count { font-size: 12px; color: #666; white-space: nowrap; padding: 0 4px; }
.wall-hint { font-size: 12px; color: #888; }
.wall-zoom { justify-content: center; font-family: Arial, sans-serif; font-size: 12px; font-weight: 700;
    color: var(--brand-slate); background: rgba(255, 255, 255, .9); border: 1px solid var(--input-border);
    border-radius: 16px; padding: 0 12px; box-shadow: 0 1px 3px rgba(40, 53, 59, .12);
    pointer-events: none; min-width: 52px; text-align: center; }
.wall-ctrl-btn { gap: 6px; padding: 0 12px;
    border-radius: 16px; border: 1px solid var(--input-border); background: var(--card-bg); color: var(--brand-slate);
    font-family: Arial, sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; width: auto; min-width: 0;
    letter-spacing: 0; box-shadow: 0 1px 3px rgba(40, 53, 59, .12); }
.wall-ctrl-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.wall-ctrl-btn svg { display: block; }
.wall-ctrl-btn .ic-close { display: none; }
.wall-ctrl-btn.danger-ghost:hover { border-color: var(--danger); color: var(--danger); }
.wall-ctrl-btn.active { border-color: var(--brand-blue); color: var(--brand-blue);
    background: var(--card-bg-hover); box-shadow: inset 0 0 0 1px var(--brand-blue); }
/* the wall picker (which board you are on) */
.wall-select { height: 32px; padding: 0 26px 0 12px; font-size: 12px; font-weight: 600;
    max-width: 190px; }

/* a labelled cluster: a playful box drawn behind a set of notes. The box itself is
   click-through (so notes and panning still work); only its label/delete take clicks. */
.wall-cluster { position: absolute; box-sizing: border-box; pointer-events: none;
    border: 2px dashed var(--brand-blue); border-radius: 16px; background: rgba(47, 111, 138, .06); }
.wall-cluster-label { position: absolute; top: -13px; left: 14px; z-index: 60;
    pointer-events: auto; cursor: pointer; font-family: Arial, sans-serif; font-size: 12px;
    font-weight: 700; color: #fff; background: var(--brand-blue); padding: 3px 10px;
    border-radius: 12px; box-shadow: 0 2px 6px rgba(40, 53, 59, .28);
    max-width: 72%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-cluster-label:hover { background: var(--brand-blue-hover); }
.wall-cluster-del { position: absolute; top: -12px; right: 8px; z-index: 60;
    pointer-events: auto; cursor: pointer; width: 22px; height: 22px; padding: 0;
    display: flex; align-items: center; justify-content: center; border: none;
    border-radius: 50%; background: var(--card-bg); color: var(--danger);
    box-shadow: 0 2px 6px rgba(40, 53, 59, .24); }
.wall-cluster-del:hover { color: var(--danger-hover); }
.wall-cluster-del svg { width: 13px; height: 13px; display: block; }

/* drawing a cluster box */
.wall.cluster-draw { cursor: crosshair; }
.wall-marquee { position: absolute; z-index: 70; pointer-events: none; border-radius: 10px;
    border: 2px dashed var(--brand-blue); background: rgba(47, 111, 138, .10); }

/* generated house-style background: on the CANVAS so it pans + zooms with the notes
   (the canvas is the wall); a dim veil is layered in via inline background-image. */
.wall-canvas.has-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* dim the board while a background is being painted */
.wall.wall-busy { opacity: .6; pointer-events: none; }
/* background dim slider in the controls */
.wall-dim-wrap { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
    border-radius: 16px; border: 1px solid var(--input-border); background: var(--card-bg);
    color: var(--brand-slate); box-shadow: 0 1px 3px rgba(40, 53, 59, .12); }
.wall-dim-wrap svg { display: block; }
.wall-dim { width: 84px; accent-color: var(--brand-blue); cursor: pointer; }

/* DEPOSITORY: every note across all walls */
.dep-popup { max-width: 620px; width: 94%; max-height: 82vh; display: flex; flex-direction: column; }
.dep-popup .popup-header { position: relative; }
.dep-x { position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: #fff; cursor: pointer; opacity: .85; }
.dep-x:hover { opacity: 1; }
.dep-hint { padding: 12px 16px 4px; font-size: 12px; color: var(--brand-steel); }
.dep-list { padding: 8px 16px 16px; overflow-y: auto; }
.dep-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px;
    border-bottom: 1px solid var(--divider, #eee); }
.dep-row:last-child { border-bottom: none; }
.dep-swatch { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .18); }
.dep-main { flex: 1 1 auto; min-width: 0; }
.dep-title { font-size: 14px; font-weight: 700; color: var(--brand-slate); }
.dep-text { font-size: 12px; color: #555; margin-top: 2px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dep-walls { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.dep-chip { font-size: 11px; font-family: Arial, sans-serif; padding: 2px 8px; border-radius: 10px;
    background: var(--card-bg-hover); color: var(--brand-slate); border: 1px solid var(--input-border); }
.dep-chip.cur { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.dep-chip.none { color: #999; font-style: italic; }
.dep-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.dep-actions .wall-ctrl-btn[disabled] { opacity: .5; cursor: default; }
.dep-del { cursor: pointer; }
/* full screen */
#wallFsWrap:fullscreen, #wallFsWrap:-webkit-full-screen {
    width: 100vw; height: 100vh; background: var(--wall-bg); }
#wallFsWrap:fullscreen .wall, #wallFsWrap:-webkit-full-screen .wall {
    height: 100vh; border-radius: 0; }
#wallFsWrap:fullscreen .wall-controls, #wallFsWrap:-webkit-full-screen .wall-controls {
    position: fixed; top: 12px; right: 14px; margin: 0; z-index: 20; width: auto; flex-wrap: nowrap;
    background: rgba(255, 255, 255, .7); border-radius: 22px; padding: 6px 8px;
    box-shadow: 0 4px 14px rgba(40, 53, 59, .22); }
#wallFsWrap:fullscreen .wall-hint, #wallFsWrap:-webkit-full-screen .wall-hint,
#wallFsWrap:fullscreen .wall-controls > span[style*="flex"], #wallFsWrap:-webkit-full-screen .wall-controls > span[style*="flex"] { display: none; }
#wallFsWrap:fullscreen .wall-ctrl-btn .ic-expand, #wallFsWrap:-webkit-full-screen .wall-ctrl-btn .ic-expand { display: none; }
#wallFsWrap:fullscreen .wall-ctrl-btn .ic-close, #wallFsWrap:-webkit-full-screen .wall-ctrl-btn .ic-close { display: block; }

/* wall-mode chat answer: a BLUE sticky note. The PAPER is tilted (via a rotated
   backing layer) while the text stays level and readable; a curled bottom-right
   corner and a handwritten header sell the Post-it. */
.bi-turn-wall { max-width: 100%; }      /* wall reply spans the full chat width */
.bi-msg-postit {
    position: relative;
    flex: 1;                            /* WIDE: fill the chat like a normal answer */
    min-width: 0;
    color: var(--postit-ink);
    padding: 18px 24px 22px;
    isolation: isolate;                 /* own stacking context for the paper layer */
}
.bi-msg-postit > * { position: relative; z-index: 1; }   /* text rides above the paper, level */
.bi-msg-postit::before {                /* THE PAPER: blue, slightly tilted, lifted */
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background: var(--postit-3);
    border-radius: 2px;
    transform: rotate(-0.7deg);         /* gentle angle for a wide sheet */
    box-shadow: 0 1px 1px rgba(40, 53, 59, .18),
                0 12px 22px rgba(40, 53, 59, .28),
                0 20px 30px rgba(40, 53, 59, .12);
}
.bi-msg-postit::after {                 /* curled / folded bottom-right corner */
    content: "";
    position: absolute; z-index: 0; right: 4px; bottom: -2px;
    border-width: 0 0 26px 26px; border-style: solid;
    border-color: transparent transparent rgba(255, 255, 255, .55) transparent;
    transform: rotate(-0.7deg);
    filter: drop-shadow(-2px -2px 3px rgba(0, 0, 0, .20));
}
/* handwritten header; body stays in the normal readable font */
.bi-msg-postit .bi-ai-label {
    color: rgba(0, 0, 0, .6);
    font-family: "Marker Felt", "Bradley Hand", "Comic Sans MS", "Segoe Print", cursive;
    font-size: 14px; letter-spacing: .3px; text-transform: none;
}
.bi-msg-postit .bi-wall-badge { background: rgba(0, 0, 0, .12); color: var(--brand-slate); }
.bi-msg-postit .bi-ai-text { color: var(--postit-ink); font-size: 14px; line-height: 1.55; }
.bi-msg-postit .bi-msg-foot { border-top-color: rgba(0, 0, 0, .14); }
.bi-msg-postit .bi-msg-meta { color: rgba(0, 0, 0, .48); }
.bi-msg-postit .bi-copy { color: rgba(0, 0, 0, .62) !important; }
/* deliverables inside a note stay on their own light card, tinted to match */
.bi-msg-postit .bi-deliverable { background: rgba(255, 255, 255, .55); border-color: rgba(0, 0, 0, .12); }
.bi-wall-badge { display: inline-flex; align-items: center; gap: 6px; font-family: Arial, sans-serif;
    font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: var(--brand-slate); background: rgba(0, 0, 0, .08); padding: 2px 8px; border-radius: 10px; }

/* Copyable deliverable card: a fenced item (post/email/bio) shown as its own
   copy-me card. Central + reusable (Beacon chat, and the portal later). */
.copy-card {
    position: relative; margin: 9px 0; padding: 12px 42px 12px 14px;
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-left: 3px solid var(--brand-blue); border-radius: 8px;
    font-size: 13.5px; line-height: 1.6; color: var(--brand-slate);
    white-space: pre-wrap; word-break: break-word;
}
.copy-card-copy { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; }

/* voice recorder button (Thoughts capture) */
.rec-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
    border: 1px solid var(--input-border); border-radius: 8px; background: var(--card-bg);
    color: var(--brand-slate); font-weight: 600; cursor: pointer; width: auto; min-width: 0; letter-spacing: 0; }
.rec-btn:hover { border-color: var(--brand-blue); }
.rec-btn.recording { border-color: var(--danger); color: var(--danger); background: #fdeaea; }
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--danger); }
.rec-btn.recording .rec-dot { animation: recpulse 1s infinite; }
@keyframes recpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ============================================================
   BEACON FOOTER CHAT + CHAT ICON BUBBLE  (added with permission)
   ONLY the docked footer chat widget lives here. The Beacon PAGE
   itself uses existing central classes. Tokens only, no hardcoding.
   ============================================================ */
#bcf-widget { position: fixed; right: 20px; bottom: 20px; z-index: 200000; }

#bcf-bubble { width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--brand-blue); color: var(--header-text); box-shadow: var(--card-shadow-hover);
    display: flex; align-items: center; justify-content: center; }
#bcf-bubble:hover { background: var(--brand-blue-hover); }
#bcf-bubble svg { width: 24px; height: 24px; }

#bcf-panel[hidden] { display: none !important; }
#bcf-panel { position: absolute; right: 0; bottom: 66px; width: 340px; height: 460px;
    max-height: calc(100vh - 120px); display: flex; flex-direction: column;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px;
    overflow: hidden; box-shadow: var(--card-shadow-hover); }

.bcf-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px;
    background: var(--popup-header-bg); color: var(--popup-header-text); }
.bcf-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 12px; letter-spacing: .5px; }
.bcf-spacer { margin-left: auto; }
.bcf-icon { background: none; border: none; color: var(--popup-header-text); cursor: pointer;
    padding: 4px; display: inline-flex; width: auto; min-width: 0; min-height: 0; margin: 0; flex: 0 0 auto; }
.bcf-icon:hover { color: var(--brand-mist); }
.bcf-icon svg { width: 16px; height: 16px; }
.bcf-close-btn svg { width: 14px; height: 14px; }

.bcf-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.bcf-msg { max-width: 88%; display: flex; }
.bcf-msg.user { align-self: flex-end; }
.bcf-msg.bot { align-self: flex-start; }
.bcf-bubble { padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.45; }
.bcf-msg.user .bcf-bubble { background: var(--brand-blue); color: var(--header-text); }
.bcf-msg.bot .bcf-bubble { background: var(--brand-mist); color: var(--text-color); }

.bcf-input { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--table-border); background: var(--body-bg); }
.bcf-input textarea { flex: 1; resize: none; max-height: 96px; padding: 8px 10px;
    border: 1px solid var(--input-border); border-radius: 8px; font-family: inherit; font-size: 13px; line-height: 1.4; }
.bcf-send { flex: 0 0 auto; width: 38px; border: none; border-radius: 8px; background: var(--brand-blue);
    color: var(--header-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bcf-send:hover { background: var(--brand-blue-hover); }
.bcf-send svg { width: 16px; height: 16px; }

@media (max-width: 480px) { #bcf-panel { width: calc(100vw - 40px); } }

/* ============================================================
   BEACON PAGE: chat (left, reversed) + document (right, white).
   Tokens only, no hardcoded colours.
   ============================================================ */
/* layout: two equal columns, same size, filling the page height */
.beacon-split { display: flex; gap: 16px; align-items: stretch;
    height: calc(100vh - var(--header-beam-height) - 210px); min-height: 460px; }
.beacon-col { flex: 1 1 50%; min-width: 0; display: flex; }
.beacon-col > .section { flex: 1; margin: 0; display: flex; flex-direction: column; overflow: hidden; }

/* toolbar: project/chat on the left, core/model/export on the right */
.beacon-toolbar-section { border: none; background: transparent; box-shadow: none; padding: 6px 0; margin-bottom: 8px; }
.beacon-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.beacon-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* buttons align with the dropdowns: same 36px height, no top margin, content-width */
.beacon-toolbar button { width: auto; min-width: 0; height: 36px; min-height: 36px; margin-top: 0; padding: 0 18px; letter-spacing: .5px; }
.beacon-toolbar .ui-select { margin-top: 0; }
.beacon-core-label { font-size: 10px; }

/* right panel = white document with proper typography */
.section.beacon-doc { background: var(--card-bg); }
.beacon-doc-body { flex: 1; min-height: 0; overflow-y: auto; outline: none; }
.beacon-doc-body:focus, .beacon-doc-body:focus-within { outline: none; border: none; box-shadow: none; }
.beacon-doc h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.beacon-doc .beacon-doc-sub { color: var(--brand-steel); font-size: 13px; margin: 0 0 18px; }
.beacon-doc h2 { font-size: 15px; font-weight: 700; margin: 18px 0 6px; }
.beacon-doc p { font-size: 13px; line-height: 1.6; margin: 0 0 12px; }
.beacon-doc ul { margin: 0 0 12px; padding-left: 20px; }
.beacon-doc li { font-size: 12px; line-height: 1.6; margin: 0 0 4px; }
.beacon-doc-empty { color: var(--placeholder-color); font-size: 13px; text-align: center; margin-top: 36px; }

/* left panel = reversed chat: input on TOP, newest message on top, scroll down */
.beacon-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.beacon-chat-input { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 14px; }
.beacon-chat-input textarea { flex: 1; resize: none; min-height: 42px; height: 42px; max-height: 240px;
    overflow-y: auto; padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 8px;
    font-family: inherit; font-size: 12px; line-height: 1.4; }
/* small Send button, aligned with the input (beats the global button{width} rule) */
.beacon-chat-input button { width: auto; min-width: 0; min-height: 0; height: 32px; margin: 0; padding: 0 12px; font-size: 12px; }
/* uploaded reference .txt files shown as chips above the chat */
.beacon-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.beacon-attachments:empty { display: none; }
.beacon-attach { display: inline-flex; align-items: center; gap: 6px; }
.beacon-attach button { width: auto; min-width: 0; min-height: 0; height: auto; margin: 0;
    padding: 0; background: none; color: inherit; cursor: pointer; line-height: 1; }
.beacon-chat-log { display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; overflow-y: auto; }
/* each message = avatar icon + bubble, like the BI chat */
.beacon-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 88%; }
.beacon-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.beacon-msg.bot { align-self: flex-start; }
.beacon-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--header-text);
    font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.beacon-avatar.bot { background: var(--brand-slate); }
.beacon-avatar.user { background: var(--brand-steel); }
.beacon-avatar svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.beacon-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.beacon-bubble { padding: 10px 13px; font-size: 13.5px; line-height: 1.6; position: relative; }
.beacon-msg.user .beacon-bubble { background: var(--brand-blue); color: var(--header-text); border-radius: 14px 14px 4px 14px; }
.beacon-msg.bot .beacon-bubble { background: var(--brand-mist); color: var(--text-color); border-radius: 4px 14px 14px 14px; }
.beacon-msg-hide { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; min-width: 0; min-height: 0; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--brand-steel); color: #fff; border: 1px solid var(--body-bg); border-radius: 50%; font-size: 9px; font-weight: bold; line-height: 1; letter-spacing: 0; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.beacon-msg-hide svg { width: 8px; height: 8px; }
.beacon-msg-copy { position: absolute; bottom: -6px; right: -6px; width: 14px; height: 14px; min-width: 0; min-height: 0; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--brand-steel); color: #fff; border: 1px solid var(--body-bg); border-radius: 50%; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.beacon-msg-copy:hover { background: var(--brand-slate); }
.beacon-msg-copy svg { width: 8px; height: 8px; }
/* request-intent + model pills on the chat bubbles */
.bc-pillrow { display: flex; flex-wrap: wrap; gap: 5px; }
.bc-pillrow-top { margin-bottom: 6px; }        /* intent pill sits above the question */
.bc-pillrow-bottom { margin-top: 8px; }        /* model pill sits below the answer */
.bc-pill { display: inline-block; font-size: 10px; font-weight: 600; padding: 0 6px; border-radius: 8px; letter-spacing: .2px; }
.bc-pill-intent { background: var(--brand-steel); color: #fff; }
.bc-pill-model { background: var(--brand-grey); color: #fff; }
.beacon-msg-hide:hover { background: var(--brand-slate); }
.beacon-msg.msg-hidden .beacon-bubble { font-size: 0; }
.beacon-msg.msg-hidden .beacon-bubble::after { content: "hidden"; font-size: 12px; font-style: italic; opacity: .6; }
.beacon-bubble strong { font-weight: 700; }
.beacon-bubble code { font-family: monospace; font-size: 12px; }
/* ASK-FIRST CORE picker (shown inside a bot bubble) */
.bc-corepick { display: flex; flex-direction: column; gap: 6px; }
.bc-corepick-h { font-size: 12px; font-weight: 600; }
.bc-corepick-opt { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; }
.bc-corepick-opt input { margin: 0; flex: 0 0 auto; }
.bc-corepick-kw { margin-left: 6px; font-size: 12px; font-style: italic; opacity: .6; }
.bc-corepick-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.bc-corepick-ack { font-size: 12px; font-style: italic; opacity: .7; }
.beacon-set-ask { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 10px; cursor: pointer; }
.beacon-set-ask input { margin: 0; flex: 0 0 auto; }
/* "Beacon is thinking" bouncing dots */
.beacon-typing { display: inline-flex; gap: 4px; align-items: center; }
.beacon-typing-label { margin-left: 8px; font-size: 12px; font-style: italic; opacity: .65; }
.beacon-typing span { width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    opacity: .3; animation: beacon-blink 1.2s infinite; }
.beacon-typing span:nth-child(2) { animation-delay: .2s; }
.beacon-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes beacon-blink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); } }

/* Beacon: organize projects (drag-and-drop overlay) */
#bcOrgOverlay[hidden] { display: none !important; }
/* below the shared prompt/confirm popups (z 200000) so they open ON TOP */
#bcOrgOverlay { z-index: 190000; }
.beacon-org { background: var(--card-bg); border-radius: 10px; width: min(560px, 92vw);
    max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--card-shadow-hover); }
.beacon-org-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: var(--popup-header-bg); color: var(--popup-header-text); }
.beacon-org-title { flex: 1; font-weight: 700; letter-spacing: 1px; font-size: 13px; text-transform: uppercase; }
.beacon-org-head .icon-btn { color: var(--popup-header-text); }
.beacon-org-body { display: flex; gap: 0; padding: 0; overflow: hidden; }
.beacon-org-left { flex: 0 0 170px; display: flex; flex-direction: column; border-right: 1px solid var(--table-border); }
.beacon-org-actions { display: flex; gap: 6px; padding: 8px 8px 4px; }
.beacon-org-topics { padding: 4px 8px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; max-height: 60vh; }
.beacon-org-chats { flex: 1; padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; max-height: 66vh; }
.beacon-org-trash { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 8px 8px;
    padding: 7px; border: 1px dashed var(--brand-steel); border-radius: 8px; color: var(--danger); font-size: 11px; font-weight: 600; }
.beacon-org-trash svg { width: 14px; height: 14px; }
.beacon-org-trash.dragover { background: var(--danger); color: var(--header-text); border-style: solid; }
/* rows reuse the central .sl-row look (same as lead gen); these add only layout */
.beacon-topic { display: flex; align-items: center; gap: 6px; padding: 9px 12px; font-size: 13px; font-weight: 600; }
.beacon-topic .beacon-topic-name { flex: 1; }
.beacon-topic.dragover { border-color: var(--brand-blue); background: var(--card-bg-hover); }
.beacon-topic.draggable { cursor: grab; }
.beacon-topic.dragging { opacity: .45; }
.beacon-chat-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13px; cursor: grab; }
.beacon-chat-row.dragging { opacity: .45; }
.beacon-chat-row .beacon-chat-name { flex: 1; font-weight: 600; }
.beacon-chat-row .beacon-chat-tag { font-size: 10px; color: var(--brand-steel); }

/* Beacon settings popup (instructions + action->model routing) */
#bcSetOverlay[hidden] { display: none !important; }
#bcSetOverlay { z-index: 190000; }
.beacon-set-body { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; max-height: 74vh; }
.beacon-set-label { font-weight: 600; font-size: 13px; }
.beacon-set-body textarea { width: 100%; min-height: 90px; padding: 10px; border: 1px solid var(--input-border);
    border-radius: 8px; font-family: inherit; font-size: 13px; line-height: 1.5; box-sizing: border-box; }
.beacon-set-routing { display: flex; flex-direction: column; gap: 8px; }
.beacon-set-row { display: flex; align-items: center; gap: 10px; }
.beacon-set-action { flex: 1; font-size: 14px; }

/* Beacon settings: all routing dropdowns the same width */
.beacon-set-row select, .beacon-set-row .ui-select { flex: 0 0 190px; width: 190px; }
.beacon-set-row input.beacon-set-action { border: 1px solid var(--input-border); border-radius: 8px;
    padding: 6px 10px; font-family: inherit; box-sizing: border-box; }
.beacon-set-row .icon-btn { flex: 0 0 auto; }

/* action-bar buttons size to their label on one line, so they never wrap to
   different heights (beats the global button{width:160px}) */
.actions-right button { width: auto; white-space: nowrap; }

/* Beacon image generator */
.beacon-gen-img { max-width: 100%; border-radius: 8px; display: block; }
.beacon-gen-wrap { position: relative; display: inline-block; margin-top: 12px; }
.beacon-gen-close { position: absolute; top: 8px; right: 8px; background: var(--card-bg); border-radius: 50%; box-shadow: var(--card-shadow); }
.beacon-gen-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.beacon-aspect { display: flex; gap: 8px; }
.beacon-aspect .icon-btn { padding: 6px; }
.beacon-aspect .icon-btn svg { width: 26px; height: 26px; }
.beacon-aspect .icon-btn.active { color: var(--brand-blue); background: var(--brand-mist); border-radius: 6px; }
.beacon-img-acts .icon-btn svg { width: 20px; height: 20px; }
.beacon-seg { display: flex; gap: 4px; }
/* gallery rows (reuse central .sl-row look; these add layout) */
.beacon-img-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; }
.beacon-thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: var(--brand-mist); }
.beacon-img-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.beacon-img-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beacon-pill { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: var(--brand-blue); color: #fff; flex: 0 0 auto; }
.beacon-img-acts { display: flex; gap: 4px; flex: 0 0 auto; }
.beacon-img-body { padding: 0 10px 10px; font-size: 12px; color: var(--text-color); }
.beacon-img-regen { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.beacon-img-regen select { flex: 0 0 110px; }
/* image viewer */
.beacon-viewer { position: relative; }
.beacon-view-img { max-width: 90vw; max-height: 85vh; border-radius: 8px; display: block; background: var(--card-bg); }
.beacon-viewer-close { position: absolute; top: 8px; right: 8px; background: var(--card-bg); border-radius: 50%; box-shadow: var(--card-shadow); }

/* Beacon preview: subtle slide divider with number + template type */
.bc-slide-divider { display: flex; align-items: center; gap: 10px; margin: 24px 0 6px; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--brand-steel); text-transform: uppercase; user-select: none; }
.bc-slide-divider::before, .bc-slide-divider::after { content: ''; flex: 1; height: 1px; background: var(--table-border); }
/* manual slide controls: drag handle to reorder, trash to delete (Beacon never does these) */
.bc-sl-grip { display: inline-flex; align-items: center; color: var(--brand-steel); cursor: grab; opacity: .55; }
.bc-sl-grip svg { width: 14px; height: 14px; }
.bc-slide-divider[draggable="true"]:hover .bc-sl-grip { opacity: 1; }
.bc-sl-del { padding: 2px; }
.bc-sl-del svg { width: 14px; height: 14px; }
.bc-slide-divider.bc-sl-dragging { opacity: .4; }
.bc-slide-divider.bc-sl-dropto { outline: 2px dashed var(--brand-blue); outline-offset: 3px; }
/* format bar in the expanded preview (bold/italic/headers/bullets/colour) */
.bc-fmt-bar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--table-border); background: transparent; }
.bc-fmt-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 8px; border: none; background: none; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--brand-steel); line-height: 1; }
.bc-fmt-btn:hover { background: var(--brand-mist); color: var(--brand-blue); }
.bc-fmt-btn svg { width: 16px; height: 16px; }
.bc-fmt-sep { width: 1px; height: 18px; background: var(--table-border); margin: 0 5px; }
.bc-fmt-color { position: relative; }
.bc-fmt-a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; text-decoration-color: var(--brand-blue); }
.bc-fmt-color input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; padding: 0; margin: 0; cursor: pointer; }
/* branch offer panel (inside a Beacon reply): Yes/No to start a new chat branch */
.bc-branch-offer { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--table-border); border-radius: 8px; background: var(--brand-mist); }
.bc-branch-h { font-size: 12px; color: var(--brand-steel); margin-bottom: 8px; }
.bc-branch-btns { display: flex; gap: 8px; }

/* Beacon preview: inline image blocks (generate/regenerate, linked to the export) */
.bc-imgblock { display: flex; gap: 10px; align-items: stretch; border: 1px solid var(--table-border); border-radius: 8px; padding: 8px; margin: 10px 0; background: var(--body-bg); }
.bc-imgblock-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bc-imgblock-row { display: flex; align-items: center; gap: 8px; }
.bc-imgblock-tag { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--brand-steel); }
.bc-imgblock-concept { min-width: 0; font-size: 12px; font-style: italic; outline: none; }
.bc-imgblock-btns { display: flex; gap: 6px; margin-top: auto; }
.bc-imgblock-gen { flex: 0 0 auto; }
.bc-imgblock-img { flex: 0 0 auto; width: 120px; max-height: 120px; object-fit: contain; border-radius: 6px; margin: 0; display: block; cursor: zoom-in; }
.bc-nav .btn-xs { flex: 0 0 auto; }
.bc-nav .ui-select { flex: 1 1 auto; min-width: 0; height: 24px; font-size: 11px; padding: 0 26px 0 8px; border-radius: 4px; background-position: right 8px center; }
/* proposed-change tags in the document preview (click one to accept it) */
.bc-mark { cursor: pointer; border-radius: 3px; padding: 0 2px; }
.bc-mark:hover { outline: 1px solid currentColor; }
.bc-add  { color: #1a7f37; }                                 /* green  - proposed addition */
.bc-chg  { color: var(--brand-blue); }                       /* blue   - change to original */
.bc-del  { color: #b42318; text-decoration: line-through; }  /* red    - deletion (still shown) */
.bc-urg  { color: var(--brand-orange); font-weight: 600; }   /* orange - urgent */
.bc-urg2 { color: #d21f1f; font-weight: 700; }               /* red    - high urgency */
.bc-note { color: #1a7f37; font-style: italic; }             /* green  - bracketed proposed note */
.bc-tools { display: block; margin-top: 3px; }
.bc-acc, .bc-rej { width: auto; min-width: 0; min-height: 0; margin: 0 8px 0 0; padding: 1px 6px; background: none; border: 1px solid currentColor; border-radius: 4px; box-shadow: none; font-size: 12px; font-weight: bold; letter-spacing: 0; line-height: 1.2; cursor: pointer; display: inline-block; vertical-align: middle; }
.bc-acc { color: #1a7f37; }   /* green check - accept */
.bc-rej { color: #b42318; }   /* red x - reject */
.bc-acc:hover { background: #1a7f37; color: #fff; }
.bc-rej:hover { background: #b42318; color: #fff; }
/* footer mini-chat: space the structured lines/bullets */
.bcf-bubble div { margin: 0 0 4px; }
.bcf-bubble div:last-child { margin-bottom: 0; }
/* snapshots popup */
.bc-snap-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--table-border); }
.bc-snap-lbl { flex: 1 1 auto; font-size: 12px; }
.bc-snap-row:last-child { border-bottom: none; }
.bc-snap-lbl { flex: 1; min-width: 0; font-size: 12px; }
/* image picker: 4-wide grid, scrollable, newest first */
.bc-picker { background: var(--card-bg); border-radius: 10px; width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.bc-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; overflow-y: auto; }
.bc-pick-cell { position: relative; cursor: pointer; }
.bc-pick-thumb { width: 100%; height: auto; object-fit: contain; border-radius: 6px; border: 2px solid transparent; background: var(--brand-mist); display: block; }
.bc-pick-cell:hover .bc-pick-thumb { border-color: var(--brand-blue); }
.bc-pick-badge { position: absolute; top: 5px; left: 5px; background: var(--brand-blue); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 8px; }

/* Beacon settings: the two columns match and their content starts at one height */
.beacon-split-auto { height: auto; min-height: 0; }
.beacon-set-intro { min-height: 34px; margin-bottom: 12px; }
/* slide-styles table stays inside its column and wraps long token lists */
.beacon-set-table { table-layout: fixed; }
.beacon-set-table th:first-child, .beacon-set-table td:first-child { width: 34%; }
.beacon-set-table td { white-space: normal; word-break: break-word; }
.beacon-set-table td input { width: 100%; box-sizing: border-box; border: 1px solid var(--input-border);
    border-radius: 6px; padding: 4px 6px; font-family: inherit; font-size: 12px; }
.beacon-set-table .bc-cell { display: flex; gap: 6px; align-items: center; }
.beacon-set-table .bc-cell input { flex: 1; width: auto; }

/* organize popup: highlight the active chat */
.beacon-chat-row.active { border-color: var(--brand-blue); background: var(--brand-mist); }

/* ===== FILE DROP ZONE (central) -- drag-and-drop / click upload target.
   Use: <div class="file-drop" onclick=... ondrop=...>. Add class .drag on
   dragover, remove on dragleave/drop. Colours come from tokens only. */
.file-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; padding: 34px 20px; cursor: pointer;
    border: 2px dashed var(--brand-steel); border-radius: 12px;
    background: var(--card-bg); color: var(--brand-steel);
    font-size: 14px; line-height: 1.4;
    transition: border-color .15s, background .15s, color .15s;
}
.file-drop:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.file-drop.drag  { border-color: var(--brand-blue); background: var(--card-bg-hover); color: var(--brand-blue); }
.file-drop svg { width: 34px; height: 34px; }
.file-drop .file-drop-hint { font-size: 12px; color: var(--brand-steel); }

/* ===== PHOTO THUMBNAILS (central) -- previews of dropped pictures, each
   with a trash icon. .photo-thumb.wide = a single wide preview (e.g. a map). */
.photo-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.photo-thumbs[hidden] { display: none !important; }
.photo-thumb {
    position: relative; width: 96px; height: 96px;
    border: 1px solid var(--card-border); border-radius: 6px;
    background: var(--card-bg); overflow: hidden;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb .icon-btn {
    position: absolute; top: 2px; right: 2px; margin: 0;
    background: var(--card-bg); border-radius: 4px;
}
.photo-thumb .icon-btn:hover { background: var(--card-bg); }
.photo-thumb.wide { width: 80%; height: auto; aspect-ratio: 16 / 9; }
/* a drop box that shows its chosen picture (e.g. the report map) */
.file-drop.has-map { padding: 12px; }
.file-drop .photo-thumb.wide { cursor: default; }
.photo-thumb-label { font-size: 12px; color: var(--brand-steel); margin-top: 4px; }
.photo-thumb.clickable img { cursor: pointer; }
.photo-thumb.draggable { cursor: grab; }
.photo-thumb.dragging { opacity: .4; }
.photo-thumb.drop-target { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

/* ===== MAP PICKER POPUP (central) -- .ui-popup.map-pick with a Leaflet map */
.ui-popup.map-pick { width: 900px; max-width: 94vw; }
.ui-popup.map-pick > .popup-header + .map-pick-search { margin-top: 20px; }
.map-pick-search { margin-bottom: 10px; }
.map-pick-canvas {
    width: 100%; aspect-ratio: 16 / 9; max-height: 60vh;
    border: 1px solid var(--card-border); border-radius: 6px;
}
.ui-popup.map-pick .photo-thumb-label { margin: 6px 0 10px; }
.map-pick-approx { gap: 10px; margin-bottom: 14px; font-size: 14px; }
/* vessel-name label on the Google Maps pin (font set in JS, box here) */
.map-pick-label {
    background: var(--card-bg); color: var(--text-color);
    border: 2px solid var(--brand-blue); border-radius: 6px; padding: 3px 8px;
    white-space: nowrap;
}

/* ===== MANUAL LIBRARY (central) -- cards grouped by file type ===== */
.manual-group { margin-bottom: 18px; }
.manual-group:last-child { margin-bottom: 0; }
.manual-group-head {
    display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--brand-slate);
}
.manual-group-head svg { width: 16px; height: 16px; }
.manual-group-count { color: var(--brand-steel); font-weight: 600; }
.manual-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.manual-ico {
    flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 9px; background: var(--brand-mist); color: var(--brand-blue);
}
.manual-ico svg { width: 22px; height: 22px; }
.manual-info { flex: 1 1 auto; min-width: 0; }
.manual-title { font-size: 14px; font-weight: 700; color: var(--brand-slate); display: flex; align-items: center; gap: 8px; }
.manual-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-desc { font-size: 12px; color: var(--brand-steel); margin-top: 2px; }
.manual-meta { font-size: 12px; color: var(--brand-steel); margin-top: 3px; }
.manual-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.manual-group-head.clickable { cursor: pointer; user-select: none; }
.manual-caret { width: 14px; height: 14px; margin-left: auto; color: var(--brand-steel); transition: transform .18s ease; }
.manual-group.collapsed .manual-caret { transform: rotate(-90deg); }
.manual-group.collapsed .sl-list { display: none; }

/* ===== MANUAL VIEWER POPUP (central) ===== */
.om-viewer { width: min(960px, 92vw); max-width: 92vw; }
.om-view-body { margin-bottom: 16px; }
.om-view-body video,
.om-view-body iframe {
    width: 100%; height: 70vh; border: none; border-radius: 8px; background: #000;
}
.om-view-body audio { width: 100%; }
.om-view-json {
    margin: 0; max-height: 70vh; overflow: auto;
    padding: 12px 14px; border: 1px solid var(--input-border); border-radius: 8px;
    background: var(--brand-mist); color: var(--brand-slate);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; line-height: 1.5; white-space: pre; tab-size: 2;
}
.om-view-note { color: var(--brand-steel); font-size: 12px; }

/* edit popup: breathing room between the header beam and the first field */
#omEditOverlay .popup-header,
#acEditOverlay .popup-header { margin-bottom: 28px !important; }

/* accounting: highlight a set of look-alike invoices when "similar" is clicked */
#acTable tr.ac-sim-hit td { background: var(--panel-bg); }

/* Beam card: a white panel with a dark header beam (matches the data-table
   header), for titled boxes like the upload drop zone and overview. */
.beam-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.beam-card > .beam {
  background: var(--header-bg);
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
  padding: 12px 16px;
}
.beam-card > .beam-body {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
/* a table sitting directly in a beam body goes edge to edge */
.beam-card > .beam-body.flush { padding: 0; }

/* bank: a slight per-account row tint (SGD white, USD light blue-grey, EUR light
   warm). Generic classes so every bank table (statements, per-month, transactions)
   picks it up. */
:root {
  --acct-sgd-bg: #ffffff;   /* white */
  --acct-usd-bg: #eef3f8;   /* light blue-grey (previous USD) */
  --acct-eur-bg: #ececee;   /* greyish */
  --acct-other-bg: #f4f2f6; /* faint neutral */
}
tr.acct-sgd   td { background: var(--acct-sgd-bg) !important; }
tr.acct-usd   td { background: var(--acct-usd-bg) !important; }
tr.acct-eur   td { background: var(--acct-eur-bg) !important; }
tr.acct-other td { background: var(--acct-other-bg) !important; }

/* close X sitting in the top-right of a popup header beam */
.popup-header { position: relative; }
.popup-x {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    width: auto; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 4px;
    background: none; border: none; box-shadow: none; letter-spacing: 0; line-height: 0;
    color: var(--popup-header-text); cursor: pointer;
}
.popup-x:hover { background: none; color: var(--popup-header-text); opacity: .7; }
.popup-x svg { width: 18px; height: 18px; }

/* Two-column layout — equal columns, stacks on narrow screens. */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

/* Equal-height columns: every panel in the row grows to the tallest one, and a
   trailing .actions-right is pinned to the bottom so buttons line up. */
.two-col.stretch { align-items: stretch; margin-bottom: 0; padding-bottom: 16px; }
/* Padding, not margin: margins between two block boxes collapse into one and
   can be swallowed entirely, which is why stacked blocks ended up touching.
   Padding never collapses, so this gap always shows. */
.two-col.stretch + .two-col.stretch { margin-top: 0; padding-top: 0; }
/* align-items:stretch above already makes both cards the height of the row.
   height:100% on top of that is measured against an indefinite row height, so
   a tall card spills out of the row and lands on top of the next block. */
.two-col.stretch > .section { display: flex; flex-direction: column; margin-bottom: 0; }
.two-col.stretch > .section > .actions-right { margin-top: auto; padding-top: 12px; }

/* Inputs that ARE the table cells: no box inside a box, the grid does the work.
   Use: <table class="data-table inputs-plain">. */
table.data-table.inputs-plain input[type="text"],
table.data-table.inputs-plain textarea {
    width: 100%; box-sizing: border-box; border: none; background: transparent;
    padding: 2px 0; font: inherit; color: inherit; resize: vertical;
}
table.data-table.inputs-plain textarea { min-height: 2.2em; line-height: 1.35;
    overflow-y: hidden; resize: none; }   /* the box grows to its text instead */
table.data-table.inputs-plain input[type="text"]:focus,
table.data-table.inputs-plain textarea:focus { outline: none; background: var(--card-bg-hover); }

/* Small logo preview inside a form field. */
.logo-thumb { display: block; max-height: 42px; max-width: 160px; width: auto; margin-top: 8px;
              border: 1px solid #ddd; border-radius: 6px; background: #fff; padding: 4px; }

/* ===== CONTENT VAULT ===== */
/* Bigger, bolder, slate-coloured collapsible category header */
.manual-group-head.cv-ghead { font-size: 16px; font-weight: 800; color: var(--brand-slate); letter-spacing: .3px; margin-bottom: 12px; }
.manual-group-head.cv-ghead > svg,
.manual-group-head.cv-ghead .cv-caret svg { width: 20px; height: 20px; }

/* Row thumbnail (image/video) or a type-icon tile fallback */
.cv-thumb { width: 46px; height: 32px; object-fit: cover; border-radius: 6px; background: var(--brand-mist); display: block; }
.cv-thumb-ico { width: 46px; height: 32px; border-radius: 6px; background: var(--brand-mist); color: var(--brand-steel); display: flex; align-items: center; justify-content: center; }
.cv-thumb-ico svg { width: 18px; height: 18px; }
.cv-thumb-btn { padding: 0; border: none; background: none; cursor: pointer; display: inline-block; }

/* Settings: selectable folder tiles */
.cv-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.cv-pick-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--card-border); border-radius: 10px; background: var(--card-bg); cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
.cv-pick-item:hover { border-color: var(--brand-blue); background: var(--card-bg-hover); }
.cv-pick-item.selected { border-color: var(--brand-blue); background: var(--brand-mist); }
.cv-pick-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; background: var(--brand-mist); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; }
.cv-pick-item.selected .cv-pick-ico { background: var(--brand-blue); color: #fff; }
.cv-pick-ico svg { width: 18px; height: 18px; }
.cv-pick-name { flex: 1 1 auto; font-weight: 700; color: var(--brand-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-pick-check { flex: 0 0 auto; color: var(--brand-blue); opacity: 0; transition: opacity .15s; }
.cv-pick-item.selected .cv-pick-check { opacity: 1; }
.cv-pick-check svg { width: 20px; height: 20px; }

/* Preview modal media */
.cv-prev-body { margin: 0; }
.cv-prev-body img, .cv-prev-body video { width: 100%; max-height: 70vh; border-radius: 8px; display: block; background: var(--brand-mist); object-fit: contain; }
.cv-prev-body iframe { width: 100%; height: 70vh; border: none; border-radius: 8px; background: var(--brand-mist); }
.cv-prev-body audio { width: 100%; }
.cv-prev-note { color: var(--brand-steel); font-size: 13px; }


/* =====================================================================
   SIDE MENU  --  icon rail + page panel
   The rail holds one icon per section; the panel shows only that
   section's pages, grouped under sub-headings. Central component:
   base_admin.html carries markup only, never colours or sizes.
   ===================================================================== */

#sidebar-hover-zone{
  position:fixed;
  top:calc(180px + var(--header-beam-height) - 188px);
  bottom:0;
  left:0;
  width:16px;
  z-index:900;
}

#sidebar{
  position:fixed;
  top:calc(180px + var(--header-beam-height) - 188px);
  bottom:0;
  left:calc(0px - var(--menu-w));
  margin:0;
  width:var(--menu-w);
  display:flex;
  padding:0;
  color:var(--menu-text);
  border-top-right-radius:16px;
  box-shadow:8px 0 28px rgba(0,0,0,.28);
  transition:left .28s ease;
  z-index:1000;
  overflow:hidden;
}
#sidebar.open,
#sidebar-hover-zone:hover + #sidebar,
#sidebar:hover{ left:0; }

/* ----- rail ----- */

.nav-rail{
  width:var(--menu-rail-w);
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:14px 0 0;
  background:var(--menu-rail-bg);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}
.nav-rail::-webkit-scrollbar{ display:none; }
.nav-rail .nav-rail-spacer{ flex:1 0 10px; }

.nav-rail-item{
  width:var(--menu-rail-w);
  min-height:54px;
  flex:0 0 auto;
  padding:8px 4px 7px;
  border:none;
  border-radius:0 14px 14px 0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-family:inherit;
  background:var(--menu-item-bg);
  color:var(--menu-text);
  opacity:.62;
  transition:background .18s ease, opacity .18s ease, width .18s ease, color .18s ease;
}
.nav-rail-item:hover{ opacity:1; background:var(--menu-item-hover); color:#fff; }
.nav-rail-item:focus-visible{ outline:2px solid var(--brand-orange); outline-offset:2px; }
.nav-rail-item.active{
  opacity:1;
  width:var(--menu-rail-w);
  background:var(--menu-active);
  color:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.nav-rail-item svg{ width:20px; height:20px; flex:0 0 auto; }
.nav-rail-item .nav-rail-label{
  font-size:8px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1.15;
  text-align:center;
}
.nav-rail-item.nav-rail-fav.active{ background:var(--brand-orange); color:var(--menu-rail-bg); }
.nav-rail-item.nav-rail-search{ background:var(--menu-active); opacity:.85; }
.nav-rail-item.nav-rail-search:hover{ opacity:1; background:var(--menu-active-hover); }
.nav-rail-item.nav-rail-search.on{
  opacity:1;
  width:var(--menu-rail-w);
  background:var(--brand-orange);
  color:var(--menu-rail-bg);
}

/* ----- panel ----- */

.nav-panel{
  position:relative;
  width:var(--menu-panel-w);
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--menu-panel-bg);
}

.sidebar-header{
  height:64px;
  flex:0 0 auto;
  padding:12px 16px;
  background:var(--body-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  border-top-right-radius:16px;
}
.sidebar-header img{ max-height:56px; max-width:100%; }

.sidebar-user{
  flex:0 0 auto;
  padding:12px 12px 12px;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.sidebar-user-company{ font-size:14px; font-weight:700; letter-spacing:.12em; }
.sidebar-user-email{ font-size:12px; opacity:.6; margin-top:3px; }
.sidebar-logout{
  display:flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  padding:4px 14px;
  margin:10px auto 0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  background:var(--danger);
  border-radius:6px;
  text-decoration:none;
  transition:background .18s ease;
}
.sidebar-logout:hover{ background:var(--danger-hover); }

.nav-panel-head{
  flex:0 0 auto;
  padding:14px 16px 8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--menu-head);
}

/* ----- page list ----- */

.sidebar-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding:0 10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent;
}
.sidebar-scroll::-webkit-scrollbar{ width:7px; }
.sidebar-scroll::-webkit-scrollbar-track{ background:transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); border-radius:7px; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.4); }

/* only the section chosen on the rail is on screen */
.nav-section{ display:none; }
.nav-section.shown{ display:block; }

/* second level: sub-heading inside a section */
.nav-sub{
  display:flex;
  align-items:center;
  gap:8px;
  margin:14px 0 5px;
  padding:0 8px;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.45;
}
.nav-sub::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.15); }
.nav-sub:first-child{ margin-top:4px; }

#sidebar a.nav-link{
  display:block;
  padding:8px 14px;
  margin-bottom:3px;
  border-radius:6px;
  font-size:12px;
  font-weight:400;
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .16s ease, transform .16s ease;
}
#sidebar a.nav-link:hover{ background:rgba(255,255,255,.09); transform:translateX(3px); }
#sidebar a.nav-link:focus-visible{ outline:2px solid var(--brand-orange); outline-offset:-2px; }
#sidebar a.nav-link.current{ background:var(--menu-active); color:#fff; font-weight:700; }
#sidebar a.nav-link.hit{
  background:rgba(255,147,30,.20);
  box-shadow:inset 0 0 0 1px var(--brand-orange);
  font-weight:600;
}
#sidebar a.nav-link.hit.focus{ background:var(--menu-active); color:#fff; }
.nav-link mark{ background:none; color:var(--brand-orange); font-weight:700; }

/* which tab of a page matched the search */
.nav-tab-hint{
  display:none;
  margin:-2px 0 6px 14px;
  font-size:10px;
  font-style:italic;
  opacity:.6;
}
.nav-tab-hint.show{ display:block; }

.nav-link.filtered-out,
.nav-sub.filtered-out{ display:none; }
.nav-empty{ padding:16px 14px; font-size:12px; opacity:.5; text-align:center; }

/* ----- search pill, sits under the list ----- */

.nav-search-wrap{
  display:none;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
  margin:0;
  padding:10px 12px;
  border-radius:6px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);
  transition:border-color .18s ease, background .18s ease;
}
.nav-search-wrap.show{ display:flex; }
.nav-search-wrap{ border-left:none; border-right:none; border-bottom:none; border-radius:0; }
.nav-search-wrap:focus-within{ border-color:var(--brand-orange); background:rgba(255,255,255,.14); }
.nav-search-wrap.nomatch{ border-color:var(--danger); background:rgba(192,0,0,.18); }
.nav-search-icon{ width:14px; height:14px; opacity:.55; flex:0 0 auto; }
.nav-search{
  flex:1 1 auto;
  min-width:0;
  padding:0;
  font-size:12px;
  font-family:inherit;
  color:var(--menu-text);
  background:none;
  border:none;
  outline:none;
}
.nav-search::placeholder{ color:var(--menu-text); opacity:.42; }
.nav-search-clear{
  flex:0 0 auto;
  cursor:pointer;
  font-size:12px;
  opacity:0;
  transition:opacity .15s ease;
}
.nav-search-wrap.filled .nav-search-clear{ opacity:.6; }
.nav-search-clear:hover{ opacity:1; }

/* ----- "more below" button ----- */

.nav-scrolldown{
  position:absolute;
  right:13px;
  bottom:14px;
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:var(--menu-active);
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, background .18s ease;
  z-index:5;
}
.nav-scrolldown:hover{ background:var(--menu-active-hover); }
.nav-scrolldown.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.nav-search-wrap.show ~ .nav-scrolldown{ bottom:62px; }
.nav-scrolldown svg{ width:17px; height:17px; }
.nav-scrolldown .nav-scrolldown-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:10px;
  background:var(--brand-orange);
  color:var(--menu-rail-bg);
  font-size:10px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 2px var(--menu-panel-bg);
}

@media (prefers-reduced-motion: reduce){
  #sidebar,
  .nav-rail-item,
  #sidebar a.nav-link,
  .nav-scrolldown{ transition:none; }
}

/* =====================================================================
   PHONE APP (central) -- the iPhone home-screen pages (base_phone.html).
   Full width, big tap targets, safe-area aware. Tokens only.
   ===================================================================== */
.phone-body { background: var(--brand-mist); -webkit-text-size-adjust: 100%; }
.phone-top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
  background: var(--header-bg); color: var(--header-text);
}
.phone-top img { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto; }
.phone-top h1 {
  flex: 1 1 auto; min-width: 0; margin: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: Impact, sans-serif; font-size: 22px; letter-spacing: 2px; font-weight: normal;
  color: var(--header-text);
}
.phone-top a { color: var(--header-text); text-decoration: none; display: inline-flex; align-items: center; }
.phone-top a svg { width: 24px; height: 24px; }
.phone-top .phone-top-slot { width: 100px; display: flex; justify-content: flex-end; align-items: center; gap: 16px; flex: 0 0 auto; }
.phone-top .phone-top-slot.left { justify-content: flex-start; }
.phone-back { gap: 2px; font-size: 16px; font-weight: 600; min-height: 44px; white-space: nowrap; }
.phone-back svg { margin-left: -6px; }
/* phone menu: drops down under the top bar; backdrop click closes it */
.phone-menu-backdrop {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(41,53,60,0.45);   /* same slate tint as .ui-overlay */
}
.phone-menu {
  background: var(--card-bg); box-shadow: var(--card-shadow);
  padding: calc(env(safe-area-inset-top) + 8px) 16px 12px;
  border-radius: 0 0 12px 12px;
}
.phone-menu-head {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--brand-steel);
}
.phone-menu-head a { color: var(--brand-steel); display: inline-flex; }
.phone-menu-head svg { width: 24px; height: 24px; }
.phone-menu-item {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px;
  border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--text-color); text-decoration: none;
}
.phone-menu-item svg { width: 22px; height: 22px; color: var(--brand-blue); flex: 0 0 auto; }
.phone-menu-item:active { background: var(--card-bg-hover); }
.phone-menu-item.active { color: var(--tab-active); background: var(--brand-mist); }
.phone-menu-item.sep { border-top: 1px solid var(--table-border); border-radius: 0; margin-top: 6px; }
.phone-main {
  width: 100%; max-width: 600px; margin: 0 auto; box-sizing: border-box;
  padding: 16px 16px calc(env(safe-area-inset-bottom) + 24px);
  flex: 1 0 auto;
}
.phone-main button { width: 100%; min-height: 44px; margin-top: 0; }
.phone-main .icon-btn { width: auto; min-height: 0; }
.phone-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.phone-actions[hidden] { display: none; }
.phone-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.phone-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  min-height: 110px; padding: 14px; box-sizing: border-box;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px;
  box-shadow: var(--card-shadow); color: var(--text-color); text-decoration: none;
}
.phone-tile:active { background: var(--card-bg-hover); border-color: var(--card-border-hover); }
.phone-tile svg { width: 28px; height: 28px; color: var(--brand-blue); }
.phone-tile-label { font-size: 14px; font-weight: 700; }
.phone-tile-sub { font-size: 12px; color: var(--brand-steel); }
.phone-tile.wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; }
.phone-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px;
  box-shadow: var(--card-shadow); padding: 14px; margin-bottom: 12px;
}
/* a whole card that is a link (phone Deliveries list) */
a.phone-card { display: block; color: var(--text-color); text-decoration: none; }
a.phone-card:active { background: var(--card-bg-hover); border-color: var(--card-border-hover); }
a.phone-card .phone-card-meta { white-space: pre-line; }   /* Notifications: a clustered alert lists one change per line */
.phone-card > h2 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--brand-steel);
}
.phone-card-title { font-size: 14px; font-weight: 700; }
.phone-card-meta { font-size: 12px; color: var(--brand-steel); margin-top: 3px; }
.phone-card-big { font-size: 14px; font-weight: 700; color: var(--brand-blue); margin-top: 6px; }
.phone-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--table-border); font-size: 14px;
}
.phone-row:last-child { border-bottom: none; }
.phone-row .subtext { margin-top: 0; }
.phone-group { font-size: 12px; font-weight: 700; color: var(--brand-orange); margin-top: 10px; }
.phone-empty { font-size: 14px; color: var(--brand-steel); text-align: center; padding: 20px 0; }
.phone-main .admin-field { max-width: none; }
/* phone PDF viewer: each page is an image, full width */
.phone-pdf-page { display: block; width: 100%; height: auto; margin-bottom: 12px;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 4px; box-shadow: var(--card-shadow); }

/* ===== PHONE DETAIL PAGES (To-Do, Boxes) =====
   Summary tiles on top, cards with a status bar on the left, list lines with
   ONE round icon button each (every round button is the same size). */
.phone-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.phone-stat {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px;
  box-shadow: var(--card-shadow); padding: 12px 8px; text-align: center;
}
.phone-stat-num { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--brand-blue); }
.phone-stat-num.success { color: var(--success); }
.phone-stat-num.warn    { color: var(--brand-orange); }
.phone-stat-num.danger  { color: var(--danger); }
.phone-stat-label {
  font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--brand-steel); margin-top: 4px;
}
.phone-card.bar         { border-left: 4px solid var(--brand-steel); }
.phone-card.bar.info    { border-left-color: var(--brand-blue); }
.phone-card.bar.success { border-left-color: var(--success); }
.phone-card.bar.warn    { border-left-color: var(--brand-orange); }
.phone-card.bar.danger  { border-left-color: var(--danger); }
.phone-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.phone-card-head .phone-card-title { flex: 1 1 auto; min-width: 0; }
.phone-card-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.phone-card-pills:empty { display: none; }
.phone-card-pills + .phone-card-meta { margin-top: 8px; }
.phone-items { margin-top: 10px; }
.phone-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--table-border); font-size: 14px;
}
.phone-item-text { flex: 1 1 auto; min-width: 0; }
.phone-main button.phone-round {
  width: 36px; height: 36px; min-height: 36px; flex: 0 0 36px; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0;
  border-radius: 50%; border: 1px solid var(--card-border);
  background: var(--card-bg); color: var(--brand-blue);
}
.phone-main button.phone-round:hover,
.phone-main button.phone-round:active { background: var(--brand-mist); color: var(--brand-blue); }
.phone-main button.phone-round svg { width: 18px; height: 18px; vertical-align: 0; }
/* small phone buttons keep their look but get a 44px tap area (phone rule 3) */
.phone-main button.phone-round, .phone-main .pill-btn { position: relative; }
.phone-main button.phone-round::after, .phone-main .pill-btn::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%);
}
/* small pill-shaped button in a card row (phone Follow-ups: Tomorrow / Next week) */
.phone-main .pill-btn {
  display: inline-flex; align-items: center; box-sizing: border-box; text-decoration: none;
  width: auto; height: 28px; min-height: 28px; margin: 0; padding: 0 12px;
  border-radius: 14px; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  background: var(--brand-mist); color: var(--brand-blue); border: 1px solid var(--card-border);
}
.phone-main .pill-btn:hover,
.phone-main .pill-btn:active { background: var(--card-bg-hover); color: var(--brand-blue); text-decoration: none; }
.phone-item .icon-btn svg { width: 20px; height: 20px; }
/* phone Boxes: status pills and icons the same height (28px) */
.phone-boxes .pill { height: 28px; line-height: 28px; padding: 0 12px; font-size: 11px; border-radius: 14px; box-sizing: border-box; }
.phone-main .phone-boxes button.phone-round { width: 28px; height: 28px; min-height: 28px; flex: 0 0 28px; }
.phone-main .phone-boxes button.phone-round svg { width: 26px; height: 26px; }
/* same button, no circle (phone Boxes: restart app) */
.phone-main button.phone-round.plain,
.phone-main button.phone-round.plain:hover { border-color: transparent; background: none; }
/* tick (phone To-Do), same round button: empty circle = open, green with tick = done */
.phone-main button.phone-round.phone-check { border: 2px solid var(--brand-steel); color: transparent; }
.phone-main button.phone-round.phone-check:hover { background: var(--card-bg); color: transparent; }
.phone-main button.phone-round.phone-check.on,
.phone-main button.phone-round.phone-check.on:hover { background: var(--success); border-color: var(--success); color: var(--card-bg); }

/* ===== LABELS (label previews + print popup, used by labels.js on any page) ===== */
.label-preview { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; align-items: flex-start; }
.label-preview img { width: 236px; height: auto; background: var(--card-bg);
    border: 1px solid var(--card-border); border-radius: 4px; box-shadow: var(--card-shadow); }
.label-preview.large img { width: 354px; }
.ui-popup.label-popup { width: 760px; max-width: 92vw; max-height: 90vh; overflow-y: auto; box-sizing: border-box; }
.ui-popup.label-popup .label-preview { max-height: 46vh; overflow-y: auto; }
table.data-table.inputs-plain select { width: 100%; font: inherit; }
table.data-table td.cell-narrow { width: 56px; }
/* Action column that fits its buttons + icons on one line (as wide as they need). */
table.data-table td.cell-actions { width: 1%; white-space: nowrap; }
table.data-table td.cell-actions .actions-right { flex-wrap: nowrap; gap: 6px; }
.ui-popup.danger { border: 2px solid var(--danger); }   /* status popup: printing failed */

/* Small input inside a table cell (e.g. Ship ETA: IMO per ship). */
.table-input {
  width: 96px; padding: 4px 6px; box-sizing: border-box;
  border: 1px solid var(--input-border); border-radius: 4px;
  background: var(--card-bg); font-size: 12px; font-family: inherit;
}
.table-input:focus { outline: none; border-color: var(--brand-blue); }

/* ===== PDF POPUP (central) -- showPdfPopup(url, title) in admin_ui.js ===== */
.ui-popup.pdf-popup { width: min(1000px, 94vw); height: 92vh; display: flex; flex-direction: column; }
.pdf-popup .popup-header { position: relative; margin-bottom: 12px; }
.pdf-popup-x {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    background: none; border: none; padding: 4px; margin: 0; width: auto; min-height: 0;
    color: var(--popup-header-text); cursor: pointer;
}
.pdf-popup-x svg { width: 18px; height: 18px; display: block; }
.pdf-popup-frame { flex: 1 1 auto; width: 100%; border: 1px solid var(--card-border); border-radius: 6px; }

/* ===== PHOTO VIEWER (central) -- showPhotoViewer(urls, start, title) in admin_ui.js ===== */
.ui-popup.photo-popup { width: min(1200px, 94vw); height: 92vh; display: flex; flex-direction: column; }
.photo-popup .popup-header { position: relative; margin-bottom: 12px; }
.photo-popup-stage { flex: 1 1 auto; min-height: 0; position: relative; display: flex; align-items: center;
                     justify-content: center; background: var(--logo-slate); border-radius: 6px; overflow: hidden; }
.photo-popup-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.photo-popup-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
                   min-height: 0; padding: 0; margin: 0; border: none; border-radius: 50%; cursor: pointer;
                   display: flex; align-items: center; justify-content: center;
                   background: var(--card-bg); color: var(--brand-slate); box-shadow: var(--card-shadow); }
.photo-popup-nav[hidden] { display: none; }
.photo-popup-nav.prev { left: 12px; }
.photo-popup-nav.next { right: 12px; }
.photo-popup-nav svg { width: 22px; height: 22px; }
.photo-popup-thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding: 2px; flex: 0 0 auto; }
.photo-popup-thumbs[hidden] { display: none; }
.photo-popup-thumbs img { height: 64px; width: 86px; object-fit: cover; flex: 0 0 auto; cursor: pointer;
                          border: 2px solid transparent; border-radius: 4px; opacity: .6; }
.photo-popup-thumbs img:hover { opacity: 1; }
.photo-popup-thumbs img.active { border-color: var(--brand-blue); opacity: 1; }
.photo-popup-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px;
                    font-size: 12px; color: var(--brand-steel); }

/* report email popup (Content Studio > Reports) */
.ui-popup.rw-mail { width: min(720px, 94vw); max-height: 92vh; overflow-y: auto; }
.ui-popup.rw-mail > .popup-header + .admin-field { margin-top: 20px; }
.ui-popup.rw-mail textarea { min-height: 200px; }
.rw-m-missing[hidden] { display: none !important; }
.rw-m-name-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; align-items: center; margin-top: 6px; }
.rw-m-name-email { font-size: 12px; color: var(--brand-steel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* email history popup (Content Studio > Reports) */
.doc-mail-link { background: none; border: none; padding: 0; margin: 0; width: auto; min-height: 0; text-align: left;
                 font-size: 12px; color: var(--brand-blue); cursor: pointer; display: block; max-width: 100%; }
.doc-mail-link:hover { text-decoration: underline; background: none; }
.ui-popup.mail-hist { width: min(820px, 94vw); max-height: 90vh; display: flex; flex-direction: column; }
.mail-hist-list { overflow-y: auto; margin: 20px 0 14px; }
.mail-hist-item { border: 1px solid var(--card-border); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.mail-hist-head { font-size: 14px; margin-bottom: 6px; }
.mail-hist-by { font-size: 12px; color: var(--brand-steel); }
.mail-hist-meta { border-collapse: collapse; font-size: 12px; margin-bottom: 8px; }
.mail-hist-meta th { text-align: left; color: var(--brand-steel); font-weight: 600; padding: 2px 12px 2px 0; vertical-align: top; }
.mail-hist-meta td { padding: 2px 0; word-break: break-word; }
.mail-hist-body { white-space: pre-wrap; font-family: inherit; font-size: 12px; margin: 0; padding: 10px;
                  background: var(--card-bg-hover); border-radius: 6px; }

/* ===== SQL REPLAY (sql_replay.html) -- destructive-run warning popup.
   DEV = normal header; PROD = .ui-popup.danger.prod (red border + red header). */
.replay-controls { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.replay-controls .admin-field { width: 220px; }
.ui-popup.replay-warn { width: 620px; max-width: 94vw; }
.ui-popup.replay-warn.prod .popup-header { background: var(--danger); color: #fff; }
.replay-target { font-size: 24px; font-weight: 700; text-align: center; margin: 20px 0 14px; letter-spacing: .5px; }
.replay-target .replay-env { color: var(--brand-blue); }
.ui-popup.replay-warn.prod .replay-target .replay-env { color: var(--danger); }
.replay-warn ul { margin: 0 0 16px 18px; padding: 0; font-size: 14px; }
.replay-warn li { margin-bottom: 6px; }
.replay-warn .admin-field { max-width: none; margin-bottom: 16px; }
.replay-summary .pill { margin-right: 8px; }

/* Add row: text box on the left as high as the right column, which stacks a
   dropdown above the button (both 220px x 36px). Used by Deploy Notes. */
.add-row { display: grid; grid-template-columns: 1fr 220px; grid-template-rows: 36px 36px; gap: 10px; }
.add-row textarea {
    grid-column: 1; grid-row: 1 / span 2; height: 82px; resize: none;
    padding: 8px 10px; border: 1px solid var(--input-border); border-radius: 6px;
    background: #ffffff; color: var(--text-color); font-size: 14px; font-family: inherit; box-sizing: border-box; width: 100%;
}
.add-row textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 2px rgba(47,111,138,.18); }
.add-row .ui-select { grid-column: 2; width: 220px; }
.add-row button { grid-column: 2; width: 220px; height: 36px; min-height: 36px; margin-top: 0; white-space: nowrap; }

/* List toolbar: tabs on the left, filter on the right, sharing the tab baseline. */
.list-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
    border-bottom: 1px solid var(--tab-border); margin: 18px 0 12px; }
.list-toolbar .tabs { border-bottom: none; margin-bottom: 0; }
.list-toolbar .ui-select { width: 220px; margin-bottom: 6px; }
.list-toolbar .list-title { font-size: 14px; font-weight: 700; color: var(--brand-slate); padding-bottom: 8px; }
.list-toolbar .list-title:only-child { padding-bottom: 6px; }
.sl-empty.compact { padding: 14px; }

/* Notes popup (AWS Deploy step 1b): standard popup with two scrolling lists. */
.ui-popup.notes-pop { width: 720px; max-width: 94vw; max-height: 85vh; display: flex; flex-direction: column; }
.notes-pop-body { margin-bottom: 16px; overflow-y: auto; }
.notes-pop-body .list-toolbar:first-child { margin-top: 8px; }
.ui-popup.notes-pop .ui-popup-actions button { width: auto; white-space: nowrap; }

/* Simple checklist: one row per item, checkbox left, done items greyed + struck. */
.check-list { margin-top: 16px; }
.check-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px;
    border-bottom: 1px solid var(--table-border); cursor: pointer; font-size: 14px; }
.check-item:last-child { border-bottom: none; }
.check-item input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 auto; cursor: pointer; }
.check-body { flex: 1 1 auto; min-width: 0; }
.check-text { display: block; color: var(--text-color); }
.check-meta { display: block; font-size: 12px; color: var(--brand-steel); margin-top: 2px; }
.check-item.done .check-text { color: var(--brand-steel); text-decoration: line-through; }


/* CRM toolbar: the two actions sit next to each other, not stacked. */
.crm-btn-row { display: flex; gap: 10px; flex-wrap: nowrap; }
.crm-btn-row button { width: auto; }

/* A value filled in automatically shows in blue until you edit it, so it is
   never mistaken for a grey placeholder. */
input.crm-auto { color: var(--brand-blue); background: var(--brand-mist); }

/* ===== CRM PIPELINE (crm.html: Pipeline + Follow-ups, phone Scan card) ===== */
/* Deal board: one fixed-width column per stage; the board scrolls sideways. */
.crm-board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.crm-col { flex: 0 0 200px; width: 200px; background: var(--tab-bg); border: 1px solid var(--card-border);
    border-radius: 8px; padding: 8px; min-height: 160px; }
.crm-col.drop { border-color: var(--brand-blue); background: var(--card-bg-hover); }
.crm-col-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px;
    font-weight: 700; color: var(--brand-slate); }
.crm-col-sum { font-size: 12px; color: var(--brand-steel); margin: 2px 0 8px; }
.crm-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 6px; padding: 8px;
    margin-bottom: 8px; cursor: pointer; box-shadow: var(--card-shadow); font-size: 12px; }
.crm-card:hover { border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); }
.crm-card-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-card-meta { color: var(--brand-steel); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-card-due { margin-top: 3px; color: var(--brand-blue); }
.crm-card-due.overdue { color: var(--danger); font-weight: 700; }

/* Wider popup for a deal with its timeline. */
.ui-popup.wide { width: min(760px, 94vw); max-height: 90vh; overflow-y: auto; }

/* Timeline: newest first, one entry per event. */
.timeline { margin-top: 12px; max-height: 40vh; overflow-y: auto; }
.tl-item { border-left: 2px solid var(--card-border); padding: 2px 0 10px 10px; }
.tl-when { font-size: 12px; color: var(--brand-steel); }
.tl-title { font-size: 12px; font-weight: 700; }
.tl-title a { color: var(--brand-blue); }
.tl-body { font-size: 12px; white-space: pre-wrap; }


/* A field read by OCR from a business card: orange until a person checks it. */
input.field-unverified { border-color: var(--brand-orange) !important; background: var(--panel-bg) !important; }
.check-tag { color: var(--brand-orange); font-size: 12px; font-weight: 700; margin-left: 6px; }
.card-preview { width: 100%; max-height: 260px; object-fit: contain; border-radius: 8px;
    border: 1px solid var(--card-border); background: var(--card-bg); }

/* ===== Sortable table headers (click to sort, click again to reverse) ===== */
table.data-table thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.data-table thead th.sortable:hover { text-decoration: underline; }
.sort-ind { display: inline-block; width: 10px; height: 10px; margin-left: 4px; vertical-align: middle; }
.sort-ind svg { width: 10px; height: 10px; display: block; }

/* A table row you can drop a file onto (e.g. an invoice PDF onto a bank line). */
table.data-table tbody tr.row-drop { outline: 2px dashed var(--brand-blue); outline-offset: -2px; }
table.data-table tbody tr.row-drop td { background: var(--card-bg-hover); }

/* A name that opens its record: a clickable pill, so it is clear what can be clicked. */
.name-pill { display: inline-block; max-width: 100%; padding: 2px 10px; border-radius: 12px;
    background: var(--brand-mist); color: var(--brand-blue); border: 1px solid var(--card-border);
    font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; vertical-align: middle; }
.name-pill:hover { background: var(--brand-blue); color: #ffffff; border-color: var(--brand-blue); }
.name-pill.empty { font-weight: 400; font-style: italic; }

/* The card photo opened from a contact: as large as the screen allows. */
.card-preview.large { max-height: 75vh; }

/* Phone: a field that follows a row of buttons gets room above it. */
.phone-card .phone-actions + .admin-field { margin-top: 16px; }
/* Phone cards: fields run the full card width like the buttons, with a clear border. */
.phone-card .admin-field { max-width: none; min-width: 0; }
.phone-card .admin-field input,
.phone-card .admin-field select,
.phone-card .admin-field textarea { border: 1px solid var(--brand-steel); }
/* phone form fields: one look for text, date, time and dropdowns; 16px stops the
   iPhone zooming in; min-width 0 lets date/time boxes shrink to the card */
.phone-card .admin-field label { font-size: 12px; color: var(--brand-steel); }
.phone-card .admin-field input,
.phone-card .admin-field select {
  -webkit-appearance: none; appearance: none;
  height: 36px; min-width: 0; max-width: 100%; padding: 0 10px;
  font-size: 16px; font-family: inherit; color: var(--text-color);
  background-color: var(--card-bg); border-radius: 8px;
}
.phone-card .admin-field input::-webkit-date-and-time-value { text-align: left; }
.phone-card .admin-field select {
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--brand-steel) 50%),
                    linear-gradient(135deg, var(--brand-steel) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.phone-card .field-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 10px; }
.phone-card .field-row > .admin-field { margin-top: 0; }
/* an edit form that opens inside a card (phone Visits) */
.phone-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--table-border); }
/* buttons side by side on one line (e.g. Cancel | Save) */
.phone-actions.inline { flex-direction: row; }
.phone-actions.inline > * { flex: 1 1 0; min-width: 0; }
/* Name pills: one fixed width so a list lines up; long names end in "..." (full name on hover). */
.name-pill { width: 180px; box-sizing: border-box; text-align: left; }
/* A pill can be hidden with the hidden attribute (its display rule would otherwise show it). */
.pill[hidden] { display: none; }
/* A count pill in the top right corner of a phone home tile. */
.phone-tile { position: relative; }
.phone-tile .tile-badge {
  position: absolute; top: 10px; right: 10px;
  min-width: 24px; height: 24px; padding: 0 8px; box-sizing: border-box;
  font-size: 11px; line-height: 24px; border-radius: 12px; text-align: center;
}

/* ===== List pages (CRM Contacts / Companies): search left, buttons right ===== */
.list-toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.list-toolbar > .admin-field { flex: 1 1 320px; max-width: none; }
.list-toolbar-btns { display: flex; gap: 10px; flex-wrap: nowrap; }
.list-toolbar-btns button { width: auto; white-space: nowrap; }
/* Switches with their label, in one row under the search. */
.toggle-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 12px 0; font-size: 12px; }
.toggle-item { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.toggle-count { margin-left: auto; color: var(--brand-steel); }
/* Fixed column widths for fixed tables (the column without a class takes the rest). */
table.data-table .col-50  { width: 50px; }
table.data-table .col-80  { width: 80px; }
table.data-table .col-90  { width: 90px; }
table.data-table .col-100 { width: 100px; }
table.data-table .col-110 { width: 110px; }
table.data-table .col-140 { width: 140px; }
table.data-table .col-150 { width: 150px; }
table.data-table .col-180 { width: 180px; }
table.data-table .col-200 { width: 200px; }
table.data-table .col-220 { width: 220px; }
/* Action icons in the last column sit on the right. */
table.data-table td.cell-actions { text-align: right; overflow: visible; }
/* A table value filled in automatically (e.g. company from the email domain): blue on mist. */
table.data-table td.cell-auto { color: var(--brand-blue); background: var(--brand-mist); }
/* A blue button that has nothing left to do (e.g. "Confirm all" when all is confirmed): grey. */
.btn-secondary:disabled, .btn-secondary:disabled:hover { background: var(--brand-grey); color: #ffffff; cursor: default; }
/* Notification count on a menu item (data-badge="3"), e.g. cards ready to approve. */
#sidebar a.nav-link[data-badge]::after {
  content: attr(data-badge); display: inline-block; margin-left: 8px; min-width: 18px; padding: 1px 6px;
  border-radius: 9px; background: var(--brand-orange); color: #ffffff; font-size: 12px; font-weight: 700;
  line-height: 16px; text-align: center; box-sizing: border-box; vertical-align: middle;
}
/* Question popups (confirmPopup): the two buttons sit in the middle. */
.ui-popup-actions.center { justify-content: center; }
/* A fixed-table cell that shows its full text (e.g. an email address), wrapping instead of "...". */
table.data-table.fixed td.cell-wrap { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* A pill that can be clicked to change it (e.g. Origin in the Contacts list). */
.pill.clickable { cursor: pointer; }
.pill.clickable:hover { filter: brightness(1.15); }

/* Settings-page embed: hides a module page's own main tab row inside the
   Settings iframe (see base_admin.html, embed_settings). */
.embed-hide { display: none !important; }
/* Settings page: a module's settings tab shown in an iframe. */
.settings-frame { width: 100%; height: calc(100vh - 260px); min-height: 480px; border: 0; display: block; }
/* A slightly larger icon button (e.g. snooze in the Follow-ups list). */
.icon-btn.lg svg { width: 22px; height: 22px; }

/* ===== DOCUMENTS & E-SIGN (documents.html) =====
   Editor: tools on the left, the PDF pages on the right; boxes are placed
   on the pages in % of the page, coloured per signer (--esign-s1..4). */
.es-editor { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: stretch; margin-top: 12px; }
.es-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
.es-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px; box-shadow: var(--card-shadow);
           padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.es-card[hidden] { display: none; }
.es-side > .es-card { margin-top: 0; width: 100%; max-width: none; box-sizing: border-box; min-width: 0; }
.es-side { min-width: 0; }
.es-card [hidden] { display: none !important; }
.es-side > .es-card.es-grow { flex: 1 1 auto; }
.es-card-h { font-size: 14px; font-weight: 700; color: var(--brand-slate); text-transform: uppercase; letter-spacing: 0.5px; }
.es-card select, .es-card input[type="text"], .es-card input[type="email"] { width: 100%; box-sizing: border-box; }
.es-card .field-grid { margin-top: 0; }
.es-card .actions-right { margin-top: 0; }
.es-card .btn-xs { white-space: nowrap; flex: 0 0 auto; }
.es-sel-row { display: flex; align-items: flex-end; gap: 12px; }
.es-sel-row > .field-grid { flex: 1 1 auto; min-width: 0; }
.es-sel-row > .icon-btn { flex: 0 0 auto; margin-left: auto; margin-bottom: 4px; }
.es-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.pill.es-pill { background: var(--es-c); }
.pill.es-pill.active { box-shadow: 0 0 0 2px var(--logo-slate); }
.es-pages { display: flex; flex-direction: column; gap: 24px; align-items: center; min-height: 480px; max-height: 82vh; overflow-y: auto;
            padding: 28px 20px 20px; background: var(--brand-mist); border-radius: 8px; box-sizing: border-box; }
.es-pages > .file-drop { width: 100%; flex: 1 1 auto; min-height: 420px; box-sizing: border-box; justify-content: center; }
.es-page { position: relative; width: 100%; max-width: 820px; background: var(--card-bg); box-shadow: var(--card-shadow); }
.es-page img { display: block; width: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.es-page.placing { cursor: crosshair; }
.es-page-no { position: absolute; top: -2px; right: 6px; font-size: 12px; color: var(--brand-steel); transform: translateY(-100%); }
.es-box { position: absolute; box-sizing: border-box; border: 2px solid var(--es-c); border-radius: 3px;
          background: color-mix(in srgb, var(--es-c) 16%, transparent); color: var(--es-c);
          font-size: 12px; font-weight: 700; display: flex; align-items: center; padding: 0 4px;
          cursor: move; overflow: hidden; white-space: nowrap; user-select: none; }
.es-box.copy { border-style: dashed; }
.es-box.sel { box-shadow: 0 0 0 2px var(--logo-slate); }
.es-guide { position: absolute; background: var(--brand-orange); pointer-events: none; z-index: 5; }
.es-guide.v { width: 1px; top: 0; bottom: 0; }
.es-guide.h { height: 1px; left: 0; right: 0; }
.es-box .es-rs { position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; background: var(--es-c); cursor: nwse-resize; }
.es-s1 { --es-c: var(--esign-s1); }
.es-s2 { --es-c: var(--esign-s2); }
.es-s3 { --es-c: var(--esign-s3); }
.es-s4 { --es-c: var(--esign-s4); }
.es-print { --es-c: var(--brand-steel); }
.field-grid > .admin-field[hidden] { display: none !important; }
.es-auto-info { margin-top: 12px; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 6px; font-weight: 600; }
.es-auto-info[hidden] { display: none; }
/* CRM contact suggestions under a signer field (Documents > Send) */
.es-sug-menu { padding: 4px; }
.es-sug { padding: 6px 8px; border-radius: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.es-sug:hover { background: var(--card-bg-hover); }
.es-sug .subtext { margin: 0; }
/* a field that comes from a template and cannot be changed on the Send tab */
.admin-field input.es-locked, .admin-field select.es-locked { background: var(--brand-mist) !important; color: var(--brand-steel); cursor: default; pointer-events: none; }   /* printed by the admin (revision block) */
.es-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--es-c); flex: 0 0 auto; }
.es-signer { display: grid; grid-template-columns: 14px minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 8px; align-items: center; }
.es-signer .es-email { grid-column: 2 / 4; }
.es-signer input { width: 100%; box-sizing: border-box; }
.es-signer + .es-signer { margin-top: 8px; }
.es-signer .es-role-in { grid-column: 2 / 4; }
.es-signer .es-c2 { grid-column: 2; }
.es-picked { display: flex; align-items: center; gap: 8px; }
.es-picked > .btn-xs { margin-left: auto; }
@media (max-width: 1000px) { .es-editor { grid-template-columns: 1fr; } .es-side { position: static; } }
.es-details textarea { font-family: inherit; font-size: 14px; line-height: 1.45; padding: 10px 12px; resize: vertical; }
.es-details-acts { margin-top: 16px; }
.es-ph-row { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.es-ph-row .subtext { flex-basis: 100%; margin: 2px 0 0; }
.ui-popup.doc-pop { width: min(720px, 94vw); max-height: 92vh; overflow-y: auto; box-sizing: border-box; }
.ui-popup.doc-pop > .popup-header + .field-grid { margin-top: 20px; }
.ui-popup.doc-pop .admin-field { max-width: none; }
/* Documents & E-Sign: feedback from Send for review (comments pinned on the document) */
.doc-fb { margin-top: 20px; }
.doc-fb-item { padding: 10px 0; border-bottom: 1px solid var(--table-border); font-size: 14px; }
.doc-fb-item:last-child { border-bottom: none; }
.doc-fb-who { display: flex; align-items: center; gap: 8px; }
.doc-fb-who .btn-xs { margin: 0 0 0 auto; }
.doc-fb-item ol { margin: 6px 0 0; padding-left: 20px; line-height: 1.5; }
.doc-fb-note { margin-top: 6px; }
.doc-fb .subtext { display: inline; margin: 0 4px 0 0; }
/* Documents & E-Sign list: fits the screen. Fixed widths for the short columns, text wraps,
   status pills one per line (same width), actions on one line. */
table.data-table.doc-list { table-layout: fixed; width: 100%; }
table.data-table.doc-list th { box-sizing: border-box; }   /* the widths below include the cell padding */
.doc-list th:nth-child(1) { width: 96px; }                 /* date */
.doc-list th:nth-child(3) { width: 14%; }                  /* recipient; the title takes what is left */
.doc-list th:nth-child(4) { width: 90px; }                 /* type */
.doc-list th:nth-child(5) { width: 108px; }                /* status */
.doc-list th:nth-child(6) { width: 14%; }                  /* signers */
.doc-list th:nth-child(7) { width: 96px; }                 /* expires */
.doc-list th:nth-child(8) { width: 176px; }                /* icons */
.doc-list td { white-space: normal; overflow-wrap: anywhere; }
.doc-list td .pill { display: block; width: 84px; box-sizing: border-box; text-align: center; margin: 0 0 3px; }
/* Send tab: "Message to the signers" with the Informal / Formal switch on the right */
.es-msg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 24px; margin-bottom: 8px; }
.es-msg-head label { margin: 0; }
/* the Notes heading next to it: same height and gap, so both boxes start level */
.es-details .admin-field > label { height: 24px; display: flex; align-items: center; margin-bottom: 8px; }
.es-tone { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--brand-steel); }
.es-tone .switch { margin: 0; }
.doc-fb-who .btn-xs + .btn-xs { margin-left: 4px; }
/* feedback viewer: the pages with numbered pins; hover or click a pin to read the comment */
.ui-popup.doc-pop.doc-pop-wide { width: min(900px, 94vw); }
.doc-pinview { margin-top: 20px; }
.doc-pinpage { position: relative; margin: 0 0 14px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); }
.doc-pinpage img { display: block; width: 100%; height: auto; border-radius: 6px; }
.doc-pin { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: var(--brand-orange);
           color: var(--card-bg); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center;
           border: 2px solid var(--card-bg); box-sizing: border-box; box-shadow: var(--card-shadow); cursor: pointer; }
.doc-pin-tip { display: none; position: absolute; top: 36px; left: 0; z-index: 3; width: 280px; padding: 8px 10px; border-radius: 6px;
               background: var(--brand-slate); color: var(--card-bg); font-size: 14px; font-weight: 400; line-height: 1.4;
               box-shadow: var(--card-shadow); text-align: left; cursor: default; }
.doc-pin.left .doc-pin-tip { left: auto; right: 0; }
.doc-pin:hover .doc-pin-tip, .doc-pin.open .doc-pin-tip { display: block; }
.doc-pin:hover, .doc-pin.open { z-index: 4; }
.ui-popup.doc-pop .admin-field + .admin-field, .ui-popup.doc-pop .field-grid + .admin-field { margin-top: 14px; }
.ui-popup.doc-pop .field-grid { align-items: start; }
.ui-popup.doc-pop .field-grid > .admin-field { margin-top: 0; }
.ui-popup.doc-pop .subtext { margin-top: 6px; }
.ui-popup.doc-pop .ui-popup-actions { margin-top: 20px; }
.es-role-row { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: center; }
.es-role-row + .es-role-row { margin-top: 8px; }
.es-roles { display: flex; gap: 12px; align-items: flex-start; }
.es-roles .es-role-row { flex: 1 1 0; min-width: 0; }
.es-roles .es-role-row + .es-role-row { margin-top: 0; }
.es-role-row > .es-role-in + .es-role-in { grid-column: 2; }
.es-pop-switch { margin-top: 16px; font-size: 14px; }
.doc-events { font-size: 12px; max-height: 220px; overflow-y: auto; margin-top: 6px; }
.doc-events div { padding: 3px 0; border-bottom: 1px solid var(--table-border); }
/* a tab that only shows in one context (e.g. Documents Settings, only inside the Settings page) */
.tabs .tab[hidden] { display: none !important; }
.dc-acts { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; align-items: center; white-space: nowrap; }
.doc-info { margin-top: 20px; }
.doc-info .doc-info-k { width: 160px; font-weight: 700; vertical-align: top; }
.doc-info td { word-break: break-all; }

/* Notice: standard info box on top of a page. White card, colour stripe on the
   left, icon, title + detail line, optional button on the right.
   Variants: .info (blue, default) .warn (orange) .danger (red) .success (green).
   .clickable = the whole box opens something. See template.html. */
.notice { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: 1px solid var(--card-border);
          border-left: 4px solid var(--brand-blue); border-radius: 9px; padding: 10px 14px; margin: 0 0 14px; box-shadow: var(--card-shadow); }
.notice[hidden] { display: none !important; }
.notice > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--brand-blue); }
.notice-body { flex: 1 1 auto; min-width: 0; }
.notice-title { font-size: 14px; font-weight: 700; color: var(--brand-slate); }
.notice-text { font-size: 12px; color: var(--brand-steel); margin-top: 2px; }
.notice > button { flex: 0 0 auto; }
.notice.warn    { border-left-color: var(--brand-orange); } .notice.warn > svg    { color: var(--brand-orange); }
.notice.danger  { border-left-color: var(--danger); }       .notice.danger > svg  { color: var(--danger); }
.notice.success { border-left-color: var(--success); }      .notice.success > svg { color: var(--success); }
.notice.clickable { cursor: pointer; }
.notice.clickable:hover { background: var(--card-bg-hover); box-shadow: var(--card-shadow-hover); }

/* Fixed action columns in a list row: [button] [edit] [trash]. Every row renders
   all three cells (an empty <span> for a missing one) so the icons line up. */
.manual-actions.slots { display: grid; grid-template-columns: 56px 30px 30px; justify-items: center; align-items: center; gap: 4px; }
/* .with-pill adds a fixed status-pill column in front: [pill] [load] [edit] [trash] */
.manual-actions.slots.with-pill { grid-template-columns: 110px 30px 30px 30px; }
.manual-actions.slots.with-pill > :first-child { justify-self: end; }

/* Icon button on the right of a section header bar (e.g. refresh) */
.section > h3.with-action { display: flex; align-items: center; }
.section > h3.with-action .icon-btn { margin-left: auto; color: var(--header-text); }

/* SSH key received: count on the Access List tab, highlighted waiting row */
.tab-count { display: inline-block; background: var(--brand-orange); color: #fff; font-size: 12px; font-weight: 700; border-radius: 10px; padding: 1px 8px; margin-left: 6px; }
.sl-row.key-waiting { border-left: 4px solid var(--brand-orange); }

/* ===== SUMMARY TILES + BUDGET GRID (first used on /admin/budget) ===== */
/* Row of summary numbers: small label on top, big number under it. */
.stat-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-tile { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px;
             padding: 12px 14px; box-shadow: var(--card-shadow); min-width: 0; }
.stat-tile-label { font-size: 12px; font-weight: 700; color: var(--brand-steel); text-transform: uppercase; letter-spacing: .3px; }
.stat-tile-num { font-size: 22px; font-weight: 700; color: var(--brand-slate); margin-top: 4px; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
.stat-tile-num.success { color: var(--success); }
.stat-tile-num.danger  { color: var(--danger); }
.stat-tile-sub { font-size: 12px; color: var(--brand-steel); margin-top: 2px; }
/* Second amount under the big number (same value, other currency). */
.stat-tile-num2 { font-size: 14px; font-weight: 700; color: var(--brand-slate); margin-top: 2px; white-space: nowrap; }
.stat-tile-num2.success { color: var(--success); }
.stat-tile-num2.danger  { color: var(--danger); }
@media (max-width: 1100px) { .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Number cells: right aligned, never wrapped. */
table.data-table th.num, table.data-table td.num { text-align: right; white-space: nowrap; }
table.data-table.inputs-plain td.num input[type="text"] { text-align: right; }
/* Dropdowns that are table cells (budget lines): no box, the grid does the work. */
table.data-table.bud-grid td > select { width: 100%; min-width: 0; height: auto; border: none; background-color: transparent;
                                   font: inherit; color: inherit; padding: 2px 18px 2px 0; margin: 0; }
table.data-table.bud-grid td > select:disabled,
table.data-table.inputs-plain input[type="text"]:disabled { color: var(--brand-steel); }
/* Grid rows: group heading, sub row, total row, a negative amount, a clickable row. */
table.data-table tr.row-group td { font-weight: 700; color: var(--brand-slate); background: var(--brand-mist); }
table.data-table tr.row-sub td:first-child { padding-left: 26px; color: var(--brand-steel); }
table.data-table tr.row-total td { font-weight: 700; }
table.data-table td.neg { color: var(--danger); font-weight: 700; }
table.data-table tr.row-click { cursor: pointer; }
table.data-table tr.row-click:hover td { background: var(--card-bg-hover); }
table.data-table .caret { display: inline-block; width: 12px; color: var(--brand-steel); }
/* A note typed under a value in the same cell: smaller and muted. */
table.data-table.inputs-plain td.cell-stack input[type="text"] { display: block; width: 100%; box-sizing: border-box; }
table.data-table.inputs-plain input[type="text"].cell-note { font-size: 12px; color: var(--brand-steel); margin-top: 2px; }

/* First column stays put when a wide table scrolls sideways: <table class="data-table sticky-first">.
   overflow:clip (not hidden) keeps the rounded corners without stopping the sticky column. */
table.data-table.sticky-first { overflow: visible; overflow: clip; }
.sticky-first th:first-child,
.sticky-first td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--table-border); }
.sticky-first td:first-child { background: var(--body-bg); }

/* ===== INVESTOR VAULT (investor.ayentro.com, ../investor_vault/templates) ===== */
/* Tabs can be links (<a class="tab">), and the tab bar can end with the user's email + log out. */
.tabs a.tab { text-decoration: none; }
.tabs .tabs-end { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--brand-steel); padding-bottom: 6px; }
.tabs .tabs-end .btn-xs { text-decoration: none; }
/* A whole list card as a link. */
a.sl-row { display: block; text-decoration: none; color: inherit; }
/* Document pages shown as images, one under the other. */
.vault-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vault-page { display: block; width: 100%; max-width: 900px; height: auto; background: var(--card-bg); border: 1px solid var(--table-border); box-shadow: var(--card-shadow); }
/* "Push to Investor Vault" strip at the top of the finance pages (owner only). */
.vault-push { margin-bottom: 10px; }

/* Wide popup (lists): always narrower than the page content, which is at most
   1100px (main = 1180 incl. 2 x 40 padding), or the window minus 80px. */
.ui-popup.popup-wide { width: min(1040px, calc(100vw - 140px)); max-width: none; text-align: left; }

/* Page action buttons in the orange header bar, just left of the menu button
   (pages fill {% block header_actions %}, e.g. Push to Investor Vault). */
header .header-actions {
  position: absolute; top: 50%; transform: translateY(-50%);
  right: calc(max(20px, calc((100vw - 1100px) / 2)) + 48px);
  display: flex; align-items: center; gap: 8px;
  font-family: Arial, sans-serif; letter-spacing: normal;
}
header .header-actions:empty { display: none; }
/* Investor vault welcome / login card (investor_vault/templates/vault_login.html). */
.vault-welcome { max-width: 760px; margin: 24px auto 40px; background: var(--card-bg); border: 1px solid var(--card-border);
                 border-radius: 12px; box-shadow: var(--card-shadow-hover); overflow: hidden; text-align: center; }
.vault-welcome-head { background: var(--brand-slate); color: var(--header-text); padding: 28px 32px 24px; }
.vault-welcome-kicker { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--brand-orange); font-weight: 700; }
.vault-welcome-title { font-size: 26px; font-weight: 700; margin: 8px 0 0; letter-spacing: .5px; }
.vault-welcome-body { padding: 26px 40px 32px; }
.vault-welcome-lead { font-size: 14px; line-height: 1.6; color: var(--text-color); margin: 0 0 10px; }
.vault-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 28px; text-align: left; }
.vault-point { background: var(--brand-mist); border-radius: 10px; padding: 14px; }
.vault-point svg { width: 22px; height: 22px; color: var(--brand-blue); display: block; margin-bottom: 8px; }
.vault-point-title { font-size: 14px; font-weight: 700; color: var(--brand-slate); margin-bottom: 4px; }
.vault-point-text { font-size: 12px; line-height: 1.5; color: var(--brand-steel); }
.vault-login-btn { display: inline-block; min-width: 240px; padding: 14px 28px; border-radius: 8px; background: var(--brand-orange);
                   color: var(--header-text); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
                   text-decoration: none; box-shadow: var(--card-shadow); }
.vault-login-btn:hover { background: var(--brand-orange-hover); }
.vault-welcome-note { font-size: 12px; color: var(--brand-steel); margin-top: 14px; line-height: 1.5; }
@media (max-width: 700px) { .vault-points { grid-template-columns: 1fr; } .vault-welcome-body { padding: 22px 18px 26px; } }
/* Empty place for an icon a row does not have, so buttons and icons line up across rows. */
.icon-btn.icon-slot { visibility: hidden; pointer-events: none; }
/* Investor vault registration: the confirm tick line. */
.vault-agree { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.vault-agree input { width: 18px; height: 18px; margin: 0; }
/* A multi-line text box in the normal font (e.g. an address); textareas are monospace by default. */
textarea.text-plain { font-family: Arial, sans-serif !important; font-size: 14px; }
/* Two fields stacked in one grid column (e.g. City over Country next to a multi-line Address,
   which stretches to the same height). */
.field-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.field-stack > .admin-field { width: 100%; max-width: none; margin-top: 0; }
.field-stack > .admin-field + .admin-field { margin-top: 0; }