/* WMS Kralex — design system.
   Sursă unică de stil pentru app.html, ui-kit.html și ghid.html.
   Nu duplica aceste reguli în altă parte: copiile diverg. */
  :root{
    --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --font-mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
    --bg:#080c14; --surface:#111a2b; --surface-2:#16223a; --border:#223049;
    --ink:#e7eef9; --ink-2:#aebcd3; --muted:#94a1b3;
    --accent:#3b82f6; --accent-ink:#06101f; --ok:#34d399; --ok-bg:#0c2a22;
    --warn:#fbbf24; --warn-bg:#2a2210; --bad:#f87171; --bad-bg:#2e1414;
    --bar:#05070c; --bar-ink:#d7e0ee; --bar-muted:#6c7c97; --bar-line:#1a2740;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35); --radius:14px;
  }
  @media (prefers-color-scheme:light){:root{
    --bg:#f5f7f9; --surface:#fff; --surface-2:#eef1f5; --border:#e1e6ed;
    --ink:#0f1b2d; --ink-2:#33415c; --muted:#515b6f;
    --accent:#2563eb; --accent-ink:#fff; --ok:#15803d; --ok-bg:#dcfce7;
    --warn:#b45309; --warn-bg:#fdf0d5; --bad:#b91c1c; --bad-bg:#fce4e4;
    --bar:#0f1b2d; --bar-ink:#e7ecf5; --bar-muted:#8798b5; --bar-line:#26344c;
    --shadow:0 1px 2px rgba(15,27,45,.06),0 8px 24px rgba(15,27,45,.05);
  }}
  *{box-sizing:border-box} html,body{margin:0}
  body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
  button{font-family:inherit;cursor:pointer}
  .mono{font-family:var(--font-mono)} .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
  .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}

  /* login */
  #login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
  .loginbox{max-width:420px;width:100%;text-align:center}
  .logo{font-family:var(--font-mono);font-weight:800;font-size:13px;letter-spacing:.2em;color:var(--muted);margin-bottom:14px}
  .loginbox h1{font-size:28px;margin:0 0 6px;letter-spacing:-.02em}
  .loginbox p{color:var(--muted);margin:0 0 24px}
  .btn-primary{background:var(--accent);color:var(--accent-ink);border:none;border-radius:12px;padding:15px 22px;font-size:16px;font-weight:800;width:100%}
  .btn-primary:disabled{opacity:.6}
  .loginerr{margin-top:16px;color:var(--bad);font-size:13px;background:var(--bad-bg);border-radius:10px;padding:12px;display:none;text-align:left;white-space:pre-wrap}

  /* app shell */
  #app{display:none}
  .statusbar{background:var(--bar);color:var(--bar-ink);display:flex;align-items:center;gap:12px;padding:9px 16px;padding-top:max(9px,env(safe-area-inset-top));position:sticky;top:0;z-index:40;border-bottom:1px solid var(--bar-line)}
  .loc-pill{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid var(--bar-line);color:var(--bar-ink);border-radius:10px;padding:6px 11px;font-size:13px;font-weight:600}
  .loc-pill select{background:transparent;border:none;color:var(--bar-ink);font-weight:700;font-family:inherit;font-size:13px;outline:none}
  .loc-pill select option{background:var(--surface);color:var(--ink)}
  .sb-spacer{flex:1}
  .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;border:1px solid var(--bar-line);color:var(--bar-ink);background:rgba(255,255,255,.04)}
  .chip .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
  .sb-btn{background:transparent;border:1px solid var(--bar-line);color:var(--bar-ink);border-radius:9px;padding:6px 10px;font-size:12px;font-weight:600}
  @media(max-width:640px){.sb-user{display:none}}

  .shell{display:flex;min-height:calc(100vh - 52px)}
  .nav{width:220px;flex:none;background:var(--surface);border-right:1px solid var(--border);padding:14px 10px;display:flex;flex-direction:column;gap:2px;position:sticky;top:52px;height:calc(100vh - 52px)}
  .navitem{display:flex;align-items:center;gap:11px;padding:11px;border-radius:10px;color:var(--ink-2);font-weight:600;font-size:14px;border:none;background:none;text-align:left;width:100%}
  .navitem:hover{background:var(--surface-2)} .navitem.active{background:var(--accent);color:var(--accent-ink)}
  .navitem .ic{width:20px;text-align:center}
  .nav-foot{margin-top:auto;padding:10px;color:var(--muted);font-size:11.5px;line-height:1.5}
  .main{flex:1;min-width:0;padding:20px clamp(14px,3vw,32px) 90px;max-width:1100px;margin:0 auto;width:100%}

  .protobar{background:var(--warn-bg);color:var(--warn);border-bottom:1px solid var(--border);font-size:12.5px;padding:7px 16px;font-weight:600}
  .page-head{margin:2px 0 18px}
  .page-head h1{font-size:clamp(20px,2.4vw,26px);margin:2px 0 0;letter-spacing:-.01em}
  .page-head p{margin:4px 0 0;color:var(--muted);font-size:13.5px}
  .grid{display:grid;gap:14px}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
  .pad{padding:16px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:18px}
  .kpi .v{font-family:var(--font-mono);font-size:26px;font-weight:700;line-height:1.1}
  .kpi .l{color:var(--muted);font-size:12px;margin-top:3px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .tile{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;min-height:96px}
  .tile:hover{border-color:var(--accent)} .tile .ic{font-size:20px} .tile h3{margin:0;font-size:15px} .tile .sub{color:var(--muted);font-size:12px}

  .search{display:flex;gap:8px;margin-bottom:14px}
  .search input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:13px 14px;color:var(--ink);font-size:15px;outline:none}
  .search input:focus{border-color:var(--accent)}
  .search button{background:var(--accent);color:var(--accent-ink);border:none;border-radius:11px;padding:0 18px;font-weight:800}

  .row-item{display:flex;align-items:center;gap:13px;padding:13px 15px;border-bottom:1px solid var(--border)}
  .row-item:last-child{border-bottom:none}
  .row-item .lead{width:40px;height:40px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:12px;background:var(--surface-2);color:var(--ink-2)}
  .row-item .body{flex:1;min-width:0} .row-item .body .t{font-weight:700;font-size:14.5px} .row-item .body .s{color:var(--muted);font-size:12px;margin-top:1px}
  .row-item .q{font-family:var(--font-mono);text-align:right;white-space:nowrap} .row-item .q .u{color:var(--muted);font-size:11px}
  .pill{display:inline-flex;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;font-family:var(--font-mono)}
  .pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.neutral{background:var(--surface-2);color:var(--ink-2)}
  .muted{color:var(--muted)} .center{text-align:center;padding:40px 16px;color:var(--muted)}
  .comp{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--border)}
  .comp:last-child{border-bottom:none}
  .comp .mark{width:26px;height:26px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;border:1.5px solid var(--border);color:var(--muted)}
  .comp.done .mark{background:var(--ok);border-color:var(--ok);color:#06101f}
  .comp.active{background:var(--surface-2)} .comp.active .mark{border-color:var(--accent);color:var(--accent)}
  .comp .info{flex:1;min-width:0}
  .comp .info .code{font-weight:700;font-size:14.5px}
  .comp .info .meta{color:var(--muted);font-size:12px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .comp .q{font-family:var(--font-mono);font-size:13.5px;text-align:right;white-space:nowrap} .comp .q .u{color:var(--muted);font-size:11px}
  .spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px;margin-right:8px}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.spinner{animation:none}}
  /* --- mobile UX refinements --- */
  input,select,textarea{font-size:16px!important}                 /* prevent iOS zoom-on-focus */
  button,.tile,.row-item{transition:transform .06s ease}
  button:active,.tile:active,.row-item:active{transform:scale(.98)}
  .btn-primary{min-height:48px}
  .row-item{min-height:50px}
  input:focus-visible,select:focus-visible,button:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  @media(max-width:860px){
    .search button,.btn-primary{min-height:50px}
    .page-head h1{font-size:25px}
    .page-head p{font-size:14px}
    .row-item{min-height:56px}
    .row-item .body .t,.comp .info .code{font-size:15.5px}
    .row-item .body .s,.comp .info .meta{font-size:13px}
    .row-item .q{font-size:15px}
    .tile .sub{font-size:12.5px}
  }
  .tabbar{display:none}
  @media(max-width:860px){
    .nav{display:none} .main{padding:16px 14px 88px}
    .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);border-top:1px solid var(--border);padding:6px 4px max(6px,env(safe-area-inset-bottom))}
    .tabbar button{flex:1;min-width:0;background:none;border:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:700;padding:6px 2px;min-height:56px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .tabbar button .ic{font-size:19px} .tabbar button.active{color:var(--accent)}
  }

  /* ================= componente ================= */

  /* culori semantice de text */
  .t-bad{color:var(--bad)} .t-warn{color:var(--warn)}
  .t-ok{color:var(--ok)} .t-mut{color:var(--muted)}

  /* câmpuri */
  .field{display:block;margin:10px 0 4px}
  .lbl{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:5px}
  .inp{width:100%;min-width:80px;padding:12px 13px;border:1px solid var(--border);
       border-radius:10px;background:var(--surface-2);color:var(--ink);font-size:15px}
  .inp:focus{border-color:var(--accent);outline:none}
  .inp-up{text-transform:uppercase}

  /* butoane */
  .btn-sec{background:var(--surface-2);color:var(--ink);border:1px solid var(--border);
           border-radius:10px;padding:11px 16px;font-weight:700;font-size:14px;min-height:44px}
  .btn-sec:hover{border-color:var(--accent)}
  .btn-sec.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
  .btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--border);
             border-radius:10px;padding:10px 16px;font-weight:700;font-size:14px;min-height:42px}
  .btn-danger{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad);
              border-radius:10px;padding:11px 16px;font-weight:700;font-size:14px;min-height:44px}
  .btn-row{display:flex;gap:8px} .btn-row>*{flex:1}

  /* mesaje de stare */
  .msg{display:flex;gap:9px;align-items:flex-start;border-radius:var(--radius);
       padding:12px 14px;font-size:14px;font-weight:600;border:1px solid transparent;margin-top:10px}
  .msg .ic{flex:none;font-weight:800}
  .msg.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
  .msg.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
  .msg.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
  .msg.info{background:var(--surface-2);color:var(--ink-2);border-color:var(--border)}

  /* stare goală */
  .empty{text-align:center;padding:36px 16px;color:var(--muted)}
  .empty .ic{font-size:28px;display:block;margin-bottom:8px;opacity:.7}
  .empty .t{font-weight:700;color:var(--ink-2);font-size:15px}
  .empty .h{font-size:13px;margin-top:4px}

  /* bară segmentată */
  .seg{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);
       border-radius:11px;padding:4px;margin-bottom:12px}
  .seg button{flex:1;background:none;border:none;border-radius:8px;padding:9px;
              font-weight:700;font-size:13.5px;color:var(--ink-2);min-height:40px}
  .seg button.on{background:var(--accent);color:var(--accent-ink)}

  /* toast — confirmare tranzitorie, montată în afara #main */
  .toast{position:fixed;left:50%;transform:translateX(-50%);
         top:calc(60px + env(safe-area-inset-top));z-index:60;
         background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok);
         border-radius:12px;padding:12px 18px;font-weight:700;font-size:14.5px;
         box-shadow:var(--shadow);max-width:calc(100vw - 28px);animation:toastin .18s ease}
  .toast.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
  .toast.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
  @keyframes toastin{from{opacity:0;transform:translate(-50%,-8px)}
                     to{opacity:1;transform:translate(-50%,0)}}
  @media (prefers-reduced-motion:reduce){.toast{animation:none}}

  /* ținte de atingere mai mari pe ecrane touch (mănuși, frig) */
  @media (pointer:coarse){
    .btn-primary,.btn-sec,.btn-ghost,.btn-danger,.search button{min-height:52px}
    .row-item{min-height:56px}
  }