:root{
  --navy:#0f2747;
  --navy2:#16375f;
  --blue:#2563eb;
  --cyan:#06b6d4;
  --bg:#f5f7fb;
  --text:#142235;
  --muted:#758297;
  --line:#e6ebf2;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.app-shell{min-height:100vh;display:flex}
.sidebar{width:255px;background:linear-gradient(180deg,var(--navy),#0a1d34);color:white;padding:24px 18px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:12px;font-size:20px}
.brand-mark{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:22px}
.brand span{display:block;font-size:11px;letter-spacing:1.7px;color:#91a8c2;text-transform:uppercase}
.sidebar .nav-link{color:#b9c9dc;border-radius:12px;padding:11px 12px;margin:3px 0;display:flex;gap:11px;align-items:center}
.sidebar .nav-link:hover{background:rgba(255,255,255,.09);color:#fff}
.nav-section{font-size:10px;letter-spacing:1.6px;color:#6f89a7;margin:22px 12px 8px}
.sidebar-user{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding-top:18px;display:flex;align-items:center;gap:10px}
.sidebar-user strong,.sidebar-user span{display:block}
.sidebar-user strong{font-size:13px}.sidebar-user span{font-size:10px;color:#8fa7c2}
.avatar{width:36px;height:36px;border-radius:11px;background:#fff;color:var(--navy);display:grid;place-items:center;font-weight:800}
.content{margin-left:255px;width:calc(100% - 255px);padding:28px 34px 50px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.topbar h1{font-size:27px;margin:3px 0 0;font-weight:750}
.eyebrow{font-size:10px;letter-spacing:1.6px;color:#8290a3;font-weight:800}
.service-pill{background:white;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:12px;box-shadow:0 6px 22px rgba(15,39,71,.05)}
.service-pill span{display:inline-block;width:8px;height:8px;border-radius:99px;background:#16a34a;margin-right:6px}
.hero-card{background:linear-gradient(135deg,#17395f,#2563eb);color:#fff;border-radius:20px;padding:28px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 18px 50px rgba(37,99,235,.18)}
.hero-card h2{font-weight:800;margin:4px 0}.hero-card p{margin:0;color:#d7e4f7}.hero-kicker{font-size:10px;letter-spacing:1.8px;color:#abc8f3}
.metric-card,.panel-card{background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:0 8px 30px rgba(15,39,71,.045)}
.metric-card{padding:18px;display:flex;align-items:center;gap:14px}
.metric-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#eef4ff;color:var(--blue)}
.metric-card span{display:block;font-size:11px;color:var(--muted)}.metric-card strong{font-size:24px}
.metric-card.amber .metric-icon{background:#fff7e5;color:#d97706}.metric-card.cyan .metric-icon{background:#e8fbff;color:#0891b2}
.metric-card.green .metric-icon{background:#ebf9f0;color:#16a34a}.metric-card.red .metric-icon{background:#fff0f0;color:#dc2626}
.panel-card{padding:22px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-head h3{font-size:17px;margin:3px 0 0;font-weight:750}
.modern-table{margin:0}.modern-table th{font-size:10px;letter-spacing:1px;color:#8996a9;border-bottom-color:var(--line);text-transform:uppercase}.modern-table td{border-bottom-color:#edf1f6;font-size:13px;padding:14px 8px}
.status-badge{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:10px;font-weight:800;background:#eef2f7}
.status-badge.menunggu{background:#fff5db;color:#b66d00}.status-badge.diproses{background:#e8f4ff;color:#1769aa}.status-badge.selesai{background:#e8f8ef;color:#138a47}.status-badge.ditolak{background:#ffeded;color:#c52a2a}
.btn-primary{background:var(--blue);border-color:var(--blue);border-radius:11px}.btn-soft{background:#eef4ff;border:0;color:var(--blue);border-radius:10px}
.icon-btn{width:34px;height:34px;border-radius:10px;display:inline-grid;place-items:center;color:inherit;text-decoration:none;background:rgba(255,255,255,.06);border:0}
.form-control,.form-select{border-color:#dfe6ef;border-radius:11px;padding:.72rem .85rem}.form-control:focus,.form-select:focus{border-color:#8db1ff;box-shadow:0 0 0 .2rem rgba(37,99,235,.08)}
.form-label{font-size:12px;font-weight:700;color:#536176}.soft-label{padding:7px 10px;background:#f0f5fb;border-radius:999px;font-size:11px;color:#597087}
.upload-placeholder{height:48px;border:1px dashed #cdd8e6;border-radius:11px;display:flex;align-items:center;padding:0 14px;color:#8794a7;font-size:12px;gap:8px;background:#fafcff}
.detail-hero{display:flex;align-items:center;justify-content:space-between;background:white;border:1px solid var(--line);border-radius:18px;padding:22px}.detail-hero h2{font-weight:800;margin:3px 0}.detail-hero p{margin:0;color:var(--muted);font-size:12px}
.person-row{display:flex;gap:15px;padding:20px 0;border-top:1px solid var(--line)}.person-row:first-of-type{border-top:0}.person-index{width:36px;height:36px;border-radius:11px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800}
.person-main{flex:1}.person-main h4{font-size:16px;font-weight:800}.copy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.copy-grid>div{border:1px solid var(--line);border-radius:12px;padding:11px;display:grid;grid-template-columns:1fr auto;column-gap:8px}.copy-grid span{grid-column:1/-1;font-size:10px;color:#8a97a8}.copy-grid strong{font-size:12px;align-self:center}.copy-btn{border:0;background:#eef4ff;color:var(--blue);font-size:9px;font-weight:800;border-radius:8px;padding:6px 8px}
.search-bar{display:flex;align-items:center;border:1px solid var(--line);border-radius:13px;padding:5px 6px 5px 13px;gap:8px}.search-bar input{border:0;outline:0;flex:1;background:transparent}
.empty-state{text-align:center!important;color:#9aa7b8!important;padding:35px!important}.big-number{font-size:48px;font-weight:850;letter-spacing:2px;color:var(--navy)}
.login-page{min-height:100vh;display:grid;place-items:center;padding:25px;background:radial-gradient(circle at 20% 20%,#214d80 0,#102b4e 36%,#08172a 100%)}
.login-card{width:min(430px,100%);background:#fff;border-radius:22px;padding:34px;box-shadow:0 30px 80px rgba(0,0,0,.24)}.login-brand{width:58px;height:58px;margin:0 auto 18px;border-radius:17px;background:#edf4ff;color:var(--blue);display:grid;place-items:center;font-size:27px}.login-card h2{font-weight:850}.login-card p{color:#8390a1}.demo-note{background:#f5f8fc;border-radius:11px;padding:10px 12px;font-size:11px;color:#657388}
@media(max-width:900px){
  .sidebar{width:76px;padding:20px 10px}.brand>div:last-child,.sidebar .nav-link{font-size:0}.sidebar .nav-link i{font-size:20px}.nav-section,.sidebar-user>div:not(.avatar),.sidebar-user .icon-btn{display:none}
  .content{margin-left:76px;width:calc(100% - 76px);padding:22px 16px}.hero-card{align-items:flex-start;gap:18px;flex-direction:column}.copy-grid{grid-template-columns:1fr}
}


.modern-modal{
  border:0;
  border-radius:18px;
  box-shadow:0 25px 80px rgba(15,39,71,.18);
}
.role-info{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.role-info>div{
  padding:14px;
  background:#f8fafe;
  border:1px solid #edf1f6;
  border-radius:12px;
}
.role-info strong{
  display:block;
  font-size:13px;
}
.role-info span{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:#7c899b;
  line-height:1.5;
}


.ocr-banner{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,#eef5ff,#eefcff);border:1px solid #dcecff;border-radius:15px;padding:15px 17px}
.ocr-banner strong,.ocr-banner span{display:block}.ocr-banner strong{font-size:13px}.ocr-banner span{font-size:11px;color:#718096;margin-top:3px}
.ocr-icon{width:40px;height:40px;border-radius:12px;background:#fff;color:#2563eb;display:grid;place-items:center;font-size:18px}
.ktp-preview-wrap{height:235px;border:1px solid #e3eaf2;border-radius:14px;background:#f7f9fc;overflow:hidden;position:relative}
.ktp-preview{width:100%;height:100%;object-fit:contain;background:#eef2f7}
.ktp-empty{height:100%;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;color:#9aa8ba}.ktp-empty i{font-size:30px}.ktp-empty.large{height:330px;border:1px dashed #d7e0eb;border-radius:14px}
.ocr-msg{font-size:11px;padding:9px 11px;border-radius:9px;background:#f5f7fb;color:#627186}.ocr-msg.success{background:#eaf8f0;color:#148447}.ocr-msg.error{background:#fff0f0;color:#bd2929}
.workspace-tabs{display:flex;gap:8px;overflow:auto;padding-bottom:3px}.person-tab{white-space:nowrap;border:1px solid #dfe7f0;background:#fff;border-radius:12px;padding:10px 13px;font-size:11px;font-weight:700;color:#617086}.person-tab span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#eff3f8;margin-right:7px}.person-tab.active{background:#102c4e;color:#fff;border-color:#102c4e}.person-tab.active span{background:rgba(255,255,255,.15)}
.cs-ktp-img{width:100%;height:360px;object-fit:contain;border-radius:14px;background:#f4f6f9;border:1px solid #e5ebf2}
.privacy-note{font-size:10px;color:#7e8b9d;background:#f7f9fc;border-radius:9px;padding:9px 10px}
.copy-workspace{display:flex;flex-direction:column;gap:10px}.copy-field{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid #e5ebf2;border-radius:13px;padding:12px 13px}.copy-field span,.copy-field strong{display:block}.copy-field span{font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:#8b98aa;font-weight:800}.copy-field strong{font-size:14px;margin-top:2px}
.copy-btn-big{border:0;border-radius:9px;background:#edf4ff;color:#2563eb;font-size:10px;font-weight:900;padding:9px 12px;min-width:78px}.copy-btn-big.copied{background:#e7f8ee;color:#158447}
.action-panel{display:flex;align-items:center;justify-content:space-between;gap:20px}.action-panel h3{font-size:16px}
.status-badge.perlu_perbaikan{background:#fff0e2;color:#c45d00}
@media(max-width:760px){.action-panel{align-items:flex-start;flex-direction:column}.copy-field strong{font-size:12px}.cs-ktp-img{height:260px}}


.ocr-chips{display:flex;flex-wrap:wrap;gap:5px}
.ocr-chip{font-size:9px;font-weight:800;border-radius:999px;padding:4px 7px}
.ocr-chip.ok{background:#d9f4e5;color:#11743e}
.ocr-chip.missing{background:#fff0dc;color:#a45d00}
@media(max-width:768px){

  /* Ruang bawah form supaya tombol Kirim tidak menutupi isi */
  .content-wrapper,
  .main-content{
    padding-bottom:140px;
  }

  .panel-card{
    border-radius:14px;
  }

  .person-card .panel-head{
    margin-bottom:12px;
  }

  .ktp-preview-wrap{
    height:210px;
  }

  /* Area tombol Tambah Orang */
  .request-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-bottom:20px;
  }

  .add-person-btn{
    width:100%;
    min-height:48px;
    position:relative;
    z-index:2;
  }

  /* Tombol Kirim tetap di bawah layar */
  .mobile-submit{
    position:fixed;
    left:16px;
    right:16px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    z-index:1050;
    width:auto;
    min-height:52px;
    box-shadow:0 12px 28px rgba(15,39,71,.22);
  }
}


.correction-action,.result-ready{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;border-radius:16px}
.correction-action{background:#fff5dc;border:1px solid #f5dda0}
.result-ready{background:#eaf8f0;border:1px solid #c8ebd6}
.correction-action h3,.result-ready h3{font-size:17px;margin:3px 0}
.correction-action p,.result-ready p{font-size:11px;color:#69778a;margin:0}
.edit-ktp-preview{width:100%;height:250px;object-fit:contain;border-radius:13px;background:#f3f6f9;border:1px solid #e4eaf1}
.notification-list{display:flex;flex-direction:column}
.notification-item{display:flex;gap:13px;padding:15px 5px;border-bottom:1px solid #edf1f5;text-decoration:none;color:inherit}
.notification-item:last-child{border-bottom:0}
.notification-item:hover{background:#f8fafc}
.notif-icon{width:38px;height:38px;border-radius:11px;background:#edf4ff;color:#2563eb;display:grid;place-items:center;flex:none}
.notification-item strong{font-size:12px}
.notification-item p{font-size:11px;color:#667489;margin:3px 0}
.notification-item span{font-size:9px;color:#9aa6b5}
@media(max-width:768px){
  .correction-action,.result-ready{flex-direction:column;align-items:stretch}
  .correction-action .btn,.result-ready .btn{width:100%}
}


.agenda-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,#102c4e,#173f6d);color:#fff;padding:23px 25px;border-radius:18px}
.agenda-hero h2{margin:3px 0 4px;font-size:25px}.agenda-hero p{margin:0;color:#c5d3e2;font-size:11px}
.agenda-hero .eyebrow{color:#83c7ff}.agenda-actions{display:flex;gap:8px;flex-wrap:wrap}.agenda-actions .btn-soft{background:#fff;color:#16385e}
.search-box{position:relative}.search-box i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#93a0b2;z-index:2}.search-box input{padding-left:37px}
.agenda-number{display:inline-block;background:#edf4ff;color:#175cc5;border-radius:8px;padding:6px 9px;font-weight:900;letter-spacing:.4px}
.table-sub{font-size:9px;color:#8b98a9;margin-top:3px}
.audit-note{display:flex;align-items:flex-start;gap:9px;font-size:10px;color:#6e7c8e;background:#f3f6fa;padding:12px 14px;border-radius:12px}.audit-note i{color:#2563eb}
.rank-badge{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#eef3f8;font-weight:900;color:#28445f}
@media(max-width:768px){
  .agenda-hero{align-items:stretch;flex-direction:column}
  .agenda-actions{display:grid;grid-template-columns:1fr 1fr}
  .agenda-actions .btn{font-size:11px}
  .agenda-table{min-width:1100px}
}


.retention-banner{display:flex;gap:13px;align-items:center;background:#eef5ff;border:1px solid #dbe8f8;border-radius:14px;padding:15px 17px}
.retention-banner h4{font-size:13px;margin:2px 0}.retention-banner p{font-size:10px;color:#6c7b8f;margin:0}
.retention-icon{width:40px;height:40px;border-radius:11px;background:#fff;color:#2563eb;display:grid;place-items:center;font-size:18px}
.menu-matrix th:not(:first-child),.menu-matrix td:not(:first-child){min-width:120px}
.menu-name-cell{display:flex;align-items:center;gap:9px}.menu-name-cell i{width:30px;height:30px;border-radius:9px;background:#eef4fb;color:#2563eb;display:grid;place-items:center}
.role-check{width:1.25em;height:1.25em;cursor:pointer}
.metric-text{font-size:15px!important}
.mini-stat{background:#fff;border:1px solid #e6ebf2;border-radius:14px;padding:15px 17px;display:flex;align-items:center;justify-content:space-between}.mini-stat span{font-size:10px;color:#748296;text-transform:uppercase;font-weight:800;letter-spacing:.5px}.mini-stat strong{font-size:19px}.mini-stat.danger{background:#fff1f1;border-color:#ffd7d7;color:#b92d2d}
.audit-timeline{display:flex;flex-direction:column}.audit-row{display:grid;grid-template-columns:16px 100px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid #eef2f6;position:relative}.audit-row:last-child{border-bottom:0}.audit-dot{width:9px;height:9px;border-radius:50%;background:#2563eb;margin-top:5px;box-shadow:0 0 0 4px #eaf2ff}.audit-time{font-size:9px;color:#8a97a8}.audit-time strong{font-size:10px;color:#536276}.audit-title{font-size:11px;font-weight:900;color:#193452}.audit-meta{font-size:9px;color:#8692a2;margin-top:2px}.audit-detail{font-size:10px;color:#59687a;background:#f7f9fb;border-radius:8px;padding:7px 9px;margin-top:7px}
@media(max-width:768px){.audit-row{grid-template-columns:14px 72px 1fr}.menu-matrix{min-width:760px}}


/* Tahap 7.1 - Sidebar scrolling */
.sidebar{
  height:100vh;
  position:fixed;
  top:0;
  left:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sidebar .sidebar-nav,
.sidebar nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  scrollbar-width:thin;
}
.sidebar .sidebar-nav::-webkit-scrollbar,
.sidebar nav::-webkit-scrollbar{width:6px}
.sidebar .sidebar-nav::-webkit-scrollbar-thumb,
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
.sidebar .sidebar-footer{flex:0 0 auto}

/* Global service + announcement banners */
.global-service-banner,.announcement-banner{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 14px;border-radius:12px;margin-bottom:14px}
.global-service-banner strong,.global-service-banner span,.announcement-banner strong,.announcement-banner span{display:block}
.global-service-banner span,.announcement-banner span{font-size:10px;margin-top:2px}
.global-service-banner.gangguan{background:#fff1f1;border:1px solid #ffd1d1;color:#a52626}
.global-service-banner.pemeliharaan{background:#fff5df;border:1px solid #f8dfab;color:#985c00}
.announcement-banner.info{background:#eef6ff;border:1px solid #d7e9ff}
.announcement-banner.peringatan{background:#fff5df;border:1px solid #f8dfab}
.announcement-banner.kritis{background:#fff1f1;border:1px solid #ffd1d1}
.role-pills{display:flex;flex-wrap:wrap;gap:8px}.role-pills label{font-size:10px;background:#f3f6fa;border-radius:999px;padding:7px 10px}
.announcement-admin-item{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #eef2f6}
.announcement-admin-item strong,.announcement-admin-item p,.announcement-admin-item small{display:block}
.announcement-admin-item strong{font-size:12px;margin:5px 0}.announcement-admin-item p{font-size:10px;color:#69788b;margin:0 0 5px}.announcement-admin-item small{font-size:9px;color:#98a2b1}
.status-badge.gangguan{background:#ffe3e3;color:#b52727}
.status-badge.pemeliharaan{background:#fff0cc;color:#9c6200}
.status-badge.normal{background:#e6f7ed;color:#148447}
@media(max-width:991px){
  .sidebar{position:fixed}
}


/* ======================================================
   TAHAP 8 - SIDEBAR LAYOUT FIX (3 ZONES)
   ====================================================== */
.sidebar{
  box-sizing:border-box!important;
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
  padding:20px 14px 14px!important;
}
.sidebar .brand{
  flex:0 0 auto!important;
  padding:2px 4px 12px;
}
.sidebar-menu-scroll{
  flex:1 1 0!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:5px 4px 18px 0;
  margin:4px -4px 6px 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent;
}
.sidebar-menu-scroll nav{
  overflow:visible!important;
  min-height:max-content!important;
  padding-bottom:12px;
}
.sidebar-menu-scroll::-webkit-scrollbar{width:6px}
.sidebar-menu-scroll::-webkit-scrollbar-track{background:transparent}
.sidebar-menu-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:999px}
.sidebar .sidebar-user{
  flex:0 0 auto!important;
  margin-top:0!important;
  padding:12px 4px 0!important;
  background:linear-gradient(180deg,rgba(10,29,52,0),#0a1d34 22%);
  position:relative;
  z-index:4;
}

/* Dynamic service pill */
.service-pill{
  border:1px solid var(--line);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  transition:.15s ease;
}
.service-pill:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(15,39,71,.09)}
.service-pill.service-normal span{background:#16a34a}
.service-pill.service-gangguan{background:#fff1f1;border-color:#ffd3d3;color:#a92323}
.service-pill.service-gangguan span{background:#dc2626}
.service-pill.service-pemeliharaan{background:#fff7e6;border-color:#f6dfb0;color:#925b00}
.service-pill.service-pemeliharaan span{background:#f59e0b}
.service-modal-head{display:flex;align-items:center;gap:12px}
.service-big-dot{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 6px #eef3f8}
.service-big-dot.normal{background:#16a34a}.service-big-dot.gangguan{background:#dc2626}.service-big-dot.pemeliharaan{background:#f59e0b}
.service-modal-message{background:#f6f8fb;border-radius:11px;padding:12px 13px;font-size:11px;color:#5d6d80;margin-top:18px}
.service-modal-meta{margin-top:12px}.service-modal-meta span,.service-modal-meta strong{display:block}.service-modal-meta span{font-size:9px;color:#8a97a8;text-transform:uppercase;font-weight:800}.service-modal-meta strong{font-size:12px;margin-top:2px}

/* SLA */
.metric-card.purple .metric-icon{background:#f1ebff;color:#7c3aed}
.status-badge.tertunda_ojk{background:#f1ebff;color:#6d28d9}
.ops-highlight{height:100%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px 19px;box-shadow:0 8px 30px rgba(15,39,71,.04)}
.ops-highlight span,.ops-highlight strong,.ops-highlight small{display:block}
.ops-highlight span{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:#8190a3;font-weight:900}
.ops-highlight strong{font-size:23px;color:#153453;margin:5px 0}
.ops-highlight small{font-size:10px;color:#7b899a}
.ops-highlight.danger-lite{background:#fff8f8;border-color:#ffe1e1}
.sla-chip{display:inline-flex;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:900}
.sla-chip.normal{background:#e7f7ed;color:#148447}
.sla-chip.perhatian{background:#fff2d7;color:#a05e00}
.sla-chip.terlambat{background:#ffe4e4;color:#b62626}
.sla-chip.tertunda,.sla-chip.paused{background:#eee8ff;color:#6d28d9}
.sla-rules{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.sla-rules span{background:rgba(255,255,255,.1);padding:6px 9px;border-radius:999px;font-size:9px;color:#dce9f7}
.downtime-number{font-size:39px;font-weight:850;color:#173a61}.downtime-number small{font-size:12px;color:#7d8b9c}
.outage-mini-list>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #eef2f5}.outage-mini-list>div:last-child{border-bottom:0}.outage-mini-list strong{font-size:10px}.outage-mini-list small{font-size:9px;color:#8794a5}
.trend-bars{height:205px;display:flex;gap:7px;align-items:flex-end;padding:10px 4px 0}
.trend-col{height:100%;flex:1;min-width:18px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.trend-stack{height:165px;width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center}
.trend-stack span{display:block;width:42%;min-height:2px;border-radius:4px 4px 1px 1px}
.trend-request{background:#2563eb}.trend-complete{background:#16a34a}
.trend-col small{font-size:8px;color:#8793a4;transform:rotate(-45deg);white-space:nowrap}
.trend-legend{display:flex;justify-content:center;gap:15px;font-size:9px;color:#728095;margin-top:14px}.trend-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px}.trend-legend .req{background:#2563eb}.trend-legend .done{background:#16a34a}
.setting-divider{border-top:1px solid #edf1f5;margin:22px 0}.setting-title{font-size:15px;margin:4px 0 14px}
.service-behavior-note{display:flex;gap:8px;background:#f4f7fb;border-radius:10px;padding:10px 11px;font-size:9px;color:#627286}.service-behavior-note i{color:#7c3aed}

@media(max-width:991px){
  .sla-rules{justify-content:flex-start}
}
.agenda-next-number{font-size:46px;font-weight:900;letter-spacing:3px;color:#102f52;margin:14px 0 0}.agenda-warning{display:flex;gap:8px;background:#eef6ff;color:#42617f;border-radius:10px;padding:11px;font-size:9px}

/* Final notification UX */
.notification-nav-link{
  position:relative;
  display:flex!important;
  align-items:center;
}
.notification-nav-link .nav-label{flex:1}
.sidebar-notif-badge{
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:900;
  line-height:1;
  box-shadow:0 0 0 3px rgba(239,68,68,.12);
}
.notif-summary{
  font-size:10px;
  color:#7a889b;
  margin-top:4px;
}
.notification-item.unread{
  background:#f3f7ff;
  border-left:3px solid #2563eb;
  padding-left:12px;
}
.notification-item.unread:hover{
  background:#edf4ff;
}
.notif-title-row{
  display:flex;
  align-items:center;
  gap:7px;
}
.unread-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2563eb;
  flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(37,99,235,.09);
}
.notif-state{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  color:#8d99a8;
  flex:0 0 auto;
}
.badge-unread,.badge-read{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 7px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.4px;
}
.badge-unread{
  background:#e7f0ff;
  color:#1d5fd0;
}
.badge-read{
  background:#f0f2f5;
  color:#8a96a5;
}
@media(max-width:768px){
  .notif-state .badge-read{display:none}
  .notification-item{gap:10px}
}
/* =========================================================
   MOBILE SIDEBAR - LOGOUT SELALU TERLIHAT
   ========================================================= */

@media (max-width:768px){

  .sidebar{
    height:100dvh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding-bottom:env(safe-area-inset-bottom);
  }

  .sidebar .nav-section{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .sidebar-user{
    flex:0 0 auto;
    margin-top:auto;
    position:relative;
    z-index:20;
    background:#0d2b4d;
    padding-top:12px;
    padding-bottom:12px;
  }

}
/* =========================================================
   FINAL MOBILE FIX
   ========================================================= */

@media (max-width:768px){

  /* =====================================
     SIDEBAR MOBILE
     ===================================== */

  .sidebar{
    height:100dvh !important;
    min-height:100dvh !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    position:fixed;
  }

  /* Menu boleh scroll */
  .sidebar .nav-section{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-bottom:85px !important;
    -webkit-overflow-scrolling:touch;
  }

  /* User + logout DIPAKSA di bawah */
  .sidebar-user{
    position:absolute !important;
    left:0;
    right:0;
    bottom:0;
    z-index:2000 !important;

    margin:0 !important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom)) !important;

    background:#0d2b4d !important;
    border-top:1px solid rgba(255,255,255,.12);
  }


  /* =====================================
     FORM REQUEST MOBILE
     ===================================== */

  .content-wrapper,
  .main-content{
    padding-bottom:120px !important;
  }

  .request-actions{
    display:flex;
    flex-direction:column;
    gap:12px;

    /*
      PENTING:
      ruang ini dipakai tombol Kirim Request
      sehingga Tambah Orang tidak tertutup.
    */
    padding-bottom:90px !important;
  }

  .add-person-btn{
    width:100%;
    min-height:48px;
    position:relative;
    z-index:10;
  }

  /* Kirim Request tetap mengambang di bawah */
  .mobile-submit{
    position:fixed !important;

    /*
      Sidebar mobile lebarnya sekitar 82px.
      Jadi tombol tidak dimulai dari ujung kiri layar.
    */
    left:98px !important;
    right:16px !important;

    bottom:calc(14px + env(safe-area-inset-bottom)) !important;

    z-index:1050 !important;
    width:auto !important;
    min-height:52px;

    box-shadow:0 12px 28px rgba(15,39,71,.22);
  }

}
/* =========================================================
   MOBILE LOGOUT FIX - FINAL
   ========================================================= */

@media (max-width:768px){

  .sidebar-user{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    padding:10px 6px !important;
  }

  /* Di HP nama dan role disembunyikan karena sidebar sempit */
  .sidebar-user .flex-grow-1{
    display:none !important;
  }

  /* Avatar tetap terlihat */
  .sidebar-user .avatar{
    width:40px !important;
    height:40px !important;
    flex:0 0 40px !important;
  }

  /* Tombol logout wajib terlihat */
  .sidebar-user .icon-btn{
    display:grid !important;
    place-items:center !important;

    width:40px !important;
    height:40px !important;

    min-width:40px !important;
    min-height:40px !important;

    margin:0 !important;

    color:#ffffff !important;
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.15) !important;
    border-radius:10px !important;
  }

  .sidebar-user .icon-btn i{
    display:block !important;
    font-size:19px !important;
  }

}