/* ── VINUT Carrier Portal ──────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy:#0F1B2E; --navy2:#162544; --orange:#FF4D1A; --orange2:#FF6B35;
  --lime:#C6FF2B; --bg:#F0F2F5; --success:#0EAD69; --warn:#E8A317; --danger:#E5484D;
  --ink:#0F1B2E; --muted:#6B7A90; --line:#E2E8F0; --card:#FFFFFF;
}
html{scroll-behavior:smooth}
body{font-family:'Instrument Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* ── Top bar ─────────────────────────────────────────────────────── */
.topbar{height:56px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:16px;padding:0 20px;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;color:#fff}
.brand-mark{width:34px;height:34px;background:var(--orange);display:grid;place-items:center;border-radius:8px;font-family:'Bricolage Grotesque',sans-serif;font-size:15px;color:#fff}
.brand small{display:block;font-size:10px;letter-spacing:.14em;opacity:.6;font-weight:600;margin-top:-2px}
.topbar-nav{margin-left:28px;display:flex;gap:4px}
.topbar-nav a{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;opacity:.7;color:#fff}
.topbar-nav a.active{background:#ffffff14;opacity:1}
.topbar-nav a[aria-disabled="true"]{pointer-events:none;opacity:.35}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.carrier-pill{background:#ffffff14;border:1px solid #ffffff22;padding:6px 12px;border-radius:999px;font-size:12px;display:flex;align-items:center;gap:8px;color:#fff}
.carrier-pill b{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange2));display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;cursor:pointer;list-style:none;border:0}
.account-menu{position:relative}
.account-menu summary::-webkit-details-marker{display:none}
.account-popover{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;min-width:200px;box-shadow:0 12px 32px rgba(15,27,46,.14);display:flex;flex-direction:column;gap:6px}
.account-popover strong{font-size:13px;color:var(--ink)}
.account-popover span{font-size:12px;color:var(--muted)}
.account-popover button{margin-top:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer}
.account-popover button:hover{background:var(--bg)}

/* ── Shell ───────────────────────────────────────────────────────── */
.portal-shell{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 56px)}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:18px 14px;position:sticky;top:56px;align-self:start;height:calc(100vh - 56px);overflow:auto}
.side-label{font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--muted);margin:18px 0 8px}
.side-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:13px;font-weight:600;color:#334155}
.side-link.active{background:var(--navy);color:#fff}
.side-link .ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:14px;background:#F1F5F9;flex-shrink:0}
.side-link.active .ico{background:var(--orange);color:#fff}
.side-link.muted-link{opacity:.55}
.side-link.muted-link:hover{opacity:1;background:#F8FAFC}
.kpi-mini{margin-top:16px;background:var(--navy);color:#fff;border-radius:16px;padding:14px}
.kpi-mini-label{font-size:10px;letter-spacing:.12em;opacity:.7}
.kpi-mini h2{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;line-height:1;margin-top:4px}
.kpi-mini p{font-size:11px;opacity:.7;margin-top:4px}
.kpi-mini .bar{height:6px;background:#ffffff22;border-radius:999px;margin-top:10px;overflow:hidden}
.kpi-mini .bar i{display:block;height:100%;width:72%;background:var(--lime);border-radius:999px}

.main-content{padding:22px 22px 40px;min-width:0}

/* ── Page head ───────────────────────────────────────────────────── */
.page-head{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;line-height:.95;letter-spacing:-.02em}
.page-head h1 span{color:var(--orange)}
.page-head p{font-size:13px;color:var(--muted);max-width:520px;margin-top:6px}
.page-actions{margin-left:auto;display:flex;gap:8px}

.btn{padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.45;pointer-events:none}
.btn:hover{filter:brightness(.98)}

/* ── KPI row ─────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;right:-10px;top:-10px;width:80px;height:80px;border-radius:50%;background:var(--bg);opacity:.7}
.kpi label{font-size:10px;letter-spacing:.12em;font-weight:700;color:var(--muted)}
.kpi strong{font-family:'Bricolage Grotesque',sans-serif;font-size:26px;display:block;margin-top:4px}
.kpi strong em{font-style:normal;font-size:13px;color:var(--muted);font-family:'Instrument Sans',sans-serif;font-weight:600;margin-left:6px}
.kpi .trend{font-size:11px;font-weight:700;margin-top:6px;display:inline-flex;gap:4px;align-items:center;padding:4px 8px;border-radius:999px}
.trend.up{background:#E6F7ED;color:#0E7A4B}
.trend.warn{background:#FFF4D6;color:#8A6D00}
.kpi.accent{background:var(--navy);color:#fff;border-color:var(--navy)}
.kpi.accent label{color:#9AB0D0}
.kpi.accent strong{color:#fff}
.kpi.accent .trend{background:#ffffff14;color:#C6FF2B}

/* ── Filters ─────────────────────────────────────────────────────── */
.filters{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 14px}
.search input{border:0;background:transparent;outline:none;width:100%;font-size:13px;color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--ink)}
.chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success);display:inline-block;margin-right:6px;vertical-align:middle}
.chip.warn::before{background:var(--warn)}
.chip.danger::before{background:var(--danger)}
.segment{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px}
.segment button,.segment a{padding:7px 12px;border-radius:999px;border:0;background:transparent;font-size:12px;font-weight:700;cursor:pointer;color:var(--ink)}
.segment button.active,.segment a.active{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* ── Table ───────────────────────────────────────────────────────── */
.table-wrap{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.table-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.table-head h3{font-size:13px;letter-spacing:.08em;font-weight:800}
.table-head small{color:var(--muted);font-size:12px}
.table-head .right{margin-left:auto;display:flex;gap:8px}
.table-scroll{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{font-size:10px;letter-spacing:.12em;color:var(--muted);text-align:left;padding:10px 14px;background:#F8FAFC;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:14px;border-bottom:1px solid #EEF2F7;vertical-align:top}
tbody tr:hover{background:#F8FAFF}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.02em}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em;border:1px solid transparent;white-space:nowrap}
.badge.ok{background:#E6F7ED;color:#0E7A4B;border-color:#BFE8CD}
.badge.hold{background:#FFF4D6;color:#7A5D00;border-color:#F5D98A}
.badge.fail{background:#FFE2E2;color:#9B1C1C;border-color:#F5B5B5}
.badge.neutral{background:#EEF2F7;color:#334155;border-color:#E2E8F0}
.cont-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:var(--navy);color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px}
.cont-pill i{width:18px;height:18px;border-radius:50%;background:var(--lime);color:var(--navy);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:10px}
.row-title{font-weight:700}
.row-sub{font-size:12px;color:var(--muted);margin-top:2px}
.evidence{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ev{width:44px;height:44px;border-radius:10px;background:#F1F5F9;border:1px solid var(--line);overflow:hidden;position:relative;display:grid;place-items:center;font-size:10px;color:var(--muted);font-weight:700}
.ev.ok::after{content:"✓";position:absolute;right:3px;bottom:2px;width:16px;height:16px;background:var(--success);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:10px}
.ev.missing{border-style:dashed;background:#FFF7ED}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.icon-btn{width:30px;height:30px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:var(--bg)}
.row-select{width:16px;height:16px;accent-color:var(--navy)}

/* ── Pagination ──────────────────────────────────────────────────── */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);background:#F8FAFC;flex-wrap:wrap}
.pager-info{font-size:12px;color:var(--muted)}
.pager-actions{display:flex;gap:8px}

/* ── States ──────────────────────────────────────────────────────── */
.empty-state{padding:28px 16px;text-align:center;color:var(--muted)}
.empty-state strong{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.alert{padding:10px 14px;border-radius:12px;font-size:13px;border:1px solid transparent}
.alert-error{background:#FFE2E2;border-color:#F5B5B5;color:#7A1A1A}
.alert-success{background:#E6F7ED;border-color:#BFE8CD;color:#0E7A4B}

/* ── Drawer ──────────────────────────────────────────────────────── */
.drawer{display:none;position:fixed;inset:0;z-index:30}
.drawer.open{display:block}
.drawer-bg{position:absolute;inset:0;background:rgba(15,27,46,.45);backdrop-filter:blur(4px)}
.drawer-panel{position:absolute;right:0;top:0;height:100%;width:min(520px,92vw);background:#fff;overflow:auto;border-left:1px solid var(--line);display:flex;flex-direction:column}
.drawer-head{padding:18px 18px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.drawer-head h3{font-family:'Bricolage Grotesque',sans-serif;font-size:20px}
.drawer-body{padding:16px;flex:1}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{background:#F8FAFC;border:1px solid var(--line);border-radius:14px;padding:12px;min-width:0}
.field label{font-size:10px;letter-spacing:.1em;color:var(--muted);font-weight:700}
.field b{font-size:13px;display:block;margin-top:4px;word-break:break-word}
.timeline{margin-top:16px;border-left:2px solid var(--line);padding-left:14px;display:grid;gap:14px}
.tl{position:relative}
.tl::before{content:"";width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--navy);position:absolute;left:-20px;top:4px}
.tl.done::before{background:var(--success);border-color:var(--success)}
.tl.fail::before{background:var(--danger);border-color:var(--danger)}
.tl h4{font-size:13px}
.tl p{font-size:12px;color:var(--muted)}
.qr-block{margin-top:14px;padding:12px;border:1px dashed var(--line);border-radius:14px;background:#F8FAFC;display:grid;gap:8px}
.qr-block h4{font-size:12px;letter-spacing:.08em}
.qr-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── Modal ───────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:40;display:none}
.modal.open{display:block}
.modal-bg{position:absolute;inset:0;background:rgba(15,27,46,.5);backdrop-filter:blur(4px)}
.modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,92vw);background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--line);max-height:90vh;overflow-y:auto}
.modal-head{padding:18px 18px 0}
.modal-head h3{font-family:'Bricolage Grotesque',sans-serif;font-size:18px}
.modal-body{padding:16px;display:grid;gap:10px}
.modal-foot{padding:12px 16px;background:#F8FAFC;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.form-field{display:grid;gap:6px}
.form-field label{font-size:12px;font-weight:700;color:var(--ink)}
.form-field input,.form-field select{padding:10px 12px;border-radius:12px;border:1px solid var(--line);font-size:13px;background:#fff;color:var(--ink);width:100%}
.form-field input:focus,.form-field select:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.form-alert{padding:10px 12px;border-radius:12px;background:#FFE2E2;border:1px solid #F5B5B5;color:#7A1A1A;font-size:13px}

/* ── Login ───────────────────────────────────────────────────────── */
.login-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(900px 500px at 10% 0%, #FFECD2 0%, transparent 60%), radial-gradient(700px 500px at 100% 100%, #D6E4FF 0%, transparent 60%), var(--bg)}
.login-shell{width:min(1040px,100%);display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch}
.login-intro{background:var(--navy);color:#fff;border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.login-intro::after{content:"";position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(255,77,26,.45), transparent 65%)}
.login-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em}
.login-brand small{display:block;font-size:10px;letter-spacing:.14em;opacity:.6;margin-top:-2px}
.login-copy h1{font-family:'Bricolage Grotesque',sans-serif;font-size:34px;line-height:.95;letter-spacing:-.02em}
.login-copy h1 em{font-style:normal;color:var(--lime)}
.login-copy p{font-size:13px;opacity:.85;margin-top:10px;max-width:36ch}
.login-route{height:64px;border-radius:999px;background:#ffffff12;border:1px solid #ffffff18;display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.login-route span{width:14px;height:14px;border-radius:50%;background:var(--lime);display:block}
.login-route i{flex:1;height:2px;background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.06));margin:0 8px}
.login-route b{width:36px;height:36px;border-radius:10px;background:var(--orange);display:grid;place-items:center;font-size:14px}
.login-note{font-size:11px;opacity:.6}
.login-panel{display:grid;place-items:center}
.login-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;width:min(420px,100%);display:grid;gap:14px;box-shadow:0 16px 40px rgba(15,27,46,.08)}
.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--muted)}
.login-card h2{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;line-height:1}
.login-subtitle{font-size:13px;color:var(--muted)}
.login-submit{width:100%;justify-content:center;padding-block:12px}
.login-help{font-size:11px;color:var(--muted);text-align:center}

/* ── Toast ───────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(12px);background:var(--navy);color:#fff;padding:10px 14px;border-radius:999px;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:min(92vw,560px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Responsive ──────────────────────────────────────────────────── */
@media(max-width:980px){
  .portal-shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .kpis{grid-template-columns:1fr 1fr}
  .topbar-nav{display:none}
  .login-shell{grid-template-columns:1fr}
  .login-intro{display:none}
}
@media(max-width:560px){
  .kpis{grid-template-columns:1fr}
  .page-head h1{font-size:26px}
  table{font-size:12px}
  .login-copy h1{font-size:28px}
  .login-body{padding:0;background:var(--bg)}
  .login-card{border:none;box-shadow:none;border-radius:0;padding:32px 24px;min-height:100vh;align-content:center}
}