/* EnergyIntel Group — Supplier Portal
   Brand: red #e9322a, grey-blue #3d5362. Sofia Sans/Sofia Pro with Calibri/Trebuchet fallback. */
:root{
  --red:#e9322a; --red-dk:#c4261f; --slate:#3d5362; --slate-dk:#2b3d49; --slate-lt:#6b8394;
  --ink:#1d2830; --muted:#6d7c87; --line:#dde4e9; --bg:#f4f6f8; --card:#fff;
  --ok:#1e7a52; --ok-bg:#e7f4ee; --warn:#8a5a00; --warn-bg:#fdf3e0;
  --err:#b3261e; --err-bg:#fdecea; --info:#2b5b80; --info-bg:#e9f1f7;
  --radius:8px; --shadow:0 1px 2px rgba(29,40,48,.06),0 2px 8px rgba(29,40,48,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Sofia Sans","Sofia Pro",Calibri,"Trebuchet MS",system-ui,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--slate);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em;font-weight:600;line-height:1.25;letter-spacing:-.01em}
h1{font-size:1.6rem} h2{font-size:1.15rem} h3{font-size:1rem}
p{margin:0 0 .8em}
small,.small{font-size:.82rem}
.muted{color:var(--muted)}
.mono{font-family:"SF Mono",Consolas,"Liberation Mono",monospace;font-size:.85em}

/* ---- shell ---- */
header.top{background:var(--slate);color:#fff;padding:0 24px;
  display:flex;align-items:center;gap:20px;height:58px;position:sticky;top:0;z-index:20}
header.top .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;font-size:1.02rem}
header.top .mark{width:22px;height:22px;border-radius:4px;background:var(--red);
  display:grid;place-items:center;color:#fff;font-size:.72rem;font-weight:800}
header.top .brand span.sub{font-weight:400;opacity:.72;font-size:.9rem;border-left:1px solid rgba(255,255,255,.28);padding-left:10px;margin-left:2px}
header.top nav{display:flex;gap:2px;margin-left:auto;align-items:center}
header.top nav a{color:rgba(255,255,255,.86);padding:7px 12px;border-radius:6px;font-size:.9rem}
header.top nav a:hover{background:rgba(255,255,255,.1);text-decoration:none;color:#fff}
header.top nav a.on{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
header.top .who{font-size:.82rem;opacity:.8;margin-left:8px;padding-left:14px;border-left:1px solid rgba(255,255,255,.22)}
.wrap{max-width:1180px;margin:0 auto;padding:26px 24px 70px}
.wrap.narrow{max-width:720px}

/* ---- cards ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;margin-bottom:18px}
.card > h2:first-child, .card > h3:first-child{margin-top:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.card-head h2{margin:0}
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* ---- stat tiles ---- */
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px;box-shadow:var(--shadow)}
.tile .k{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.tile .v{font-size:1.75rem;font-weight:700;letter-spacing:-.025em;margin-top:3px;color:var(--slate-dk)}
.tile .v.alert{color:var(--red)}
.tile .n{font-size:.8rem;color:var(--muted);margin-top:2px}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:#fafcfd}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto;margin:0 -20px -20px;padding:0 20px}
tr.flagged td{background:var(--warn-bg)}
tr.flagged:hover td{background:#fbeed3}

/* ---- badges ---- */
.badge{display:inline-block;padding:2px 9px;border-radius:11px;font-size:.75rem;font-weight:600;white-space:nowrap}
.st-submitted{background:var(--info-bg);color:var(--info)}
.st-review{background:#ede8f7;color:#553b8e}
.st-query{background:var(--warn-bg);color:var(--warn)}
.st-approved{background:var(--ok-bg);color:var(--ok)}
.st-rejected{background:var(--err-bg);color:var(--err)}
.st-paid{background:#e3ecef;color:var(--slate-dk)}
.badge.ent{background:#eef2f5;color:var(--slate-dk);font-family:inherit;letter-spacing:.02em}
.badge.hold{background:var(--err-bg);color:var(--err)}

/* ---- forms ---- */
label{display:block;font-size:.8rem;font-weight:600;color:var(--slate-dk);margin-bottom:4px}
label .req{color:var(--red)}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=number],
input[type=tel],select,textarea{
  width:100%;padding:8px 10px;border:1px solid #c8d3da;border-radius:6px;font:inherit;
  font-size:.92rem;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--slate-lt);
  box-shadow:0 0 0 3px rgba(61,83,98,.13)}
input[type=file]{width:100%;padding:9px;border:1px dashed #b6c4cd;border-radius:6px;background:#fbfcfd;font-size:.88rem}
textarea{min-height:80px;resize:vertical}
.field{margin-bottom:14px}
.row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.hint{font-size:.78rem;color:var(--muted);margin-top:4px}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 16px}
legend{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:0 6px}

/* ---- buttons ---- */
.btn{display:inline-block;padding:8px 16px;border-radius:6px;border:1px solid transparent;
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;background:var(--slate);color:#fff}
.btn:hover{background:var(--slate-dk);text-decoration:none;color:#fff}
.btn.primary{background:var(--red)} .btn.primary:hover{background:var(--red-dk)}
.btn.ghost{background:#fff;border-color:#c8d3da;color:var(--slate-dk)}
.btn.ghost:hover{background:#f2f6f8}
.btn.sm{padding:5px 11px;font-size:.82rem}
.btn.ok{background:var(--ok)} .btn.ok:hover{background:#16603f}
.btn.danger{background:var(--err)} .btn.danger:hover{background:#8f1e17}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---- alerts ---- */
.alert{padding:12px 15px;border-radius:var(--radius);margin-bottom:16px;font-size:.9rem;border:1px solid}
.alert.ok{background:var(--ok-bg);border-color:#bfe0ce;color:#155e3f}
.alert.err{background:var(--err-bg);border-color:#f2c4bf;color:#8f1e17}
.alert.warn{background:var(--warn-bg);border-color:#f0dcae;color:#6f4700}
.alert.info{background:var(--info-bg);border-color:#c6dcec;color:#1f4762}
.alert ul{margin:6px 0 0;padding-left:20px}
.alert strong{font-weight:700}

/* exceptions block — always top of output, per finance standing rules */
.exceptions{border-left:4px solid var(--red);background:var(--err-bg);
  border-radius:var(--radius);padding:14px 18px;margin-bottom:18px}
.exceptions h3{color:#8f1e17;margin:0 0 8px;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}
.exceptions ul{margin:0;padding-left:18px;font-size:.88rem;color:#7a2019}
.exceptions li{margin-bottom:4px}

/* ---- login ---- */
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(160deg,var(--slate-dk),var(--slate) 55%,#4d6878)}
.login-box{width:100%;max-width:420px;background:#fff;border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);padding:32px}
.login-box .lg{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.login-box .mark{width:30px;height:30px;border-radius:6px;background:var(--red);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:.85rem}
.login-box h1{font-size:1.22rem;margin:0}
.login-box .sub{color:var(--muted);font-size:.88rem;margin-bottom:22px}
.login-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}

/* ---- misc ---- */
.pill-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.pill-tabs a{padding:6px 13px;border-radius:20px;background:#fff;border:1px solid var(--line);
  font-size:.85rem;font-weight:600;color:var(--slate-dk)}
.pill-tabs a:hover{text-decoration:none;background:#eef2f5}
.pill-tabs a.on{background:var(--slate);color:#fff;border-color:var(--slate)}
.pill-tabs a .ct{opacity:.65;font-weight:400;margin-left:3px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:7px 16px;font-size:.9rem}
.kv dt{color:var(--muted);font-weight:600;font-size:.82rem}
.kv dd{margin:0}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .big{font-size:1.6rem;margin-bottom:6px;opacity:.4}
.notice-bar{background:#fff6d9;border-bottom:1px solid #eeddaa;padding:9px 24px;font-size:.87rem;color:#6f4700;text-align:center}
.timeline{list-style:none;margin:0;padding:0;font-size:.86rem}
.timeline li{padding:8px 0 8px 18px;border-left:2px solid var(--line);position:relative;margin-left:4px}
.timeline li::before{content:"";position:absolute;left:-5px;top:14px;width:8px;height:8px;
  border-radius:50%;background:var(--slate-lt)}
.timeline li .t{color:var(--muted);font-size:.78rem}
footer.foot{text-align:center;color:var(--muted);font-size:.78rem;padding:20px;border-top:1px solid var(--line);margin-top:30px}
.checklist{list-style:none;padding:0;margin:0;font-size:.88rem}
.checklist li{padding:5px 0 5px 24px;position:relative}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
@media print{header.top,.btns,.pill-tabs{display:none}body{background:#fff}.card{box-shadow:none}}

/* Header identity doubles as the link to your own password. */
header.top a.who{opacity:.85}
header.top a.who:hover{opacity:1;background:rgba(255,255,255,.1);text-decoration:none;color:#fff}
/* Compact selects inside a table row. */
table form select{padding:5px 8px;font-size:.82rem;min-width:8.6rem}

/* Outbox badge on the nav, and job status chips. */
.nav-badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;text-align:center;line-height:18px}
details.preview summary{cursor:pointer;color:var(--slate)}
details.preview pre{white-space:pre-wrap;background:#eef2f5;padding:10px;border-radius:6px;font-size:.8rem;margin:8px 0 0}