/*
 * The provider panel's stylesheet — the tenant app's design system, ported by hand.
 *
 * ⚠⚠ EVERY VALUE HERE IS COPIED FROM `src/index.css` AND THE LAYOUT COMPONENTS, so the panel and
 *    the app read as one product: the Rubik type scale, the brand blue, the card radius and inset
 *    highlight, the button gradient, the `.inp` focus ring, the `.dark` class, and the `#ff3355`
 *    active-nav accent from Sidebar.tsx. They are LITERAL because this page cannot import Tailwind —
 *    when `src/index.css` changes, this file has to be changed with it.
 *
 * ⚠⚠ RUBIK IS SELF-HOSTED. The tenant app takes it from fonts.googleapis.com, which is fine for an
 *    app a whole floor uses; this panel can suspend every customer, and a third party in its request
 *    path is a third party that sees when an operator opens it. Two subsets, 45KB. ⚠ The Hebrew
 *    block's unicode-range OPENS with U+0307-0308, so the subset cannot be identified by its first
 *    entry — it was matched on the range CONTAINING U+0590.
 */
@font-face{
  font-family:Rubik; font-style:normal; font-weight:300 900; font-display:swap;
  src:url(/fonts/rubik-hebrew.woff2) format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:Rubik; font-style:normal; font-weight:300 900; font-display:swap;
  src:url(/fonts/rubik-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── the app's brand scale, from src/index.css @theme ──────────────────────── */
:root{
  --brand-50:#eff5ff; --brand-500:#3b82f6; --brand-600:#2563eb; --brand-700:#1d4ed8;

  --page:#f1f5f9;      /* bg-slate-100 — the app's main surface */
  --surface:#ffffff;   /* .card */
  --surface-2:#ffffff; /* header / login card */
  --ink:#0f172a;       /* text-slate-900 */
  --ink-soft:#64748b;  /* text-slate-500 */
  /* ⚠ Same departure as the dark block below, and here it COLLAPSES the two inks: the app's
     text-slate-400 measures 2.56:1 on white, and nothing lighter than slate-500 reaches AA on a
     white card at all (#8b9ab0 is 2.86). So in the LIGHT theme faint and soft are the same colour
     deliberately — the distinction survives where it can be had, in dark. */
  --ink-faint:#64748b;
  --line:rgb(226 232 240 / .8);
  --line-solid:#e2e8f0;
  --card-shadow:0 1px 2px 0 rgb(15 23 42 / .04), 0 1px 4px 0 rgb(15 23 42 / .05), inset 0 1px 0 rgb(255 255 255 / .9);
  --header-shadow:0 1px 3px 0 rgb(15 23 42 / .06), 0 1px 2px -1px rgb(15 23 42 / .04);
  --row-hover:#f8fafc;
  --ro-bg:#f8fafc;     /* a value being SHOWN rather than edited */
}
/* ⚠⚠ Dark mode is a CLASS on <html>, exactly as the tenant app does it (AppContext toggles
   `document.documentElement.classList`), NOT `prefers-color-scheme`. The app defaults to LIGHT
   because it reads `=== 'true'`, so an operator who has never chosen gets the same theme on both
   screens rather than one of each. */
.dark{
  --page:#070d1a;      /* dark:bg-[#070d1a] */
  --surface:#1e293b;   /* .dark .card */
  --surface-2:#0b1121; /* dark header / login card */
  --ink:#f1f5f9;
  --ink-soft:#94a3b8;
  /* ⚠⚠ The app's own faint ink here is slate-500 (#64748b) and this is a deliberate departure:
     MEASURED at 3.07:1 on the dark card, below AA for the 11px table headers and the "off" feature
     chips — text that names a column and a capability a customer has not been sold. #8b9ab0 reads
     the same muted grey and measures 5.12 on the card, 6.58 on the header. A token that is fine at
     one size on one surface is not fine at every size on every surface. */
  --ink-faint:#8b9ab0;
  --line:rgb(255 255 255 / .08);
  --line-solid:rgb(255 255 255 / .1);
  --card-shadow:0 1px 2px 0 rgb(0 0 0 / .3), 0 2px 8px 0 rgb(0 0 0 / .15), inset 0 1px 0 rgb(255 255 255 / .05);
  --header-shadow:0 1px 3px 0 rgb(0 0 0 / .25);
  --row-hover:rgb(255 255 255 / .04);
  --ro-bg:rgb(255 255 255 / .03);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:"Rubik","Inter",ui-sans-serif,system-ui,sans-serif; font-size:14px;
  /* ⚠ Hebrew reads best with generous leading and a touch of tracking — src/index.css */
  line-height:1.65; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-feature-settings:"cv02","cv03","cv04";
}
a{color:var(--brand-600)}
.dark a{color:#93bbfd}
h1{font-size:1.75rem;font-weight:800;line-height:1.2;letter-spacing:-.025em;margin:0}
h2{font-size:1.35rem;font-weight:700;line-height:1.25;letter-spacing:-.02em;margin:0}
h3{font-size:1.1rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:0}
.mono{font-variant-numeric:tabular-nums}

/* ⚠ One focus ring for every focusable control, keyboard only (WCAG 2.4.7) — src/index.css */
:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px;border-radius:4px}
::selection{background:color-mix(in srgb, var(--brand-500) 28%, transparent)}

*{scrollbar-width:thin;scrollbar-color:rgb(148 163 184 / .4) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgb(148 163 184 / .3);border-radius:9999px;border:1px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgb(100 116 139 / .5);background-clip:padding-box}
.dark *::-webkit-scrollbar-thumb{background:rgb(255 255 255 / .1);background-clip:padding-box}

@keyframes fade-in-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.page-fade{animation:fade-in-up .22s cubic-bezier(.16,1,.3,1) both}
.animate-fade-in-up{animation:fade-in-up .35s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── component tokens, ported from src/index.css ───────────────────────────── */
.card{
  background:var(--surface);border-radius:1rem;border:1px solid var(--line);
  box-shadow:var(--card-shadow);padding:1.25rem;margin-bottom:1rem;
}
.card-title{font-size:.9375rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .875rem}
.section{font-size:.75rem;font-weight:700;color:var(--ink-soft);margin:1.25rem 0 .5rem}
.section-row{display:flex;align-items:center;gap:.625rem;margin:1.25rem 0 .5rem}
.section-row .section{margin:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
  border-radius:.75rem;font-weight:600;font-size:.875rem;padding:.5rem 1rem;
  cursor:pointer;white-space:nowrap;transition:all .15s ease;user-select:none;
  border:1px solid transparent;font-family:inherit;
}
.btn:active{transform:scale(.975)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{
  background:linear-gradient(180deg,#3b82f6 0%,#2563eb 100%);color:#fff;
  box-shadow:0 1px 3px rgb(37 99 235 / .35),0 1px 2px rgb(37 99 235 / .2),inset 0 1px 0 rgb(255 255 255 / .15);
}
.btn-primary:hover:not(:disabled){
  background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%);
  box-shadow:0 4px 16px rgb(37 99 235 / .4),0 2px 6px rgb(37 99 235 / .2),inset 0 1px 0 rgb(255 255 255 / .1);
}
.btn-secondary{background:#fff;color:#374151;border-color:rgb(203 213 225 / .9);box-shadow:0 1px 2px rgb(15 23 42 / .05),inset 0 1px 0 rgb(255 255 255 / .8)}
.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#94a3b8;box-shadow:0 2px 6px rgb(15 23 42 / .08)}
.dark .btn-secondary{background:rgb(255 255 255 / .06);color:#cbd5e1;border-color:rgb(255 255 255 / .1);box-shadow:inset 0 1px 0 rgb(255 255 255 / .06)}
.dark .btn-secondary:hover:not(:disabled){background:rgb(255 255 255 / .09);border-color:rgb(255 255 255 / .14)}
.btn-ghost{background:transparent;color:#64748b}
.btn-ghost:hover:not(:disabled){background:#f1f5f9;color:#1e293b}
.dark .btn-ghost{color:#94a3b8}
.dark .btn-ghost:hover:not(:disabled){background:rgb(255 255 255 / .06);color:#e2e8f0}
.btn-danger{background:#dc2626;color:#fff;box-shadow:0 1px 3px rgb(220 38 38 / .25)}
.btn-danger:hover:not(:disabled){background:#b91c1c}
.btn-sm{padding:.375rem .75rem;font-size:.8125rem}
.btn-xs{padding:.25rem .625rem;font-size:.75rem;border-radius:.5rem;gap:.25rem}
.btn-full{width:100%}

.inp{
  width:100%;padding:.5rem .75rem;border-radius:.625rem;border:1px solid var(--line-solid);
  background:#fff;font-size:.875rem;line-height:1.5;color:#0f172a;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;outline:none;
}
.inp:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgb(59 130 246 / .15),0 1px 2px rgb(0 0 0 / .04)}
.inp::placeholder{color:#94a3b8}
.inp:disabled{opacity:.55;cursor:not-allowed}
.dark .inp{background:rgb(15 23 42 / .5);border-color:rgb(255 255 255 / .1);color:#f1f5f9}
.dark .inp:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgb(96 165 250 / .18),0 1px 2px rgb(0 0 0 / .2)}
label{display:block;font-size:.75rem;font-weight:600;color:var(--ink-soft);margin:.75rem 0 .375rem}
textarea.inp{resize:vertical;min-height:4.5rem}
/* A hostname typed as its first label, with the fixed parent shown beside it (LTR, like the address). */
.inp-suffix{display:flex;align-items:stretch}
.inp-suffix .inp{border-top-right-radius:0;border-bottom-right-radius:0;min-width:0}
.inp-suffix .suffix{display:flex;align-items:center;padding:0 .625rem;border:1px solid var(--line-solid);border-left:0;
  border-radius:0 .625rem .625rem 0;background:var(--ro-bg);color:var(--ink-soft);font-size:.8125rem;white-space:nowrap}
.dark .inp-suffix .suffix{border-color:rgb(255 255 255 / .1)}

/* ⚠⚠ A VALUE BEING SHOWN, NOT EDITED. The detail screen is read-only until somebody asks to edit a
   section — a screen of live inputs invites a stray keystroke into a customer's spend cap, and the
   operator has no way to tell an accidental edit from a deliberate one before pressing save. This
   must NOT look like a disabled input: "you may not change this" and "nobody is changing this right
   now" are different statements. */
.ro{
  min-height:2.25rem;display:flex;align-items:center;padding:.375rem .75rem;
  border-radius:.625rem;background:var(--ro-bg);border:1px solid transparent;
  font-size:.875rem;color:var(--ink);word-break:break-word;
}
.ro.empty{color:var(--ink-faint)}
.ro-wide{white-space:pre-wrap;display:block;line-height:1.6}



.spacer{margin-inline-start:auto}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;flex-shrink:0;
  border:0;border-radius:.5rem;background:transparent;color:var(--ink-soft);cursor:pointer;transition:all .15s;
}
.icon-btn:hover{background:#f1f5f9;color:#1e293b}
.dark .icon-btn:hover{background:rgb(255 255 255 / .07);color:#e2e8f0}

/* ── data ──────────────────────────────────────────────────────────────────── */
/* ⚠ A table wider than the screen scrolls INSIDE this box; the page body never does.
   Measured: without it the users table pushed the whole document sideways at 375px. */
.tscroll{overflow-x:auto;margin:0 -.25rem;padding:0 .25rem}
table{width:100%;border-collapse:collapse;font-size:.8125rem;font-variant-numeric:tabular-nums}
th{text-align:start;color:var(--ink-faint);font-weight:600;font-size:.6875rem;padding:.5rem .625rem;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:.625rem;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tr.row{cursor:pointer;transition:background .12s}
tr.row:hover{background:var(--row-hover)}
tr.row:focus-visible{outline-offset:-2px}
td.company{font-weight:600}
td.actions-cell{text-align:end;white-space:nowrap}

.pill{display:inline-block;padding:.125rem .5rem;border-radius:9999px;font-size:.6875rem;font-weight:700;white-space:nowrap}
.pill.trial{background:#dbeafe;color:#1e40af}
.pill.active{background:#d1fae5;color:#065f46}
.pill.suspended{background:#ffe4e6;color:#9f1239}
.pill.terminated{background:#e2e8f0;color:#475569}
.dark .pill.trial{background:rgb(59 130 246 / .15);color:#93bbfd}
.dark .pill.active{background:rgb(16 185 129 / .15);color:#6ee7b7}
.dark .pill.suspended{background:rgb(244 63 94 / .15);color:#fda4af}
/* MEASURED: slate-400 on this translucent chip over the dark card composites to 4.47:1 — just
   below AA at 11px, and this chip carries the words "not computed" beside money. */
.dark .pill.terminated{background:rgb(255 255 255 / .08);color:#a8b4c4}
/* "ללא תמחור" / "לא חושב": something to fix, not a customer that ended — amber, never the terminated grey. */
.pill.warn{background:#fef3c7;color:#92400e}
.dark .pill.warn{background:rgb(245 158 11 / .15);color:#fcd34d}

.feat{display:inline-block;padding:.125rem .4375rem;border-radius:.375rem;font-size:.6875rem;font-weight:600;margin-inline-end:.25rem;background:var(--brand-50);color:var(--brand-700)}
.dark .feat{background:rgb(59 130 246 / .15);color:#93bbfd}
.feat.off{background:transparent;color:var(--ink-faint);border:1px dashed var(--line-solid);font-weight:500}

.note{font-size:.75rem;color:var(--ink-soft);margin-top:.375rem;line-height:1.6}
.msg{padding:.625rem .75rem;border-radius:.625rem;margin:.625rem 0;font-size:.8125rem;font-weight:500}
.msg.err{background:#fee2e2;color:#991b1b}
.msg.ok{background:#d1fae5;color:#065f46}
.msg.warn{background:#fef3c7;color:#92400e}
.dark .msg.err{background:rgb(220 38 38 / .12);color:#fca5a5}
.dark .msg.ok{background:rgb(16 185 129 / .12);color:#6ee7b7}
.dark .msg.warn{background:rgb(245 158 11 / .12);color:#fcd34d}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 .875rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:1.25rem}
.actions.tight{margin-top:.75rem}
.checks{display:flex;gap:.875rem;flex-wrap:wrap;margin-top:.375rem}
.checks label{display:flex;align-items:center;gap:.375rem;margin:0;color:var(--ink);font-weight:600;font-size:.8125rem}
.checks input{width:auto;accent-color:var(--brand-600)}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.5rem;margin-top:.375rem}
.mod{padding:.5rem .625rem;border:1px solid var(--line-solid);border-radius:.5rem;min-height:3.5rem}
.mod label{display:flex;align-items:center;gap:.375rem;margin:0}
.mod input{width:auto;accent-color:var(--brand-600)}
.mod-on{color:var(--ink);font-weight:600;font-size:.8125rem}
.mod-offer{color:var(--ink-soft,var(--ink));font-weight:500;font-size:.75rem;margin-top:.3125rem!important}
.mod-offer[hidden]{display:none}
.feat.off.offer{color:var(--brand-700);border-style:solid;border-color:var(--brand-200,var(--line-solid))}
.dark .feat.off.offer{color:#93bbfd}
.hidden{display:none!important}

/* ── the instance picker: choosing a customer instead of typing one ────────── */
.pick{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}
.pick label{
  display:flex;align-items:flex-start;gap:.625rem;margin:0;padding:.75rem;cursor:pointer;
  border:1px solid var(--line-solid);border-radius:.75rem;background:var(--surface);
  color:var(--ink);font-weight:400;font-size:.875rem;transition:all .15s;
}
.pick label:hover{border-color:#93c5fd;background:var(--row-hover)}
.pick input{width:auto;margin-top:.3rem;accent-color:var(--brand-600);flex-shrink:0}
.pick .dom{font-weight:700;letter-spacing:-.01em}
.pick .meta{font-size:.6875rem;color:var(--ink-faint);margin-top:.125rem;line-height:1.5}
.pick label:has(input:checked){border-color:var(--brand-500);background:var(--brand-50)}
.dark .pick label:has(input:checked){background:rgb(59 130 246 / .12)}

/* ── the confirmation, for a change that stops or ends a service ───────────── */
.overlay{
  position:fixed;inset:0;z-index:120;background:rgb(15 23 42 / .55);
  display:flex;align-items:center;justify-content:center;padding:1rem;
}
.dark .overlay{background:rgb(0 0 0 / .68)}
.dialog{
  background:var(--surface);border-radius:1rem;border:1px solid var(--line);
  box-shadow:0 20px 40px -10px rgb(0 0 0 / .35);padding:1.25rem;width:100%;max-width:28rem;
  max-height:90vh;overflow-y:auto;
}
.dialog h3{font-size:1rem;margin:0 0 .5rem}
.changes{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.changes li{
  font-size:.8125rem;line-height:1.55;padding:.5rem .625rem;border-radius:.5rem;
  background:var(--ro-bg);border-inline-start:3px solid var(--line-solid);
}
.changes li.danger{border-inline-start-color:#e11d48;background:rgb(225 29 72 / .07)}
.changes li b{font-weight:700}
.code-box{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05rem;font-weight:700;
  letter-spacing:.28em;text-align:center;padding:.5rem;border-radius:.5rem;
  background:var(--ro-bg);user-select:none;margin-top:.25rem;
}

/* ── login: the app's own composition (LoginPage.tsx) ──────────────────────── */
.login-wrap{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;overflow:hidden}
.orb{position:absolute;border-radius:9999px;filter:blur(64px);pointer-events:none}
.orb.a{top:-15%;right:-10%;width:34rem;height:34rem;background:rgb(59 130 246 / .1)}
.orb.b{bottom:-20%;left:-10%;width:30rem;height:30rem;background:rgb(96 165 250 / .1)}
.dark .orb.a{background:rgb(59 130 246 / .07)}
.dark .orb.b{background:rgb(37 99 235 / .06)}
.login{position:relative;width:100%;max-width:24rem}
.lockup{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem}
.lockup img.full{height:4rem;width:auto;object-fit:contain;user-select:none}
.lockup .dark-lockup{display:none;align-items:center;gap:.75rem}
.lockup .dark-lockup img{object-fit:contain}
.lockup .dark-lockup .t1{margin:0;font-weight:900;letter-spacing:-.02em;font-size:1.5rem;color:#fff}
.lockup .dark-lockup .t2{margin:.125rem 0 0;font-weight:600;font-size:.75rem;color:#94a3b8}
.lockup .dark-lockup .stack{line-height:1.2}
.dark .lockup img.full{display:none}
.dark .lockup .dark-lockup{display:flex}
.lockup .sub{font-size:.75rem;color:var(--ink-faint);margin-top:1rem}
.login-card{
  background:#fff;border-radius:1rem;border:1px solid rgb(226 232 240 / .8);padding:1.75rem;
  box-shadow:0 20px 25px -5px rgb(15 23 42 / .06),0 8px 10px -6px rgb(15 23 42 / .04),inset 0 1px 0 #fff;
}
.dark .login-card{
  background:#0b1121;border-color:rgb(255 255 255 / .08);
  box-shadow:0 20px 60px -10px rgb(0 0 0 / .5),0 8px 20px -8px rgb(0 0 0 / .4),inset 0 1px 0 rgb(255 255 255 / .05);
}
.field{position:relative}
.field svg{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none}
.field .inp{padding-right:2.25rem}
.theme-corner{position:absolute;top:1rem;left:1rem;z-index:1}
.mt-lg{margin-top:1.25rem}

/* ⚠ The provisioner's own output, shown verbatim. It scrolls INSIDE its box — the page never does —
   and wraps, because a line of shell output is longer than any panel. */
.joblog{
  margin:.5rem 0 0;padding:.75rem;border-radius:.625rem;background:var(--ro-bg);
  border:1px solid var(--line);max-height:22rem;overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;direction:ltr;text-align:left;color:var(--ink);
}

/* ── figures ────────────────────────────────────────────────────────────────
   ⚠ A KPI is a value over a label, each cell the same width, so a long Hebrew label cannot make one
     tile taller than its neighbours and break the row. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.625rem;margin:.5rem 0 .75rem}
.kpi{
  display:flex;flex-direction:column;gap:.125rem;padding:.625rem .75rem;border-radius:.75rem;
  background:var(--ro-bg);border:1px solid var(--line);min-width:0;
}
.kpi .v{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .k{font-size:.6875rem;color:var(--ink-soft);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ⚠ The bottom line gets the brand tint, so an eye lands on it first among eight tiles. */
.kpi.strong{background:var(--brand-50);border-color:rgb(59 130 246 / .35)}
/* MEASURED: the ordinary label ink is 4.35:1 on the brand tint at 11px — below AA. slate-600 is
   6.92 and still reads as a label rather than a value. */
.kpi.strong .k{color:#475569}
/* the same override in DARK would be slate-600 on a dark blue tile — measured 1.61:1. The dark
   theme's own soft ink already passes there, so it keeps it. */
.dark .kpi.strong .k{color:var(--ink-soft)}
.kpi.strong .v{color:var(--brand-700)}
.dark .kpi.strong{background:rgb(59 130 246 / .14);border-color:rgb(59 130 246 / .3)}
.dark .kpi.strong .v{color:#93bbfd}

/* ⚠⚠ A dash means NOBODY LOOKED. It is deliberately not styled like a zero. */
.dash{color:var(--ink-faint)}
.over{color:#e11d48;font-weight:700}
.chips{display:flex;gap:.375rem;flex-wrap:wrap;margin:.25rem 0 .5rem}
.period-sel{width:auto;min-width:7.5rem;padding:.3rem .5rem;font-size:.8125rem}
td .meta{display:block;font-size:.6875rem;color:var(--ink-faint);line-height:1.3}
td .company{font-weight:600}
.near{color:#b45309;font-weight:700}
.dark .near{color:#fcd34d}
.dark .over{color:#fda4af}

/* ── tracking: the dashboard, health, the audit filters (2026-09-23) ────────────
   ⚠ Every colour carries its dark twin, and the status colours are the app's own emerald / rose /
     amber so a dot reads the same here as a pill does. No inline styles anywhere (the CSP forbids
     them): widths and states are classes. */

/* The dashboard's figures in two labelled groups, not one run of ten tiles wrapping unevenly. */
.kpi-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;margin:.5rem 0 .75rem}
@media (min-width:1000px){.kpi-groups{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.kpi-group .kpis{margin:0}
@media (min-width:1000px){.kpis.kpis-3{grid-template-columns:repeat(3,minmax(0,1fr))}.kpis.kpis-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi-h{font-size:.72rem;font-weight:700;color:var(--ink-soft);margin:0 0 .375rem}
/* Before the first read, the cards keep a height, so the page does not grow as each one fills. */
.card.placeholder{min-height:12rem}
.placeholder-kpis{min-height:9rem}

.section-row.no-top{margin-top:0}
.card-title.flush{margin:0}
span.company{display:block;font-weight:600}
span.meta{display:block;font-size:.72rem;color:var(--ink-soft)}
.nowrap{white-space:nowrap}
td.detail{min-width:14rem;color:var(--ink-soft);overflow-wrap:anywhere}
tr.warnrow td{background:rgb(245 158 11 / .07)}

.dot{display:inline-block;width:.625rem;height:.625rem;border-radius:9999px;vertical-align:middle;flex-shrink:0}
td .dot{margin-inline-end:.5rem}
.dot.ok{background:#10b981;box-shadow:0 0 0 3px rgb(16 185 129 / .18)}
.dot.bad{background:#e11d48;box-shadow:0 0 0 3px rgb(225 29 72 / .2)}
.dot.warn{background:#f59e0b;box-shadow:0 0 0 3px rgb(245 158 11 / .2)}
.dot.stale{background:transparent;border:2px solid #f59e0b}
.dot.none{background:transparent;border:2px dashed var(--line-solid)}
.okc{color:#047857;font-weight:600}
.dark .okc{color:#6ee7b7}

.toolbar{display:flex;flex-wrap:wrap;gap:.625rem;align-items:center;margin-top:.875rem}
.toolbar .search{flex:1 1 16rem;min-width:12rem}
.seg{display:inline-flex;flex-wrap:wrap;gap:.25rem;background:var(--ro-bg);border:1px solid var(--line);border-radius:.75rem;padding:.2rem}
.seg button{border:0;background:transparent;color:var(--ink-soft);font:inherit;font-size:.8125rem;font-weight:600;padding:.3rem .7rem;border-radius:.55rem;cursor:pointer}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--brand-700);box-shadow:0 1px 2px rgb(15 23 42 / .08)}
.dark .seg button[aria-pressed="true"]{background:rgb(59 130 246 / .18);color:#fff}
.seg .n{font-variant-numeric:tabular-nums;opacity:.75;margin-inline-start:.15rem}

.quick{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:-.25rem 0 .5rem}

.dash-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.dash-grid > .card{margin-bottom:0}
.dash-grid{margin-bottom:1rem}
@media (min-width:900px){.dash-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
/* ⚠ minmax(0,…): a bare 1fr track has a min-content floor, so a wide table inside one pushed the whole
   page sideways at 375px — measured, 481px of document in a 375px viewport. */
.section-row{flex-wrap:wrap}

.sev{display:inline-block;font-size:.6875rem;font-weight:700;border-radius:9999px;padding:.1rem .5rem;white-space:nowrap}
.sev.high{background:#ffe4e6;color:#9f1239}
.sev.medium{background:#fef3c7;color:#92400e}
.sev.low{background:#e2e8f0;color:#475569}
.dark .sev.high{background:rgb(244 63 94 / .16);color:#fda4af}
.dark .sev.medium{background:rgb(245 158 11 / .16);color:#fcd34d}
.dark .sev.low{background:rgb(255 255 255 / .08);color:#a8b4c4}
.alerts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem;max-height:26rem;overflow-y:auto}
.alerts li{display:flex;gap:.625rem;align-items:flex-start;padding:.55rem .65rem;border-radius:.625rem;border:1px solid var(--line);border-inline-start-width:3px}
.alerts li.high{border-inline-start-color:#e11d48}
.alerts li.medium{border-inline-start-color:#f59e0b}
.alerts li.low{border-inline-start-color:var(--line-solid)}
.alerts li.link{cursor:pointer}
.alerts li.link:hover{background:var(--row-hover)}
.alerts .txt{display:flex;flex-direction:column;line-height:1.45}
.alerts .txt .note{margin:0}

ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.8125rem;line-height:1.5;overflow-wrap:anywhere}
ul.plain li:last-child{border-bottom:0}
ul.sys{list-style:none;margin:0;padding:0}
ul.sys li{display:flex;gap:.625rem;align-items:baseline;padding:.45rem 0;font-size:.8125rem;border-bottom:1px solid var(--line)}
ul.sys li:last-child{border-bottom:0}

.state-line{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin-bottom:.5rem}
.chip{display:inline-block;font-size:.72rem;padding:.15rem .55rem;border-radius:.5rem;background:var(--ro-bg);border:1px solid var(--line);color:var(--ink-soft)}
.bars{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;height:2.25rem;align-items:end;direction:ltr}
.bar{display:block;height:100%;border-radius:3px}
.bar.ok{background:#10b981}
.bar.part{background:#f59e0b}
.bar.bad{background:#e11d48}
.bar.none{background:var(--line-solid);height:35%}
.bars-legend{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--ink-faint);margin-top:.25rem;direction:ltr}

.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.625rem;margin:.75rem 0}
.filters label{margin:0 0 .25rem}

/* ── the price list (2026-09-26) ─────────────────────────────────────────────── */
.tariff-head{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.5rem}
.tariff-title{font-size:1rem;font-weight:800;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:0 0 .25rem}
.note.flush{margin-top:0}
.note-inline{font-size:.72rem;color:var(--ink-soft);font-weight:500}
.sub{font-size:.8125rem;font-weight:700;color:var(--ink);margin:1rem 0 .375rem}
/* ── price list (redone 2026-10-11): tiles for the monthly amounts, grouped call rates, the rule in words ── */
.tmeta{display:flex;flex-wrap:wrap;gap:.125rem .5rem;font-size:.75rem;color:var(--ink-soft)}
.tmeta span + span::before{content:'·';margin-inline-end:.5rem;color:var(--ink-faint)}
.fee-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:.625rem}
.fee-tile{border:1px solid var(--line-solid);border-radius:.75rem;padding:.75rem .875rem;background:var(--surface)}
.fee-tile .k{font-size:.75rem;font-weight:600;color:var(--ink-soft)}
.fee-tile .v{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;margin:.125rem 0 .25rem;color:var(--ink)}
.fee-tile .m{font-size:.72rem;color:var(--ink-soft)}
.ttable tr.grp td{background:var(--ro-bg);font-size:.72rem;font-weight:700;color:var(--ink-soft);padding:.375rem .75rem}
.ttable td.strong{font-weight:700;color:var(--ink)}
.ttable td.how{font-size:.75rem;color:var(--ink-soft);line-height:1.55;min-width:11rem}
.free{display:inline-block;font-size:.72rem;font-weight:700;color:#475569;background:#e2e8f0;border-radius:9999px;padding:.05rem .5rem;font-family:inherit}
.dark .free{background:#1e293b;color:#cbd5e1}
.howbill{margin-top:1rem;border:1px solid rgb(59 130 246 / .25);background:var(--brand-50);border-radius:.75rem;padding:.75rem 1rem;font-size:.8125rem;line-height:1.65;color:var(--ink)}
.dark .howbill{background:rgb(59 130 246 / .08)}
.howbill h4{margin:0 0 .375rem;font-size:.8125rem;font-weight:800;color:var(--brand-700)}
.dark .howbill h4{color:#93bbfd}
.howbill ul{margin:0;padding-inline-start:1.1rem}
.howbill li + li{margin-top:.125rem}
.howbill .ex{margin-top:.625rem;display:flex;flex-wrap:wrap;align-items:center;gap:.375rem}
.howbill .ex-h{font-weight:600;font-size:.75rem;color:var(--ink-soft)}
.howbill .ex span:not(.ex-h){background:var(--surface);border:1px solid var(--line-solid);border-radius:.5rem;padding:.15rem .55rem;font-size:.75rem}
.howbill.compact{margin:.5rem 0 0;font-size:.75rem;padding:.625rem .875rem}
.linkbtn.danger{color:#e11d48;margin-inline-start:.5rem}
.step-h{display:flex;align-items:center;gap:.5rem}
.step-n{width:1.375rem;height:1.375rem;border-radius:9999px;background:var(--brand-50);color:var(--brand-700);font-size:.72rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.dark .step-n{background:rgb(59 130 246 / .18);color:#bfdbfe}
.fields label .hint{display:block;font-weight:400;font-size:.6875rem;color:var(--ink-faint);margin:.125rem 0 .25rem;line-height:1.4}
.rates-edit th .th-hint,.tiers-edit th .th-hint{display:block;font-weight:500;font-size:.6875rem;color:var(--ink-faint);text-transform:none;letter-spacing:0}
.tiers-edit{max-width:32rem}
.ttable td.lbl{font-weight:600;white-space:nowrap}
.ttable td.lbl .meta{display:block;font-size:.6875rem;font-weight:400;color:var(--ink-faint);white-space:normal;max-width:18rem}
.lst{display:inline-block;font-size:.6875rem;font-weight:700;border-radius:9999px;padding:.1rem .5rem;white-space:nowrap}
.lst.active{background:#d1fae5;color:#065f46}
.lst.future{background:#dbeafe;color:#1e40af}
.lst.past{background:#e2e8f0;color:#475569}
.dark .lst.active{background:rgb(16 185 129 / .15);color:#6ee7b7}
.dark .lst.future{background:rgb(59 130 246 / .15);color:#93bbfd}
.dark .lst.past{background:rgb(255 255 255 / .08);color:#a8b4c4}
.src{display:inline-block;font-size:.72rem;font-weight:600;color:var(--ink-soft);border:1px solid var(--line-solid);border-radius:.5rem;padding:.05rem .45rem}
.src.own{color:var(--brand-700);border-color:rgb(59 130 246 / .4);background:var(--brand-50)}
.dark .src.own{color:#93bbfd;background:rgb(59 130 246 / .12)}
tr.row.selected td{background:var(--brand-50)}
.dark tr.row.selected td{background:rgb(59 130 246 / .12)}
.linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--brand-600);font-weight:600;cursor:pointer;text-decoration:underline}
.dark .linkbtn{color:#93bbfd}
/* (2026-10-22) the dark rule above has the same specificity and came later, so a danger link turned blue */
.dark .linkbtn.danger{color:#fda4af}
.inp-sm{padding:.35rem .5rem;font-size:.8125rem}
.inp-date{width:auto;min-width:10rem}
.inp-select{width:auto;min-width:14rem;flex:0 1 20rem}
select.inp{appearance:auto;cursor:pointer}
.grid.fields{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.grid.fields label{margin-top:.5rem}
.grid.fields .inp{margin-top:.25rem}
/* a field with a hint line must not sit lower than its neighbours: the box is a column and the input goes to its foot */
.grid.fields > label{display:flex;flex-direction:column}
.grid.fields > label > .inp{margin-top:auto}
.rates-edit td{padding:.375rem .375rem}
.rates-edit .inp{min-width:6rem}
.mode-seg{margin:.25rem 0 .5rem}
.mode-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:.25rem 0 .5rem}
.mode-row label{margin:0}
.mode-row .note{margin:0;flex-basis:100%}
@media (min-width:900px){.mode-row .note{flex-basis:auto}}

/* ── הקצאת משאבים (2026-09-26) ─────────────────────────────────────────────── */
.res-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.625rem;margin:.5rem 0 .75rem}
.res-tile{border:1px solid var(--line);background:var(--ro-bg);border-radius:.75rem;padding:.625rem .75rem;min-width:0}
.res-tile .k{font-size:.72rem;font-weight:700;color:var(--ink-soft)}
.res-tile .v{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;margin:.15rem 0 .35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-tile .v.small{font-size:.95rem}
.res-tile .s{font-size:.6875rem;color:var(--ink-soft);margin-top:.35rem;line-height:1.35}
.of{font-size:.72rem;font-weight:500;color:var(--ink-soft)}
.meter{display:block;height:.375rem;border-radius:9999px;background:var(--line-solid);overflow:hidden;min-width:3.5rem}
.meter i{display:block;height:100%;width:0;border-radius:inherit;background:#10b981;transition:width .3s}
.meter.warn i{background:#f59e0b}
.meter.bad i{background:#e11d48}
.meter.none{background:transparent;border:1px dashed var(--line-solid)}
.cell-v{white-space:nowrap;margin-bottom:.2rem;font-variant-numeric:tabular-nums}
.res-table td{vertical-align:top}
.apply{display:inline-block;font-size:.6875rem;font-weight:700;border-radius:9999px;padding:.1rem .5rem;white-space:nowrap}
.apply.ok{background:#d1fae5;color:#065f46}
.apply.warn{background:#fef3c7;color:#92400e}
.apply.bad{background:#ffe4e6;color:#9f1239}
.apply.none,.apply.stale{background:#e2e8f0;color:#475569}
.dark .apply.ok{background:rgb(16 185 129 / .15);color:#6ee7b7}
.dark .apply.warn{background:rgb(245 158 11 / .15);color:#fcd34d}
.dark .apply.bad{background:rgb(244 63 94 / .15);color:#fda4af}
.dark .apply.none,.dark .apply.stale{background:rgb(255 255 255 / .08);color:#a8b4c4}
.charts{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;margin-top:.5rem}
@media (min-width:900px){.charts{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}}
.chart-box{border:1px solid var(--line);border-radius:.75rem;padding:.5rem .625rem;background:var(--ro-bg);min-width:0}
.chart-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;font-size:.8125rem;margin-bottom:.25rem}
.chart{display:block;width:100%;height:5.5rem;direction:ltr}
.chart .area{fill:rgb(59 130 246 / .14);stroke:none}
.chart .line{fill:none;stroke:var(--brand-600);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.chart.mem .area{fill:rgb(16 185 129 / .14)}
.chart.mem .line{stroke:#059669}
.chart.calls .area{fill:rgb(245 158 11 / .14)}
.chart.calls .line{stroke:#d97706}
.chart .limit{stroke:#e11d48;stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.dark .chart .line{stroke:#60a5fa}
.dark .chart.mem .line{stroke:#34d399}
.dark .chart.calls .line{stroke:#fbbf24}
.chart-empty{padding:1.5rem 0;text-align:center}
.res-list{list-style:none;margin:.25rem 0 .5rem;padding:0;display:grid;gap:.45rem}
.res-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .75rem;align-items:center;font-size:.8125rem}
.res-list li .meter{grid-column:1 / -1}
.res-list .val{font-variant-numeric:tabular-nums;font-weight:600}
.callpath{border:1px solid rgb(16 185 129 / .35);background:rgb(16 185 129 / .06);border-radius:.75rem;padding:.625rem .75rem;margin:.25rem 0 .75rem}
.dark .callpath{background:rgb(16 185 129 / .07);border-color:rgb(16 185 129 / .25)}
.cp-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:.25rem}
.callpath .sys{margin:.25rem 0}
.cp-pool{display:flex;flex-wrap:wrap;gap:.375rem;margin:.375rem 0 .25rem}
.msg.inline{display:inline-block;margin:0 .5rem;padding:.25rem .5rem}
.cb{width:auto;accent-color:var(--brand-600)}
/* one customer's backup window: wider than a confirm, a checkbox that sits inline with its label */
.dialog.wide{max-width:52rem}
.dialog h3.flush{margin:0}
label.inl{display:inline-flex;align-items:center;gap:.375rem;margin:0;color:var(--ink);font-weight:600;font-size:.8125rem}

/* ── מספרי טלפון + חבילת דקות (2026-10-04) ── */
.pkg{margin:.75rem 0}
.pkg-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .875rem;margin-bottom:.35rem}
/* where calls stop, computed live in the edit form (2026-10-07) */
.pkg-stop{margin-top:.5rem;padding:.5rem .75rem;border-radius:.5rem;background:var(--brand-50);color:var(--brand-700);font-size:.8125rem;font-weight:700;line-height:1.5}
.pkg-stop.err{background:#fee2e2;color:#991b1b}
.dark .pkg-stop{background:rgb(59 130 246 / .12);color:#93c5fd}
.dark .pkg-stop.err{background:rgb(220 38 38 / .12);color:#fca5a5}
.num-add{margin-top:1rem}
.num-add>summary{list-style:none;display:inline-flex;cursor:pointer}
.num-add>summary::-webkit-details-marker{display:none}
.num-add[open]>summary{margin-bottom:.5rem}
.num-add .span-all{grid-column:1/-1}
.num-add textarea{min-height:5.5rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.num-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.5rem 0;padding:.5rem .75rem;border:1px solid var(--line-solid);border-radius:.625rem}
.num-bulk[hidden]{display:none}
.num-give{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.75rem 0}
.num-count{width:5rem}

/* ── shell: the tenant app's sidebar + an h-14 top bar (2026-10-05) ────────────
   ⚠ The sidebar is DARK IN BOTH THEMES, exactly as Sidebar.tsx is — a dark rail beside a light page is
     the separation the app already uses, so the two read as one product.
   ⚠ Every ink on the rail was chosen against #0f172a: slate-600 there measures 2.5:1 (the app's own
     note), so nothing on it is darker than #8b9ab0. */
.shell{display:flex;min-height:100vh}
.side{
  width:15rem;flex-shrink:0;background:#0f172a;color:#cbd5e1;border-inline-start:0;
  border-left:1px solid rgb(255 255 255 / .07);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;z-index:30;
}
.dark .side{background:#0d1117}
.side-brand{display:flex;align-items:center;gap:.625rem;padding:1.125rem 1rem;border-bottom:1px solid rgb(255 255 255 / .07)}
.side-brand .mark{width:30px;height:30px;object-fit:contain;flex-shrink:0;user-select:none}
.side-brand-text{min-width:0;line-height:1.2}
.side-brand .name{font-weight:900;letter-spacing:-.02em;font-size:1rem;color:#fff;white-space:nowrap}
.side-brand .tag{font-size:.6875rem;font-weight:600;color:#8b9ab0;white-space:nowrap}
.side-close{display:none;margin-inline-start:auto;color:#8b9ab0}
.side-nav{flex:1;padding:.625rem .75rem}
.side-group + .side-group{margin-top:.625rem;padding-top:.625rem;border-top:1px solid rgb(255 255 255 / .06)}
.side-label{font-size:.6875rem;font-weight:700;color:#8b9ab0;padding:.25rem .625rem .375rem;letter-spacing:.01em}
.side-item{
  position:relative;display:flex;align-items:center;gap:.75rem;padding:.55rem .75rem;border-radius:.5rem;
  color:#a8b4c4;font-weight:600;font-size:.875rem;text-decoration:none;transition:background .15s,color .15s;
}
.side-item svg{flex-shrink:0;color:#8b9ab0;transition:color .15s}
.side-item .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-item:hover{background:rgb(255 255 255 / .06);color:#f1f5f9}
.side-item:hover svg{color:#cbd5e1}
.side-item[aria-current="page"]{background:rgb(59 130 246 / .15);color:#fff}
/* `.dark a` (0,1,1) out-ranks `.side-item` (0,1,0): in dark mode every menu item turned link-blue. */
.dark .side-item{color:#a8b4c4}
.dark .side-item:hover{color:#f1f5f9}
.dark .side-item[aria-current="page"]{color:#fff}
.side-item[aria-current="page"] svg{color:#bfdbfe}
/* ⚠ The #ff3355 accent is the app's ACTIVE-NAV INDICATOR — a separate element, never a fill. */
.side-item[aria-current="page"]::before{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:1.75rem;border-radius:9999px;
  background:#ff3355;box-shadow:0 0 6px 1px rgb(255 51 85 / .35);
}
.side-item:focus-visible{outline:2px solid rgb(255 255 255 / .35);outline-offset:0}
/* The counts on the item itself. ⚠ Amber = people waiting for an answer; red = urgent items on the
   dashboard. Neither is the brand blue, which would vanish on the active item's own tint. */
.side-item .badge{
  flex-shrink:0;min-width:1.375rem;padding:0 .375rem;border-radius:999px;font-size:.72rem;font-weight:800;
  line-height:1.375rem;text-align:center;color:#fff;font-variant-numeric:tabular-nums;
}
.side-item .badge.amber{background:#d97706}
.side-item .badge.red{background:#e11d48}
.side-foot{display:flex;align-items:center;gap:.25rem;padding:.75rem;border-top:1px solid rgb(255 255 255 / .07)}
.side-foot .icon-btn{color:#8b9ab0}
.side-foot .icon-btn:hover{background:rgb(255 255 255 / .07);color:#f1f5f9}
.side-user{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0;text-decoration:none;color:inherit;border-radius:.5rem;padding:.125rem}
.side-user:hover{background:rgb(255 255 255 / .06)}
.avatar{
  width:2rem;height:2rem;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;font-size:.75rem;font-weight:800;
}
.who-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.who-text .who-name{color:#f1f5f9;font-weight:700;font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none}
.who-text .who-role{color:#8b9ab0;font-size:.6875rem;display:flex;flex-wrap:wrap;gap:.125rem .375rem;align-items:center}
/* the missing second step is a warning, not part of the role — its own small amber mark */
.who-warn{color:#fbbf24;font-weight:600;white-space:nowrap}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:3.5rem;display:flex;align-items:center;gap:.75rem;padding:0 1.25rem;
  background:var(--surface-2);border-bottom:1px solid var(--line);box-shadow:var(--header-shadow);
  position:sticky;top:0;z-index:20;
}
.menu-btn{display:none}
.crumbs{display:flex;align-items:center;gap:.25rem;min-width:0;font-size:.9375rem;font-weight:700}
.crumb{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
a.crumb{color:var(--ink-soft);font-weight:600;text-decoration:none}
a.crumb:hover{color:var(--brand-600)}
.crumb-sep{color:var(--ink-faint);display:inline-flex}
.crumb-sep svg{width:14px;height:14px}
.gsearch{position:relative;width:min(22rem,40vw)}
.gsearch > svg{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none;width:16px;height:16px}
.gsearch .inp{padding-right:2.25rem;padding-left:3.75rem;height:2.25rem;background:var(--ro-bg)}
.gsearch .inp::-webkit-search-cancel-button{display:none}
.kbd{
  position:absolute;left:.5rem;top:50%;transform:translateY(-50%);pointer-events:none;direction:ltr;
  font-family:inherit;font-size:.65rem;font-weight:700;color:var(--ink-faint);border:1px solid var(--line-solid);
  border-radius:.375rem;padding:.05rem .35rem;background:var(--surface);
}
.gq-list{
  position:absolute;top:calc(100% + .375rem);right:0;left:0;z-index:60;background:var(--surface);
  border:1px solid var(--line-solid);border-radius:.75rem;box-shadow:0 12px 32px -8px rgb(15 23 42 / .25);
  padding:.25rem;max-height:22rem;overflow-y:auto;
}
.gq-item{
  display:flex;align-items:center;gap:.5rem;width:100%;border:0;background:transparent;text-align:start;
  padding:.5rem .625rem;border-radius:.5rem;cursor:pointer;font:inherit;color:var(--ink);
}
.gq-item.on,.gq-item:hover{background:var(--row-hover)}
.dark .gq-item.on,.dark .gq-item:hover{background:rgb(255 255 255 / .06)}
.gq-main{display:flex;flex-direction:column;flex:1;min-width:0}
.gq-main .company{font-weight:600;font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gq-main .meta{font-size:.72rem;color:var(--ink-soft);text-align:start}
.gq-empty{padding:.75rem;font-size:.8125rem;color:var(--ink-soft)}

.wrap{width:100%;max-width:1320px;margin:0 auto;padding:1.25rem 1.25rem 2.5rem}
.scrim{display:none}

/* ⚠ Below 1024px the rail becomes a drawer: the page keeps its full width and the menu slides in
   over it. The open state is a class on <html>, so the page under it cannot scroll away. */
@media (max-width:1023px){
  /* ⚠⚠ The closed drawer must stay INSIDE the screen. It used to be pushed off the right edge with
     translateX(100%), and Chrome on Android counts a fixed box past the edge as page width: the page could
     be swiped sideways by exactly 16rem, the "closed" menu showed up as if open, and its X did nothing —
     it was never open (reported 2026-10-11 on a phone). Hidden by clip-path + visibility instead, so the
     box never leaves [0, viewport] and a closed menu cannot be seen, clicked or tabbed into. */
  .side{position:fixed;right:0;top:0;height:100vh;height:100dvh;width:16rem;max-width:85vw;z-index:80;box-shadow:none;
    clip-path:inset(0 0 0 100%);visibility:hidden;transition:clip-path .25s ease,visibility 0s linear .25s}
  .drawer-open .side{clip-path:inset(0 0 0 -60px);visibility:visible;box-shadow:-12px 0 40px rgb(0 0 0 / .35);
    transition:clip-path .25s ease,visibility 0s}
  .drawer-open .scrim{display:block;position:fixed;inset:0;background:rgb(15 23 42 / .5);z-index:70}
  .drawer-open,.drawer-open body{overflow:hidden}
  .side-close{display:inline-flex}
  .menu-btn{display:inline-flex}
  .topbar{padding:0 .75rem}
  .wrap{padding:1rem .75rem 2rem}
  .main{overflow-x:clip}
}
@media (max-width:640px){
  .kbd{display:none}
  .gsearch{width:auto;flex:1 1 auto;min-width:0}
  .gsearch .inp{padding-left:.75rem}
  .crumbs{display:none}
  .topbar > .spacer{display:none}
}

/* ── page headers inside the content ── */
.card-title.flush,h2.card-title{font-size:1.125rem;font-weight:800;letter-spacing:-.02em}

/* ── one customer: header, strip, tabs ───────────────────────────────────────── */
.t-head{padding:1.125rem 1.25rem .875rem}
.t-head-top{display:flex;align-items:flex-start;gap:.875rem;flex-wrap:wrap}
.t-avatar{
  width:3rem;height:3rem;border-radius:.875rem;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  font-weight:800;font-size:1rem;background:var(--brand-50);color:var(--brand-700);border:1px solid rgb(59 130 246 / .25);
}
.dark .t-avatar{background:rgb(59 130 246 / .15);color:#bfdbfe;border-color:rgb(59 130 246 / .3)}
.t-avatar.suspended{background:#ffe4e6;color:#9f1239;border-color:rgb(225 29 72 / .3)}
.dark .t-avatar.suspended{background:rgb(244 63 94 / .15);color:#fda4af}
.t-avatar.terminated{background:#e2e8f0;color:#475569;border-color:var(--line-solid)}
.dark .t-avatar.terminated{background:rgb(255 255 255 / .08);color:#a8b4c4}
.t-title{flex:1;min-width:12rem}
.t-name{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:0 0 .3rem}
.t-sub{display:flex;align-items:center;gap:.5rem .75rem;flex-wrap:wrap}
.t-domain{display:inline-flex;align-items:center;gap:.3rem;color:var(--ink-soft);font-size:.8125rem;font-weight:600;text-decoration:none}
.t-domain:hover{color:var(--brand-600)}
.dark .t-domain:hover{color:#93bbfd}
.t-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.t-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(8.25rem,1fr));gap:.5rem;margin-top:1rem;
  padding-top:.875rem;border-top:1px solid var(--line);
}
.t-cell{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.t-cell .k{font-size:.6875rem;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.t-cell .v{font-size:.9375rem;font-weight:700;display:flex;align-items:center;flex-wrap:wrap;column-gap:.4rem;row-gap:0;min-width:0}
/* ⚠ Wraps instead of clipping: "1,234 מתוך 10,000 · 12%" lost the percentage — its most important part — to an ellipsis. */
.t-cell .v > *{white-space:nowrap}
.t-head #m:empty{display:none}
.t-head #m .msg{margin-bottom:0}

.subtabs{
  display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;margin:0 0 1rem;padding:.25rem;
  background:var(--surface);border:1px solid var(--line);border-radius:.875rem;box-shadow:var(--card-shadow);
}
.subtabs::-webkit-scrollbar{display:none}
/* ⚠ On a phone the seven tabs WRAP — scrolling sideways with a hidden scrollbar hid the last three with no hint. */
@media (max-width:640px){.subtabs{flex-wrap:wrap;overflow-x:visible}}
.subtabs button{
  border:0;background:transparent;color:var(--ink-soft);font:inherit;font-weight:600;font-size:.875rem;
  padding:.45rem .9rem;border-radius:.625rem;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s;
}
.subtabs button:hover{color:var(--ink);background:var(--row-hover)}
.subtabs button[aria-selected="true"]{background:var(--brand-50);color:var(--brand-700)}
.dark .subtabs button[aria-selected="true"]{background:rgb(59 130 246 / .18);color:#fff}

.ov-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.ov-grid > .card{margin-bottom:0}
@media (min-width:1100px){.ov-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}}
.dl{margin:0;display:grid;gap:0}
.dl-row{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--line);font-size:.8125rem}
.dl-row:last-child{border-bottom:0}
.dl-row dt{color:var(--ink-soft);font-weight:600;white-space:nowrap}
.dl-row dd{margin:0;text-align:end;font-weight:600;min-width:0;word-break:break-word}

/* ── the customer list ── */
.th-sort{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap}
.th-sort:hover{color:var(--ink)}
.sort-ind{font-size:.6rem;color:var(--brand-600);min-width:.6rem}
.dark .sort-ind{color:#93bbfd}
th[aria-sort="ascending"],th[aria-sort="descending"]{color:var(--ink)}
.empty-state{padding:2rem 1rem;text-align:center;color:var(--ink-soft);font-size:.875rem}
tr.muted-row td{color:var(--ink-soft)}
.plain-link{text-decoration:none;text-align:start;display:flex;flex-direction:column;color:var(--ink)}
.plain-link:hover .company{color:var(--brand-600);text-decoration:underline}
.dark .plain-link:hover .company{color:#93bbfd}
td .meta,.plain-link .meta{display:block;font-size:.6875rem;color:var(--ink-faint);line-height:1.3;font-weight:400}
/* "איך זה עובד": an explanation read once, kept one click away instead of above the controls */
details.help{margin:.25rem 0 .5rem}
details.help>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;color:var(--brand-600)}
.dark details.help>summary{color:#93bbfd}
details.help>summary::-webkit-details-marker{display:none}
details.help>summary::before{content:"?";display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:9999px;border:1.5px solid currentColor;font-size:.65rem;font-weight:800}
details.help[open]>summary{margin-bottom:.25rem}
.status-line{display:flex;align-items:center;gap:.6rem;font-size:.875rem;font-weight:500;padding:.25rem 0}
/* A card's first heading row never adds space above itself, and a heading inside a row never adds space below it. */
.card > .section-row:first-child{margin-top:0}
.section-row > h2.card-title{margin:0}
.dash-col{display:flex;flex-direction:column;gap:1rem;min-width:0}
.dash-col > .card{margin-bottom:0}
@media (min-width:900px){.dash-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}}
/* the trail in the top bar is navigation, not a second page title */
.crumbs{font-size:.8125rem;font-weight:600}
.crumb.cur{color:var(--ink);font-weight:700}
/* a timestamp or a figure in a table cell is one unit — it never breaks across two lines */
td > bdi[dir="ltr"],td.mono{white-space:nowrap}
@media (min-width:900px){.kpis.kpis-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.t-cell .v .of{font-size:.72rem;font-weight:500;color:var(--ink-soft)}
.t-cell .v .of.over{color:#e11d48;font-weight:700}
.t-cell .v .of.near{color:#b45309;font-weight:700}
.dark .t-cell .v .of.over{color:#fda4af}
.dark .t-cell .v .of.near{color:#fcd34d}
.card-title.flush ~ .seg,.section-row .seg{flex-shrink:0}
.card > h3.section:first-child,.card > .section:first-child{margin-top:0}
.res-tile .k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-tile .v{white-space:normal;overflow:visible}
.res-tile .v .of{white-space:nowrap;display:inline-block}
.btn-danger-soft{background:transparent;color:#be123c;border-color:rgb(225 29 72 / .35)}
.btn-danger-soft:hover:not(:disabled){background:rgb(225 29 72 / .08);border-color:#e11d48}
.dark .btn-danger-soft{color:#fda4af;border-color:rgb(244 63 94 / .35)}
.dark .btn-danger-soft:hover:not(:disabled){background:rgb(244 63 94 / .12)}
/* month-over-month on the billing overview */
.kpi .d{display:block;font-size:.6875rem;line-height:1.35;color:var(--ink-soft);margin-top:.15rem}
.kpi .d.up,.delta.up{color:#047857;font-weight:700}
.kpi .d.down,.delta.down{color:#be123c;font-weight:700}
.dark .kpi .d.up,.dark .delta.up{color:#6ee7b7}
.dark .kpi .d.down,.dark .delta.down{color:#fda4af}
.muted{color:var(--ink-soft)}
/* dashboard tiles open the screen behind them */
a.kpi-link,.dark a.kpi-link{color:var(--ink);text-decoration:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}
a.kpi-link:hover{border-color:rgb(59 130 246 / .45);box-shadow:0 1px 3px rgb(15 23 42 / .08)}
a.kpi-link:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}
#dHealth{scroll-margin-top:4.5rem}
/* כתובות IP — the manual add row (2026-10-08) */
.ta-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.ta-add label{font-weight:700;font-size:13px}
.ta-add .ta-ip{width:190px;flex:0 0 auto}
.ta-add .ta-note{flex:1 1 200px;min-width:0;max-width:340px}

/* ── per-number usage (2026-10-08) ── */
.nu-bars{display:flex;align-items:flex-end;gap:2px;height:5rem;margin:.5rem 0 .25rem}
.nu-bar{flex:1;height:100%;display:flex;align-items:flex-end;border-radius:2px}
.nu-bar:hover{background:var(--row-hover)}
.nu-bar i{display:block;width:100%;border-radius:2px;background:var(--brand-500)}
.nu-bar:hover i{background:var(--brand-600)}
.nu-axis{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--ink-faint);margin-bottom:.75rem}
button.linkish{background:none;border:0;padding:0;font:inherit;color:var(--brand-600);cursor:pointer;text-decoration:underline dotted}
/* #2563eb on the dark card is ~2.7:1 — every phone number in the numbers table is one of these (2026-10-19). */
.dark button.linkish{color:#93bbfd}

/* ── מספרי טלפון (2026-10-10): a list you work in, not a report you scroll past ─────────────────── */
.kpi-btn{font:inherit;color:inherit;text-align:start;cursor:pointer;transition:border-color .15s,background .15s}
.kpi-btn:hover{border-color:rgb(59 130 246 / .45);background:var(--brand-50)}
.dark .kpi-btn:hover{background:rgb(59 130 246 / .1)}
.kpi-btn:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}
.num-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem}
.num-tools .num-q{min-width:13rem;flex:1 1 13rem;max-width:20rem}
.seg .n.over{color:#e11d48;opacity:1}
.dark .seg .n.over{color:#fda4af}
.num-table td{vertical-align:middle;padding-top:.45rem;padding-bottom:.45rem}
.num-table .num-cb{width:1.75rem}
.num-table tr.sel td{background:var(--brand-50)}
.dark .num-table tr.sel td{background:rgb(59 130 246 / .12)}
.num-table tr.num-bad td:first-child{box-shadow:inset -3px 0 0 #e11d48}
.num-table .company{font-weight:600}
.num-table td .meta{white-space:nowrap}
.num-prob{margin-top:.2rem;font-size:.75rem;line-height:1.4}
.num-label{max-width:14rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the operator's internal note under the description (2026-10-18) — its own line, still one line */
.num-label .num-note{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:500}
.num-empty{padding:1rem 0}
button.linkish.quiet{color:var(--ink-faint);text-decoration:none}
button.linkish.quiet:hover{text-decoration:underline dotted}
/* the bulk bar follows the operator down a long list */
.num-bulk{position:sticky;bottom:.75rem;z-index:6;background:var(--surface);margin:.75rem 0 0;
  box-shadow:0 8px 24px -6px rgb(15 23 42 / .18),0 2px 6px rgb(15 23 42 / .06);border-color:rgb(59 130 246 / .35)}
.dark .num-bulk{box-shadow:0 8px 24px -6px rgb(0 0 0 / .5)}
.num-bulk-sep{width:1px;align-self:stretch;background:var(--line-solid);margin:0 .25rem}
.danger-text{color:#dc2626}
.dark .danger-text{color:#fda4af}
.num-dom-row:focus-visible{outline:2px solid var(--brand-500);outline-offset:-2px}
.num-add{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--line-solid)}
.num-add[hidden]{display:none}
details.num-ck>summary{cursor:pointer;font-size:.8125rem;font-weight:600;color:var(--brand-600);display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
details.num-ck>summary .note{margin:0;font-weight:400}
details.num-ck[open]>summary{margin-bottom:.5rem}
.num-howto{margin:0 .25rem 1rem}
.num-table td.num-state{white-space:nowrap}
.num-table td.num-state .num-prob,.num-table td.num-state .note+div{white-space:normal;max-width:22rem}
/* customers list: one line per customer */
.list-table td.company{white-space:nowrap}
.list-table td.feats{white-space:nowrap}

/* ── numbers: stock line, customer groups, history (2026-10-16) ── */
.num-stockline{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;align-items:center;margin:.5rem 0 .25rem}
.num-stockline .num-count{width:4.5rem;display:inline-block;padding:.2rem .4rem}
.num-grp td{background:rgb(148 163 184 / .12);font-weight:600;font-size:.8rem;padding-top:.55rem;padding-bottom:.45rem}
.num-hist li{padding:.2rem 0;border-bottom:1px solid var(--line)}
.num-hist li:last-child{border-bottom:0}
/* 12-month number movement (2026-10-16) */
.num-move>summary .note{margin-inline-start:.4rem}
.num-move-chart{display:flex;gap:.4rem;align-items:flex-end;margin:.6rem 0 .3rem;overflow-x:auto}
.num-move-col{flex:1;min-width:2.4rem;display:flex;flex-direction:column;align-items:center;gap:.15rem}
.num-move-bars{height:4.5rem;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.num-move-bars i{display:block;width:40%;max-width:12px;border-radius:2px 2px 0 0}
.num-move-bars i.a,.num-move-key.a{background:var(--brand-500)}
.num-move-bars i.r,.num-move-key.r{background:#f59e0b}
.num-move-v{font-size:.7rem;font-variant-numeric:tabular-nums;min-height:.9rem}
.num-move-m{font-size:.68rem;color:var(--ink-soft);white-space:nowrap}
.num-move-key{display:inline-block;width:.6rem;height:.6rem;border-radius:2px;margin-inline:.25rem .15rem;vertical-align:middle}
/* one customer's invoice, month by month (חיוב וסטטיסטיקה → a customer) */
.inv-table tr.sub td{font-weight:600}
.inv-table tr.total td{font-weight:800;border-top:2px solid var(--line-solid)}
.inv-table tr.tier td:first-child{padding-inline-start:1.5rem;color:var(--ink-soft)}
.inv-table.inv-fixed{table-layout:fixed;min-width:44rem}
.inv-types-table{table-layout:fixed;width:100%}
.inv-cols-5 col:nth-child(1){width:36%}.inv-cols-5 col:nth-child(2){width:10%}.inv-cols-5 col:nth-child(3){width:12%}.inv-cols-5 col:nth-child(4){width:26%}.inv-cols-5 col:nth-child(5){width:16%}
.inv-cols-7 col:nth-child(1){width:28%}.inv-cols-7 col:nth-child(2){width:8%}.inv-cols-7 col:nth-child(3){width:9%}.inv-cols-7 col:nth-child(4){width:21%}.inv-cols-7 col:nth-child(5){width:12%}.inv-cols-7 col:nth-child(6){width:11%}.inv-cols-7 col:nth-child(7){width:11%}
.inv-table td:not(:first-child),.inv-table th:not(:first-child){text-align:start}
.inv-toggle{all:unset;display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;border-radius:.25rem;font-weight:inherit}
.inv-toggle:hover{color:var(--accent,#2563eb)}
.inv-toggle:focus-visible{outline:2px solid var(--accent,#2563eb);outline-offset:2px}
.inv-arrow{display:inline-block;width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(135deg);transition:transform .3s ease-out}
.inv-toggle[aria-expanded="true"] .inv-arrow{transform:rotate(45deg)}
tr.inv-types-row>td{padding:0;border:0}
.inv-types{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .3s ease-out,opacity .3s ease-out,visibility .3s}
.inv-types.open{grid-template-rows:1fr;opacity:1;visibility:visible}
.inv-types-inner{min-height:0;overflow:hidden}
.inv-types-table td:first-child{padding-inline-start:1.5rem;color:var(--ink-soft)}
.inv-note{white-space:nowrap;font-weight:400;margin-top:.125rem}
@media print{.inv-types{grid-template-rows:1fr!important;opacity:1!important;visibility:visible!important}.inv-arrow{display:none}}
.inv-table tr.extra td{color:#92400e}
.dark .inv-table tr.extra td{color:#fcd34d}