/* index.html — Licence HQ dashboard styles (extracted 2026-09) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scrollbar hidden but functional */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none}

:root[data-theme="dark"]{
  --bg:#080a12;--surface:#0f1220;--surface2:#161a2b;--surface3:#1f2439;
  --border:#262c42;--border2:#353d59;
  --text:#eef0f7;--text2:#98a0bd;--text3:#5b6485;
  --accent:#7c7ff5;--accent2:#5a5df0;--accent-bg:#1a1d3e;
  --green:#34d399;--green-bg:#08241c;
  --red:#f87171;--red-bg:#2a0f14;
  --orange:#fb923c;--orange-bg:#2a1a0c;
  --yellow:#fbbf24;--yellow-bg:#241c07;
  --overlay:rgba(4,6,14,.88);
  --shadow:0 12px 48px rgba(0,0,0,.65);--shadow-sm:0 3px 16px rgba(0,0,0,.4);
  --radius:12px;--radius-sm:8px;
  --bg-gradient:linear-gradient(175deg,#111634 0%,#0b0f1f 38%,#080a12 72%,#090c17 100%);
}
:root[data-theme="light"]{
  --bg:#f0f0f5;--surface:#fff;--surface2:#f5f5fa;--surface3:#eaeaf0;
  --border:#e0e0ea;--border2:#c8c8d8;
  --text:#111116;--text2:#55555f;--text3:#b0b0bc;
  --accent:#5a5df0;--accent2:#4446d0;--accent-bg:#eeeeff;
  --green:#059669;--green-bg:#d1fae5;
  --red:#dc2626;--red-bg:#fee2e2;
  --orange:#d97706;--orange-bg:#fef3c7;
  --yellow:#b45309;--yellow-bg:#fef9c3;
  --overlay:rgba(0,0,0,.45);
  --shadow:0 12px 48px rgba(0,0,0,.14);--shadow-sm:0 3px 16px rgba(0,0,0,.09);
  --radius:12px;--radius-sm:8px;
  --bg-gradient:radial-gradient(ellipse 90% 55% at 12% -15%,rgba(90,93,240,.05),transparent 55%),radial-gradient(ellipse 70% 50% at 108% -5%,rgba(56,142,255,.045),transparent 60%),var(--bg);
}
:root[data-theme="warm"]{
  --bg:#faf5ec;--surface:#fffdf8;--surface2:#f6ecdb;--surface3:#efe0c7;
  --border:#e6d5b5;--border2:#d6bf93;
  --text:#2b2114;--text2:#6b5a41;--text3:#a3916f;
  --accent:#c2662f;--accent2:#a5501f;--accent-bg:#fbe6d3;
  --green:#3f7d3a;--green-bg:#e3efd8;
  --red:#b8452e;--red-bg:#f7ded4;
  --orange:#b56417;--orange-bg:#f8e3c4;
  --yellow:#94690a;--yellow-bg:#f7ecc6;
  --overlay:rgba(56,40,15,.4);
  --shadow:0 12px 48px rgba(90,60,20,.16);--shadow-sm:0 3px 16px rgba(90,60,20,.10);
  --radius:12px;--radius-sm:8px;
  --bg-gradient:radial-gradient(ellipse 90% 55% at 12% -15%,rgba(194,102,47,.10),transparent 55%),radial-gradient(ellipse 70% 50% at 108% -5%,rgba(224,168,64,.10),transparent 60%),var(--bg);
}

html{background:var(--bg)}
body{background:var(--bg-gradient);background-attachment:fixed;color:var(--text);font-family:'Inter',system-ui,sans-serif;min-height:100vh;font-size:15px;line-height:1.55;transition:background .2s,color .2s;margin: 0;}
:root[data-theme="dark"] .topbar{background:rgba(15,18,32,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
:root[data-theme="dark"] .sidebar{background:rgba(15,18,32,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
:root[data-theme="dark"] .stat,:root[data-theme="dark"] .sstat,:root[data-theme="dark"] .card{background:rgba(18,22,38,.78)}

/* ── PRESET COLORS ── */
.color-presets{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px;align-items:center}
.cp{width:28px;height:28px;border-radius:7px;cursor:pointer;border:2.5px solid transparent;transition:all .15s;flex-shrink:0}
.cp:hover{transform:scale(1.12)}
.cp.sel{border-color:var(--text);transform:scale(1.15)}
.hex-input{flex:1;min-width:90px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:13px;color:var(--text);outline:none;font-family:'JetBrains Mono',monospace}
.hex-input:focus{border-color:var(--accent)}

/* ── LAYOUT ── */
.layout{display:flex;min-height:100vh}
/* sidebar + mobile nav styles now live in /sidebar.js (shared component) */
.nav-badge.red{background:var(--red-bg);color:var(--red)}

/* ── TOPBAR ── */
.main{flex:1;overflow-x:hidden;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:56px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.topbar-title{font-size:16px;font-weight:700;color:var(--text)}
.topbar-actions{display:flex;gap:10px;align-items:center}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 18px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;border:none;font-family:inherit;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent2)}
.btn-ghost{background:var(--surface2);border:1.5px solid var(--border);color:var(--text2)}.btn-ghost:hover{border-color:var(--border2);color:var(--text)}
.btn-danger{background:var(--red-bg);border:1.5px solid var(--red);color:var(--red)}.btn-danger:hover{opacity:.85}
.btn-success{background:var(--green-bg);border:1.5px solid var(--green);color:var(--green)}.btn-success:hover{opacity:.85}
.btn-warn{background:var(--orange-bg);border:1.5px solid var(--orange);color:var(--orange)}.btn-warn:hover{opacity:.85}
.btn-icon{width:38px;padding:0;justify-content:center;font-size:16px}
.btn-sm{height:32px;padding:0 13px;font-size:13px}
.btn:disabled{opacity:.4;pointer-events:none}

/* ── PAGE ── */
.page{padding:28px}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.page-title{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.4px}
.page-sub{font-size:13px;color:var(--text3);margin-top:3px}

/* ── STATS ── */
.stats-grid{display:flex;align-items:stretch;flex-wrap:wrap;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.stat{position:relative;padding-right:32px;margin-right:32px;border-right:1px solid var(--border)}
.stat:last-child{border-right:none;margin-right:0;padding-right:0}
.stat-icon{display:none}
.stat-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em}
.stat.warn .stat-label{color:var(--orange)}
.stat-value{font-size:34px;font-weight:800;color:var(--text);letter-spacing:-2px;margin:6px 0 3px;line-height:1}
.stat.warn .stat-value{color:var(--orange)}
.stat-sub{font-size:12px;color:var(--text3)}

/* ── REVENUE CARDS (Client Profile) ── */
.rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rev-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;transition:border-color .15s}
.rev-card:hover{border-color:var(--border2)}
.rev-card-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.rev-card-val{font-size:18px;font-weight:800;color:var(--text);letter-spacing:-.5px}
.rev-card-val.green{color:var(--green)}.rev-card-val.red{color:var(--red)}.rev-card-val.orange{color:var(--orange)}
.rev-card-sub{font-size:11px;color:var(--text3);margin-top:2px}
.cp-project-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px}
.cp-project-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cp-project-name{font-size:13px;font-weight:700;color:var(--text)}
.cp-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cp-mini{font-size:11px;color:var(--text3)}
.cp-mini b{display:block;font-size:14px;font-weight:800;color:var(--text);letter-spacing:-.3px;margin-top:2px}
.cp-sec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.cp-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-left:2.5px solid var(--border2);border-radius:var(--radius-sm);margin-bottom:5px}
.cp-row-label{font-size:12.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-row-sub{font-size:10.5px;color:var(--text3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-empty{font-size:12px;color:var(--text3);padding:12px;text-align:center;background:var(--surface2);border:1px dashed var(--border);border-radius:var(--radius-sm)}
.money-count{background:var(--surface3);color:var(--text2);font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px}
.money-count.warn{background:var(--orange-bg);color:var(--orange)}
.portal-vis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.portal-vis-item{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;font-size:12.5px;color:var(--text2);cursor:pointer}
.portal-vis-item input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}

/* ── APP GRID ── */
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:36px}

.app-card{
  border-radius:var(--radius);padding:18px;
  cursor:pointer;transition:all .18s;position:relative;
  border:2px solid transparent;
}
.app-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.app-card.active{box-shadow:var(--shadow-sm)}


.app-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.app-emoji-wrap{
  width:44px;height:44px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  border:2px solid rgba(255,255,255,.15);
}
.app-menu-btn{background:rgba(255,255,255,.1);border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:18px;padding:4px 7px;border-radius:7px;line-height:1;transition:all .15s}
.app-menu-btn:hover{background:rgba(255,255,255,.2);color:#fff}
.app-name{font-size:14px;font-weight:800;color:#fff;margin-bottom:3px;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.app-meta{font-size:12px;color:rgba(255,255,255,.65)}
.app-slug{font-size:11px;color:rgba(255,255,255,.4);font-family:'JetBrains Mono',monospace;margin-top:6px}
.app-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.pill{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.04em}
.pill-red{background:rgba(0,0,0,.3);color:#f87171;border:1px solid rgba(248,113,113,.3)}
.pill-orange{background:rgba(0,0,0,.3);color:#fb923c;border:1px solid rgba(251,146,60,.3)}
.health-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.h-green{background:#34d399}.h-yellow{background:#fbbf24}.h-red{background:#f87171}

/* ── USED / CONSUMED INDICATOR — one-time-use app tracking ── */
.used-dot{width:13px;height:13px;border-radius:50%;display:inline-block;cursor:default;border:2px solid transparent}
.used-dot.is-used{background:var(--green);box-shadow:0 0 0 3px var(--green-bg)}
.used-dot.not-used{background:var(--border2)}
.used-wrap{position:relative;display:inline-block}
.used-wrap .tip{display:none;position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:var(--surface3);border:1.5px solid var(--border2);border-radius:var(--radius-sm);padding:8px 12px;font-size:12px;color:var(--text);white-space:nowrap;box-shadow:var(--shadow);z-index:50;pointer-events:none}
.used-wrap:hover .tip{display:block}

.add-card{background:none;border:2px dashed var(--border2);border-radius:var(--radius);padding:18px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:130px;color:var(--text3);font-size:13px;font-weight:600}
.add-card:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.add-card .plus{font-size:26px;line-height:1}

/* ── DRAG TO REORDER ── */
.app-card[draggable]{cursor:grab}
.app-card[draggable]:active{cursor:grabbing}
.app-card.drag-over{outline:2px dashed var(--accent);outline-offset:2px;opacity:.7}
.app-card.dragging{opacity:.35;transform:scale(.97)}

/* ── SECTION HEADER ── */
.sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sec-title{font-size:17px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:9px;letter-spacing:-.3px}
.count-pill{font-size:12px;font-weight:600;background:var(--surface2);border:1.5px solid var(--border);color:var(--text2);padding:3px 10px;border-radius:99px}
.shutdown-banner{display:flex;align-items:center;gap:10px;background:var(--red-bg);border:1.5px solid var(--red);border-radius:var(--radius);padding:12px 18px;margin-bottom:16px;font-size:14px;font-weight:600;color:var(--red)}

/* ── TABLE ── */
.table-wrap{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
/* In the v2 right pane the table-wrap must scroll on x so the table
   columns are never compressed — the right pane itself is already a
   fixed-width flex child, so without this the table just squashes. */
.v2-main .table-wrap{overflow-x:auto;overflow-y:visible}
.table-toolbar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.search-input{flex:1;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:9px 14px;font-size:14px;color:var(--text);outline:none;transition:border-color .15s;font-family:inherit}
.search-input:focus{border-color:var(--accent)}
.search-input::placeholder{color:var(--text3)}
.filter-select{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;color:var(--text2);outline:none;cursor:pointer;font-family:inherit}

table{width:100%;border-collapse:collapse}
thead{background:var(--surface2)}
th{padding:11px 16px;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;text-align:left;white-space:nowrap}
td{padding:14px 16px;border-top:1px solid var(--border);vertical-align:middle}
tr:hover td{background:var(--surface2)}
.client-name{font-weight:700;color:var(--text);font-size:14px}
.client-sub{font-size:12px;color:var(--text3);margin-top:2px}

.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.badge::before{content:'●';font-size:8px}
.badge-green{background:var(--green-bg);color:var(--green)}
.badge-red{background:var(--red-bg);color:var(--red)}
.badge-orange{background:var(--orange-bg);color:var(--orange)}
.badge-blue{background:var(--accent-bg);color:var(--accent)}

.key-chip{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono','Courier New',monospace;font-size:12px;color:var(--text2);background:var(--surface2);border:1.5px solid var(--border);padding:6px 8px 6px 12px;border-radius:8px;cursor:pointer;transition:all .15s;letter-spacing:.3px}

/* Client 360 + other inline data tables — subtle row dividers so dense
   numbers stay readable without a heavier grid */
#cpBody table tr{border-bottom:1px solid var(--border)}
#cpBody table tr:last-child{border-bottom:none}

/* Small hover-lift polish, applied project-wide to primary interactive
   surfaces — cards and primary buttons feel a touch more alive on hover
   without changing any existing layout or color */
.app-card, .btn-primary{transition:transform .15s ease, background .15s, border-color .15s, box-shadow .15s}

.btn-primary:hover{transform:translateY(-1px)}
.key-chip:hover{border-color:var(--accent);color:var(--accent)}
.key-chip .kc-copy{display:flex;color:var(--text3);opacity:.65;transition:all .15s}
.key-chip:hover .kc-copy{color:var(--accent);opacity:1}

.ping{font-size:12px;white-space:nowrap}
.ping-fresh{color:var(--green)}.ping-stale{color:var(--orange)}.ping-dead{color:var(--red)}.ping-never{color:var(--text3)}

.notes-tip{position:relative;display:inline-block;cursor:pointer}
.notes-tip .tip{display:none;position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:var(--surface3);border:1.5px solid var(--border2);border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;color:var(--text);white-space:pre-wrap;min-width:180px;max-width:300px;box-shadow:var(--shadow);z-index:50;pointer-events:none}
.notes-tip:hover .tip{display:block}

.toggle{position:relative;display:inline-block;width:42px;height:24px}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--border2);border-radius:24px;cursor:pointer;transition:.18s}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.18s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.toggle input:checked+.toggle-slider{background:var(--accent)}
.toggle input:checked+.toggle-slider::before{transform:translateX(18px)}
.toggle input:disabled+.toggle-slider{opacity:.4;cursor:not-allowed}

/* Row actions */
.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.act{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid var(--border);color:var(--text3);padding:6px 12px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.act:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.act.act-email:hover{border-color:var(--green);color:var(--green);background:var(--green-bg)}
.act.act-warn:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-bg)}
.act.act-danger:hover{border-color:var(--red);color:var(--red);background:var(--red-bg)}

/* Icon-only square row actions (licence table) */
.ricon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;background:none;border:1.5px solid var(--border);color:var(--text3);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s}
.ricon:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.ricon.ricon-email:hover{border-color:var(--green);color:var(--green);background:var(--green-bg)}
.ricon.ricon-warn:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-bg)}
.ricon.ricon-danger:hover{border-color:var(--red);color:var(--red);background:var(--red-bg)}

/* ── MEETING MODE — discreetly hides anything a client shouldn't see or
   be able to point at mid-call: edit/extend, the working/maintenance
   toggles, key regeneration, and the raw licence keys themselves. The
   functions themselves stay fully intact — this only hides/masks them
   visually, and the toggle button itself is icon-only on purpose so it
   doesn't read as "hiding things from you" if a client glances at it. ── */
body.meeting-mode .act-meeting-hide{display:none!important}
body.meeting-mode .toggle-meeting-hide{visibility:hidden!important}
body.meeting-mode .key-chip{filter:blur(5px);transition:filter .1s}
body.meeting-mode .key-chip:hover{filter:none}
#meetingModeBtn{width:32px;height:32px;padding:0;justify-content:center;font-size:14px;opacity:.55}
#meetingModeBtn:hover{opacity:1}
#meetingModeBtn.on{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);opacity:1}

body.meeting-mode #shutdownBanner{display:none!important}
.empty{text-align:center;padding:64px;color:var(--text3)}
.empty-icon{font-size:34px;margin-bottom:12px;opacity:.3}
.no-app{text-align:center;padding:80px;color:var(--text3)}
.no-app .arr{font-size:22px;margin-bottom:10px;opacity:.3}

/* ── CLIENTS PAGE ── */
.clients-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.client-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.client-card:hover{border-color:var(--border2);box-shadow:var(--shadow-sm)}
.cc-top{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.cc-avatar{width:40px;height:40px;border-radius:11px;border:1px solid;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;letter-spacing:-.3px;flex-shrink:0}
.cc-id{min-width:0;flex:1}
.cc-name{font-size:14.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-meta{font-size:11px;color:var(--text3);margin-top:2px}
.cc-lines{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.cc-lines-empty{font-size:11.5px;color:var(--text3);font-style:italic}
.cc-line{display:flex;align-items:center;gap:8px;min-width:0}
.cc-line-icon{color:var(--text3);flex-shrink:0;display:flex}
.cc-line-text{font-size:12.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-note{font-size:11.5px;color:var(--text3);font-style:italic;background:var(--surface2);border-radius:6px;padding:7px 9px;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-actions{display:flex;gap:6px;margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}

/* ── ACTIVITY PAGE ── */
.activity-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.activity-list{display:flex;flex-direction:column;gap:8px}
.activity-item{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);font-size:14px;transition:border-color .15s}
.activity-item:hover{border-color:var(--border2)}
.activity-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.activity-detail{flex:1;min-width:0}
.activity-action{font-weight:600;color:var(--text)}
.activity-meta{font-size:12px;color:var(--text3);margin-top:2px}
.activity-time{font-size:12px;color:var(--text3);white-space:nowrap}
.pagination{display:flex;align-items:center;gap:8px;margin-top:18px;justify-content:center}
.pg-btn{height:36px;padding:0 16px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s}
.pg-btn:hover{border-color:var(--accent);color:var(--accent)}
.pg-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pg-btn:disabled{opacity:.3;pointer-events:none}
.log-disabled{text-align:center;padding:48px;color:var(--text3);background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius)}

/* ── SETTINGS PAGE ── */
.settings-section{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:18px}
.settings-header{padding:18px 22px;border-bottom:1px solid var(--border);font-size:15px;font-weight:700;color:var(--text)}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.theme-switch{display:flex;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px}
.theme-opt{background:none;border:none;color:var(--text3);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:6px;cursor:pointer;transition:all .15s;font-family:inherit}
.theme-opt:hover{color:var(--text)}
.theme-opt.active{background:var(--accent);color:#fff}
.settings-row:last-child{border-bottom:none}
.settings-label{font-size:14px;font-weight:600;color:var(--text)}
.settings-desc{font-size:12px;color:var(--text3);margin-top:3px}
.session-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;width:140px}
.session-fill{height:100%;background:var(--accent);border-radius:3px;transition:width 1s linear}

/* ── CONTEXT MENU ── */
#ctxMenu{position:fixed;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:6px;box-shadow:var(--shadow);z-index:200;min-width:195px;display:none;animation:menuIn .1s ease}
#ctxMenu.open{display:block}
@keyframes menuIn{from{opacity:0;transform:scale(.95) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}
#ctxMenu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;padding:10px 13px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;text-align:left;transition:background .1s;font-family:inherit}
#ctxMenu button:hover{background:var(--surface2)}
#ctxMenu button.danger{color:var(--red)}
#ctxMenu button.danger:hover{background:var(--red-bg)}
#ctxMenu .mico{font-size:14px;width:20px;text-align:center;flex-shrink:0}
#ctxMenu hr{border:none;border-top:1px solid var(--border);margin:5px 0}

/* ── MODAL ── */
.overlay{display:none;position:fixed;inset:0;background:var(--overlay);z-index:100;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.overlay.open{display:flex}
.modal{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal-header{padding:24px 26px 0}
.modal-title{font-size:18px;font-weight:800;color:var(--text);letter-spacing:-.4px}
.modal-sub{font-size:13px;color:var(--text3);margin-top:4px}
.modal-body{padding:22px 26px}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:18px 26px;border-top:1px solid var(--border);background:var(--surface2);border-radius:0 0 14px 14px}

/* ── FORM ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
.form-section{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;padding-bottom:9px;border-bottom:1px solid var(--border);margin:22px 0 14px}
/* Licence modal — settings-list shapes instead of ad-hoc boxes */
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px}
.opt-check{position:relative;flex-shrink:0;margin-top:1px;cursor:pointer;display:block;width:18px;height:18px}
.opt-check input{position:absolute;opacity:0;width:0;height:0}
.opt-box{display:block;width:18px;height:18px;border:1.5px solid var(--border2);border-radius:5px;background:var(--surface);transition:all .15s}
.opt-check input:checked + .opt-box{background:var(--accent);border-color:var(--accent)}
.opt-check input:checked + .opt-box::after{content:'';position:absolute;left:6px;top:2px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.opt-text{min-width:0}
.opt-title{font-size:13px;font-weight:700;color:var(--text)}
.opt-desc{font-size:11.5px;color:var(--text3);margin-top:3px;line-height:1.5}
.msg-list{display:flex;flex-direction:column;gap:10px}
.msg-item{display:flex;align-items:flex-start;gap:11px}
.msg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:14px}
.msg-body{flex:1;min-width:0}
.msg-body label{display:block;font-size:11.5px;font-weight:600;color:var(--text2);margin-bottom:5px}
.msg-body input{width:100%;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:10px 13px;font-size:13.5px;color:var(--text);outline:none;transition:border-color .15s;font-family:inherit}
.msg-body input:focus{border-color:var(--accent)}
.msg-body input::placeholder{color:var(--text3)}
.field label{display:block;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text3);margin-left:4px}
.field input,.field select,.field textarea{width:100%;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:10px 13px;font-size:14px;color:var(--text);outline:none;transition:border-color .15s;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{resize:vertical;min-height:70px}
.field select option{background:var(--surface)}

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:13px 18px;font-size:14px;font-weight:500;color:var(--text);z-index:999;opacity:0;transform:translateY(7px);transition:all .2s;pointer-events:none;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{border-color:var(--green);color:var(--green)}
.toast.err{border-color:var(--red);color:var(--red)}
.toast.warn{border-color:var(--orange);color:var(--orange)}

/* ── SWITCH (activity log) ── */
.switch{position:relative;display:inline-block;width:50px;height:28px}
.switch input{opacity:0;width:0;height:0}
.switch-slider{position:absolute;inset:0;background:var(--border2);border-radius:28px;cursor:pointer;transition:.2s}
.switch-slider::before{content:'';position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.switch input:checked+.switch-slider{background:var(--accent)}
.switch input:checked+.switch-slider::before{transform:translateX(22px)}

/* ── MOBILE ── */
@media(max-width:768px){
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .stats-grid{grid-template-columns:1fr 1fr}
  .apps-grid{grid-template-columns:1fr 1fr}
  .clients-grid{grid-template-columns:1fr}
  .page{padding:16px}
  .topbar{padding:0 16px}
  .table-wrap{overflow-x:auto}
  .row-actions{gap:3px}
  .act{padding:5px 9px;font-size:11px}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .apps-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:1}
  .modal{max-width:100%;margin:12px;border-radius:12px}
}

/* ══ NEW UI (v2 toggle) — see js/index-ui-v2.js ══ */

/* The outer wrapper fills whatever height the dashboard section has,
   but never the full viewport — the page itself stays scrollable only
   if the CONTENT inside is taller than the screen, not because of the
   layout frame. The sidebar list scrolls independently inside. */
#dashboardV2{padding:0}

.v2-layout{
  display:flex;align-items:stretch;gap:0;
  /* Sit just below the stats strip + section header (approx 220px);
     fill the rest of the viewport so both panes feel full-height. */
  height:calc(100vh - 270px);
  min-height:400px;
  border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;background:var(--surface);
}

/* ── Sidebar ── */
.v2-sidebar{
  width:280px;flex-shrink:0;
  border-right:1px solid var(--border);
  padding:0;                 /* header/search/list each handle their own padding */
  display:flex;flex-direction:column;
  background:var(--surface2);
  overflow:hidden;           /* clip children — list scrolls, sidebar does not */
}

.v2-sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 0;
  flex-shrink:0;
  margin-bottom:12px;
}

.btn-icon-sm{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);border-radius:7px;
  color:var(--text2);cursor:pointer;font-size:15px;font-family:inherit;transition:all .15s;
}
.btn-icon-sm:hover{border-color:var(--accent);color:var(--accent)}

/* search bar — fixed inside sidebar, never scrolls away */
.v2-sidebar #v2AppSearch{
  flex:none;
  margin:0 12px 10px;
  width:calc(100% - 24px);
}

/* The list is the ONLY scrollable element; it fills whatever space
   remains after the header and search bar. */
.v2-app-list{
  flex:1;
  overflow-y:auto;
  /* re-enable scrollbar just for this element */
  scrollbar-width:thin;
  scrollbar-color:var(--border2) transparent;
  display:flex;flex-direction:column;gap:2px;
  padding:0 8px 12px;
}
.v2-app-list::-webkit-scrollbar{display:block;width:4px}
.v2-app-list::-webkit-scrollbar-track{background:transparent}
.v2-app-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* ── App list item ── */
.v2-app-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;cursor:pointer;
  transition:background .12s;
  border-left:2.5px solid transparent;
  position:relative;
}
.v2-app-item:hover{background:var(--surface3)}
.v2-app-item.active{background:var(--surface3);border-left-color:var(--accent)}

/* ⋯ button is always in the DOM (overlaying the dot slot);
   dot fades out on hover to reveal it — no separate show/hide needed */

.v2-app-badge{
  width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;letter-spacing:-.3px;flex-shrink:0;
}
.v2-app-info{flex:1;min-width:0}
.v2-app-name{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-app-slug{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Right-side cluster — fixed 20×20 slot, dot and button are both
   position:absolute so they truly share the same pixels.
   Idle: dot visible, button invisible + non-interactive.
   Hover: dot hidden, button visible + interactive. Clean swap, zero shift. */
.v2-app-right{
  position:relative;
  width:20px;height:20px;
  flex-shrink:0;
}

/* Dot — centered in slot, visible by default */
.v2-app-dot{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:50%;
  opacity:1;
  transition:opacity .12s;
  pointer-events:none;
}
/* Hide dot on row hover */
.v2-app-item:hover .v2-app-dot{opacity:0}

/* ⋯ button — fills the slot, hidden + inert by default */
.v2-app-menu-btn{
  position:absolute;
  inset:0;
  background:none;border:none;
  color:var(--text3);cursor:pointer;
  font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:5px;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s,background .12s,color .12s;
  font-family:inherit;
  padding:0;
}
/* Show button on row hover */
.v2-app-item:hover .v2-app-menu-btn{
  opacity:1;
  pointer-events:auto;
}
.v2-app-menu-btn:hover{background:var(--surface2);color:var(--text)}

/* ── Right pane ── */
.v2-main{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  overflow:hidden;            /* children scroll, not the pane itself */
}

/* The licence section fills the right pane completely so its own
   table-wrap handles its own overflow. Remove the padding we'd normally
   give so the section header lines up flush with the pane edge. */
.v2-main #licenceSection{
  flex:1;overflow-y:auto;
  padding:20px 24px;
  display:flex;flex-direction:column;
  scrollbar-width:thin;
  scrollbar-color:var(--border2) transparent;
}
.v2-main #licenceSection::-webkit-scrollbar{display:block;width:4px}
.v2-main #licenceSection::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* The right-pane section header mirrors the screenshot: app name (bold)
   + slug (mono muted) + client count pill on the left;
   eye icon + Add Client button on the right. */
.v2-main .sec-header{
  flex-shrink:0;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
  margin-bottom:16px;
}

.v2-main #noApp{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 20px;
}

/* ── v2 right-pane header: app name (bold) · /slug (mono muted) ── */
.v2-app-header-slug{
  font-size:13px;font-weight:400;
  color:var(--text3);
  font-family:'JetBrains Mono',monospace;
  margin:0 10px;
  letter-spacing:0;
}

/* In new UI the licTitle sec-title line holds name + slug + pill;
   keep them vertically centered with the right-side buttons. */
.v2-main .sec-header .sec-title{
  display:flex;align-items:center;flex-wrap:wrap;gap:0;
}

/* ── Responsive ── */
@media (max-width:760px){
  .v2-layout{
    flex-direction:column;
    height:auto;
    min-height:unset;
  }
  .v2-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:280px}
  /* On touch there's no hover state — show the ⋯ button always so it's tappable */
  .v2-app-item .v2-app-dot{opacity:0}
  .v2-app-item .v2-app-menu-btn{opacity:1;pointer-events:auto}
}