/* 2Break CRM — professional theme
   Palette:  yellow #FFDD00 · ink #04050C · paper #F5F4F3 */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&display=swap');

:root{
  --yellow:#FFDD00;
  --ink:#04050C;
  --paper:#F5F4F3;
  --card:#FFFFFF;
  --line:#E6E5E2;
  --muted:#73757C;
  --ink-2:#3a3b42;
  --green:#16A34A;
  --red:#DC2626;
  --blue:#2563EB;
  --radius:12px;
  --shadow:0 1px 2px rgba(4,5,12,.05), 0 4px 16px rgba(4,5,12,.05);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:"Rubik","Segoe UI",Arial,sans-serif; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; letter-spacing:-.1px; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; }
/* Ensure every form control uses the app font (fixes buttons rendering in the OS default font) */
button, input, optgroup, select, textarea{ font-family:inherit; font-size:100%; }
::selection{ background:var(--yellow); color:var(--ink); }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#cfceca; border-radius:8px; border:2px solid var(--paper); }
*::-webkit-scrollbar-thumb:hover{ background:#b6b5b0; }
.card, .nav-item, .chip, .btn-primary, .pill, .tab-btn{ transition:all .15s ease; }

/* ---------- Shell ---------- */
.app{ display:flex; min-height:100vh; }

/* Dark sidebar (RTL → right) */
.sidebar{
  width:236px; flex:0 0 236px; background:var(--ink); color:#C9CAD0;
  padding:20px 14px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
}
.sidebar .logo{ display:flex; align-items:center; justify-content:center; padding:4px 10px 24px; }
.sidebar .logo-img{ height:54px; width:auto; }
.sidebar nav{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; overflow-y:auto; min-height:0; }
.nav-group-label{ font-size:10px; font-weight:800; letter-spacing:1.2px; color:#5b5d66; text-transform:uppercase; padding:15px 14px 5px; }
/* sidebar search + collapsible groups */
.nav-search-wrap{ display:flex; align-items:center; gap:8px; margin:0 14px 12px; padding:8px 12px; box-sizing:border-box;
  background:rgba(255,255,255,.07); border:1px solid #2a2c3a; border-radius:9px; overflow:hidden; }
.nav-search-wrap svg{ flex:0 0 auto; color:#6b6d76; pointer-events:none; }
.nav-search{ flex:1 1 auto; min-width:0; width:100%; background:transparent; border:0; padding:0; margin:0;
  color:#fff; font-size:13px; font-family:inherit; }
.nav-search::placeholder{ color:#6b6d76; }
.nav-search:focus{ outline:none; }
.nav-search-wrap:focus-within{ border-color:var(--yellow); background:rgba(255,255,255,.1); }
.nav-flat{ display:flex; flex-direction:column; gap:2px; }
.nav-group-h{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; color:#7d7f88; font-family:inherit; font-weight:800; font-size:10px; letter-spacing:1.1px; text-transform:uppercase; padding:13px 16px 6px; cursor:pointer; }
.nav-group-h:hover{ color:#fff; }
.nav-chev{ display:inline-flex; transition:transform .15s ease; opacity:.65; }
.nav-group.open > .nav-group-h .nav-chev{ transform:rotate(90deg); opacity:1; }
.nav-group-items{ display:none; flex-direction:column; gap:2px; }
.nav-group.open > .nav-group-items{ display:flex; }
.nav-noresult{ color:#6b6d76; font-size:12.5px; text-align:center; padding:14px; }
.sidebar nav::-webkit-scrollbar{ width:6px; } .sidebar nav::-webkit-scrollbar-thumb{ background:#2a2c3a; }
.nav-item{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px; color:#B7B8C0; font-weight:600; font-size:14.5px; transition:.14s; }
.nav-item .ic{ display:grid; place-items:center; opacity:.85; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{ background:var(--yellow); color:var(--ink); }
.nav-item.active .ic{ opacity:1; }
.nav-item.soon{ opacity:.45; }
.nav-item.soon::after{ content:"בקרוב"; margin-inline-start:auto; font-size:10px; border:1px solid rgba(255,255,255,.2); padding:1px 7px; border-radius:20px; }
.sidebar .spacer{ flex:1; }
.sidebar .foot{ font-size:11px; color:#5b5d66; padding:10px; letter-spacing:.5px; line-height:1.7; }
.sidebar .foot-by{ color:#7a7c85; font-weight:600; }

/* Main */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.imp-bar{ display:flex; align-items:center; justify-content:center; gap:14px; background:var(--ink); color:#fff; font-size:13.5px; font-weight:600; padding:9px 16px; }
.imp-bar b{ color:var(--yellow); }
.pause-bar{ display:flex; align-items:center; justify-content:center; gap:14px; background:#7f1d1d; color:#fff; font-size:13.5px; font-weight:700; padding:9px 16px; }
.pause-bar a{ color:#fff; text-decoration:underline; }
.imp-bar a{ color:#fff; text-decoration:underline; }
.topbar{ background:var(--card); border-bottom:1px solid var(--line); padding:0 28px; height:64px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; }
.tb-title{ display:flex; align-items:baseline; gap:12px; }
.topbar h1{ font-size:18px; margin:0; font-weight:800; }
.topbar .crumb{ color:var(--muted); font-size:13px; }
.topbar .user{ display:flex; align-items:center; gap:14px; }
.topbar .uname{ font-size:14px; color:var(--ink-2); font-weight:600; text-decoration:none; }
.topbar .uname:hover{ color:var(--ink); }
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--yellow); display:grid; place-items:center; font-weight:800; font-size:15px; }
.topbar .user a{ text-decoration:none; }
.topbar .user a:hover .avatar{ box-shadow:0 0 0 2px var(--yellow); }
.btn-logout{ display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:9px; color:var(--muted); }
.btn-logout:hover{ border-color:var(--ink); color:var(--ink); }

/* Fill the available width (no dead space on large screens). Capped only on ultra-wide
   so data rows don't stretch absurdly; raise/remove --content-max if you want fully fluid. */
.content{ padding:24px 32px 40px; width:100%; max-width:1920px; }

/* ---------- Chips / buttons (used everywhere: toolbars, tables, customer file) ---------- */
.chip{ display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--card); border:1px solid var(--line); border-radius:9px; padding:8px 14px; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1; white-space:nowrap; box-shadow:var(--shadow); }
a.chip, button.chip, label.chip{ cursor:pointer; }
a.chip:hover, button.chip:hover, label.chip:hover{ border-color:var(--yellow); background:#FFFDF2; }
button.chip{ font-family:inherit; }
.chip svg{ flex:none; }
.chip.b{ font-weight:700; }
.chip.sm{ padding:6px 11px; font-size:12.5px; gap:5px; border-radius:8px; }
.chip.ghost{ box-shadow:none; background:transparent; }
.chip.solid{ background:var(--ink); color:#fff; border-color:var(--ink); }
.chip.solid:hover{ background:#000; border-color:#000; }
.chip.yellow{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); font-weight:700; }
.chip.yellow:hover{ filter:brightness(.96); border-color:var(--yellow); }
/* a chip that's purely informative (a count badge), not clickable */
.chip.info{ cursor:default; } .chip.info:hover{ border-color:var(--line); background:var(--card); }

/* Toolbar / filters */
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.toolbar select, .toolbar input{ border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:13.5px; background:var(--card); color:var(--ink); font-family:inherit; box-shadow:var(--shadow); }
.toolbar select:focus, .toolbar input:focus{ outline:none; border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,221,0,.18); }
.toolbar .spacer{ flex:1; }
/* Search field with icon */
.search-box{ position:relative; display:inline-flex; align-items:center; }
.search-box svg{ position:absolute; inset-inline-start:11px; color:var(--muted); pointer-events:none; }
.search-box input{ padding-inline-start:36px !important; min-width:240px; }
.seg{ display:inline-flex; border-radius:9px; box-shadow:var(--shadow); }
.seg a{ border:1px solid var(--line); padding:9px 15px; font-size:13.5px; font-weight:600; background:var(--card); }
.seg a:first-child{ border-radius:0 9px 9px 0; }
.seg a:last-child{ border-radius:9px 0 0 9px; border-inline-start:none; }
.seg a:hover{ background:#FFFDF2; }
.seg a.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.seg a.on:hover{ background:#000; }
.seg-n{ display:inline-block; background:rgba(0,0,0,.08); border-radius:20px; font-size:11px; font-weight:700; padding:0 6px; margin-inline-start:3px; }
.seg a.on .seg-n{ background:rgba(255,255,255,.2); }

.section-title{ font-size:12px; font-weight:800; letter-spacing:.4px; color:var(--ink); margin:26px 0 14px; display:flex; align-items:center; gap:9px; text-transform:uppercase; }
.section-title .bar{ width:3px; height:15px; background:var(--yellow); border-radius:2px; }
.section-title small{ color:var(--muted); font-weight:600; text-transform:none; letter-spacing:0; }

/* ---------- Metric cards ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:16px; }
.grid.cols-4{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.card .top{ display:flex; align-items:center; justify-content:space-between; color:var(--muted); margin-bottom:16px; }
.card .top .ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--paper); color:var(--ink-2); }
.card .num{ font-size:32px; font-weight:800; line-height:1; letter-spacing:-.5px; }
.card .lbl{ color:var(--muted); margin-top:7px; font-size:13.5px; }
.card.hero{ border-color:#dcd9cc; }
.card.hero .ic{ background:var(--yellow); color:var(--ink); }
.card.accent-green .num{ color:var(--green); } .card.accent-green .ic{ color:var(--green); }
.card.accent-red .num{ color:var(--red); }     .card.accent-red .ic{ color:var(--red); }
.card.accent-blue .num{ color:var(--blue); }    .card.accent-blue .ic{ color:var(--blue); }

/* ---------- Table ---------- */
.table-wrap{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; box-shadow:var(--shadow); }
/* actions cell: compact icon buttons that don't widen the table */
td.actions{ white-space:nowrap; }
td.actions form{ display:inline; }
.icon-btn{ display:inline-grid; place-items:center; width:30px; height:30px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink-2); cursor:pointer; padding:0; vertical-align:middle; margin-inline-start:4px; }
.icon-btn:hover{ border-color:var(--yellow); color:var(--ink); background:var(--paper); }
.icon-btn.primary{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
.icon-btn.wa{ background:#25D366; border-color:#25D366; color:#fff; }
.icon-btn.danger:hover{ border-color:var(--red); color:var(--red); }
.table-head{ padding:14px 18px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px; display:flex; justify-content:space-between; align-items:center; }
.table-head .count{ color:var(--muted); font-weight:600; font-size:13px; }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:12px 18px; text-align:right; border-bottom:1px solid var(--line); font-size:14px; white-space:nowrap; }
thead th{ background:#FBFBFA; color:var(--muted); font-size:12px; font-weight:700; }
tbody tr:hover{ background:#FBFAF4; }
tbody tr:last-child td{ border-bottom:none; }
.pill{ display:inline-block; padding:3px 10px; border-radius:20px; font-weight:700; font-size:12.5px; }
.pill.y{ background:#FFF6CC; color:#7a6a00; }
.pill.g{ background:#E6F7EE; color:#15803d; }
.pill.r{ background:#FDECEC; color:#b91c1c; }
.pill.n{ background:#EFEFED; color:#555; }
.pill.b{ background:#E6EEFF; color:#1d4ed8; }
/* status dropdown in the users list */
.status-select{ font-family:inherit; cursor:pointer; padding:5px 12px; border-radius:20px; font-weight:700; font-size:12.5px; border:1px solid transparent; transition:all .12s; }
.status-select.g{ background:#E6F7EE; color:#15803d; }
.status-select.n{ background:#FDECEC; color:#b91c1c; }
.status-select:hover{ box-shadow:0 0 0 2px rgba(4,5,12,.07); }
.status-select:focus{ outline:none; border-color:var(--yellow); }
.bulk-bar{ display:flex; align-items:center; gap:8px; margin-bottom:14px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 14px; font-size:13px; flex-wrap:wrap; }
/* inline-editable catalog tables (packages / products) */
.edit-table td{ padding:7px 10px; vertical-align:middle; }
.edit-table th{ font-size:11.5px; }
.edit-table input:not([type="checkbox"]), .edit-table select{
  width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:8px;
  padding:7px 10px; font-size:13.5px; font-family:inherit; background:var(--card); color:var(--ink); transition:border-color .12s, box-shadow .12s;
}
.edit-table input:not([type="checkbox"]):focus, .edit-table select:focus{
  outline:none; border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,221,0,.18); background:#fff;
}
.edit-table input::placeholder{ color:#b9b8b3; }
.edit-table input[type="checkbox"]{ width:17px; height:17px; accent-color:var(--ink); cursor:pointer; vertical-align:middle; }
.edit-table .add-row td{ background:#FCFCFA; }
.edit-table .add-row input::placeholder{ color:#a8a7a2; font-style:italic; }
.edit-table tbody tr:hover td{ background:#FBFAF4; }
.edit-table .add-row:hover td{ background:#FCFCFA; }
.empty{ color:var(--muted); text-align:center; padding:34px; }
.row-link{ color:var(--ink); } .row-link:hover{ color:#000; text-decoration:underline; }
.pager{ display:flex; align-items:center; justify-content:center; gap:16px; padding:16px; border-top:1px solid var(--line); background:#FBFBFA; }
.pager .pg{ border:1px solid var(--line); background:var(--card); border-radius:9px; padding:8px 16px; font-size:13.5px; font-weight:600; }
.pager .pg:hover{ border-color:var(--yellow); }
.pager .pg.disabled{ opacity:.4; pointer-events:none; }
.pager .pg-info{ color:var(--muted); font-size:13px; }
.sign-thumb{ height:34px; max-width:120px; background:#fff; border:1px solid var(--line); border-radius:6px; padding:2px; object-fit:contain; }
.sign-link:hover .sign-thumb{ border-color:var(--yellow); }
td.wrap, th.wrap{ white-space:normal; min-width:140px; }
.nowrap{ white-space:nowrap; }
.act-table th, .act-table td{ font-size:13px; padding:10px 12px; }
.act-table .ell{ display:inline-block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.act-table tbody tr{ border-inline-start:3px solid transparent; }
.act-table tbody tr:hover{ border-inline-start-color:var(--yellow); }

/* Expandable activations report */
.act-exp .act-row{ cursor:pointer; }
.act-exp .act-row:hover{ background:#FBFAF4; }
.act-exp .exp-cell{ text-align:center; color:var(--muted); }
.act-exp .exp-caret{ display:inline-block; transition:transform .15s ease; font-size:11px; }
.act-exp .act-row.open .exp-caret{ transform:rotate(90deg); color:var(--ink); }
.act-exp .act-row.open{ background:#FFFCEB; border-inline-start-color:var(--yellow); }
.act-exp .act-row.open td{ border-bottom:none; }
.act-exp .act-detail{ display:none; }
.act-exp .act-detail.open{ display:table-row; }
.act-exp .act-detail > td{ background:#FBFAF4; padding:0; border-bottom:2px solid var(--line); }
.act-detail-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; padding:18px 20px; }
.dtl-block{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.dtl-h{ display:flex; align-items:center; gap:7px; font-weight:800; font-size:12.5px; color:var(--ink); margin-bottom:10px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.dtl-kv{ display:flex; justify-content:space-between; gap:14px; padding:5px 0; font-size:13px; align-items:flex-start; }
.dtl-kv span{ color:var(--muted); white-space:nowrap; flex:none; }
.dtl-kv b{ font-weight:600; text-align:left; min-width:0; word-break:break-word; overflow-wrap:anywhere; }
/* specials / addons sub-lists in the activation detail */
.dtl-sub{ margin-top:10px; }
.dtl-sub-h{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; }
.dtl-sum{ color:#15803d; background:#E6F7EE; border-radius:6px; padding:1px 7px; font-size:11px; }
.dtl-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 8px; border-radius:7px; font-size:12.5px; }
.dtl-line:nth-child(even){ background:#fff; }
.dtl-line-name{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dtl-line-price{ font-weight:700; white-space:nowrap; }
.dtl-none{ font-size:12px; color:var(--muted); padding:2px 8px; }
.mini-tag{ background:#EDEFF5; color:#3a3b42; font-size:10.5px; font-weight:800; border-radius:5px; padding:1px 6px; }
.mini-tag.free{ background:#E8F0FE; color:#1d4ed8; }
/* global search */
.topbar-search{ position:relative; display:flex; align-items:center; margin-inline-end:8px; }
.topbar-search svg{ position:absolute; inset-inline-end:11px; color:var(--muted); pointer-events:none; }
.topbar-search input{ border:1px solid var(--line); border-radius:9px; padding:8px 12px; padding-inline-end:34px; font-size:13.5px; font-family:inherit; background:var(--paper); color:var(--ink); width:200px; transition:width .15s, background .15s; }
.topbar-search input:focus{ outline:none; width:260px; background:#fff; border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,221,0,.18); }
@media (max-width:1000px){ .topbar-search{ display:none; } }
.search-hero{ display:flex; align-items:center; gap:10px; position:relative; }
.search-hero-ic{ position:absolute; inset-inline-start:16px; color:var(--muted); pointer-events:none; }
.search-hero input{ flex:1; border:1px solid var(--line); border-radius:12px; padding:14px 16px; padding-inline-start:48px; font-size:16px; font-family:inherit; background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.search-hero input:focus{ outline:none; border-color:var(--yellow); box-shadow:0 0 0 4px rgba(255,221,0,.18); }
.search-groups{ display:flex; flex-direction:column; gap:16px; }
.search-list{ display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.search-item{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 13px; border-radius:9px; border:1px solid var(--line); background:var(--paper); }
.search-item:hover{ border-color:var(--yellow); background:#FFFDF2; }
.si-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.si-main strong{ font-size:14.5px; }
.si-main .muted{ font-size:12.5px; }
.si-meta{ display:flex; align-items:center; gap:14px; white-space:nowrap; font-size:13px; }
/* role menu builder (menus.php) */
.roles-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; align-items:start; }
.role-card .def-toggle{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); padding:8px 0 12px; border-bottom:1px solid var(--line); margin-bottom:8px; cursor:pointer; }
.role-card .def-toggle input{ width:16px; height:16px; accent-color:var(--ink); }
.menu-build{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; transition:opacity .15s; }
.role-card.is-default .menu-build{ opacity:.45; pointer-events:none; }
.menu-build li{ display:flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:7px 10px; }
.menu-build li.dragging{ opacity:.5; border-color:var(--yellow); }
.menu-build li label{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; cursor:pointer; flex:1; }
.menu-build li label input{ width:16px; height:16px; accent-color:var(--ink); }
.menu-build .mb-ic{ display:inline-flex; color:var(--muted); }
.menu-build .drag-handle{ cursor:grab; color:#b9b8b3; font-size:12px; letter-spacing:-2px; user-select:none; }
.menu-build .drag-handle:active{ cursor:grabbing; }
/* inventory stock-adjust control */
.adj-form{ display:flex; align-items:center; gap:5px; }
.adj-op{ border:1px solid var(--line); border-radius:8px; padding:5px 6px; font-size:12px; font-family:inherit; background:var(--card); color:var(--ink); }
.adj-val{ width:70px; border:1px solid var(--line); border-radius:8px; padding:5px 7px; font-size:13px; font-family:inherit; text-align:center; }
.adj-val:focus, .adj-op:focus{ outline:none; border-color:var(--yellow); }
/* stock breakage row status */
tr.stock-crit td{ background:#FDECEC !important; }
tr.stock-warn td{ background:#FFF7E6 !important; }
/* horizontal bar-list (cities / packages stats) */
.barlist{ display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.barlist-row{ display:grid; grid-template-columns:130px 1fr 38px; align-items:center; gap:10px; font-size:13px; }
.bl-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.bl-track{ background:var(--paper); border-radius:7px; height:14px; overflow:hidden; }
.bl-fill{ display:block; height:100%; background:#2563EB; border-radius:7px; }
.bl-fill.yellow{ background:var(--yellow); }
.bl-num{ text-align:left; font-weight:700; color:var(--muted); }
/* highlight the logged-in worker's own row in the bonus table */
tr.me-row td{ background:#FFFBE6 !important; }
tr.me-row:hover td{ background:#FFF6CC !important; }
/* Toolbar date / inline number fields */
/* Membership cards page */
.card-add{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
.card-add .form-row{ flex:1; min-width:170px; margin:0; }
.visit-cell{ white-space:nowrap; }
.vp{ width:27px; height:27px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--muted); font-weight:700; font-size:12px; cursor:pointer; font-family:inherit; margin-inline-start:3px; vertical-align:middle; transition:all .12s ease; }
.vp:hover{ border-color:var(--ink); color:var(--ink); }
.vp.on{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); box-shadow:0 1px 4px rgba(255,221,0,.5); }
.vp.locked{ display:inline-block; cursor:not-allowed; opacity:.92; }
.vp.locked:hover{ border-color:var(--yellow); color:var(--ink); }
.chip.danger{ color:var(--red); }
.chip.danger:hover{ border-color:var(--red); background:#FEF2F2; }
td.actions{ display:flex; gap:6px; align-items:center; }
/* Inline presence tags in the activations summary row */
.row-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.tag{ display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px; line-height:1.5; cursor:help; }
.tag svg{ width:11px; height:11px; }
.tag-spec{ background:#FFF6CC; color:#7a6a00; }
.tag-add{ background:#E8F0FE; color:#1d4ed8; }
.date-field{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); font-weight:600; }
.toolbar label.chip{ font-weight:600; gap:8px; }
.toolbar label.chip input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--ink); margin:0; box-shadow:none; }

/* Customer file */
.ok-banner{ background:#E6F7EE; border:1px solid #B8E6CC; color:#15803d; padding:11px 16px; border-radius:10px; margin-bottom:16px; font-weight:600; }

/* Customer file header + tabs */
.cust-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 20px; margin-bottom:16px; flex-wrap:wrap; }
.cust-id{ display:flex; align-items:center; gap:14px; }
.cust-avatar{ width:48px; height:48px; border-radius:14px; background:var(--ink); color:var(--yellow); display:grid; place-items:center; font-weight:800; font-size:20px; }
.cust-name{ font-size:18px; font-weight:800; display:flex; align-items:center; gap:10px; }
.cust-sub{ color:var(--muted); font-size:13.5px; margin-top:2px; }
.cust-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.wa-chip{ background:#25D366; color:#fff; border-color:#25D366; font-weight:700; }
.wa-chip:hover{ background:#1ebe5a; border-color:#1ebe5a; filter:none; }
.wa-chip svg{ stroke:#fff; }
.tabs{ display:flex; gap:4px; border-bottom:2px solid var(--line); margin-bottom:18px; flex-wrap:wrap; }
.tab-btn{ background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; padding:11px 18px; font-family:inherit; font-size:14.5px; font-weight:700; color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:8px; }
.tab-btn:hover{ color:var(--ink); }
.tab-btn.on{ color:var(--ink); border-bottom-color:var(--yellow); }
.tb-count{ background:var(--paper); color:var(--ink-2); border-radius:20px; font-size:11px; padding:1px 8px; }
.tab-panel{ display:none; }
.tab-panel.on{ display:block; }
/* Customer file — two-column layout (replaces tabs) */
.cust-layout{ display:grid; grid-template-columns:1fr 380px; gap:18px; align-items:start; }
.cust-main, .cust-side{ display:flex; flex-direction:column; gap:18px; }
.cust-side{ position:sticky; top:18px; }
.sub-h{ display:flex; align-items:center; gap:7px; font-weight:800; font-size:13px; color:var(--ink-2); margin:20px 0 8px; padding-top:16px; border-top:1px solid var(--line); }
@media (max-width:1000px){ .cust-layout{ grid-template-columns:1fr; } .cust-side{ position:static; } }
.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.info-grid > div{ display:flex; justify-content:space-between; font-size:14px; }
.info-grid span{ color:var(--muted); }
.soon-chip{ opacity:.5; cursor:not-allowed; }
.lead-grid{ display:grid; grid-template-columns:340px 1fr; gap:18px; align-items:start; }
.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.panel-h{ font-weight:800; font-size:14px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.panel-h .count{ color:var(--muted); font-weight:600; font-size:12px; }
.kv{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.kv:last-child{ border-bottom:none; }
.kv span{ color:var(--muted); }
.kv.col{ flex-direction:column; }
.note-box{ background:var(--paper); border-radius:8px; padding:10px; margin-top:6px; color:var(--ink); }
.note-form textarea{ width:100%; border:1px solid var(--line); border-radius:10px; padding:11px; font-family:inherit; font-size:14px; resize:vertical; background:var(--paper); }
.note-form textarea:focus{ outline:none; border-color:var(--yellow); background:#fff; }
.note-actions{ display:flex; gap:10px; margin-top:10px; }
.note-actions select{ flex:1; border:1px solid var(--line); border-radius:10px; padding:10px; font-family:inherit; background:var(--card); }
.note-actions .btn-primary{ width:auto; padding:10px 22px; }
.timeline{ display:flex; flex-direction:column; gap:10px; max-height:520px; overflow:auto; }
.tl-item{ border:1px solid var(--line); border-radius:10px; padding:11px 13px; }
.tl-top{ display:flex; align-items:center; gap:10px; font-size:12.5px; }
.tl-worker{ margin-inline-start:auto; color:var(--ink-2); font-weight:600; }
.tl-comment{ margin-top:7px; font-size:14px; color:var(--ink); }
/* Stack any 2-col .lead-grid on narrow screens. !important overrides the inline
   grid-template-columns some pages set (inline styles otherwise beat media queries). */
@media (max-width:860px){ .lead-grid{ grid-template-columns:1fr !important; } }

/* Forms */
.form-row{ margin-bottom:14px; }
.form-row label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; font-weight:600; }
.form-row input, .form-row select{ width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; font-size:14.5px; font-family:inherit; background:var(--paper); color:var(--ink); }
.form-row input:focus, .form-row select:focus{ outline:none; border-color:var(--yellow); background:#fff; }
.form-row textarea{ width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; font-size:14.5px; font-family:inherit; background:var(--paper); color:var(--ink); resize:vertical; }
.form-row textarea:focus{ outline:none; border-color:var(--yellow); background:#fff; }
.form-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:560px){ .form-grid2{ grid-template-columns:1fr; } }
.offers-list{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.offer-item{ display:flex; justify-content:space-between; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:13.5px; font-weight:600; }
.offer-item:hover{ border-color:var(--yellow); }
.offer-item-row{ background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.offer-item-row:hover{ border-color:#dad9d4; }
.offer-item-row .offer-item{ background:none; border:none; padding:0 0 9px; justify-content:flex-start; gap:9px; }
.offer-item-row .offer-item:hover{ border:none; }
.offer-item-row .offer-item .muted{ margin-inline-start:auto; }
.offer-item-tools{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; border-top:1px dashed var(--line); padding-top:9px; }
.offer-link{ flex:1; min-width:130px; font-size:11.5px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:7px; padding:7px 9px; direction:ltr; text-align:left; cursor:text; }
.offer-link:focus{ outline:none; border-color:var(--yellow); }
/* Stock entry form */
.form-lbl{ display:block; font-size:13px; color:var(--muted); margin:8px 0 8px; font-weight:700; }
.item-row{ display:flex; gap:8px; margin-bottom:8px; }
.item-row .prod-select{ flex:1; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:9px; font-family:inherit; font-size:14px; background:var(--paper); }
.item-row .it-qty{ width:90px; flex:0 0 90px; }
.item-row .it-price{ width:120px; flex:0 0 120px; }
.item-row input{ padding:10px 12px; border:1px solid var(--line); border-radius:9px; font-family:inherit; font-size:14px; background:var(--paper); }
.item-row input:focus, .item-row select:focus{ outline:none; border-color:var(--yellow); background:#fff; }
@media (max-width:560px){ .item-row{ flex-wrap:wrap; } .item-row .it-qty, .item-row .it-price{ flex:1; width:auto; } }
/* Attendance clock */
.clock-card{ max-width:480px; margin:30px auto; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:38px 30px; text-align:center; }
.clock-card h2{ margin:10px 0 4px; font-size:24px; font-weight:800; }
.clock-state{ width:84px; height:84px; border-radius:50%; display:grid; place-items:center; margin:0 auto 6px; }
.clock-state.on{ background:#E6F7EE; color:var(--green); }
.clock-state.off{ background:var(--paper); color:var(--muted); }
/* Cash page */
.cash-hero{ display:flex; align-items:center; gap:18px; background:linear-gradient(135deg,#0a0b14,var(--ink)); color:#fff; border-radius:16px; padding:22px 26px; box-shadow:var(--shadow); margin-bottom:18px; }
.cash-hero-ic{ width:56px; height:56px; border-radius:14px; background:rgba(255,221,0,.15); color:var(--yellow); display:grid; place-items:center; flex:0 0 auto; }
.cash-hero-main{ flex:1; }
.cash-hero-label{ color:#9a9cab; font-size:13px; font-weight:600; }
.cash-hero-amount{ color:var(--yellow); font-size:40px; font-weight:900; line-height:1.1; letter-spacing:-1px; }
.cash-hero-note{ color:#9a9cab; font-size:12px; text-align:left; line-height:1.6; }
.cash-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:18px; align-items:start; }
@media (max-width:860px){ .cash-grid{ grid-template-columns:1fr; } .cash-hero-note{ display:none; } }
.cash-withdraw{ margin-top:18px; }
.withdraw-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.withdraw-row .form-row{ margin-bottom:0; }
.btn-outline{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:11px 22px; font-family:inherit; font-weight:700; font-size:14px; color:var(--ink); cursor:pointer; height:43px; }
.btn-outline:hover{ border-color:var(--yellow); }
/* Simple cash flow */
.big-field label{ font-size:15px; font-weight:700; color:var(--ink); }
.big-field input{ font-size:26px !important; font-weight:800; padding:16px 18px !important; text-align:center; }
.link-toggle{ background:none; border:none; color:var(--muted); font-family:inherit; font-size:13.5px; cursor:pointer; padding:10px 0; }
.link-toggle:hover{ color:var(--ink); }
.xtra-section{ display:none; }
.xtra-section.open{ display:block; }
/* Cash shortage alert */
.cash-alert{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:#FDECEC; border:1px solid #E5484D; color:#B4282D; border-radius:12px; padding:14px 18px; margin-bottom:16px; font-weight:700; }
.btn-wa-alert{ background:#25D366; color:#fff; border-radius:9px; padding:9px 16px; font-weight:700; font-size:13.5px; white-space:nowrap; }
tr.row-shortage td{ background:#FDECEC; }
tr.row-shortage:hover td{ background:#FBE0E0; }
/* Reviews */
.stars{ color:#FFB800; font-size:15px; letter-spacing:1px; }
.stars .star-off{ color:var(--line); }
.dist-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12px; }
.dist-label{ width:26px; color:var(--muted); font-weight:700; }
.dist-count{ width:26px; text-align:left; color:var(--muted); }
.dist-mini{ width:100%; }
.reviews-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.review-card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow); border-top:3px solid var(--line); display:flex; flex-direction:column; }
.review-card.r5{ border-top-color:var(--green); } .review-card.r4{ border-top-color:#84cc16; }
.review-card.r3{ border-top-color:var(--yellow); } .review-card.r2{ border-top-color:#f59e0b; } .review-card.r1{ border-top-color:var(--red); }
.review-top{ display:flex; align-items:center; gap:11px; }
.rev-avatar{ width:40px; height:40px; border-radius:50%; background:var(--ink); color:var(--yellow); display:grid; place-items:center; font-weight:800; font-size:17px; flex:0 0 auto; }
.rev-meta{ flex:1; min-width:0; } .rev-meta strong{ display:block; }
.rev-date{ color:var(--muted); font-size:12px; align-self:flex-start; }
.review-text{ margin-top:11px; font-size:14px; color:var(--ink-2); line-height:1.6; flex:1; }
.rev-actions{ display:flex; gap:6px; justify-content:flex-end; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
/* Dashboard charts */
.chart-grid{ display:grid; grid-template-columns:2fr 1fr; gap:16px; }
@media (max-width:900px){ .chart-grid{ grid-template-columns:1fr; } }
/* Mini bar chart (stats) */
.bar-track{ background:var(--paper); border-radius:20px; height:14px; overflow:hidden; }
.bar-fill{ background:linear-gradient(90deg,var(--yellow),#ffcf00); height:100%; border-radius:20px; min-width:2px; }
/* Activation entry */
.multi{ width:100%; border:1px solid var(--line); border-radius:9px; padding:6px; font-family:inherit; font-size:14px; background:var(--paper); }
.multi:focus{ outline:none; border-color:var(--yellow); background:#fff; }
.multi option{ padding:5px 8px; border-radius:6px; }
.total-box{ background:var(--ink); color:#fff; border-radius:10px; padding:14px 16px; font-weight:700; font-size:15px; display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.total-box span{ color:var(--yellow); font-size:22px; font-weight:900; }
.pay-remain{ display:flex; justify-content:space-between; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 16px; font-weight:700; font-size:14px; margin-bottom:14px; }
.pay-remain span{ color:var(--red); font-weight:900; }
.pay-remain.ok{ background:#E6F7EE; border-color:#B8E6CC; }
.pay-remain.ok span{ color:var(--green); }
/* Package picker (tap-friendly, searchable) */
.picker{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper); }
.picker-search{ width:100%; border:none; border-bottom:1px solid var(--line); padding:11px 14px; background:#fff; font-family:inherit; font-size:14px; outline:none; }
.picker-search:focus{ box-shadow:inset 0 -2px 0 var(--yellow); }
.picker-list{ max-height:250px; overflow-y:auto; display:flex; flex-direction:column; }
.pick-item{ display:flex; align-items:center; gap:11px; padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; font-size:14.5px; }
.pick-item:last-child{ border-bottom:none; }
.pick-item:hover{ background:#fff; }
.pick-item:has(input:checked){ background:var(--yellow-soft,#FFF6CC); font-weight:700; }
.pick-item input{ width:19px; height:19px; flex:0 0 19px; accent-color:#caa800; }
.pick-name{ flex:1; }
.pick-price{ color:var(--muted); font-weight:700; }
/* Settings */
.settings-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; align-items:start; }
@media (max-width:1000px){ .settings-grid{ grid-template-columns:1fr; } }
.panel-h small{ font-weight:500; font-size:11.5px; }
.kv-editor{ display:flex; flex-direction:column; gap:8px; }
.kv-row{ display:flex; gap:8px; }
.kv-row .kv-code{ width:74px; flex:0 0 74px; }
.kv-row input{ padding:9px 11px; border:1px solid var(--line); border-radius:9px; font-size:14px; font-family:inherit; background:var(--paper); color:var(--ink); }
.kv-row .kv-label{ flex:1; min-width:0; }
.kv-row input:focus{ outline:none; border-color:var(--yellow); background:#fff; }

/* Orders calendar */
.cal-bar{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.cal-title{ font-size:20px; font-weight:800; min-width:150px; text-align:center; }
.cal-search{ display:flex; align-items:center; gap:8px; margin-inline-start:auto; }
input[type="search"], input[type="text"].search{ border:1px solid var(--line); border-radius:10px; padding:9px 13px; font-size:14px; font-family:inherit; background:var(--card); color:var(--ink); min-width:220px; }
input[type="search"]:focus{ outline:none; border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,221,0,.18); }
@media (max-width:760px){ .cal-search{ margin-inline-start:0; width:100%; } .cal-search input{ flex:1; min-width:0; } }
.calendar{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow{ margin-bottom:6px; }
.cal-dow-cell{ text-align:center; font-size:12px; font-weight:700; color:var(--muted); padding:6px 0; }
.cal-cell{ min-height:118px; border:1px solid var(--line); border-radius:9px; padding:6px; background:#fff; }
.cal-cell.empty{ background:#FAFAF9; border-style:dashed; }
.cal-cell.today{ border-color:var(--yellow); box-shadow:inset 0 0 0 1px var(--yellow); }
.cal-daynum{ font-size:12.5px; font-weight:700; color:var(--ink-2); display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.cal-badge{ background:var(--ink); color:#fff; border-radius:20px; font-size:10px; padding:1px 7px; }
.cal-orders{ display:flex; flex-direction:column; gap:3px; }
.cal-order{ position:relative; display:flex; gap:6px; align-items:center; font-size:11.5px; padding:3px 6px; border-radius:6px; cursor:pointer; border-inline-start:3px solid #ccc; background:var(--paper); white-space:nowrap; }
.cal-order .o-time{ font-weight:700; color:var(--ink-2); flex:0 0 auto; }
.cal-order .o-name{ overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.cal-order.o-g{ border-inline-start-color:var(--green); }
.cal-order.o-r{ border-inline-start-color:var(--red); } .cal-order.o-r .o-name{ text-decoration:line-through; color:var(--muted); }
.cal-order.o-y{ border-inline-start-color:var(--yellow); }
.cal-order:hover{ background:var(--yellow-soft,#FFF6CC); }
/* tooltip */
.cal-tip{ display:none; position:absolute; z-index:50; top:100%; inset-inline-start:0; margin-top:6px; width:230px;
  background:var(--ink); color:#eaeaf0; border-radius:10px; padding:12px 14px; box-shadow:0 12px 30px rgba(0,0,0,.4); white-space:normal; }
.cal-order:hover .cal-tip{ display:block; }
.cal-tip .tip-h{ color:var(--yellow); font-weight:800; font-size:13.5px; margin-bottom:8px; }
.cal-tip div{ display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:2px 0; }
.cal-tip div span{ color:#9a9cab; } .cal-tip div b{ color:#fff; text-align:left; }
@media (max-width:760px){ .cal-cell{ min-height:80px; } .cal-order .o-name{ display:none; } }
.muted{ color:var(--muted); }
.num-cell{ font-variant-numeric:tabular-nums; font-weight:700; }

/* Mobile/tablet: the sidebar becomes an off-canvas DRAWER opened by a hamburger in the topbar.
   (The grouped + searchable sidebar doesn't collapse into a horizontal bar, so we slide it in.) */
.nav-burger{ display:none; }
.nav-overlay{ display:none; }
@media (max-width:1024px){
  .nav-burger{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 auto;
    border:none; border-radius:10px; background:var(--ink); color:var(--yellow); font-size:21px; line-height:1; cursor:pointer; }
  /* off-canvas: fully hidden when closed (no box-shadow bleed onto the screen edge on narrow phones) */
  .sidebar{ position:fixed; top:0; right:0; height:100dvh; width:272px; max-width:86vw; flex:none;
    transform:translateX(100%); transition:transform .25s ease; z-index:65; overflow-y:auto; box-shadow:none; }
  body.nav-open .sidebar{ transform:translateX(0); box-shadow:-8px 0 30px rgba(0,0,0,.45); }
  .nav-overlay{ display:block; position:fixed; inset:0; background:rgba(4,5,12,.55); z-index:62; opacity:0; pointer-events:none; transition:opacity .2s; }
  body.nav-open .nav-overlay{ opacity:1; pointer-events:auto; }
  html, body{ overflow-x:hidden; }          /* belt-and-suspenders: no horizontal peek of the drawer */
  .main{ width:100%; min-width:0; }
  .topbar{ position:sticky; top:0; }
  .content{ padding:16px 14px 40px; }
  .table-wrap{ overflow-x:auto; }
}
/* Touch devices: larger tap targets + 16px inputs (prevents iOS zoom-on-focus) */
@media (pointer:coarse){
  .nav-item{ padding:12px 16px; }
  .chip, .btn-logout{ min-height:42px; display:inline-flex; align-items:center; }
  .icon-btn{ width:40px; height:40px; }
  input, select, textarea, .picker-search, .multi{ min-height:44px; font-size:16px; }
  .btn-primary{ min-height:48px; font-size:16px; }
  .pick-item{ padding:14px 16px; }
  .tab-btn{ padding:14px 18px; }
  table th, table td{ padding:14px 16px; }
}

/* ---------- Login ---------- */
.login-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--ink); }
.login-card{ width:100%; max-width:370px; background:var(--card); border-radius:16px; padding:38px 32px; box-shadow:0 20px 60px rgba(0,0,0,.4); border-top:4px solid var(--yellow); }
.login-logo{ text-align:center; margin-bottom:14px; }
.login-logo-img{ height:84px; width:auto; }
.login-card .hint{ text-align:center; color:var(--muted); font-size:13.5px; margin-bottom:24px; }
.field{ margin-bottom:15px; }
.field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:7px; font-weight:600; }
.field input{ width:100%; padding:12px 14px; border-radius:10px; font-size:15px; background:var(--paper); border:1px solid var(--line); color:var(--ink); outline:none; }
.field input:focus{ border-color:var(--yellow); background:#fff; box-shadow:0 0 0 3px rgba(255,221,0,.25); }
.btn-primary{ width:100%; padding:13px; border:none; border-radius:10px; cursor:pointer; background:var(--yellow); color:var(--ink); font-weight:800; font-size:15px; }
.btn-primary:hover{ filter:brightness(.97); }
.alert{ background:#FDECEC; border:1px solid #F3C9CB; color:#B4282D; padding:11px 14px; border-radius:10px; font-size:14px; margin-bottom:18px; text-align:center; }

/* Submit lock overlay (prevents double-submit on activations / cash reports) */
.submit-overlay{ position:fixed; inset:0; z-index:9998; background:rgba(255,255,255,.62); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.submit-overlay .spin{ width:44px; height:44px; border:4px solid #E6E5E2; border-top-color:var(--ink,#04050C); border-radius:50%; animation:spin .8s linear infinite; }
.submit-overlay .submit-msg{ font-weight:700; color:var(--ink,#04050C); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Deposit confirmation signature modal (cannot be dismissed except via cancel) */
.dep-modal{ position:fixed; inset:0; z-index:9999; background:rgba(4,5,12,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.dep-box{ background:#fff; border-radius:16px; padding:22px; max-width:460px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.35); text-align:center; }
.dep-title{ font-weight:800; font-size:18px; color:var(--ink,#04050C); }
.dep-canvas{ border:2px dashed #cfcec9; border-radius:12px; background:#FBFAF4; touch-action:none; cursor:crosshair; width:100%; max-width:400px; }
.dep-hint{ color:var(--muted,#73757C); font-size:12px; margin:6px 0 14px; }
.dep-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }