/* The super admin ⚙ menu (js/core/superadmin.js) and the permission screen (js/core/accessadmin.js).
   Built on the theme's own tokens, so it follows whichever of the six themes is on. */

/* ── the ⚙, top right of the pre-dashboard screens ─────────────────────────
   Above .src-screen (z-index 5000), because those screens are fixed and fill the viewport. It sits
   on their dark gradient, not on the white card, so the button is light-on-dark in every theme. */
.sa-menu{position:fixed;top:16px;right:20px;z-index:5100;}
.sa-btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#e2e8f0;cursor:pointer;
  transition:background .15s,transform .3s,border-color .15s;}
.sa-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);transform:rotate(40deg);}
.sa-btn[aria-expanded="true"]{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);}
.sa-drop{position:absolute;top:50px;right:0;width:280px;background:var(--card,#fff);border-radius:12px;
  box-shadow:0 18px 45px rgba(0,0,0,.4);padding:8px;display:flex;flex-direction:column;gap:2px;}
.sa-drop-t{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  padding:6px 10px 4px;}
.sa-item{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;padding:9px 10px;border:0;
  border-radius:8px;background:transparent;color:var(--text);font-family:inherit;font-size:13px;cursor:pointer;}
.sa-item:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 10%,transparent);}
.sa-item:disabled{opacity:.45;cursor:default;}
/* the item for the page already open: shown as where you are, not greyed as if unavailable */
.sa-item.sa-item-here{opacity:1;background:color-mix(in srgb,var(--accent) 10%,transparent);}
.sa-item.sa-item-here b{color:var(--accent);}

/* the company selector on /config — the screen chooses its own company */
.ac-co{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:8px;}
.ac-co label{font-size:12.5px;font-weight:700;color:var(--muted);}
.ac-co-sel{min-width:min(420px,100%);padding:8px 10px;border-radius:9px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;}
.ac-co-sel:focus{outline:none;border-color:var(--accent);}
.ac-co-note{font-size:11.5px;color:var(--dim);}
.sa-item small{display:block;font-size:11px;color:var(--dim);font-weight:400;margin-top:1px;}
.sa-item-ico{font-size:16px;line-height:1.2;}
/* on a phone the card starts near the top, so leave the ⚙ its own strip */
@media (max-width: 767.98px){
  .sa-menu{top:10px;right:12px;}
  body.sa-on .src-screen{padding-top:62px;}
}

.ac-card{width:min(1180px,100%);height:calc(100vh - 40px);}
.ac-body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;}

/* ── the user list ─────────────────────────────────────────────────────── */
.ac-users{display:flex;flex-direction:column;gap:8px;min-height:0;}
.ac-search{padding:9px 11px;border-radius:9px;border:1px solid var(--border);background:var(--card);
  color:var(--text);font-family:inherit;font-size:13px;}
.ac-search:focus{outline:none;border-color:var(--accent);}
.ac-filter{display:flex;gap:6px;}
.ac-filter button{flex:1;padding:5px 6px;border-radius:7px;border:1px solid var(--border);background:transparent;
  color:var(--muted);font-family:inherit;font-size:11.5px;cursor:pointer;}
.ac-filter button.on{border-color:var(--accent);color:var(--accent);font-weight:700;
  background:color-mix(in srgb,var(--accent) 10%,transparent);}
.ac-count{font-size:11px;color:var(--dim);}
.ac-list{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:4px;padding-right:2px;}
.ac-user{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border-radius:9px;
  border:1px solid transparent;background:transparent;color:var(--text);font-family:inherit;cursor:pointer;}
.ac-user:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);}
.ac-user.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);}
.ac-user-main{flex:1 1 auto;min-width:0;}
.ac-user-name{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ac-user-sub{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ac-n{flex:0 0 auto;min-width:24px;text-align:center;padding:1px 7px;border-radius:20px;font-size:11px;font-weight:700;
  color:#fff;background:var(--green);}
.ac-n-0{background:transparent;color:var(--dim);border:1px solid var(--border);}
.ac-badge{display:inline-block;margin-left:4px;padding:0 6px;border-radius:5px;font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;vertical-align:middle;}
.ac-badge-pa{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green);text-transform:none;}

/* ── the editor ────────────────────────────────────────────────────────── */
.ac-edit{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;
  border-left:1px solid var(--border);padding-left:16px;}
.ac-edit-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;
  position:sticky;top:0;z-index:1;background:var(--card);padding-bottom:8px;border-bottom:1px solid var(--border);}
.ac-edit-name{font-size:16px;font-weight:800;color:var(--text);}
.ac-actions{display:flex;gap:8px;align-items:center;}
.ac-btn{padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);
  font-family:inherit;font-size:12px;cursor:pointer;}
.ac-btn:hover{border-color:var(--red);color:var(--red);}
.ac-save{padding:8px 16px;}
.ac-save:disabled{opacity:.55;cursor:default;filter:none;}

.ac-row{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;color:var(--text);}
.ac-row label{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;cursor:pointer;font-size:13px;}
.ac-row input,.ac-tab input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:0 0 auto;}
.ac-row-all{border:1px solid var(--border);background:color-mix(in srgb,var(--accent) 5%,transparent);}
.ac-row-p{font-weight:700;}
.ac-row-p:hover,.ac-row-g:hover{background:color-mix(in srgb,var(--accent) 5%,transparent);}
.ac-caret{flex:0 0 auto;width:22px;height:22px;border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:12px;border-radius:5px;}
.ac-caret:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);}
.ac-frac{flex:0 0 auto;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;}
.ac-note{flex:0 0 auto;font-size:10.5px;font-weight:600;color:var(--amber);}
.ac-tree{display:flex;flex-direction:column;gap:2px;}
.ac-report{border-bottom:1px solid var(--border);padding-bottom:4px;}
.ac-groups{padding-left:26px;}
.ac-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 10px;padding:2px 0 6px 56px;}
.ac-tab{display:flex;align-items:center;gap:7px;padding:3px 4px;font-size:12.5px;color:var(--text);cursor:pointer;
  border-radius:6px;min-width:0;}
.ac-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ac-tab:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);}

.ac-rules{margin-top:4px;padding:10px 12px;border-radius:10px;border:1px dashed var(--border);}
.ac-rules-t{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:6px;}
.ac-rules-l{display:flex;flex-wrap:wrap;gap:5px;font-size:11.5px;color:var(--dim);}
.ac-rules-l code{font-family:var(--font-mono);font-size:11px;padding:1px 7px;border-radius:5px;color:var(--text);
  background:color-mix(in srgb,var(--accent) 8%,transparent);}
.ac-msg{font-size:12.5px;min-height:1em;}
.ac-msg-ok{color:var(--green);font-weight:700;}
.ac-msg-err{color:var(--red);font-weight:700;}

/* Below lg the two panes stack: the list gets a fixed slice, the editor the rest. */
@media (max-width: 991.98px){
  .ac-card{height:auto;min-height:calc(100vh - 40px);}
  .ac-body{grid-template-columns:minmax(0,1fr);}
  .ac-list{max-height:260px;}
  .ac-edit{border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:12px;overflow:visible;}
  .ac-tabs{padding-left:26px;grid-template-columns:minmax(0,1fr);}
  .ac-groups{padding-left:12px;}
}

/* ── the usage log screen — /config/usage-log (js/core/usagelog.js) ───────── */
.ul-card{overflow:hidden;}
.ul-body{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:2px;}
/* its children keep their height and the body scrolls — a flex child shrinks by default, which
   squeezed the table to five rows with its own scrollbar inside the page's */
.ul-body > *{flex-shrink:0;}
.ul-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;border:1px solid var(--border);border-radius:10px;
  background:color-mix(in srgb,var(--accent) 4%,transparent);}
.ul-filters label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);}
.ul-filters input,.ul-filters select{padding:6px 8px;border-radius:7px;border:1px solid var(--border);background:var(--card);
  color:var(--text);font-family:inherit;font-size:12.5px;}
.ul-filters input[type=search]{flex:1 1 180px;min-width:160px;}
.ul-filters select{max-width:230px;}
.ul-quick{display:flex;gap:4px;}
.ul-quick button{padding:5px 9px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--muted);
  font-family:inherit;font-size:11.5px;cursor:pointer;}
.ul-quick button.on{border-color:var(--accent);color:var(--accent);font-weight:700;background:color-mix(in srgb,var(--accent) 10%,transparent);}
.ul-go{padding:7px 16px;}
.ul-csv:hover{border-color:var(--accent);color:var(--accent);}

.ul-kpi{border:1px solid var(--border);border-radius:10px;padding:10px 12px;height:100%;}
.ul-kpi-v{font-size:20px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.ul-kpi-l{font-size:11.5px;color:var(--muted);}
.ul-kpi-warn .ul-kpi-v{color:var(--red);}

.ul-panels{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:10px;}
.ul-panel{border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-width:0;}
.ul-pt{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:8px;}
.ul-bars{display:flex;align-items:flex-end;gap:3px;height:120px;overflow-x:auto;}
.ul-bar{flex:1 0 14px;max-width:38px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:3px;}
.ul-bar-v{width:100%;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px;}
.ul-bar-l{font-size:9.5px;color:var(--dim);}
.ul-li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 2px;font-size:12.5px;color:var(--text);
  border-bottom:1px dashed var(--border);}
.ul-li:last-child{border-bottom:0;}
.ul-li[onclick]{cursor:pointer;}
.ul-li[onclick]:hover{color:var(--accent);}
.ul-li-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ul-li small,.ul-table td small{display:block;font-size:10.5px;color:var(--dim);}
.ul-none{color:var(--dim);font-size:12px;text-align:center;padding:14px;}

.ul-tablewrap{border:1px solid var(--border);border-radius:10px;}
.ul-table{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--text);}
.ul-table th{position:sticky;top:0;background:var(--card);text-align:left;font-size:11px;font-weight:800;color:var(--muted);
  padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
.ul-table td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
.ul-row{cursor:pointer;}
.ul-row:hover td{background:color-mix(in srgb,var(--accent) 5%,transparent);}
.ul-at{white-space:nowrap;font-variant-numeric:tabular-nums;}
.ul-what{color:var(--muted);font-size:11.5px;max-width:320px;}
.ul-ev{font-weight:700;white-space:nowrap;}
.ul-st{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;}
.ul-ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);}
.ul-fail{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red);}
.ul-denied{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber);}
.ul-more td{background:color-mix(in srgb,var(--accent) 4%,transparent);font-size:11.5px;color:var(--muted);}
.ul-more pre{margin:6px 0 0;padding:8px;border-radius:7px;background:var(--card);border:1px solid var(--border);
  font-family:var(--font-mono);font-size:11px;color:var(--text);white-space:pre-wrap;word-break:break-all;}
.ul-pager{display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;color:var(--muted);padding-bottom:4px;}
.ul-pager .ac-btn:disabled{opacity:.4;cursor:default;}

@media (max-width: 991.98px){
  .ul-panels{grid-template-columns:minmax(0,1fr);}
  .ul-body{overflow:visible;}
  .ul-table{min-width:880px;}
}

/* ── the company config screen — /config/companies (js/core/companycfg.js) ─── */
.cc-add{width:100%;padding:9px;}
.cc-chips{margin-top:4px;min-height:18px;}
.cc-chips .rp-chip{margin-right:3px;padding:0 5px;font-size:12px;}
.cc-none{font-size:10.5px;color:var(--dim);}
.cc-warn{padding:9px 12px;border-radius:9px;border:1px solid color-mix(in srgb,var(--amber) 50%,transparent);
  background:color-mix(in srgb,var(--amber) 10%,transparent);color:var(--text);font-size:12.5px;line-height:1.55;}
.cc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;}
.cc-grid label,.cc-model label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--muted);}
.cc-grid small,.cc-model small,.cc-h small{font-weight:400;color:var(--dim);font-size:10.5px;}
.cc-grid input,.cc-model input,.cc-extra input{padding:7px 9px;border-radius:8px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-family:inherit;font-size:13px;font-weight:400;min-width:0;}
.cc-grid input:focus,.cc-model input:focus,.cc-extra input:focus{outline:none;border-color:var(--accent);}
.cc-grid input:disabled{opacity:.65;background:color-mix(in srgb,var(--border) 40%,transparent);cursor:not-allowed;}
.cc-grid .cc-check{flex-direction:row;align-items:center;gap:8px;color:var(--text);font-weight:600;align-self:end;padding-bottom:8px;}
.cc-check input{width:16px;height:16px;accent-color:var(--accent);}
.cc-h{font-size:13px;font-weight:800;color:var(--text);margin-top:6px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.cc-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
.cc-model{border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;}
.cc-model-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--text);}
.cc-state{font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:20px;white-space:nowrap;}
.cc-on{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);}
.cc-part{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber);}
.cc-off{color:var(--dim);border:1px solid var(--border);}
.cc-extra{display:flex;flex-direction:column;gap:6px;}
.cc-extra-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px;}
.cc-extra-add{align-self:flex-start;}
@media (max-width: 991.98px){ .cc-grid{grid-template-columns:minmax(0,1fr);} }

/* the company picker when nothing is granted anywhere — "Future Feature" (company.js) */
.cp-future{padding:34px 22px 30px;text-align:center;border:1.5px dashed var(--border);border-radius:14px;
  background:color-mix(in srgb,var(--accent) 5%,transparent);}
.cp-future-ico{font-size:40px;line-height:1;}
.cp-future-t{margin-top:10px;font-size:22px;font-weight:800;letter-spacing:.02em;color:var(--accent);}
.cp-future-d{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.7;}