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

:root{
  --paper:#F6F3E9;
  --panel:#FFFFFF;
  --ink:#20281F;
  --ink-soft:#61695E;
  --line:#E7E1CE;

  --brand:#1F7A52;
  --brand-ink:#0E4029;
  --brand-soft:#E4F1E5;
  --gold:#C08B2E;
  --gold-soft:#F6ECD6;

  /* role accents, overridden per-portal via body[data-role] */
  --role:#1F7A52;
  --role-ink:#0E4029;
  --role-soft:#E4F1E5;

  --ok:#2F9E6B;
  --ok-soft:#E4F5EC;
  --warn:#C98A1F;
  --warn-soft:#FBF1DD;
  --info:#3B7FC4;
  --info-soft:#E7F0FB;
  --bad:#BF4C39;
  --bad-soft:#FBEAE6;

  --radius:16px;
  --radius-lg:26px;
  --shadow: 0 2px 4px rgba(14,64,41,.05), 0 14px 32px -16px rgba(14,64,41,.18);
}

body[data-role="admin"]{ --role:#1F7A52; --role-ink:#0E4029; --role-soft:#E4F1E5; }
body[data-role="operator"]{ --role:#2C5AA0; --role-ink:#1B3A6B; --role-soft:#E7EEF8; }
body[data-role="guru"]{ --role:#7B4B94; --role-ink:#4F2F60; --role-soft:#F0E7F4; }
body[data-role="walimurid"]{ --role:#B8792B; --role-ink:#7A501C; --role-soft:#F7EDDC; }

*{box-sizing:border-box;}
/* safety net: no form control (even ones with no explicit width, like a bare
   <select> or <input> dropped straight into a table cell or toolbar) should
   be able to force its container wider than the space available for it. */
input, select, textarea{max-width:100%;}
table td input{width:100%;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:14.5px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',serif; font-optical-sizing:auto; margin:0; letter-spacing:-.01em; font-weight:600;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}

.app{display:flex; min-height:100vh; gap:16px; padding:16px;}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width:252px; flex:0 0 252px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.09), transparent 55%),
    linear-gradient(185deg, var(--brand-ink) 0%, #08301F 100%);
  color:#F4F1E9;
  display:flex; flex-direction:column;
  border-radius:var(--radius-lg);
  position:sticky; top:16px; height:calc(100vh - 32px); overflow-y:auto;
  box-shadow:0 20px 44px -22px rgba(8,48,31,.55);
}
.sidebar-brand{
  display:flex; align-items:center; gap:11px;
  padding:22px 18px 16px 18px;
  border-bottom:1px solid rgba(244,241,233,.12);
}
.brand-mark{
  width:36px;height:36px;border-radius:14px 14px 14px 4px;
  background:var(--role);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces'; font-weight:700; color:#fff; font-size:18px;
  flex:0 0 auto;
  box-shadow:0 6px 14px -4px rgba(0,0,0,.35);
}
.brand-text{line-height:1.2;}
.brand-text b{display:block; font-family:'Fraunces'; font-size:14.5px; font-weight:600;}
.brand-text span{display:block; font-size:10.5px; color:#C9C4B4; letter-spacing:.03em;}

.portal-chip{
  margin:16px 16px 6px 16px;
  padding:8px 12px;
  border-radius:99px;
  background:var(--role);
  color:#fff;
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  display:flex; align-items:center; gap:7px;
  box-shadow:0 8px 16px -8px rgba(0,0,0,.4);
}
.portal-chip svg{width:14px;height:14px;}

.side-nav{padding:10px 10px 18px 10px; flex:1;}
.side-nav .grp-label{
  font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:#9C978A; padding:16px 10px 6px 10px; font-weight:600;
}
.side-nav a{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:12px;
  text-decoration:none; color:#E7E3D6; font-size:13.3px; font-weight:500;
  margin-bottom:2px; transition:background .15s ease, transform .15s ease;
}
.side-nav a svg{width:16px;height:16px; flex:0 0 auto; opacity:.85;}
.side-nav a:hover{background:rgba(244,241,233,.09); transform:translateX(2px);}
.side-nav a.active{background:var(--role); color:#fff; box-shadow:0 8px 18px -8px rgba(0,0,0,.45);}
.side-nav a.active svg{opacity:1;}

.sidebar-foot{
  padding:16px 18px 20px 18px; border-top:1px solid rgba(244,241,233,.12);
  font-size:11px; color:#9C978A;
}
.sidebar-foot a.switch{
  display:inline-block; margin-top:7px; color:#F4F1E9; text-decoration:none;
  border-bottom:1px solid rgba(244,241,233,.4);
  padding-bottom:1px; cursor:pointer;
}
.sidebar-foot a.switch:hover{border-color:#F4F1E9;}

/* ---------- MAIN ---------- */
.main{flex:1; min-width:0; display:flex; flex-direction:column;}
/* .topbar and .content are flex-items of .main (column direction); without this
   they default to min-width:auto and refuse to shrink below their content's
   min-content size (e.g. a wide table), which pushes the whole page into
   horizontal overflow on narrow screens. */
.topbar, .content{min-width:0;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-lg);
  position:sticky; top:16px; z-index:5; margin-bottom:16px;
  box-shadow:var(--shadow);
}
.topbar .crumb{font-size:12px; color:var(--ink-soft);}
.topbar .crumb b{color:var(--ink); font-weight:600;}
.topbar-right{display:flex; align-items:center; gap:12px;}
.user-chip{
  display:flex; align-items:center; gap:9px;
  padding:6px 12px 6px 6px; border-radius:99px; background:var(--paper); border:1px solid var(--line);
}
.user-chip .av{
  width:26px;height:26px;border-radius:99px; background:var(--role); color:#fff;
  display:flex;align-items:center;justify-content:center; font-size:11px; font-weight:700; font-family:'Fraunces';
}
.user-chip .name{font-size:12.5px; font-weight:600;}
.user-chip .role{font-size:10.5px; color:var(--ink-soft);}
.bell{
  width:34px;height:34px;border-radius:99px;background:var(--paper); border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center; position:relative;
}
.bell svg{width:16px;height:16px;}
.bell .dot{position:absolute; top:7px; right:8px; width:6px;height:6px;border-radius:99px; background:var(--bad);}
.logout-btn{color:var(--bad); border-color:var(--line); border-radius:99px;}
.logout-btn:hover{background:var(--bad-soft); border-color:var(--bad-soft);}

/* ---------- MOBILE MENU TOGGLE (hidden on desktop) ---------- */
.menu-btn{
  display:none; align-items:center; justify-content:center;
  width:36px;height:36px; border-radius:10px; border:1px solid var(--line); background:var(--paper);
  flex:0 0 auto; cursor:pointer; margin-right:4px;
}
.menu-btn svg{width:18px;height:18px;}
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(14,20,15,.45);
  z-index:40; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.app.sidebar-open .sidebar-backdrop{opacity:1; pointer-events:auto;}

.content{padding:0 4px 40px 4px; max-width:1180px;}
.page-head{margin-bottom:22px;}
.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--role); margin-bottom:7px; display:block;
}
.page-head h1{font-size:24px; font-weight:600;}
.page-head p{margin:7px 0 0 0; color:var(--ink-soft); font-size:13.5px; max-width:640px;}

/* ---------- COMPONENTS ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
.stat-grid > *{min-width:0;}
@media(max-width:980px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:17px 17px; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover{transform:translateY(-2px); box-shadow:0 4px 8px rgba(14,64,41,.06), 0 20px 36px -18px rgba(14,64,41,.24);}
.stat-card .lbl{font-size:11.5px; color:var(--ink-soft); font-weight:600; margin-bottom:8px;}
.stat-card .val{font-family:'Fraunces'; font-size:26px; font-weight:600;}
.stat-card .sub{font-size:11.5px; margin-top:6px; color:var(--ink-soft);}
.stat-card .sub.up{color:var(--ok);}
.stat-card .sub.down{color:var(--bad);}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:20px;
}
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--line);
}
.card-head h3{font-size:15px; font-weight:600;}
.card-head .desc{font-size:12px; color:var(--ink-soft); margin-top:2px; font-family:'Inter';}
.card-body{padding:18px;}
.card-body.flush{padding:0;}

.btn{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  padding:8px 14px; border-radius:99px; font-size:12.8px; font-weight:600; cursor:pointer;
  text-decoration:none; transition:background .15s ease, filter .15s ease;
}
.btn svg{width:14px;height:14px;}
.btn:hover{background:var(--paper);}
.btn.primary{background:var(--role); border-color:var(--role); color:#fff;}
.btn.primary:hover{filter:brightness(1.06);}
.btn.sm{padding:5px 12px; font-size:11.8px;}
.btn.ghost{border-color:transparent;}

table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{
  text-align:left; font-size:10.8px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-soft); font-weight:700; padding:11px 18px; border-bottom:1px solid var(--line);
  background:var(--paper);
}
tbody td{padding:12px 18px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#FCFBF8;}
td.num, th.num{text-align:right;}

.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:99px; font-size:11.3px; font-weight:600;
}
.badge.ok{background:var(--ok-soft); color:#1E7A50;}
.badge.warn{background:var(--warn-soft); color:#9A6817;}
.badge.info{background:var(--info-soft); color:#28609C;}
.badge.bad{background:var(--bad-soft); color:#9B3C2C;}
.badge.neutral{background:var(--paper); color:var(--ink-soft); border:1px solid var(--line);}

.avatar-sm{
  width:28px;height:28px;border-radius:99px; background:var(--role-soft); color:var(--role-ink);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; font-family:'Fraunces';
  margin-right:9px; vertical-align:middle;
}
.who{display:flex; align-items:center;}
.who .meta b{display:block; font-size:13px; font-weight:600;}
.who .meta span{display:block; font-size:11.3px; color:var(--ink-soft);}

.grid-2{display:grid; grid-template-columns:1.3fr 1fr; gap:20px;}
.grid-2 > *{min-width:0;}
@media(max-width:980px){.grid-2{grid-template-columns:1fr;}}

.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; font-weight:600; margin-bottom:6px; color:var(--ink);}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:9px 12px;
  font-family:'Inter'; font-size:13px; background:var(--panel); color:var(--ink);
}
.field .hint{font-size:11px; color:var(--ink-soft); margin-top:4px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); padding:0 18px;}
.tabs button{
  background:none; border:none; padding:12px 6px; margin-right:16px; font-size:13px; font-weight:600;
  color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; font-family:'Inter';
}
.tabs button.active{color:var(--role-ink); border-bottom-color:var(--role);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.progress{height:7px; border-radius:99px; background:var(--paper); overflow:hidden; border:1px solid var(--line);}
.progress i{display:block; height:100%; background:var(--role); border-radius:99px;}

.timeline{list-style:none; margin:0; padding:0;}
.timeline li{display:flex; gap:12px; padding:12px 0; border-bottom:1px dashed var(--line);}
.timeline li:last-child{border-bottom:none;}
.timeline .dot2{width:9px;height:9px;border-radius:99px; background:var(--role); margin-top:5px; flex:0 0 auto;}
.timeline .tmeta{font-size:11px; color:var(--ink-soft); margin-top:2px;}

.notice{
  display:flex; gap:10px; padding:13px 15px; border-radius:14px; font-size:12.6px;
  background:var(--role-soft); color:var(--role-ink); border:1px solid transparent; margin-bottom:18px;
}
.notice svg{width:16px;height:16px; flex:0 0 auto; margin-top:1px;}
.notice b{display:block; margin-bottom:2px;}

.pill-toggle{display:inline-flex; background:var(--paper); border:1px solid var(--line); border-radius:99px; padding:3px;}
.pill-toggle button{border:none; background:none; padding:5px 12px; border-radius:99px; font-size:12px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
.pill-toggle button.active{background:var(--role); color:#fff;}

.empty{padding:40px 20px; text-align:center; color:var(--ink-soft);}
.empty svg{width:30px;height:30px; margin-bottom:10px; opacity:.5;}
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.search{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:99px; padding:7px 13px; background:var(--paper);
  min-width:220px;
}
.search svg{width:14px;height:14px; color:var(--ink-soft);}
.search input{border:none; background:none; outline:none; font-size:12.8px; width:100%; font-family:'Inter'; color:var(--ink);}

footer.demo-note{
  max-width:1180px; margin:0 4px 30px 4px; padding:12px 16px; border-radius:12px;
  background:#FCFBF7; border:1px dashed var(--line); font-size:11.3px; color:var(--ink-soft);
}

/* Tables scroll horizontally within their card instead of squeezing columns
   or blowing out page width — applies at every viewport, not just mobile,
   since wide tables (6+ columns) can exceed the content width well above
   the mobile breakpoint too. Covers every wrapper pattern used across the
   pages: .card-body.flush, plain .card-body, and .tab-panel. */
.card-body, .tab-panel{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* =======================================================================
   RESPONSIVE — tablet & mobile
   ======================================================================= */
@media(max-width:980px){
  .field-row{grid-template-columns:1fr;}
}

@media(max-width:860px){
  .app{gap:0; padding:10px;}

  /* sidebar becomes an off-canvas drawer */
  .sidebar{
    position:fixed; top:0; left:0; z-index:50;
    height:100vh; height:100dvh; width:86vw; max-width:300px;
    border-radius:0; top:0;
    transform:translateX(-104%);
    transition:transform .25s ease;
  }
  .app.sidebar-open .sidebar{transform:translateX(0);}
  .sidebar-backdrop{display:block;}

  .menu-btn{display:inline-flex;}

  .main{width:100%;}
  .topbar{
    padding:10px 12px; border-radius:16px; top:10px;
    gap:8px;
  }
  .topbar .crumb{display:none;}
  .topbar-right{gap:8px; margin-left:auto;}
  .user-chip .role{display:none;}
  .logout-btn span{display:none;}
  .logout-btn{padding:8px; width:34px; justify-content:center;}

  .content{padding:0 2px 32px 2px;}
  .page-head h1{font-size:20px;}

  .stat-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .grid-2{grid-template-columns:1fr; gap:14px;}

  /* narrow columns get a floor so text doesn't smash together while scrolling */
  .card-body table, .tab-panel table{min-width:560px;}

  .toolbar{flex-direction:column; align-items:stretch;}
  .toolbar .search{min-width:0; width:100%;}
  /* several pages use inline style="display:flex; gap:8px" rows (e.g. filter
     selects next to a button) with no wrap — force them to wrap so two long
     <select> elements don't force the page wider than the viewport. */
  .toolbar [style*="display:flex"]{flex-wrap:wrap;}
  .toolbar select, .toolbar input{max-width:100%;}

  .tabs{overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;}
  .tabs button{margin-right:12px;}

  footer.demo-note{margin:0 2px 24px 2px;}
}

@media(max-width:520px){
  .stat-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .user-chip .name{max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .page-head p{font-size:12.8px;}
}