:root{
  --bg:linear-gradient(135deg,#f8fafc 0%,#fdf2f8 35%,#f0f9ff 100%);
  --panel:#ffffff;
  --panel-grad:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
  --border:rgba(15,23,42,.12);
  --text:#0f172a;
  --muted:#64748b;
  --primary:#2563eb;
  --primary-2:#4f46e5;
  --danger:#dc2626;
  --warn:#f59e0b;
  --ok:#16a34a;
  --radius:14px;
  --shadow:0 10px 30px rgba(15,23,42,.07);
  --shadow-soft:0 8px 24px rgba(15,23,42,.08);
  /* Theme gradient (dark pastel) */
  --topbar-bg:linear-gradient(135deg,#0b0f17 0%,#111827 45%,#2b2a5b 100%);
  --topbar-text:#f9fafb;
  --topbar-muted:rgba(249,250,251,.78);
  --sidebar-bg:linear-gradient(180deg,#0b0f17 0%,#111827 42%,#2b2a5b 100%);
  --sidebar-border:rgba(255,255,255,.08);
  --sidebar-hover:rgba(255,255,255,.08);
  --kpi-bg:linear-gradient(135deg, rgba(238,242,255,.9) 0%, rgba(240,249,255,.9) 55%, rgba(253,242,248,.9) 100%);
  --header-bg:linear-gradient(180deg, rgba(219,234,254,.95) 0%, rgba(224,231,255,.95) 100%);

  --success: var(--ok);
  --warning: var(--warn);
  --primary-ghost: rgba(37,99,235,.14);
  --topbar-border: rgba(255,255,255,.10);
  --topbar-ctrl-bg: rgba(255,255,255,.07);
  --topbar-ctrl-border: rgba(255,255,255,.14);
  --sidebar-pop-bg: rgba(17,24,39,.98);
}

*{box-sizing:border-box;}

html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

a{color:inherit; text-decoration:none;}

.app{display:flex; min-height:100vh;}

.sidebar{width:270px; border-right:1px solid var(--sidebar-border); background:var(--sidebar-bg); color:var(--topbar-text);}

.brand{padding:10px 10px 18px 10px; display:flex; flex-direction:column; gap:8px;}
.brand-logo-full{display:block; width:100%; max-width:228px; height:auto; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);}
.brand-logo-compact{display:none; width:40px; height:40px; margin:0 auto; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);}
.brand-title{font-weight:800; letter-spacing:-.02em;}
.brand-sub{margin-top:0; font-size:12px; color:var(--muted);}

.nav{display:flex; flex-direction:column; gap:8px; padding:6px 6px;}

/* Sidebar: section + group (minimal, collapsible) */
.nav-section{padding:2px 4px 10px 4px;}
.nav-section-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  padding:2px 10px 8px 10px;
  font-weight:800;
}

.nav-group{padding:0 4px;}
.nav-summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding:10px 12px;
  border-radius:14px;
  font-size:12px;
  font-weight:900;
  color:var(--muted);
}
.nav-summary::-webkit-details-marker{display:none;}
.nav-group[open] > .nav-summary{background:#f1f5f9; color:var(--text);}

.nav-sub{display:flex; flex-direction:column; gap:6px; padding:6px 2px 10px 10px;}
.nav-sub .nav-item{padding:9px 12px; border-radius:12px; font-size:12px;}
.nav-sub .nav-item:hover{background:#f8fafc;}

/* Submenu (level 2) untuk Operasi PBT: Dashboard/Program/Fungsi */
.nav-subsub{margin:6px 0 10px 18px; padding:4px 0 4px 10px; border-left:1px dashed rgba(148,163,184,.55); display:flex; flex-direction:column; gap:6px;}
.nav-subsub .nav-item{padding:8px 10px; border-radius:12px; font-size:12px;}
.nav-subsub .nav-item:hover{background:#f8fafc;}
.nav-subsub-title{margin:8px 0 4px 0; font-size:11px; color:#9ca3af; font-weight:800; letter-spacing:.02em; text-transform:uppercase;}
.nav-subsub-group{margin:10px 0 4px 0; font-size:12px; color:#6b7280; font-weight:700;}
.nav-subheader{margin:10px 10px 4px 10px; font-size:11px; letter-spacing:.02em; text-transform:uppercase; color:#9ca3af; font-weight:700;}
.nav-divider{height:1px; background:rgba(255,255,255,.08); margin:10px 10px; border-radius:999px;}
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;

  padding:12px 14px;
  border-radius:14px;
  color:var(--text);
}
.nav-item:hover{background:#f8fafc;}
.nav-item.is-active{
  background:var(--primary-ghost);
  border:1px solid #c7d2fe;
  color:var(--primary);
  font-weight:700;
}
.nav-item.is-disabled{
  color:#94a3b8;
  cursor:not-allowed;
}
.nav-item.is-disabled:hover{background:transparent;}


.nav-icon{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  background:var(--panel);
  flex:0 0 auto;
}
.nav-text{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.nav-summary{display:flex; align-items:center; gap:10px;}
.nav-summary .nav-icon{background:transparent;}
.nav-summary .nav-icon{border-color:rgba(148,163,184,.45); color:var(--muted);}

.nav-item.is-active .nav-icon{
  border-color:#c7d2fe;
  color:var(--primary);
  background:var(--primary-ghost);
}

.app.is-collapsed .sidebar{width:76px; padding-left:10px; padding-right:10px;}
.app.is-collapsed .brand{align-items:center;}
.app.is-collapsed .brand-sub{display:none;}
.app.is-collapsed .brand-title{display:none;}
.app.is-collapsed .brand-logo-full{display:none;}
.app.is-collapsed .brand-logo-compact{display:block;}
.app.is-collapsed .nav-text{display:none;}
.app.is-collapsed .nav-item{justify-content:center; padding:12px 10px;}
.app.is-collapsed .nav-summary{justify-content:center;}
.app.is-collapsed .nav-summary .nav-text{display:none;}
.app.is-collapsed details.nav-group{border:0; padding:0;}

.app.is-collapsed .nav-item,
.app.is-collapsed .nav-summary{position:relative;}

.app.is-collapsed details.nav-group > .nav-sub{display:block !important;}
.app.is-collapsed .nav-subheader{display:none;}
.app.is-collapsed .nav-divider{display:none;}
.app.is-collapsed .nav-subsub{display:none;}
.app.is-collapsed .nav-subsub-title{display:none;}
.app.is-collapsed .nav-subsub-group{display:none;}

.app.is-collapsed .nav-item:hover::after,
.app.is-collapsed .nav-summary:hover::after{
  content:attr(data-title);
  position:absolute;
  left:66px;
  top:50%;
  transform:translateY(-50%);
  background:var(--sidebar-pop-bg);
  color:var(--topbar-text);
  border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;
  border-radius:12px;
  font-size:12px;
  white-space:nowrap;
  box-shadow: 0 8px 22px rgba(15,23,42,.18);
  z-index:50;
}

.sidebar-footer{margin-top:auto; padding:12px 10px;}

.main{flex:1; display:flex; flex-direction:column; min-width:0;}

.topbar{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  border-bottom:1px solid var(--topbar-border);
  background:var(--topbar-bg);
}

.page-title{font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--topbar-text);}

.topbar-right{display:flex; align-items:center; gap:12px;}

.topbar-toggle{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--topbar-ctrl-border);
  background:var(--topbar-ctrl-bg);
  color:var(--topbar-text);
  cursor:pointer;
}
.topbar-toggle:hover{filter:brightness(1.05);}

.tenant-form{min-width:200px;}

.select{
  height:40px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
  font-size:13px;
}

/* Topbar controls on dark background */
.topbar .cmd-btn{
  background:var(--topbar-ctrl-bg);
  border-color:var(--topbar-ctrl-border);
}
.topbar .cmd-btn:hover{filter:brightness(1.05); background:var(--topbar-ctrl-bg);}
.topbar .cmd-text{color:var(--topbar-text);}
.topbar .cmd-icon{color:var(--topbar-muted);}
.cmd-kbd{margin-left:auto; font-size:11px; color:var(--topbar-muted);}

.topbar .select{
  background:var(--topbar-ctrl-bg);
  border-color:var(--topbar-ctrl-border);
  color:var(--topbar-text);
}

.topbar .btn-ghost{
  background:var(--topbar-ctrl-bg);
  border:1px solid var(--topbar-ctrl-border);
  color:var(--topbar-text);
}
.topbar .btn-ghost:hover{filter:brightness(1.05);}

.content{padding:20px 22px;}

.footer{
  padding:14px 22px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:12px;
}

.muted{color:var(--muted);}

.card{
  background:var(--panel-grad);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.card-pad{padding:16px;}
.card-header{padding:14px 16px; border-bottom:1px solid var(--border); font-weight:900;}
.card-body{padding:14px 16px;}

.page-header{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px;}
.page-title{font-size:18px; font-weight:900;}
.page-sub{margin-top:4px; color:var(--muted); font-size:13px;}
.page-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}

.grid{display:grid; gap:14px;}
.grid.cols-6{grid-template-columns:repeat(6, minmax(0,1fr));}
.grid.cols-5{grid-template-columns:repeat(5, minmax(0,1fr));}
.grid.cols-4{grid-template-columns:repeat(4, minmax(0,1fr));}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr));}
.grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr));}

@media (max-width:1100px){
  .grid.cols-6{grid-template-columns:repeat(3, minmax(0,1fr));}
  .grid.cols-5{grid-template-columns:repeat(3, minmax(0,1fr));}
  .grid.cols-4{grid-template-columns:repeat(2, minmax(0,1fr));}
  .grid.cols-3{grid-template-columns:1fr;}
  .sidebar{display:none;}
}

@media (max-width:640px){
  .grid.cols-6{grid-template-columns:1fr;}
  .grid.cols-5{grid-template-columns:1fr;}
  .grid.cols-4{grid-template-columns:1fr;}
}

.h2{font-size:18px; font-weight:800; margin:0 0 10px 0;}

.kpi{font-size:13px; color:var(--muted);}
.kpi strong{color:var(--text); font-size:18px;}

.kpi-card{border:1px solid var(--border); background:var(--kpi-bg); box-shadow:var(--shadow); border-radius:var(--radius);}
.kpi-card .kpi-title{font-size:12px; color:var(--muted); font-weight:800; letter-spacing:.02em; text-transform:uppercase;}
.kpi-card .kpi-value{margin-top:6px; font-size:22px; font-weight:900; color:var(--text);}
.kpi-card .kpi-sub{margin-top:4px; font-size:12px; color:var(--muted);}

.table-wrap{overflow:auto; border-radius:var(--radius); border:1px solid var(--border);}

.table{
  width:100%;
  border-collapse:collapse;
  background:var(--panel);
}
.table th, .table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  font-size:13px;
  vertical-align:top;
}
.table th{color:rgba(15,23,42,.75); font-weight:700; background:var(--header-bg);}

.tabs{display:flex; gap:22px; align-items:flex-end; margin:6px 0 14px 0;}
.tab{
  padding:8px 2px;
  font-weight:700;
  color:var(--muted);
  border-bottom:3px solid transparent;
}
.tab.is-active{color:var(--primary); border-bottom-color:var(--primary);}
.tab.is-disabled{opacity:.45; cursor:not-allowed; border-bottom-color:transparent;}

/* Secondary topbar untuk fungsi jabatan */
.subbar{display:flex; gap:8px; align-items:center; overflow:auto; padding:0 0 10px; margin:-6px 0 14px;}
.chip{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; border:1px solid var(--border); background:var(--panel); color:var(--text); padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800;}
.chip:hover{background:#f8fafc;}

/* Segmented radio (lebih kemas berbanding radio biasa) */
.segmented{display:inline-flex; background:#f1f5f9; border:1px solid var(--border); border-radius:12px; padding:2px; gap:2px;}
.segmented input{position:absolute; opacity:0; pointer-events:none;}
.segmented label{display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:10px; font-weight:800; cursor:pointer; user-select:none; color:var(--text);}
.segmented input:checked + label{background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05);}

.btn{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
  background:var(--panel);
  cursor:pointer;
  font-weight:700;
  font-size:13px;
}
.btn:hover{
  /* Hover mesti jelas (rujuk style.pdf) — masih minimal & tidak childish */
  background:rgba(37,99,235,.06);
  border-color:rgba(37,99,235,.20);
}

.btn-sm{padding:7px 10px; border-radius:10px; font-size:12px;}

.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; border-color:transparent;}
.btn-primary:hover{filter:brightness(.97);}

.btn-outline-primary{
  background:transparent;
  border-color:rgba(37,99,235,.35);
  color:var(--primary);
}
.btn-outline-primary:hover{background:linear-gradient(135deg, rgba(37,99,235,.92), rgba(79,70,229,.92)); color:#fff; border-color:transparent;}

.btn-success{background:linear-gradient(135deg, rgba(22,163,74,.98), rgba(5,150,105,.98)); color:#fff; border-color:transparent;}
.btn-success:hover{filter:brightness(.97);}

.btn-outline-success{
  background:transparent;
  border-color:rgba(22,163,74,.35);
  color:var(--success);
}
.btn-outline-success:hover{background:linear-gradient(135deg, rgba(22,163,74,.92), rgba(5,150,105,.92)); color:#fff; border-color:transparent;}

.btn-outline-info{
  background:transparent;
  border-color:rgba(14,165,233,.35);
  color:#0284c7;
}
.btn-outline-info:hover{background:linear-gradient(135deg, rgba(14,165,233,.92), rgba(59,130,246,.92)); color:#fff; border-color:transparent;}

.btn-outline-warning{
  background:transparent;
  border-color:rgba(245,158,11,.38);
  color:#b45309;
}
.btn-outline-warning:hover{background:linear-gradient(135deg, rgba(245,158,11,.94), rgba(251,191,36,.92)); color:#fff; border-color:transparent;}

.btn-outline-danger{
  background:transparent;
  border-color:rgba(220,38,38,.35);
  color:var(--danger);
}
.btn-outline-danger:hover{background:linear-gradient(135deg, rgba(220,38,38,.94), rgba(225,29,72,.92)); color:#fff; border-color:transparent;}

.btn-outline-secondary{
  background:transparent;
  border-color:rgba(100,116,139,.35);
  color:var(--muted);
}
.btn-outline-secondary:hover{background:linear-gradient(135deg, rgba(100,116,139,.26), rgba(71,85,105,.22)); color:var(--text);}

.btn-outline-dark{
  background:transparent;
  border-color:rgba(15,23,42,.30);
  color:var(--text);
}
.btn-outline-dark:hover{background:linear-gradient(135deg, rgba(15,23,42,.90), rgba(30,41,59,.90)); color:#fff; border-color:transparent;}

.btn-ghost{background:transparent;}

.btn-danger{background:linear-gradient(135deg, rgba(220,38,38,.12), rgba(225,29,72,.10)); border-color:rgba(220,38,38,.35); color:var(--danger);}

.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  color:var(--muted);
  background:#fafafa;
}
.badge.ok{border-color:rgba(22,163,74,.25); color:var(--success); background:rgba(22,163,74,.06);}
.badge.warn{border-color:rgba(245,158,11,.25); color:#b45309; background:rgba(245,158,11,.08);}
.badge.info{border-color:rgba(37,99,235,.25); color:var(--primary); background:rgba(37,99,235,.08);}
.badge.danger{border-color:rgba(220,38,38,.25); color:var(--danger); background:rgba(220,38,38,.08);}

.input{
  width:100%;
  height:40px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:0 12px;
  font-size:13px;
  background:var(--panel);
}

.input-sm{height:34px; border-radius:10px; font-size:12px;}

/* Borang "stack" (Fasa 3+) – auto-apply styling input yang konsisten */
.stack label{display:block; font-size:12px; color:var(--muted); font-weight:600; margin:0 0 6px;}
.stack input[type="text"],
.stack input[type="number"],
.stack input[type="date"],
.stack input[type="email"],
.stack input[type="password"],
.stack input[type="search"],
.stack textarea,
.stack select{
  width:100%;
  min-height:40px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  background:var(--panel);
  outline:none;
}
.stack textarea{min-height:90px; resize:vertical;}
.stack input:focus,
.stack textarea:focus,
.stack select:focus{border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.15)}

/* Global form controls (legacy pages that don't use .stack/.input) */
.content input[type="text"],
.content input[type="number"],
.content input[type="date"],
.content input[type="email"],
.content input[type="password"],
.content input[type="search"]:not(.select2-search__field),
.content textarea,
.content select{
  width:100%;
  min-height:40px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  background:var(--panel);
  outline:none;
}
.content textarea{min-height:90px; resize:vertical;}
.content input[type="text"]:focus,
.content input[type="number"]:focus,
.content input[type="date"]:focus,
.content input[type="email"]:focus,
.content input[type="password"]:focus,
.content input[type="search"]:not(.select2-search__field):focus,
.content textarea:focus,
.content select:focus{border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.15)}

.content input[type="checkbox"],
.content input[type="radio"]{
  width:auto;
  min-height:auto;
  padding:0;
  border-radius:6px;
  box-shadow:none;
}

.form-row{display:grid; grid-template-columns:repeat(12, 1fr); gap:10px; align-items:end;}
.col-3{grid-column:span 3;}
.col-4{grid-column:span 4;}
.col-5{grid-column:span 5;}
.col-6{grid-column:span 6;}
.col-8{grid-column:span 8;}
.col-12{grid-column:span 12;}

.label{font-size:12px; color:var(--muted); margin-bottom:6px;}

.actions-bar{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:12px;
  border-top:1px solid var(--border);
}

.flash-area{padding:12px 22px 0 22px; display:flex; flex-direction:column; gap:8px;}
.flash{padding:10px 12px; border-radius:14px; border:1px solid var(--border); font-size:13px;}
.flash-success{border-color:rgba(22,163,74,.25); background:rgba(22,163,74,.06);}
.flash-warning{border-color:rgba(245,158,11,.25); background:rgba(245,158,11,.08);}
.flash-danger{border-color:rgba(220,38,38,.25); background:rgba(220,38,38,.06);}

/* Command palette */
.cmd{display:none;}
.cmd.is-open{display:block;}
.cmd-backdrop{
  position:fixed; inset:0;
  background:rgba(15,23,42,.25);
}
.cmd-dialog{
  position:fixed;
  top:10vh; left:50%; transform:translateX(-50%);
  width:min(820px, calc(100vw - 26px));
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: 0 20px 60px rgba(15,23,42,.25);
  padding:14px;
}
.cmd-input-row{display:flex; gap:10px; align-items:center;}
.cmd-list{margin-top:12px; display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow:auto;}
.cmd-item{padding:10px 12px; border-radius:12px; border:1px solid transparent;}
.cmd-item:hover{background:#f8fafc; border-color:var(--border);}
.cmd-hint{margin-top:10px; font-size:12px;}

.kbd{
  display:inline-block;
  border:1px solid var(--border);
  border-bottom-width:2px;
  padding:2px 8px;
  border-radius:10px;
  font-size:12px;
  background:#fafafa;
  color:var(--muted);
}

.cmd-btn{
  height:40px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:0 12px;
  background:var(--panel);
  cursor:pointer;
  font-size:13px;
}
.cmd-btn:hover{background:#f8fafc;}
.cmd-icon{font-size:14px; color:var(--muted);}
.cmd-text{color:var(--muted);}

.small-note{font-size:12px; color:var(--muted); margin-top:10px;}

.hr{height:1px; background:var(--border); margin:14px 0;}

/* ============================
   Select2 (minimal)
   ============================ */
.select2-container{font-size:13px;}
.select2-container--default .select2-selection--single{
  height:40px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:38px;
  padding-left:12px;
  padding-right:28px;
  color:var(--text);
}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:40px; right:8px;}
.select2-dropdown{border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.select2-search__field{border:1px solid var(--border) !important; border-radius:10px !important; padding:8px 10px !important;}

.topbar .select2-container--default .select2-selection--single{
  background:var(--topbar-ctrl-bg);
  border-color:var(--topbar-ctrl-border);
}
.topbar .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--topbar-text);}
.topbar .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--topbar-muted) transparent transparent transparent;}

/* Dropdown Select2 untuk Topbar (background gelap + teks putih) */
.select2-dropdown.select2-topbar-dark{
  background:var(--topbar-bg);
  border-color:#111827;
}
.select2-dropdown.select2-topbar-dark .select2-results__option{color:#fff;}
.select2-dropdown.select2-topbar-dark .select2-results__option--highlighted{background:#111827; color:#fff;}
.select2-dropdown.select2-topbar-dark .select2-results__option[aria-selected=true]{background:rgba(37,99,235,.25); color:#fff;}
.select2-dropdown.select2-topbar-dark .select2-search__field{
  background:#111827;
  color:#fff;
  border-color:#1f2937 !important;
}
.select2-container--default .select2-selection--single.select2-topbar-dark{
  background:var(--topbar-ctrl-bg);
  border-color:var(--topbar-ctrl-border);
}
.select2-container--default .select2-selection--single.select2-topbar-dark .select2-selection__rendered{color:var(--topbar-text);}
.select2-container--default .select2-selection--single.select2-topbar-dark .select2-selection__arrow b{border-color:var(--topbar-muted) transparent transparent transparent;}

/* ============================
   DataTables (minimal)
   ============================ */
.dataTables_wrapper{font-size:13px;}
.dataTables_wrapper .dataTables_filter{margin:10px 0;}
.dataTables_wrapper .dataTables_filter label{color:var(--muted); font-size:12px;}
.dataTables_wrapper .dataTables_filter input{
  height:34px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:0 10px;
  font-size:12px;
  margin-left:8px;
}

.dataTables_wrapper .dt-buttons{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0;}
.dataTables_wrapper .dt-buttons .dt-button{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:10px;
  padding:7px 10px;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  cursor:pointer;
}
.dataTables_wrapper .dt-buttons .dt-button:hover{background:rgba(37,99,235,.06); border-color:rgba(37,99,235,.20);}

/* Let Bootstrap-like .btn classes control DataTables buttons */
.dataTables_wrapper .dt-buttons .dt-button.btn{background:transparent; border:0; padding:0; font-weight:inherit; color:inherit;}
.dataTables_wrapper .dt-buttons .dt-button.btn:hover{background:transparent;}


.dataTables_wrapper .dataTables_info{color:var(--muted); font-size:12px; padding-top:10px;}

.dataTables_wrapper .dataTables_paginate{padding-top:10px;}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  padding:6px 10px !important;
  margin-left:6px !important;
  background:var(--panel) !important;
  color:var(--text) !important;
  font-size:12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:#f8fafc !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--primary-ghost) !important;
  border-color:#c7d2fe !important;
  color:var(--primary) !important;
}

/* Pastikan DataTables tak rosakkan gaya jadual sedia ada */
table.dataTable{border-collapse:collapse !important;}
table.dataTable thead th, table.dataTable thead td{border-bottom:1px solid var(--border) !important;}
table.dataTable.no-footer{border-bottom:0 !important;}

/* Override header DataTables (mesti sedikit lebih gelap) */
table.table.dataTable thead th{background:var(--header-bg) !important; color:rgba(15,23,42,.78) !important;}

.dt-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.dt-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}


/* ============================
   Table toolbar (standard)
   Filter kiri + Export/Aksi kanan (minimal)
   ============================ */
.table-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 0;
}
.table-toolbar .tt-left,
.table-toolbar .tt-right{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.table-toolbar .tt-filters{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.table-toolbar .tt-filters .filter-label{font-size:12px; color:var(--muted); margin-right:6px;}

/* DataTables search (kecil & minimal) */
.dataTables_wrapper .dataTables_filter{margin:0;}
.dataTables_wrapper .dataTables_filter label{display:flex; align-items:center; gap:8px; margin:0;}
.dataTables_wrapper .dataTables_filter input{margin-left:0;}

/* Quick buttons in toolbar */
.table-toolbar .tt-quick{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}

/* Small select for toolbar filters */
.table-toolbar select{
  height:34px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:0 10px;
  font-size:12px;
  background:var(--panel);
}

/* Collapsible helpers */
.collapse{display:none;}
.collapse.is-open{display:block;}

/* Key-Value blocks */
.kv{display:flex; flex-direction:column; gap:8px;}
.kv-row{display:flex; gap:10px; align-items:flex-start;}
.kv-k{width:120px; color:var(--muted); font-size:12px;}
.kv-v{flex:1; font-size:13px;}

/* Workflow stepper (minimal) */
.wf{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.wf-step{display:flex; flex-direction:column; gap:2px; min-width:180px; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:#fff;}
.wf-step .wf-title{font-weight:800; font-size:13px;}
.wf-step .wf-meta{font-size:12px;}
.wf-dot{width:10px; height:10px; border-radius:999px; background:#cbd5e1; margin-bottom:2px;}
.wf-line{flex:1; height:2px; background:var(--border); min-width:30px;}
.wf-step.active{border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.06);}
.wf-step.active .wf-dot{background:var(--warning);} 
.wf-step.done{border-color:rgba(22,163,74,.25); background:rgba(22,163,74,.04);} 
.wf-step.done .wf-dot{background:var(--success);} 

/* Print-friendly (untuk simpan sebagai PDF melalui browser) */
@media print{
  .topbar,.sidebar,.footer,.flash-area,.cmd,.page-actions,.table-toolbar,.dt-toolbar,.tabs,.subbar{display:none !important;}
  .content{padding:0 !important;}
  .card{box-shadow:none !important;}
  .table-wrap{border:1px solid #e5e7eb !important;}
}


/* Sidebar dark pastel overrides */
.sidebar .nav-section-title{color:var(--topbar-muted);}
.sidebar .nav-summary{color:var(--topbar-text);}
.sidebar .nav-summary:hover{background:var(--sidebar-hover);}
.sidebar details.nav-group[open] > summary.nav-summary{background:var(--sidebar-hover);}
.sidebar .nav-item{color:var(--topbar-text);}
.sidebar .nav-item:hover{background:var(--sidebar-hover);}
.sidebar .nav-item.is-active{background:rgba(37,99,235,.22); border:1px solid rgba(37,99,235,.35); color:#fff;}
.sidebar .nav-icon{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--topbar-muted);}
.sidebar .nav-item.is-active .nav-icon{background:rgba(37,99,235,.25); border-color:rgba(37,99,235,.35); color:#fff;}
.sidebar .nav-subheader{color:var(--topbar-muted);}
.sidebar .nav-divider{background:rgba(255,255,255,.08);}

.alert{border:1px solid var(--border); border-radius:12px; padding:10px 12px; font-size:13px; margin:10px 0;}
.alert.info{background:linear-gradient(135deg, rgba(219,234,254,.65), rgba(224,231,255,.55));} 
.alert.warning{background:linear-gradient(135deg, rgba(254,243,199,.75), rgba(253,230,138,.55)); border-color:rgba(245,158,11,.25);} 
.alert.ok{background:linear-gradient(135deg, rgba(220,252,231,.70), rgba(209,250,229,.55)); border-color:rgba(22,163,74,.25);}


/* Sidebar submenu contrast */
.sidebar .brand-sub{color:var(--topbar-muted);} 
.sidebar .nav-subsub-title{color:rgba(255,255,255,.78);} 
.sidebar .nav-subsub-group{color:rgba(255,255,255,.68);} 
.sidebar .nav-subsub{border-left-color:rgba(255,255,255,.18);} 


.btn.is-disabled{opacity:.55; cursor:not-allowed; pointer-events:none;}

/* ======================================================
   Login (auth)
   ====================================================== */
.auth-shell{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:34px 16px;}
.auth-main{width:100%; max-width:980px;}
.auth-card{display:flex; gap:0; border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); background:var(--panel-grad); align-items:stretch;} 
.auth-left{flex:1 1 50%; min-width:0; padding:28px; background:linear-gradient(135deg, rgba(219,234,254,.85) 0%, rgba(253,242,248,.80) 55%, rgba(240,249,255,.85) 100%);} 
.auth-logo-wrap{display:flex; flex-direction:column; gap:10px; margin-bottom:14px;}
.auth-logo-full{display:block; width:100%; max-width:520px; height:auto; border-radius:16px; box-shadow:0 10px 28px rgba(15,23,42,.08);}
.auth-logo-compact{display:none; width:84px; height:84px; border-radius:18px; box-shadow:0 8px 22px rgba(15,23,42,.10);}
.auth-title{font-size:26px; font-weight:900; letter-spacing:-.02em; margin:0 0 6px 0;}
.auth-sub{color:var(--muted); margin:0 0 18px 0;}
.auth-badge{display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.65); border:1px solid rgba(15,23,42,.10); font-size:12px; font-weight:700; color:#0f172a;}
.auth-right{flex:1 1 50%; min-width:0; width:auto; padding:28px; background:rgba(255,255,255,.92);} 
.auth-right h3{margin:0 0 10px 0; font-size:16px; font-weight:900;}
.auth-table-wrap{width:100%; overflow-x:auto; border:1px solid rgba(15,23,42,.08); border-radius:14px; background:#fff;}
.auth-table{width:100%; border-collapse:separate; border-spacing:0; font-size:12px; table-layout:fixed;}
.auth-table th,.auth-table td{padding:9px 8px; border-bottom:1px solid rgba(15,23,42,.08); text-align:left; vertical-align:top; word-break:break-word;}
.auth-table th{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);} 
.auth-row{display:flex; gap:10px; align-items:center; justify-content:space-between; padding:10px 0 0 0;} 
.auth-note{font-size:12px; color:var(--muted); margin-top:10px;}
.auth-flash-area{width:100%; max-width:1080px; margin:0 auto; padding:0 18px;}

@media (max-width: 920px){
  .auth-card{flex-direction:column;}
  .auth-right{width:100%;}
  .auth-logo-full{max-width:100%;}
}
@media (max-width: 560px){
  .auth-logo-full{display:none;}
  .auth-logo-compact{display:block;}
}


/* v0.8.1 polish */
.topbar-left{display:flex; align-items:center; gap:12px; min-width:0;}
.topbar-right{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.profile-form,.tenant-form,.logout-form{margin:0;}
.sidebar .nav-item,.sidebar .nav-summary{transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;}
.sidebar .nav-item:hover,.sidebar .nav-summary:hover{transform:translateX(1px);}
.app.is-collapsed .sidebar .nav-item,.app.is-collapsed .sidebar .nav-summary{justify-content:center;}
.app.is-collapsed .sidebar .nav-item:hover::after,
.app.is-collapsed .sidebar .nav-summary:hover::after{pointer-events:none;}
.select2-container{max-width:100%;}
.auth-shell{background:linear-gradient(135deg,#eef2ff 0%,#f8fafc 45%,#fdf2f8 100%);}
.auth-main{width:100%; max-width:1080px;}
.auth-main.auth-main-wide{max-width:none !important; width:100% !important; padding-left:0 !important; padding-right:0 !important;}
.auth-right .btn{white-space:nowrap;}
.flash-area .flash{backdrop-filter:saturate(1.05) blur(3px);}
.table-wrap.card{overflow:hidden;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{box-shadow:none !important;}


/* ======================================================
   Phase 0/1 — tenant print template
   ====================================================== */
.print-letterhead{
  display:none;
  margin:0 0 16px 0;
  padding:0 0 12px 0;
  border:0 solid transparent;
  border-top-width:4px;
  border-bottom-width:1px;
}
.print-letterhead-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}
.print-letterhead-org{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.print-letterhead-logo-wrap{
  flex:0 0 auto;
}
.print-letterhead-logo{
  width:82px;
  height:auto;
  display:block;
  border-radius:12px;
}
.print-letterhead-title{
  font-size:20px;
  font-weight:900;
  letter-spacing:-.02em;
}
.print-letterhead-sub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}
.print-letterhead-doc{
  text-align:right;
  min-width:220px;
}
.print-doc-title{
  font-size:15px;
  font-weight:800;
}
.print-doc-ref{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}
.print-letterhead-address,
.print-letterhead-meta,
.print-letterhead-footer{
  margin-top:8px;
  font-size:12px;
  color:#334155;
}
.print-letterhead-footer{
  color:var(--muted);
}

@media print{
  .print-letterhead{display:block !important;}
  .page-header{margin-top:0 !important;}
}


.btn-lg{padding:14px 18px; border-radius:14px; font-size:15px;}
.btn-xl{padding:17px 24px; border-radius:18px; font-size:16px; font-weight:900;}
.page-entry-toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:14px 0 16px 0;}
.page-entry-empty{display:none !important;}
.page-entry-trigger-hidden{display:none !important;}
.page-entry-xl-btn{min-width:260px; justify-content:center; text-align:center; box-shadow:0 14px 34px rgba(37,99,235,.16);}
.page-entry-toolbar .page-entry-xl-btn,.page-actions .page-entry-xl-btn,.action-hero .page-entry-xl-btn{order:-1;}
.entry-launcher-list{display:grid; gap:12px;}
.entry-launcher-option{width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px 18px; border:1px solid var(--border); border-radius:18px; background:var(--panel-grad); cursor:pointer; text-align:left; box-shadow:var(--shadow-soft);}
.entry-launcher-option:hover{background:#f8fafc; transform:translateY(-1px);}
.entry-launcher-title{font-size:15px; font-weight:900; color:var(--text);}
.entry-launcher-desc{font-size:13px; color:var(--muted); line-height:1.45;}
.action-hero{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:14px 0 16px 0;}
.action-hero .btn{min-width:180px; justify-content:center; text-align:center;}
.summary-grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
.summary-card{background:var(--panel-grad); border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow:var(--shadow-soft);}
.summary-card .summary-title{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800;}
.summary-card .summary-value{font-size:28px; font-weight:900; margin-top:10px; letter-spacing:-.03em;}
.summary-card .summary-sub{margin-top:6px; color:var(--muted); font-size:13px;}
.inline-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0;}
.inline-tab{display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--muted); font-weight:800; font-size:12px;}
.inline-tab.is-active{background:var(--primary-ghost); border-color:#c7d2fe; color:var(--primary);}
.modal-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.48); display:none; align-items:center; justify-content:center; padding:18px; z-index:2100;}
.modal-backdrop.is-open{display:flex;}
body.modal-open{overflow:hidden;}
.modal-dialog{width:min(820px, calc(100vw - 36px)); max-height:calc(100vh - 36px); overflow:auto; background:var(--panel); border-radius:20px; border:1px solid rgba(255,255,255,.16); box-shadow:0 28px 68px rgba(15,23,42,.28);}
.modal-dialog.modal-sm{width:min(560px, calc(100vw - 36px));}
.modal-dialog.modal-xl{width:min(1080px, calc(100vw - 36px));}
.modal-dialog.modal-xl{width:min(1140px, calc(100vw - 36px));}
.modal-header{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border);}
.modal-title{font-size:20px; font-weight:900; letter-spacing:-.02em; margin:0;}
.modal-subtitle{margin-top:4px; color:var(--muted); font-size:13px;}
.modal-body{padding:18px 20px;}
.modal-footer{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; padding:16px 20px 20px 20px; border-top:1px solid var(--border); background:linear-gradient(180deg, rgba(248,250,252,.72), rgba(255,255,255,.92));}
.modal-close{width:36px; height:36px; border-radius:12px; border:1px solid var(--border); background:var(--panel); cursor:pointer; font-size:18px; line-height:1;}
.modal-close:hover{background:#f8fafc;}
.modal-body .grid:last-child, .modal-body .form-row:last-child{margin-bottom:0;}
.toggle-block{display:none;}
.toggle-block.is-visible{display:block;}
.stat-line{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed rgba(148,163,184,.35);}
.stat-line:last-child{border-bottom:0;}
.is-inline-form-hidden{display:none !important;}
.inline-form-placeholder{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:16px 18px; border:1px dashed rgba(37,99,235,.35); border-radius:18px; background:linear-gradient(180deg, rgba(239,246,255,.92), rgba(248,250,252,.98));}
.inline-form-placeholder__copy{display:grid; gap:6px;}
.inline-form-placeholder__title{font-size:15px; font-weight:900; letter-spacing:-.01em; color:#1d4ed8;}
.inline-form-placeholder__text{font-size:13px; color:var(--text); line-height:1.55;}
.inline-form-placeholder__meta{font-size:12px; color:var(--muted);}
.inline-form-placeholder__actions{display:flex; align-items:center; gap:8px; margin-left:auto;}
.modal-autogen .modal-body form{display:grid; gap:14px;}
.modal-autogen__body .card{box-shadow:none;}
@media (max-width: 860px){
  .summary-grid-2{grid-template-columns:1fr;}
  .action-hero .btn{min-width:0; width:100%;}
  .modal-dialog,.modal-dialog.modal-sm,.modal-dialog.modal-xl{width:min(100vw - 20px, 100%); max-height:calc(100vh - 20px);}
  .inline-form-placeholder{flex-direction:column;}
  .inline-form-placeholder__actions{margin-left:0; width:100%;}
  .inline-form-placeholder__actions .btn{width:100%; justify-content:center;}
}

.print-popup-toolbar{position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; background:#fff; border-bottom:1px solid var(--border); box-shadow:0 8px 24px rgba(15,23,42,.08);}
.print-popup-toolbar .actions{display:flex; gap:8px;}
.print-popup-page{padding:16px; background:#f8fafc; min-height:100vh;}
.print-popup-sheet{max-width:980px; margin:0 auto; background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:0 18px 48px rgba(15,23,42,.10); padding:20px 22px;}
.print-doc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 18px; margin:14px 0;}
.print-doc-grid .k{font-size:12px; color:var(--muted); margin-bottom:4px;}
.print-doc-grid .v{font-weight:700;}
.print-lines{width:100%; border-collapse:collapse; margin-top:14px;}
.print-lines th,.print-lines td{border:1px solid #cbd5e1; padding:8px 10px; text-align:left; vertical-align:top;}
.print-lines th{background:#f8fafc; font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
.print-note{margin-top:16px; padding:10px 12px; border-radius:12px; background:#eff6ff; color:#1d4ed8;}
@media print{
  .print-popup-toolbar{display:none !important;}
  .print-popup-page{padding:0; background:#fff;}
  .print-popup-sheet{max-width:none; margin:0; border:none; border-radius:0; box-shadow:none; padding:0;}
}

.task-card-grid .card{min-height:220px; display:flex; flex-direction:column;}
.task-card-grid .task-card-header{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.task-card-grid .task-card-title{font-size:15px; line-height:1.35; font-weight:800; margin-bottom:2px;}
.task-card-grid .task-card-meta{display:flex; flex-direction:column; gap:4px;}
.task-card-grid .task-card-action{margin-top:auto; padding-top:12px; display:flex; justify-content:flex-end;}
.task-card-grid .btn{width:auto; justify-content:center;}

.kw-summary-toolbar{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap;}
.kw-summary-toolbar__actions{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.kw-summary-filter-tabs{margin:0; justify-content:flex-end;}
.kw-summary-grid{align-items:stretch;}
.kw-summary-card{background:#fff; border:1px solid rgba(15,23,42,.18); overflow:hidden;}
.kw-summary-card__head{padding:14px 16px; font-size:16px; font-weight:900; border-bottom:1px solid rgba(15,23,42,.18);}
.kw-summary-card__balance{padding:24px 16px; text-align:center; border-bottom:1px solid rgba(15,23,42,.18);}
.kw-summary-card__balance-label{font-size:14px; color:var(--muted);}
.kw-summary-card__balance-value{margin-top:8px; font-size:28px; line-height:1.15; font-weight:900; letter-spacing:-.03em;}
.kw-summary-card__metrics{display:grid; grid-template-columns:repeat(2, minmax(0,1fr));}
.kw-summary-card__metric{min-height:88px; padding:16px; display:flex; flex-direction:column; justify-content:center; gap:6px; border-right:1px solid rgba(15,23,42,.18); border-bottom:1px solid rgba(15,23,42,.18);}
.kw-summary-card__metric:nth-child(2n){border-right:0;}
.kw-summary-card__metric:nth-last-child(-n+2){border-bottom:0;}
.kw-summary-card__metric-label{font-size:14px; color:var(--text);}
.kw-summary-card__metric-value{font-size:18px; font-weight:800; line-height:1.2;}

@media (max-width: 860px){
  .kw-summary-toolbar__actions{margin-left:0; width:100%; align-items:flex-start;}
  .kw-summary-filter-tabs{justify-content:flex-start;}
}



/* ======================================================
   Sidebar refresh (expanded / collapsed flyout) + tenant topbar
   ====================================================== */
:root{
  --sidebar-width: 288px;
  --sidebar-width-collapsed: 94px;
  --sidebar-shell-bg: linear-gradient(180deg,#0b0f17 0%, #0d111a 45%, #121826 100%);
  --sidebar-card-bg: rgba(255,255,255,.06);
  --sidebar-card-bg-strong: rgba(255,255,255,.08);
  --sidebar-card-border: rgba(255,255,255,.07);
  --sidebar-text-soft: rgba(248,250,252,.70);
  --sidebar-text-muted: rgba(248,250,252,.44);
  --sidebar-text-strong: #f8fafc;
  --sidebar-panel-shadow: 0 24px 44px rgba(2,8,23,.36);
}

.app .sidebar{
  position:sticky;
  top:0;
  align-self:flex-start;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:var(--sidebar-width);
  min-height:100vh;
  padding:22px 14px 18px;
  background:var(--sidebar-shell-bg);
  border-right:1px solid rgba(255,255,255,.06);
  transition:width .24s ease, padding .24s ease;
  overflow:visible;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03);
}

.app .brand{
  position:relative;
  align-items:flex-start;
  gap:10px;
  padding:6px 8px 8px;
}

.app .brand-logo-full{display:none;}
.app .brand-logo-compact{
  display:block;
  width:72px;
  height:72px;
  margin:0;
  padding:10px;
  object-fit:contain;
  border-radius:22px;
  background:#f8fafc;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 28px rgba(2,8,23,.22);
}
.app .brand-title,
.app .brand-sub{display:none;}

.sidebar-edge-toggle{
  position:absolute;
  top:90px;
  right:-18px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:#182030;
  color:var(--sidebar-text-strong);
  box-shadow:0 18px 30px rgba(2,8,23,.28);
  cursor:pointer;
  z-index:25;
}
.sidebar-edge-toggle svg{width:16px; height:16px;}
.sidebar-edge-toggle:hover{filter:brightness(1.06);}

.app .nav{
  flex:1 1 auto;
  gap:8px;
  padding:6px 2px 0;
  overflow:auto;
  min-height:0;
  scrollbar-width:thin;
}
.app .nav::-webkit-scrollbar{width:8px;}
.app .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:999px;}

.app .nav-section{padding:0 2px 2px;}
.app .nav-section-title{display:none;}

.app .nav-group,
.app .nav-section{
  margin:0;
  padding:0;
}

.app .nav-item,
.app .nav-summary{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:56px;
  padding:14px 16px;
  border-radius:18px;
  color:var(--sidebar-text-soft);
  background:transparent;
  border:1px solid transparent;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  font-size:15px;
  font-weight:700;
  box-shadow:none;
}

.app .nav-summary{
  font-weight:800;
  cursor:pointer;
}

.app .nav-item:hover,
.app .nav-summary:hover{
  transform:none;
  background:rgba(255,255,255,.035);
  color:var(--sidebar-text-strong);
}

.app .nav-item.is-active,
.app .nav-group[open] > .nav-summary{
  background:var(--sidebar-card-bg);
  border-color:var(--sidebar-card-border);
  color:var(--sidebar-text-strong);
}

.app .nav-item.is-active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.app .nav-icon{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:0;
  background:transparent;
  color:currentColor;
  flex:0 0 auto;
}
.app .nav-icon svg{
  width:20px;
  height:20px;
  display:block;
}

.app .nav-text{
  min-width:0;
  flex:1 1 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app .nav-caret{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--sidebar-text-muted);
  flex:0 0 auto;
  transition:transform .2s ease, color .2s ease;
}
.app .nav-caret svg{
  width:18px;
  height:18px;
  display:block;
}
.app .nav-group[open] > .nav-summary .nav-caret{
  transform:rotate(180deg);
  color:var(--sidebar-text-strong);
}

.app .nav-sub{
  gap:6px;
  padding:10px 0 10px 18px;
}
.app .nav-sub .nav-item{
  min-height:46px;
  padding:10px 12px;
  border-radius:16px;
  font-size:14px;
  color:var(--sidebar-text-muted);
}
.app .nav-sub .nav-item:hover,
.app .nav-sub .nav-item.is-active{
  color:var(--sidebar-text-strong);
}
.app .nav-sub .nav-icon svg{
  width:18px;
  height:18px;
}

.app .nav-subheader,
.app .nav-subsub-title{
  margin:10px 6px 6px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(248,250,252,.36);
  font-weight:700;
}

.app .nav-divider{
  height:1px;
  margin:10px 6px;
  background:rgba(255,255,255,.08);
}

.app .nav-subsub{
  margin:4px 0 12px 14px;
  padding:2px 0 2px 14px;
  border-left:1px solid rgba(255,255,255,.12);
  gap:4px;
}
.app .nav-subsub-group{
  margin:10px 0 4px;
  font-size:11px;
  color:rgba(248,250,252,.42);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.app .nav-subsub .nav-item{
  min-height:40px;
  padding:8px 10px;
  font-size:13px;
}

.app .sidebar-footer{
  margin-top:6px;
  padding:8px 4px 0;
}
.app .sidebar-footer .btn{
  width:100%;
  justify-content:center;
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.1);
  color:var(--sidebar-text-soft);
}
.app .sidebar-footer .btn:hover{
  background:rgba(255,255,255,.08);
  color:var(--sidebar-text-strong);
}

.topbar{
  position:sticky;
  top:0;
  z-index:14;
  gap:14px;
  padding:0 22px;
  box-shadow:0 10px 24px rgba(2,8,23,.16);
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:1 1 auto;
}

.topbar-heading{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.topbar-tenant-logo{
  width:42px;
  height:42px;
  flex:0 0 auto;
  object-fit:contain;
  padding:4px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid rgba(255,255,255,.16);
}
.topbar-heading-text{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex-wrap:wrap;
}
.topbar-tenant-name{
  color:var(--topbar-text);
  font-size:17px;
  font-weight:800;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.topbar-title-sep{
  color:rgba(255,255,255,.55);
  font-size:20px;
  line-height:1;
}
.topbar .page-title{
  color:var(--topbar-text);
  font-size:25px;
  font-weight:900;
  letter-spacing:-.03em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.topbar-toggle-mobile{
  display:none;
}

.app.is-collapsed .sidebar{
  width:var(--sidebar-width-collapsed);
  padding-left:12px;
  padding-right:12px;
}
.app.is-collapsed .brand{
  align-items:center;
}
.app.is-collapsed .brand-logo-compact{
  width:58px;
  height:58px;
  border-radius:20px;
}
.app.is-collapsed .nav{
  padding-top:4px;
}
.app.is-collapsed .nav-item,
.app.is-collapsed .nav-summary{
  justify-content:center;
  padding:14px 0;
  min-height:56px;
}
.app.is-collapsed .nav-text,
.app.is-collapsed .nav-caret,
.app.is-collapsed .nav-section-title,
.app.is-collapsed .sidebar-footer{
  display:none;
}
.app.is-collapsed .nav-item .nav-icon,
.app.is-collapsed .nav-summary .nav-icon{
  width:22px;
  height:22px;
}
.app.is-collapsed .nav-group{
  overflow:visible;
}
.app.is-collapsed .sidebar details.nav-group > .nav-sub{
  display:none !important;
}

.app.is-collapsed .sidebar-edge-toggle svg,
.topbar-toggle-mobile svg{
  transition:transform .22s ease;
}
.app.is-collapsed .sidebar-edge-toggle svg,
.app.is-collapsed .topbar-toggle-mobile svg{
  transform:rotate(180deg);
}

.app.is-collapsed .sidebar .nav-item:hover::after{
  content:attr(data-title);
  position:absolute;
  left:72px;
  top:50%;
  transform:translateY(-50%);
  background:#111827;
  color:var(--sidebar-text-strong);
  border:1px solid rgba(255,255,255,.08);
  padding:8px 12px;
  border-radius:14px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 12px 30px rgba(2,8,23,.24);
  z-index:30;
}
.app.is-collapsed .sidebar .nav-summary:hover::after{
  content:none;
  display:none;
}
.app.is-collapsed .nav-summary.is-flyout-open{
  background:var(--sidebar-card-bg);
  border-color:var(--sidebar-card-border);
  color:var(--sidebar-text-strong);
}

.sidebar-flyout{
  position:absolute;
  top:0;
  left:calc(100% + 18px);
  width:320px;
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:40;
}
.sidebar-flyout.is-open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.sidebar-flyout-panel{
  background:rgba(11,15,23,.98);
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  padding:18px 16px 16px;
  box-shadow:var(--sidebar-panel-shadow);
  backdrop-filter:blur(10px);
  max-height:calc(100vh - 40px);
  overflow:auto;
}
.sidebar-flyout-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  color:var(--sidebar-text-strong);
  font-size:18px;
  font-weight:800;
}
.sidebar-flyout-header .nav-icon{
  width:20px;
  height:20px;
}
.sidebar-flyout .nav-sub{
  padding:0 0 0 16px;
}
.sidebar-flyout .nav-item{
  color:var(--sidebar-text-muted);
}
.sidebar-flyout .nav-item:hover,
.sidebar-flyout .nav-item.is-active{
  color:var(--sidebar-text-strong);
  background:var(--sidebar-card-bg-strong);
  border-color:var(--sidebar-card-border);
}
.sidebar-flyout .nav-subheader,
.sidebar-flyout .nav-subsub-title,
.sidebar-flyout .nav-subsub-group{
  color:rgba(248,250,252,.35);
}
.sidebar-flyout .nav-divider{
  background:rgba(255,255,255,.08);
}
.sidebar-flyout .nav-subsub{
  border-left-color:rgba(255,255,255,.12);
}

@media (max-width:1100px){
  .sidebar-edge-toggle{display:none;}
  .topbar-toggle-mobile{display:none;}
  .topbar-tenant-name{
    font-size:15px;
  }
  .topbar .page-title{
    font-size:21px;
  }
}

@media (max-width:860px){
  .topbar{
    height:auto;
    min-height:72px;
    padding-top:12px;
    padding-bottom:12px;
  }
  .topbar-heading-text{
    gap:8px;
  }
  .topbar-tenant-name,
  .topbar .page-title{
    white-space:normal;
  }
}


/* --- SAJEY refresh: sidebar flyout, hierarchy, logos, z-order --- */
.app .sidebar{
  z-index:260;
  overflow:visible;
}
.sidebar-flyout{
  position:fixed;
  top:0;
  left:0;
  z-index:99999;
  pointer-events:none;
}
.sidebar-flyout.is-open{
  pointer-events:auto;
}
.sidebar-flyout-panel{
  width:min(360px, calc(100vw - 32px));
  max-height:calc(100vh - 24px);
  overflow:auto;
}
.app .brand{
  align-items:flex-start;
}
.app .brand-logo-full{
  display:block;
  width:100%;
  max-width:228px;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.app .brand-logo-compact{
  display:none;
}
.app.is-collapsed .brand-logo-full{
  display:none;
}
.app.is-collapsed .brand-logo-compact{
  display:block;
}

.nav-subgroup,
.nav-subsubgroup{
  display:block;
  width:100%;
}
.nav-subsummary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:10px 12px;
  border-radius:14px;
  color:var(--sidebar-text-soft);
  cursor:pointer;
  user-select:none;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.nav-subsummary::-webkit-details-marker{
  display:none;
}
.nav-subgroup[open] > .nav-subsummary,
.nav-subsubgroup[open] > .nav-subsummary{
  background:rgba(255,255,255,.06);
  color:var(--sidebar-text);
}
.nav-subsummary .nav-icon{
  width:18px;
  height:18px;
}
.nav-subsummary .nav-icon svg{
  width:18px;
  height:18px;
}
.nav-subsummary .nav-text{
  flex:1 1 auto;
  min-width:0;
  font-size:14px;
  font-weight:700;
}
.nav-subsummary .nav-caret{
  display:flex;
  margin-left:auto;
  color:var(--sidebar-text-soft);
  transition:transform .18s ease;
}
.nav-subgroup[open] > .nav-subsummary .nav-caret,
.nav-subsubgroup[open] > .nav-subsummary .nav-caret{
  transform:rotate(180deg);
}
.nav-subgroup-body{
  margin:4px 0 8px 14px;
  padding-left:10px;
  border-left:1px solid rgba(255,255,255,.08);
  display:grid;
  gap:6px;
}
.nav-subgroup-static > .nav-item{margin-top:4px;}
.nav-subgroup-static.is-active > .nav-item{
  background:rgba(255,255,255,.08);
  color:var(--sidebar-text);
}
.nav-subgroup-static .nav-subgroup-body{margin-top:6px;}
.nav-subsubgroup .nav-subsub{
  margin:4px 0 8px 16px;
  padding-left:10px;
  border-left:1px solid rgba(255,255,255,.08);
}
.nav-subsummary-dept{
  min-height:40px;
  padding:8px 10px;
}
.nav-subsummary-dept .nav-text{
  font-weight:600;
}
.app.is-collapsed .nav-subsummary .nav-text,
.app.is-collapsed .nav-subsummary .nav-caret{
  display:none;
}
.app.is-collapsed .sidebar-flyout .nav-summary .nav-text,
.app.is-collapsed .sidebar-flyout .nav-summary .nav-caret,
.app.is-collapsed .sidebar-flyout .nav-subsummary .nav-text,
.app.is-collapsed .sidebar-flyout .nav-subsummary .nav-caret,
.app.is-collapsed .sidebar-flyout .nav-item .nav-text{
  display:block;
}
.app.is-collapsed .sidebar-flyout .nav-summary .nav-caret,
.app.is-collapsed .sidebar-flyout .nav-subsummary .nav-caret{
  display:flex;
}
.app.is-collapsed .sidebar-flyout .nav-summary,
.app.is-collapsed .sidebar-flyout .nav-subsummary,
.app.is-collapsed .sidebar-flyout .nav-item{
  justify-content:flex-start;
  min-height:42px;
  padding:10px 12px;
}
.app.is-collapsed .sidebar-flyout .nav-item::after,
.app.is-collapsed .sidebar-flyout .nav-summary::after,
.app.is-collapsed .sidebar-flyout .nav-subsummary::after{
  content:none;
}
.sidebar-flyout .nav-subgroup-body{
  margin-left:10px;
  padding-left:10px;
}
.topbar-tenant-logo{
  object-fit:contain;
  background:#fff;
}

/* --- Mobile shell / responsive navigation refresh --- */
.topbar-controls{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.topbar-controls-desktop{justify-content:flex-end;}
.topbar-controls-mobile{display:grid; gap:12px; width:100%;}
.topbar-user-note{padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:var(--panel); margin-top:0;}
.topbar-tools-toggle,
.mobile-nav-backdrop,
.mobile-tools-backdrop,
.mobile-tools-sheet,
.mobile-bottom-nav{display:none;}
.mobile-bottom-nav__item--button{appearance:none; -webkit-appearance:none; border:0; background:transparent; font:inherit; color:inherit; cursor:pointer;}

@media (max-width:1100px){
  .app.is-mobile{display:flex; min-height:100dvh;}
  .app.is-mobile .sidebar{
    display:flex;
    flex-direction:column;
    position:fixed;
    inset:0 auto 0 0;
    width:min(86vw, 340px);
    min-height:100dvh;
    padding:18px 14px 24px;
    transform:translateX(calc(-100% - 24px));
    transition:transform .24s ease;
    z-index:1400;
    overflow:auto;
    box-shadow:0 26px 54px rgba(2,8,23,.32);
  }
  .app.is-mobile.is-mobile-nav-open .sidebar{transform:translateX(0);}
  .app.is-mobile .sidebar-edge-toggle{display:none !important;}
  .app.is-mobile .brand{padding:6px 6px 10px;}
  .app.is-mobile .brand-logo-full{max-width:200px;}
  .app.is-mobile .main{width:100%; min-width:0;}

  .app.is-mobile .mobile-nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(2,8,23,.46);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:1350;
  }
  .app.is-mobile.is-mobile-nav-open .mobile-nav-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  .app.is-mobile .topbar{
    position:sticky;
    top:0;
    z-index:1200;
    height:auto;
    min-height:64px;
    padding:10px 14px;
    gap:10px;
  }
  .app.is-mobile .topbar-left{gap:10px; min-width:0;}
  .app.is-mobile .topbar-toggle-mobile,
  .app.is-mobile .topbar-tools-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    flex:0 0 auto;
    border-radius:14px;
  }
  .app.is-mobile .topbar-right-desktop{display:none;}
  .app.is-mobile .topbar-heading{min-width:0; gap:10px; flex:1 1 auto;}
  .app.is-mobile .topbar-tenant-logo{
    width:36px;
    height:36px;
    padding:3px;
    border-radius:10px;
  }
  .app.is-mobile .topbar-heading-text{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    min-width:0;
  }
  .app.is-mobile .topbar-title-sep{display:none;}
  .app.is-mobile .topbar-tenant-name{
    font-size:13px;
    line-height:1.1;
    white-space:normal;
  }
  .app.is-mobile .topbar .page-title{
    font-size:19px;
    line-height:1.15;
    white-space:normal;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }

  .app.is-mobile .flash-area{padding:12px 14px 0;}
  .app.is-mobile .content{padding:14px 14px 96px;}
  .app.is-mobile .footer{
    padding:16px 14px 96px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .app.is-mobile .page-header{flex-direction:column; align-items:stretch;}
  .app.is-mobile .page-actions,
  .app.is-mobile .kw-summary-toolbar,
  .app.is-mobile .kw-summary-toolbar__actions{width:100%;}
  .app.is-mobile .kw-summary-toolbar__actions{margin-left:0; align-items:stretch;}
  .app.is-mobile .kw-summary-filter{width:100%;}
  .app.is-mobile .page-actions .btn,
  .app.is-mobile .action-hero .btn,
  .app.is-mobile .actions-bar .btn{width:100%; justify-content:center;}
  .app.is-mobile .actions-bar{flex-direction:column;}

  .app.is-mobile .form-row{grid-template-columns:1fr;}
  .app.is-mobile .col-3,
  .app.is-mobile .col-4,
  .app.is-mobile .col-5,
  .app.is-mobile .col-6,
  .app.is-mobile .col-8,
  .app.is-mobile .col-12{grid-column:1 / -1;}

  .app.is-mobile .table-wrap{overflow:auto; -webkit-overflow-scrolling:touch;}
  .app.is-mobile .table-toolbar,
  .app.is-mobile .table-toolbar .tt-left,
  .app.is-mobile .table-toolbar .tt-right,
  .app.is-mobile .table-toolbar .tt-filters,
  .app.is-mobile .table-toolbar .tt-quick{flex-direction:column; align-items:stretch;}
  .app.is-mobile .table-toolbar select,
  .app.is-mobile .table-toolbar .btn{width:100%;}
  .app.is-mobile .card-header,
  .app.is-mobile .card-body,
  .app.is-mobile .card-pad{padding-left:14px; padding-right:14px;}

  .app.is-mobile .mobile-tools-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(2,8,23,.44);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:1490;
  }
  .app.is-mobile.is-mobile-tools-open .mobile-tools-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  .app.is-mobile .mobile-tools-sheet{
    display:block;
    position:fixed;
    left:12px;
    right:12px;
    bottom:84px;
    z-index:1500;
    background:rgba(255,255,255,.985);
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:0 24px 50px rgba(2,8,23,.24);
    transform:translateY(18px);
    opacity:0;
    pointer-events:none;
    transition:transform .22s ease, opacity .22s ease;
    max-height:calc(100dvh - 118px);
    overflow:auto;
  }
  .app.is-mobile.is-mobile-tools-open .mobile-tools-sheet{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .mobile-tools-sheet__header{
    position:sticky;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 14px 0;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
    z-index:2;
  }
  .mobile-tools-sheet__title{font-size:16px; font-weight:800; letter-spacing:-.02em;}
  .mobile-tools-sheet__body{padding:14px;}
  .topbar-controls-mobile .cmd-btn,
  .topbar-controls-mobile .profile-form,
  .topbar-controls-mobile .tenant-form,
  .topbar-controls-mobile .logout-form,
  .topbar-controls-mobile .select,
  .topbar-controls-mobile .btn{width:100%;}
  .topbar-controls-mobile .cmd-btn,
  .topbar-controls-mobile .btn{justify-content:center;}
  .topbar-controls-mobile .small-note{margin-top:0;}

  .app.is-mobile .mobile-bottom-nav{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(0,1fr));
    gap:6px;
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:1480;
    padding:8px;
    border-radius:24px;
    background:rgba(11,15,23,.96);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 22px 44px rgba(2,8,23,.28);
    backdrop-filter:blur(10px);
  }
  .mobile-bottom-nav__item{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height:58px;
    padding:8px 6px;
    border-radius:18px;
    color:rgba(248,250,252,.72);
    text-align:center;
    transition:background .18s ease, color .18s ease;
  }
  .mobile-bottom-nav__item.is-active{
    background:rgba(255,255,255,.08);
    color:#fff;
  }
  .mobile-bottom-nav__icon{
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .mobile-bottom-nav__icon svg{width:20px; height:20px; display:block;}
  .mobile-bottom-nav__label{
    font-size:11px;
    font-weight:700;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
}

body.mobile-shell-lock{overflow:hidden;}

.select2-container--open{z-index:1601;}


/* --- Operasi / jabatan / bahagian mobile refinements --- */
@media (max-width:1100px){
  .app.is-mobile .grid.cols-2,
  .app.is-mobile .grid.cols-3,
  .app.is-mobile .grid.cols-4,
  .app.is-mobile .grid.cols-5,
  .app.is-mobile .grid.cols-6{
    grid-template-columns:1fr;
  }

  .app.is-mobile .tabs{
    gap:8px;
    flex-wrap:wrap;
    align-items:stretch;
    overflow:visible;
    margin-bottom:12px;
  }
  .app.is-mobile .tab{
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--panel);
    border-bottom-width:1px;
    white-space:normal;
    line-height:1.25;
  }
  .app.is-mobile .tab.is-active{
    color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    border-color:transparent;
  }
  .app.is-mobile .tabs > div[style*="margin-left:auto"]{
    display:none !important;
  }
  .app.is-mobile .tabs > .badge{
    order:99;
    width:100%;
    text-align:center;
  }
  .app.is-mobile .subbar{
    flex-wrap:wrap;
    gap:6px;
  }
  .app.is-mobile .chip{
    white-space:normal;
  }
  .app.is-mobile .content [style*="display:flex"][style*="justify-content:space-between"]{
    flex-direction:column;
    align-items:stretch !important;
  }
  .app.is-mobile .table td form[style*="display:flex"],
  .app.is-mobile .card form[style*="display:flex"],
  .app.is-mobile .form-row > div[style*="display:flex"]{
    flex-direction:column;
    align-items:stretch !important;
  }
  .app.is-mobile .table td form[style*="display:flex"] .btn,
  .app.is-mobile .card form[style*="display:flex"] .btn,
  .app.is-mobile .form-row > div[style*="display:flex"] .btn,
  .app.is-mobile .task-card-grid .task-card-action .btn{
    width:100%;
    justify-content:center;
  }
  .app.is-mobile form[style*="min-width:"],
  .app.is-mobile [style*="min-width:260px"],
  .app.is-mobile [style*="min-width:280px"]{
    min-width:0 !important;
    width:100%;
  }
  .app.is-mobile .table-wrap{
    border-radius:14px;
  }
  .app.is-mobile .kpi-card .kpi-value,
  .app.is-mobile .kw-summary-card__balance-value{
    font-size:24px;
  }
}


/* --- Universal narrow-screen overrides (works even if JS mobile class is absent) --- */
@media (max-width:1100px){
  .app{
    display:flex;
    min-height:100dvh;
  }

  /* Turn desktop left rail into off-canvas drawer */
  .app .sidebar{
    display:flex !important;
    flex-direction:column;
    position:fixed;
    inset:0 auto 0 0;
    width:min(86vw, 340px) !important;
    min-height:100dvh;
    padding:18px 14px 24px;
    transform:translateX(calc(-100% - 24px));
    transition:transform .24s ease;
    z-index:1400;
    overflow:auto;
    box-shadow:0 26px 54px rgba(2,8,23,.32);
  }
  .app.is-mobile-nav-open .sidebar{
    transform:translateX(0);
  }
  .app .sidebar-edge-toggle{display:none !important;}

  /* Neutralise persisted desktop collapsed mode on narrow screens */
  .app.is-collapsed .sidebar{
    width:min(86vw, 340px) !important;
    padding:18px 14px 24px !important;
    transform:translateX(calc(-100% - 24px));
  }
  .app.is-collapsed.is-mobile-nav-open .sidebar{
    transform:translateX(0);
  }
  .app.is-collapsed .brand{
    align-items:flex-start;
  }
  .app.is-collapsed .brand-logo-full,
  .app.is-collapsed .brand-title,
  .app.is-collapsed .brand-sub,
  .app.is-collapsed .nav-text,
  .app.is-collapsed .nav-summary .nav-text,
  .app.is-collapsed .nav-subsummary .nav-text,
  .app.is-collapsed .nav-subsub-title,
  .app.is-collapsed .nav-subsub-group{
    display:block;
  }
  .app.is-collapsed .brand-logo-compact{
    display:none;
  }
  .app.is-collapsed .nav-summary,
  .app.is-collapsed .nav-item{
    justify-content:flex-start;
  }
  .app.is-collapsed .nav-item{
    padding:12px 14px;
  }
  .app.is-collapsed .nav-summary{
    padding:10px 12px;
  }
  .app.is-collapsed details.nav-group > .nav-sub{
    display:flex !important;
  }
  .app.is-collapsed .nav-subsub{
    display:flex;
  }
  .app.is-collapsed .nav-subsummary .nav-caret{
    display:flex;
  }
  .app.is-collapsed .nav-item:hover::after,
  .app.is-collapsed .nav-summary:hover::after,
  .app.is-collapsed .nav-subsummary:hover::after{
    content:none;
  }

  .app .mobile-nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(2,8,23,.46);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:1350;
  }
  .app.is-mobile-nav-open .mobile-nav-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  .app .main{
    width:100%;
    min-width:0;
  }

  .app .topbar{
    position:sticky;
    top:0;
    z-index:1200;
    height:auto;
    min-height:64px;
    padding:10px 14px;
    gap:10px;
  }
  .app .topbar-left{
    gap:10px;
    min-width:0;
  }
  .app .topbar-right-desktop{
    display:none !important;
  }
  .app .topbar-toggle-mobile,
  .app .topbar-tools-toggle{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    flex:0 0 auto;
    border-radius:14px;
  }
  .app .topbar-heading{
    min-width:0;
    gap:10px;
    flex:1 1 auto;
  }
  .app .topbar-tenant-logo{
    width:36px;
    height:36px;
    padding:3px;
    border-radius:10px;
  }
  .app .topbar-heading-text{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    min-width:0;
  }
  .app .topbar-title-sep{
    display:none;
  }
  .app .topbar-tenant-name{
    font-size:13px;
    line-height:1.1;
    white-space:normal;
  }
  .app .topbar .page-title{
    font-size:19px;
    line-height:1.15;
    white-space:normal;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }

  .app .mobile-tools-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(2,8,23,.44);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:1490;
  }
  .app.is-mobile-tools-open .mobile-tools-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  .app .mobile-tools-sheet{
    display:block;
    position:fixed;
    left:12px;
    right:12px;
    bottom:84px;
    z-index:1500;
    background:rgba(255,255,255,.985);
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:0 24px 50px rgba(2,8,23,.24);
    transform:translateY(18px);
    opacity:0;
    pointer-events:none;
    transition:transform .22s ease, opacity .22s ease;
    max-height:calc(100dvh - 118px);
    overflow:auto;
  }
  .app.is-mobile-tools-open .mobile-tools-sheet{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .app .flash-area{
    padding:12px 14px 0;
  }
  .app .content{
    padding:14px 14px 96px;
  }
  .app .footer{
    padding:16px 14px 96px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .app .mobile-bottom-nav{
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(0,1fr));
    gap:6px;
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:1480;
    padding:8px;
    border-radius:24px;
    background:rgba(11,15,23,.96);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 22px 44px rgba(2,8,23,.28);
    backdrop-filter:blur(10px);
  }

  /* Make all operasi/jabatan/bahagian content stack cleanly */
  .app .grid.cols-2,
  .app .grid.cols-3,
  .app .grid.cols-4,
  .app .grid.cols-5,
  .app .grid.cols-6,
  .app .summary-grid-2{
    grid-template-columns:1fr !important;
  }

  .app .page-header,
  .app .kw-summary-toolbar,
  .app .kw-summary-toolbar__actions,
  .app .actions-bar,
  .app .table-toolbar,
  .app .table-toolbar .tt-left,
  .app .table-toolbar .tt-right,
  .app .table-toolbar .tt-filters,
  .app .table-toolbar .tt-quick,
  .app .subbar,
  .app .topbar-controls{
    flex-direction:column;
    align-items:stretch;
  }

  .app .page-actions,
  .app .kw-summary-toolbar__actions{
    width:100%;
    margin-left:0;
  }

  .app .tabs{
    gap:8px;
    flex-wrap:wrap;
    align-items:stretch;
    overflow:visible;
    margin-bottom:12px;
  }
  .app .tab{
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--panel);
    border-bottom-width:1px;
    white-space:normal;
    line-height:1.25;
  }
  .app .tab.is-active{
    color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    border-color:transparent;
  }
  .app .tabs > div[style*="margin-left:auto"]{
    display:none !important;
  }
  .app .tabs > .badge{
    order:99;
    width:100%;
    text-align:center;
  }
  .app .chip{
    white-space:normal;
  }

  .app .form-row{
    grid-template-columns:1fr;
  }
  .app .col-3,
  .app .col-4,
  .app .col-5,
  .app .col-6,
  .app .col-8,
  .app .col-12{
    grid-column:1 / -1;
  }

  .app .table-wrap{
    width:100%;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:14px;
  }

  /* Common inline layouts found across jabatan/bahagian pages */
  .app .content [style*="display:flex"][style*="justify-content:space-between"],
  .app .content [style*="display:flex; justify-content:space-between"]{
    flex-direction:column;
    align-items:stretch !important;
  }
  .app .content [style*="display:flex"][style*="align-items:flex-start"],
  .app .content [style*="display:flex; gap:8px"],
  .app .content [style*="display:flex; gap:10px"],
  .app .content [style*="display:flex; gap:12px"]{
    flex-wrap:wrap;
  }
  .app .table td form[style*="display:flex"],
  .app .card form[style*="display:flex"],
  .app .form-row > div[style*="display:flex"],
  .app .content [style*="display:flex"][style*="gap:8px"],
  .app .content [style*="display:flex"][style*="gap:10px"],
  .app .content [style*="display:flex"][style*="gap:12px"]{
    flex-direction:column;
    align-items:stretch !important;
  }

  .app .page-actions .btn,
  .app .action-hero .btn,
  .app .actions-bar .btn,
  .app .table-toolbar select,
  .app .table-toolbar .btn,
  .app .table td form[style*="display:flex"] .btn,
  .app .card form[style*="display:flex"] .btn,
  .app .form-row > div[style*="display:flex"] .btn,
  .app .content [style*="display:flex"][style*="gap:8px"] > .btn,
  .app .content [style*="display:flex"][style*="gap:10px"] > .btn,
  .app .content [style*="display:flex"][style*="gap:12px"] > .btn,
  .app .task-card-grid .task-card-action .btn{
    width:100%;
    justify-content:center;
  }

  .app .content form[style*="max-width:"],
  .app .content form[style*="min-width:"],
  .app .content [style*="min-width:220px"],
  .app .content [style*="min-width:240px"],
  .app .content [style*="min-width:260px"],
  .app .content [style*="min-width:280px"],
  .app .content input[style*="width:120px"],
  .app .content input[style*="width:220px"]{
    max-width:none !important;
    min-width:0 !important;
    width:100% !important;
  }

  .app .card-header,
  .app .card-body,
  .app .card-pad{
    padding-left:14px;
    padding-right:14px;
  }

  .app .kpi-card .kpi-value,
  .app .summary-card .summary-value,
  .app .kw-summary-card__balance-value{
    font-size:24px;
  }
}

/* e-Lesen foundation */
.licence-hero-card{
  background:linear-gradient(135deg, rgba(67,97,238,.08), rgba(67,97,238,.02));
}
.licence-action-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;
}
.licence-action-tile{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow-soft);
  color:inherit;
  text-decoration:none;
}
.licence-action-tile:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.licence-action-tile.is-active{
  border-color:rgba(67,97,238,.45);
  background:rgba(67,97,238,.06);
}
.licence-filter-bar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px 12px;
  align-items:end;
}
.licence-filter-actions{
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.lic-edit-form{
  display:grid;
  gap:12px;
}
.lic-action-block{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(15,23,42,.02);
}
.lic-data-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.lic-data-grid > div{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.lic-data-grid strong{
  font-size:14px;
  line-height:1.45;
  word-break:break-word;
}
.lic-check-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
}
.lic-check-item.is-ok{
  background:rgba(34,197,94,.08);
  border-color:rgba(34,197,94,.35);
}
.lic-check-item.is-pending{
  background:rgba(148,163,184,.06);
}
.lic-stepper{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:12px;
}
.lic-step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel);
}
.lic-step-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:#cbd5e1;
}
.lic-step.done .lic-step-dot{
  background:#22c55e;
}
.lic-step.active{
  border-color:rgba(67,97,238,.45);
  background:rgba(67,97,238,.06);
}
.lic-step.active .lic-step-dot{
  background:var(--primary);
}
.lic-step-label{
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}

/* Public licence status */
.licence-public-shell{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:24px 16px 48px;
  background:linear-gradient(180deg, #eef8f1 0%, #dff1e6 100%);
}
.auth-main .licence-public-shell{
  padding-top:0;
}
.licence-public-card{
  width:min(1080px,100%);
}
.licence-public-header{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  flex-wrap:wrap;
  padding:18px 20px;
  border-radius:24px;
  border:1px solid rgba(15,118,70,.16);
  background:linear-gradient(135deg, rgba(6,78,59,.96), rgba(22,101,52,.92));
  color:#fff;
  box-shadow:0 22px 50px rgba(15,23,42,.18);
}
.licence-public-brand{
  display:flex;
  gap:14px;
  align-items:center;
}
.licence-public-brand img{
  width:64px;
  height:64px;
  object-fit:contain;
  border-radius:16px;
  background:#fff;
  padding:8px;
}
.licence-public-kicker{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.8;
}
.licence-public-title{
  font-size:24px;
  font-weight:900;
  line-height:1.1;
  margin-top:4px;
}
.licence-public-subtitle{
  font-size:14px;
  line-height:1.5;
  opacity:.88;
}
.licence-public-summary{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
  padding:18px 20px;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow-soft);
}
.licence-public-ref{
  font-size:30px;
  font-weight:900;
  line-height:1.1;
}
.licence-public-footer{
  margin-top:16px;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.9);
}

.licence-public-header .btn{
  background:rgba(255,255,255,.96);
  color:var(--text);
  border-color:rgba(255,255,255,.55);
}
.licence-public-header .btn:hover{
  background:#fff;
  border-color:#fff;
}
.licence-public-header .btn-primary{
  color:#fff;
  border-color:transparent;
}

.licence-public-shell .btn-primary,
.licence-public-shell .btn-info{
  background:linear-gradient(135deg, #0f6a3b, #157347);
  color:#fff;
  border-color:transparent;
}
.licence-public-shell .btn-primary:hover,
.licence-public-shell .btn-info:hover{
  filter:brightness(.97);
}
.licence-public-shell .btn:hover{
  background:rgba(15,118,70,.08);
  border-color:rgba(15,118,70,.22);
}
.licence-public-shell .card{
  border-color:rgba(15,118,70,.14);
}
.licence-public-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.licence-public-toolbar > div{min-width:220px; flex:1 1 220px;}
.licence-public-toolbar form{min-width:240px; flex:1 1 240px; margin:0;}
.licence-public-stack{display:grid; gap:16px;}
.licence-doc-upload-list{display:grid; gap:12px;}
.licence-doc-upload-item{padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.8);}
.licence-doc-upload-item strong{display:block; margin-bottom:4px;}
.licence-doc-upload-item .small-note{margin-top:6px;}

@media (max-width: 900px){
  .lic-data-grid{
    grid-template-columns:1fr;
  }
  .licence-public-shell .grid.cols-2,
  .licence-public-shell .grid.cols-3{
    grid-template-columns:1fr;
  }
}
@media (max-width: 720px){
  .licence-filter-bar,
  .lic-stepper,
  .licence-action-tiles{
    grid-template-columns:1fr;
  }
  .licence-public-shell{
    padding:12px 10px 28px;
  }
  .licence-public-header{
    gap:12px;
  }
  .licence-public-brand{
    align-items:flex-start;
  }
  .licence-public-toolbar,
  .licence-public-toolbar > div,
  .licence-public-toolbar form{
    width:100%;
    min-width:0;
  }
  .licence-public-toolbar .btn,
  .licence-public-toolbar .select{
    width:100%;
  }
  .licence-filter-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .licence-filter-actions .btn{
    width:100%;
    justify-content:center;
  }
  .licence-public-header,
  .licence-public-summary{
    padding:16px;
  }
  .licence-public-brand img{
    width:56px;
    height:56px;
  }
  .licence-public-title{
    font-size:20px;
  }
  .licence-public-ref{
    font-size:24px;
  }
}


.lic-checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}
.lic-checkbox-card{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:rgba(15,23,42,.02);cursor:pointer;}
.lic-checkbox-card input{margin-top:3px;}
.lic-checkbox-card.is-checked,.lic-checkbox-card:has(input:checked){border-color:rgba(67,97,238,.45);background:rgba(67,97,238,.06);}
.attachment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
.attachment-chip{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--panel);}
.attachment-chip small{color:var(--muted);}
.licence-form-note{padding:12px 14px;border-radius:14px;background:rgba(15,23,42,.03);border:1px dashed var(--border);}
.print-issued-title{font-size:28px;font-weight:900;letter-spacing:.04em;text-align:center;margin-bottom:10px;}
.print-issued-license-no{font-size:18px;font-weight:800;text-align:center;margin-bottom:16px;}
.print-issued-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;}
@media (max-width:720px){.lic-checkbox-grid,.attachment-grid,.print-issued-meta{grid-template-columns:1fr;}}


/* ==========================================================
   Phase 16K/L – tab-style top menu + source-clean modal entry
   ========================================================== */
.page-tab-stack{display:grid; gap:6px; margin:0 0 12px;}
.tabs.tabs-primary{
  display:flex;
  gap:4px;
  align-items:flex-end;
  overflow:auto;
  margin:0;
  padding:0 0 1px;
  background:#fff;
  border:none;
  border-bottom:1px solid #111827;
  border-radius:0;
}
.tabs.tabs-primary .tab{
  display:inline-flex;
  align-items:center;
  padding:12px 16px;
  color:#000;
  border:1px solid #111827;
  border-bottom:none;
  background:#fff;
  border-radius:10px 10px 0 0;
  white-space:nowrap;
  font-weight:400;
}
.tabs.tabs-primary .tab:hover{background:#f8fafc; color:#000;}
.tabs.tabs-primary .tab.is-active{background:#111827; color:#fff; font-weight:400;}
.tabs.tabs-primary .tab.is-disabled{opacity:.45; cursor:not-allowed;}
.tabs.tabs-secondary,
.subbar.subbar-secondary{
  display:flex;
  gap:4px;
  align-items:flex-end;
  overflow:auto;
  margin:0;
  padding:0 0 1px;
  background:#fff;
  border:none;
  border-bottom:1px solid #d1d5db;
  border-radius:0;
}
.tabs.tabs-secondary .tab{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  color:#111827;
  border:1px solid #d1d5db;
  border-bottom:none;
  border-radius:10px 10px 0 0;
  background:#fff;
  white-space:nowrap;
  font-weight:400;
}
.tabs.tabs-secondary .tab:hover{background:#f8fafc; color:#111827;}
.tabs.tabs-secondary .tab.is-active{
  color:#111827;
  background:#e5e7eb;
  font-weight:700;
  box-shadow:none;
}
.subbar.subbar-secondary{padding:8px 0 0; gap:8px;}
.subbar.subbar-secondary .chip{
  border-radius:10px;
  background:#fff;
  border-color:#d7dee8;
}
.tabs.tabs-primary > div[style*="margin-left:auto"],
.tabs.tabs-secondary > div[style*="margin-left:auto"]{display:none !important;}

.page-tab-actions{margin:12px 0 16px;}
.page-actions-inline{margin-top:12px;}
.modal-entry-note{display:grid; gap:10px; margin:10px 0 0;}
.modal-entry-note .alert{margin:0;}
.modal-entry-note .page-actions{margin:0;}
.modal-entry-note .btn-xl{min-width:240px; justify-content:center;}
.page-header + .page-actions{margin-top:-4px; margin-bottom:14px;}

@media (max-width:1100px){
  .tabs.tabs-primary,.tabs.tabs-secondary,.subbar.subbar-secondary{
    border-radius:14px;
    border:1px solid var(--border);
  }
  .tabs.tabs-primary{border-bottom:1px solid var(--border);}
}

/* Portal utama awam */
.portal-main-shell{
  background:linear-gradient(180deg, #edf6f0 0%, #e3efe8 100%);
  padding-left:0;
  padding-right:0;
}

.auth-main-wide{max-width:none !important; width:100% !important;}
body[data-page="operasi/portal_awam"] .auth-shell{padding:0 !important; align-items:stretch; justify-content:flex-start;}
body[data-page="operasi/portal_awam"] .auth-main{max-width:none !important; width:100% !important; padding:0 !important; background:transparent !important; box-shadow:none !important;}
body[data-page="operasi/portal_awam"] .portal-main-shell{padding:0 0 32px;}
body[data-page="operasi/portal_awam"] .content{width:100%; max-width:none;}
body[data-page="operasi/portal_awam"] .portal-main-shell,
body[data-page="operasi/portal_awam"] .portal-main-card,
body[data-page="operasi/portal_awam"] .portal-main-shell .licence-public-card{width:100%; max-width:none;}
body[data-page="operasi/portal_awam"] .portal-main-card{width:100%; max-width:none; margin:0;}
body[data-page="operasi/portal_awam"] .portal-main-shell{padding-left:0; padding-right:0;}
body[data-page="operasi/harta_public"] .auth-main,
body[data-page="operasi/taksiran_bill_public"] .auth-main{max-width:none; width:100%;}

.portal-main-grid{
  display:grid;
  grid-template-columns:minmax(380px, 5fr) minmax(520px, 7fr);
  gap:18px;
  align-items:start;
}
.portal-main-hero{
  min-height:520px;
  padding:24px 26px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, rgba(5,97,58,.98), rgba(11,108,67,.95));
  color:#fff;
  box-shadow:0 24px 48px rgba(15,23,42,.12);
  display:grid;
  gap:18px;
}
.portal-main-note-list{display:grid; gap:12px;}
.portal-main-note{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.08);
  line-height:1.5;
}
.portal-main-login-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.portal-main-side{display:grid; gap:18px;}
.portal-main-selector{
  border-radius:28px;
  border:2px solid rgba(67,97,238,.22);
  box-shadow:0 16px 32px rgba(15,23,42,.08);
}
.portal-main-quick-links{display:flex; gap:10px; flex-wrap:wrap;}
.portal-main-service-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.portal-main-service-card,
.portal-main-footer-card{border-radius:24px;}
.portal-main-chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.portal-main-chip-row .badge{
  background:#edf7f0;
  color:#0f5132;
  border-color:rgba(15,118,70,.14);
}
@media (max-width: 980px){
  .portal-main-grid{grid-template-columns:1fr;}
  .portal-main-service-grid{grid-template-columns:1fr;}
  .portal-main-hero{min-height:0;}
}

/* ==========================================================
   Public portal standardisation — module portals only
   Layout: header + content 4/8, category buttons left, form right.
   Main portal awam remains unchanged.
   ========================================================== */
body[data-page="operasi/lesen_public"] .auth-main,
body[data-page="operasi/taksiran_public"] .auth-main,
body[data-page="operasi/taksiran_bill_public"] .auth-main,
body[data-page="operasi/harta_public"] .auth-main,
body[data-page="operasi/pasar_public"] .auth-main,
body[data-page="operasi/kebersihan_public"] .auth-main,
body[data-page="operasi/kesihatan_public"] .auth-main,
body[data-page="operasi/lesen_status"] .auth-main,
body[data-page="operasi/taksiran_status"] .auth-main,
body[data-page="operasi/harta_status"] .auth-main,
body[data-page="operasi/pasar_status"] .auth-main,
body[data-page="operasi/kebersihan_status"] .auth-main,
body[data-page="operasi/kesihatan_status"] .auth-main{
  max-width:none;
  width:100%;
}
body[data-page="operasi/lesen_public"] .licence-public-card,
body[data-page="operasi/taksiran_public"] .licence-public-card,
body[data-page="operasi/taksiran_bill_public"] .licence-public-card,
body[data-page="operasi/harta_public"] .licence-public-card,
body[data-page="operasi/pasar_public"] .licence-public-card,
body[data-page="operasi/kebersihan_public"] .licence-public-card,
body[data-page="operasi/kesihatan_public"] .licence-public-card{
  width:min(1160px,100%);
}
.portal-public-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.portal-public-links .btn{
  padding:8px 12px;
  border-radius:12px;
  font-size:12px;
}
.licence-public-header .card{
  background:#f8fafc;
  border-radius:24px;
  color:var(--text);
}
.portal-standard-layout{
  display:grid;
  grid-template-columns:minmax(260px, 4fr) minmax(520px, 8fr);
  gap:18px;
  margin-top:18px;
  align-items:start;
}
.portal-standard-left,
.portal-standard-right{
  display:grid;
  gap:18px;
}
.portal-standard-layout > .card,
.portal-standard-left > .card,
.portal-standard-right > .card{
  border-radius:18px;
}
.portal-category-list{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.portal-category-btn,
.portal-standard-layout > .card:first-child a.btn,
.portal-standard-left > .card:first-child a.btn{
  justify-content:flex-start !important;
  text-align:left !important;
  gap:10px;
  min-height:42px;
}
.portal-category-icon{
  display:inline-flex;
  width:26px;
  height:26px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(15,118,70,.09);
  flex:0 0 26px;
}
.portal-form-instruction{
  margin-bottom:12px;
  border-style:dashed;
}
.portal-public-rate-table{margin-top:18px;}
@media (max-width: 980px){
  .portal-standard-layout{grid-template-columns:1fr;}
}

/* Public portal header refinement: match Pengurusan Harta layout with PBT card taking half width. */
body[data-page="operasi/lesen_public"] .licence-public-header .portal-pbt-card,
body[data-page="operasi/taksiran_public"] .licence-public-header > .card,
body[data-page="operasi/harta_public"] .licence-public-header > .card,
body[data-page="operasi/pasar_public"] .licence-public-header > .card,
body[data-page="operasi/kebersihan_public"] .licence-public-header > .card,
body[data-page="operasi/kesihatan_public"] .licence-public-header > .card{
  flex:0 1 calc(50% - 8px) !important;
  max-width:none;
}
body[data-page="operasi/lesen_public"] .licence-public-brand,
body[data-page="operasi/taksiran_public"] .licence-public-brand,
body[data-page="operasi/harta_public"] .licence-public-brand,
body[data-page="operasi/pasar_public"] .licence-public-brand,
body[data-page="operasi/kebersihan_public"] .licence-public-brand,
body[data-page="operasi/kesihatan_public"] .licence-public-brand{
  flex:1 1 calc(50% - 8px) !important;
}
@media (max-width: 980px){
  body[data-page="operasi/lesen_public"] .licence-public-header .portal-pbt-card,
  body[data-page="operasi/taksiran_public"] .licence-public-header > .card,
  body[data-page="operasi/harta_public"] .licence-public-header > .card,
  body[data-page="operasi/pasar_public"] .licence-public-header > .card,
  body[data-page="operasi/kebersihan_public"] .licence-public-header > .card,
  body[data-page="operasi/kesihatan_public"] .licence-public-header > .card,
  body[data-page="operasi/lesen_public"] .licence-public-brand,
  body[data-page="operasi/taksiran_public"] .licence-public-brand,
  body[data-page="operasi/harta_public"] .licence-public-brand,
  body[data-page="operasi/pasar_public"] .licence-public-brand,
  body[data-page="operasi/kebersihan_public"] .licence-public-brand,
  body[data-page="operasi/kesihatan_public"] .licence-public-brand{
    flex:1 1 100% !important;
  }
}
body[data-page="operasi/taksiran_bill_public"] .licence-public-header .portal-pbt-card{
  flex:0 1 calc(50% - 8px) !important;
  max-width:none;
}
body[data-page="operasi/taksiran_bill_public"] .licence-public-brand{
  flex:1 1 calc(50% - 8px) !important;
}
@media (max-width: 980px){
  body[data-page="operasi/taksiran_bill_public"] .licence-public-header .portal-pbt-card,
  body[data-page="operasi/taksiran_bill_public"] .licence-public-brand{
    flex:1 1 100% !important;
  }
}

/* ==========================================================
   Patch: stacked operational tabs, 4-level colour hierarchy
   ========================================================== */
.page-tab-stack{
  display:grid;
  gap:0;
  margin:0 0 14px;
  border-radius:0;
  overflow:visible;
}
.page-tab-stack .tabs,
.page-tab-stack .subbar{
  display:flex;
  align-items:stretch;
  gap:0;
  margin:0;
  padding:0 6px;
  border:0;
  border-radius:0;
  overflow:auto;
  box-shadow:none;
}
.page-tab-stack .tabs .tab,
.page-tab-stack .subbar .chip{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 13px;
  border:0;
  border-radius:0;
  border-bottom:0;
  background:transparent;
  box-shadow:none;
  white-space:nowrap;
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
  text-decoration:none;
}
.page-tab-stack .tabs .tab:hover,
.page-tab-stack .subbar .chip:hover{filter:brightness(1.08);}

.tabs.tabs-primary,
.tabs.tabs-level-1,
.subbar.tabs-level-1{
  background:#050505;
  border-bottom:1px solid #111;
}
.tabs.tabs-primary .tab,
.tabs.tabs-level-1 .tab,
.subbar.tabs-level-1 .chip{color:#f9fafb;}
.tabs.tabs-primary .tab.is-active,
.tabs.tabs-level-1 .tab.is-active,
.subbar.tabs-level-1 .chip.is-active{
  background:#3f3f46;
  color:#fff;
}

.tabs.tabs-level-2,
.subbar.tabs-level-2{
  background:#3f3f46;
  border-bottom:1px solid #52525b;
}
.tabs.tabs-level-2 .tab,
.subbar.tabs-level-2 .chip{color:#f8fafc;}
.tabs.tabs-level-2 .tab.is-active,
.subbar.tabs-level-2 .chip.is-active{
  background:#9ca3af;
  color:#111827;
}

.tabs.tabs-level-3,
.subbar.tabs-level-3{
  background:#9ca3af;
  border-bottom:1px solid #d1d5db;
}
.tabs.tabs-level-3 .tab,
.subbar.tabs-level-3 .chip{color:#111827;}
.tabs.tabs-level-3 .tab.is-active,
.subbar.tabs-level-3 .chip.is-active{
  background:#e5e7eb;
  color:#111827;
}

.tabs.tabs-level-4,
.subbar.tabs-level-4{
  background:#e5e7eb;
  border-bottom:1px solid #f3f4f6;
}
.tabs.tabs-level-4 .tab,
.subbar.tabs-level-4 .chip{color:#111827;}
.tabs.tabs-level-4 .tab.is-active,
.subbar.tabs-level-4 .chip.is-active{
  background:#f9fafb;
  color:#111827;
}

@media (max-width:1100px){
  .page-tab-stack .tabs,
  .page-tab-stack .subbar{border-radius:0;}
  .page-tab-stack .tabs .tab,
  .page-tab-stack .subbar .chip{font-size:11px;padding:9px 12px;}
}


/* Perlesenan tab refinement rollback */
.page-tab-stack{display:block !important;margin:0 0 14px !important;padding:0 !important;background:transparent !important;border:0 !important;}
.page-tab-stack .tabs,.page-tab-stack .subbar,.tabs.tabs-primary,.tabs.tabs-secondary,.tabs.tabs-level-1,.tabs.tabs-level-2,.tabs.tabs-level-3,.tabs.tabs-level-4,.subbar.tabs-level-1,.subbar.tabs-level-2,.subbar.tabs-level-3,.subbar.tabs-level-4{display:flex !important;gap:22px !important;align-items:flex-end !important;overflow:auto !important;margin:6px 0 14px 0 !important;padding:0 !important;background:transparent !important;border:0 !important;border-bottom:0 !important;border-radius:0 !important;}
.page-tab-stack .tabs .tab,.tabs.tabs-primary .tab,.tabs.tabs-secondary .tab,.tabs.tabs-level-1 .tab,.tabs.tabs-level-2 .tab,.tabs.tabs-level-3 .tab,.tabs.tabs-level-4 .tab{display:inline-flex !important;align-items:center !important;min-height:0 !important;padding:8px 2px !important;font-weight:700 !important;font-size:13px !important;letter-spacing:normal !important;color:var(--muted) !important;border:0 !important;border-bottom:3px solid transparent !important;background:transparent !important;border-radius:0 !important;white-space:nowrap !important;box-shadow:none !important;text-decoration:none !important;}
.page-tab-stack .tabs .tab:hover,.tabs.tabs-primary .tab:hover,.tabs.tabs-secondary .tab:hover,.tabs.tabs-level-1 .tab:hover,.tabs.tabs-level-2 .tab:hover,.tabs.tabs-level-3 .tab:hover,.tabs.tabs-level-4 .tab:hover{background:transparent !important;color:var(--primary) !important;filter:none !important;}
.page-tab-stack .tabs .tab.is-active,.tabs.tabs-primary .tab.is-active,.tabs.tabs-secondary .tab.is-active,.tabs.tabs-level-1 .tab.is-active,.tabs.tabs-level-2 .tab.is-active,.tabs.tabs-level-3 .tab.is-active,.tabs.tabs-level-4 .tab.is-active{color:var(--primary) !important;border-bottom-color:var(--primary) !important;background:transparent !important;font-weight:700 !important;box-shadow:none !important;}
.page-tab-stack .tabs .tab.is-disabled,.tabs.tabs-primary .tab.is-disabled,.tabs.tabs-secondary .tab.is-disabled{opacity:.45 !important;cursor:not-allowed !important;border-bottom-color:transparent !important;}
.page-tab-stack .subbar,.subbar.subbar-secondary,.subbar.tabs-level-1,.subbar.tabs-level-2,.subbar.tabs-level-3,.subbar.tabs-level-4{gap:8px !important;align-items:center !important;padding:0 0 10px !important;margin:-6px 0 14px !important;}
.page-tab-stack .subbar .chip,.subbar.subbar-secondary .chip,.subbar.tabs-level-1 .chip,.subbar.tabs-level-2 .chip,.subbar.tabs-level-3 .chip,.subbar.tabs-level-4 .chip{display:inline-flex !important;align-items:center !important;gap:6px !important;white-space:nowrap !important;border:1px solid var(--border) !important;background:var(--panel) !important;color:var(--text) !important;padding:6px 10px !important;border-radius:999px !important;font-size:12px !important;line-height:normal !important;font-weight:800 !important;letter-spacing:normal !important;box-shadow:none !important;}
.page-tab-stack .subbar .chip:hover,.subbar.subbar-secondary .chip:hover,.subbar.tabs-level-1 .chip:hover,.subbar.tabs-level-2 .chip:hover,.subbar.tabs-level-3 .chip:hover,.subbar.tabs-level-4 .chip:hover{background:#f8fafc !important;filter:none !important;}
.page-tab-stack .subbar .chip.is-active,.subbar.subbar-secondary .chip.is-active,.subbar.tabs-level-1 .chip.is-active,.subbar.tabs-level-2 .chip.is-active,.subbar.tabs-level-3 .chip.is-active,.subbar.tabs-level-4 .chip.is-active{background:var(--panel) !important;color:var(--primary) !important;border-color:rgba(37,99,235,.35) !important;}
.tabs.tabs-primary > div[style*="margin-left:auto"],.tabs.tabs-secondary > div[style*="margin-left:auto"]{display:initial !important;}

/* ==========================================================
   Urgent restore: classic tabbed navigation style
   Keep Perlesenan tab arrangement, but undo underline/black hierarchy overrides.
   ========================================================== */
.page-tab-stack{
  display:grid !important;
  gap:6px !important;
  margin:0 0 12px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.page-tab-stack .tabs,
.tabs.tabs-primary,
.tabs.tabs-level-1{
  display:flex !important;
  gap:4px !important;
  align-items:flex-end !important;
  overflow:auto !important;
  margin:0 !important;
  padding:0 0 1px !important;
  background:#fff !important;
  border:0 !important;
  border-bottom:1px solid #111827 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.page-tab-stack .tabs.tabs-secondary,
.page-tab-stack .tabs.tabs-level-2,
.page-tab-stack .tabs.tabs-level-3,
.page-tab-stack .tabs.tabs-level-4,
.tabs.tabs-secondary,
.tabs.tabs-level-2,
.tabs.tabs-level-3,
.tabs.tabs-level-4,
.subbar.subbar-secondary,
.subbar.tabs-level-1,
.subbar.tabs-level-2,
.subbar.tabs-level-3,
.subbar.tabs-level-4{
  display:flex !important;
  gap:4px !important;
  align-items:flex-end !important;
  overflow:auto !important;
  margin:0 !important;
  padding:0 0 1px !important;
  background:#fff !important;
  border:0 !important;
  border-bottom:1px solid #d1d5db !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.page-tab-stack .tabs .tab,
.tabs.tabs-primary .tab,
.tabs.tabs-level-1 .tab{
  display:inline-flex !important;
  align-items:center !important;
  min-height:auto !important;
  padding:12px 16px !important;
  color:#000 !important;
  border:1px solid #111827 !important;
  border-bottom:0 !important;
  background:#fff !important;
  border-radius:10px 10px 0 0 !important;
  white-space:nowrap !important;
  font-weight:400 !important;
  font-size:14px !important;
  letter-spacing:normal !important;
  line-height:1.2 !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
.page-tab-stack .tabs.tabs-secondary .tab,
.page-tab-stack .tabs.tabs-level-2 .tab,
.page-tab-stack .tabs.tabs-level-3 .tab,
.page-tab-stack .tabs.tabs-level-4 .tab,
.tabs.tabs-secondary .tab,
.tabs.tabs-level-2 .tab,
.tabs.tabs-level-3 .tab,
.tabs.tabs-level-4 .tab{
  display:inline-flex !important;
  align-items:center !important;
  min-height:auto !important;
  padding:10px 14px !important;
  color:#111827 !important;
  border:1px solid #d1d5db !important;
  border-bottom:0 !important;
  border-radius:10px 10px 0 0 !important;
  background:#fff !important;
  white-space:nowrap !important;
  font-weight:400 !important;
  font-size:14px !important;
  letter-spacing:normal !important;
  line-height:1.2 !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
.page-tab-stack .tabs .tab:hover,
.tabs.tabs-primary .tab:hover,
.tabs.tabs-secondary .tab:hover,
.tabs.tabs-level-1 .tab:hover,
.tabs.tabs-level-2 .tab:hover,
.tabs.tabs-level-3 .tab:hover,
.tabs.tabs-level-4 .tab:hover{
  background:#f8fafc !important;
  color:#111827 !important;
  filter:none !important;
}
.page-tab-stack .tabs.tabs-primary .tab.is-active,
.page-tab-stack .tabs.tabs-level-1 .tab.is-active,
.tabs.tabs-primary .tab.is-active,
.tabs.tabs-level-1 .tab.is-active{
  background:#111827 !important;
  color:#fff !important;
  border-color:#111827 !important;
  font-weight:400 !important;
  box-shadow:none !important;
}
.page-tab-stack .tabs.tabs-secondary .tab.is-active,
.page-tab-stack .tabs.tabs-level-2 .tab.is-active,
.page-tab-stack .tabs.tabs-level-3 .tab.is-active,
.page-tab-stack .tabs.tabs-level-4 .tab.is-active,
.tabs.tabs-secondary .tab.is-active,
.tabs.tabs-level-2 .tab.is-active,
.tabs.tabs-level-3 .tab.is-active,
.tabs.tabs-level-4 .tab.is-active{
  color:#111827 !important;
  background:#e5e7eb !important;
  border-color:#d1d5db !important;
  font-weight:700 !important;
  box-shadow:none !important;
}
.page-tab-stack .subbar,
.subbar.subbar-secondary,
.subbar.tabs-level-1,
.subbar.tabs-level-2,
.subbar.tabs-level-3,
.subbar.tabs-level-4{
  padding:8px 0 0 !important;
  gap:8px !important;
}
.page-tab-stack .subbar .chip,
.subbar.subbar-secondary .chip,
.subbar.tabs-level-1 .chip,
.subbar.tabs-level-2 .chip,
.subbar.tabs-level-3 .chip,
.subbar.tabs-level-4 .chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  border:1px solid #d7dee8 !important;
  background:#fff !important;
  color:#111827 !important;
  border-radius:10px !important;
  padding:7px 11px !important;
  font-size:12px !important;
  line-height:normal !important;
  font-weight:700 !important;
  box-shadow:none !important;
  white-space:nowrap !important;
}
.page-tab-stack .subbar .chip.is-active,
.subbar.subbar-secondary .chip.is-active,
.subbar.tabs-level-1 .chip.is-active,
.subbar.tabs-level-2 .chip.is-active,
.subbar.tabs-level-3 .chip.is-active,
.subbar.tabs-level-4 .chip.is-active{
  background:#e5e7eb !important;
  color:#111827 !important;
  border-color:#d1d5db !important;
}
.tabs.tabs-primary > div[style*="margin-left:auto"],
.tabs.tabs-secondary > div[style*="margin-left:auto"]{display:none !important;}
@media (max-width:1100px){
  .tabs.tabs-primary,.tabs.tabs-secondary,.subbar.subbar-secondary,
  .tabs.tabs-level-1,.tabs.tabs-level-2,.tabs.tabs-level-3,.tabs.tabs-level-4{
    border-radius:14px 14px 0 0 !important;
  }
}


/* Public portal palette refresh — Blue #2F88D8, Cyan #36C7E5, Pale #D8EFFF, Green #52B849, Lime #B5D837 */
:root{
  --portal-blue:#2F88D8;
  --portal-cyan:#36C7E5;
  --portal-pale:#D8EFFF;
  --portal-green:#52B849;
  --portal-lime:#B5D837;
}
body[data-page="operasi/portal_awam"],
body[data-page*="_public"],
body[data-page*="_status"]{
  background:
    radial-gradient(circle at top left, rgba(54,199,229,.20), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(181,216,55,.18), transparent 34rem),
    #f8fbff;
}
body[data-page="operasi/portal_awam"] .licence-public-card,
body[data-page*="_public"] .licence-public-card,
body[data-page*="_status"] .licence-public-card{
  border:1px solid rgba(47,136,216,.14);
  box-shadow:0 18px 45px rgba(47,136,216,.12);
}
body[data-page="operasi/portal_awam"] .portal-main-hero,
body[data-page*="_public"] .licence-public-header,
body[data-page*="_status"] .licence-public-header{
  background:linear-gradient(135deg,var(--portal-blue),var(--portal-cyan) 48%,var(--portal-green) 100%);
  color:#fff;
  border-radius:28px;
  border:0;
}
body[data-page="operasi/portal_awam"] .portal-main-hero .licence-public-kicker,
body[data-page="operasi/portal_awam"] .portal-main-hero .licence-public-title,
body[data-page="operasi/portal_awam"] .portal-main-hero .licence-public-subtitle,
body[data-page*="_public"] .licence-public-header .licence-public-kicker,
body[data-page*="_public"] .licence-public-header .licence-public-title,
body[data-page*="_public"] .licence-public-header .licence-public-subtitle,
body[data-page*="_status"] .licence-public-header .licence-public-kicker,
body[data-page*="_status"] .licence-public-header .licence-public-title,
body[data-page*="_status"] .licence-public-header .licence-public-subtitle{color:#fff;}
body[data-page="operasi/portal_awam"] .portal-main-note,
body[data-page*="_public"] .portal-category-btn,
body[data-page*="_status"] .portal-category-btn{
  background:linear-gradient(180deg,#fff,var(--portal-pale));
  border-color:rgba(47,136,216,.18);
}
body[data-page="operasi/portal_awam"] .btn-primary,
body[data-page*="_public"] .btn-primary,
body[data-page*="_status"] .btn-primary,
body[data-page="operasi/portal_awam"] .licence-public-shell .btn-primary,
body[data-page*="_public"] .licence-public-shell .btn-primary,
body[data-page*="_status"] .licence-public-shell .btn-primary{
  background:linear-gradient(135deg,var(--portal-blue),var(--portal-cyan));
  border-color:transparent;
  color:#fff;
}
body[data-page="operasi/portal_awam"] .badge.info,
body[data-page*="_public"] .badge.info,
body[data-page*="_status"] .badge.info{
  background:rgba(216,239,255,.95);
  color:#155e75;
}
body[data-page="operasi/portal_awam"] .kpi-card,
body[data-page*="_public"] .kpi-card,
body[data-page*="_status"] .kpi-card,
body[data-page="operasi/portal_awam"] .summary-card,
body[data-page*="_public"] .summary-card,
body[data-page*="_status"] .summary-card{
  border-color:rgba(54,199,229,.20);
  background:linear-gradient(180deg,#fff,#f8fcff);
}
body[data-page="operasi/portal_awam"] input:focus,
body[data-page="operasi/portal_awam"] select:focus,
body[data-page="operasi/portal_awam"] textarea:focus,
body[data-page*="_public"] input:focus,
body[data-page*="_public"] select:focus,
body[data-page*="_public"] textarea:focus,
body[data-page*="_status"] input:focus,
body[data-page*="_status"] select:focus,
body[data-page*="_status"] textarea:focus{
  border-color:var(--portal-cyan)!important;
  box-shadow:0 0 0 3px rgba(54,199,229,.18)!important;
}
body[data-page="operasi/portal_awam"] .portal-main-service-card:hover,
body[data-page*="_public"] .card:hover,
body[data-page*="_status"] .card:hover{
  box-shadow:0 16px 36px rgba(47,136,216,.14);
}


/* Phase 13/14 public portal refinements */
body[data-page*="_public"]:not([data-page="operasi/portal_awam"]) .auth-main,
body[data-page*="_status"] .auth-main{
  max-width:none !important;
  width:100% !important;
}
body[data-page*="_public"]:not([data-page="operasi/portal_awam"]) .licence-public-card,
body[data-page*="_status"] .licence-public-card{
  width:min(1160px,100%) !important;
  max-width:1160px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body[data-page="operasi/portal_awam"] .portal-main-hero .portal-main-note{
  background:rgba(255,255,255,.94) !important;
  color:#0f172a !important;
  border-color:rgba(216,239,255,.85) !important;
  font-weight:600;
}
body[data-page="operasi/portal_awam"] .portal-main-hero .portal-main-note,
body[data-page="operasi/portal_awam"] .portal-main-hero .portal-main-note *{
  color:#0f172a !important;
}
body[data-page="operasi/portal_awam"] .portal-main-login-row .btn:not(.btn-primary){
  display:none !important;
}
body[data-page="operasi/portal_awam"] .portal-main-chip-row .badge{
  background:rgba(216,239,255,.95) !important;
  color:#155e75 !important;
}
.public-portal-shell .portal-public-links button.btn[disabled],
.public-portal-shell .portal-category-list button.btn[disabled],
body[data-page="operasi/portal_awam"] button.btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  background:#eef2f7;
  color:#64748b;
}


/* Phase 15 — staff-wide theme refresh + white content background + KBB letter print */
:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-grad:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
  --border:rgba(47,136,216,.14);
  --text:#0f172a;
  --muted:#5b6b7b;
  --primary:#2F88D8;
  --primary-2:#36C7E5;
  --danger:#dc2626;
  --warn:#B5D837;
  --ok:#52B849;
  --success:#52B849;
  --warning:#B5D837;
  --primary-ghost:rgba(47,136,216,.14);
  --topbar-bg:linear-gradient(135deg,#2F88D8 0%, #36C7E5 48%, #52B849 100%);
  --topbar-text:#ffffff;
  --topbar-muted:rgba(255,255,255,.84);
  --topbar-border:rgba(255,255,255,.18);
  --topbar-ctrl-bg:rgba(255,255,255,.10);
  --topbar-ctrl-border:rgba(255,255,255,.18);
  --sidebar-bg:linear-gradient(180deg,#2F88D8 0%, #36C7E5 42%, #52B849 100%);
  --sidebar-border:rgba(255,255,255,.14);
  --sidebar-hover:rgba(255,255,255,.11);
  --sidebar-pop-bg:rgba(47,136,216,.98);
  --kpi-bg:linear-gradient(135deg, rgba(216,239,255,.96) 0%, rgba(255,255,255,.98) 65%, rgba(181,216,55,.12) 100%);
  --header-bg:linear-gradient(180deg,#ffffff 0%, #D8EFFF 100%);
  --shadow:0 10px 28px rgba(47,136,216,.10);
  --shadow-soft:0 8px 22px rgba(47,136,216,.08);
}
body{background:#fff;}
.main,.content,.footer{background:#fff !important;}
.content{padding:20px 22px;background:#fff !important;min-height:calc(100vh - 72px);}
.footer{background:#fff !important;border-top:1px solid rgba(47,136,216,.12);}
.card,.summary-card,.kpi-card,.attachment-chip,.table-wrap,.modal-dialog,.auth-card,.auth-table-wrap{border-color:rgba(47,136,216,.14) !important;box-shadow:0 10px 28px rgba(47,136,216,.08) !important;}
.card,.summary-card,.kpi-card,.attachment-chip,.auth-right,.table-wrap,.modal-dialog{background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%) !important;}
.kpi-card,.summary-card,.attachment-chip{background:linear-gradient(135deg, rgba(216,239,255,.65) 0%, rgba(255,255,255,.98) 76%, rgba(181,216,55,.10) 100%) !important;}
.topbar{background:var(--topbar-bg) !important;border-bottom-color:var(--topbar-border) !important;}
.sidebar{background:var(--sidebar-bg) !important;border-right-color:var(--sidebar-border) !important;}
.sidebar .nav-item.is-active{background:rgba(255,255,255,.16) !important;border-color:rgba(255,255,255,.34) !important;color:#fff !important;}
.sidebar .nav-item.is-active .nav-icon{background:rgba(255,255,255,.14) !important;border-color:rgba(255,255,255,.28) !important;color:#fff !important;}
.sidebar details.nav-group[open] > summary.nav-summary,.sidebar .nav-summary:hover,.sidebar .nav-item:hover{background:rgba(255,255,255,.10) !important;}
.btn-primary,.btn.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2)) !important;border-color:transparent !important;color:#fff !important;}
.btn-primary:hover,.btn.btn-primary:hover{filter:brightness(1.03);}
.btn,.select2-container--default .select2-selection--single{border-color:rgba(47,136,216,.18);}
.tabs.tabs-primary .tab:hover,.tabs.tabs-secondary .tab:hover,.tabs.tabs-level-1 .tab:hover,.tabs.tabs-level-2 .tab:hover,.tabs.tabs-level-3 .tab:hover,.tabs.tabs-level-4 .tab:hover{color:var(--primary) !important;}
.tabs.tabs-primary .tab.is-active,.tabs.tabs-secondary .tab.is-active,.tabs.tabs-level-1 .tab.is-active,.tabs.tabs-level-2 .tab.is-active,.tabs.tabs-level-3 .tab.is-active,.tabs.tabs-level-4 .tab.is-active{color:var(--primary) !important;border-bottom-color:var(--primary) !important;}
.alert.info{background:rgba(216,239,255,.75);border-color:rgba(47,136,216,.16);color:#0f3b67;}
body[data-page="login"]{background:linear-gradient(135deg, rgba(216,239,255,.82) 0%, #ffffff 56%, rgba(181,216,55,.18) 100%) !important;}
body[data-page="login"] .auth-card{background:#fff !important;border-color:rgba(47,136,216,.16) !important;}
body[data-page="login"] .auth-left{background:linear-gradient(135deg, rgba(47,136,216,.14) 0%, rgba(54,199,229,.18) 48%, rgba(82,184,73,.18) 100%) !important;}
body[data-page="login"] .auth-title{color:#0f172a;}
body[data-page="login"] .auth-sub,body[data-page="login"] .auth-note{color:#475569;}
body[data-page="login"] .auth-badge{background:rgba(255,255,255,.86);border-color:rgba(47,136,216,.16);}
body[data-page="login"] .auth-table th{color:#476071;}
body[data-page="login"] .auth-table-wrap{background:#fff !important;}
body[data-page="login"] .input:focus,body[data-page="login"] input:focus{border-color:var(--primary) !important;box-shadow:0 0 0 3px rgba(54,199,229,.18) !important;}

body[data-page="operasi/bangunan"] .kbb-letter-print-page{max-width:960px;margin:0 auto;padding:4px 0 20px;background:#fff;}
body[data-page="operasi/bangunan"] .kbb-letter-print-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px;}
body[data-page="operasi/bangunan"] .kbb-letter-print-sheet{background:#fff !important;}
body[data-page="operasi/bangunan"] .kbb-letter-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 18px;}
body[data-page="operasi/bangunan"] .kbb-letter-body{white-space:pre-wrap;line-height:1.72;font-size:15px;color:#0f172a;}
body[data-page="operasi/bangunan"] .kbb-letter-body p{margin:0 0 10px;}
body[data-page="operasi/bangunan"] .kbb-letter-print-sheet .print-letterhead{margin-bottom:16px;}

@media (max-width:900px){
  body[data-page="operasi/bangunan"] .kbb-letter-meta{grid-template-columns:1fr;}
}

@media print{
  body[data-page="operasi/bangunan"] .sidebar,
  body[data-page="operasi/bangunan"] .topbar,
  body[data-page="operasi/bangunan"] .footer,
  body[data-page="operasi/bangunan"] .page-tab-stack,
  body[data-page="operasi/bangunan"] .flash-area,
  body[data-page="operasi/bangunan"] .page-header,
  body[data-page="operasi/bangunan"] .kbb-hide-on-print{display:none !important;}
  body[data-page="operasi/bangunan"],
  body[data-page="operasi/bangunan"] .app,
  body[data-page="operasi/bangunan"] .main,
  body[data-page="operasi/bangunan"] .content{background:#fff !important;}
  body[data-page="operasi/bangunan"] .content{padding:0 !important;min-height:auto !important;}
  body[data-page="operasi/bangunan"] .kbb-letter-print-page{max-width:none !important;margin:0 !important;padding:0 !important;}
  body[data-page="operasi/bangunan"] .kbb-letter-print-sheet{border:0 !important;box-shadow:none !important;margin:0 !important;}
}


/* PHASE15_16_THEME_REFRESH */
:root{
  --theme-blue:#2F88D8;
  --theme-cyan:#36C7E5;
  --theme-pale:#D8EFFF;
  --theme-green:#52B849;
  --theme-lime:#B5D837;

  --theme-blue-75:#0C2236;
  --theme-cyan-75:#0E3239;
  --theme-pale-75:#363C40;
  --theme-green-75:#142E12;
  --theme-lime-75:#2D360E;

  --theme-blue-60:#133656;
  --theme-cyan-60:#16505C;
  --theme-green-60:#214A1D;
  --theme-lime-60:#485616;

  --primary:#2F88D8;
  --primary-2:#36C7E5;
  --ok:#52B849;
  --success:#52B849;
  --warn:#B5D837;

  --topbar-bg:linear-gradient(135deg, var(--theme-blue-75) 0%, var(--theme-cyan-75) 48%, var(--theme-green-75) 100%);
  --sidebar-bg:linear-gradient(180deg, var(--theme-blue-75) 0%, var(--theme-cyan-75) 52%, var(--theme-green-75) 100%);
  --topbar-border:rgba(255,255,255,.10);
  --sidebar-border:rgba(255,255,255,.08);

  --header-bg:linear-gradient(135deg, var(--theme-blue-60) 0%, var(--theme-cyan-60) 52%, var(--theme-green-60) 100%);
  --border:rgba(15,23,42,.14);
  --shadow:0 18px 42px rgba(2,6,23,.16);
  --shadow-soft:0 16px 34px rgba(2,6,23,.14);
}
body:not([data-page="login"]):not([data-page*="_public"]):not([data-page*="_status"]):not([data-page="operasi/portal_awam"]),
body[data-page="dashboard"],
body[data-page^="operasi/"],
body[data-page^="assets"],
body[data-page^="cash/"],
body[data-page^="ar/"],
body[data-page^="ap/"],
body[data-page^="gl/"]{
  background:#fff;
}
.main, .content, .footer{
  background:#fff;
}
.topbar,
.sidebar{
  box-shadow:0 10px 30px rgba(2,6,23,.18);
}
.topbar-heading:hover{filter:brightness(1.02);}
.topbar-tenant-name, .page-title{color:#fff;}
.topbar-title-sep{color:rgba(255,255,255,.72);}
.sidebar .brand-sub,
.sidebar .nav-item-sub,
.sidebar .nav-group-label,
.sidebar .nav-section-title{color:rgba(255,255,255,.74)!important;}
.sidebar .nav-link:hover,
.sidebar .nav-pop-link:hover{background:rgba(255,255,255,.10);}
.sidebar .nav-link.is-active,
.sidebar .nav-pop-link.is-active{
  background:linear-gradient(135deg, rgba(47,136,216,.22), rgba(54,199,229,.18), rgba(82,184,73,.16));
  border-color:rgba(216,239,255,.22);
}
.btn-primary{
  background:linear-gradient(135deg, var(--theme-blue), var(--theme-cyan));
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 22px rgba(47,136,216,.22);
}
.btn-primary:hover{
  filter:none;
  background:linear-gradient(135deg, #2678c0, #2fb9d9);
}
.btn-success{
  background:linear-gradient(135deg, var(--theme-green), var(--theme-lime));
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 22px rgba(82,184,73,.24);
}
.btn-success:hover{
  filter:none;
  background:linear-gradient(135deg, rgba(82,184,73,.16), rgba(181,216,55,.18));
  color:#123b16;
  border-color:rgba(82,184,73,.38);
}
.kpi-card{
  box-shadow:0 18px 34px rgba(2,6,23,.18);
  border-color:rgba(47,136,216,.18);
}
.summary-card{
  box-shadow:0 18px 34px rgba(2,6,23,.18);
  border-color:rgba(47,136,216,.18);
}
.card{
  border-color:rgba(15,23,42,.12);
  box-shadow:0 16px 30px rgba(2,6,23,.12);
}
.card-header{
  background:var(--header-bg);
  color:#fff;
  border-bottom-color:rgba(255,255,255,.10);
}
.card-header .btn,
.card-header .badge{position:relative; z-index:1;}
.card-header a,
.card-header strong,
.card-header .muted,
.card-header .small-note{color:#fff!important;}
.table-wrap{
  border-color:rgba(15,23,42,.12);
  box-shadow:0 10px 24px rgba(2,6,23,.08);
}
.table th{
  background:var(--header-bg);
  color:#fff;
  border-bottom-color:rgba(255,255,255,.10);
}
.table td{
  background:#fff;
}
.attachment-chip{
  border-color:rgba(47,136,216,.14);
  box-shadow:0 10px 22px rgba(2,6,23,.08);
}
.page-header .page-title,
.page-header .page-sub{
  color:#0f172a;
}
.flash{
  box-shadow:0 10px 24px rgba(2,6,23,.12);
}

/* Status pages (except OSC and KBB) should follow Pasar-style UI */
body[data-page$="_status"]:not([data-page="operasi/osc_status"]):not([data-page="operasi/bangunan_status"]) .auth-main,
body[data-page$="_public"]:not([data-page="operasi/osc_public"]):not([data-page="operasi/bangunan_public"]):not([data-page="operasi/portal_awam"]) .auth-main{
  max-width:none;
  width:100%;
}
body[data-page$="_status"]:not([data-page="operasi/osc_status"]):not([data-page="operasi/bangunan_status"]) .licence-public-card{
  width:min(1160px,100%);
}
body[data-page$="_status"]:not([data-page="operasi/osc_status"]):not([data-page="operasi/bangunan_status"]) .licence-public-header{
  gap:16px;
  align-items:stretch;
}
body[data-page$="_status"]:not([data-page="operasi/osc_status"]):not([data-page="operasi/bangunan_status"]) .licence-public-brand{
  flex:1 1 480px;
  align-items:flex-start;
}
body[data-page$="_status"]:not([data-page="operasi/osc_status"]):not([data-page="operasi/bangunan_status"]) .licence-public-toolbar{
  min-width:320px;
  flex:0 0 320px;
}
body[data-page$="_status"]:not([data-page="operasi/osc_status"]):not([data-page="operasi/bangunan_status"]) .licence-public-header .btn{
  background:rgba(255,255,255,.96);
  color:#0f172a;
  border-color:rgba(255,255,255,.55);
}
body[data-page$="_status"]:not([data-page="operasi/osc_status"]):not([data-page="operasi/bangunan_status"]) .licence-public-summary{
  box-shadow:0 16px 32px rgba(2,6,23,.12);
}
body[data-page="operasi/portal_awam"] .portal-main-login-row .btn:not(.btn-primary){
  display:none !important;
}

/* Login page theme refresh */
body[data-page="login"]{
  background:linear-gradient(135deg, rgba(47,136,216,.08), rgba(54,199,229,.08), rgba(82,184,73,.08), rgba(181,216,55,.08));
}
body[data-page="login"] .auth-hero,
body[data-page="login"] .login-hero,
body[data-page="login"] .hero{
  background:linear-gradient(135deg, var(--theme-blue), var(--theme-cyan) 52%, var(--theme-green));
  color:#fff;
}
body[data-page="login"] .auth-card,
body[data-page="login"] .login-card{
  border-color:rgba(47,136,216,.16);
  box-shadow:0 18px 38px rgba(2,6,23,.16);
}
body[data-page="login"] input:focus,
body[data-page="login"] select:focus,
body[data-page="login"] textarea:focus{
  border-color:var(--theme-cyan)!important;
  box-shadow:0 0 0 3px rgba(54,199,229,.18)!important;
}


/* KBB_UI_TUNE_20260423_V2 */
:root{
  --theme-blue:#2F88D8 !important;
  --theme-cyan:#36C7E5 !important;
  --theme-pale:#D8EFFF !important;
  --theme-green:#52B849 !important;
  --theme-lime:#B5D837 !important;

  /* 20% black mixed */
  --topbar-bg:linear-gradient(135deg,#266dac 0%, #2b9fb8 52%, #42933a 100%) !important;
  --sidebar-bg:linear-gradient(180deg,#266dac 0%, #2b9fb8 52%, #42933a 100%) !important;
  --sidebar-pop-bg:linear-gradient(180deg,#266dac 0%, #2b9fb8 50%, #42933a 100%) !important;

  --topbar-text:#f8fbff !important;
  --topbar-muted:rgba(248,251,255,.82) !important;
  --topbar-border:rgba(255,255,255,.14) !important;
  --topbar-ctrl-bg:rgba(255,255,255,.10) !important;
  --topbar-ctrl-border:rgba(255,255,255,.22) !important;
  --sidebar-border:rgba(255,255,255,.12) !important;
  --sidebar-hover:rgba(255,255,255,.10) !important;

  --header-blue:#43597d !important;
  --header-blue-dark:#36486b !important;
}
.topbar{background:var(--topbar-bg) !important;}
.sidebar{background:var(--sidebar-bg) !important;}
.sidebar [class*="pop"], .nav-pop, .nav-popover, .nav-popmenu, .sidebar-pop, .select2-dropdown.select2-topbar-dark{
  background:var(--sidebar-pop-bg) !important;
  color:#fff !important;
}
.select2-dropdown.select2-topbar-dark .select2-results__option{color:#fff !important;}
.select2-dropdown.select2-topbar-dark .select2-results__option--highlighted{background:rgba(255,255,255,.14) !important;color:#fff !important;}
.topbar,.sidebar{
  box-shadow:0 12px 26px rgba(0,0,0,.22) !important;
}
.kpi-card,.summary-card{
  box-shadow:0 14px 20px rgba(0,0,0,.22) !important;
}
.card-header,
.table thead th,
.table th,
.table-wrap thead th,
.datatable thead th,
.dt-table thead th,
.table-toolbar,
.dt-toolbar,
.subbar,
.senarai-header{
  background:linear-gradient(180deg, #43597d 0%, #36486b 100%) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.10) !important;
}
.card-header *,
.table thead th *,
.table th *,
.table-wrap thead th *,
.datatable thead th *,
.dt-table thead th *{
  color:#fff !important;
}
.card,.summary-card,.kpi-card,.attachment-chip,.table-wrap,.modal-dialog,.auth-card,.auth-table-wrap{
  border-color:rgba(54,72,107,.20) !important;
  box-shadow:0 12px 22px rgba(0,0,0,.12) !important;
}
.main,.content,.footer,.page-wrap,.page-body,.panel-body{background:#fff !important;}
.topbar .btn,.topbar .select,.topbar .cmd-btn,.topbar .btn-ghost{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#fff !important;
}
.sidebar .nav-item,.sidebar .nav-summary,.sidebar .nav-link,.sidebar .nav-pop-link{color:#fff !important;}
.sidebar .nav-item.is-active,.sidebar .nav-link.is-active,.sidebar .nav-pop-link.is-active{
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.25) !important;
  color:#fff !important;
}
.btn-primary{
  background:linear-gradient(135deg, #2F88D8, #36C7E5) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.btn-success{
  background:linear-gradient(135deg, #52B849, #B5D837) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.btn-success:hover{
  color:#123b16 !important;
}
.btn-outline-info{
  color:#2F88D8 !important;
  border-color:#2F88D8 !important;
  background:#fff !important;
}
.btn-outline-warning{
  color:#9a6a00 !important;
  border-color:#d4a21a !important;
  background:#fff !important;
}
.btn-outline-danger{
  color:#c62828 !important;
  border-color:#e53935 !important;
  background:#fff !important;
}

/* All status pages follow Pasar-style structure */
body[data-page$="_status"] .auth-main{
  max-width:none !important;
  width:100% !important;
}
body[data-page$="_status"] .licence-public-shell{
  width:100% !important;
}
body[data-page$="_status"] .licence-public-card{
  width:min(1160px,100%) !important;
  max-width:1160px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body[data-page$="_status"] .licence-public-header{
  display:grid !important;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr) !important;
  gap:18px !important;
  align-items:stretch !important;
}
body[data-page$="_status"] .licence-public-brand{display:flex !important; align-items:flex-start !important;}
body[data-page$="_status"] .licence-public-toolbar{
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
}
body[data-page$="_status"] .licence-public-summary{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
}
@media (max-width: 900px){
  body[data-page$="_status"] .licence-public-header{
    grid-template-columns:1fr !important;
  }
  body[data-page$="_status"] .licence-public-summary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width: 560px){
  body[data-page$="_status"] .licence-public-summary{
    grid-template-columns:1fr !important;
  }
}
body[data-page="login"] .auth-left{
  background:linear-gradient(135deg, rgba(47,136,216,.92) 0%, rgba(54,199,229,.92) 48%, rgba(82,184,73,.90) 100%) !important;
  color:#fff !important;
}
body[data-page="login"] .auth-left *{color:#fff !important;}
body[data-page="login"] .auth-badge{
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.22) !important;
}

/* Password reveal */
.pw-reveal-wrap{position:relative; display:block; width:100%;}
.pw-reveal-wrap input[type="password"],
.pw-reveal-wrap input[type="text"].pw-reveal-input{
  padding-right:44px !important;
}
.pw-toggle-btn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:999px; border:1px solid rgba(54,72,107,.18);
  background:#fff; color:#36486b; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; line-height:1; z-index:4;
}
.pw-toggle-btn:hover{background:#f4f7fb;}

/* KBB_PHASE19_20_THEME_OVERRIDE */
:root{--topbar-bg:linear-gradient(135deg,#1c5282 0%,#207789 52%,#316e2c 100%)!important;--sidebar-bg:linear-gradient(180deg,#1c5282 0%,#207789 52%,#316e2c 100%)!important;--sidebar-pop-bg:linear-gradient(180deg,#1c5282 0%,#207789 50%,#316e2c 100%)!important;}
.topbar{background:var(--topbar-bg)!important;}
.sidebar{background:var(--sidebar-bg)!important;}
.nav-pop,.nav-popover,.nav-popmenu,.sidebar-pop,.topbar .popover,.popover,.dropdown-menu,.menu-pop,.pop-menu{background:var(--sidebar-pop-bg)!important;color:#fff!important;}
.card-header,.table thead th,.table th,.table-wrap thead th,.datatable thead th,.dt-table thead th,.subbar,.senarai-header{background:linear-gradient(180deg,#42557a 0%,#36486b 100%)!important;color:#fff!important;border-color:rgba(255,255,255,.10)!important;}
.card-header *,.table thead th *,.table th *,.table-wrap thead th *,.datatable thead th *,.dt-table thead th *{color:#fff!important;}
.table-toolbar,.dt-toolbar,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dt-buttons,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{background:#fff!important;color:#0f172a!important;}
.kpi-card,.summary-card{box-shadow:0 12px 18px rgba(0,0,0,.24)!important;}
.card{box-shadow:0 10px 18px rgba(0,0,0,.12)!important;}


/* KBB_TABLE_HEADER_POPOVER_40BLACK_FIX_20260423 */
:root{
  --theme-blue-40:#1c5282 !important;
  --theme-cyan-40:#207789 !important;
  --theme-green-40:#316e2c !important;
}
.topbar{
  background:linear-gradient(135deg,var(--theme-blue-40) 0%, var(--theme-cyan-40) 52%, var(--theme-green-40) 100%) !important;
}
.sidebar{
  background:linear-gradient(180deg,var(--theme-blue-40) 0%, var(--theme-cyan-40) 52%, var(--theme-green-40) 100%) !important;
}
.sidebar-flyout-panel,
.sidebar-flyout,
.sidebar-flyout.is-open,
.nav-pop,
.nav-popover,
.nav-popmenu,
.sidebar-pop,
.app.is-collapsed .nav-summary.is-flyout-open{
  background:linear-gradient(180deg,var(--theme-blue-40) 0%, var(--theme-cyan-40) 48%, var(--theme-green-40) 100%) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.16) !important;
}
.sidebar-flyout-header,
.sidebar-flyout .nav-item,
.sidebar-flyout .nav-summary,
.sidebar-flyout .nav-subsummary,
.sidebar-flyout .nav-subheader,
.sidebar-flyout .nav-subsub-title,
.sidebar-flyout .nav-subsub-group,
.sidebar-flyout .nav-text,
.sidebar-flyout .nav-icon{
  color:#fff !important;
}
.sidebar-flyout .nav-item:hover,
.sidebar-flyout .nav-item.is-active,
.sidebar-flyout .nav-summary:hover,
.sidebar-flyout .nav-summary.is-active,
.sidebar-flyout .nav-subsummary:hover,
.sidebar-flyout .nav-subsummary.is-active{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.22) !important;
}

/* toolbar above table remains white */
.table-toolbar,
.dt-toolbar,
.dataTables_wrapper .dt-layout-row:first-child,
.dataTables_wrapper .dt-layout-start,
.dataTables_wrapper .dt-layout-end,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
  background:#fff !important;
  color:#0f172a !important;
  border-color:rgba(15,23,42,.08) !important;
}
.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
  color:#0f172a !important;
}
.dataTables_wrapper .dt-layout-row:first-child *{
  color:#0f172a !important;
}

/* actual table header only */
.table thead th,
.table-wrap table thead th,
.datatable thead th,
.dt-table thead th,
table.dataTable thead th,
table.dataTable thead td,
.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead td,
.dataTables_scrollHead table thead th,
.dataTables_scrollHead table thead td,
thead th{
  background:#36486b !important;
  background-image:linear-gradient(180deg,#43567a 0%, #36486b 100%) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.12) !important;
}
.table thead th *,
.table-wrap table thead th *,
.datatable thead th *,
.dt-table thead th *,
table.dataTable thead th *,
table.dataTable thead td *,
.dataTables_wrapper table.dataTable thead th *,
.dataTables_wrapper table.dataTable thead td *,
.dataTables_scrollHead table thead th *,
.dataTables_scrollHead table thead td *,
thead th *{
  color:#fff !important;
}