@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');
:root{--green:#0b6b4f;--dark:#173a32;--text:#243a35;--muted:#71837d;--line:#e3ebe6;--red:#c43d41;--shadow:0 10px 30px rgba(25,66,49,.055)}*{box-sizing:border-box}body{margin:0;color:var(--text);font-family:'Source Sans 3','Inter',Arial,sans-serif;font-size:14px;line-height:1.55;background:#f4f7f5}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.muted,.help{color:var(--muted)}.hidden{display:none!important}.auth-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 12% 10%,#d6f0df 0,transparent 33%),radial-gradient(circle at 90% 90%,#d9efe8 0,transparent 30%),#f5f8f5}.auth-card{width:min(100%,440px);background:white;padding:34px;border:1px solid #e7eee9;border-radius:22px;box-shadow:0 24px 70px #174a3420}.auth-brand,.sidebar-brand{display:flex;align-items:center;gap:12px}.logo-mark{display:inline-grid;place-items:center;flex:0 0 43px;width:43px;height:43px;border-radius:14px;background:linear-gradient(145deg,#16a676,#075c44);color:#fff;font:800 23px Manrope,sans-serif;box-shadow:0 6px 14px #0c77534a}.auth-brand b,.sidebar-brand b{display:block;color:var(--dark);font:800 17px Manrope,sans-serif;letter-spacing:.4px}.auth-brand small,.sidebar-brand small{display:block;color:var(--muted);font-size:11px;margin-top:1px}.auth-card h1{font:800 25px Manrope,sans-serif;margin:31px 0 6px;color:var(--dark)}.auth-card>p{margin-top:0}.auth-card form{margin-top:24px}.auth-card label,.form-grid label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;color:#344a43;margin-bottom:14px}.auth-card input,.form-grid input,.form-grid select,.form-grid textarea,.search-form input,.filter-form input{width:100%;min-width:0;border:1px solid #d9e4dd;border-radius:9px;padding:11px 12px;background:#fff;color:var(--text);outline:none;transition:border .15s,box-shadow .15s}.auth-card input:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.search-form input:focus,.filter-form input:focus{border-color:#1b9a70;box-shadow:0 0 0 3px #1b9a701b}.auth-footer{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-size:12px;margin:21px 0 0;color:var(--muted)}.auth-footer a,.auth-card a:not(.auth-brand){color:var(--green);font-weight:700}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:9px;min-height:40px;padding:9px 15px;font-weight:700;font-size:12px;transition:transform .15s,background .15s;white-space:nowrap}.btn:hover{transform:translateY(-1px)}.btn.primary{color:#fff;background:var(--green);box-shadow:0 5px 12px #0b6b4f20}.btn.primary:hover{background:#07573f}.btn.secondary{background:#eaf3ee;color:var(--green);border-color:#dbe9df}.btn.ghost{background:transparent;color:var(--muted);border-color:var(--line)}.btn.full{width:100%;margin-top:4px}.btn.small{min-height:30px;padding:5px 9px;font-size:11px}.btn.danger-outline{color:var(--red);border-color:#f1c9cb;background:#fff8f8}.alert{border:1px solid;padding:12px 15px;border-radius:10px;font-size:12px;margin:0 0 17px}.alert.success{background:#eaf8ef;border-color:#cbead4;color:#17663b}.alert.danger{background:#fff0f0;border-color:#f0cdcd;color:#a82d33}.alert.info{background:#edf5ff;border-color:#d1e2f7;color:#2b5c92}.alert.compact{margin-top:18px}.app-body{background:#f3f7f4;min-height:100vh}.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;flex:0 0 250px;background:#fff;border-right:1px solid var(--line);padding:23px 15px 17px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.sidebar-brand{padding:0 9px 22px;border-bottom:1px solid #edf1ee}.profile{display:flex;gap:10px;align-items:center;margin:20px 6px 18px;padding:12px 10px;background:#f5f8f6;border:1px solid #ebf0ec;border-radius:12px;min-width:0}.avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;flex:0 0 36px;background:#d9f0e4;color:var(--green);font-weight:800;font-size:16px}.profile b{display:block;font-size:12px;line-height:1.4;overflow-wrap:anywhere}.profile small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.side-nav{display:flex;flex-direction:column;gap:4px}.nav-label{font-size:9px;color:#91a39b;font-weight:800;letter-spacing:1.1px;padding:5px 11px 8px}.side-nav a{display:flex;align-items:center;min-height:42px;padding:10px 12px;border-radius:10px;color:#5b7168;font-weight:600;font-size:12px;gap:9px}.side-nav a:hover{background:#f5f8f6;color:var(--green)}.side-nav a.current{background:#e6f4ec;color:var(--green);font-weight:800}.logout-form{margin-top:auto;padding-top:18px;border-top:1px solid #edf1ee}.logout-form button{border:0;background:none;padding:10px 12px;color:#a94548;font-size:12px;font-weight:800;width:100%;text-align:left;border-radius:9px}.logout-form button:hover{background:#fff1f1}.sidebar-foot{font-size:9px;color:#9aa8a1;padding:13px 8px 0}.main-area{min-width:0;flex:1}.topbar{min-height:91px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,3vw,42px);gap:20px}.eyebrow{display:block;font-size:9px;letter-spacing:1.25px;font-weight:800;color:var(--green);margin-bottom:4px}.topbar h1{margin:0;font:800 23px Manrope,sans-serif;color:var(--dark)}.top-user{font-size:12px;color:var(--muted);white-space:nowrap}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#1ca36e;margin:0 5px 1px 0}.content-area{padding:26px clamp(20px,3vw,42px) 18px;max-width:1660px;margin:0 auto}.welcome-card{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:158px;border-radius:17px;padding:28px 32px;background:linear-gradient(110deg,#075e45,#10845f 70%,#24986a);color:#fff;overflow:hidden;position:relative;margin-bottom:20px}.welcome-card .eyebrow{color:#b9ead5}.welcome-card h2{font:800 clamp(20px,2vw,26px) Manrope,sans-serif;margin:7px 0;max-width:600px}.welcome-card p{margin:0;color:#e0f5e8;max-width:620px;font-size:12px}.welcome-art{font-size:82px;line-height:1;opacity:.2;margin-right:22px;transform:rotate(-13deg)}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:20px}.metric-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 18px;min-width:0;box-shadow:var(--shadow)}.metric-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;font-size:15px;margin-bottom:13px}.metric-icon.green,.quick-icon.green{background:#e0f4e9;color:#17845d}.metric-icon.blue,.quick-icon.blue{background:#e4efff;color:#3976c8}.metric-icon.orange,.quick-icon.orange{background:#fff0dd;color:#bd761a}.metric-icon.purple,.quick-icon.purple{background:#eee9ff;color:#7863bb}.metric-label{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.metric strong{display:block;font:800 clamp(18px,2vw,25px) Manrope,sans-serif;color:var(--dark);line-height:1.4;overflow-wrap:anywhere}.metric strong em{font-size:11px;font-style:normal;color:var(--muted);font-family:'DM Sans',sans-serif}.metric small{display:block;color:#92a099;font-size:10px;margin-top:7px}.metric .date-metric{font-size:16px;padding-top:5px}.content-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:17px;margin-bottom:20px}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:19px;min-width:0;box-shadow:var(--shadow)}.content-grid .panel{margin-bottom:0}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:17px}.panel-head h3{font:800 15px Manrope,sans-serif;margin:0 0 4px;color:var(--dark)}.panel-head p{font-size:11px;color:var(--muted);margin:0}.text-action{font-size:11px;color:var(--green);font-weight:800;white-space:nowrap}.bar-chart{display:grid;gap:15px;margin-top:7px}.bar-row{display:grid;grid-template-columns:130px minmax(40px,1fr) 70px;gap:10px;align-items:center;font-size:11px}.bar-label{font-weight:600}.bar-track{height:10px;background:#eef4f0;border-radius:8px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,#15976a,#65c59a);border-radius:8px;min-width:2px}.bar-row>b{text-align:right;color:#486056;font-size:10px}.empty-state{display:flex;align-items:center;flex-direction:column;text-align:center;padding:18px 15px 8px}.empty-state>span{font-size:34px;color:#64aa86}.empty-state b{margin-top:5px;color:var(--dark)}.empty-state p{color:var(--muted);font-size:11px;margin:4px 0 13px}.empty-inline{padding:25px;text-align:center;color:var(--muted);font-size:12px;background:#fafcfb;border-radius:8px}.quick-links{display:grid;gap:7px}.quick-links>a{display:flex;align-items:center;gap:11px;padding:10px 9px;border-radius:10px;border:1px solid transparent}.quick-links>a:hover{background:#f8fbf9;border-color:#e8f0eb}.quick-icon{width:33px;height:33px;border-radius:10px;display:grid;place-items:center;flex:0 0 33px}.quick-links b{display:block;font-size:12px;color:var(--dark)}.quick-links small{display:block;font-size:10px;color:var(--muted);margin-top:2px}.quick-links i{font-style:normal;margin-left:auto;color:#82978c}.table-panel{padding:0;overflow:hidden}.table-panel>.panel-head{padding:19px 20px 0}.table-wrap{width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:11px;text-align:left}thead{background:#f7faf8}th{font-weight:800;color:#687e73;font-size:10px;letter-spacing:.15px}th,td{padding:12px 15px;border-bottom:1px solid #edf2ee;vertical-align:middle}td{color:#40574c}tbody tr:hover{background:#fbfdfb}tbody tr:last-child td{border-bottom:0}tfoot th{background:#f4f8f5;border-top:1px solid var(--line)}.table-sub{display:block;color:#91a199;font-size:10px;margin-top:3px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}.search-form,.filter-form{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.search-form input{min-width:min(320px,68vw)}.toolbar-info{display:flex;flex-direction:column;gap:1px}.toolbar-info b{font:800 18px Manrope,sans-serif;color:var(--dark)}.toolbar-info span{font-size:11px;color:var(--muted)}.pill{display:inline-flex;align-items:center;background:#edf5ef;color:var(--green);border-radius:999px;padding:5px 10px;font-size:10px;font-weight:800;white-space:nowrap}.badge{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800}.badge-green{background:#e5f6eb;color:#187449}.badge-gray{background:#eff2f0;color:#7e8984}.inline-form{display:inline}.form-panel .form-grid{margin-top:4px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 15px}.form-grid label{margin-bottom:13px}.form-grid label small{font-size:10px;font-weight:400}.form-grid .span-2{grid-column:span 2}.form-grid.one-col{grid-template-columns:1fr}.form-grid.one-col .span-2{grid-column:auto}.inner-grid{padding:13px;background:#f7faf8;border:1px solid #eaf0eb;border-radius:10px;gap:0 12px;margin:0 0 14px}.inner-grid label{margin-bottom:5px}.calculation-hint{grid-column:1/-1;padding:8px 0 2px;color:var(--muted);font-size:11px}.calculation-hint b{color:var(--green)}.form-actions{display:flex;justify-content:flex-start;padding-top:4px}.filter-form{padding:0 20px 14px;align-items:end}.filter-form label{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:700;color:var(--muted)}.filter-form input{padding:8px 10px;font-size:11px}.filter-form .btn{min-height:36px}.role-list{display:grid;gap:12px}.role-list>div{padding-bottom:11px;border-bottom:1px solid #edf2ee}.role-list>div:last-child{border:0;padding-bottom:0}.role-list b{color:var(--dark);font-size:12px}.role-list p{font-size:11px;color:var(--muted);margin:4px 0 0}.app-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:17px 0 5px;font-size:10px;color:#91a199}.app-footer span:last-child{text-align:right}.auth-card .alert a{color:inherit;text-decoration:underline}.no-data{padding:20px;color:var(--muted)}
@media(max-width:1150px){.sidebar{width:220px;flex-basis:220px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid{grid-template-columns:1fr}.bar-row{grid-template-columns:125px minmax(30px,1fr) 65px}}@media(max-width:720px){.app-shell{display:block}.sidebar{width:auto;position:relative;height:auto;padding:14px;display:block;border-right:0;border-bottom:1px solid var(--line)}.sidebar-brand{padding:0 4px 12px}.profile{margin:12px 0;padding:8px}.side-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.side-nav .nav-label{grid-column:1/-1}.side-nav a{padding:9px;font-size:11px;min-height:38px}.logout-form{position:absolute;right:13px;top:11px;margin:0;padding:0;border:0;width:auto}.logout-form button{width:auto;padding:7px 9px;font-size:10px}.sidebar-foot{display:none}.topbar{padding:17px 18px;min-height:77px}.topbar h1{font-size:20px}.content-area{padding:17px 13px}.welcome-card{padding:22px 20px;min-height:unset}.welcome-art{font-size:54px;margin-right:0}.metric-grid{gap:9px}.metric{padding:13px}.metric strong{font-size:19px}.metric small{font-size:9px}.metric-label{font-size:10px}.panel{padding:15px;margin-bottom:13px}.table-panel{padding:0}.panel-head h3{font-size:14px}.search-form{width:100%}.search-form input{flex:1;min-width:0}.toolbar>.btn{flex:0 0 auto}.form-grid{grid-template-columns:1fr;gap:0}.form-grid .span-2{grid-column:auto}.inner-grid{grid-column:auto;grid-template-columns:1fr}.content-grid{gap:13px}.bar-row{grid-template-columns:92px minmax(25px,1fr) 55px;gap:6px}.bar-label{font-size:10px}.filter-form{padding:0 14px 13px}.filter-form label{flex:1;min-width:115px}.filter-form .btn{flex:1}.app-footer{display:block;line-height:1.8}.app-footer span{display:block}.app-footer span:last-child{text-align:left}.metric-grid.two{grid-template-columns:1fr 1fr}.auth-card{padding:25px 21px}.auth-card h1{font-size:22px}.side-nav a:last-child{grid-column:1/-1}}@media print{body{background:#fff}.sidebar,.topbar,.toolbar,.filter-form,.form-panel .panel-head .btn,.app-footer,.side-nav,.logout-form{display:none!important}.app-shell,.main-area{display:block}.content-area{padding:0;max-width:none}.panel,.metric{box-shadow:none;border:1px solid #ddd;break-inside:avoid}.table-wrap{overflow:visible}table{font-size:9px}th,td{padding:6px}.table-panel{margin-bottom:12px}.metric-grid{grid-template-columns:repeat(4,1fr)}a{color:#000}}

.row-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}

/* DESAMU V3 visual consistency */
:root{--green:#075b49;--dark:#123b32;--text:#203a34;--muted:#657a72;--line:#dce7e1;--shadow:0 12px 34px rgba(12,55,43,.075)}
body{font-family:'Source Sans 3','Inter',Arial,sans-serif}h1,h2,h3,h4,.sidebar-brand b,.auth-brand b{font-family:Inter,'Source Sans 3',Arial,sans-serif}
button,.btn,input,select,textarea{border-radius:9px}
:focus-visible{outline:3px solid #98d5b6;outline-offset:2px}

/* DESAMU V4 FULL COLOR: warna dashboard lebih hidup dan tetap mudah dibaca. */
:root{--green:#087f5b;--dark:#163d3b;--text:#203d3c;--muted:#607b7e;--line:#dce8ec;--shadow:0 12px 32px rgba(24,62,76,.075)}
body{background:radial-gradient(circle at 100% 0%,#e8f0ff 0,transparent 26%),radial-gradient(circle at 0% 75%,#e7fbf3 0,transparent 25%),#f5f9fc}
.sidebar{background:linear-gradient(180deg,#073f34 0%,#075b49 52%,#104f70 100%);color:#fff;border-right-color:#ffffff16}
.sidebar-brand .logo-mark,.auth-brand .logo-mark{background:linear-gradient(135deg,#bbf7d0,#5eead4 54%,#93c5fd);color:#064e3b;box-shadow:0 8px 22px rgba(0,0,0,.13)}
.side-nav .nav-label{color:#b8e9d6}
.side-nav a{transition:background .18s,color .18s,transform .18s}
.side-nav a:hover{background:#ffffff18;color:#fff;transform:translateX(2px)}
.side-nav a.active{background:linear-gradient(100deg,#d1fae5,#ccfbf1 58%,#dbeafe);color:#075b49;box-shadow:0 6px 18px rgba(0,0,0,.09)}
.profile{background:#ffffff10;border-color:#ffffff18}
.profile .status-dot{background:#86efac;box-shadow:0 0 0 4px #86efac20}
.main-area{background:transparent}
.topbar{background:rgba(255,255,255,.92);border-bottom-color:#dce8ec}
.topbar .eyebrow{color:#078b8b}
.topbar h1{color:#163d3b}
.welcome-card{background:radial-gradient(circle at 95% 5%,#60a5fa66 0,transparent 33%),radial-gradient(circle at 10% 100%,#34d39944 0,transparent 35%),linear-gradient(115deg,#075b49 0%,#087f8c 58%,#315fc4 100%);box-shadow:0 16px 40px rgba(8,95,102,.19)}
.welcome-card .eyebrow{color:#fef08a}
.metric-grid .metric{position:relative;overflow:hidden;border-color:#dfe9ee;box-shadow:0 10px 26px rgba(24,62,76,.055);transition:transform .2s,box-shadow .2s}
.metric-grid .metric:hover{transform:translateY(-3px);box-shadow:0 15px 32px rgba(24,62,76,.11)}
.metric-grid .metric:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#10b981,#08a6a6)}
.metric-grid .metric:nth-child(4n+2):before{background:linear-gradient(90deg,#08a6a6,#3979e8)}
.metric-grid .metric:nth-child(4n+3):before{background:linear-gradient(90deg,#f59e0b,#f16c63)}
.metric-grid .metric:nth-child(4n):before{background:linear-gradient(90deg,#8b5cf6,#3979e8)}
.metric strong{color:#163d3b}
.metric-icon.green,.quick-icon.green{background:linear-gradient(135deg,#dcfce7,#ccfbf1);color:#087f5b}
.metric-icon.blue,.quick-icon.blue{background:linear-gradient(135deg,#dbeafe,#cffafe);color:#2563eb}
.metric-icon.orange,.quick-icon.orange{background:linear-gradient(135deg,#fef3c7,#ffedd5);color:#c26c0a}
.metric-icon.purple,.quick-icon.purple{background:linear-gradient(135deg,#ede9fe,#fce7f3);color:#7c3aed}
.panel{border-color:#dfe9ee;box-shadow:0 10px 28px rgba(24,62,76,.045)}
.panel-head h3{color:#163d3b}
.text-action{color:#087f8c}
.bar-fill{background:linear-gradient(90deg,#10b981,#08a6a6 55%,#3979e8)}
.quick-links>a:hover{background:linear-gradient(100deg,#ecfdf5,#eff6ff);border-color:#cde6e5}
.quick-icon{box-shadow:inset 0 0 0 1px #ffffffaa}
.btn-primary,.btn-green,.btn{transition:transform .18s,box-shadow .18s,filter .18s}
.btn-primary,.btn-green{background:linear-gradient(120deg,#087f5b,#08a6a6 58%,#3979e8);border:0;color:#fff}
.btn-primary:hover,.btn-green:hover{filter:saturate(1.12) brightness(.98);box-shadow:0 8px 22px rgba(8,127,132,.2);transform:translateY(-1px)}
input:focus,select:focus,textarea:focus{border-color:#08a6a6!important;box-shadow:0 0 0 3px #08a6a61c!important;outline:0}
thead{background:linear-gradient(90deg,#ecfdf5,#eff6ff)}
th{color:#376a68}
tbody tr:hover{background:#f2fbfa}
.pill{background:linear-gradient(100deg,#dcfce7,#cffafe);color:#087f5b}
.badge-green{background:#dcfce7;color:#087f5b}
.auth-body{background:radial-gradient(circle at 10% 10%,#d1fae5 0,transparent 32%),radial-gradient(circle at 92% 12%,#dbeafe 0,transparent 30%),radial-gradient(circle at 84% 90%,#ffedd5 0,transparent 29%),#f5f9fc}
.auth-card{border-color:#dce8ec;box-shadow:0 26px 80px rgba(30,73,89,.14)}
.auth-card .eyebrow{color:#087f8c}
@media(max-width:720px){.sidebar{background:linear-gradient(110deg,#073f34,#087f8c 75%,#315fc4)}.side-nav a.active{background:linear-gradient(100deg,#d1fae5,#dbeafe);color:#075b49}.topbar{background:rgba(255,255,255,.96)}.welcome-card{background:linear-gradient(120deg,#075b49,#087f8c 68%,#315fc4)}}