.system-page{padding:32px 42px 55px;max-width:1450px;margin:auto}.system-page .module-header{margin-bottom:24px}.module-header h1{font:600 29px "Space Grotesk";margin:0 0 7px}.module-header p:last-child{margin:0;color:#71809e;font-size:13px}.instruction-banner{display:flex;gap:13px;align-items:flex-start;padding:17px 20px;background:#edf6ff;border:1px solid #d4e8fa;border-radius:11px;margin-bottom:18px;color:#4c6488}.instruction-banner>span{display:grid;place-items:center;width:25px;height:25px;background:#2375d4;border-radius:50%;color:#fff;font-weight:700;flex:none}.instruction-banner strong{font-size:12px;color:#1f4e8e}.instruction-banner p{font-size:12px;line-height:1.5;margin:5px 0 0}.system-grid{display:grid;grid-template-columns:1.7fr .8fr;gap:15px}.form-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px;box-shadow:var(--shadow);align-self:start}.form-card h2{font:600 16px "Space Grotesk";margin:0 0 18px}.form-card form{display:grid;gap:14px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:17px}.form-grid.one{grid-template-columns:1fr}.form-card label{font-size:11px;color:#596b88;font-weight:700;display:grid;gap:6px}.form-card input,.form-card select{border:1px solid #dfe6f0;border-radius:7px;padding:10px;font-size:12px;color:var(--ink);background:#fff}.flash{margin:15px 42px 0;padding:11px 15px;border-radius:8px;font-size:12px}.flash.success{background:#e6f7ed;color:#237a53}.flash.error{background:#ffeaed;color:#b43a4d}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#10284c,#276cc6);padding:20px}.login-card{width:min(420px,100%);background:#fff;border-radius:18px;padding:36px;box-shadow:0 25px 70px #06152c70}.login-card .brand{color:var(--ink);padding:0 0 28px}.login-card .brand small{color:#71809e}.login-card h1{font:600 29px "Space Grotesk";margin:0 0 6px}.login-copy{color:#71809e;font-size:13px;margin:0 0 24px}.login-card form{display:grid;gap:15px}.login-card label{font-size:11px;font-weight:700;color:#596b88;display:grid;gap:6px}.login-card input{border:1px solid #dfe6f0;border-radius:7px;padding:12px;font-size:12px}.login-hint{display:block;color:#8998ae;font-size:10px;margin-top:16px}.form-error{background:#ffeaed;color:#b43a4d;border-radius:7px;padding:10px;font-size:11px;margin-bottom:15px}.logout{margin-left:auto;color:#9eb0ce;text-decoration:none;font-size:17px}@media(max-width:1050px){.system-page{padding-left:25px;padding-right:25px}.system-grid{grid-template-columns:1fr}}@media(max-width:700px){.system-page{padding:18px 15px}.flash{margin:12px 15px 0}.form-grid{grid-template-columns:1fr}.login-card{padding:25px}.sidebar{position:static}.system-grid{display:block}.system-grid>.form-card{margin-top:15px}}
/* ── Line item rows (PO, GRN, Requisition, Consumption forms) ─────────────── */
.line-item-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;background:#f8fafc;border:1px solid var(--line);border-radius:8px;margin-bottom:6px}
.line-item-row select,.line-item-row input{border:1px solid #dfe6f0;border-radius:6px;padding:7px 8px;font-size:11px;color:var(--ink);background:#fff;flex:1;min-width:100px}
.line-item-row select{flex:2;min-width:180px}
#po-items,.grn-items,#grn-items,#req-items{display:grid;gap:6px;margin-bottom:14px}
.grn-row{flex-wrap:wrap}

/* ── Report tabs ────────────────────────────────────────────────────────── */
.report-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.tab-link{padding:7px 14px;border-radius:8px;font-size:11px;font-weight:600;color:#596b88;text-decoration:none;background:#f1f5fb;border:1px solid var(--line);transition:all .15s}
.tab-link.active,.tab-link:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── Stock status text colors ───────────────────────────────────────────── */
.text-danger{color:#c5293e !important;font-weight:700}
.text-warn{color:#c47a00 !important;font-weight:700}
.text-success{color:#287a52 !important}
.muted{color:#8998ae;font-size:12px}

/* ── Pill variants ─────────────────────────────────────────────────────── */
.pill.danger{background:#ffeaed;color:#b43a4d}
.pill.neutral{background:#f1f5fb;color:#596b88}
.pill.attention{background:#fff4e5;color:#b87300}
.pill.available{background:#e6f7ed;color:#237a53}

/* ── Four-col metric grid ──────────────────────────────────────────────── */
.metric-grid.four-col{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.metric-grid.four-col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.metric-grid.four-col{grid-template-columns:1fr}}

/* ── Inventory item table search ───────────────────────────────────────── */
#item-search{border:1px solid #dfe6f0;border-radius:8px;padding:8px 12px;font-size:12px;width:260px}

/* ── Row action link ───────────────────────────────────────────────────── */
.row-action{color:#71809e;text-decoration:none;font-size:18px;line-height:1;padding:0 4px}
.row-action:hover{color:var(--accent)}

/* ── Demo credentials table on login ──────────────────────────────────── */
.demo-credentials{margin-top:22px;padding:14px;background:#f8fafc;border:1px solid var(--line);border-radius:9px}
.demo-credentials .eyebrow{margin:0 0 10px;font-size:10px;color:#8998ae}
.demo-credentials table{width:100%;border-collapse:collapse;font-size:11px}
.demo-credentials th{text-align:left;color:#596b88;font-weight:700;padding:4px 6px;border-bottom:1px solid var(--line)}
.demo-credentials td{padding:4px 6px;color:var(--ink)}
.demo-credentials td:last-child{font-family:monospace;color:#2375d4}
.site-link{display:block;margin-top:16px;font-size:11px;color:#8998ae;text-align:center;text-decoration:none}
.site-link:hover{color:var(--accent)}

/* ── Login logo ────────────────────────────────────────────────────────── */
.login-logo,.brand-logo{height:48px;width:auto;object-fit:contain;border-radius:4px}
.sidebar .brand{gap:12px;padding-top:18px;padding-bottom:18px}
.sidebar .brand-logo{height:48px;max-width:140px;background:#fff;padding:4px;border-radius:7px;box-shadow:0 3px 10px rgba(0,0,0,.15)}
.dashboard-title{text-align:center;max-width:900px;margin-left:auto!important;margin-right:auto!important;line-height:1.15}
.dashboard-title + .hero-copy{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}

/* ── Flash messages ────────────────────────────────────────────────────── */
.flash{margin:0 0 16px;padding:11px 15px;border-radius:8px;font-size:12px}
.flash.success{background:#e6f7ed;color:#237a53}
.flash.error{background:#ffeaed;color:#b43a4d}

/* ── Textarea in form cards ────────────────────────────────────────────── */
.form-card textarea{border:1px solid #dfe6f0;border-radius:7px;padding:10px;font-size:12px;color:var(--ink);background:#fff;resize:vertical;font-family:inherit;width:100%;box-sizing:border-box}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print{.sidebar,.topbar,.instruction-banner,.report-tabs,.button,.text-button{display:none!important}.main{margin:0;padding:0}.panel{box-shadow:none;border:1px solid #ccc}}

/* ── Responsive additions ──────────────────────────────────────────────── */
@media(max-width:1050px){.system-grid{grid-template-columns:1fr}}
@media(max-width:700px){.line-item-row{flex-direction:column}.line-item-row select,.line-item-row input{width:100%!important}}