:root{
  --bg-0:#070b12;
  --bg-1:#0b1220;
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.07);
  --stroke:rgba(255,255,255,.10);
  --stroke-strong:rgba(255,255,255,.20);
  --txt:#eaf1fb;
  --txt-dim:#8ea0bd;
  --txt-faint:#5f7191;
  --accent:#38e1d6;
  --accent-2:#5b8cff;
  --good:#4ade80;
  --warn:#fbbf24;
  --danger:#f87171;
  --radius:18px;
  --blur:22px;
  --opt-bg:#0b1220;
  --field-bg:rgba(255,255,255,.04);
  --field-bg-focus:rgba(255,255,255,.06);
  --btn-hover:rgba(255,255,255,.12);
  --row-hover:rgba(255,255,255,.03);
  --row-border:rgba(255,255,255,.05);
  --scroll-thumb:rgba(255,255,255,.1);
}

/* ---- светла тема: палитрата на glassiom.com ----
   Плътни бели повърхности, арктик синьо (#3E7BA5) за акцентен текст и фокус;
   градиентните бутони остават тюркоаз→синьо като в тъмната. */
[data-theme="light"]{
  --bg-0:#EDF0F4;
  --bg-1:#F8FAFC;
  --glass:#ffffff;
  --glass-2:#ffffff;
  --stroke:rgba(15,20,30,.10);
  --stroke-strong:rgba(15,20,30,.16);
  --txt:#111316;
  --txt-dim:#55677a;
  --txt-faint:#8A9BAE;
  --accent:#2D6087;
  --accent-2:#3E7BA5;
  --good:#15803d;
  --warn:#946200;
  --danger:#c0392b;
  --opt-bg:#ffffff;
  --field-bg:#ffffff;
  --field-bg-focus:#ffffff;
  --btn-hover:#f2f6fa;
  --row-hover:rgba(62,123,165,.05);
  --row-border:rgba(15,20,30,.07);
  --scroll-thumb:rgba(15,20,30,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:var(--scroll-thumb) transparent;color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
html,body{height:100%}

/* date-полета: собствен календар (datepicker.js) — крием системната икона */
input[type=date]{cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator{display:none}

/* ---- GLASSIOM datepicker ---- */
.gdp-pop{
  position:fixed;z-index:100;width:264px;padding:14px;
  border-radius:16px;border:1px solid var(--stroke-strong);
  background:rgba(16,26,42,.88);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.75),0 0 46px -6px rgba(56,225,214,.22);
  animation:gdp-in .16s ease;
}
.gdp-pop::before{ /* дифузно сияние зад стъклото */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(220px 150px at 20% -10%,rgba(56,225,214,.16),transparent 65%),
             radial-gradient(200px 140px at 105% 115%,rgba(91,140,255,.12),transparent 65%);
}
@keyframes gdp-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.gdp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;position:relative}
.gdp-title{font-size:13px;font-weight:700;letter-spacing:.4px;color:var(--txt)}
.gdp-nav{
  width:28px;height:28px;border-radius:9px;cursor:pointer;font-size:15px;
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--txt-dim);
  transition:color .15s,border-color .15s,background .15s;
}
.gdp-nav:hover{color:var(--accent);border-color:rgba(56,225,214,.45)}
.gdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;position:relative}
.gdp-dow{
  text-align:center;font-size:10px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--txt-faint);padding:4px 0 6px;
}
.gdp-day{
  height:30px;border-radius:9px;border:1px solid transparent;background:none;
  color:var(--txt);font-size:12.5px;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.gdp-day:hover{background:var(--glass-2);border-color:var(--stroke-strong)}
.gdp-day.other{color:var(--txt-faint)}
.gdp-day.today{border-color:rgba(56,225,214,.5)}
.gdp-day.selected{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#05121a;font-weight:700;border:none;
  box-shadow:0 4px 14px -3px rgba(56,225,214,.5);
}
.gdp-foot{display:flex;justify-content:space-between;margin-top:10px;position:relative}
.gdp-link{
  background:none;border:none;cursor:pointer;font-size:12px;color:var(--txt-dim);
  padding:4px 6px;border-radius:8px;transition:color .15s;
}
.gdp-link:hover{color:var(--accent)}

html[data-theme="light"] .gdp-pop{
  background:rgba(255,255,255,.92);
  border-color:rgba(15,20,30,.12);
  box-shadow:0 24px 60px -18px rgba(15,20,30,.35),0 0 46px -6px rgba(62,123,165,.25);
}
html[data-theme="light"] .gdp-pop::before{
  background:radial-gradient(220px 150px at 20% -10%,rgba(62,123,165,.10),transparent 65%),
             radial-gradient(200px 140px at 105% 115%,rgba(56,225,214,.08),transparent 65%);
}
html[data-theme="light"] .gdp-day.selected{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.5)}
html[data-theme="light"] .gdp-day.today{border-color:rgba(62,123,165,.5)}
body{
  font-family:"Segoe UI",-apple-system,Roboto,Inter,system-ui,sans-serif;
  color:var(--txt);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased;
}

/* ---- фон: дълбок градиент + статична аврора в ъгъла ---- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(1200px 800px at 15% -10%, #12213b 0%, transparent 55%),
    radial-gradient(1000px 700px at 100% 110%, #0e1b2e 0%, transparent 55%),
    linear-gradient(160deg,var(--bg-1),var(--bg-0));
}
.bg .aurora{
  position:absolute;width:900px;height:700px;right:-15%;top:-25%;
  background:radial-gradient(closest-side,
    rgba(56,225,214,.10) 0%,
    rgba(91,140,255,.07) 45%,
    transparent 75%);
  filter:blur(30px);
}
.bg .grain{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:3px 3px;}

/* фон в светла тема — бяло с лек арктик оттенък */
[data-theme="light"] .bg::before{
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(62,123,165,.10) 0%, transparent 55%),
    radial-gradient(1000px 700px at 100% 110%, rgba(138,155,174,.14) 0%, transparent 55%),
    linear-gradient(160deg,var(--bg-1),var(--bg-0));
}
[data-theme="light"] .bg .aurora{
  background:radial-gradient(closest-side,
    rgba(62,123,165,.09) 0%,
    rgba(90,151,192,.05) 45%,
    transparent 75%);
}
[data-theme="light"] .bg .grain{opacity:.4;
  background-image:radial-gradient(rgba(15,20,30,.03) 1px,transparent 1px);}

/* ---- оформление ---- */
.app{position:relative;z-index:1;display:grid;grid-template-columns:250px 1fr;min-height:100vh}

/* ---- страничен панел ---- */
.side{
  position:sticky;top:0;height:calc(100vh - 32px);
  margin:16px 0 16px 16px;border-radius:var(--radius);
  background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--stroke);
  display:flex;flex-direction:column;padding:20px 14px;gap:6px;
  overflow:hidden;
}
.side-scroll{
  flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent;
  padding-right:6px;margin-right:-8px;
}
.brand{display:flex;align-items:center;gap:12px;padding:6px 10px 18px}
.logo{width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid;place-items:center;font-weight:800;color:#05121a;
  box-shadow:0 6px 20px rgba(56,225,214,.35);}
.brand b{font-size:16px;letter-spacing:.5px}
.brand span{display:block;font-size:10px;color:var(--txt-dim);letter-spacing:2px}
.nav-label{font-size:10px;letter-spacing:1.5px;color:var(--txt-faint);
  text-transform:uppercase;padding:14px 12px 6px}
button.nav-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:var(--glass);border:1px solid var(--stroke);cursor:pointer;
  font-family:inherit;text-align:left;
  font-size:11px;font-weight:700;letter-spacing:1.1px;color:var(--txt);
  padding:8px 10px;margin-top:8px;border-radius:10px;text-transform:uppercase;
  transition:color .15s,background .15s,border-color .15s;
}
button.nav-toggle:hover{background:var(--glass-2);border-color:var(--stroke-strong)}
.nav-toggle .chev{
  font-size:9px;width:16px;height:16px;display:grid;place-items:center;
  color:var(--accent);
  border:1px solid var(--stroke-strong);border-radius:5px;
  transition:transform .2s ease,border-color .15s;
}
button.nav-toggle:hover .chev{border-color:var(--accent)}
.nav-group.collapsed .chev{transform:rotate(-90deg)}
.nav-group.collapsed .nav{display:none}
.nav-group .nav{margin-top:4px}
.nav a{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;
  color:var(--txt-dim);text-decoration:none;font-size:14px;font-weight:500;
  border:1px solid transparent;transition:background .18s ease,color .18s ease;
}
.nav a .ic{width:18px;text-align:center;opacity:.85}
.nav a:hover{background:var(--glass-2);color:var(--txt)}
.nav a.active{
  color:var(--txt);
  background:linear-gradient(90deg,rgba(56,225,214,.16),rgba(56,225,214,.02));
  border:1px solid rgba(56,225,214,.35);
}
.side-foot{margin-top:auto;padding:10px;font-size:11px;color:var(--txt-faint)}

/* ---- основна зона ---- */
.main{overflow:auto;padding:16px 16px 16px 12px;display:flex;flex-direction:column;gap:16px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.crumbs{font-size:13px;color:var(--txt-dim)}
.crumbs b{color:var(--txt)}
.top-right{display:flex;align-items:center;gap:14px}
.user{display:flex;align-items:center;gap:10px;
  background:var(--glass);border:1px solid var(--stroke);border-radius:12px;padding:6px 12px 6px 6px;
  backdrop-filter:blur(var(--blur));}
.avatar{width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,#5b8cff,#38e1d6);display:grid;place-items:center;
  font-weight:700;font-size:13px;color:#05121a}
.user .n{font-size:13px;font-weight:600;line-height:1.1}
.user .r{font-size:10px;color:var(--accent);letter-spacing:.5px}
.link-quiet{color:var(--txt-dim);font-size:12px;text-decoration:none;transition:color .18s}
.link-quiet:hover{color:var(--txt)}

h1{font-size:24px;font-weight:700;letter-spacing:.3px}
.sub{color:var(--txt-dim);font-size:13px;margin-top:3px}

/* ---- карти ---- */
.card{
  position:relative;border-radius:var(--radius);
  background:var(--glass);border:1px solid var(--stroke);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  padding:20px;overflow:hidden;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
  transition:transform .18s ease,border-color .18s ease;
}
/* тънък градиентен ръб (hairline), статичен */
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.03) 40%,rgba(56,225,214,.10));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.card.hoverable:hover{transform:translateY(-2px);border-color:var(--stroke-strong)}
.card h3{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--txt-dim);margin-bottom:16px;font-weight:600}
/* картите се разпъват от край до край; в grid-ове ги ограничава самата колона */
.main .card{max-width:none !important}

/* ---- премиум изглед за Администратор: дискретни златни акценти ---- */
.role-admin{--gold:#E8C97A;--gold-2:#C9A24B}
[data-theme="light"] .role-admin,.role-admin[data-theme]{--gold-ink:#A8842C}
.role-admin .bg::after{ /* второ, златисто сияние в срещуположния ъгъл */
  content:"";position:absolute;width:700px;height:520px;left:-12%;bottom:-22%;
  background:radial-gradient(closest-side,rgba(232,201,122,.07) 0%,rgba(232,201,122,.03) 45%,transparent 75%);
  filter:blur(30px);
}
.role-admin .user{border-color:rgba(232,201,122,.35)}
.role-admin .user .r{color:var(--gold)}
.role-admin .avatar{
  box-shadow:0 0 0 2px rgba(232,201,122,.55),0 4px 14px -2px rgba(232,201,122,.35);
}
.role-admin .brand .logo{
  box-shadow:0 0 0 1px rgba(232,201,122,.4),0 6px 20px rgba(56,225,214,.35);
}
.role-admin .nav-toggle .chev{color:var(--gold)}
.role-admin .card::before{
  background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.03) 40%,rgba(232,201,122,.14));
}
[data-theme="light"] .role-admin .user .r{color:#A8842C}
[data-theme="light"] .role-admin .card::before{
  background:linear-gradient(150deg,rgba(15,20,30,.06),rgba(15,20,30,.015) 40%,rgba(168,132,44,.18));
}

/* ---- GLASSIOM select (стъклен дропдаун) ---- */
.gsel-btn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;background:var(--field-bg);border:1px solid var(--stroke);
  border-radius:11px;padding:10px 13px;color:var(--txt);font-size:13.5px;
  font-family:inherit;cursor:pointer;text-align:left;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.gsel-btn:hover{border-color:var(--stroke-strong)}
.gsel-btn:focus{outline:none;border-color:rgba(56,225,214,.6);box-shadow:0 0 0 3px rgba(56,225,214,.12)}
[data-theme="light"] .gsel-btn:focus{border-color:rgba(62,123,165,.55);box-shadow:0 0 0 3px rgba(62,123,165,.14)}
.gsel-btn.gsel-inline{width:auto;min-width:170px;border-radius:12px;padding:9px 14px}
.gsel-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsel-chev{font-size:10px;color:var(--accent);flex:0 0 auto}
.gsel-pop{padding:8px;width:auto}
.gsel-list{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;position:relative;
  scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
.gsel-opt{
  background:none;border:1px solid transparent;border-radius:9px;cursor:pointer;
  color:var(--txt);font-size:13px;font-family:inherit;text-align:left;
  padding:9px 11px;transition:background .12s,border-color .12s;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gsel-opt:hover{background:var(--glass-2);border-color:var(--stroke-strong)}
.gsel-opt.selected{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#05121a;font-weight:700;
}
[data-theme="light"] .gsel-opt.selected{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.5)}
.gsel-search{
  width:100%;margin-bottom:8px;background:var(--field-bg);border:1px solid var(--stroke);
  border-radius:9px;padding:8px 11px;color:var(--txt);font-size:13px;outline:none;position:relative;
}
.gsel-search:focus{border-color:rgba(56,225,214,.5)}

/* ---- зуум контрол (− % +) ---- */
.zoom-ctl{
  position:fixed;right:18px;bottom:16px;z-index:60;
  display:flex;align-items:center;gap:2px;padding:4px;
  border-radius:12px;border:1px solid var(--stroke);
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.5);
}
.zoom-ctl button{
  background:none;border:none;cursor:pointer;color:var(--txt-dim);
  font-size:15px;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;transition:color .15s,background .15s;
}
.zoom-ctl button:hover{color:var(--txt);background:var(--glass-2)}
.zoom-ctl .zoom-val{width:auto;padding:0 7px;font-size:11.5px;font-variant-numeric:tabular-nums;font-weight:600}
[data-theme="light"] .zoom-ctl{box-shadow:0 10px 26px -12px rgba(15,20,30,.25)}

/* странично меню в светла тема — техническа хартия: бяло с фина CAD мрежа */
[data-theme="light"] .side{
  background-color:#fbfcfe;
  background-image:
    linear-gradient(rgba(62,123,165,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(62,123,165,.055) 1px,transparent 1px);
  background-size:16px 16px;
  border-color:rgba(15,20,30,.08);
  box-shadow:0 12px 32px -14px rgba(15,20,30,.14);
}
[data-theme="light"] .nav a:hover{background:rgba(62,123,165,.07);color:var(--txt)}
[data-theme="light"] .nav a.active{
  color:#2D5F82;
  background:linear-gradient(90deg,rgba(62,123,165,.13),rgba(62,123,165,.03));
  border:1px solid rgba(62,123,165,.30);
  box-shadow:none;
}

/* карти в светла тема — плътно бяло с ясна дълбочина */
[data-theme="light"] .card{
  background:#ffffff;
  border-color:rgba(15,20,30,.10);
  box-shadow:0 1px 2px rgba(15,20,30,.04),0 14px 34px -16px rgba(15,20,30,.16);
}
[data-theme="light"] .card::before{
  background:linear-gradient(150deg,rgba(15,20,30,.06),rgba(15,20,30,.015) 40%,rgba(62,123,165,.14));
}

/* контроли в светла тема — бели, с арктик фокус вместо тюркоаз */
[data-theme="light"] .search,[data-theme="light"] select.filter{
  box-shadow:0 1px 2px rgba(15,20,30,.04);
}
[data-theme="light"] .search:focus,
[data-theme="light"] .field input:focus,[data-theme="light"] .field select:focus,
[data-theme="light"] .field textarea:focus,
[data-theme="light"] .tbl td input:not([type=checkbox]):focus,
[data-theme="light"] .tbl td select:focus{
  border-color:rgba(62,123,165,.55);
  box-shadow:0 0 0 3px rgba(62,123,165,.14);
}
[data-theme="light"] .btn{box-shadow:0 1px 2px rgba(15,20,30,.05)}
[data-theme="light"] .btn.primary{
  border:none;color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 24px -8px rgba(62,123,165,.5);
}
[data-theme="light"] .logo{
  color:#fff;text-shadow:0 0 10px rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px rgba(62,123,165,.4);
}
[data-theme="light"] .avatar{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.5)}
[data-theme="light"] .btn.danger{background:rgba(220,80,70,.06);border-color:rgba(192,57,43,.3)}
[data-theme="light"] .tbl th{color:#66788c}
[data-theme="light"] .tbl input[type=checkbox],[data-theme="light"] .field-check input[type=checkbox]{
  background:#fff;border-color:rgba(15,20,30,.28);
}
[data-theme="light"] .pill{background:rgba(21,128,61,.09);border-color:rgba(21,128,61,.26)}
[data-theme="light"] .pill.off{background:rgba(192,57,43,.07);border-color:rgba(192,57,43,.25)}
[data-theme="light"] .pill.cat{background:rgba(62,123,165,.09);color:#2D5F82;border-color:rgba(62,123,165,.28)}
[data-theme="light"] .code-chip{background:rgba(62,123,165,.09);border-color:rgba(62,123,165,.30)}
[data-theme="light"] .msg{background:rgba(62,123,165,.07);border-color:rgba(62,123,165,.32)}
[data-theme="light"] .msg.error{background:rgba(192,57,43,.06);border-color:rgba(192,57,43,.3)}
[data-theme="light"] .user .r{color:#2D6087}

/* ---- контроли ---- */
.search{
  background:var(--field-bg);border:1px solid var(--stroke);border-radius:12px;
  padding:9px 14px;color:var(--txt);font-size:13px;width:250px;
  backdrop-filter:blur(var(--blur));outline:none;transition:border-color .18s,box-shadow .18s;
}
.search::placeholder{color:var(--txt-faint)}
.search:focus{border-color:rgba(56,225,214,.6);box-shadow:0 0 0 3px rgba(56,225,214,.12)}

select.filter{
  background:var(--field-bg);border:1px solid var(--stroke);border-radius:12px;
  padding:9px 14px;color:var(--txt);font-size:13px;outline:none;cursor:pointer;
}
select.filter option{background:var(--opt-bg)}

.btn{
  padding:10px 18px;border-radius:12px;border:1px solid var(--stroke-strong);
  background:var(--glass-2);color:var(--txt);font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;transition:background .18s,transform .18s,box-shadow .18s;
  backdrop-filter:blur(10px);
}
.btn:hover{background:var(--btn-hover);transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#05121a;border:none;box-shadow:0 10px 26px -6px rgba(56,225,214,.5);
}
.btn.primary:hover{box-shadow:0 14px 32px -6px rgba(56,225,214,.7)}
.btn.danger{
  background:rgba(248,113,113,.10);color:var(--danger);
  border:1px solid rgba(248,113,113,.35);
}
.btn.danger:hover{background:rgba(248,113,113,.18)}
.tbl input[type=checkbox],.field-check input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;border-radius:5px;cursor:pointer;
  background:var(--field-bg);
  border:1px solid var(--stroke-strong);
  display:inline-block;vertical-align:middle;position:relative;margin:0;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.tbl input[type=checkbox]:hover,.field-check input[type=checkbox]:hover{
  border-color:rgba(56,225,214,.55);background:var(--field-bg-focus);
}
.tbl input[type=checkbox]:checked,.field-check input[type=checkbox]:checked{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;
  box-shadow:0 4px 14px -3px rgba(56,225,214,.5);
}
.tbl input[type=checkbox]:checked::after,.field-check input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;
  border:solid #05121a;border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* ---- форма ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--txt-dim);margin-bottom:6px}
.field input[type=text],.field input[type=number],.field input[type=password],
.field input[type=search],.field input[type=email],.field input[type=date],
.field select,.field textarea{
  width:100%;background:var(--field-bg);border:1px solid var(--stroke);
  border-radius:11px;padding:11px 13px;color:var(--txt);font-size:14px;outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s;
  font-family:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(56,225,214,.6);box-shadow:0 0 0 3px rgba(56,225,214,.12);
  background:var(--field-bg-focus);
}
.field select option{background:var(--opt-bg)}
.field .errors{color:var(--danger);font-size:12px;margin-top:5px}
.field-check{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.field-check label{font-size:13px;color:var(--txt)}
.field-check input{width:16px;height:16px;accent-color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.code-chip{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;
  font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent);
  background:rgba(56,225,214,.10);border:1px solid rgba(56,225,214,.3);
  padding:5px 12px;border-radius:20px;letter-spacing:.5px;
}

/* ---- таблица ---- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--txt-faint);font-weight:600;font-size:11px;
  letter-spacing:.5px;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--stroke)}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--row-border);font-variant-numeric:tabular-nums}
.tbl tr:hover td{background:var(--row-hover)}
.tbl a{color:var(--txt);text-decoration:none}
.tbl a:hover{color:var(--accent)}
.tbl .mono{font-variant-numeric:tabular-nums;letter-spacing:.4px;font-weight:600}
.tbl .empty{text-align:center;color:var(--txt-faint);padding:34px 10px}

.pill{font-size:11px;padding:3px 9px;border-radius:20px;white-space:nowrap;
  background:rgba(74,222,128,.12);color:var(--good);border:1px solid rgba(74,222,128,.25)}
.pill.off{background:rgba(248,113,113,.10);color:var(--danger);border-color:rgba(248,113,113,.25)}
.pill.cat{background:rgba(91,140,255,.12);color:#9db8ff;border-color:rgba(91,140,255,.25)}

/* ---- полета в таблични редове (formset редове) ---- */
.tbl td input:not([type=checkbox]),.tbl td select{
  width:100%;background:var(--field-bg);border:1px solid var(--stroke);
  border-radius:10px;padding:9px 11px;color:var(--txt);font-size:13px;outline:none;
  font-family:inherit;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.tbl td input:not([type=checkbox]):focus,.tbl td select:focus{
  border-color:rgba(56,225,214,.6);box-shadow:0 0 0 3px rgba(56,225,214,.12);
  background:var(--field-bg-focus);
}
.tbl td select option{background:var(--opt-bg)}
.tbl td input::placeholder{color:var(--txt-faint)}

/* ---- разбивка на разходи (машини, калкулация) ---- */
.breakdown{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.brow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 2px;
  font-size:13px;border-bottom:1px dashed var(--row-border)}
.brow span:first-child{color:var(--txt-dim)}
.brow b{font-variant-numeric:tabular-nums;white-space:nowrap}
.brow.total{border-bottom:none;margin-top:6px;padding-top:14px;border-top:1px solid var(--stroke)}
.brow.total span:first-child{color:var(--txt);font-weight:600}
.brow.total b{color:var(--accent);font-size:16px}

/* ---- file input ---- */
.file-input{
  background:var(--field-bg);border:1px solid var(--stroke);border-radius:11px;
  padding:8px 10px;color:var(--txt-dim);font-size:13px;
}
.file-input::file-selector-button{
  background:var(--glass-2);border:1px solid var(--stroke-strong);border-radius:9px;
  color:var(--txt);font-size:12.5px;font-weight:600;padding:7px 13px;margin-right:12px;
  cursor:pointer;transition:background .15s;
}
.file-input::file-selector-button:hover{background:var(--btn-hover)}

/* ---- съобщения ---- */
.messages{display:flex;flex-direction:column;gap:8px}
.msg{
  padding:12px 18px;border-radius:12px;font-size:13px;
  background:rgba(56,225,214,.10);border:1px solid rgba(56,225,214,.35);
  backdrop-filter:blur(10px);
}
.msg.error{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.35)}

/* ---- вход ---- */
.login-wrap{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:100%;max-width:380px}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}

/* ---- мобилна адаптация ---- */
.menu-btn{display:none}
.side-backdrop{display:none}
@media (max-width:900px){
  .app{display:block}
  .side{
    position:fixed;left:0;top:0;bottom:0;z-index:90;width:272px;
    margin:10px;height:calc(100vh - 20px);
    transform:translateX(-115%);transition:transform .25s ease;
    box-shadow:0 24px 60px -12px rgba(0,0,0,.6);
  }
  .side.open{transform:none}
  .side-backdrop{
    display:block;position:fixed;inset:0;z-index:85;background:rgba(4,8,14,.55);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .2s;
  }
  .side-backdrop.show{opacity:1;pointer-events:auto}
  .menu-btn{
    display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
    background:var(--glass);border:1px solid var(--stroke);color:var(--txt);
    font-size:16px;cursor:pointer;flex:0 0 auto;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
  .main{padding:12px}
  .topbar{flex-wrap:wrap;gap:10px}
  .top-right{margin-left:auto;gap:8px}
  .user .n{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  h1{font-size:20px}
  .row2{grid-template-columns:1fr}
  /* двуколонните детайли и KPI редове стават една колона */
  .main div[style*="grid-template-columns"]{display:grid;grid-template-columns:1fr !important}
  /* широките таблици скролират в картата */
  .card{overflow-x:auto}
  .search{width:100%;min-width:0}
  .main form[hx-get]{flex-wrap:wrap}
  .zoom-ctl{right:10px;bottom:10px}
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:10px}
::-webkit-scrollbar-track{background:transparent}