@font-face{font-family:Figtree;src:url(/vendor/fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{--o:#d9620f;--o2:#e8771f;--o-d:#b84d08;--o-soft:#fdeee0;--o-soft2:#fff6ee;--ink:#1d1410;--ink2:#5c5249;--ink3:#8d8378;--line:#ece5dd;--line2:#f3ede6;--bg:#faf7f3;--card:#fff;--thead:#f5efe8;--shadow:0 1px 2px rgba(80,50,20,.04),0 6px 20px rgba(80,50,20,.05);--r:16px;--sb:264px;
--g:#14803d;--g-bg:#e4f5ea;--r1:#d0342c;--r-bg:#fde7e6;--b:#1f6fb8;--b-bg:#e3f1fc;--p:#6d4bb5;--p-bg:#eee8fb;--y:#a06a00;--y-bg:#fdf3cf;--gr:#5e574f;--gr-bg:#f0ece6}
[data-theme=dark]{--ink:#f6efe8;--ink2:#c9bfb4;--ink3:#978c80;--line:#3a322b;--line2:#312a24;--bg:#191512;--card:#231e1a;--thead:#2d2621;--o-soft:#4a2b13;--o-soft2:#33241a;--shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);--g:#62d48d;--g-bg:#17382a;--r1:#ff8a82;--r-bg:#4a2220;--b:#7cc0f5;--b-bg:#1a3347;--p:#bba4f2;--p-bg:#30284a;--y:#eec452;--y-bg:#40331a;--gr:#c2b8ac;--gr-bg:#332c26}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14.5px;line-height:1.45;color:var(--ink);background:var(--bg);background-image:radial-gradient(1200px 500px at 90% -10%,rgba(232,119,31,.05),transparent)}
a{color:inherit;text-decoration:none}h1,h2,h3,h4,p{margin:0}button,input,select,textarea{font:inherit;color:inherit}
.ic{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.2em}.ic.ch{width:1.25em;height:1.25em}
.muted{color:var(--ink3)}.ink2{color:var(--ink2)}.small{font-size:12.5px}.b{font-weight:700}.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}.text-red{color:var(--r1)}.text-green{color:var(--g)}.text-orange{color:var(--o)}.mt{margin-top:14px}.mt2{margin-top:22px}.mb{margin-bottom:14px}.flex{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.hide{display:none!important}.pre{white-space:pre-line}
/* ===== Sidebar ===== */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sb);background:linear-gradient(180deg,#c7540f 0%,#c95a12 45%,#d56a18 100%);color:#fff;display:flex;flex-direction:column;z-index:40;overflow:hidden}
.sidebar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 264 150' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='.08' d='M0 70C60 110 130 40 264 10V150H0Z'/%3E%3Cpath fill='%23ffffff' fill-opacity='.07' d='M0 115C80 80 170 130 264 75V150H0Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.brand{display:flex;align-items:center;gap:12px;padding:18px 22px 16px;position:relative;z-index:1}.brand-logo{width:58px;height:58px;background:#fff;border-radius:14px;padding:6px;flex:none;box-shadow:0 4px 12px rgba(90,40,0,.2)}.brand-logo img{width:100%;height:100%;object-fit:contain;display:block}.brand b{display:block;font-size:22px;line-height:1.1;font-weight:800;letter-spacing:-.2px}.brand small{font-size:13.5px;opacity:.95}
.nav{flex:1;overflow-y:auto;padding:0 14px 28px;position:relative;z-index:1;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
.nav-sep{border-top:1px solid rgba(255,255,255,.28);margin:8px 8px}.nav a,.nav-h{display:flex;align-items:center;gap:12px;border-radius:12px;width:100%;background:none;border:0;color:#fff;text-align:left;cursor:pointer}
.nav-top{padding:7px 12px;font-size:16px}.nav-h{padding:7px 12px;font-weight:700;font-size:16px}.nav-h .chev{margin-left:auto;transition:transform .2s;width:15px;height:15px}.nav-g.closed .chev{transform:rotate(-90deg)}.nav-g.closed .nav-sub{display:none}
.nav-sub a{padding:5px 12px 5px 22px;font-size:15px;margin-top:1px}.nav-sub a .ic{opacity:.95}.nav a:hover{background:rgba(255,255,255,.14)}.nav a.active{background:#fff8ef;color:var(--o-d);font-weight:700;box-shadow:0 3px 8px rgba(90,40,0,.18)}.nav .ic{width:19px;height:19px}.nav-h>.ic:first-child{width:21px;height:21px}
/* ===== Main ===== */
.main{margin-left:var(--sb);min-height:100vh;padding:0 22px 24px 26px;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;padding:12px 0 6px;position:sticky;top:0;z-index:30;background:linear-gradient(var(--bg) 78%,transparent)}
.crumbs{display:flex;gap:10px;align-items:center;color:var(--ink2);font-size:15.5px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}.crumbs b{color:var(--ink);font-weight:700}.crumbs i{font-style:normal;color:var(--ink3)}
.top-search{margin-left:auto;position:relative;width:min(384px,36vw)}.top-search input{width:100%;height:38px;padding:0 12px 0 40px;border-radius:12px;border:1px solid var(--line);background:var(--card);outline:0;box-shadow:0 1px 3px rgba(80,50,20,.05)}.top-search input:focus{border-color:var(--o2)}.top-search>.ic{position:absolute;left:13px;top:10px;color:var(--ink2)}
.search-res{position:absolute;top:44px;left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(60,30,0,.14);max-height:60vh;overflow:auto;z-index:50;padding:6px}.search-res h5{margin:8px 10px 4px;font-size:11.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em}.search-res a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:9px}.search-res a:hover{background:var(--o-soft2)}.search-res small{color:var(--ink3);display:block}
.icon-btn{position:relative;background:none;border:0;padding:6px;cursor:pointer;color:var(--ink);border-radius:10px}.icon-btn:hover{background:var(--o-soft2)}.icon-btn .ic{width:24px;height:24px}.dot{position:absolute;top:2px;right:1px;min-width:16px;height:16px;border-radius:9px;padding:0 4px;background:var(--o);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-weight:700;flex:none;font-size:15px}.avatar.sm{width:28px;height:28px;font-size:12px}.avatar.md{width:36px;height:36px;font-size:13.5px}.avatar.lg{width:84px;height:84px;font-size:30px;border-radius:18px}.a-green{background:#def3e5;color:#1c6e3f}.a-orange{background:#fde3cb;color:#b4510b}.a-purple{background:#ece4fb;color:#6340ad}.a-blue{background:#dcedfb;color:#1c64a4}
.person{display:inline-flex;align-items:center;gap:8px}.avatars{display:flex}.avatars .avatar{margin-left:-6px;box-shadow:0 0 0 2px var(--card)}.avatars .avatar:first-child{margin-left:0}
.dd{position:relative}.dd-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(60,30,0,.14);min-width:220px;padding:6px;z-index:60;display:none}.dd.open>.dd-menu{display:block}.dd-menu a,.dd-menu button{display:flex;gap:10px;align-items:center;width:100%;padding:9px 11px;border-radius:9px;background:none;border:0;cursor:pointer;text-align:left}.dd-menu a:hover,.dd-menu button:hover{background:var(--o-soft2)}.dd-menu hr{border:0;border-top:1px solid var(--line);margin:5px 0}
.notif-menu{width:min(380px,92vw)}.notif{display:block!important;padding:9px 11px}.notif b{display:block;font-size:13.5px}.notif small{color:var(--ink2);display:block}.notif.unread{background:var(--o-soft2)}
/* ===== Page ===== */
.page-head{display:flex;align-items:flex-start;gap:16px;justify-content:space-between;flex-wrap:wrap;margin:10px 0 16px}.page-head h1{font-size:38px;line-height:1.12;font-weight:800;letter-spacing:-.8px}.page-head p{color:var(--ink2);font-size:16px;margin-top:4px}.page-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--line2);padding:16px 18px}.card-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;justify-content:space-between;flex-wrap:wrap}.card-h h3{font-size:18.5px;font-weight:800;letter-spacing:-.2px;display:flex;align-items:center;gap:10px}.card-h h3{flex-wrap:wrap;row-gap:0}.card-h h3 .ic{width:24px;height:24px}.card-h h3 .sub[style*=block]{flex-basis:100%}.card-h .sub{font-size:13.5px;color:var(--ink2);font-weight:400}
.grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}.grid>*{min-width:0}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.split{grid-template-columns:minmax(0,1fr) 356px;align-items:start}.split-l{grid-template-columns:390px minmax(0,1fr);align-items:start}.span2{grid-column:span 2}.split-eq{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
.kpi{display:flex;align-items:center;gap:16px;padding:16px 18px}.kpi-ic{width:60px;height:60px;border-radius:14px;background:var(--o-soft);color:var(--o);display:flex;align-items:center;justify-content:center;flex:none}.kpi-ic .ic{width:30px;height:30px}.kpi-ic.green{background:var(--g-bg);color:var(--g)}.kpi-ic.red{background:var(--r-bg);color:var(--r1)}.kpi small{display:block;color:var(--ink2);font-size:15px}.kpi b{display:block;font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.5px;white-space:nowrap}.kpi .hint{font-size:12.5px;color:var(--ink3)}
.bdg{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;line-height:1.5}.bdg .ic{width:13px;height:13px}.bdg.orange{background:var(--o-soft);color:var(--o-d)}[data-theme=dark] .bdg.orange{color:#ffb27a}.bdg.green{background:var(--g-bg);color:var(--g)}.bdg.red{background:var(--r-bg);color:var(--r1)}.bdg.blue{background:var(--b-bg);color:var(--b)}.bdg.purple{background:var(--p-bg);color:var(--p)}.bdg.yellow{background:var(--y-bg);color:var(--y)}.bdg.gray{background:var(--gr-bg);color:var(--gr)}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 20px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-weight:600;cursor:pointer;white-space:nowrap;transition:filter .15s,box-shadow .15s,background .15s;font-size:15px}.btn:hover{background:var(--o-soft2)}.btn .ic{width:19px;height:19px}.btn.primary{background:linear-gradient(180deg,#ee7d24,#d05a0c);border-color:#cf5b0d;color:#fff;box-shadow:0 4px 10px rgba(209,90,12,.28);font-weight:700}.btn.primary:hover{filter:brightness(1.05)}.btn.soft{background:var(--o-soft2);border-color:#f3c9a3;color:var(--o-d)}.btn.danger{color:var(--r1);border-color:#f3c9c6}.btn.green{background:var(--g);border-color:var(--g);color:#fff}.btn.sm{height:34px;padding:0 13px;font-size:13.5px;border-radius:9px}.btn.block{width:100%}.btn[disabled]{opacity:.55;cursor:not-allowed}.btn-row{display:flex;gap:10px;flex-wrap:wrap}.btn-row .btn{flex:1}
.aksi{display:flex;gap:4px;justify-content:flex-end}.btn-ic{width:29px;height:29px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--ink2);transition:.15s}.btn-ic span{display:none}.btn-ic:hover{background:var(--o-soft);color:var(--o-d);border-color:#f3c9a3}.btn-ic.danger:hover{background:var(--r-bg);color:var(--r1);border-color:#f3c9c6}.btn-ic.green:hover{background:var(--g-bg);color:var(--g)}
/* Tabs & selects */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{padding:9px 16px;border:0;background:none;cursor:pointer;color:var(--ink2);font-size:15.5px;white-space:nowrap;border-bottom:3px solid transparent;display:inline-flex;gap:8px;align-items:center}.tab.active{color:var(--o-d);font-weight:700;border-color:var(--o)}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:3px;box-shadow:var(--shadow)}.seg a,.seg button{padding:7px 18px;border-radius:10px;border:0;background:none;cursor:pointer;color:var(--ink);display:inline-flex;gap:8px;align-items:center;font-size:15px;white-space:nowrap}.seg .active{background:linear-gradient(180deg,#ee7d24,#d05a0c);color:#fff;font-weight:700}.seg.light .active{background:var(--o-soft);color:var(--o-d)}
.pick{position:relative;display:inline-flex;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;height:44px;box-shadow:0 1px 3px rgba(80,50,20,.05)}.pick>.ic{position:absolute;left:13px;width:19px;height:19px;pointer-events:none}.pick select{appearance:none;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235c5249' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") right 12px center no-repeat;height:100%;padding:0 34px 0 42px;outline:0;cursor:pointer;max-width:240px;border-radius:12px;font-size:14.5px}.pick select.noic{padding-left:14px}[data-theme=dark] .pick select option{background:var(--card)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
/* ===== DataTable ===== */
.dt-wrap{position:relative}table.dataTable{width:100%!important;border-collapse:separate;border-spacing:0}table.dataTable thead th{background:var(--thead);color:var(--ink);font-weight:700;font-size:13.5px;padding:11px 7px;text-align:left;white-space:nowrap;border:0;cursor:pointer;position:relative}table.dataTable thead th:first-child{border-radius:10px 0 0 10px}table.dataTable thead th:last-child{border-radius:0 10px 10px 0}table.dataTable tbody td{padding:10px 7px;border-bottom:1px solid var(--line2);font-size:14px;vertical-align:middle}table.dataTable tbody tr:hover td{background:var(--o-soft2)}table.dataTable tbody tr.selected td{background:var(--o-soft2);border-top:1px solid #f5c9a0;border-bottom:1px solid #f5c9a0}table.dataTable tbody tr.selected td:first-child{border-left:1px solid #f5c9a0;border-radius:10px 0 0 10px}table.dataTable tbody tr.selected td:last-child{border-right:1px solid #f5c9a0;border-radius:0 10px 10px 0}table.dataTable tbody tr[data-panel]{cursor:pointer}table.dataTable td.dt-no,table.dataTable th.dt-no{width:42px;text-align:center;color:var(--ink3)}table.dataTable th.dt-aksi,table.dataTable td.dt-aksi{text-align:right;white-space:nowrap;position:sticky;right:0;z-index:1}table.dataTable td.dt-aksi{background:var(--card)}table.dataTable td.dt-no,table.dataTable th.dt-no{width:34px}table.dataTable tbody tr:hover td.dt-aksi,table.dataTable tbody tr.selected td.dt-aksi{background:var(--o-soft2)}
.dt-order{display:inline-flex;margin-left:5px;opacity:.35;font-size:10px}th.dt-ordering-asc .dt-order,th.dt-ordering-desc .dt-order{opacity:1;color:var(--o)}th.dt-ordering-asc .dt-order::before{content:"▲"}th.dt-ordering-desc .dt-order::before{content:"▼"}th.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-order::before,th.dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-order::before{content:"↕";font-size:12px}th.dt-column-order{display:none}.dt-column-order{display:none}
.dt-layout-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}.dt-layout-row.dt-layout-table{display:block;margin:0;overflow-x:auto}.dt-search input{height:38px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--card) ;outline:0;width:230px}.dt-search input:focus{border-color:var(--o2)}.dt-search label{display:none}.dt-length select{height:36px;border:1px solid var(--line);border-radius:9px;padding:0 6px;background:var(--card)}.dt-length label{color:var(--ink2);font-size:13px;margin-left:6px}.dt-info{color:var(--ink2);font-size:13.5px}
.dt-paging nav{display:flex;gap:6px}.dt-paging-button{min-width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--card);cursor:pointer}.dt-paging-button.current{background:linear-gradient(180deg,#ee7d24,#d05a0c);color:#fff;border-color:#cf5b0d;font-weight:700}.dt-paging-button.disabled{opacity:.4;cursor:default}.dt-processing{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--card);padding:6px 16px;border-radius:9px;box-shadow:var(--shadow);font-size:13px;z-index:3}.dt-processing>div:last-child{display:none}.dt-empty{text-align:center;color:var(--ink3);padding:28px!important}tr.dt-group td{background:var(--thead)!important;font-weight:700;font-size:15px;border-radius:10px}
/* ===== Kanban ===== */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}.kcol{background:rgba(245,236,226,.45);border:1px solid var(--line2);border-radius:var(--r);padding:8px;min-height:200px}[data-theme=dark] .kcol{background:#1f1a16}.kcol.over{outline:2px dashed var(--o2)}.khead{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;font-weight:800;font-size:17px;margin-bottom:9px}.khead .n{margin-left:auto;background:rgba(0,0,0,.08);min-width:26px;height:26px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}.khead.t0{background:#f5efe8}.khead.t1{background:#fde9d7}.khead.t2{background:#fdf1cf}.khead.t3{background:#e4f3e6}.khead.t4{background:#ece7fa}[data-theme=dark] .khead{background:var(--thead)!important}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px;margin-bottom:9px;box-shadow:0 1px 3px rgba(80,50,20,.05);cursor:grab;display:block}.kcard.drag{opacity:.45}.kcard h4{font-size:16.5px;font-weight:800;letter-spacing:-.2px;line-height:1.25}.kcard .row{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--ink2);padding:5px 0}.kcard .row+.row{border-top:1px solid var(--line2)}.kcard .amt{font-weight:800;color:var(--ink);font-size:15.5px}.kthumb{height:88px;border-radius:9px;background:linear-gradient(135deg,#fff3e6,#fde6cf);display:flex;align-items:center;justify-content:center;color:var(--o);margin-bottom:9px}.kthumb .ic{width:44px;height:44px;stroke-width:1.2}[data-theme=dark] .kthumb{background:var(--o-soft)}.kmore{float:right}
/* ===== Detail panel ===== */
.panel-wrap{position:sticky;top:64px;scroll-margin-top:70px}.panel-close{display:none}.dl{display:grid;grid-template-columns:minmax(90px,38%) 1fr;gap:6px 12px;font-size:14px}.dl dt{color:var(--ink2)}.dl dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}.hr{border:0;border-top:1px solid var(--line);margin:13px 0}.panel-title{font-size:25px;font-weight:800;letter-spacing:-.4px;line-height:1.15}.sec-title{font-weight:800;font-size:16px;margin-bottom:8px;display:flex;align-items:center;gap:8px}.mini{width:100%;border-collapse:collapse;font-size:13px}.mini th{background:var(--thead);padding:6px 8px;text-align:left;font-weight:700}.mini td{padding:7px 8px;border-bottom:1px solid var(--line2);vertical-align:top}.mini .r{text-align:right;white-space:nowrap}.sum{display:flex;justify-content:space-between;padding:6px 8px;font-weight:600}.sum.big{background:var(--o-soft2);border-radius:10px;padding:10px 14px;font-weight:800;font-size:16.5px;margin-top:6px}.sum b{font-size:17px;font-weight:800}
.timeline{list-style:none;margin:0;padding:0}.timeline li{position:relative;padding:0 0 12px 30px}.timeline li::before{content:"";position:absolute;left:9px;top:20px;bottom:-2px;width:2px;background:var(--line)}.timeline li:last-child::before{display:none}.tl-dot{position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;border:2px solid var(--ink3);background:var(--card);display:flex;align-items:center;justify-content:center}.tl-dot.done{background:var(--g);border-color:var(--g);color:#fff}.tl-dot.now{border-color:var(--o);box-shadow:inset 0 0 0 4px var(--card),inset 0 0 0 10px var(--o)}.tl-dot .ic{width:12px;height:12px}
.progress{height:8px;border-radius:5px;background:var(--line);overflow:hidden;min-width:80px}.progress i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#f6962f,#d9620f)}.empty{padding:28px 10px;text-align:center;color:var(--ink3)}.empty .ic{width:36px;height:36px;display:block;margin:0 auto 8px;opacity:.6}
.callout{display:flex;gap:12px;padding:12px 16px;border-radius:13px;background:var(--o-soft2);border:1px solid #f7d9bf;font-size:14px}[data-theme=dark] .callout{border-color:var(--line)}.callout>.ic{width:24px;height:24px;color:var(--o)}.list-row{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line2)}.list-row:last-child{border-bottom:0}.tile{width:34px;height:34px;border-radius:9px;background:var(--o-soft);color:var(--o);display:inline-flex;align-items:center;justify-content:center;flex:none}
.steps{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.step{display:flex;align-items:center;gap:11px;padding:7px 14px;border-radius:13px}.step .n{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ink3);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}.step.done .n{border-color:var(--o);color:var(--o)}.step.now{background:var(--o-soft)}.step.now .n{background:var(--o);border-color:var(--o);color:#fff}.step b{display:block;font-size:15.5px}.step small{color:var(--ink2)}.step-line{flex:1;min-width:20px;height:1.5px;background:var(--line)}.step-line.done{background:var(--o)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:11px;overflow:hidden}.cal-h{background:var(--thead);padding:9px;text-align:center;font-weight:600}.cal-d{min-height:104px;border-top:1px solid var(--line);border-left:1px solid var(--line);padding:6px;min-width:0}.cal-d:nth-child(7n+1){border-left:0}.cal-d .num{font-weight:600;font-size:14px}.cal-d.today{background:var(--o-soft2)}.cal-d.today .num{background:var(--o);color:#fff;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.cal-d.off{background:rgba(0,0,0,.015)}.cal-ev{display:block;border-radius:9px;padding:5px 6px;margin-top:4px;font-size:12px;font-weight:600;line-height:1.25;background:var(--b-bg)}.cal-ev.green{background:var(--g-bg)}.cal-ev.yellow{background:var(--y-bg)}.cal-ev.orange{background:var(--o-soft)}.cal-ev.gray{background:var(--gr-bg)}.cal-ev.blue{background:var(--b-bg)}.cal-ev.red{background:var(--r-bg)}.cal-ev .t{display:flex;gap:5px;align-items:flex-start}.cal-ev .bdg{font-size:10.5px;padding:0 7px;margin-top:3px;background:rgba(255,255,255,.65)}[data-theme=dark] .cal-ev .bdg{background:rgba(0,0,0,.2)}
/* Forms */
.form-card{max-width:1040px}.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}.fgrid .full{grid-column:1/-1}.field label{display:block;font-weight:600;margin-bottom:5px;font-size:14px}.field label i{color:var(--r1);font-style:normal}.field .hint{font-size:12.5px;color:var(--ink3);margin-top:3px}.inp{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;padding:0 13px;background:var(--card);outline:0;transition:border .15s,box-shadow .15s}textarea.inp{height:auto;min-height:88px;padding:10px 13px;line-height:1.45;resize:vertical}select.inp{appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235c5249' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") right 11px center no-repeat;padding-right:32px}.inp:focus{border-color:var(--o2);box-shadow:0 0 0 3px rgba(232,119,31,.14)}.inp.err{border-color:var(--r1)}input[type=file]::file-selector-button{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:4px 12px;margin-right:10px;font-weight:600;cursor:pointer}.picked{border-color:#f5c9a0!important;background:var(--o-soft2)!important}.err-text{color:var(--r1);font-size:12.5px;margin-top:3px}.form-sec{font-size:16.5px;font-weight:800;margin:20px 0 10px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}.check{display:flex;gap:9px;align-items:center;cursor:pointer}.check input{width:18px;height:18px;accent-color:var(--o)}
.rep-table{width:100%;border-collapse:separate;border-spacing:0 6px}.rep-table th{font-size:12.5px;color:var(--ink2);text-align:left;padding:0 5px;font-weight:600}.rep-table td{padding:0 3px;vertical-align:top}.rep-table .inp{height:38px;padding:0 9px;font-size:13.5px}.rep-table textarea.inp{min-height:38px;padding:8px}.alert{padding:11px 15px;border-radius:12px;margin-bottom:12px;display:flex;gap:10px}.alert.err-b{background:var(--r-bg);color:var(--r1)}.alert.ok{background:var(--g-bg);color:var(--g)}.alert ul{margin:0;padding-left:18px}
/* Toast & modal */
.toasts{position:fixed;right:20px;top:18px;display:flex;flex-direction:column;gap:9px;z-index:200}.toast{background:var(--card);border-radius:13px;box-shadow:0 12px 30px rgba(60,30,0,.18);padding:12px 16px;display:flex;gap:10px;max-width:400px;border-left:4px solid var(--g);animation:tin .25s}.toast.error{border-left-color:var(--r1)}@keyframes tin{from{opacity:0;transform:translateY(-8px)}}
.modal-bg{position:fixed;inset:0;background:rgba(40,20,5,.45);display:none;align-items:center;justify-content:center;padding:18px;z-index:150}.modal-bg.open{display:flex}.modal{background:var(--card);border-radius:18px;padding:22px;width:min(440px,100%);box-shadow:0 24px 60px rgba(40,20,5,.3);max-height:90vh;overflow:auto}.modal h3{font-size:19px;font-weight:800;margin-bottom:6px}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.main>.seg,.main>.pick{align-self:flex-start}.page-foot{margin-top:auto;padding-top:14px;font-style:italic;color:var(--ink2);font-size:13.5px}.pw-note{word-break:break-all}
/* Login */
.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--bg)}.login-hero{background:linear-gradient(160deg,#c7540f,#e07a22);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.login-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 264 150' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='.1' d='M0 70C60 110 130 40 264 10V150H0Z'/%3E%3Cpath fill='%23ffffff' fill-opacity='.08' d='M0 115C80 80 170 130 264 75V150H0Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}.login-hero h1{font-size:44px;line-height:1.1;font-weight:800;letter-spacing:-1px;max-width:480px}.login-form{display:flex;align-items:center;justify-content:center;padding:32px}.login-form .card{width:min(420px,100%);padding:30px}
/* Bottom nav (mobile) */
.bnav,.sheet-bg,.sheet,.m-brand{display:none}
@media (max-width:1480px){.split{grid-template-columns:minmax(0,1fr)}.panel-wrap{position:static}}
@media (max-width:1280px){.split,.split-l,.split-eq{grid-template-columns:minmax(0,1fr)}.panel-wrap{position:static}.kanban{grid-template-columns:repeat(2,minmax(0,1fr))}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.top-search{width:300px}}
@media (max-width:900px){
body{font-size:14px}.sidebar{display:none}.main{margin-left:0;padding:0 14px 92px}.topbar{padding:10px 0;gap:8px;background:var(--bg)}.crumbs{display:none}.m-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;white-space:nowrap}.m-brand img{width:34px;height:34px;padding:3px;background:#fff;border-radius:9px;box-shadow:0 1px 4px rgba(120,60,10,.2)}.m-brand span{display:none}.top-search{flex:1;width:auto;margin-left:6px;position:static}.top-search>.ic{left:auto;margin-left:11px;top:auto;margin-top:10px}.top-search input{height:40px;padding-left:36px}.search-res{left:14px;right:14px;top:60px}.top-search{position:relative}.top-search>.ic{position:absolute;left:0;top:0}.search-res{left:-40px;right:-90px;top:46px}.avatar-caret{display:none}
.page-head h1{font-size:28px}.page-head p{font-size:14.5px}.page-actions{width:100%;margin-top:0}.page-actions .btn.primary{flex:1}.page-actions .pick{flex:1;min-width:150px}.pick select{width:100%;max-width:none}
.g2,.g3{grid-template-columns:minmax(0,1fr)}.g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.span2{grid-column:auto}.kpi{padding:12px;gap:10px}.kpi-ic{width:42px;height:42px;border-radius:11px}.kpi-ic .ic{width:22px;height:22px}.kpi small{font-size:12.5px}.kpi b{font-size:19px}.card{padding:13px}.kanban{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -14px;padding:0 14px 6px}.kcol{min-width:82%;scroll-snap-align:center}.fgrid{grid-template-columns:minmax(0,1fr)}.form-actions .btn{flex:1}
.filters .pick{flex:1 1 44%;min-width:140px}.dt-search input{width:100%}.dt-layout-row{justify-content:center}.dt-search,.dt-search input{width:100%}.dt-layout-start,.dt-layout-end{width:100%;display:flex;justify-content:center}.dt-paging-button{min-width:32px;height:32px}
/* tabel jadi kartu */
table.dataTable thead{display:none}table.dataTable,table.dataTable tbody,table.dataTable tr{display:block;width:100%}table.dataTable tbody tr{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin-bottom:10px;position:relative;box-shadow:0 1px 3px rgba(80,50,20,.05)}table.dataTable tbody tr.selected{border-color:var(--o2)}table.dataTable tbody td,table.dataTable tbody tr.selected td,table.dataTable tbody tr:hover td{display:flex;justify-content:space-between;gap:14px;align-items:center;border:0!important;padding:5px 0;background:none;text-align:right;border-radius:0!important}table.dataTable tbody td::before{content:attr(data-label);color:var(--ink3);font-size:12.5px;font-weight:500;text-align:left;flex:none;max-width:42%}table.dataTable td.dt-no{position:absolute;top:8px;right:12px;width:auto;font-size:11px;padding:0;z-index:1}table.dataTable td.dt-no::before{display:none}table.dataTable td.dt-aksi{border-top:1px solid var(--line2)!important;margin-top:5px;padding-top:9px}table.dataTable td.dt-aksi::before{display:none}table.dataTable td.dt-aksi .aksi{width:100%;justify-content:flex-end;flex-wrap:wrap}.btn-ic{width:auto;min-width:36px;height:34px;padding:0 9px;gap:5px}.btn-ic span{display:inline;font-size:12.5px;font-weight:600}tr.dt-group{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}tr.dt-group td{display:block!important;background:var(--thead)!important;padding:8px 12px!important;border-radius:10px!important;text-align:left!important}tr.dt-group td::before{display:none}table.dataTable td.dt-empty{display:block;text-align:center}table.dataTable td.dt-empty::before{display:none}
.panel-wrap{visibility:hidden;position:fixed;inset:auto 0 0 0;z-index:120;max-height:88vh;overflow:auto;transform:translateY(105%);transition:transform .25s,visibility .25s;border-radius:20px 20px 0 0;background:var(--card);box-shadow:0 -14px 40px rgba(50,25,5,.25)}.panel-wrap.open{transform:none;visibility:visible}.panel-wrap>.card{border:0;box-shadow:none;border-radius:20px 20px 0 0;padding-bottom:26px}.panel-close{display:flex;position:sticky;top:6px;margin:8px 10px -38px auto;width:34px;height:34px;border-radius:50%;border:0;background:var(--thead);align-items:center;justify-content:center;z-index:3}.cal-d{min-height:62px;padding:3px}.cal-ev{font-size:0;padding:0;height:7px;border-radius:4px;margin-top:3px}.cal-ev *{display:none}.cal-ev.green{background:#4cbb74}.cal-ev.yellow{background:#e9bd3b}.cal-ev.blue{background:#55a6e8}.cal-ev.orange{background:var(--o)}.cal-ev.gray{background:#b5aca1}.steps{gap:6px}.step-line{display:none}.step{padding:5px 8px;flex:1 1 44%}.step .n{width:28px;height:28px;font-size:13px}.seg{overflow-x:auto;max-width:100%}.seg a,.seg button{padding:7px 12px}.login-page{grid-template-columns:1fr}.login-hero{display:none}.toasts{left:12px;right:12px;top:10px}
.sheet-bg{display:block;position:fixed;inset:0;background:rgba(40,20,5,.4);opacity:0;pointer-events:none;transition:.2s;z-index:89}.sheet-bg.open{opacity:1;pointer-events:auto}.sheet{visibility:hidden;display:block;position:fixed;left:0;right:0;bottom:0;background:var(--card);border-radius:20px 20px 0 0;padding:10px 16px calc(84px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .25s,visibility .25s;z-index:90;max-height:82vh;overflow:auto}.sheet.open{transform:none;visibility:visible}.sheet::before{content:"";display:block;width:42px;height:4px;border-radius:3px;background:var(--line);margin:0 auto 10px}.sheet h4{font-size:13px;color:var(--ink3);margin:10px 2px 6px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.sheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sheet-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:13px;background:var(--o-soft2);text-align:center;font-size:12.5px;font-weight:600}.sheet-grid a .ic{width:22px;height:22px;color:var(--o)}.sheet-grid a.active{background:var(--o-soft);color:var(--o-d)}
.bnav{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);z-index:100;padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(80,50,20,.08)}.bnav a,.bnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--ink2);background:none;border:0;padding:4px 0;cursor:pointer}.bnav .ic{width:22px;height:22px}.bnav .active{color:var(--o)}
}
@media print{.sidebar,.topbar,.bnav,.page-actions{display:none}.main{margin:0}}
[data-theme=dark] .seg.light .active,[data-theme=dark] .tab.active{color:#ffb27a}