:root{
  --paper:#EAEEEC; --card:#FFFFFF; --tint:#F2F6F4;
  --ink:#131F1C; --ink2:#5D6D68; --line:#D2DAD7;
  --green:#0F6B54; --green-soft:#E0EDE8;
  --amber:#9E6A0C; --amber-soft:#F6EEDC;
  --red:#9E2B20;  --red-soft:#F7E4E1;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}

/* каркас */
.shell{display:flex; min-height:100vh}
.side{width:212px; flex:0 0 212px; background:var(--card); border-right:1px solid var(--line);
      padding:20px 0; position:sticky; top:0; height:100vh; display:flex; flex-direction:column}
.brand{padding:0 20px 18px; border-bottom:1px solid var(--line); margin-bottom:14px}
.brand b{display:block; font-size:16px; letter-spacing:-.01em}
.brand span{display:block; font-size:11px; color:var(--ink2); text-transform:uppercase; letter-spacing:.09em; margin-top:3px}
.nav{display:flex; flex-direction:column; gap:2px; padding:0 10px}
.nav button{all:unset; cursor:pointer; padding:9px 12px; border-radius:7px; font-size:14px; color:var(--ink2);
            display:flex; justify-content:space-between; align-items:center}
.nav button:hover{background:var(--tint); color:var(--ink)}
.nav button[aria-current="true"]{background:var(--green-soft); color:var(--green); font-weight:600}
.nav button:focus-visible{outline:2px solid var(--green); outline-offset:1px}
.side-foot{margin-top:auto; padding:14px 16px 0; border-top:1px solid var(--line);
           display:flex; align-items:center; justify-content:space-between; gap:8px}
.badge{font-family:var(--mono); font-size:11px; background:var(--red); color:#fff; border-radius:20px; padding:1px 7px; font-weight:600}
.main{flex:1; min-width:0; padding:26px 30px 90px}
h1{font-size:22px; margin:0 0 2px; letter-spacing:-.02em}
.sub{color:var(--ink2); font-size:13px; margin:0 0 20px}

/* карточки и таблицы */
.card{background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.card + .card{margin-top:16px}
.card-h{padding:13px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.card-h h2{font-size:14px; margin:0; letter-spacing:.02em}
table{width:100%; border-collapse:collapse}
th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink2);
   font-weight:600; padding:9px 16px; border-bottom:1px solid var(--line); background:var(--tint)}
td{padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:none}
.r{text-align:right}
.drug-row{cursor:pointer}
.drug-row:hover{background:var(--tint)}
.dname{font-weight:600}
.dmeta{font-size:12px; color:var(--ink2)}
.batch-wrap td{padding:0; background:var(--tint)}
.btable{width:100%}
.btable td{border-bottom:1px dotted var(--line); padding:9px 16px 9px 34px; font-size:13px}
.btable tr:last-child td{border-bottom:none}

/* остаток срока годности */
.life{display:block; width:74px; height:5px; border-radius:3px; background:var(--line); overflow:hidden}
.life i{display:block; height:100%; border-radius:3px}
.life.ok i{background:var(--green)} .life.warn i{background:var(--amber)} .life.bad i{background:var(--red)}
.tag{display:inline-block; font-family:var(--mono); font-size:11px; font-weight:600; padding:2px 7px; border-radius:5px; white-space:nowrap}
.tag.ok{background:var(--green-soft); color:var(--green)}
.tag.warn{background:var(--amber-soft); color:var(--amber)}
.tag.bad{background:var(--red-soft); color:var(--red)}
.tag.zero{background:var(--tint); color:var(--ink2)}

/* формы */
.form{padding:16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:13px}
.f{display:flex; flex-direction:column; gap:5px}
.f.wide{grid-column:1/-1}
label{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink2); font-weight:600}
input,select{font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--ink); width:100%}
input:focus,select:focus{outline:2px solid var(--green); outline-offset:-1px; border-color:var(--green)}
input[type=number],input[type=date]{font-family:var(--mono)}
.btn{display:inline-block; cursor:pointer; background:var(--green); color:#fff; padding:9px 18px; border:none;
     border-radius:7px; font-family:inherit; font-size:14px; font-weight:600; text-align:center; text-decoration:none}
.btn:hover{background:#0B5844}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--ink2); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--tint); color:var(--ink)}
.btn.mini{padding:4px 11px; font-size:12px}
.btn.danger{background:var(--red)} .btn.danger:hover{background:#832018}
.hint{grid-column:1/-1; font-size:12.5px; color:var(--ink2); margin:0}
.preview{grid-column:1/-1; background:var(--tint); border:1px dashed var(--line); border-radius:8px; padding:11px 13px; font-size:13px}
.preview b{font-family:var(--mono)}
.preview.err{background:var(--red-soft); border-color:var(--red); color:var(--red)}

/* показатели */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:1px; background:var(--line)}
.kpi{background:var(--card); padding:15px 16px}
.kpi span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink2); font-weight:600}
.kpi b{display:block; font-family:var(--mono); font-size:21px; font-weight:600; margin-top:5px; letter-spacing:-.03em}
.kpi.neg b{color:var(--red)} .kpi.pos b{color:var(--green)}
.seg{display:flex; gap:4px; background:var(--tint); padding:3px; border-radius:8px}
.seg button{all:unset; cursor:pointer; padding:5px 11px; border-radius:6px; font-size:12.5px; color:var(--ink2)}
.seg button[aria-pressed="true"]{background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.07)}
.empty{padding:34px 16px; text-align:center; color:var(--ink2); font-size:13.5px}
.search{max-width:260px}

/* уведомления */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); background:var(--ink); color:#fff;
       padding:11px 18px; border-radius:9px; font-size:14px; opacity:0; pointer-events:none; transition:.22s; z-index:50; max-width:90vw}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.bad{background:var(--red)}

/* вход */
.login-page{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px}
.login-box{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px; width:320px; max-width:100%;
           display:flex; flex-direction:column; gap:14px}
.login-box .brand{border-bottom:1px solid var(--line); padding:0 0 14px; margin:0}
.login-err{margin:0; background:var(--red-soft); color:var(--red); padding:9px 12px; border-radius:7px; font-size:13px}

/* мобильный */
.tabbar{display:none}
@media (max-width:760px){
  .side{display:none}
  .main{padding:18px 14px 84px}
  th:nth-child(4),td.hide-m,th.hide-m{display:none}
  .tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; background:var(--card);
          border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); z-index:40}
  .tabbar button{all:unset; cursor:pointer; flex:1; text-align:center; font-size:11.5px; color:var(--ink2); padding:7px 2px; border-radius:7px}
  .tabbar button[aria-current="true"]{color:var(--green); font-weight:700; background:var(--green-soft)}
  .kpi b{font-size:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- сводка: структура стоимости остатка ---- */
.kpi em{display:block; font-style:normal; margin-top:3px; font-size:11.5px}
.split{padding:16px; border-top:1px solid var(--line)}
.split-bar{display:flex; height:11px; border-radius:6px; overflow:hidden; background:var(--line)}
.split-bar i{display:block; height:100%}
.split-bar i.ok{background:var(--green)}
.split-bar i.warn{background:var(--amber)}
.split-bar i.bad{background:var(--red)}
.split-legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:12.5px; color:var(--ink2)}
.split-legend span{display:flex; align-items:center; gap:6px}
.split-legend i{width:9px; height:9px; border-radius:3px; flex:0 0 auto}
.split-legend i.ok{background:var(--green)}
.split-legend i.warn{background:var(--amber)}
.split-legend i.bad{background:var(--red)}

/* ---- предупреждения ---- */
.alerts{padding:12px 16px; display:flex; flex-direction:column; gap:8px}
.alert{background:var(--tint); border-left:3px solid var(--line); border-radius:0 7px 7px 0; padding:9px 13px; font-size:13.5px}
.alert b{font-family:var(--mono)}
.alert.warn{background:var(--amber-soft); border-left-color:var(--amber); color:var(--amber)}
.alert.bad{background:var(--red-soft); border-left-color:var(--red); color:var(--red)}

/* ---- формы правки внутри таблицы ---- */
.edit{padding:14px 16px; background:var(--card); border:1px solid var(--green); border-radius:9px; margin:8px 0}
.edit-t{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--green); font-weight:700; margin-bottom:11px}
.edit-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px}
.edit .hint{margin:11px 0 0}
.edit-act{display:flex; gap:8px; margin-top:13px}
.edit-row{padding:9px 16px!important; background:var(--card)}
.nowrap{white-space:nowrap}
.nowrap .btn + .btn{margin-left:6px}

/* отрицательная наценка — продаём дешевле закупки */
.dmeta.loss{color:var(--red); font-weight:600}