/* ============================================================
   TRUST-MBI — Design System v2
   Aligned to MBI Selangor corporate identity (mbiselangor.com):
   deep blue → orange gradient, diagonal radiating-line motif,
   bold uppercase nav, pill-shaped CTAs. Adapted for a working
   case-management app (tables, forms) rather than a marketing
   site — the gradient/pill/diagonal language becomes functional:
   orange marks "active" and "primary action", the diagonal
   motif appears at hero moments (login) rather than everywhere.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* MBI corporate palette */
  --blue-deep:  #0A3D75;
  --blue:       #0F5FAA;
  --blue-mid:   #1B72C4;
  --blue-light: #E8F1FB;
  --orange:      #F7941D;
  --orange-deep: #E67A0A;
  --orange-soft: #FEF0DC;

  --paper:   #F3F6FA;
  --surface: #FFFFFF;
  --ink:     #10243F;
  --ink-soft:#59677E;
  --line:    #DCE4EE;
  --line-soft:#EBF0F6;

  --verified:      #1E8A5F;
  --verified-soft: #E5F3EC;
  --flagged:       #C0392B;
  --flagged-soft:  #FBE7E3;
  --amber:         #B4790E;
  --amber-soft:    #FBF0DC;
  --neutral-soft:  #EAEEF3;

  --font-display: 'Poppins', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  --radius: 10px;
  --radius-sm: 8px;
  --radius-pill: 999px;
}

*{box-sizing:border-box}
body{
  margin:0;font-family:var(--font-body);background:var(--paper);
  color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:#fff}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:4px;
}

/* ---------- Diagonal motif (login hero, top-bar edge) ---------- */
.diagonal-lines{
  background-image:repeating-linear-gradient(
    -55deg,
    rgba(255,255,255,.14) 0px, rgba(255,255,255,.14) 2px,
    transparent 2px, transparent 26px
  );
}

/* ---------- Shell: top bar + sidebar ---------- */
.app-shell{display:flex;flex-direction:column;min-height:100vh}

.topbar{
  background:linear-gradient(100deg, var(--blue-deep) 0%, var(--blue) 55%, var(--blue-mid) 100%);
  color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:64px;flex-shrink:0;
  position:relative;overflow:hidden;
}
.topbar::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:220px;
  background-image:repeating-linear-gradient(
    -55deg,
    rgba(255,255,255,.10) 0px, rgba(255,255,255,.10) 2px,
    transparent 2px, transparent 22px
  );
  pointer-events:none;
}
.topbar .brand-mark{
  display:flex;align-items:center;gap:10px;position:relative;z-index:2;
}
.topbar .brand-mark .cut{
  width:30px;height:30px;border-radius:7px;flex-shrink:0;
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:13px;color:#fff;
  clip-path:polygon(0 0,100% 0,100% 100%,30% 100%);
}
.topbar .brand-mark .word{
  font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:-0.01em;
}
.topbar .brand-mark .tagline{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.72);display:block;margin-top:1px;font-weight:500;
}
.topbar-actions{display:flex;gap:8px;align-items:center;position:relative;z-index:2}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:11.5px;
  letter-spacing:.03em;text-transform:uppercase;
  padding:9px 16px;border-radius:var(--radius-pill);
  border:none;white-space:nowrap;
}
.pill:hover{filter:brightness(1.06)}
.topbar .user-chip{
  display:flex;align-items:center;gap:9px;color:#fff;font-size:12.5px;
}
.topbar .user-chip .name{font-weight:600}
.topbar .user-chip .role{
  font-family:var(--font-mono);font-size:9.5px;color:rgba(255,255,255,.65);
  text-transform:uppercase;letter-spacing:.05em;
}
.topbar .logout-link{color:rgba(255,255,255,.85);font-size:12px;font-weight:600}
.topbar .logout-link:hover{color:#fff}

.nav-toggle{
  display:none;background:rgba(255,255,255,.14);border:none;color:#fff;
  border-radius:var(--radius-sm);padding:8px 12px;font-size:17px;
}

/* ---------- Body: sidebar + content ---------- */
.body-shell{display:flex;flex:1;min-height:0}

.sidebar{
  width:236px;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;flex-shrink:0;
}
.sidebar .nav-scroll{flex:1;overflow-y:auto;padding:16px 12px}
.nav-group{margin-bottom:2px}
.nav-group-label{
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue);padding:14px 10px 6px;opacity:.75;
}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li a{
  display:block;padding:9px 12px;border-radius:var(--radius-pill);
  color:var(--ink-soft);font-size:13.5px;font-weight:500;margin-bottom:2px;
}
.sidebar li a:hover{background:var(--blue-light);color:var(--blue)}
.sidebar li a.active{
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color:#fff;font-weight:700;
}

.content{flex:1;padding:32px 36px;max-width:1180px;overflow-x:hidden}
.page-title{
  font-family:var(--font-display);font-weight:700;font-size:24px;
  letter-spacing:-0.01em;color:var(--ink);margin:0 0 20px;
}

/* ---------- Alerts ---------- */
.alert{
  padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:18px;
  font-size:13.5px;border:1px solid transparent;font-weight:500;
}
.alert-success{background:var(--verified-soft);color:var(--verified);border-color:#c5e2d3}
.alert-error{background:var(--flagged-soft);color:var(--flagged);border-color:#efc6bd}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;margin-bottom:20px;
}
.card h2{
  margin-top:0;font-family:var(--font-display);font-weight:700;
  font-size:16.5px;color:var(--ink);
}

/* ---------- Stat grid ---------- */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.stat{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;
  border-top:3px solid var(--orange);
}
.stat .num{font-family:var(--font-display);font-weight:800;font-size:30px;color:var(--blue-deep);line-height:1}
.stat .label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:8px;
}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line-soft)}
th{
  font-family:var(--font-mono);color:var(--blue);font-weight:600;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--blue-light)}

/* ---------- Reference-code / status pills ----------
   Mirrors the orange CTA-pill language from mbiselangor.com,
   repurposed as a functional marker: rounded, mono-set, tinted
   blue for neutral reference codes so it doesn't compete with
   orange (reserved for primary actions / active nav).           */
.stamp, .badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.01em;padding:4px 12px;border-radius:var(--radius-pill);
  border:1px solid transparent;
}
.stamp{color:var(--blue);background:var(--blue-light);border-color:#cfe0f3}
.badge-match, .badge-active{color:var(--flagged);background:var(--flagged-soft);border-color:#efc6bd}
.badge-nomatch{color:var(--verified);background:var(--verified-soft);border-color:#c5e2d3}
.badge-pending{color:var(--amber);background:var(--amber-soft);border-color:#eeddb2}
.badge-expired, .badge-revoked{color:var(--ink-soft);background:var(--neutral-soft);border-color:var(--line)}

/* ---------- Result box (screening MATCH/NO MATCH) ---------- */
.result-box{
  padding:28px;border-radius:var(--radius);text-align:center;
  margin-top:20px;border:1.5px solid;
}
.result-match{background:var(--flagged-soft);border-color:var(--flagged)}
.result-nomatch{background:var(--verified-soft);border-color:var(--verified)}
.result-box .title{font-family:var(--font-display);font-weight:700;font-size:20px}
.result-match .title{color:var(--flagged)}
.result-nomatch .title{color:var(--verified)}

/* ---------- Forms ---------- */
label{display:block;margin-top:15px;margin-bottom:5px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
input,select,textarea{
  width:100%;padding:10px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:14.5px;font-family:inherit;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
textarea{min-height:96px;resize:vertical}

/* ---------- Buttons ---------- */
button,.btn{
  margin-top:20px;padding:11px 24px;border:none;
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color:#fff;font-weight:700;font-size:13.5px;cursor:pointer;
  display:inline-block;font-family:var(--font-display);
  letter-spacing:.01em;transition:filter .15s ease, transform .04s ease;
}
button:hover,.btn:hover{filter:brightness(1.05)}
button:active,.btn:active{transform:scale(.98)}
.btn-secondary{background:var(--surface);color:var(--blue);border:1.5px solid var(--blue)}
.btn-secondary:hover{background:var(--blue-light);filter:none}
.btn-danger{background:var(--flagged-soft);color:var(--flagged);border:1.5px solid #efc6bd}
.btn-danger:hover{background:#f6d5cd;filter:none}

.overflow-x{overflow-x:auto}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .body-shell{position:relative}
  .sidebar{
    position:fixed;top:64px;left:0;bottom:0;
    transform:translateX(-100%);transition:.2s;z-index:40;width:236px;
  }
  .sidebar.open{transform:translateX(0);box-shadow:0 0 24px rgba(0,0,0,.15)}
  .nav-toggle{display:inline-flex}
  .topbar .user-chip .role{display:none}
  .topbar-actions .pill:not(:last-child){display:none}
  .content{padding:22px 18px}
  .grid-3,.grid-4{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}