:root{
  --dark:#7c2d12;
  --nav:#8a3515;
  --nav2:#c2410c;
  --bg:#fff7ed;
  --panel:#ffffff;
  --line:#fed7aa;
  --blue:#ea580c;
  --blue2:#c2410c;
  --green:#f97316;
  --orange:#f97316;
  --sky:#fb923c;
  --red:#dc2626;
  --text:#2f241f;
  --muted:#7c5b49;
  --shadow:0 12px 30px rgba(124,45,18,.10);
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#fff7ed 0%,#fffbf5 55%,#fff7ed 100%);color:var(--text);font-family:"Segoe UI",Arial,sans-serif;font-size:14px}
button,input,select,textarea{font:inherit}
.login{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(135deg,#7c2d12 0%,#ea580c 55%,#fb923c 100%)
}
.login-card{width:min(980px,100%);background:white;border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;box-shadow:0 30px 90px rgba(124,45,18,.32)}
.login-left{background:linear-gradient(135deg,rgba(124,45,18,.96),rgba(234,88,12,.92));color:white;padding:42px}
.brand{display:flex;gap:14px;align-items:center;margin-bottom:34px}
.logo{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff7ed;color:#9a3412;font-weight:900;border:2px solid rgba(255,237,213,.95)}
.brand h1{margin:0;font-size:28px;letter-spacing:.5px}.brand p{margin:4px 0 0;opacity:.78}
.login-left h2{font-size:31px;line-height:1.18;margin:0 0 14px}.login-left p{line-height:1.65;opacity:.88}
.flow{display:grid;gap:10px;margin-top:26px}.flow div{padding:12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.1);border-radius:12px}
.login-form{padding:42px}.login-form h3{margin:0 0 8px;font-size:24px}.muted{color:var(--muted)}
.field{margin-bottom:14px}label{display:block;font-weight:700;font-size:13px;margin:0 0 6px;color:#394150}
input,select,textarea{width:100%;border:1px solid #d9e1ea;border-radius:8px;padding:10px 11px;background:#fff;color:var(--text)}
textarea{resize:vertical;min-height:85px}
.btn{border:0;border-radius:7px;padding:9px 13px;color:white;background:#24323c;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;justify-content:center;text-decoration:none}
.btn:hover{filter:brightness(1.05)}.btn.block{width:100%}.btn.primary{background:linear-gradient(135deg,#ea580c,#fb923c)}.btn.blue{background:#ea580c}.btn.green{background:#f97316}.btn.orange{background:#fb923c}.btn.red{background:var(--red)}
.btn.light{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}.btn.small{padding:6px 9px;font-size:12px}
.demo{display:grid;gap:8px;margin-top:18px}.demo button{border:1px solid #fed7aa;background:#fff7ed;text-align:left;border-radius:9px;padding:9px 10px;color:#334155;cursor:pointer}
.demo button:hover{background:#ffedd5}
.app{display:none;min-height:100vh}
.topbar{height:66px;background:linear-gradient(135deg,#7c2d12,#9a3412);color:white;position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 18px;z-index:20;box-shadow:0 2px 12px rgba(0,0,0,.14)}
.top-left{display:flex;align-items:center;gap:12px}.top-left h2{margin:0;font-size:23px}.hamb{border:0;background:transparent;color:white;font-size:18px;cursor:pointer;margin-left:18px}
.logout{background:#e5e7eb;color:#374151;border:0;border-radius:3px;padding:10px 16px;font-size:15px;cursor:pointer}
.layout{padding-top:66px;display:flex}
.sidebar{width:285px;position:fixed;top:66px;bottom:0;left:0;background:linear-gradient(180deg,#7c2d12,#8a3515);color:white;overflow:auto;z-index:15;transition:.2s}
.profile{height:92px;padding:14px 18px;background:linear-gradient(135deg,rgba(251,146,60,.80),rgba(234,88,12,.80));display:flex;gap:12px;align-items:center}
.avatar{width:54px;height:54px;border-radius:50%;background:#f1f5f9;color:#111827;display:grid;place-items:center;font-size:25px}
.online{color:#dcfce7;display:flex;gap:7px;align-items:center}.online i{width:11px;height:11px;border-radius:50%;background:#18e08b;display:inline-block}.role{display:inline-flex;margin-top:5px;background:rgba(0,0,0,.25);border-radius:999px;padding:3px 8px;font-size:12px;text-transform:uppercase}
.menu-title{padding:14px 18px;border-bottom:1px solid rgba(251,146,60,.75);font-weight:800}.menu button, .sidebar nav a{width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.05);background:transparent;color:#f3f4f6;text-align:left;padding:13px 15px;display:flex;gap:11px;align-items:center;cursor:pointer;text-decoration:none}
.menu button:hover,.menu button.active, .sidebar nav a:hover, .sidebar nav a.active{background:#c2410c}
.ico{width:18px;text-align:center}.menu button.submenu{padding-left:42px;font-size:13px}.menu button.config{padding-left:42px}
.menu-title.sub{background:rgba(255,255,255,.04);border-bottom:1px solid rgba(251,146,60,.35)}
.main{margin-left:285px;width:calc(100% - 285px);padding:20px 26px 58px;transition:.2s}
.main h1{color:#7c2d12;margin:0 0 16px}
.crumb{background:white;padding:12px 17px;border-radius:3px;margin-bottom:13px;display:flex;gap:8px;align-items:center}
.welcome{background:linear-gradient(135deg,#ea580c,#fb923c);color:white;padding:15px 17px;margin-bottom:20px;display:flex;justify-content:space-between;gap:12px;align-items:center;box-shadow:var(--shadow)}
.panel{background:white;border:1px solid var(--line);border-top:3px solid #fb923c;box-shadow:var(--shadow);padding:17px;margin-bottom:20px;border-radius:16px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}.panel-head h3{margin:0;color:#c2410c;font-size:22px;font-weight:500}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;padding:8px 34px;margin-bottom:25px}
.stat{min-height:125px;color:white;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.stat .num{font-size:44px;font-weight:800;line-height:1}.stat .label{font-size:18px}.stat .big{position:absolute;right:16px;top:16px;font-size:74px;opacity:.20}.stat .eye{height:25px;display:grid;place-items:center;background:rgba(0,0,0,.11);margin:0 -17px -17px;color:rgba(255,255,255,.78)}
.grey{background:#cfd3da;color:#111}.orange{background:var(--orange)}.sky{background:var(--sky)}.green{background:var(--green)}.red{background:var(--red)}
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}.search{max-width:360px}
table{width:100%;border-collapse:collapse;background:white;font-size:13px}th,td{border:1px solid #ffedd5;padding:9px 8px;text-align:left;vertical-align:top}th{background:#fff7ed;color:#9a3412;font-size:12px;text-transform:uppercase;letter-spacing:.03em}tr:hover td{background:#fffaf5}
.pill, .badge{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800;background:#ffedd5;color:#9a3412}.pill.ok, .badge.ok{background:#dcfce7;color:#166534}.pill.pending, .badge.wait{background:#fef3c7;color:#92400e}.pill.bad, .badge.bad{background:#fee2e2;color:#991b1b}.pill.info{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.money{font-variant-numeric:tabular-nums}.actions{display:flex;gap:6px;flex-wrap:wrap}.tag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tag-option{border:1px solid #fed7aa;border-radius:10px;padding:11px 12px;background:#fff7ed;display:flex;gap:9px;align-items:center;cursor:pointer}
.tag-option input{width:auto}.tag-option b{font-size:13px}.selected-levels{border:1px solid #fed7aa;border-radius:10px;background:#fffaf5;padding:11px 12px;min-height:44px}
.selected-levels .pill{margin:3px}

/* Modern dashboard refresh */
.dashboard-hero{
  position:relative;overflow:hidden;border-radius:22px;padding:24px;margin-bottom:20px;color:#fff;
  background:
    radial-gradient(circle at 12% 10%,rgba(255,255,255,.22),transparent 24%),
    radial-gradient(circle at 88% 18%,rgba(255,237,213,.40),transparent 28%),
    linear-gradient(135deg,#7c2d12 0%,#ea580c 55%,#fb923c 100%);
  box-shadow:0 18px 45px rgba(124,45,18,.22);
}
.dashboard-hero:after{content:"";position:absolute;right:-80px;bottom:-100px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.10)}
.hero-content{position:relative;z-index:1;display:flex;justify-content:space-between;gap:18px;align-items:flex-end;flex-wrap:wrap}
.hero-title{font-size:28px;font-weight:900;letter-spacing:.3px;margin:0 0 8px}
.hero-subtitle{max-width:780px;line-height:1.6;opacity:.88;margin:0}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-chip{display:inline-flex;gap:8px;align-items:center;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);font-weight:800;font-size:12px;margin-bottom:12px}
.modern-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:20px}
.metric-card{position:relative;overflow:hidden;background:#fff;border:1px solid #ffedd5;border-radius:18px;padding:18px;box-shadow:0 12px 30px rgba(16,24,40,.08)}
.metric-card:before{content:"";position:absolute;right:-35px;top:-35px;width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,rgba(234,88,12,.15),rgba(251,146,60,.17))}
.metric-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.metric-label{font-size:13px;color:#667085;font-weight:800;margin-bottom:8px}
.metric-value{font-size:30px;font-weight:900;letter-spacing:-.7px;color:#1d2939}
.metric-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#fff7ed;color:#ea580c;font-size:22px}
.metric-foot{font-size:12px;color:#667085;margin-top:10px;display:flex;align-items:center;gap:7px}
.metric-foot .dot{width:8px;height:8px;border-radius:50%;background:#f97316}
.modern-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}
.dashboard-grid{grid-template-columns:1.55fr .75fr}
.dashboard-main-panel{min-height:100%}
.dashboard-status-monitor{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px;align-items:start}
.dashboard-status-monitor .status-grid.modern{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.dashboard-status-monitor .status-card.modern{padding:12px}
.dashboard-status-monitor .status-card.modern b{font-size:22px}
.mini-title{font-weight:900;color:#344054;margin-bottom:10px}
.mini-monitor{border:1px solid #ffedd5;background:#fffaf5;border-radius:16px;padding:12px;overflow:auto}
.compact-head{margin-bottom:10px}
.mini-monitor table{font-size:12px;background:#fff}
.mini-monitor th,.mini-monitor td{padding:7px 6px}
@media(max-width:1300px){.dashboard-status-monitor{grid-template-columns:1fr}.dashboard-status-monitor .status-grid.modern{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.dashboard-status-monitor .status-grid.modern{grid-template-columns:repeat(2,minmax(0,1fr))}}

.modern-panel{background:#fff;border:1px solid #ffedd5;border-radius:18px;box-shadow:0 12px 30px rgba(16,24,40,.07);padding:18px}
.modern-panel .panel-head{margin-bottom:14px}
.status-grid.modern{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.status-card.modern{border:1px solid #ffedd5;border-radius:16px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 8px 18px rgba(16,24,40,.05);padding:14px}
.status-card.modern b{font-size:24px;color:#1d2939}
.status-card.modern span{font-weight:800}
.quick-monitor{display:grid;gap:10px}
.quick-monitor .item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border:1px solid #ffedd5;border-radius:14px;background:#fbfdff}
.quick-monitor b{font-size:13px}
.quick-monitor small{color:#667085}
.menu-group{border-bottom:1px solid rgba(255,255,255,.05)}
.menu-toggle{width:100%;border:0;background:transparent;color:#f3f4f6;text-align:left;padding:13px 15px;display:flex;gap:11px;align-items:center;cursor:pointer}
.menu-toggle:hover,.menu-toggle.active{background:#c2410c}
.menu-toggle .chev{margin-left:auto;transition:.18s ease}
.menu-group.open .chev{transform:rotate(90deg)}
.submenu-panel{display:none;background:rgba(0,0,0,.13)}
.menu-group.open .submenu-panel{display:block}
.submenu-panel .menu-title.sub{font-size:13px;padding:12px 18px 8px;border-bottom:0;color:#cbd5e1}
.submenu-panel button, .submenu-panel a{padding-left:42px;font-size:13px}
@media(max-width:1200px){.modern-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.modern-grid{grid-template-columns:1fr}.status-grid.modern{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.modern-cards,.status-grid.modern{grid-template-columns:1fr}.hero-content{align-items:flex-start}.hero-title{font-size:24px}}

.status-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:12px 0 18px}
.status-card{border:1px solid #d8e0ea;border-radius:10px;background:#fbfdff;padding:11px 12px;cursor:pointer}
.status-card:hover{background:#f0f7ff}
.status-card b{font-size:20px;display:block}
.progressbar{height:8px;background:#edf2f7;border-radius:999px;overflow:hidden;margin-top:7px}
.progressbar span{display:block;height:100%;background:linear-gradient(90deg,#ea580c,#fb923c);border-radius:999px}
.timeline-wrap{position:relative;margin:8px 0}
.timeline-item{display:grid;grid-template-columns:34px 1fr;gap:10px;position:relative}
.timeline-item:before{content:"";position:absolute;left:16px;top:34px;bottom:-8px;width:2px;background:#d8e0ea}
.timeline-item:last-child:before{display:none}
.timeline-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#edf2f7;color:#475569;font-weight:800;border:2px solid white;box-shadow:0 0 0 1px #d8e0ea}
.timeline-item.done .timeline-dot{background:#dcfce7;color:#166534;box-shadow:0 0 0 1px #86efac}
.timeline-item.now .timeline-dot{background:#fef3c7;color:#92400e;box-shadow:0 0 0 1px #facc15}
.timeline-item.stop .timeline-dot{background:#fee2e2;color:#991b1b;box-shadow:0 0 0 1px #fca5a5}
.timeline-content{padding:0 0 15px}
.timeline-content h4{margin:2px 0 4px;font-size:14px}
.timeline-content p{margin:0;color:#667085;font-size:13px;line-height:1.45}
.history-box{border:1px solid #ffedd5;background:#fffaf5;border-radius:10px;padding:12px;margin-top:12px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.detail-grid .item{background:#f8fafc;border:1px solid #e5e9ef;border-radius:999px;padding:10px}
.detail-grid .item b{display:block;font-size:12px;color:#667085;margin-bottom:4px}
@media(max-width:1100px){.status-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.detail-grid{grid-template-columns:1fr}}
@media(max-width:820px){.status-grid{grid-template-columns:1fr}}

@media(max-width:820px){.tag-grid{grid-template-columns:1fr}}.page{display:none}.page.active{display:block}

.notif-panel{display:grid;gap:10px;max-height:430px;overflow:auto;padding-right:3px}
.notif-item{border:1px solid #ffedd5;border-radius:14px;background:#fff;padding:12px;box-shadow:0 8px 18px rgba(16,24,40,.04);cursor:pointer;transition:.15s ease}
.notif-item:hover{transform:translateY(-1px);box-shadow:0 12px 22px rgba(16,24,40,.08)}
.notif-item.unread{border-left:5px solid #ea580c;background:#fffaf5}
.notif-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:5px}
.notif-title{font-weight:900;color:#1d2939;font-size:13px}
.notif-time{font-size:11px;color:#667085;white-space:nowrap}
.notif-msg{font-size:12px;color:#667085;line-height:1.45}
.notif-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.notif-badge{display:inline-flex;border-radius:999px;padding:3px 7px;font-size:11px;font-weight:800;background:#edf2f7;color:#334155}
.notif-badge.action{background:#fff7ed;color:#9a3412}
.notif-badge.done{background:#dcfce7;color:#166534}
.notif-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.notif-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#ef4444;color:white;font-weight:900;font-size:12px}
.timeline-notice{margin-top:8px;border-left:4px solid #ea580c;background:#fffaf5;border-radius:8px;padding:8px 10px;font-size:12px;color:#475467}

.master-select-note{background:#fff7ed;border-left:5px solid #ea580c;border-radius:10px;padding:11px 13px;color:#7c5b49;line-height:1.55;margin:4px 0 10px}
.locked-field{background:#f4f7fa!important;color:#475467!important}
.master-source{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;font-size:11px;font-weight:800;padding:4px 8px;margin-top:4px}

.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.proposal-card{border:1px solid #ffedd5;border-radius:14px;background:#fff;padding:14px;margin-bottom:12px;box-shadow:0 8px 18px rgba(16,24,40,.04)}
.proposal-card h4{margin:0 0 7px;color:#c2410c}
.budget-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.budget-summary .item{background:#fffaf5;border:1px solid #ffedd5;border-radius:12px;padding:12px}
.budget-summary .item b{display:block;font-size:18px;margin-top:4px}
.status-flow{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.status-flow .step{border-radius:999px;background:#edf2f7;color:#475467;padding:5px 9px;font-size:11px;font-weight:800}
.status-flow .step.now{background:#fef3c7;color:#92400e}
.status-flow .step.done{background:#dcfce7;color:#166534}

.rekap-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.rekap-summary .item{background:#fffaf5;border:1px solid #ffedd5;border-radius:12px;padding:12px}
.rekap-summary .item b{display:block;font-size:20px;margin-top:4px;color:#1d2939}
.file-note{font-size:12px;color:#7c5b49;margin-top:6px}
.file-pill{display:inline-flex;align-items:center;gap:6px;background:#fff7ed;color:#9a3412;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800;border:1px solid #fed7aa}
@media(max-width:1000px){.rekap-summary{grid-template-columns:1fr}}

@media(max-width:1000px){.review-grid,.budget-summary{grid-template-columns:1fr}}

.menu-help{background:linear-gradient(135deg,#ffffff,#f8fbff);border:1px solid #e5e9ef;border-left:5px solid #2f86bd;border-radius:12px;padding:13px 15px;margin-bottom:16px;box-shadow:0 8px 18px rgba(16,24,40,.05);line-height:1.55}
.menu-help b{color:#1d4e78}.menu-help span{color:#667085}
.alert{padding:12px 14px;margin-bottom:14px;border-left:4px solid;border-radius:4px;line-height:1.5}.alert.info{background:#fff7ed;border-color:#f97316;color:#7c2d12}.alert.warn{background:#fffbeb;border-color:#f59e0b;color:#78350f}.alert.ok{background:#fff7ed;border-color:#f97316;color:#7c2d12}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.full{grid-column:1/-1}
.modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.64);z-index:80;align-items:center;justify-content:center;padding:18px}.modal.show{display:flex}
.modal-box{width:min(880px,100%);max-height:90vh;overflow:auto;background:white;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.28);padding:21px}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:17px}.modal-head h3{margin:0}.x{border:0;background:#f1f5f9;border-radius:8px;padding:8px 11px;cursor:pointer}

/* Output Capaian Detail */
.detail-shell{background:white;border:1px solid #d8dde6;padding:0;box-shadow:var(--shadow)}
.detail-title{padding:17px 18px;border-bottom:1px solid #edf0f4;color:#2b6da3;font-size:20px;letter-spacing:.6px}
.tabs{display:flex;gap:0;padding:0 18px;border-bottom:1px solid #d8dde6;overflow:auto}
.tab{border:1px solid #d8dde6;border-bottom:0;background:#f8fafc;color:#4b5563;padding:11px 15px;cursor:pointer;border-radius:3px 3px 0 0;margin-right:3px;white-space:nowrap}
.tab.active{background:var(--blue2);color:white;font-weight:800}
.tab-body{display:none;padding:14px 18px}.tab-body.active{display:block}
.info-table{max-width:920px}.info-table td{border-left:0;border-right:0}.info-table td:first-child{font-weight:800;width:310px}.colon{width:16px!important;text-align:center;font-weight:800!important}
.scope-title{font-size:14px;margin:16px 0 9px;color:#454b55;letter-spacing:.5px}.scope-title:before{content:"› ";font-weight:900}
.renstra-table th{background:#ea580c;color:white;text-align:center;vertical-align:middle}.renstra-table .numrow td{background:#ffedd5;text-align:center;font-weight:800;color:#7c2d12}
.renstra-table .group-row td{font-weight:800;background:#fbfbfc}.blue-text{color:#c2410c;font-weight:800}.right{text-align:right}.center{text-align:center}.total-row td{font-weight:800;background:#fff}
.report{background:white;border:1px solid #d8dde6;border-radius:8px;padding:22px;line-height:1.65}.report h1{text-align:center;margin:0 0 6px;font-size:21px}.report h2{font-size:16px;margin:20px 0 8px}
.footer, footer{position:fixed;bottom:0;left:285px;right:0;height:34px;background:#111820;color:white;display:grid;place-items:center;font-size:13px;transition:.2s;z-index:20}
.collapsed .sidebar{left:-285px}.collapsed .main{margin-left:0;width:100%}.collapsed .footer, .collapsed footer{left:0}
@media(max-width:1150px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));padding:0}.grid2{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}}
@media(max-width:820px){.login-card{grid-template-columns:1fr}.sidebar{left:-285px}.main{margin-left:0;width:100%;padding:16px}.footer, footer{left:0}.mobile-open .sidebar{left:0}.cards{grid-template-columns:1fr}.welcome{align-items:flex-start;flex-direction:column}.top-left h2{font-size:17px}}
@media print{.topbar,.sidebar,.crumb,.welcome,.toolbar,.actions,.btn,.footer,footer,.no-print{display:none!important}.main{margin:0;width:100%;padding:0}.panel{box-shadow:none;border:0}.page{display:block}body{background:white} .detail-shell{box-shadow:none;border:0}}

/* Dashboard atas-bawah: Status di atas, Monitoring di bawah */
.dashboard-status-monitor.vertical{
  display:grid;
  grid-template-columns:1fr!important;
  gap:16px;
  align-items:stretch;
}
.dashboard-status-monitor.vertical .status-grid.modern{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px;
}
.dashboard-status-monitor.vertical .mini-monitor{
  width:100%;
  overflow:auto;
}
.dashboard-status-monitor.vertical .mini-monitor table{
  min-width:900px;
}
@media(max-width:1200px){
  .dashboard-status-monitor.vertical .status-grid.modern{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:760px){
  .dashboard-status-monitor.vertical .status-grid.modern{
    grid-template-columns:1fr!important;
  }
  .dashboard-status-monitor.vertical .mini-monitor table{
    min-width:720px;
  }
}

/* Filter tahun/waktu pelayanan untuk report */
.report-filter{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  background:#fffaf5;
  border:1px solid #ffedd5;
  border-radius:12px;
  padding:10px 12px;
  margin:10px 0 14px;
}
.report-filter label{
  margin:0;
  font-size:12px;
  color:#7c5b49;
  font-weight:800;
}
.report-filter select{max-width:220px}
.report-filter .hint{font-size:12px;color:#7c5b49}

/* LPJ enhancements */
.lpj-docs{display:grid;gap:6px}
.lpj-mini{font-size:12px;line-height:1.55}
.lpj-mini b{color:#344054}
.lpj-verify{display:grid;gap:6px}
.lpj-verify .row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* Pre-production hardening */
.locked-badge,.doc-no{
  display:inline-flex;align-items:center;gap:5px;
  border-radius:999px;padding:4px 8px;font-size:11px;font-weight:900;
  background:#fff7ed;color:#9a3412;border:1px solid #fed7aa
}
.doc-no{background:#eef4ff;color:#1d4ed8;border-color:#bfdbfe}
.percent-good{background:#dcfce7;color:#166534;border:1px solid #bbf7d0;border-radius:999px;padding:4px 8px;font-weight:900}
.percent-watch{background:#fef9c3;color:#854d0e;border:1px solid #fde68a;border-radius:999px;padding:4px 8px;font-weight:900}
.percent-low{background:#ffedd5;color:#9a3412;border:1px solid #fdba74;border-radius:999px;padding:4px 8px;font-weight:900}
.percent-bad{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;border-radius:999px;padding:4px 8px;font-weight:900}
.audit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.audit-card{background:#fffaf5;border:1px solid #ffedd5;border-radius:14px;padding:14px}
.audit-card h4{margin:0 0 8px;font-size:16px}
.audit-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.readiness-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.readiness-list div{border:1px solid #ffedd5;background:#fff;border-radius:12px;padding:10px}
.readiness-list b{display:block;color:#344054;margin-bottom:3px}
@media(max-width:1000px){.audit-grid,.readiness-list{grid-template-columns:1fr}}

/* RPPS-RPPK-RPPJ + SPOCha extension */
.rpp-flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:12px 0 18px}
.rpp-flow .step{background:#fff;border:1px solid #ffedd5;border-radius:14px;padding:12px;box-shadow:0 8px 18px rgba(16,24,40,.05);position:relative;overflow:hidden}
.rpp-flow .step:before{content:"";position:absolute;right:-25px;top:-25px;width:70px;height:70px;border-radius:50%;background:rgba(251,146,60,.18)}
.rpp-flow .step b{display:block;color:#c2410c;margin-bottom:4px}.rpp-flow .step span{font-size:12px;color:#7c5b49;line-height:1.4}
.spocha-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 18px}
.spocha-card{border-radius:16px;padding:14px;color:#fff;box-shadow:0 12px 26px rgba(16,24,40,.10);min-height:110px}
.spocha-card b{font-size:22px;display:block}.spocha-card span{display:block;opacity:.92;line-height:1.45;margin-top:6px}
.spocha-s{background:linear-gradient(135deg,#c2410c,#fb923c)}.spocha-p{background:linear-gradient(135deg,#9a3412,#f97316)}.spocha-o{background:linear-gradient(135deg,#ea580c,#fdba74)}.spocha-cha{background:linear-gradient(135deg,#7c2d12,#fb923c)}
.spocha-badge{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:900;color:white}
.spocha-badge.S{background:#c2410c}.spocha-badge.P{background:#9a3412}.spocha-badge.O{background:#ea580c}.spocha-badge.Cha{background:#7c2d12}
.strategy-badge{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:900;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.usg{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f1f5f9;border:1px solid #e5e9ef;font-weight:900;color:#344054}
.doc-level{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.doc-level.rpps{background:#eff6ff;color:#1d4ed8}.doc-level.rppk{background:#ecfdf5;color:#166534}.doc-level.rppj{background:#fff7ed;color:#9a3412}
@media(max-width:1200px){.rpp-flow,.spocha-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.rpp-flow,.spocha-grid{grid-template-columns:1fr}}

.login-summary-card{margin-top:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:18px;box-shadow:0 12px 30px rgba(124,45,18,.16)}
.login-summary-card h3{margin:6px 0 8px;font-size:21px;color:#fff}.login-summary-card p{margin:0;line-height:1.6;opacity:.92}.summary-kicker{text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:900;color:#ffedd5}.summary-flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:14px}.summary-flow span{display:grid;place-items:center;min-height:36px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);font-weight:900;font-size:12px;color:#fff}
@media(max-width:760px){.summary-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}