:root {
  --green: #2f8f5b;
  --green-dark: #1f6b42;
  --green-light: #e8f5ee;
  --ink: #1d2b24;
  --muted: #6b7d74;
  --line: #e2e8e4;
  --bg: #f4f7f5;
  --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; }
/* 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(--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; }
/* 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); }
/* 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; }
.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; }
.ws-chip:hover { background: #3a5546; color: #fff; }
.ws-chip.active { background: var(--green); color: #fff; }
/* 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; }
/* 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); } }
.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: center; }
.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); }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }

.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);
}
.wa-tabs { display: flex; align-items: center; gap: 8px; }

/* 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; }
.wa-chat:hover { background: #f6f9f6; }
.wa-chat.active { background: #e7f6ec; }
.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; }
.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: 11px; line-height: 1; padding: 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; }

/* WhatsApp account dialog */
.wa-status { padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; }
.wa-status.ok { background: #e7f6ec; color: #1c7c3c; border: 1px solid #bfe6cd; }
.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; }
.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: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dh-name { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.dh-name.today, .dh-num.today { color: var(--green); }
.dh-num { font-size: 24px; font-weight: 700; }
.dh-full { color: var(--muted); font-size: 14px; margin-left: auto; }
.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-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: 16px; line-height: 1; padding: 5px 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: 15px; 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;
}