* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --ink: #0B1B3D; --muted: #5B6477; --line: #E6E9F0; --bg: #F7F4ED; --card: #ffffff; --danger: #a32d2d; --success: #0f6e56; --warn: #854f0b; }
body { font-family: 'Inter', sans-serif; color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.55; display: flex; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }

.sidebar { width: 230px; background: #0B1B3D; color: #cfcbc2; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; flex-shrink: 0; }
.sidebar-brand { padding: 22px 20px 16px; border-bottom: 1px solid #1c3158; }
.brand-name { color: #fff; font-size: 18px; letter-spacing: .5px; }
.brand-sub { font-size: 12px; color: #F2B826; letter-spacing: 1.2px; text-transform: uppercase; margin-top: 2px; }
.sidebar nav { flex: 1; padding: 14px 10px; overflow-y: auto; }
.sidebar nav a { display: block; padding: 9px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 2px; }
.sidebar nav a:hover { background: #143A7A; color: #fff; }
.sidebar nav a.active { background: #F2B826; color: #061A3D; font-weight: 600; }
.sidebar-foot { padding: 14px 20px; border-top: 1px solid #1c3158; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.sidebar-foot a:hover { color: #fff; }
.linklike { background: none; border: 0; color: inherit; font-size: 13px; padding: 0; text-align: left; }
.linklike:hover { color: #fff; }

.portal-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.portal-topbar { background: var(--card); border-bottom: 1px solid var(--line); padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; }
.portal-topbar h1 { font-size: 20px; font-weight: 500; }
.topbar-user { font-size: 14px; color: var(--muted); }
.portal-content { padding: 24px 28px 48px; }

.flash { margin: 14px 28px 0; padding: 10px 16px; border-radius: 8px; font-size: 14px; }
.auth-wrap .flash { margin: 0 0 14px; }
.flash-success { background: #e1f5ee; color: #085041; }
.flash-error { background: #fcebeb; color: #791f1f; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.kpi .label { font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.kpi .value { font-size: 24px; font-weight: 500; margin-top: 4px; }
.kpi.alert .value { color: var(--warn); }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 20px; }
.panel h2 { font-size: 16px; font-weight: 500; margin-bottom: 14px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-head h2 { margin: 0; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: #fbfaf7; }
.thumb { width: 44px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--bg); }

.pill { display: inline-block; font-size: 12px; padding: 2px 11px; border-radius: 999px; background: var(--bg); white-space: nowrap; }
.p-pending, .p-requested, .p-announced { background: #faeeda; color: #633806; }
.p-live, .p-approved, .p-received, .p-delivered, .p-paid, .p-cod_collected { background: #e1f5ee; color: #085041; }
.p-rejected, .p-suspended, .p-cancelled, .p-refunded { background: #fcebeb; color: #791f1f; }
.p-placed { background: #e6f1fb; color: #0c447c; }
.p-packed { background: #faeeda; color: #633806; }
.p-shipped { background: #eeedfe; color: #3c3489; }
.p-archived, .p-discrepancy { background: #f1efe8; color: #5f5e5a; }

.btn { display: inline-block; background: var(--ink); color: #fff; border: 1px solid var(--ink); padding: 9px 20px; border-radius: 8px; font-size: 14px; }
.btn:hover { background: #143A7A; border-color: #143A7A; }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 7px; }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #791f1f; border-color: #791f1f; }
.btn-success { background: var(--success); border-color: var(--success); }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; background: #fff; }
.field textarea { min-height: 80px; resize: vertical; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .full { grid-column: 1 / -1; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form input, .inline-form select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px; }

.auth-wrap { max-width: 420px; margin: 8vh auto; padding: 0 20px; width: 100%; }
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 30px; }
.auth-card h1 { font-size: 22px; font-weight: 500; margin-bottom: 4px; }
.auth-card .sub { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.auth-wrap.wide { max-width: 720px; }

.variant-rows .vrow { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.variant-rows input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px; width: 100%; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--success); }
.neg { color: var(--danger); }
.img-strip { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.img-strip .imgbox { position: relative; }
.img-strip img { width: 74px; height: 94px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.img-strip .del { position: absolute; top: -6px; right: -6px; background: var(--danger); color: #fff; border: 0; border-radius: 50%; width: 20px; height: 20px; font-size: 11px; line-height: 1; }
.balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }

@media (max-width: 900px) {
  body { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .sidebar nav { display: flex; flex-wrap: wrap; }
  .form-grid { grid-template-columns: 1fr; }
  .portal-content { padding: 16px; }
  table { display: block; overflow-x: auto; }
}