/* ============================================================
   PBX Billing — design system
   ============================================================ */

/* ── Шрифты (в начале — браузер регистрирует до применения правил) ── */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-700.woff2') format('woff2');
}

:root{
  /* navy / brand */
  --navy-950:#0d1230;
  --navy-900:#121738;
  --navy-850:#161c44;
  --navy-800:#1b2250;
  --navy-700:#222a63;
  --navy-600:#2c3680;
  --brand:#1a237e;
  --brand-bright:#5566f0;   /* interactive accent on dark */
  --brand-600:#3b48c9;
  --brand-soft:#eef0fc;
  --brand-soft-2:#e4e7fb;

  /* surfaces */
  --bg:#f4f5f7;
  --bg-2:#eef0f4;
  --surface:#ffffff;
  --surface-2:#fafbfc;
  --line:#e8eaf1;
  --line-2:#eef0f5;

  /* text */
  --text:#191e36;
  --text-2:#586079;
  --text-3:#9097ad;

  /* status hues */
  --green:#15924a;   --green-bg:#e6f5ec;   --green-line:#bfe6cd;
  --orange:#c9760a;  --orange-bg:#fbeed8;  --orange-line:#f3d6a4;
  --blue:#2160e6;    --blue-bg:#e4edfe;    --blue-line:#c3d6fb;
  --purple:#7338d4;  --purple-bg:#f0e8fc;  --purple-line:#ddc9f7;
  --red:#d23030;     --red-bg:#fce6e6;     --red-line:#f6c6c6;
  --amber:#b9820b;   --amber-bg:#fbf1d6;   --amber-line:#f0dca0;

  --radius:12px;
  --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(20,25,55,.06), 0 1px 1px rgba(20,25,55,.04);
  --shadow:0 2px 8px rgba(22,28,68,.06), 0 8px 24px rgba(22,28,68,.05);
  --shadow-lg:0 12px 40px rgba(13,18,48,.18);
  --font:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#root{height:100%}
button{font-family:inherit;cursor:pointer}
a{color:inherit; text-decoration: none;}
::selection{background:var(--brand-soft-2)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#d4d8e3;border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#bcc2d2;background-clip:content-box}

/* ============================================================
   LAYOUT
   ============================================================ */
.app{display:flex;height:100vh;overflow:hidden}
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.content{flex:1;overflow:auto;padding:26px 30px 60px}
.content-inner{max-width:1320px;margin:0 auto}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.page-title{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0}
.page-sub{color:var(--text-2);font-size:13px;margin:4px 0 0}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar{
  width:250px;flex:none;
  background:linear-gradient(178deg,var(--navy-900),var(--navy-950));
  color:#cbd0e6;
  display:flex;flex-direction:column;
  transition:width .26s cubic-bezier(.4,0,.2,1);
  position:relative;
  z-index:30;
}
.sidebar.collapsed{width:74px}
.sidebar-brand{
  height:64px;flex:none;display:flex;align-items:center;gap:12px;
  padding:0 18px;border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-mark{
  width:34px;height:34px;flex:none;border-radius:9px;
  background:linear-gradient(135deg,var(--brand-bright),var(--brand-600));
  display:grid;place-items:center;color:#fff;
  box-shadow:0 4px 14px rgba(85,102,240,.4);
}
.brand-text{min-width:0;overflow:hidden;white-space:nowrap}
.brand-text .bt-name{font-weight:600;font-size:15px;color:#fff;letter-spacing:.01em}
.brand-text .bt-sub{font-size:10.5px;color:#7e87b0;letter-spacing:.14em;text-transform:uppercase}

.nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 12px;display:flex;flex-direction:column;gap:3px}
.nav-label{
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#69719c;
  padding:14px 12px 6px;white-space:nowrap;
}
.nav-item{
  display:flex;align-items:center;gap:13px;
  padding:10px 12px;border-radius:9px;
  color:#aab1d2;font-size:13.5px;font-weight:500;
  border:0;background:transparent;width:100%;text-align:left;
  position:relative;white-space:nowrap;
  transition:background .15s,color .15s;
}
.nav-item .ni-icon{flex:none;display:grid;place-items:center;width:22px;height:22px;opacity:.92}
.nav-item .ni-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav-item .ni-badge{
  margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;
  background:rgba(255,255,255,.08);color:#c7cdec;padding:1px 7px;border-radius:20px;
}
.nav-item:hover{background:rgba(255,255,255,.055);color:#eef0fb}
.nav-item.active{background:rgba(85,102,240,.16);color:#fff}
.nav-item.active::before{
  content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--brand-bright);
}
.nav-item.active .ni-icon{opacity:1;color:var(--brand-bright)}
.sidebar.collapsed .nav-item{justify-content:center;padding:11px}
.sidebar.collapsed .ni-text,.sidebar.collapsed .ni-badge,
.sidebar.collapsed .nav-label,.sidebar.collapsed .brand-text,
.sidebar.collapsed .side-foot-text{display:none}
.sidebar.collapsed .sidebar-brand{justify-content:center;padding:0}

.side-foot{flex:none;padding:12px;border-top:1px solid rgba(255,255,255,.06)}
.side-user{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:9px}
.side-user:hover{background:rgba(255,255,255,.05)}
.avatar{
  width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,#3a4596,#2a3170);color:#dfe3f7;font-weight:600;font-size:12.5px;
}
.side-foot-text{min-width:0;overflow:hidden;white-space:nowrap}
.side-foot-text .sf-name{font-size:13px;color:#e7eaf7;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.side-foot-text .sf-role{font-size:11px;color:#727aa6}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  height:64px;flex:none;background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:0 22px;
  z-index:20;
}
.icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid transparent;
  background:transparent;color:var(--text-2);display:grid;place-items:center;
  transition:background .15s,color .15s,border-color .15s;flex:none;
}
.icon-btn:hover{background:var(--bg-2);color:var(--text)}
.collapse-btn{color:var(--text-2)}

.header-search{
  flex:1;max-width:420px;display:flex;align-items:center;gap:9px;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:0 12px;height:40px;color:var(--text-3);transition:border-color .15s,background .15s;
}
.header-search:focus-within{border-color:var(--brand-600);background:#fff;box-shadow:0 0 0 3px var(--brand-soft)}
.header-search input{
  border:0;outline:0;background:transparent;flex:1;font-family:inherit;font-size:13.5px;color:var(--text);
}
.header-search input::placeholder{color:var(--text-3)}
.header-search kbd{
  font-family:var(--mono);font-size:10.5px;color:var(--text-3);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;background:#fff;
}
.header-spacer{flex:1}
.header-actions{display:flex;align-items:center;gap:6px}
.header-divider{width:1px;height:26px;background:var(--line);margin:0 4px}

.gear-btn{position:relative}
.gear-btn svg{transition:transform .5s cubic-bezier(.34,1.3,.5,1)}
.gear-btn:hover svg{transform:rotate(90deg)}
.gear-btn:hover{background:var(--brand-soft);color:var(--brand-600)}

.dot-badge{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--red);border:2px solid #fff}

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 20px;border-bottom:1px solid var(--line-2)}
.panel-head h3{margin:0;font-size:15px;font-weight:600;letter-spacing:-.005em}
.panel-head .ph-sub{font-size:12.5px;color:var(--text-2);margin-top:2px}
.panel-body{padding:18px 20px}

/* stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:20px}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:18px 18px 14px;position:relative;overflow:hidden;
  transition:box-shadow .18s,transform .18s;
}
.stat:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.stat-top{display:flex;align-items:center;justify-content:space-between}
.stat-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
.stat-ico.i-brand{background:var(--brand-soft);color:var(--brand-600)}
.stat-ico.i-green{background:var(--green-bg);color:var(--green)}
.stat-ico.i-purple{background:var(--purple-bg);color:var(--purple)}
.stat-ico.i-amber{background:var(--amber-bg);color:var(--amber)}
.stat-label{color:var(--text-2);font-size:12.5px;font-weight:500}
.stat-value{font-family:var(--mono);font-size:27px;font-weight:600;letter-spacing:-.02em;margin-top:11px;line-height:1}
.stat-value .unit{font-size:15px;color:var(--text-3);font-weight:500;margin-left:3px}
.stat-foot{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:12px}
.delta{display:inline-flex;align-items:center;gap:3px;font-weight:600;font-family:var(--mono)}
.delta.up{color:var(--green)}
.delta.down{color:var(--red)}
.stat-foot .sf-note{color:var(--text-3)}
.stat-spark{position:absolute;right:14px;bottom:12px;opacity:.9}

/* ============================================================
   CHART
   ============================================================ */
.chart-wrap{width:100%}
.chart-legend{display:flex;flex-wrap:wrap;gap:6px}
.legend-chip{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--text-2);
  border:1px solid var(--line);border-radius:20px;padding:5px 11px 5px 9px;background:#fff;
  transition:background .15s,border-color .15s,opacity .15s;
}
.legend-chip .lg-dot{width:9px;height:9px;border-radius:3px}
.legend-chip .lg-val{font-family:var(--mono);color:var(--text);font-weight:600;margin-left:2px}
.legend-chip:hover{background:var(--surface-2)}
.legend-chip.off{opacity:.42}
.legend-chip.off .lg-val{color:var(--text-3)}
.chart-tip{
  position:absolute;pointer-events:none;background:var(--navy-900);color:#fff;
  border-radius:9px;padding:9px 11px;font-size:12px;box-shadow:var(--shadow-lg);
  transform:translate(-50%,-112%);white-space:nowrap;z-index:5;min-width:120px;
}
.chart-tip .ct-day{color:#a8aede;font-size:11px;margin-bottom:5px;font-weight:500}
.chart-tip .ct-row{display:flex;align-items:center;gap:8px;margin-top:3px}
.chart-tip .ct-row .ct-dot{width:8px;height:8px;border-radius:2.5px}
.chart-tip .ct-row .ct-name{color:#c7cce6;flex:1}
.chart-tip .ct-row .ct-v{font-family:var(--mono);font-weight:600}

/* segmented control */
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.seg button{
  border:0;background:transparent;color:var(--text-2);font-size:12.5px;font-weight:500;
  padding:5px 13px;border-radius:7px;transition:background .15s,color .15s;font-family:inherit;
}
.seg button:hover{color:var(--text)}
.seg button.on{background:#fff;color:var(--brand-600);box-shadow:var(--shadow-sm);font-weight:600}

/* ============================================================
   BADGES / PILLS
   ============================================================ */
.pill{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:20px;white-space:nowrap;line-height:1.5;border:1px solid transparent;
}
.pill .pdot{width:6px;height:6px;border-radius:50%}
.pill.local{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.pill.local .pdot{background:var(--green)}
.pill.outbound{background:var(--orange-bg);color:var(--orange);border-color:var(--orange-line)}
.pill.outbound .pdot{background:var(--orange)}
.pill.inbound{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-line)}
.pill.inbound .pdot{background:var(--blue)}
.pill.ld{background:var(--purple-bg);color:var(--purple);border-color:var(--purple-line)}
.pill.ld .pdot{background:var(--purple)}

.pill.done{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.pill.pending{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)}
.pill.error{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.pill.active{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.pill.blocked{background:#eef0f4;color:var(--text-2);border-color:var(--line)}
.pill .spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   TABLE
   ============================================================ */
.tbl-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 20px;border-bottom:1px solid var(--line-2)}
.tbl-search{
  display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:0 11px;height:38px;min-width:240px;color:var(--text-3);
}
.tbl-search:focus-within{border-color:var(--brand-600);background:#fff;box-shadow:0 0 0 3px var(--brand-soft)}
.tbl-search input{border:0;outline:0;background:transparent;flex:1;font-family:inherit;font-size:13px;color:var(--text)}
.tbl-search input::placeholder{color:var(--text-3)}
.flt-spacer{flex:1}
.flt-count{font-size:12.5px;color:var(--text-2)}
.flt-count b{font-family:var(--mono);color:var(--text);font-weight:600}

.select{
  position:relative;height:38px;display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:0 11px;
  font-size:13px;color:var(--text);font-weight:500;transition:border-color .15s;
}
.select:hover{border-color:#cfd4e2}
.select select{
  position:absolute;inset:0;opacity:0;cursor:pointer;font-family:inherit;width:100%;
}
.select .sel-ico{color:var(--text-3);display:grid;place-items:center}
.select .sel-lbl-muted{color:var(--text-3);font-weight:400}

.tbl-scroll{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl thead th{
  text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);
  font-weight:600;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);
  white-space:nowrap;position:sticky;top:0;z-index:1;
}
table.tbl th.sortable{cursor:pointer;user-select:none}
table.tbl th.sortable:hover{color:var(--text-2)}
table.tbl th .th-in{display:inline-flex;align-items:center;gap:5px}
table.tbl th .sort-ico{display:inline-flex;flex-direction:column;color:#c3c8d6;line-height:0}
table.tbl th.sorted .sort-ico{color:var(--brand-600)}
table.tbl td{padding:11px 16px;border-bottom:1px solid var(--line-2);color:var(--text);vertical-align:middle;white-space:nowrap}
table.tbl tbody tr{transition:background .12s}
table.tbl tbody tr:nth-child(even){background:var(--surface-2)}
table.tbl tbody tr:hover{background:var(--brand-soft)}
table.tbl tbody tr:last-child td{border-bottom:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.t-num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
td.t-num,th.t-num{text-align:right}
.muted{color:var(--text-3)}
.t-strong{font-weight:600}
.dur-bar{display:inline-block;height:5px;border-radius:3px;background:var(--brand-soft-2);vertical-align:middle;margin-left:8px}

.party{display:flex;align-items:center;gap:9px}
.party .p-ico{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--bg-2);color:var(--text-2)}
.party .p-main{font-family:var(--mono);font-weight:600;font-size:13px}
.party .p-sub{font-size:11px;color:var(--text-3)}

.dir-arrow{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px}

.empty{padding:54px 20px;text-align:center;color:var(--text-3)}
.empty .e-ico{margin:0 auto 12px;width:46px;height:46px;border-radius:13px;background:var(--bg-2);display:grid;place-items:center;color:var(--text-3)}

.tbl-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 20px;border-top:1px solid var(--line-2)}
.pager{display:flex;align-items:center;gap:4px}
.pager button{
  min-width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--text-2);font-size:13px;font-family:var(--mono);transition:.15s;padding:0 7px;
}
.pager button:hover:not(:disabled){border-color:var(--brand-600);color:var(--brand-600)}
.pager button.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.pager button:disabled{opacity:.4;cursor:default}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:9px;
  font-family:inherit;font-size:13px;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--text);
  transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:#cfd4e2;background:var(--surface-2)}
.btn.primary{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.btn.primary:hover{background:#3340b8;border-color:#3340b8}
.btn.ghost{border-color:transparent;background:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--bg-2);color:var(--text)}
.btn.sm{height:32px;padding:0 11px;font-size:12.5px}
.btn.danger{color:var(--red);border-color:var(--red-line)}
.btn.danger:hover{background:var(--red-bg)}

/* ============================================================
   SETTINGS DRAWER
   ============================================================ */
.overlay{position:fixed;inset:0;background:rgba(13,18,48,.42);backdrop-filter:blur(2px);z-index:50;opacity:0;transition:opacity .25s}
.overlay.show{opacity:1}
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:760px;max-width:96vw;background:var(--bg);
  z-index:60;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.drawer.show{transform:translateX(0)}
.drawer-head{
  height:66px;flex:none;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:13px;padding:0 22px;
}
.drawer-head .dh-ico{width:38px;height:38px;border-radius:10px;background:var(--brand-soft);color:var(--brand-600);display:grid;place-items:center}
.drawer-head h2{margin:0;font-size:17px;font-weight:600}
.drawer-head .dh-sub{font-size:12px;color:var(--text-2)}
.drawer-body{flex:1;display:flex;min-height:0}
.drawer-tabs{
  width:218px;flex:none;background:#fff;border-right:1px solid var(--line);padding:14px 12px;
  display:flex;flex-direction:column;gap:3px;
}
.dtab{
  display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:9px;border:0;background:transparent;
  text-align:left;width:100%;color:var(--text-2);transition:.15s;
}
.dtab:hover{background:var(--bg)}
.dtab.on{background:var(--brand-soft);color:var(--brand-600)}
.dtab .dt-ico{flex:none;margin-top:1px}
.dtab .dt-name{font-size:13.5px;font-weight:600;display:block}
.dtab .dt-desc{font-size:11.5px;color:var(--text-3);font-weight:400;margin-top:1px}
.dtab.on .dt-desc{color:var(--brand-600);opacity:.7}
.drawer-content{flex:1;overflow-y:auto;padding:24px 26px 80px}

.set-section{margin-bottom:26px}
.set-section h4{margin:0 0 3px;font-size:14.5px;font-weight:600}
.set-section .ss-desc{margin:0 0 15px;font-size:12.5px;color:var(--text-2)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:12.5px;font-weight:600;color:var(--text-2)}
.field .hint{font-size:11.5px;color:var(--text-3);font-weight:400}
.inp{
  height:40px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 12px;
  font-family:inherit;font-size:13.5px;color:var(--text);outline:0;transition:border-color .15s,box-shadow .15s;
}
.inp:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-soft)}
.inp.mono{font-family:var(--mono)}
.inp-affix{position:relative;display:flex;align-items:center}
.inp-affix .inp{flex:1;width:100%}
.inp-affix .suffix{position:absolute;right:12px;color:var(--text-3);font-size:12.5px;font-family:var(--mono);pointer-events:none}
textarea.inp{height:auto;padding:10px 12px;resize:vertical;min-height:74px;line-height:1.5}

.switch{width:42px;height:24px;border-radius:20px;background:#cfd4e2;position:relative;transition:background .2s;flex:none;border:0;padding:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .2s}
.switch.on{background:var(--brand-600)}
.switch.on::after{left:21px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.toggle-row:last-child{border-bottom:0}
.toggle-row .tr-name{font-size:13.5px;font-weight:500}
.toggle-row .tr-desc{font-size:12px;color:var(--text-3);margin-top:1px}

.tariff-card{border:1px solid var(--line);border-radius:11px;background:#fff;padding:16px 17px;margin-bottom:13px}
.tariff-card .tc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.tariff-card .tc-head .tc-name{font-weight:600;font-size:14px;display:flex;align-items:center;gap:9px}
.rate-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ip-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 8px 6px 11px;font-family:var(--mono);font-size:12.5px}
.ip-chip button{border:0;background:transparent;color:var(--text-3);display:grid;place-items:center;border-radius:5px;padding:2px}
.ip-chip button:hover{background:var(--red-bg);color:var(--red)}

.drawer-foot{
  flex:none;background:#fff;border-top:1px solid var(--line);padding:13px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.drawer-foot .df-note{font-size:12px;color:var(--text-3)}

.secret-box{display:flex;align-items:center;gap:8px}
.secret-box .inp{flex:1}

/* ============================================================
   TOASTS
   ============================================================ */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:90;display:flex;flex-direction:column;gap:10px}
.toast{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--green);border-radius:11px;box-shadow:var(--shadow-lg);
  padding:13px 16px 13px 14px;min-width:300px;max-width:380px;
  animation:toast-in .3s cubic-bezier(.34,1.3,.5,1);
}
.toast.out{animation:toast-out .25s forwards}
.toast .to-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
.toast.ok{border-left-color:var(--green)} .toast.ok .to-ico{background:var(--green-bg);color:var(--green)}
.toast.info{border-left-color:var(--blue)} .toast.info .to-ico{background:var(--blue-bg);color:var(--blue)}
.toast.warn{border-left-color:var(--amber)} .toast.warn .to-ico{background:var(--amber-bg);color:var(--amber)}
.toast .to-body{flex:1;min-width:0}
.toast .to-title{font-size:13.5px;font-weight:600}
.toast .to-msg{font-size:12px;color:var(--text-2);margin-top:1px}
.toast .to-close{border:0;background:transparent;color:var(--text-3);display:grid;place-items:center;border-radius:6px;padding:3px}
.toast .to-close:hover{background:var(--bg-2);color:var(--text)}
@keyframes toast-in{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toast-out{to{transform:translateX(40px);opacity:0}}

/* misc */
.row{display:flex;align-items:center;gap:10px}
.grid-2{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;margin-bottom:20px}
.grid-2-even{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.spacer{flex:1}
.kpi-mini{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line-2)}
.kpi-mini:last-child{border-bottom:0}
.kpi-mini .km-l{display:flex;align-items:center;gap:11px}
.kpi-mini .km-dot{width:10px;height:10px;border-radius:3px;flex:none}
.kpi-mini .km-name{font-size:13px;font-weight:500}
.kpi-mini .km-sub{font-size:11.5px;color:var(--text-3)}
.kpi-mini .km-v{font-family:var(--mono);font-weight:600;font-size:14px}

.bar-track{height:8px;border-radius:5px;background:var(--bg-2);overflow:hidden;flex:1}
.bar-fill{height:100%;border-radius:5px}

.section-divider{height:1px;background:var(--line-2);margin:0}

/* ============================================================
   UPLOADS TABS
   ============================================================ */
.uploads-tabs{
  display:flex;gap:0;
  border-bottom:1px solid var(--line);
  margin-bottom:20px;
}
.uploads-tab{
  display:inline-flex;align-items:center;gap:7px;
  height:40px;padding:0 18px;
  border:none;border-bottom:2px solid transparent;
  background:transparent;
  font-family:inherit;font-size:13px;font-weight:500;
  color:var(--text-2);
  cursor:pointer;
  margin-bottom:-1px;
  border-radius:0;
  transition:color .15s,border-color .15s;
  white-space:nowrap;
}
.uploads-tab:hover{color:var(--text)}
.uploads-tab.active{
  color:var(--brand-600);
  border-bottom-color:var(--brand-600);
  font-weight:600;
}
.uploads-tab svg{opacity:.7;transition:opacity .15s}
.uploads-tab.active svg,.uploads-tab:hover svg{opacity:1}

/* responsive */
@media (max-width:1180px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:880px){
  .sidebar:not(.collapsed){width:74px}
  .sidebar:not(.collapsed) .ni-text,.sidebar:not(.collapsed) .ni-badge,
  .sidebar:not(.collapsed) .nav-label,.sidebar:not(.collapsed) .brand-text,
  .sidebar:not(.collapsed) .side-foot-text{display:none}
  .sidebar:not(.collapsed) .nav-item{justify-content:center;padding:11px}
  .header-search{display:none}
  .content{padding:18px 16px 50px}
}

/* ============================================================
   Стили из longdistance.html
   ============================================================ */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.upload-card { background:var(--panel-bg,#fff); border:1px solid var(--border); border-radius:8px; padding:16px 20px; }
.upload-card__bar-wrap { background:var(--border); border-radius:6px; height:8px; overflow:hidden; margin:10px 0 6px; }
.upload-card__bar { height:100%; width:0%; border-radius:6px; transition:width .2s ease; position:relative; background:var(--brand); }
.upload-card__shimmer { position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.25) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 1.2s infinite linear; }
.upload-card--skipped { opacity:.6; border-style:dashed; }
.ld-row-clickable:hover td { background:var(--surface-2,#f0f4ff) !important; }
.ld-row-active td { background:var(--surface-2,#f0f4ff) !important; }
.ld-del-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 14px; line-height:1;
  width:28px; height:28px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .15s, color .15s;
}
.ld-del-btn:hover { background: var(--red-bg, #fee2e2); color: var(--red, #ef4444); }
.btn.danger { background:var(--red,#ef4444); color:#fff; border:none; }
.btn.danger:hover { background:#dc2626; }


/* ============================================================
   Стили из uploads_tariff.html
   ============================================================ */

/* upload-card, shimmer — уже объявлены выше (longdistance) */
#upload-card-active .upload-card { border-color: var(--brand, #2563eb); }
#upload-cards::-webkit-scrollbar { width: 4px; }
#upload-cards::-webkit-scrollbar-track { background: transparent; }
#upload-cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.tariff-del-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 14px; line-height:1;
  width:28px; height:28px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .15s, color .15s;
}
.tariff-del-btn:hover { background: var(--red-bg, #fee2e2); color: var(--red, #ef4444); }


/* ============================================================
   Стили из billing.html (date-picker bf-*)
   ============================================================ */

.bf-tab.active {
  color: var(--brand-600) !important;
  border-bottom-color: var(--brand-600) !important;
  background: var(--brand-soft) !important;
}
.bf-nav-btn {
  width: 26px; height: 26px;
  border: 1.5px solid var(--brand-600); border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 13px;
  color: var(--brand-600); transition: background .12s;
  display: flex; align-items: center; justify-content: center;
}
.bf-nav-btn:hover { background: var(--brand-soft); }
.bf-day-btn {
  height: 30px; border: 0; border-radius: 5px; background: transparent;
  font-family: var(--font); font-size: 12px; cursor: pointer;
  color: var(--text); transition: background .1s, color .1s; text-align: center;
}
.bf-day-btn:hover { background: var(--brand-soft); color: var(--brand-600); }
.bf-day-btn.selected { background: var(--brand-600); color: #fff; font-weight: 600; }
.bf-day-btn.today { box-shadow: inset 0 0 0 1.5px var(--brand-bright); }
.bf-day-btn.other-month { color: var(--text-3); }
.bf-cell-btn {
  height: 32px; border: 1.5px solid var(--line); border-radius: 7px;
  background: #fff; font-family: var(--font); font-size: 12.5px;
  cursor: pointer; color: var(--text); font-weight: 500; transition: all .12s;
}
.bf-cell-btn:hover { background: var(--brand-soft); border-color: var(--brand-soft-2); color: var(--brand-600); }
.bf-cell-btn.selected { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.bf-chip {
  height: 24px; padding: 0 9px; border-radius: 20px;
  border: 1.5px solid var(--brand-600); background: #fff;
  font-size: 11px; font-weight: 600; color: var(--brand-600);
  cursor: pointer; font-family: var(--font); transition: background .12s;
}
.bf-chip:hover { background: var(--brand-soft); }


/* ============================================================
   Стили из ipcalls.html (date-picker ip-*)
   ============================================================ */

.ip-tab.active { color:var(--brand-600)!important; border-bottom-color:var(--brand-600)!important; background:var(--brand-soft)!important; }
.ip-nav-btn { width:26px;height:26px;border:1.5px solid var(--brand-600);border-radius:6px;background:#fff;cursor:pointer;font-size:13px;color:var(--brand-600);transition:background .12s;display:flex;align-items:center;justify-content:center; }
.ip-nav-btn:hover { background:var(--brand-soft); }
.ip-day-btn { height:30px;border:0;border-radius:5px;background:transparent;font-family:var(--font);font-size:12px;cursor:pointer;color:var(--text);transition:background .1s,color .1s;text-align:center; }
.ip-day-btn:hover { background:var(--brand-soft);color:var(--brand-600); }
.ip-day-btn.selected { background:var(--brand-600);color:#fff;font-weight:600; }
.ip-day-btn.today { box-shadow:inset 0 0 0 1.5px var(--brand-bright); }
.ip-day-btn.other-month { color:var(--text-3); }
.ip-cell-btn { height:32px;border:1.5px solid var(--line);border-radius:7px;background:#fff;font-family:var(--font);font-size:12.5px;cursor:pointer;color:var(--text);font-weight:500;transition:all .12s; }
.ip-cell-btn:hover { background:var(--brand-soft);border-color:var(--brand-soft-2);color:var(--brand-600); }
.ip-cell-btn.selected { background:var(--brand-600);border-color:var(--brand-600);color:#fff; }
.ip-chip { height:24px;padding:0 9px;border-radius:20px;border:1.5px solid var(--brand-600);background:#fff;font-size:11px;font-weight:600;color:var(--brand-600);cursor:pointer;font-family:var(--font);transition:background .12s; }
.ip-chip:hover { background:var(--brand-soft); }


/* ============================================================
   Стили из stats.html и settings.html (date-picker cal-*, qd-chip)
   ============================================================ */

.cal-mode-btn.active {
  color: var(--brand-600) !important;
  border-bottom-color: var(--brand-600) !important;
  background: var(--brand-soft) !important;
}
.cal-day-btn {
  height: 32px; border: 0; border-radius: 6px; background: transparent;
  font-family: var(--font); font-size: 12.5px; cursor: pointer;
  color: var(--text); transition: background .12s, color .12s;
  text-align: center; line-height: 32px; padding: 0;
}
.cal-day-btn:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-600); }
.cal-day-btn.selected { background: var(--brand-600); color: #fff; font-weight: 600; }
.cal-day-btn.today { box-shadow: inset 0 0 0 1.5px var(--brand-bright); }
.cal-day-btn.other-month { color: var(--text-3); }
.cal-day-btn:disabled { opacity: .35; cursor: default; }
.cal-cell-btn {
  height: 36px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff;
  font-family: var(--font); font-size: 13px; cursor: pointer;
  color: var(--text); transition: all .12s; font-weight: 500;
}
.cal-cell-btn:hover { background: var(--brand-soft); border-color: var(--brand-soft-2); color: var(--brand-600); }
.cal-cell-btn.selected { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.qd-chip {
  height: 26px; padding: 0 11px; border-radius: 20px;
  border: 1px solid var(--line); background: #fff;
  font-size: 11.5px; font-weight: 500; color: var(--text-2);
  cursor: pointer; transition: all .15s; font-family: var(--font);
}
.qd-chip:hover { background: var(--brand-soft); border-color: var(--brand-soft-2); color: var(--brand-600); }


/* ============================================================
   Стили из settings.html (секции, формы, таблицы, шаблоны)
   ============================================================ */

.settings-section {
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 12px; overflow: hidden; background: var(--card); transition: box-shadow .15s;
}
.settings-section:has(.settings-section-body[style*="block"]) { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.settings-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; cursor: pointer; user-select: none; transition: background .12s;
}
.settings-section-head:hover { background: var(--hover); }
.settings-section-left { display: flex; align-items: center; gap: 14px; }
.settings-section-icon {
  font-size: 22px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2, #f3f4f6); border-radius: 8px; flex-shrink: 0;
}
.settings-section-title { font-size: 15px; font-weight: 600; color: var(--text-1); line-height: 1.3; }
.settings-section-sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.settings-chevron {
  font-size: 20px; color: var(--text-3);
  transition: transform .22s cubic-bezier(.4,0,.2,1); display: inline-block; line-height: 1;
}
.settings-chevron.open { transform: rotate(90deg); }
.settings-section-body { border-top: 1px solid var(--border); padding: 20px; animation: fadeSlideIn .18s ease; }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.settings-section-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.settings-empty-state { text-align: center; padding: 40px 20px; color: var(--text-3); }
.settings-empty-icon { font-size: 36px; margin-bottom: 10px; }
.settings-empty-text { font-size: 14px; }
.settings-subsection { margin-bottom: 20px; }
.settings-subsection-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.settings-subsection-title { font-size: 14px; font-weight: 600; color: var(--text-1); }
.settings-subsection-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.settings-upload-status { padding: 10px 14px; border-radius: 7px; font-size: 13px; margin-bottom: 12px; border: 1px solid; }
.settings-upload-status.info    { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.settings-upload-status.success { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.settings-upload-status.error   { background:#fef2f2; border-color:#fecaca; color:#dc2626; }
.settings-add-form { background: var(--bg-2, #f8fafc); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.settings-add-form-title { font-size: 13px; font-weight: 600; color: var(--text-2, #374151); margin-bottom: 10px; }
.settings-add-form-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.settings-add-field { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.settings-add-field--wide { flex: 1; }
.settings-add-field--btn  { flex-shrink: 0; }
.settings-add-label { font-size: 12px; color: var(--text-3); font-weight: 500; }
.settings-add-input {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
  background: var(--bg, #fff); color: var(--text-1); outline: none;
  transition: border-color .15s; width: 100%; box-sizing: border-box;
}
.settings-add-input:focus { border-color: var(--accent, #2563eb); }
.settings-add-input.input-error { border-color: #ef4444 !important; }
.settings-add-error { margin-top: 8px; font-size: 12px; color: #dc2626; display: flex; align-items: center; gap: 5px; }
.settings-search-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.search-input-wrap { position: relative; flex: 1; min-width: 200px; }
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; pointer-events: none; }
.search-input {
  width: 100%; padding: 8px 10px 8px 34px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; background: var(--bg, #fff); color: var(--text-1); outline: none;
  box-sizing: border-box; transition: border-color .15s;
}
.search-input:focus { border-color: var(--accent, #2563eb); }
.ip-dir-count { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.settings-table-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; max-height: 420px; overflow-y: auto; }
.tpl-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tpl-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.tpl-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg, #fff); flex-wrap: wrap; transition: border-color .15s;
}
.tpl-row--active { border-color: var(--accent, #2563eb); background: var(--accent-light, #eff6ff); }
.tpl-row--builtin { background: var(--bg-2, #f8fafc); }
.tpl-row-left { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.tpl-badge { font-size: 11px; padding: 2px 7px; border-radius: 20px; background: var(--bg-2, #f3f4f6); color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.tpl-badge--active { background: var(--accent, #2563eb); color: #fff; }
.tpl-name { font-size: 13px; font-weight: 600; color: var(--text-1); white-space: nowrap; }
.tpl-sample { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px; }
.tpl-row-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.btn-xs { font-size: 12px; padding: 3px 10px; }
.tpl-btn-del { color: var(--red, #ef4444) !important; }
.tpl-btn-del:hover { background: var(--red-bg, #fee2e2) !important; }
.tpl-uploader { border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; background: var(--bg-2, #f8fafc); }
.tpl-uploader-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tpl-sample-line {
  font-size: 12px; padding: 10px 12px; background: var(--bg, #fff);
  border: 1px solid var(--border); border-radius: 6px; overflow-x: auto;
  white-space: pre; margin-bottom: 14px; letter-spacing: .02em;
}
.tpl-tokens-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tpl-token { display: flex; flex-direction: column; gap: 4px; min-width: 90px; }
.tpl-token-val {
  font-size: 12px; font-family: monospace; padding: 5px 8px;
  background: var(--bg, #fff); border: 2px solid var(--border);
  border-radius: 6px; text-align: center; white-space: nowrap; transition: border-color .15s;
}
.tpl-token-val.assigned    { border-color: var(--accent, #2563eb); }
.tpl-token-val.assigned-ok { border-color: #22c55e; }
.tpl-token-select { font-size: 11px; padding: 3px 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg, #fff); color: var(--text-1); width: 100%; cursor: pointer; }
.tpl-mapper-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 4px; }