:root {
  --green: #2f8f5b;
  --green-dark: #1f6b42;
  --green-light: #e8f5ee;
  --ink: #1d2b24;
  --muted: #6b7d74;
  --line: #e2e8e4;
  --bg: #f4f7f5;
  /* The workspace canvas alone sits darker than the rest of the app: its white windows float ON it,
     so a softer backdrop stops a screen full of white panels from glaring. */
  --ws-bg: #b5bdb7;
  --card: #ffffff;
  --danger: #c0392b;
  --amber: #b8860b;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink); background: var(--bg); font-size: 14px;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
}
.login-card {
  background: var(--card); padding: 36px 34px; border-radius: 16px; width: 340px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25); display: flex; flex-direction: column;
}
.login-card .brand { text-align: center; margin-bottom: 18px; }
.login-card .leaf { font-size: 40px; }
.login-card h1 { font-size: 20px; margin: 8px 0 2px; }
.login-card .brand p { margin: 0; color: var(--muted); font-size: 13px; }
.login-card label { font-size: 12px; color: var(--muted); margin: 12px 0 4px; font-weight: 600; }
.login-card input {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
.login-card input:focus { outline: 2px solid var(--green); border-color: var(--green); }
.login-card button {
  margin-top: 20px; background: var(--green); color: #fff; border: 0; padding: 12px;
  border-radius: 8px; font-size: 15px; font-weight: 600;
}
.login-card button:hover { background: var(--green-dark); }
/* text-style links inside the login card (Forgot password / Back to sign in) */
.login-card button.link-btn {
  margin-top: 10px; background: none; color: var(--green); padding: 4px;
  font-size: 13px; font-weight: 600; text-decoration: underline; width: auto;
}
.login-card button.link-btn:hover { background: none; color: var(--green-dark); }
.error { color: var(--danger); font-size: 13px; margin-top: 12px; text-align: center; min-height: 16px; }

/* ---------- Shell ---------- */
#app { display: flex; min-height: 100vh; }
.sidebar {
  width: 230px; background: #18271f; color: #cfe0d6; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.side-brand {
  display: flex; align-items: center; gap: 10px; padding: 20px 18px; font-weight: 700;
  font-size: 16px; line-height: 1.1; border-bottom: 1px solid rgba(255,255,255,.08);
}
.side-brand small { color: #8fb7a0; font-weight: 500; }
.side-brand .leaf { font-size: 24px; }
/* The company you are working in, under the wordmark. Settings, books and WhatsApp credentials
   are all per company, so having it permanently on screen stops you editing the wrong one. */
.side-brand-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.side-brand-name { font-size: 16px; font-weight: 700; line-height: 1.15; }
.side-co {
  font-size: 11.5px; font-weight: 600; color: #8fb7a0; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* min-height:0 lets this flex child actually shrink and scroll instead of pushing
   the Subscription link + footer off the bottom when the menu (e.g. many email
   accounts) grows taller than the screen. */
#nav { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 0; }
/* slim, unobtrusive scrollbar on the dark sidebar */
#nav::-webkit-scrollbar { width: 7px; }
#nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
#nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }
#nav a {
  display: flex; align-items: center; gap: 11px; padding: 11px 20px; color: #b9cdc1;
  text-decoration: none; font-size: 14px; font-weight: 500; border-left: 3px solid transparent;
}
#nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
#nav a.active { background: rgba(47,143,91,.22); color: #fff; border-left-color: var(--green); }
#nav a .ic { width: 20px; text-align: center; font-size: 16px; }
.nav-badge {
  margin-left: auto; margin-right: 2px; background: #25D366; color: #fff;
  border-radius: 12px; min-width: 24px; height: 22px; padding: 0 9px;
  font-size: 11.5px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center;
  animation: navBadgePulse 1.7s ease-out infinite;
}
.nav-badge.upd { background: var(--amber, #b8860b); }
/* The Messenger "New Message" badge is text (not a number) - smaller + more compact. */
#wa-nav-badge { font-size: 9px; height: 18px; padding: 0 7px; letter-spacing: .2px; }
@keyframes navBadgePulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%  { transform: scale(1.08); box-shadow: 0 0 0 7px rgba(37,211,102,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
/* respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) { .nav-badge { animation: none; } }
.wa-upd {
  padding: 14px 16px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 13px; color: var(--muted);
}
.wa-upd-title {
  font-size: 12.5px; letter-spacing: .01em;
  color: var(--muted); font-weight: 700; margin-bottom: 8px;
}
.wa-upd-row { display: flex; justify-content: space-between; gap: 8px; margin: 3px 0; }
.wa-upd-row span { color: var(--muted); }
.wa-upd-row b { color: var(--ink); font-weight: 650; text-align: right; }
.wa-upd-flag { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 600; }
.wa-upd-flag.ok { color: var(--green); }
.wa-upd-flag.has { color: var(--amber); }
.wa-upd-flag small { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }
/* clickable variant (an update is available) */
button.wa-upd-flag {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--line); border-radius: 0; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1.35; padding: 10px 0 0; color: var(--amber);
}
button.wa-upd-flag.has:hover { color: var(--green-dark); }
button.wa-upd-flag.has:hover small { color: var(--muted); }
.wa-upd-check {
  display: block; width: 100%; margin-top: 10px; background: none; border: 0;
  color: var(--green); cursor: pointer; font: inherit; font-size: 12px;
  text-decoration: underline; text-align: left; padding: 0;
}
.wa-upd-check:hover { color: var(--green-dark); }
/* Settings two-column layout: cards on the left, update panel on the right. */
.settings-layout { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.settings-side { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1180px){ .settings-side { width: 100%; max-width: 560px; } }
/* busy dialog */
.wa-upd-modal { text-align: center; padding: 6px 4px 2px; }
.wa-upd-spin {
  width: 34px; height: 34px; margin: 4px auto 14px; border-radius: 50%;
  border: 3px solid #e3ece7; border-top-color: var(--green);
  animation: waUpdSpin .9s linear infinite;
}
@keyframes waUpdSpin { to { transform: rotate(360deg); } }
.wa-upd-modal #wa-upd-msg { font-weight: 600; margin: 0 0 8px; }
.wa-upd-modal #wa-upd-msg.err { color: #c0392b; }
.wa-upd-modal .wa-upd-note { font-size: 12.5px; color: #6b7a72; margin: 0; }
@media (prefers-reduced-motion: reduce) { .wa-upd-spin { animation: none; } }
/* Drag handle on the sidebar's right edge - grab and drag left/right to resize.
   The sidebar is position:sticky (a positioning context), so this pins to its edge. */
.side-resize {
  position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
  cursor: col-resize; z-index: 30; touch-action: none;
}
.side-resize::after {                 /* thin line that lights up on hover/drag */
  content: ""; position: absolute; top: 0; right: 3px; width: 2px; height: 100%;
  background: transparent; transition: background .15s;
}
.side-resize:hover::after, .side-resize.dragging::after { background: var(--green); }
.sidebar.collapsed .side-resize { display: none; }   /* no resizing while collapsed to icons */

.side-foot { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; }
.side-foot #whoami { color: #8fb7a0; margin-bottom: 6px; }
.link-btn { background: none; border: 0; color: #cfe0d6; padding: 0; text-decoration: underline; font-size: 13px; }

main { flex: 1; min-width: 0; padding: 26px 32px; }  /* full window width; zoom out (Ctrl+-) to fit more */

/* ---------- Finance home (QuickBooks-style workflow canvas) ---------- */
.fin-wrap { display: flex; gap: 18px; align-items: flex-start; }
.fin-main { flex: 1; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.fin-side { width: 250px; display: flex; flex-direction: column; gap: 22px; }
.fin-sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 20px 14px; position: relative; }
.fin-chip { position: absolute; top: -10px; left: 16px; background: var(--green-light); color: var(--green-dark);
  font-size: 10.5px; font-weight: 800; letter-spacing: 1px; padding: 3px 12px; border-radius: 10px; border: 1px solid var(--line); }
.fin-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.fin-col { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.fin-col .fin-item { flex-direction: row; justify-content: flex-start; min-width: 0; padding: 10px 12px; }
.fin-item { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none;
  border: 1px solid transparent; border-radius: 10px; padding: 12px 14px; min-width: 104px;
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink); position: relative; }
.fin-item:hover { background: var(--bg); border-color: var(--line); }
.fin-ic { display: inline-flex; }
.fin-ic svg { width: 38px; height: 38px; }
.fin-col .fin-ic svg { width: 28px; height: 28px; }
.fin-soon { position: absolute; top: 5px; right: 6px; font-size: 8.5px; font-weight: 800; letter-spacing: .5px;
  color: #b8860b; background: #fdf6e3; border: 1px solid #ecd9a0; padding: 1px 5px; border-radius: 8px; }
.fin-col .fin-soon { position: static; order: 2; margin-left: auto; }
.fin-arrow { color: #b9c6bd; flex: 0 0 auto; }
@media (max-width: 900px) { .fin-wrap { flex-direction: column; } .fin-side { width: 100%; } }

/* ---------- Finance workspace: desktop with draggable child windows ---------- */
.ws { position: relative; margin: -26px -32px; height: 100vh; overflow: hidden; background: var(--ws-bg); }
.ws-win { position: absolute; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  box-shadow: 0 14px 44px rgba(0,0,0,.20); min-width: 340px; min-height: 220px; }
.ws-title { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 14px; background: #dfe9e2; border-bottom: 1px solid #cfdbd3;
  cursor: move; user-select: none; font-weight: 700; font-size: 13.5px; color: #2c3b32; }
.ws-ctl { display: flex; gap: 2px; }
.ws-ctl button { background: none; border: 0; cursor: pointer; font-size: 12px; line-height: 1;
  width: 30px; height: 24px; border-radius: 6px; color: var(--muted); }
.ws-ctl button:hover { background: var(--line); color: var(--ink); }
.ws-ctl button[data-w="close"]:hover { background: var(--danger); color: #fff; }
.ws-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.ws-grip { position: absolute; right: 1px; bottom: 1px; width: 18px; height: 18px; z-index: 6;
  cursor: nwse-resize; opacity: .5; border-bottom-right-radius: 9px;
  background: linear-gradient(135deg, transparent 0 55%, #93a79b 55% 61%, transparent 61% 70%,
    #93a79b 70% 76%, transparent 76% 85%, #93a79b 85% 91%, transparent 91%); }
.ws-grip:hover { opacity: 1; }
.ws-edge { position: absolute; top: 42px; bottom: 30px; width: 7px; cursor: ew-resize; z-index: 6; }
/* invoice sheets: the side strips also stay clear of the green band (top) and the footer buttons (bottom) */
.ws-win:has(.qb-sheet) > .ws-edge, .qb-sheet.qb-float > .ws-edge { top: 118px; bottom: 68px; }
.ws-edge-l { left: 0; } .ws-edge-r { right: 0; }
.ws-edge:hover { background: rgba(47,143,91,.16); }
.ws-home { padding: 18px; }
/* Email-invoice dialog: a movable/resizable window with the form + a live invoice
   preview side by side (QuickBooks-style). Sized by makeDialogWindow (inline px). */
.email-inv-dlg .modal-body { overflow: hidden; }        /* the panes scroll, not the whole body */
.email-inv-cols { display: flex; gap: 20px; align-items: stretch; height: 100%; }
.email-inv-form { flex: 0 0 44%; min-width: 0; overflow: auto; display: flex; flex-direction: column; }
/* the Message field grows to fill the tall left pane so there's plenty of room to type */
.email-inv-msg { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.email-inv-dlg .email-inv-msg textarea { flex: 1; min-height: 220px; resize: vertical; }
.em-ccbcc-toggle { font-size: 11.5px; font-weight: 600; margin-left: 8px; color: var(--green-dark); }
.em-ccbcc-toggle.on { text-decoration: underline; }
.email-inv-preview { flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: #eef1ef; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.email-inv-preview-label { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; color: var(--muted); margin-bottom: 10px; }
.email-inv-preview-page { flex: 1; overflow: auto; min-height: 0; }
/* Render the real invoice sheet, scaled to fit the pane (transform doesn't shrink the
   layout box, so the wrapper is widened by 1/scale to compensate). */
.email-inv-preview-page .inv-sheet { transform: scale(.72); transform-origin: top left; width: 138.9%;
  flex: none; min-height: 0; box-shadow: 0 2px 10px rgba(0,0,0,.12); padding: 30px 34px; margin-bottom: -28%; }
.email-inv-preview-page .table-wrap { overflow: visible; }   /* show every column in the preview */
@media (max-width: 780px) {
  .email-inv-cols { flex-direction: column; height: auto; }
  .email-inv-form { flex: none; }
  .email-inv-preview-page .inv-sheet { transform: scale(.9); width: 111%; margin-bottom: -10%; }
}

/* Dynamic pricing - FIFO batches (inside the item edit window) */
.med-dyn { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.med-dyn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.med-dyn-head b { font-size: 13px; }
.dyn-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dyn-table th { text-align: left; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.dyn-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.dyn-table .right { text-align: right; }
.dyn-table tr.dyn-active { background: var(--green-light); }
.dyn-table .btn.sm { padding: 2px 8px; }

/* Reports (QuickBooks-style Report Center) */
.rep-center { padding: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.rep-cat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.rep-card { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 10px 6px; cursor: pointer; }
.rep-cat .rep-card:first-of-type { border-top: 0; }
.rep-card b { display: block; font-size: 13.5px; color: var(--ink); }
.rep-card span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.rep-card:hover b { color: var(--green-dark); }
.rep-body { padding: 0 0 12px; }
.rep-select, .rep-date { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff; }
tr.rep-total td { font-weight: 700; border-top: 2px solid var(--ink); background: #fff; }
tr.rep-grand td { font-size: 15px; }
tr.rep-sec td { font-weight: 700; background: #f0f5f1; }
.rep-ind td:first-child { padding-left: 34px; }
.rep-neg { color: #b3261e; }

/* Chart of Accounts */
.coa-sec td { background: #eef4ef; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .9px; padding: 6px 16px; border-bottom: 1px solid var(--line); }
.coa-actions .btn.sm { padding: 3px 10px; font-size: 12px; }
.coa-indent { color: var(--muted); }
.coa-caret { background: none; border: 0; cursor: pointer; font-size: 17px; line-height: 1; font-weight: 700;
  color: var(--green-dark); padding: 0; margin-right: 7px; width: 18px; display: inline-block; text-align: center; vertical-align: -2px; }
.coa-caret:hover { color: var(--green); transform: scale(1.15); }
.coa-caret-sp { display: inline-block; width: 18px; margin-right: 7px; }
.coa-kidcount { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--green-dark);
  background: var(--green-light); border-radius: 9px; padding: 0 7px; margin-left: 8px; }
/* Tint parent (main) rows and their sub-accounts so the grouping reads at a glance. */
tr.coa-main > td { background: #e4f1e9; }
tr.coa-main > td:first-child { box-shadow: inset 3px 0 0 var(--green); }
tr.coa-sub > td { background: #f5faf7; }
tr.coa-sub.coa-d2 > td { background: #eef6f1; }
tr.coa-sub.coa-d3 > td { background: #e7f2ea; }
tr.coa-sub > td:first-child { box-shadow: inset 3px 0 0 #cfe0d6; }
/* the invoice page rendered inside a workspace window */
.ws-body.iv-in-win { padding: 14px 18px 18px; background: var(--bg); display: block; }
.ws-body.iv-in-win .page-head { margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.ws-body.iv-in-win .page-head h2 { font-size: 18px; }
/* Invoice detail: green "hat" header, matching every other finance window */
.ws-body.iv-in-win > .page-head { background: var(--green-dark); color: #fff; margin: -14px -18px 16px; padding: 13px 18px; align-items: center; }
.ws-body.iv-in-win > .page-head > div:first-child { min-width: 0; }
.ws-body.iv-in-win > .page-head h2 { color: #fff; }
.ws-body.iv-in-win > .page-head h2 .muted { color: #cfe0d6 !important; }
/* Invoice detail header: keep the ‹ › browse arrows pinned at the far left so they don't
   shift under the cursor when an invoice's action buttons (Mark paid / Refund / Edit …) change
   width. Arrows live in a left group; the action buttons stay right-anchored and free to reflow. */
.iv-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.iv-nav { display: inline-flex; align-items: center; flex: none; }
.iv-acts { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ws-body.iv-in-win .inv-sheet { padding: 30px 34px; }
.ws-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 99990; display: flex; gap: 8px;
  align-items: center; padding: 7px 14px; background: rgba(24, 39, 31, .94); }
.ws-chip { background: #2e4237; color: #cfe0d6; border: 0; border-radius: 7px; padding: 6px 14px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; touch-action: none; }
.ws-chip:hover { background: #3a5546; color: #fff; }
.ws-chip.active { background: var(--green); color: #fff; }
.ws-chip-drag { opacity: .9; box-shadow: 0 5px 16px rgba(0,0,0,.4); transform: translateY(-2px) scale(1.03);
  cursor: grabbing; z-index: 2; position: relative; }
/* pages rendered inside a window: neutralize the full-page pinned-header bleed */
.ws-win .page-pin { position: sticky; top: 0; margin: 0; padding: 14px 16px 10px; }
.ws-win .page-head { margin-bottom: 12px; }
.ws-win .page-head h2 { font-size: 17px; }
.ws-win .table-wrap { margin: 0 16px 16px; }
.ws-win .pager { margin: 0 16px 14px; }
/* Green "hat" header for list-style workspace windows (matches the invoice band) */
.win-band { display: flex; align-items: center; gap: 12px; background: var(--green-dark); padding: 12px 18px; flex-wrap: wrap; row-gap: 8px; }
.ws-win .win-band { position: sticky; top: 0; z-index: 20; }
.win-btn:disabled { opacity: .5; cursor: default; }
.win-band .rep-select, .win-band .rep-date { background: #fff; border: 0; border-radius: 7px;
  padding: 7px 10px; font-size: 13px; color: var(--ink); cursor: pointer; }
.win-band-head { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: none; }
.win-band-head h2 { margin: 0; font-size: 17px; color: #fff; line-height: 1.2; white-space: nowrap; }
.win-band-head .sub { font-size: 12px; color: #cfe0d6; margin-top: 1px; white-space: nowrap; }
/* Workspace company switcher (multi-company) - sits at the right of the green home band. */
.ws-company-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; flex: none;
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.30);
  border-radius: 9px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; max-width: 320px; }
.ws-company-btn:hover { background: rgba(255,255,255,.24); }
.ws-company-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-company-caret { opacity: .85; font-size: 11px; }
.ws-co-menu { background: #fff; border: 1px solid var(--line, #dbe3ea); border-radius: 11px; min-width: 234px;
  box-shadow: 0 14px 38px rgba(0,0,0,.20); padding: 6px; }
.ws-co-menu-head { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; color: var(--muted, #7a8a83); padding: 7px 10px 5px; }
.ws-co-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--ink, #1f2a30); }
.ws-co-item:hover { background: #f2f6f4; }
.ws-co-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-co-dot { width: 8px; height: 8px; border-radius: 50%; background: #cdd8d2; flex: none; }
.ws-co-item.on .ws-co-dot { background: var(--green, #2f8f5b); box-shadow: 0 0 0 3px rgba(47,143,91,.18); }
.ws-co-item.on { font-weight: 700; }
.ws-co-new { color: var(--green, #2f8f5b); font-weight: 700; border-top: 1px solid var(--line, #eef1ef); margin-top: 4px; }
.win-band-search { flex: 0 1 300px; min-width: 120px; background: #fff; border: 0; border-radius: 7px;
  padding: 8px 11px; font-size: 14px; margin-left: 6px; color: var(--ink); }
.win-band-search::placeholder { color: #9aa8a0; }
.modal-inline-action { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.cd-cur.locked input { background: #f4f7f5; color: var(--muted); cursor: not-allowed; }
.cd-lock { font-size: 15px; opacity: .85; padding: 0 6px; }

/* ---------- Customer Center (QuickBooks-style master-detail) ---------- */
.cc-wrap { display: flex; min-height: 0; height: calc(100vh - 176px); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ws-win .cc-wrap { flex: 1; height: auto; border: 0; border-radius: 0; }
.cc-list-pane { width: 340px; flex: none; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.cc-list-top { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cc-filter { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; background: #fff; color: var(--ink); cursor: pointer; }
.cc-list-head { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 10.5px;
  font-weight: 800; letter-spacing: .5px; color: var(--muted); background: #f4f7f5; border-bottom: 1px solid var(--line); }
.cc-list { flex: 1; overflow: auto; min-height: 0; }
.cc-row { display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer;
  border-bottom: 1px solid #eef2ef; font-size: 13.5px; }
.cc-row:hover { background: var(--green-light); }
.cc-row.sel { background: var(--green); color: #fff; }
.cc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-bal { flex: none; width: 60px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.cc-bal.owed { color: #b26a00; font-weight: 700; }
.cc-cr { flex: none; width: 84px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.cc-cr.has { color: var(--green-dark); font-weight: 700; }
.cc-row.sel .cc-bal, .cc-row.sel .cc-bal.owed, .cc-row.sel .cc-cr, .cc-row.sel .cc-cr.has { color: #fff; }
.cc-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line); font-size: 12px; }
.cc-pager .btn.sm { padding: 3px 12px; }
.cc-vsplit { flex: none; width: 7px; cursor: col-resize; position: relative; align-self: stretch; touch-action: none; }
.cc-vsplit::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: var(--line); }
.cc-vsplit:hover::after, .cc-vsplit.drag::after { background: var(--green); width: 2px; left: 2.5px; }
.cc-hsplit { flex: none; height: 7px; cursor: row-resize; position: relative; touch-action: none; }
.cc-hsplit::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--line); }
.cc-hsplit:hover::after, .cc-hsplit.drag::after { background: var(--green); height: 2px; top: 2.5px; }
.cc-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.cc-info { flex: none; overflow: auto; }
.cc-blank { padding: 44px 24px; color: var(--muted); text-align: center; }
.cc-blank.sm { padding: 22px; text-align: left; }
.cc-info { padding: 16px 22px; }
.cc-info-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cc-info-head h2 { margin: 0; font-size: 20px; }
.cc-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 30px; }
.cc-fld { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cc-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.cc-val { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.cc-val.strong { font-weight: 700; font-size: 15px; }
.cc-tabs { display: flex; align-items: center; gap: 2px; padding: 8px 14px 0; border-bottom: 1px solid var(--line); flex: none; }
.cc-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; margin-bottom: -1px;
  font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cc-tab:hover { color: var(--ink); }
.cc-tab.active { color: var(--green-dark); border-bottom-color: var(--green); }
.cc-tab-spacer { flex: 1; }
.cc-tab-body { flex: 1; overflow: auto; min-height: 0; }
.cc-table { width: 100%; border-collapse: collapse; }
.cc-table th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: var(--muted);
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: #f8faf9; position: sticky; top: 0; z-index: 1; }
.cc-table td { padding: 8px 12px; border-bottom: 1px solid #eef2ef; font-size: 13px; white-space: nowrap; }
.cc-table th.right, .cc-table td.right { text-align: right; }
.cc-table tr.clickable:hover { background: var(--green-light); cursor: pointer; }
.cc-table td.owed { color: #b26a00; font-weight: 700; }
.cc-aging { color: #b3261e; font-weight: 700; }
@media (max-width: 820px) { .cc-info-grid { grid-template-columns: 1fr; } .cc-list-pane { width: 250px; } }

/* ---------- Enter Bills (accounts payable) ---------- */
.bill-wrap { display: flex; flex: 1; min-height: 0; }
.bill-main { flex: 1; min-width: 0; overflow: auto; padding: 16px 18px; }
.bill-side { width: 280px; flex: none; border-left: 1px solid var(--line); background: #f7faf8; overflow: auto; padding: 14px 16px; }
.bill-sheet { background: #f4f7fb; border: 1px solid #d7e1ee; border-radius: 10px; padding: 14px 18px 16px; }
.bill-word { font-size: 30px; font-weight: 800; color: #3a4a5a; letter-spacing: .5px; margin-bottom: 8px; line-height: 1; }
.bill-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px 24px; align-items: start; }
.bill-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bill-field.span2 { grid-column: 1 / -1; }
.bill-field.grid-tall { grid-row: span 2; }
.bill-field label { font-size: 10px; font-weight: 800; letter-spacing: .8px; color: var(--muted); }
.bill-field input, .bill-field textarea { border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font-size: 13.5px; background: #fff; color: var(--ink); width: 100%; }
.bill-field input[readonly] { background: #eef2f6; color: var(--muted); font-weight: 700; }
.bill-field textarea { resize: vertical; min-height: 44px; }
.bill-lines-head { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 6px; font-size: 14px; }
.bill-lines-wrap { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.bill-lines-tbl { width: 100%; border-collapse: collapse; }
.bill-lines-tbl th { text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--muted); background: #f4f7f5; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.bill-lines-tbl th.right { text-align: right; }
.bill-lines-tbl td { padding: 4px 8px; border-bottom: 1px solid #eef2ef; }
.bill-lines-tbl td.right { text-align: right; }
.bill-lines-tbl select, .bill-lines-tbl input { border: 1px solid transparent; border-radius: 6px; padding: 6px 7px; font-size: 13px; width: 100%; background: #fff; color: var(--ink); }
.bill-lines-tbl select:focus, .bill-lines-tbl input:focus { border-color: var(--green); outline: none; }
.bill-lines-tbl .bl-amt { text-align: right; }
.bl-x { background: none; border: 0; color: #b7c2bb; cursor: pointer; font-size: 13px; }
.bl-x:hover { color: var(--danger); }
.bill-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--card); flex: none; }
.bill-total-big { font-size: 14px; color: var(--muted); }
.bill-total-big b { font-size: 20px; color: var(--ink); margin-left: 8px; }
.bill-toggle { color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; cursor: pointer; }
.bill-toggle input { accent-color: #fff; }
.bill-side-h { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.bill-side-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bill-side-edit { background: none; border: 1px solid var(--line); border-radius: 6px; width: 27px; height: 25px; cursor: pointer; color: var(--muted); flex: none; }
.bill-side-edit:hover { background: var(--green-light); color: var(--green-dark); border-color: var(--green); }
.bill-side-row b.bill-ell { max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.bill-side-sec { font-size: 10px; font-weight: 800; letter-spacing: .8px; color: var(--muted); margin: 14px 0 6px; }
.bill-side-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 2px; font-size: 13px; border-bottom: 1px solid #eef2ef; }
.bill-side-row.clickable { cursor: pointer; }
.bill-side-row.clickable:hover { background: var(--green-light); }
.bill-side-row b.owed { color: #b26a00; }

/* ---------- Account register (ledger) ---------- */
.reg-wrap { flex: 1; min-height: 0; overflow: auto; }
.reg-tbl { width: 100%; border-collapse: collapse; }
.reg-tbl th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .5px;
  color: var(--muted); background: #f4f7f5; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.reg-tbl th.right { text-align: right; }
.reg-tbl td { padding: 3px 8px; border-bottom: 1px solid #eef2ef; font-size: 13px; vertical-align: middle; }
.reg-tbl td.right { text-align: right; }
.reg-row.ro td { background: #f7faf8; color: var(--muted); }
.reg-row.ro td b { color: var(--ink); }
.reg-row.reg-open { cursor: pointer; }
.reg-row.reg-open:hover > td { background: #eef4f0; }
.reg-tbl tr.reg-row.sel > td { background: #d7e9de; color: var(--ink); }
.reg-row.sel:focus { outline: none; }
.reg-entry td { background: #fffef4; }
.reg-tbl .re-c { width: 100%; border: 1px solid transparent; border-radius: 5px; padding: 5px 6px; font-size: 13px; background: transparent; color: var(--ink); }
.reg-tbl .re-c:hover { border-color: var(--line); background: #fff; }
.reg-tbl .re-c:focus { border-color: var(--green); background: #fff; outline: none; }
.reg-tbl .re-c.right { text-align: right; }
.reg-del, .reg-rmrow { background: none; border: 0; color: #b7c2bb; cursor: pointer; font-size: 13px; }
.reg-del:hover, .reg-rmrow:hover { color: var(--danger); }
.reg-foot { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--card); flex: none; }
.reg-ending { font-size: 13px; color: var(--muted); }
.reg-ending b { font-size: 19px; color: var(--ink); margin-left: 8px; }
.reg-ro-hint { display: inline-flex; align-items: center; gap: 6px; }
.reg-ro-tag { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  background: rgba(255,255,255,.18); color: #eaf3ee; border-radius: 6px; padding: 2px 7px; margin-left: 8px; vertical-align: 1px; }

/* ---------- Pay Bills ---------- */
.pb-tbl td.pb-chk, .pb-tbl th.pb-chk { text-align: center; padding-left: 6px; padding-right: 6px; }
.pb-tbl .pb-check, .pb-tbl #pb-all { width: 15px; height: 15px; cursor: pointer; accent-color: var(--green); }
.pb-row { cursor: default; }
.pb-row:hover > td { background: #f4f8f6; }
.pb-tbl tr.pb-row.pb-sel > td { background: #e4f1e9; }
.pb-overdue { color: var(--danger); font-weight: 600; }
.pb-tbl .pb-amt { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 5px 6px; font-size: 13px;
  background: #fffef4; color: var(--ink); text-align: right; }
.pb-tbl .pb-amt:focus { border-color: var(--green); background: #fff; outline: none; }
.pb-open { cursor: pointer; }
.pb-filter { display: inline-flex; align-items: center; gap: 6px; color: #eaf3ee; font-size: 12.5px; font-weight: 600; }
.pb-filter input[type="checkbox"] { accent-color: #fff; }
.pb-date { width: 110px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: 13px; }
.win-band .pb-filter .pb-date { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.14); color: #fff; }
.win-band .pb-filter .pb-date::placeholder { color: #cfe0d6; }
.pb-foot { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--card); flex: none; flex-wrap: wrap; }
.pb-pay { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pb-pay label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pb-pay select { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: 13px; background: #fff; color: var(--ink); }
.pb-total { font-size: 13px; color: var(--muted); }
.pb-total b { font-size: 19px; color: var(--ink); margin-left: 8px; }
.pb-foot .btn:disabled { opacity: .5; cursor: not-allowed; }
.win-band-jump { display: inline-flex; align-items: center; gap: 8px; margin-left: 18px;
  background: rgba(255,255,255,.14); border-radius: 8px; padding: 5px 6px 5px 12px; flex: none; }
.win-band-jump > span { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #cfe0d6; }
.win-jump-input { background: #fff; border: 0; border-radius: 6px; padding: 6px 10px; font-size: 13px;
  color: var(--ink); width: 124px; }
.win-jump-input::placeholder { color: #9aa8a0; }
.win-jump-input.bad { box-shadow: 0 0 0 2px #e5533c; }
.win-band-actions { margin-left: auto; display: flex; gap: 8px; flex: none; }
.win-btn { background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 7px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.win-btn:hover { background: rgba(255,255,255,.28); }
.win-btn.primary { background: #fff; color: var(--green-dark); font-weight: 700; }
.win-btn.primary:hover { background: #eaf3ec; }
/* Calendar inside a workspace window: fit the day-view to the window and scroll
   internally, instead of the full-page calc(100vh) height that overflows the window. */
.ws-win .cal-layout { padding: 16px; flex: 1; min-height: 0; align-items: stretch; }
.ws-win .cal-side { align-self: flex-start; }
.ws-win .day-col { display: flex; flex-direction: column; }
.ws-win .day-scroll { height: auto; flex: 1; min-height: 0; }

/* the invoice sheet, when it lives inside a window instead of the overlay */
.qb-sheet.qb-in-win { flex: 1; display: flex; flex-direction: column; min-height: 0; width: auto;
  box-shadow: none; border-radius: 0; max-width: none; max-height: none; margin: 0; }

/* ---------- QuickBooks-style invoice sheet ---------- */
.qb-back { align-items: flex-start; padding: 2.5vh 2vw; }
/* floating-dialog variant (opened outside the workspace): movable/resizable/maximizable */
.qb-sheet.qb-float { max-width: none; max-height: none; margin: 0; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.qb-float .qb-top { cursor: move; user-select: none; }
.qb-float .qb-top .ws-ctl .x { width: 30px; height: 24px; font-size: 18px; line-height: 1; border-radius: 6px; }
.qb-float .qb-top .ws-ctl .x:hover { background: var(--danger); color: #fff; }
.qb-float .ws-grip { border-bottom-right-radius: 12px; }
.qb-sheet { background: #fff; border-radius: 12px; width: 100%; max-width: 1240px; margin: 0 auto;
  max-height: 95vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.30); }
.qb-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px;
  border-bottom: 1px solid #cfdbd3; background: #dfe9e2; }
.qb-top h3 { margin: 0; font-size: 15px; }
.qb-top .x { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); }
.qb-band { display: flex; align-items: flex-end; gap: 18px; background: var(--green-dark); padding: 12px 20px; }
.qb-band label { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #cfe0d6; margin-bottom: 4px; }
.qb-band-cust input { width: 320px; max-width: 60vw; background: #fff; border: 0; border-radius: 7px; padding: 8px 11px; font-size: 14px; }
.qb-nav { display: flex; gap: 4px; padding-bottom: 1px; }
.qb-nav button, #qb-find, #qb-print, #qb-email, #qb-open { background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.28); border-radius: 7px; cursor: pointer; }
.qb-nav button, #qb-print, #qb-email, #qb-open { width: 34px; height: 34px; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }
#qb-find { padding: 0 14px; height: 34px; font-size: 13px; font-weight: 600; margin-bottom: 1px; }
.qb-nav button:hover, #qb-find:hover, #qb-print:hover, #qb-email:hover, #qb-open:hover { background: rgba(255,255,255,.28); }
.qb-viewonly { align-self: center; background: #fdf6e3; color: #b8860b; border: 1px solid #ecd9a0;
  font-size: 11px; font-weight: 800; letter-spacing: .6px; padding: 4px 12px; border-radius: 9px; white-space: nowrap; }
.row-inactive td { opacity: .45; }
.row-inactive td:last-child { opacity: 1; }
.ev-flash { animation: evflash 1.4s ease-out 2; }
@keyframes evflash { 0% { box-shadow: 0 0 0 4px var(--green); } 100% { box-shadow: 0 0 0 0 rgba(47,143,91,0); } }
/* The appointment you jumped to keeps a gentle "breathing" glow so you can spot it in a
   busy day - until you click it. Lifts above (and un-dims) the other blocks. */
.ev.ev-breathe { animation: evbreathe 1.7s ease-in-out infinite; z-index: 9; opacity: 1; }
.ev.ev-breathe.out-done, .ev.ev-breathe.out-noshow { background: var(--green-light); border-left-color: var(--green); opacity: 1; }
@keyframes evbreathe {
  0%, 100% { box-shadow: 0 0 0 2px var(--green), 0 1px 3px rgba(0,0,0,.10); }
  50%      { box-shadow: 0 0 0 5px rgba(47,143,91,.40), 0 3px 12px rgba(47,143,91,.35); }
}
.qb-find-list { max-height: 260px; overflow-y: auto; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 6px; }
/* dialog-as-window (makeDialogWindow): Find Invoices, New email, … */
.dlg-win { display: flex; flex-direction: column; max-width: none; }
.dlg-win .modal-body { flex: 1; overflow-y: auto; min-height: 0; }
.dlg-win .modal-head { cursor: move; user-select: none; }
.dlg-win .ws-grip { border-bottom-right-radius: 12px; }
.qb-find-dlg .qb-find-list { max-height: none; overflow: visible; }
.qb-tmpl { margin-left: auto; font-size: 12px; color: #cfe0d6; padding-bottom: 8px; }
.qb-tmpl b { color: #fff; }
.qb-cols { display: flex; flex: 1; min-height: 0; }
.qb-mainpane { flex: 1; min-width: 0; padding: 20px 24px; overflow-y: auto; position: relative; }
.qb-pastdue { position: absolute; top: 74px; right: 36px; z-index: 5; font-size: 42px; font-weight: 800;
  letter-spacing: 3px; color: rgba(179,38,30,.28); border: 5px solid rgba(179,38,30,.28); border-radius: 10px;
  padding: 4px 18px; transform: rotate(-14deg); pointer-events: none; }
.qb-sidepane { width: 264px; flex: 0 0 auto; background: #f7faf8; padding: 16px 18px; overflow-y: auto; }
.qb-split { flex: 0 0 7px; cursor: col-resize; border-left: 1px solid var(--line); background: transparent; }
.qb-split:hover, .qb-split:active { background: var(--green-light); border-left-color: var(--green); }
.qb-headrow { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.qb-invword { font-size: 34px; font-weight: 300; letter-spacing: .5px; color: #33443a; }
.qb-meta { display: flex; gap: 16px; margin-left: auto; }
.qb-field label, .qb-billto label { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px;
  color: var(--muted); margin-bottom: 4px; }
.qb-field input[type="date"] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.qb-due-row { position: relative; display: flex; gap: 4px; align-items: stretch; }
.qb-term-num { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 8px; background: #f4f7f5; font-weight: 700; font-size: 13px; color: var(--ink); }
.qb-due-btn { width: 30px; align-self: stretch; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 12px; }
.qb-due-btn:hover { background: var(--green-light); color: var(--green-dark); border-color: var(--green); }
.qb-due-btn:disabled { opacity: .4; cursor: default; }
.qb-due-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 60; background: #fff;
  border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 10px 28px rgba(0,0,0,.16);
  padding: 4px; display: flex; flex-direction: column; min-width: 110px; }
.qb-due-menu[hidden] { display: none; }
.qb-due-menu button { text-align: left; background: none; border: 0; padding: 7px 12px; border-radius: 6px;
  font-size: 13px; cursor: pointer; }
.qb-due-menu button:hover { background: var(--green-light); color: var(--green-dark); }
.qb-ro { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px;
  background: var(--bg); color: var(--muted); min-width: 64px; text-align: center; }
.qb-billto { min-width: 210px; max-width: 280px; }
.qb-billto > div { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; font-size: 13px; min-height: 40px; line-height: 1.45; }
.qb-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.qb-table th { text-align: left; font-size: 10.5px; letter-spacing: .8px; color: var(--muted);
  border-bottom: 2px solid var(--line); padding: 7px 8px; }
.qb-table th.right { text-align: right; }
.qb-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.qb-table tbody tr:nth-child(odd) td { background: #f3f9f5; }
.qb-table input { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 6px;
  padding: 7px 8px; font-size: 13.5px; }
.qb-table input:focus { background: #fff; border-color: var(--green); outline: none; }
.qb-amt { font-weight: 600; white-space: nowrap; }
.qb-totals { margin-left: auto; width: 300px; margin-top: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.qb-totals > div { display: flex; justify-content: space-between; align-items: baseline; }
.qb-totals > div[hidden] { display: none; }
.qb-totals span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .8px; }
.qb-grand { border-top: 2px solid var(--ink); padding-top: 8px; }
.qb-grand b { font-size: 17px; }
/* discount input inside the totals stack (PERCENT off BEFORE tax) */
.qb-totals .qb-disc-line { align-items: center; }
.qb-totals .qb-disc-wrap { display: flex; align-items: center; gap: 10px; }
.qb-totals .qb-disc-line input { width: 58px; text-align: right; padding: 4px 8px; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.qb-totals .qb-disc-line input:focus { border-color: var(--green); outline: none; }
.qb-foot { display: flex; gap: 10px; align-items: center; padding: 13px 24px; border-top: 1px solid var(--line); background: #f7faf8; }
.qb-side-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qb-side-edit { background: none; border: 1px solid var(--line); border-radius: 6px; width: 27px; height: 25px;
  cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; flex: 0 0 auto; }
.qb-side-edit:hover { background: var(--green-light); color: var(--green-dark); border-color: var(--green); }
.qb-side-h { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--muted); margin: 16px 0 6px;
  border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.qb-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 4px 0; }
.qb-kv span { color: var(--muted); }
.qb-kv b { font-weight: 600; text-align: right; }
.qb-kv b { min-width: 0; }
.qb-ell { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-red { color: var(--danger); }
.qb-link { cursor: pointer; border-radius: 6px; }
.qb-link:hover { background: var(--green-light); }
.qb-side-empty { color: var(--muted); font-size: 12.5px; margin-top: 10px; line-height: 1.5; }
@media (max-width: 900px) { .qb-sidepane, .qb-split { display: none; } }

/* ---------- Page bits ---------- */
/* Pinned page header (Customers / Inventory / Invoices): the title row + search bar stay
   fixed at the top of the window while only the table scrolls beneath them. Bleeds over
   main's 26/32px padding so table rows never peek out around the pinned block's edges. */
.page-pin { position: sticky; top: 0; z-index: 20; background: var(--bg);
  margin: -26px -32px 16px; padding: 26px 32px 10px; }
.page-pin .toolbar { margin-bottom: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
/* space out the action buttons in a page header so they don't touch */
.page-head button + button { margin-left: 10px; }
.page-head h2 { margin: 0; font-size: 22px; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

.btn {
  background: var(--green); color: #fff; border: 0; padding: 9px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
}
.btn:hover { background: var(--green-dark); }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--bg); }
.btn.danger { background: var(--danger); }
/* Amber "think before you click" button, for actions that overwrite data but are not deletions.
   Dark text on amber, because white on yellow is unreadable. */
.btn.warn { background: #f2b202; color: #3d2c00; border: 1px solid #d99e00; }
.btn.warn:hover { background: #dea201; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
/* Restore dialog: a proper drop target instead of the browser's raw file input, which looks
   unfinished next to the rest of the app. The native input stays in the DOM but hidden, so
   clicking the label still opens the file chooser and keyboard users keep the same path. */
.rs-drop {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 26px 18px; border: 2px dashed var(--line); border-radius: 12px;
  background: var(--bg); cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s;
}
.rs-drop:hover, .rs-drop.over { border-color: var(--green); background: var(--green-light); }
.rs-drop.chosen { border-style: solid; border-color: var(--green); background: var(--green-light); }
.rs-drop-ic { font-size: 30px; line-height: 1; }
.rs-drop-main { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.rs-drop-sub { font-size: 12.5px; color: var(--muted); }
.rs-group { margin: 16px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
            text-transform: uppercase; color: var(--muted); }
.rs-count { font-size: 12.5px; color: var(--muted); }

.toolbar { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.search { flex: 1; min-width: 200px; }
input.search, .field input, .field select, .field textarea {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; width: 100%;
  background: #fff; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); border-color: var(--green); }

/* phone/mobile with a fixed, non-editable country-code chip */
.ph-input { display: flex; }
.ph-input input { flex: 1; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ph-cc { display: inline-flex; align-items: center; padding: 0 9px; background: #eef1ef; border: 1px solid var(--line);
  border-right: 0; border-radius: 8px 0 0 8px; color: #333; font-size: 14px; font-weight: 600; white-space: nowrap; user-select: none; }
.ph-cc:empty { display: none; }                 /* no country selected -> plain input */
.ph-cc:empty + input { border-radius: 8px; }

/* country picker dropdown (all countries shown; matches float to the top) */
.cc-field { position: relative; }
.cc-dd { position: absolute; left: 0; right: 0; top: 100%; margin-top: 3px; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.18); max-height: 220px; overflow-y: auto; z-index: 50; }
.cc-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer; font-size: 14px; }
.cc-opt:hover, .cc-opt.active { background: var(--green-light); }
.cc-opt .cc-pfx { color: var(--muted); font-size: 12.5px; }

/* Cards / stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .n { font-size: 26px; font-weight: 700; color: var(--green-dark); }
.stat .l { color: var(--muted); font-size: 12.5px; margin-top: 3px; text-transform: uppercase; letter-spacing: .03em; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card h3 { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.card-head-flex { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.card-head-flex h3 { padding: 0; border: 0; }
.card .card-body { padding: 14px 18px; }

/* Tables */
/* Only the page scrolls vertically (the sidebar is sticky and stays put). The table keeps
   horizontal scroll for wide columns, but no vertical scroll of its own - otherwise Windows
   shows TWO vertical scrollbars (page + table) and you'd scroll inside both. */
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow); }
/* always-visible green horizontal scrollbar so you can scroll right to reach clipped columns */
.table-wrap::-webkit-scrollbar { height: 13px; width: 13px; }
.table-wrap::-webkit-scrollbar-track { background: #eef1ef; border-radius: 0 0 var(--radius) var(--radius); }
.table-wrap::-webkit-scrollbar-thumb { background: var(--green); border-radius: 7px; border: 3px solid #eef1ef; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--green-dark); }
.table-wrap { scrollbar-color: var(--green) #eef1ef; }   /* Firefox */

/* Checkbox column (multi-select for bulk email) */
.chk-col { width: 34px; text-align: center; overflow: visible !important; }
.chk-col input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--green); vertical-align: middle; }

/* WhatsApp chat page */
.wa-hint { background: #eef7f0; border: 1px solid #cfe8d6; color: #2c6b40; border-radius: 8px;
  padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.wa-hint a { color: #1c7c3c; font-weight: 600; }
.btn.wa-btn { background: #25d366; border-color: #25d366; color: #fff; }
.btn.wa-btn:hover { background: #1eb658; border-color: #1eb658; }

/* ---- Embedded WhatsApp inbox ---- */
.wa-me-head { display: flex; align-items: center; gap: 14px; }
.wa-me-av { width: 46px; height: 46px; min-width: 46px; font-size: 18px; cursor: pointer; position: relative; }
.wa-me-av:hover { filter: brightness(.9); }
/* "Change photo" badge - a crisp drawn camera, not the 📷 emoji (which rendered as
   an unreadable white dot at this size). */
.wa-me-av::after {
  content: "";
  position: absolute; right: -3px; bottom: -3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232f8f5b' d='M9 5h6l1.3 2H20a2.2 2.2 0 0 1 2.2 2.2V18A2.2 2.2 0 0 1 20 20.2H4A2.2 2.2 0 0 1 1.8 18V9.2A2.2 2.2 0 0 1 4 7h3.7z'/%3E%3Ccircle cx='12' cy='13.4' r='3.7' fill='%23ffffff'/%3E%3Ccircle cx='12' cy='13.4' r='1.9' fill='%232f8f5b'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  border: 1px solid #e6ece8;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* Non-admins can't change the business profile, so don't dangle a camera badge at them. */
.wa-me-av.no-edit { cursor: default; }
.wa-me-av.no-edit:hover { filter: none; }
.wa-me-av.no-edit::after { display: none; }
.wa-tabs { display: flex; align-items: center; gap: 8px; }
/* View actions (Unread / Archived / New) sit in the page header rather than the list column.
   margin-left:auto groups them with the connector chips on the right; the margin reset stops
   .page-head's "button + button" rule from stacking on top of the flex gap. */
.wa-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.wa-actions button + button { margin-left: 0; }

/* your profile panel (modal) */
.wa-pf { text-align: center; }
.wa-pf-pic { width: 96px; height: 96px; border-radius: 50%; margin: 4px auto 10px; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; background-size: cover; background-position: center; }
.wa-pf-pic.has-pic { color: transparent; font-size: 0; }
.wa-pf-name { font-weight: 700; font-size: 16px; margin-top: 10px; }
.wa-pf-num { font-size: 13px; }
.wa-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--border, #dde3dd); background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: #333; }
.wa-tab.active { background: #e7f6ec; border-color: #9fd9b4; color: #1c7c3c; }
/* colour-coded actions, matching the soft-tint style of the active tab */
#wa-restart { background: #fdf3d3; border-color: #e6c757; color: #8a6a12; }
#wa-restart:hover:not(:disabled) { background: #fbecba; border-color: #dcb941; }
#wa-unlink { background: #fdeaea; border-color: #e3a1a1; color: #b3261e; }
#wa-unlink:hover:not(:disabled) { background: #fadada; border-color: #d98a8a; }
.wa-dot { width: 9px; height: 9px; border-radius: 50%; background: #c2c8c2; }
.wa-dot.on { background: #25d366; } .wa-dot.wait { background: #f0ad3c; } .wa-dot.off { background: #c2c8c2; }

.wa-body { height: calc(100vh - 150px); min-height: 420px; }
.wa-center { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }

.spinner { width: 34px; height: 34px; border: 3px solid #d9e4dc; border-top-color: #25d366; border-radius: 50%; animation: waspin .8s linear infinite; }
@keyframes waspin { to { transform: rotate(360deg); } }

/* connect / QR screens */
.wa-connect { max-width: 460px; margin: 4vh auto 0; text-align: center; background: #fff; border: 1px solid var(--border, #dde3dd); border-radius: 12px; padding: 30px 28px; }
.wa-connect h3 { margin: 6px 0 14px; }
.wa-big { font-size: 44px; }
.wa-qr { width: 300px; height: 300px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; border-radius: 10px; }
.wa-qr img { border-radius: 6px; }
.wa-steps { text-align: left; max-width: 320px; margin: 0 auto 12px; color: #444; font-size: 13.5px; line-height: 1.7; }
.wa-warn { background: #fff4e5; border: 1px solid #f3d19e; color: #9a5b00; border-radius: 8px; padding: 8px 12px; font-size: 12px; margin-top: 8px; }
.wa-err { color: #c0392b; font-size: 12.5px; word-break: break-word; }
/* Telegram two-step-verification password entry */
.tg-pw { display: flex; gap: 8px; max-width: 340px; margin: 6px auto 12px; }
.tg-pw-input { flex: 1; padding: 10px 12px; border: 1px solid var(--border, #cfd8cf); border-radius: 8px; font-size: 14px; background: #fff; color: #222; }
.tg-pw-input:focus { outline: none; border-color: #25d366; box-shadow: 0 0 0 2px rgba(37,211,102,.15); }
.tg-pw .btn { white-space: nowrap; }

/* two-pane inbox */
/* Thin top bar in the chat list while a freshly-linked account syncs its history. */
.wa-syncing { background: #fff7e6; color: #8a6d1f; border-bottom: 1px solid #f0e2bf;
  padding: 7px 12px; font-size: 12px; font-weight: 600; text-align: center; flex: none; }
.wa-inbox { display: flex; height: 100%; border: 1px solid var(--border, #dde3dd); border-radius: 12px; overflow: hidden; background: #fff; }
.wa-list { width: 320px; min-width: 320px; border-right: 1px solid var(--border, #dde3dd); display: flex; flex-direction: column; }
.wa-list-head { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border, #eee); }
.wa-list-head .search.sm { flex: 1; min-width: 0; padding: 7px 10px; font-size: 13px; }
.wa-filter { border: 1px solid var(--border, #dde3dd); background: #fff; border-radius: 15px; padding: 6px 11px; font-size: 12px; cursor: pointer; white-space: nowrap; color: #444; flex: 0 0 auto; }
.wa-filter:hover { background: #f4f6f4; }
.wa-filter.active { background: #e7f6ec; border-color: #9fd9b4; color: #1c7c3c; font-weight: 700; }
.wa-chats { flex: 1; overflow-y: auto; }
.wa-chat { display: flex; gap: 10px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f2f4f2; position: relative; }
.wa-chat:hover { background: #f6f9f6; }
.wa-chat.active { background: #e7f6ec; }
/* Archive control: hidden until the row is hovered, so it never competes with the message preview.
   Kept keyboard-reachable - :focus-visible reveals it for anyone tabbing rather than mousing. */
.wa-chat-arch { position: absolute; right: 10px; bottom: 8px; opacity: 0; transition: opacity .12s;
  border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 6px;
  padding: 2px 8px; font-size: 11px; font-family: inherit; cursor: pointer; }
.wa-chat:hover .wa-chat-arch, .wa-chat-arch:focus-visible { opacity: 1; }
.wa-chat-arch:hover { background: var(--green-light); border-color: var(--green); color: var(--green-dark); }
.wa-av { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.wa-chat-main { flex: 1; min-width: 0; }
.wa-chat-top { display: flex; justify-content: space-between; gap: 6px; }
.wa-chat-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-chat-time { font-size: 11px; color: var(--muted); white-space: nowrap; }
.wa-chat-bot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 2px; }
.wa-snip { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-unread { background: #25d366; color: #fff; font-size: 11px; font-weight: 700; border-radius: 11px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; }

.wa-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #efe7de; }
.wa-thread-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #fff; border-bottom: 1px solid var(--border, #eee); }
.wa-th-id { min-width: 0; }
.wa-th-name { font-weight: 700; line-height: 1.2; }
.wa-add-cust { margin-left: auto; flex-shrink: 0; }
.wa-th-sub { font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-biz { display: inline-block; background: #e7f6ec; color: #1c7c3c; border: 1px solid #bfe6cd; border-radius: 4px; padding: 0 5px; font-size: 10.5px; font-weight: 700; vertical-align: middle; }
/* Live presence pill next to the Business badge - same shape, filled green for "online". */
.wa-presence { display: inline-block; background: #2fae5a; color: #fff; border: 1px solid #2fae5a; border-radius: 4px; padding: 0 6px; font-size: 10.5px; font-weight: 700; vertical-align: middle; }
.wa-presence.typing { background: #eaf6ee; color: #1c7c3c; border-color: #bfe6cd; font-style: italic; }
.wa-presence.offline { background: #eef1f4; color: #6b7783; border-color: #d7dee4; }
.wa-lastseen { font-size: 11px; vertical-align: middle; }
.wa-media { font-style: italic; opacity: .92; }
.wa-msg.call { justify-content: center; }
.wa-msg.call .wa-bubble { background: #eef1ee; color: #555; font-size: 12.5px; text-align: center; box-shadow: none; }
.wa-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.wa-loadmore { align-self: center; margin: 2px 0 8px; padding: 4px 12px; border-radius: 12px; background: rgba(0,0,0,.05); color: var(--muted); font-size: 12px; }
.wa-msg { display: flex; }
.wa-msg.me { justify-content: flex-end; }
.wa-bubble { max-width: 72%; padding: 7px 10px 5px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; position: relative; word-wrap: break-word; white-space: pre-wrap; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.wa-msg.them .wa-bubble { background: #fff; }
.wa-msg.me .wa-bubble { background: #d9fdd3; }
.wa-link-a { color: #1c74c4; text-decoration: underline; word-break: break-all; }
.wa-link-a:hover { color: #12579b; }
.wa-mtime { display: block; text-align: right; font-size: 10px; color: #667; margin-top: 2px; }
/* Delivery ticks on sent messages: grey = sent/delivered, blue = read (like WhatsApp) */
.wa-tick { display: inline-flex; align-items: center; margin-left: 4px; color: #92a3ae; vertical-align: -1px; }
.wa-tick.read { color: #53bdeb; }
.wa-tick.err { color: var(--danger); font-weight: 700; font-size: 11px; }
.wa-composer { display: flex; gap: 10px; padding: 10px 12px; background: #fff; border-top: 1px solid var(--border, #eee); align-items: flex-end; }
.wa-composer textarea { flex: 1; resize: none; max-height: 120px; padding: 9px 12px; border: 1px solid var(--border, #dde3dd); border-radius: 20px; font: inherit; font-size: 14px; }
.wa-clip { font-size: 19px; line-height: 1; padding: 6px 11px; }

/* staged attachment preview(s) above the composer */
.wa-attach-preview { padding: 10px 12px; background: #fff; border-top: 1px solid var(--border, #eee); }
.wa-ap-items { display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 6px; }
.wa-ap-item { position: relative; width: 64px; flex: 0 0 auto; }
.wa-ap-thumb { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #eef1ee; display: flex; align-items: center; justify-content: center; }
.wa-ap-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wa-ap-ic { font-size: 28px; }
.wa-ap-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: #444; color: #fff; font-size: 10px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.wa-ap-x:hover { background: #c0392b; }
.wa-ap-name { font-size: 10px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.wa-ap-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* profile pictures on the avatar circles */
.wa-av { background-size: cover; background-position: center; overflow: hidden; }
.wa-av.group { background-color: #6b8fa3; font-size: 18px; } /* background-COLOR only - the `background` shorthand would reset background-size:cover and break group photos */
.wa-av.has-pic { color: transparent; font-size: 0; }   /* must come AFTER .group so a group WITH a photo hides its icon */

/* inline media: photos, stickers, voice/video/document */
.wa-photo { max-width: 260px; max-height: 320px; border-radius: 6px; display: block; }
.wa-photo.sticker { max-width: 120px; max-height: 120px; }
.wa-photo-wrap { position: relative; display: inline-block; line-height: 0; }
.wa-dl { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.55); color: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; opacity: 0; transition: opacity .12s; }
.wa-photo-wrap:hover .wa-dl { opacity: 1; }
.wa-dl:hover { background: rgba(0,0,0,.8); }
.wa-mediabox { min-width: 70px; }
.wa-mbtn { background: #f0f4f0; border: 1px solid #cfe0d4; color: #1c6b3a; border-radius: 16px; padding: 6px 13px; font-size: 13px; cursor: pointer; font-weight: 600; }
.wa-mbtn:hover { background: #e4efe7; }
.wa-mbtn:disabled { opacity: .7; cursor: default; }
.wa-video { max-width: 280px; max-height: 320px; border-radius: 6px; display: block; }

/* compact inline voice-note player (stays a pill, plays in place) */
.wa-voice { display: flex; align-items: center; gap: 9px; min-width: 210px; }
.wa-vplay { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; border: none; background: #25d366; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.wa-vplay:hover { background: #1eb658; }
.wa-vbar { flex: 1; height: 5px; background: #ccd7ce; border-radius: 3px; position: relative; cursor: pointer; min-width: 90px; }
.wa-vfill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: #25d366; border-radius: 3px; }
.wa-vtime { font-size: 11px; color: #5a6b5e; min-width: 30px; text-align: right; }
/* appointment "resolved / done" chip toggle */
.done-toggle { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px;
  color: var(--muted); user-select: none; transition: background .12s, border-color .12s, color .12s; }
.done-toggle:hover { border-color: #b7c9bf; }
.done-toggle input { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; margin: 0; flex: none; }
.done-toggle.on { background: var(--green-light); border-color: #9fd9b4; color: var(--green-dark); }
/* appointment participant rows (multiple clients in one slot) */
.ap-client-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ap-client-row .ac-wrap, .ap-client-row > input { flex: 1; min-width: 0; }
.ap-client-x { flex: none; width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; color: #c0392b; font-size: 13px; }
.ap-client-x:hover { border-color: #c0392b; background: #fdeaea; }
/* permission chips (same chip style as the done toggle) */
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.perm-chip { display: flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted); user-select: none;
  transition: background .12s, border-color .12s, color .12s; }
.perm-chip:hover { border-color: #b7c9bf; }
.perm-chip input { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; margin: 0; flex: none; }
.perm-chip.on { background: var(--green-light); border-color: #9fd9b4; color: var(--green-dark); }
.perm-chip.wide { grid-column: 1 / -1; }
.perm-chip.locked { cursor: not-allowed; opacity: .65; }
.perm-chip.locked input { cursor: not-allowed; }
.scope-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.scope-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px; border: 1px solid var(--line);
  border-radius: 9px; cursor: pointer; font-size: 13px; line-height: 1.4; transition: border-color .12s, background .12s; }
.scope-opt:hover { border-color: #b7c9bf; }
.scope-opt input { width: 17px; height: 17px; accent-color: var(--green); cursor: pointer; margin: 1px 0 0; flex: none; }
.scope-opt:has(input:checked) { background: var(--green-light); border-color: #9fd9b4; }
.scope-opt b { color: var(--green-dark); }
.smtp-note { font-size: 12px; margin-top: 10px; padding: 9px 11px; background: #fff8e6; border: 1px solid #f0e0b0; border-radius: 8px; line-height: 1.45; }
.smtp-note:empty { display: none; }

/* Email Connection Setup - list of connected accounts */
.ea-list { display: flex; flex-direction: column; gap: 8px; }
.ea-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.ea-row:hover, .ea-row:focus { border-color: var(--green); box-shadow: 0 2px 8px rgba(47,143,91,.12); outline: none; }
.ea-av {
  width: 38px; height: 38px; min-width: 38px; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.ea-main { flex: 1; min-width: 0; }
.ea-addr { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.ea-sub { font-size: 12.5px; margin-top: 1px; }
.ea-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--green-dark); background: #e8f5ee; border: 1px solid #bfe3ce;
  padding: 1px 7px; border-radius: 999px;
}
.ea-go { color: var(--muted); font-size: 22px; line-height: 1; }

.mail-head-actions { display: flex; align-items: center; gap: 8px; }

/* Compact Email header: the connected mailbox IS the title, with an unread pill
   beside it - one line instead of two, so the inbox list below gets more height. */
.mail-head { margin-bottom: 14px; }
.mail-head-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mail-head-title h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.mail-unread-pill {
  flex: none; background: #e8f5ee; color: var(--green-dark); border: 1px solid #bfe3ce;
  border-radius: 999px; padding: 2px 11px; font-size: 12px; font-weight: 700; white-space: nowrap;
}

/* Email nav: caret + collapsible mailbox switcher under the Email item */
.nav-caret {
  margin-left: auto; margin-right: -4px; background: none; border: none; cursor: pointer;
  color: #8fb7a0; font-size: 17px; font-weight: 700; line-height: 1; padding: 5px 6px; border-radius: 6px;
  transition: transform .18s, color .15s;
}
.nav-caret:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-caret.open { transform: rotate(180deg); }
/* the badge already claims margin-left:auto; when it's visible the caret sits after it */
.nav-badge + .nav-caret { margin-left: 6px; }

.nav-sub { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.nav-sub.open { max-height: 340px; overflow-y: auto; }
.nav-sub-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 8px 20px 8px 24px; color: #9fbcac; font-size: 12.5px; font-weight: 500;
  border-left: 3px solid transparent;
}
.nav-sub-row:hover { background: rgba(255,255,255,.05); color: #fff; }
/* --acct-color is set per-row (each mailbox its own colour) - accent bar + dot use it */
.nav-sub-row.active { color: #fff; border-left-color: var(--acct-color, var(--green)); }
.nav-sub-check { width: 14px; flex: none; color: var(--acct-color, var(--green)); font-weight: 700; font-size: 13px; line-height: 1; }
.nav-sub-row:not(.active) .nav-sub-check { font-size: 15px; }   /* the • dot reads a touch bigger */
.nav-sub-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "＋ Add messenger" row - a muted call-to-action under the connected list */
.nav-sub-add { color: rgba(255,255,255,.55); }
.nav-sub-add .nav-sub-check { color: rgba(255,255,255,.55); font-size: 15px; }
.nav-sub-add:hover { color: #fff; }
/* per-messenger unread count pill, anchored to the right of its row */
.msgr-unread { margin-left: auto; flex: none; background: #25D366; color: #fff; border-radius: 10px;
  min-width: 18px; height: 18px; padding: 0 6px; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
/* Add-messenger picker (modal) */
.msgr-add-grid { display: flex; flex-direction: column; gap: 10px; }
.msgr-add-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 15px; border: 1px solid var(--line, #dbe3ea);
  border-radius: 10px; background: #fff; cursor: pointer; font-size: 15px; font-weight: 600; color: #1c2b3a; text-align: left; transition: border-color .12s, background .12s; }
.msgr-add-btn:hover { border-color: var(--green, #2f8f5b); background: #f6faf7; }
.msgr-add-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.msgr-add-name { flex: 1; }
.msgr-add-arrow { color: #9aa7b2; font-size: 20px; }
/* collapsed icon-only sidebar: hide the switcher entirely */
.sidebar.collapsed .nav-caret, .sidebar.collapsed .nav-sub { display: none !important; }
.wa-cap { margin-top: 5px; }
/* link preview card + inline player */
.wa-linkprev { margin-top: 8px; }
.wa-linkprev.card { display: block; width: min(300px, 100%); border: 1px solid rgba(0,0,0,.1); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.03); }
.wa-lp-media { position: relative; width: 100%; background: #0000000f; display: block; line-height: 0; }
.wa-lp-media img { width: 100%; display: block; object-fit: cover; }
.wa-linkprev.card:not(.portrait) .wa-lp-media img { aspect-ratio: 16 / 9; }
.wa-linkprev.card.portrait .wa-lp-media img { height: 300px; }
.wa-lp-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; padding-left: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.wa-lp-meta { padding: 8px 10px; }
.wa-lp-title { font-weight: 600; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wa-lp-site { font-size: 11.5px; color: var(--muted); margin-top: 3px; text-transform: capitalize; }
.wa-linkprev.embed .wa-lp-frame { position: relative; width: min(300px, 100%); border-radius: 12px; overflow: hidden; background: #000; }
.wa-linkprev.embed:not(.portrait) .wa-lp-frame { aspect-ratio: 16 / 9; }
.wa-linkprev.embed.portrait .wa-lp-frame { width: min(260px, 100%); aspect-ratio: 9 / 16; }
.wa-lp-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wa-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 3000; cursor: zoom-out; }
.wa-lb-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wa-lightbox img { max-width: 92vw; max-height: 84vh; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5); cursor: default; }
.wa-lb-dl { background: #25d366; color: #fff; border: none; padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.wa-lb-dl:hover { background: #1eb658; }
/* Prev/next arrows pinned to the screen edges, so they never crowd the picture. */
.wa-lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 46px; height: 76px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 8px; font-size: 34px; line-height: 1; cursor: pointer; user-select: none; }
.wa-lb-nav:hover { background: rgba(255,255,255,.26); }
.wa-lb-nav.prev { left: 16px; }
.wa-lb-nav.next { right: 16px; }
.wa-lb-count { color: rgba(255,255,255,.72); font-size: 13px; letter-spacing: .04em; cursor: default; }
.wa-lightbox img.loading { opacity: .45; transition: opacity .12s; }

/* WhatsApp account dialog */
.wa-status { padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; }
/* Cash exchange on the invoice sheet, under the paid note. Prints with the invoice: the customer
   gets a record of what they handed over and what came back. */
.inv-cash { margin-top: 6px; padding-top: 6px; border-top: 1px dotted #cfdad4; }
.inv-cash div { display: flex; justify-content: space-between; font-size: 12.5px; color: #55655c; }
.inv-cash div:last-child { font-weight: 700; color: var(--ink); }
/* Till helper on the "mark as paid" dialog: type what the customer handed over, read the change.
   Shown for Cash only. The invoice is still settled for its full amount either way. */
.cash-box { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line);
            border-radius: 10px; background: var(--bg); }
.cash-lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.cash-box input {
  width: 100%; padding: 10px 12px; font-size: 20px; font-weight: 700; text-align: right;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.cash-box input:focus { outline: none; border-color: var(--green); }
.cash-line { display: flex; justify-content: space-between; align-items: baseline;
             margin-top: 8px; font-size: 13px; color: var(--muted); }
.cash-line b { color: var(--ink); font-size: 14px; }
.cash-change { padding-top: 8px; border-top: 1px dashed var(--line); }
.cash-change b { font-size: 19px; }
.cash-change b.cash-ok { color: var(--green); }
.cash-change b.cash-short { color: var(--danger); }
.wa-status.ok { background: #e7f6ec; color: #1c7c3c; border: 1px solid #bfe6cd; }
/* Neutral variant, used to name the company a settings dialog is editing. */
.wa-status:not(.ok):not(.err) { background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.wa-test-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.wa-test-out { font-size: 13px; }
.wa-test-out.ok { color: #1c7c3c; }
.wa-test-out.err { color: #c0392b; }

/* BCC recipient preview inside the bulk-email dialog */
.bcc-box { max-height: 90px; overflow: auto; background: #f4f6f4; border: 1px solid var(--border, #dde3dd);
  border-radius: 6px; padding: 8px 10px; font-size: 12.5px; color: var(--muted); word-break: break-word; line-height: 1.5; }

/* Bulk-email drip progress bar */
.bulk-bar { height: 12px; background: #e6ece8; border-radius: 999px; overflow: hidden; margin-top: 14px; }
.bulk-bar-fill { height: 100%; width: 0; background: var(--green); border-radius: 999px; transition: width .4s ease; }
.queued-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: rgba(58,143,99,.12); color: var(--green); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: default; }

/* Resizable columns: drag the right edge of a header to widen/narrow it. */
table.resizable.locked { table-layout: fixed; }
table.resizable.locked th, table.resizable.locked td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* sticky headers: column labels + green resize grips stay visible while scrolling rows */
.table-wrap thead th { position: sticky; top: 0; z-index: 2; }
.col-resizer { position: absolute; top: 0; right: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 3; }
/* always-visible green grip so it's obvious where to drag */
.col-resizer::after {
  content: ""; position: absolute; right: 3px; top: 22%; height: 56%; width: 3px;
  border-radius: 2px; background: var(--green);
}
.col-resizer:hover::after { top: 0; height: 100%; width: 4px; background: var(--green-dark); }
body.col-resizing-active, body.col-resizing-active * { cursor: col-resize !important; user-select: none !important; }
/* arrow marking the currently-sorted column (set via the Sort dialog) */
.sort-arrow { color: var(--green); font-size: 11px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 16px; font-size: 13.5px; }
th { background: #f7faf8; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--line); }
tbody tr { border-top: 1px solid var(--line); }
tbody tr:hover { background: var(--green-light); }
td.right, th.right { text-align: right; }
/* Inline-editable inventory cells: click to edit, Enter/blur to save. */
.edit-cell { cursor: text; }
.edit-cell:hover { box-shadow: inset 0 0 0 1px var(--green, #2f8f5b); background: var(--green-light); }
.cell-edit { width: 100%; box-sizing: border-box; font: inherit; padding: 4px 6px; margin: -3px 0; border: 1px solid var(--green, #2f8f5b); border-radius: 4px; background: #fff; color: var(--ink, #1d2b24); }
td.right .cell-edit { text-align: right; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.clickable { cursor: pointer; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.green { background: var(--green-light); color: var(--green-dark); }
.badge.amber { background: #fdf3d7; color: var(--amber); }
.badge.red { background: #fdeaea; color: #b3261e; }
.badge.gray { background: #eef1ef; color: var(--muted); }

.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 14px; color: var(--muted); font-size: 13px; }
.empty { padding: 40px; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }

/* Modal */
/* Dialogs sit ABOVE the whole Finance workspace: windows raise their z-index on
   every click (unbounded), and the taskbar is at 99990 - so the modal layer must
   beat both, or an "Edit customer" opened from a busy window sinks behind it. */
.modal-back { position: fixed; inset: 0; background: rgba(20,30,25,.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 99995; overflow: auto; }
.modal { background: #fff; border-radius: 12px; width: 540px; max-width: 100%; box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.modal.wide { width: 760px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 17px; }
.acct-modal .modal-head { background: var(--green-dark); border-bottom: 0; border-radius: 12px 12px 0 0; }
.acct-modal .modal-head h3 { color: #fff; }
.acct-modal .modal-head .x { color: #cfe0d6; }
.acct-modal .modal-head .x:hover { color: #fff; }
.modal-head .x { background: none; border: 0; font-size: 22px; color: var(--muted); line-height: 1; }
.modal-body { padding: 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.modal.confirm-modal { width: 460px; }
.confirm-msg { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
/* refund choice (store credit vs cash) */
.refund-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.refund-opt { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.refund-opt:hover { border-color: #9fd9b4; background: var(--green-light); }
.refund-opt:has(input:checked) { border-color: var(--green); background: var(--green-light); }
.refund-opt input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--green); flex: none; }
.refund-opt-txt { display: flex; flex-direction: column; gap: 2px; }
.refund-opt-txt b { font-size: 14px; }
.refund-opt-txt .muted { font-size: 12.5px; }
.inv-refund-note { margin-top: 8px; color: var(--amber); font-size: 13px; font-weight: 600; }
.inv-paid-note { margin-top: 8px; color: var(--green-dark); font-size: 13px; font-weight: 600; }
.inv-usd { color: var(--green-dark); font-size: 13px; font-weight: 600; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 5px; }
/* a field whose input sits next to a small action button (e.g. Group + add) */
.field-with-btn { display: flex; gap: 8px; align-items: stretch; }
.field-with-btn > select, .field-with-btn > input { flex: 1; min-width: 0; }
.add-inline { flex: none; padding: 0 13px; font-size: 17px; line-height: 1; font-weight: 700; }
.field textarea { min-height: 70px; resize: vertical; }
/* inline autocomplete dropdown */
.ac-wrap { position: relative; }
.ac-menu { position: fixed; display: none; z-index: 200; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.18); max-height: 240px; overflow-y: auto; min-width: 280px; }
.ac-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; cursor: pointer; font-size: 13.5px; }
.ac-item:hover, .ac-item.active { background: var(--green-light); }
.ac-item .ac-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-item .ac-sub { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ac-item .ac-rm { border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1;
  padding: 0 3px; cursor: pointer; border-radius: 4px; flex: none; }
.ac-item .ac-rm:hover { color: #b3261e; background: rgba(179,38,30,.1); }
.ac-item.ac-create { color: var(--green-dark); font-weight: 600; border-bottom: 1px solid var(--line); background: var(--green-light); }
.ac-item.ac-create:hover, .ac-item.ac-create.active { background: #d3ecdd; }
.perm-cb { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.perm-cb.locked { opacity: .5; cursor: not-allowed; }
.perm-cb.locked input { cursor: not-allowed; }

/* Toast */
.tip-pop { position: fixed; z-index: 100000; background: #18271f; color: #e8f5ee; font-size: 12px;
  font-weight: 600; padding: 6px 11px; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.28);
  pointer-events: none; max-width: 280px; line-height: 1.4; animation: tipin .12s ease-out; }
.tip-pop[hidden] { display: none; }
@keyframes tipin { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 8px; font-size: 14px; z-index: 99999; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
/* Send/Receive: the circular arrows spin while inboxes are being checked */
.sr-ico { display: inline-block; line-height: 0; vertical-align: -2px; }
.sr-ico.spinning { animation: sr-spin .9s linear infinite; }
@keyframes sr-spin { to { transform: rotate(360deg); } }
.toast.err { background: var(--danger); }

/* Persistent, dismissable update nudge (stays until the user closes it). */
.update-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; padding: 10px 10px 10px 18px;
  border-radius: 10px; font-size: 14px; z-index: 200;
  box-shadow: 0 8px 30px rgba(0,0,0,.35); max-width: min(92vw, 560px);
  animation: updateToastIn .18s ease-out;
}
@keyframes updateToastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.update-toast-msg {
  background: none; border: 0; color: inherit; font: inherit; text-align: left;
  cursor: pointer; padding: 2px 0; flex: 1 1 auto;
}
.update-toast-msg:hover { text-decoration: underline; }
.update-toast-x {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px;
  background: rgba(255,255,255,.14); border: 0; color: #fff; cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.update-toast-x:hover { background: rgba(255,255,255,.3); }
/* Brief highlight of the update card when arriving from the toast. */
.sw-upd-flash { animation: swUpdFlash .9s ease-in-out 0s 2; border-radius: var(--radius); }
@keyframes swUpdFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,164,59,0); } 50% { box-shadow: 0 0 0 3px rgba(224,164,59,.9); } }

/* Settings list buttons */
.settings-list { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.settings-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); font-size: 14px; color: var(--ink);
}
.settings-item:hover { border-color: var(--green); background: var(--green-light); }
.settings-item .si-icon { font-size: 24px; line-height: 1; }
.settings-item .si-text { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.settings-item .si-text .muted { font-size: 12.5px; }
.settings-item .si-arrow { font-size: 24px; color: var(--muted); }
/* inventory groups manager */
.grp-list { max-height: 50vh; overflow-y: auto; }
.grp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.grp-row:last-child { border-bottom: 0; }
.grp-name { font-size: 14px; }

/* Invoice sheet */
/* the invoice view: let the sheet grow to fill the screen so there's no grey gap.
   Class-based (not :has) + min-height:100vh flex column = works in Safari too. */
/* White background on the whole invoice view so no grey ever shows through,
   even if a browser (Brave/Safari) doesn't paint the flex-grown sheet area. */
main.invoice-view { display: flex; flex-direction: column; min-height: 100vh; background: #fff; }
.inv-sheet { background: #fff; padding: 44px 48px; border: 1px solid var(--line); border-radius: var(--radius);
  flex: 1 0 auto; box-shadow: var(--shadow); display: flex; flex-direction: column; }
/* zebra rows on the invoice document - soft grey-green, so the hover/active green stays its own thing */
.inv-sheet tbody tr:nth-child(even) td { background: #f4f7f5; }
.inv-footer { margin-top: auto; padding-top: 40px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.inv-head { display: flex; justify-content: space-between; margin-bottom: 34px; }
.inv-head h1 { margin: 0 0 14px; font-size: 24px; color: var(--green-dark); }
.inv-head .company-lines { line-height: 1.6; }
.inv-total-row { display: flex; justify-content: flex-end; margin-top: 28px; }
.inv-totals { width: 340px; }
.inv-totals div { display: flex; justify-content: space-between; gap: 18px; padding: 4px 0; }
.inv-totals .inv-usd span:first-child, .inv-totals .inv-paid-note { white-space: nowrap; }
.inv-totals .grand { font-weight: 700; font-size: 17px; border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 8px; }

@media print {
  .sidebar, .page-head .btn, .no-print { display: none !important; }
  /* Force a white page everywhere so the app's grey background never prints as a
     grey block below the invoice on the last page. */
  html, body { background: #fff !important; }
  main, main.invoice-view { padding: 0; display: block; min-height: 0; background: #fff !important; }
  /* Keep the browser's default page margins so the logo isn't clipped.
     min-height:100vh makes the sheet fill at least one page, so on a SHORT
     invoice the footer still sits at the bottom of the page. For a 2-page bill
     a small script (see _invoicePrintFooter) grows the sheet to ~2 pages so the
     footer drops to the bottom of page 2 as well. */
  .inv-sheet { border: 0; min-height: 100vh; box-shadow: none; padding: 0; flex: none; background: #fff !important; }
  /* print every line in solid black; keep ONLY the logo green */
  .inv-sheet, .inv-sheet * { color: #000 !important; }
  .inv-sheet h1 { color: #1f6b42 !important; }
  /* Clean pagination for long invoices: repeat the ITEM/PRICE/QTY/AMOUNT header
     on each page, never split a single row, and keep the totals + footer whole. */
  .inv-sheet table { page-break-inside: auto; }
  .inv-sheet thead { display: table-header-group; }
  .inv-sheet tr { page-break-inside: avoid; }
  /* keep the zebra rows on paper too (browsers skip backgrounds otherwise) */
  .inv-sheet tbody tr:nth-child(even) td { background: #f4f7f5 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .inv-total-row { page-break-inside: avoid; break-inside: avoid; }
  /* The bank/CRIB footer now flows at the END of the document (bottom of the
     LAST page) rather than being fixed on every page, so it never lands on top
     of the items. margin-top:auto keeps it pinned to the bottom on a 1-page bill. */
  .inv-footer { position: static; margin-top: auto; padding: 28px 0 0; break-inside: avoid; page-break-inside: avoid; }
}

/* ---- Printable customer list ---- */
#print-root { display: none; }
@page cust-list { size: A4 landscape; margin: 12mm; }
@media print {
  /* when printing the list, hide the whole app and show only the print sheet */
  body.printing-list #app,
  body.printing-list #login,
  body.printing-list #modal-root,
  body.printing-list #toast { display: none !important; }
  body.printing-list #print-root { display: block !important; page: cust-list; color: #000; }

  #print-root .print-head h1 { font-size: 15pt; margin: 0 0 2px; color: #1f6b42; }
  #print-root .print-meta { font-size: 9pt; color: #444; margin: 0 0 10px; }
  /* list-only table styling (scoped so it never restyles an invoice sheet in print-root) */
  /* table-layout:fixed + colgroup %s + width:100% => columns can never run off the page */
  body.printing-list #print-root table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9pt; }
  body.printing-list #print-root th, body.printing-list #print-root td {
    border: 1px solid #999; padding: 4px 6px; text-align: left; vertical-align: top;
    overflow-wrap: anywhere; word-break: break-word;
  }
  body.printing-list #print-root th { background: #e8f5ee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing-list #print-root thead { display: table-header-group; }   /* repeat header on every page */
  body.printing-list #print-root tr { page-break-inside: avoid; }

  /* printing ONE invoice from the browsing sheet: hide the app, show only the
     shared .inv-sheet rendered into #print-root - the same template the invoice
     page prints (its @media print rules above apply to it unchanged). */
  body.printing-inv #app,
  body.printing-inv #login,
  body.printing-inv #modal-root,
  body.printing-inv #toast { display: none !important; }
  body.printing-inv #print-root { display: block !important; color: #000; }
}
@media (max-width: 800px) {
  .grid2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .sidebar { width: 64px; }
  .side-brand span:not(.leaf), #nav a span:not(.ic), .side-foot, .wa-upd { display: none !important; }
}

/* ===== Appointments: month calendar + day timeline ===== */
.cal-layout { display: flex; gap: 20px; align-items: flex-start; }
.cal-side { position: relative; width: 300px; flex: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head b { font-size: 15px; }
.cal-title-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 4px 6px; margin: -4px -6px; border-radius: 6px; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; }
.cal-title-btn:hover { background: var(--green-light); color: var(--green-dark); }
.cal-caret { font-size: 10px; color: var(--muted); }
/* month / year jump picker */
.cal-picker { position: absolute; left: 14px; right: 14px; top: 48px; bottom: 14px; background: #fff; z-index: 6; flex-direction: column; }
.cal-picker[hidden] { display: none; }
.cal-picker:not([hidden]) { display: flex; }
.cal-pick-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-pick-year { background: none; border: 0; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; padding: 4px 10px; border-radius: 6px; }
.cal-pick-year:hover { background: var(--green-light); color: var(--green-dark); }
.cal-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; align-content: center; }
.cal-pick-cell { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 12px 0; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cal-pick-cell:hover { border-color: var(--green); background: var(--green-light); color: var(--green-dark); }
.cal-pick-cell.sel { background: var(--green); border-color: var(--green); color: #fff; }
.cal-navs { display: flex; gap: 4px; }
.cal-nav { width: 28px; height: 28px; border: 0; background: none; border-radius: 6px; cursor: pointer; font-size: 17px; color: var(--muted); }
.cal-nav:hover { background: var(--green-light); color: var(--green-dark); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { text-align: center; font-size: 11px; color: var(--muted); font-weight: 600; padding: 4px 0; }
.cal-day { position: relative; aspect-ratio: 1; border: 0; background: none; cursor: pointer; border-radius: 8px; font-size: 13px; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.cal-day:hover { background: var(--green-light); }
.cal-day.other { color: #b7c2bb; }
.cal-day.today .cal-num { color: var(--green-dark); font-weight: 700; }
.cal-day.sel { background: var(--green); }
.cal-day.sel .cal-num { color: #fff; font-weight: 700; }
.cal-day.sel:hover { background: var(--green-dark); }
.cal-dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #9fb3a8; }
.cal-dot.pend { background: var(--amber); }
.cal-day.sel .cal-dot { background: rgba(255,255,255,.9); }
.cal-legend { margin-top: 12px; font-size: 11px; color: var(--muted); display: flex; align-items: center; }
.cal-legend .cal-dot { position: static; transform: none; display: inline-block; margin: 0 4px; }

.day-col { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.day-head { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--card), rgba(0,0,0,.012)); }
.dh-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 50px; padding: 5px 9px 6px; background: var(--green-light); border-radius: 12px; line-height: 1; flex: none; }
.dh-badge-dow { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--green-dark); opacity: .85; }
.dh-badge-num { font-size: 22px; font-weight: 800; color: var(--green-dark); margin-top: 3px; }
.dh-badge.today { background: var(--green); box-shadow: 0 2px 8px rgba(46,125,90,.28); }
.dh-badge.today .dh-badge-dow { color: #fff; opacity: .92; }
.dh-badge.today .dh-badge-num { color: #fff; }
.dh-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dh-weekday { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.dh-full { color: var(--muted); font-size: 13px; }
.dh-today-pill { margin-left: auto; align-self: center; font-size: 11px; font-weight: 700; color: var(--green-dark); background: var(--green-light); border: 1px solid var(--green); padding: 3px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.day-scroll { position: relative; display: flex; height: calc(100vh - 230px); min-height: 460px; overflow-y: auto; }
.time-gutter { position: relative; width: 56px; flex: none; }
.hour-lbl { position: absolute; right: 8px; font-size: 11px; color: var(--muted); }
.events-track { position: relative; flex: 1; border-left: 1px solid var(--line); cursor: copy; }
.hour-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--danger); z-index: 5; }
.now-line::before { content: ""; position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.ev { position: absolute; display: flex; gap: 10px; align-items: flex-start; background: var(--green-light); border-left: 3px solid var(--green); border-radius: 5px; padding: 3px 7px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.08); z-index: 1; }
.ev:hover { box-shadow: 0 2px 8px rgba(0,0,0,.16); z-index: 6; }
.ev-main { flex: 0 1 auto; min-width: 0; max-width: 55%; }
.ev-t { font-size: 10.5px; color: var(--green-dark); font-weight: 600; white-space: nowrap; }
.ev-n { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the note sits to the RIGHT of the time/name, filling the free horizontal space */
.ev-note { flex: 1 1 0; min-width: 0; align-self: center; font-size: 11px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
/* outcome colours for calendar blocks */
.ev.out-done { background: #eef1ef; border-left-color: #a9b7af; opacity: .85; }
.ev.out-done .ev-t { color: #7c8a82; }
.ev.out-noshow { background: #fdeaea; border-left-color: #c0392b; }
.ev.out-noshow .ev-t { color: #b3261e; }
.ev.out-cancelled { background: #f1f2f1; border-left-color: #b7b7b7; opacity: .8; }
.ev.out-cancelled .ev-n { text-decoration: line-through; color: #7c8a82; }
.ev.out-cancelled .ev-t { color: #8a8a8a; }
/* bill / invoice button on the right of each appointment block */
.ev-bill { flex: none; margin-left: auto; align-self: center; width: 26px; height: 26px; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.ev-bill:hover { border-color: var(--green); background: var(--green-light); }
.ev-bill.billed { border-color: var(--green); }
.badge.sm { padding: 1px 7px; font-size: 10.5px; vertical-align: middle; }
/* PAID watermark on a paid invoice sheet */
.inv-sheet.pastdue-stamp { position: relative; }
.inv-sheet.pastdue-stamp::after { content: "PAST DUE"; position: absolute; top: 120px; right: 48px; z-index: 5;
  font-size: 54px; font-weight: 800; letter-spacing: 4px; color: rgba(179,38,30,.22);
  border: 6px solid rgba(179,38,30,.22); border-radius: 12px; padding: 6px 22px; transform: rotate(-14deg); pointer-events: none; }
.inv-sheet.paid-stamp { position: relative; }
.inv-sheet.paid-stamp::after { content: "PAID"; position: absolute; top: 120px; right: 48px; z-index: 5; font-size: 60px; font-weight: 800; letter-spacing: 4px; color: rgba(47,143,91,.22); border: 6px solid rgba(47,143,91,.22); border-radius: 12px; padding: 6px 22px; transform: rotate(-14deg); pointer-events: none; }
/* keep the stamp above the items table in every engine (table cells can create
   their own stacking); the sticky header sits below it */
.inv-sheet.paid-stamp .table-wrap { z-index: 0; }
/* UNPAID stamp (amber) on an open invoice that isn't overdue yet */
.inv-sheet.unpaid-stamp { position: relative; }
.inv-sheet.unpaid-stamp::after { content: "UNPAID"; position: absolute; top: 120px; right: 40px; z-index: 5;
  font-size: 54px; font-weight: 800; letter-spacing: 4px; color: rgba(184,134,11,.22);
  border: 6px solid rgba(184,134,11,.22); border-radius: 12px; padding: 6px 22px; transform: rotate(-14deg); pointer-events: none; }
/* REFUNDED stamp (amber) */
.inv-sheet.refunded-stamp { position: relative; }
.inv-sheet.refunded-stamp::after { content: "REFUNDED"; position: absolute; top: 120px; right: 30px; z-index: 5; font-size: 44px; font-weight: 800; letter-spacing: 3px; color: rgba(184,134,11,.22); border: 6px solid rgba(184,134,11,.22); border-radius: 12px; padding: 6px 20px; transform: rotate(-14deg); pointer-events: none; }
/* store-credit row inside the invoice form */
.iv-credit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 2px; padding: 10px 12px; background: var(--green-light); border: 1px solid #9fd9b4; border-radius: 8px; font-size: 13.5px; }
.iv-credit[hidden] { display: none; }
.iv-credit-avail { color: var(--green-dark); }
.iv-credit-apply { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; }
.iv-credit-apply input { width: 90px; }
@media (max-width: 720px) { .cal-layout { flex-direction: column; } .cal-side { width: 100%; } }

/* ---------- Email / webmail client ---------- */
.mail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.mail-tabs-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail-filter { border: 1px solid var(--line); background: var(--card); padding: 8px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.mail-filter:hover { border-color: var(--green); color: var(--green-dark); }
.mail-filter.active { background: var(--green); border-color: var(--green); color: #fff; }
.mail-empty { border: 1px solid #e5b3b3; background: #fdf2f2; color: #c0392b; padding: 8px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mail-empty:hover { background: #c0392b; border-color: #c0392b; color: #fff; }
.mail-empty:disabled { opacity: .5; cursor: default; }
.mail-tabs { display: inline-flex; background: #eef2ef; border-radius: 8px; padding: 3px; }
.mail-tab { border: 0; background: none; padding: 7px 18px; border-radius: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.mail-tab.active { background: var(--card); color: var(--green-dark); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.mail-search-wrap { display: flex; gap: 8px; align-items: center; flex: 1; justify-content: flex-end; }
.mail-search { flex: 1; min-width: 160px; max-width: 320px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.mail-filter-btn { flex: none; border: 1px solid var(--line); background: var(--card); padding: 9px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.mail-filter-btn:hover { border-color: var(--green, #2f8f5b); color: var(--green, #2f8f5b); }
.mail-filter-btn.on { background: #e7f6ec; border-color: #bfe6cd; color: #1c7c3c; }   /* a filter is active */
.mail-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; padding-top: 4px; }
.mail-chk input { width: 16px; height: 16px; }
.mail-search:focus { outline: 2px solid var(--green); border-color: var(--green); }
.mail-split { display: flex; gap: 10px; align-items: flex-start; }
.mail-list { width: 340px; flex-shrink: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; max-height: calc(100vh - 176px); overflow-y: auto; }

/* Drag handle between the message list and the reading pane - a faint grip line
   that's always a little visible so you can find it, and turns green on hover/drag. */
.mail-resize {
  flex: 0 0 8px; align-self: stretch; min-height: calc(100vh - 176px);
  cursor: col-resize; position: relative; background: transparent;
}
.mail-resize::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 4px; border-radius: 4px; background: #cbd5cf; transition: background .15s;
}
.mail-resize:hover::before, .mail-resize.dragging::before { background: var(--green); }
/* Preview pane OFF: hide the reading pane + divider, let the list fill the width */
.mail-split.no-preview .mail-read, .mail-split.no-preview .mail-resize { display: none; }
.mail-split.no-preview .mail-list { width: 100% !important; }
#mail-preview-toggle.active { background: var(--green-light); border-color: var(--green); color: var(--green-dark); }
.mail-item { position: relative; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; }
.mail-item.checked { background: #e8f0fe; box-shadow: inset 3px 0 0 #3b82f6; }
.mail-item.checked.sel { background: #dbe7fb; }
.mail-del { position: absolute; top: 8px; right: 8px; display: none; border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; padding: 4px 7px; border-radius: 6px; color: var(--muted); }
.mail-item:hover .mail-del { display: inline-flex; }
.mail-item:hover .mi-date { visibility: hidden; }   /* trash takes the date's spot on hover */
.mail-del:hover { background: #fde8e8; color: #c0392b; }
.mail-del:disabled { opacity: .5; cursor: default; }
.mail-item:hover { background: #f6faf7; }
.mail-item.sel { background: var(--green-light); }
.mail-item.unread .mi-from, .mail-item.unread .mi-subj { font-weight: 700; color: var(--ink); }
.mail-item.unread { border-left: 3px solid var(--green); padding-left: 11px; }
.mi-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mi-from { font-size: 13.5px; color: #2b3a32; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-date { font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.mi-subj { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-more-wrap { padding: 12px; text-align: center; }
.mail-read { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; min-height: 300px; max-height: calc(100vh - 176px); overflow-y: auto; }
.mail-read-empty { padding: 60px 20px; text-align: center; }
.mr-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 14px; }
.mr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mr-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.mr-subj { margin: 0 0 8px; font-size: 19px; }
.mr-meta { font-size: 13px; margin-top: 2px; }
.mr-when { margin-left: 8px; }
.mr-atts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Double-click pop-out email window (Outlook-style) */
.modal.mail-window { width: 940px; max-width: 96vw; }
.modal.mail-window .modal-body { max-height: 78vh; overflow-y: auto; }
.mw-toolbar { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.mw-meta { font-size: 13px; margin: 3px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mw-when { margin-left: auto; }
.mw-body { margin-top: 14px; }
.mw-body .mail-frame { width: 100%; border: 0; min-height: 200px; }
.mw-body .mail-text { white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 1.5; }
.mail-att { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 6px 5px 10px; background: #f4f6f4; border: 1px solid var(--line); border-radius: 6px; }
.mail-att:hover { background: var(--green-light); }
.mail-att a { text-decoration: none; color: var(--green-dark); }
.mail-att-open:hover { text-decoration: underline; }
.mail-att-dl { border-left: 1px solid var(--line); padding: 0 6px 0 8px; font-size: 14px; line-height: 1; }
.mail-att-dl:hover { color: #111; }
.mc-sig-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sig-prev { margin-top: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; background: #fafcfb; display: flex; align-items: center; justify-content: center; min-height: 60px; }
.sig-prev img { max-width: 100%; max-height: 160px; height: auto; border-radius: 4px; }
.mail-frame { width: 100%; border: 0; min-height: 200px; }
.mail-text { white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 1.5; }
.mail-text a { color: var(--green-dark); }
@media (max-width: 820px) { .mail-split { flex-direction: column; } .mail-list { width: 100%; max-height: 320px; } }

/* ---------- Company Details: repeatable bank / currency rows ---------- */
.cd-sec-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin: 18px 0 6px; text-transform: uppercase; letter-spacing: .3px; }
.cd-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cd-row input { flex: 1; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.cd-row input:focus { outline: 2px solid var(--green); border-color: var(--green); }
.cd-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; padding: 4px 9px; border-radius: 6px; flex-shrink: 0; }
.cd-x:hover { background: #fde8e8; color: #c0392b; }

/* ---- Licensing: lock screen + reminder banner ---- */
#lock-screen { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center;
  justify-content: center; background: #1c2a22; padding: 20px; }
.lock-card { background: #fff; border-radius: 16px; padding: 36px 40px; max-width: 480px; width: 100%;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.lock-card .lock-icon { font-size: 40px; margin-bottom: 6px; }
.lock-card h2 { margin: 0 0 10px; }
.lock-card textarea { width: 100%; margin-top: 14px; padding: 10px; border: 1px solid var(--line);
  border-radius: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; resize: vertical; }
.lock-card .btn { width: 100%; margin-top: 12px; }
.lock-error { color: #c0392b; font-size: 13px; min-height: 18px; margin-top: 6px; }
.lock-links { margin-top: 14px; font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.lock-links a { color: var(--green-dark); }
#license-banner { position: fixed; bottom: 18px; right: 18px; z-index: 900; display: flex;
  align-items: center; gap: 10px; background: #fff8e6; border: 1px solid #e8d9a8; color: #6b5b1e;
  border-radius: 10px; padding: 9px 12px; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
#license-banner button { border: 0; background: var(--green-dark); color: #fff; border-radius: 7px;
  padding: 5px 10px; font-size: 12.5px; cursor: pointer; }
#license-banner i { cursor: pointer; font-style: normal; color: #9a8a4a; padding: 0 2px; }
.lic-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.lic-row span { color: var(--muted); }

/* Subscribe buttons (lock screen + trial banner) */
.lock-card .lock-subscribe { width: 100%; margin-bottom: 6px; background: var(--green); }
#license-banner .lb-subscribe { background: var(--green-dark); color: #fff; }

/* Sidebar Subscription link - matches the regular nav items (#nav a) */
.side-sub {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 20px; color: #b9cdc1;
  text-decoration: none; font-size: 14px; font-weight: 500; border-left: 3px solid transparent;
}
.side-sub:hover { background: rgba(255,255,255,.05); color: #fff; }
.side-sub.active { background: rgba(47,143,91,.22); color: #fff; border-left-color: var(--green); }
.side-sub .ic { width: 20px; text-align: center; font-size: 16px; }
.side-sub-days { margin-left: auto; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.side-sub-days:empty { display: none; }
.side-sub-days.trial { background: rgba(184,134,11,.28); color: #e8c274; }
.side-sub-days.grace { background: rgba(192,57,43,.24); color: #e79684; }
.side-sub-days.soon  { background: rgba(47,143,91,.30); color: #86d5a8; }
/* Only the LABEL span flexes (grows to fill, truncates with … when tight) so a wide
   badge never spills past the sidebar edge. Exclude the badge spans - otherwise they'd
   get flex:1 too and stretch across the row instead of hugging their text. */
.side-sub > span:not(.ic):not(.side-sub-days),
#nav a > span:not(.ic):not(.nav-badge) {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-sub-days, .nav-badge { flex: 0 0 auto; }   /* natural width, anchored right, never stretch */

/* In-app Control Panel - the same dark console as the desktop Sealuno Control app.
   Palette lifted from control_panel.html so the two never drift apart. */
.ctrl-dark {
  --c-panel: #151f1a;
  --c-panel-2: #111a15;
  --c-ink: #eaf3ee;
  --c-ink-soft: #adbdb4;
  --c-ink-faint: #7c8d84;
  --c-line: #243029;
  --c-brand: #2fce6d;
  --c-good: #37d977;
  --c-good-glow: rgba(55,217,119,.5);
  --c-off: #5f6f66;
  background:
    radial-gradient(1200px 700px at 15% -10%, #0e1713, transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, #0a110d, transparent 55%),
    #0c1310;
  color: var(--c-ink);
  /* Fill the whole content area edge-to-edge (eat main's 26x32 padding) instead of
     floating as a rounded card. */
  margin: -26px -32px;
  min-height: 100vh;
  padding: 40px 32px 48px;
}
/* Centre a narrower column of controls inside the full-width dark background. */
.ctrl-inner { max-width: 960px; margin: 0 auto; }
.ctrl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.ctrl-head h2 { margin: 0; font-size: 22px; color: var(--c-ink); }
.ctrl-head-sub { font-size: 13px; color: var(--c-ink-faint); font-weight: 500; }
.ctrl-mark {
  width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
  background: linear-gradient(160deg, #2fce6d, #27b862);
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(55,217,119,.32);
}
.ctrl-wait { padding: 30px 0; text-align: center; color: var(--c-ink-faint); font-size: 14px; }

.ctrl-cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ctrl-card {
  flex: 1; min-width: 190px; background: var(--c-panel-2); border: 1px solid var(--c-line);
  border-radius: 14px; padding: 16px 18px; position: relative;
}
.ctrl-card.ok { border-color: rgba(55,217,119,.32); }
.ctrl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c-off); margin-bottom: 10px; }
.ctrl-card.ok .ctrl-dot {
  background: var(--c-good);
  animation: ctrl-pulse 2.4s ease-in-out infinite;
}
@keyframes ctrl-pulse {
  0%, 100% { box-shadow: 0 0 10px 0 var(--c-good-glow); }
  50%      { box-shadow: 0 0 16px 3px var(--c-good-glow); }
}
.ctrl-lab { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--c-ink-faint); }
.ctrl-big { font-size: 19px; font-weight: 700; margin: 3px 0 2px; color: var(--c-ink); }
.ctrl-card.ok .ctrl-big { color: var(--c-good); }
.ctrl-sub { font-size: 12.5px; color: var(--c-ink-soft); }

.ctrl-urls { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ctrl-url {
  flex: 1; min-width: 240px; background: var(--c-panel-2); border: 1px solid var(--c-line);
  border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
.ctrl-url .muted { font-size: 12px; }
.ctrl-url b { font-size: 14px; color: var(--c-ink); }
.ctrl-url .btn { align-self: flex-start; margin-top: 8px; padding: 5px 12px; font-size: 12.5px; }

.ctrl-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ctrl-acts .btn { flex: 1; min-width: 180px; }

.ctrl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--c-panel-2); border: 1px solid var(--c-line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.ctrl-row b { color: var(--c-ink); }
.ctrl-active-box { background: var(--c-panel-2); border: 1px solid var(--c-line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.ctrl-active-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ctrl-active-head b { color: var(--c-ink); }
.ctrl-active-count { font-size: 12px; color: var(--c-ink-faint); }
.ctrl-active { display: flex; flex-direction: column; }
.ctrl-user { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 13.5px; color: var(--c-ink); border-top: 1px solid var(--c-line); }
.ctrl-user:first-child { border-top: 0; }
.ctrl-user b { color: var(--c-ink); font-weight: 600; }
.ctrl-user-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-ink-faint); flex: none; }
.ctrl-user-dot.on { background: var(--c-good); box-shadow: 0 0 0 3px rgba(55,217,119,.18); }
.ctrl-user-dot.idle { background: #e0a83a; }
.ctrl-user-dot.away { background: var(--c-ink-faint); }
.ctrl-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctrl-user-status { margin-left: auto; font-size: 12.5px; color: var(--c-ink-faint); }
.ctrl-user-acts { display: flex; gap: 6px; align-items: center; flex: none; }
.ctrl-user-btn { background: transparent; border: 1px solid var(--c-line); color: var(--c-ink-faint);
  font-size: 11.5px; padding: 3px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.ctrl-user-btn:hover { color: var(--c-ink); border-color: var(--c-ink-faint); }
.ctrl-user-btn.danger:hover { color: #ff8a8a; border-color: #ff8a8a; }
.row-suspended td { opacity: .55; }
.row-suspended td.row-actions { opacity: 1; }
.grp-row.row-suspended .grp-name { opacity: .55; }
.ctrl-dark .muted { color: var(--c-ink-faint); }
.ctrl-dark a { color: var(--c-brand); }

/* The app's light-grey buttons disappear on this surface, so re-theme them here. */
.ctrl-dark .btn.ghost {
  background: var(--c-panel); border-color: var(--c-line); color: var(--c-ink);
}
.ctrl-dark .btn.ghost:hover { border-color: var(--c-brand); color: var(--c-brand); }
.ctrl-dark .btn:not(.ghost) {
  background: linear-gradient(180deg, #2fce6d, #27b862);
  border-color: transparent; color: #07130c; font-weight: 700;
}
.ctrl-dark .btn:not(.ghost):hover { filter: brightness(1.08); }

/* Sidebar collapse toggle - frees up screen width for the content */
.side-toggle {
  margin-left: auto; flex: none; background: none; border: 0; color: #8fb7a0;
  cursor: pointer; font-size: 21px; font-weight: 700; line-height: 1; padding: 4px 7px; border-radius: 6px;
}
.side-toggle:hover { background: rgba(255,255,255,.10); color: #fff; }

.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .side-brand { padding: 18px 4px; justify-content: center; gap: 2px; }
.sidebar.collapsed .side-brand span:not(.leaf) { display: none; }   /* wordmark only; keep the shield */
.sidebar.collapsed .side-brand .leaf { font-size: 20px; }
.sidebar.collapsed .side-toggle { margin-left: 0; font-size: 19px; padding: 4px; }
.sidebar.collapsed #nav a,
.sidebar.collapsed .side-sub {
  justify-content: center; padding-left: 0; padding-right: 0; border-left-color: transparent;
}
.sidebar.collapsed #nav a span:not(.ic),
.sidebar.collapsed .side-sub span:not(.ic),
.sidebar.collapsed .side-sub-days,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .wa-upd { display: none !important; }
.sidebar.collapsed .side-foot { padding: 14px 0; text-align: center; }
.sidebar.collapsed .side-foot > div { display: none; }              /* the "Administrator" line */

/* Subscription page */
.sub-wrap { max-width: 640px; margin: 0 auto; }
.sub-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 26px; box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.sub-plan-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.sub-plan { font-size: 18px; font-weight: 700; }
.sub-desc { color: var(--muted); font-size: 13px; margin-top: 3px; }
.sub-price { font-size: 26px; font-weight: 800; white-space: nowrap; }
.sub-price span { font-size: 14px; font-weight: 600; color: var(--muted); }
.sub-status-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.sub-status-row > span:first-child { color: var(--muted); }
.sub-badge { font-weight: 600; font-size: 13px; }
.sub-badge.ok { color: #12805c; }
.sub-badge.trial { color: var(--amber); }
.sub-badge.exp { color: var(--danger); }
.sub-go { width: 100%; margin-top: 20px; font-size: 15px; padding: 13px; background: var(--green); }
.sub-secure { text-align: center; color: var(--muted); font-size: 12px; margin: 10px 0 0; }
.sub-embed { margin-top: 18px; }
.sub-embed-load {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 34px; text-align: center; color: var(--muted); font-size: 14px;
}
#sub-embed-mount {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 8px; min-height: 60px;
}

/* Account Charts import preview: colour-code what each row will do. */
.ai-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ai-table th { text-align: left; padding: 7px 9px; background: var(--bg); border-bottom: 1px solid var(--line);
               position: sticky; top: 0; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ai-table td { padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ai-table tr.ai-add td { background: #f2faf5; }
.ai-table tr.ai-skip td { color: var(--muted); }
.ai-table tr.ai-conflict td { background: #fdf3f2; }