*{box-sizing:border-box}
:root{--ink:#1b2733;--navy:#134e6f;--navy2:#1d6d99;--bg:#eef2f5;--line:#dde5eb;--mut:#5d6f7e}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}

/* ---------- navigation ---------- */
nav{background:var(--navy);color:#fff;padding:.45rem .8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;position:sticky;top:0;z-index:50;box-shadow:0 1px 4px rgba(10,35,55,.25)}
nav .brand a{color:#fff;font-weight:700;text-decoration:none;font-size:1rem;white-space:nowrap}
nav .links{display:flex;flex-wrap:wrap;gap:.1rem;align-items:center;flex:1}
nav a{color:#d3e8f3;text-decoration:none;padding:.4rem .55rem;border-radius:7px;font-size:.87rem;white-space:nowrap}
nav a:hover{background:var(--navy2);color:#fff}
nav a.active{background:#0d3b55;color:#fff;font-weight:600}
nav .badge b{background:#e5533d;border-radius:9px;padding:0 .42em;font-size:.78rem}
nav .who{color:#9fc9dd;font-size:.78rem;margin-left:auto;padding:0 .3rem}
details.menu{position:relative}
details.menu summary{list-style:none;cursor:pointer;color:#d3e8f3;padding:.4rem .55rem;border-radius:7px;font-size:.87rem;user-select:none;white-space:nowrap}
details.menu summary::-webkit-details-marker{display:none}
details.menu summary::after{content:" ▾";font-size:.7em}
details.menu[open] summary,details.menu summary:hover{background:var(--navy2);color:#fff}
details.menu .dd{position:absolute;top:110%;left:0;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 22px rgba(10,35,55,.22);padding:.3rem;display:flex;flex-direction:column;min-width:180px;z-index:60}
details.menu .dd a{color:var(--ink);padding:.5rem .7rem;border-radius:6px;font-size:.9rem}
details.menu .dd a:hover{background:#eaf2f8;color:var(--navy)}

/* ---------- layout ---------- */
main{max-width:1100px;margin:0 auto;padding:1rem}
h1{font-size:1.3rem;margin:.3rem 0 .9rem}
h1 .muted{font-weight:400}
h2{font-size:1rem;margin:1.1rem 0 .45rem;color:var(--navy)}
.flash{padding:.6rem .85rem;border-radius:9px;margin-bottom:.6rem;font-size:.92rem}
.flash.ok{background:#e2f4e6;color:#14602a;border:1px solid #9fd8ae}
.flash.error{background:#fdeae7;color:#8f2011;border:1px solid #f0b4aa}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;margin-bottom:1rem;box-shadow:0 1px 3px rgba(16,42,67,.06)}
.card h2:first-child{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;align-items:start}

/* ---------- forms ---------- */
form.entry label{display:block;font-size:.78rem;color:#465866;margin:.55rem 0 .18rem;font-weight:600;letter-spacing:.01em}
input,select,textarea{width:100%;padding:.55rem .65rem;border:1px solid #c3ced8;border-radius:8px;font-size:.97rem;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid #2e86c1;border-color:#2e86c1}
button,.btn{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:8px;padding:.6rem 1.1rem;font-size:.95rem;cursor:pointer;margin-top:.7rem;text-decoration:none;line-height:1.2}
button:hover,.btn:hover{background:var(--navy2)}
button.small,.btn.small{padding:.32rem .7rem;font-size:.8rem;margin:.15rem .05rem}
button.danger{background:#b3392a}button.danger:hover{background:#d24734}
button.ok{background:#1e7e3e}button.ok:hover{background:#249a4c}
.inline-form{display:inline}
.rtabs{display:flex;flex-wrap:wrap;gap:.15rem}
.rtabs .btn{background:#fff;color:var(--navy);border:1px solid var(--line);margin-top:0}
.rtabs .btn:hover{background:#eaf2f8}
.rtabs .btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.87rem;background:#fff}
th,td{padding:.48rem .6rem;border-bottom:1px solid #e9eff4;text-align:left;white-space:nowrap}
th{background:#f0f5f9;color:#33475b;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
tr:hover td{background:#f7fafc}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;border-radius:8px}

/* ---------- KPI cards ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:.7rem;margin-bottom:1rem}
.kpi{background:#fff;border:1px solid var(--line);border-radius:11px;padding:.7rem .9rem;box-shadow:0 1px 3px rgba(16,42,67,.05)}
.kpi .v{font-size:1.25rem;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.kpi .l{font-size:.7rem;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin-top:.1rem}
.kpi.neg .v{color:#b3392a}.kpi.pos .v{color:#1e7e3e}

/* ---------- tags ---------- */
.tag{display:inline-block;padding:.12rem .55rem;border-radius:20px;font-size:.7rem;font-weight:700;vertical-align:middle}
.tag.pending{background:#fff3cd;color:#7a5c00}.tag.approved{background:#e2f4e6;color:#14602a}
.tag.rejected,.tag.warn{background:#fdeae7;color:#8f2011}
.tag.Open{background:#dbeafe;color:#1e4ed8}.tag.Partially{background:#fff3cd;color:#7a5c00}.tag.Closed{background:#e5e7eb;color:#374151}
.muted{color:var(--mut);font-size:.82rem}
.login-box{max-width:370px;margin:8vh auto}

/* ---------- visual twin (process flow) ---------- */
.flow{display:flex;flex-direction:column;gap:.15rem}
.band{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.band.single{grid-template-columns:minmax(220px,520px);justify-content:center}
.node{border-radius:11px;padding:.6rem .75rem;color:#fff;text-decoration:none;display:block;box-shadow:0 2px 5px rgba(10,35,55,.18);transition:transform .08s}
a.node:hover{transform:translateY(-2px);filter:brightness(1.08)}
.node .t{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;opacity:.85}
.node .v{font-size:1.15rem;font-weight:700;margin:.1rem 0;font-variant-numeric:tabular-nums}
.node .s{font-size:.72rem;opacity:.85}
.n-main{background:var(--navy)}
.n-proc{background:#7d3c98}
.n-interim{background:#b9770e}
.n-sale{background:#1e7e3e}
.n-waste{background:#922b21}
.n-pack{background:#2471a3}
.n-side{background:#5d6d7e}
.arrow{text-align:center;color:#7d93a5;font-size:.95rem;line-height:1.4;padding:.05rem 0}
.legend{display:flex;flex-wrap:wrap;gap:.8rem;font-size:.75rem;color:var(--mut);margin-top:.8rem}
.legend i{display:inline-block;width:.85em;height:.85em;border-radius:3px;margin-right:.3em;vertical-align:-.08em}

@media (max-width:640px){
  main{padding:.6rem}
  input,select,button{font-size:1.02rem;padding:.68rem}
  th,td{padding:.4rem .45rem;font-size:.8rem}
  nav .who{display:none}
  details.menu .dd{position:fixed;left:.5rem;right:.5rem;min-width:0}
  .band{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
}