/* ============================================================================
   QADIR POLYPROPYLENE ERP — theme.css
   Dark "Ink" left rail, IBM Plex type, industrial teal accent.
   Light and dark both supported via CSS custom properties.
   Serve the three IBM Plex families from /assets/fonts/ on Hostinger
   (no CDN at runtime) and keep the @font-face block at the top of this file.
   Use this stylesheet unchanged on every screen.
   ============================================================================ */

:root{
  --ink-900:#0b1416; --ink-800:#101c1f; --ink-700:#16282c; --ink-600:#1e363b;
  --ink-line:#22393e; --ink-text:#cfe0e0; --ink-dim:#7e9698;
  --bg:#f2f5f4; --surface:#ffffff; --surface-2:#eaefee; --line:#d6dedc; --line-soft:#e6ecea;
  --text:#16211f; --text-2:#4d605d; --text-3:#7b8d8a;
  --accent:#0e7c6b; --accent-soft:#d9eee9; --accent-ink:#0a5b4e;
  --amber:#b4690e; --amber-soft:#faecd6;
  --good:#12715a; --good-soft:#d7eee6;
  --warn:#9a5b06; --warn-soft:#fbead2;
  --crit:#a92d22; --crit-soft:#f9dfdc;
  --info:#1e5f8f; --info-soft:#dde9f3;
  --shadow:0 1px 2px rgba(11,20,22,.06),0 8px 22px -14px rgba(11,20,22,.28);
  --r:9px;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0c1517; --surface:#111e21; --surface-2:#16272b; --line:#22393e; --line-soft:#1a2f33;
  --text:#dfeceb; --text-2:#9ab0ae; --text-3:#71878a;
  --accent:#3fb8a0; --accent-soft:#12312e; --accent-ink:#6fd6be;
  --amber:#d98e34; --amber-soft:#33250f;
  --good:#3fae8c; --good-soft:#0f2b25;
  --warn:#d79232; --warn-soft:#32250f;
  --crit:#e0776a; --crit-soft:#371c19;
  --info:#6aa6d4; --info-soft:#12242f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px -16px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --bg:#0c1517; --surface:#111e21; --surface-2:#16272b; --line:#22393e; --line-soft:#1a2f33;
  --text:#dfeceb; --text-2:#9ab0ae; --text-3:#71878a;
  --accent:#3fb8a0; --accent-soft:#12312e; --accent-ink:#6fd6be;
  --amber:#d98e34; --amber-soft:#33250f;
  --good:#3fae8c; --good-soft:#0f2b25;
  --warn:#d79232; --warn-soft:#32250f;
  --crit:#e0776a; --crit-soft:#371c19;
  --info:#6aa6d4; --info-soft:#12242f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px -16px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;margin:0;text-wrap:balance;letter-spacing:.01em}
.mono,td.num,th.num,.kpi-v{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-ink);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- shell ---------- */
.app{display:flex;height:100%;overflow:hidden}
.rail{width:246px;flex:0 0 246px;background:var(--ink-900);color:var(--ink-text);display:flex;flex-direction:column;border-right:1px solid var(--ink-line);padding-top:env(safe-area-inset-top,0px)}
.brand{display:flex;gap:10px;align-items:center;padding:14px 14px 12px;border-bottom:1px solid var(--ink-line)}
.brand .mark{width:34px;height:34px;flex:0 0 34px;border-radius:8px;background:linear-gradient(145deg,#14a88f,#0b5f52);display:grid;place-items:center;font-family:"IBM Plex Sans Condensed";font-weight:700;color:#04201c;font-size:15px;letter-spacing:-.5px}
.brand b{display:block;font-family:"IBM Plex Sans Condensed";font-size:15px;font-weight:600;color:#eaf6f3;line-height:1.15}
.brand span{display:block;font-size:10.5px;color:var(--ink-dim);letter-spacing:.09em;text-transform:uppercase}
.co{padding:9px 12px;border-bottom:1px solid var(--ink-line);display:flex;flex-direction:column;gap:6px}
.co label{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-dim)}
.co select{width:100%;background:var(--ink-700);border:1px solid var(--ink-line);color:#dceceb;border-radius:6px;padding:6px 8px;font-size:12.5px}
.nav{flex:1;overflow-y:auto;padding:8px 8px 22px;scrollbar-width:thin}
.nav::-webkit-scrollbar{width:7px}.nav::-webkit-scrollbar-thumb{background:#24393d;border-radius:4px}
.grp{margin-bottom:2px}
.grp>button{width:100%;display:flex;align-items:center;gap:9px;background:none;border:0;color:#b6cbca;padding:7px 9px;border-radius:7px;cursor:pointer;text-align:left;font-size:12.8px;font-weight:500}
.grp>button:hover{background:var(--ink-700);color:#eaf6f3}
.grp>button .ic{width:18px;text-align:center;font-size:13px;filter:saturate(.9)}
.grp>button .ch{margin-left:auto;font-size:9px;color:var(--ink-dim);transition:transform .16s}
.grp.open>button{color:#eaf6f3}
.grp.open>button .ch{transform:rotate(90deg)}
.sub{display:none;padding:2px 0 6px 30px}
.grp.open .sub{display:block}
.sub a{display:block;color:#9ab2b1;padding:5.5px 9px;border-radius:6px;font-size:12.3px;border-left:2px solid transparent;margin-left:-2px}
.sub a:hover{background:var(--ink-700);color:#e3f3f0}
.sub a.on{background:var(--ink-600);color:#7fe8cf;border-left-color:#14a88f;font-weight:500}
.railfoot{padding:9px 12px;border-top:1px solid var(--ink-line);font-size:11px;color:var(--ink-dim);display:flex;justify-content:space-between;align-items:center;gap:8px}
.railfoot button{background:var(--ink-700);border:1px solid var(--ink-line);color:#bcd3d1;border-radius:6px;padding:4px 8px;font-size:11px;cursor:pointer}

.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.top{display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--surface);border-bottom:1px solid var(--line);flex:0 0 auto;padding-top:calc(10px + env(safe-area-inset-top,0px))}
.burger{display:none;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;width:34px;height:32px;cursor:pointer;font-size:15px}
.crumb{font-size:11px;color:var(--text-3);letter-spacing:.05em;text-transform:uppercase}
.crumb+h1{font-size:17.5px;font-weight:600}
.top .sp{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:4px 11px;font-size:11.5px;color:var(--text-2);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good)}
.avatar{width:31px;height:31px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-weight:600;font-size:12px;border:1px solid var(--line)}
.body{flex:1;overflow-y:auto;padding:18px;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
.wrap{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:14px}

/* ---------- bits ---------- */
.hd{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.hd p{margin:2px 0 0;color:var(--text-2);font-size:12.8px;max-width:78ch}
.hd .sp{flex:1}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:6.5px 12px;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#ffffff}
.btn.pri:hover{filter:brightness(1.07)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.pri{color:#04201c}}
:root[data-theme="dark"] .btn.pri{color:#04201c}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow)}
.kpi .l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.kpi-v{font-size:21px;font-weight:600;font-family:"IBM Plex Sans Condensed";letter-spacing:0}
.kpi .s{font-size:11.5px;color:var(--text-2)}
.kpi.good{border-left:3px solid var(--good)} .kpi.warn{border-left:3px solid var(--warn)}
.kpi.crit{border-left:3px solid var(--crit)} .kpi.acc{border-left:3px solid var(--accent)}
.kpi.info{border-left:3px solid var(--info)}
.kpi.crit .kpi-v{color:var(--crit)} .kpi.warn .kpi-v{color:var(--warn)} .kpi.good .kpi-v{color:var(--good)}

.cols{display:grid;gap:12px;align-items:start}
.c2{grid-template-columns:1fr 1fr} .c3{grid-template-columns:repeat(3,1fr)}
.c21{grid-template-columns:1.85fr 1fr} .c12{grid-template-columns:1fr 1.85fr}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.card>h3{font-size:13px;font-weight:600;padding:10px 13px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:8px}
.card>h3 .tag{margin-left:auto;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);font-family:"IBM Plex Sans"}
.card .pad{padding:13px}
.note{font-size:11.8px;color:var(--text-2);padding:9px 13px;border-top:1px dashed var(--line);background:var(--surface-2)}

.bar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.bar .f{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3)}
.bar select,.bar input{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-size:12.3px;min-width:0}
.bar .sp{flex:1}

.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12.6px;min-width:520px}
th{text-align:left;font-size:10.3px;letter-spacing:.075em;text-transform:uppercase;color:var(--text-3);font-weight:600;padding:8px 11px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap;position:sticky;top:0}
td{padding:7.5px 11px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:hover td{background:var(--surface-2)}
td.num,th.num{text-align:right}
tfoot td{font-weight:600;background:var(--surface-2);border-top:1px solid var(--line);border-bottom:0;font-family:"IBM Plex Mono";font-variant-numeric:tabular-nums}
tfoot td:first-child{font-family:"IBM Plex Sans"}
.b{display:inline-flex;align-items:center;gap:4px;font-size:10.6px;font-weight:600;padding:2px 7px;border-radius:99px;letter-spacing:.02em;white-space:nowrap}
.b.g{background:var(--good-soft);color:var(--good)} .b.w{background:var(--warn-soft);color:var(--warn)}
.b.c{background:var(--crit-soft);color:var(--crit)} .b.i{background:var(--info-soft);color:var(--info)}
.b.n{background:var(--surface-2);color:var(--text-2);border:1px solid var(--line)}
.b.a{background:var(--accent-soft);color:var(--accent-ink)}
.muted{color:var(--text-3)}
.sm{font-size:11.4px}
.stripe{display:inline-block;width:3px;height:14px;border-radius:2px;vertical-align:-2px;margin-right:6px}

/* meters, lists, steps */
.meter{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line-soft)}
.meter i{display:block;height:100%;background:var(--accent)}
.meter i.w{background:var(--warn)} .meter i.c{background:var(--crit)} .meter i.g{background:var(--good)}
.lst{display:flex;flex-direction:column}
.lst>div{display:flex;gap:10px;align-items:center;padding:8.5px 13px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.lst>div:last-child{border-bottom:0}
.lst .gr{flex:1;min-width:0}
.lst .gr b{display:block;font-weight:600;font-size:12.6px}
.lst .gr span{color:var(--text-3);font-size:11.3px}
.lst .rt{text-align:right;font-family:"IBM Plex Mono";font-variant-numeric:tabular-nums;font-size:12.4px;white-space:nowrap}

.steps{display:flex;gap:0;flex-wrap:wrap;padding:12px 13px;border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
.steps div{display:flex;align-items:center;gap:7px;padding-right:14px;margin-right:12px;border-right:1px solid var(--line);font-size:12px;color:var(--text-3)}
.steps div:last-child{border-right:0}
.steps div i{width:20px;height:20px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:700;font-family:"IBM Plex Mono"}
.steps div.on{color:var(--accent-ink);font-weight:600}
.steps div.on i{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .steps div.on i{color:#04201c}
.steps div.dn i{background:var(--good-soft);border-color:var(--good);color:var(--good)}

.frm{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px;padding:13px}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.fld label{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.fld input,.fld select,.fld textarea{background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:13px;width:100%}
.fld .hint{font-size:10.8px;color:var(--text-3)}
.fld.wide{grid-column:1/-1}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:12.4px;cursor:pointer}
.chips button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.scroll-pick{max-height:132px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.scroll-pick button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-soft);padding:8px 10px;font-size:12.6px;cursor:pointer}
.scroll-pick button:last-child{border-bottom:0}
.scroll-pick button.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.act{display:flex;gap:8px;padding:11px 13px;border-top:1px solid var(--line-soft);background:var(--surface-2);flex-wrap:wrap}

.flow{display:flex;gap:0;overflow-x:auto;padding:4px 0}
.flow .n{flex:0 0 auto;min-width:126px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 11px;position:relative;margin-right:22px}
.flow .n:last-child{margin-right:0}
.flow .n:after{content:"→";position:absolute;right:-19px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:14px}
.flow .n:last-child:after{display:none}
.flow .n b{display:block;font-size:12.3px;font-weight:600}
.flow .n span{font-size:10.6px;color:var(--text-3);display:block}
.flow .n em{font-style:normal;font-family:"IBM Plex Mono";font-size:11.6px;color:var(--accent-ink);font-weight:600}

.alert{display:flex;gap:10px;padding:10px 13px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);font-size:12.5px;align-items:flex-start}
.alert.c{border-color:var(--crit);background:var(--crit-soft);color:var(--crit)}
.alert.w{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.alert.a{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.alert b{font-weight:700}

.modbar{display:flex;gap:6px;flex-wrap:wrap;font-size:11.8px}
.modbar a{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:4px 11px;color:var(--text-2)}
.modbar a:hover{border-color:var(--accent);color:var(--accent-ink)}

svg .gl{stroke:var(--line);stroke-width:1}
svg text{fill:var(--text-3);font-family:"IBM Plex Mono";font-size:9.5px}
svg text.lb{fill:var(--text-2)}

@media (max-width:1020px){ .c2,.c3,.c21,.c12{grid-template-columns:1fr} }
@media (max-width:820px){
  .rail{position:fixed;inset:0 auto 0 0;z-index:40;transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.5)}
  body.nav-open .rail{transform:none}
  .burger{display:block}
  .body{padding:14px 16px}
  .top{padding-left:14px;padding-right:14px}
  .hideS{display:none}
  .scrim{position:fixed;inset:0;background:rgba(4,12,14,.55);z-index:35}
}