:root{
  --bg:#f2f7f6;--bg2:#eef4f5;--card:#fff;--text:#10233d;--muted:#718096;--line:#dfe9e7;
  --primary:#0b7a69;--primary2:#075e54;--primary3:#13a087;--soft-primary:#e7f7f3;
  --success:#11965f;--warn:#d79a20;--danger:#dd4b59;--dark:#073c38;--dark2:#052e2c;
  --radius:18px;--shadow:0 10px 30px rgba(16,35,61,.07);--shadow-lg:0 24px 70px rgba(6,64,59,.13)
}
*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:linear-gradient(145deg,#f4f8f7 0%,#edf5f5 100%);color:var(--text)}
button,input,select,textarea{font:inherit}.hidden{display:none!important}.muted{color:var(--muted)}.mt{margin-top:18px}.stack{display:grid;gap:13px}
a{color:inherit;text-decoration:none}

/* LOGIN */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:38px;background:radial-gradient(circle at 10% 0%,rgba(19,160,135,.12),transparent 34%),radial-gradient(circle at 100% 100%,rgba(31,171,151,.10),transparent 30%),#f1f6f7}
.auth-shell{width:min(1180px,100%);min-height:650px;background:#fff;border:1px solid rgba(205,223,220,.86);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1.08fr .92fr;box-shadow:0 35px 90px rgba(14,62,67,.14)}
.auth-brand{position:relative;overflow:hidden;color:#fff;padding:46px 48px 40px;background:linear-gradient(145deg,#064b45 0%,#087566 55%,#0a8a77 100%);display:flex;flex-direction:column}
.auth-brand:before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;right:-190px;top:-190px;background:rgba(255,255,255,.07)}
.auth-brand:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;left:-220px;bottom:-220px;border:55px solid rgba(255,255,255,.05)}
.auth-brand-top,.auth-brand-copy,.feature-row,.auth-brand-footer{position:relative;z-index:1}.auth-brand-top{display:flex;align-items:center;gap:16px}.app-logo{width:58px;height:58px;border-radius:17px;box-shadow:0 10px 26px rgba(0,0,0,.18)}.app-logo.sm{width:46px;height:46px;border-radius:14px;box-shadow:none}.brand-title{font-size:22px;font-weight:900;letter-spacing:.4px}.brand-subtitle{font-size:12px;font-weight:800;letter-spacing:.8px;margin-top:2px}.brand-caption{font-size:12px;color:#c7e5df;margin-top:4px}
.auth-brand-copy{margin-top:95px;max-width:570px}.eyebrow{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.12);font-size:11px;font-weight:900;letter-spacing:1.4px}.auth-brand h1{font-size:44px;line-height:1.12;margin:18px 0;color:#fff;letter-spacing:-1.2px}.auth-brand-copy p{max-width:520px;font-size:16px;line-height:1.75;color:#d9efea;margin:0}
.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}.feature{border-left:1px solid rgba(255,255,255,.15);padding:8px 14px}.feature:first-child{border-left:0;padding-left:0}.feature span{display:block;font-size:25px;color:#6fe0cd;margin-bottom:8px}.feature b{display:block;font-size:13px}.feature small{display:block;color:#bee1da;margin-top:3px}
.auth-brand-footer{margin-top:auto;display:flex;align-items:end;justify-content:space-between;gap:20px;padding-top:35px}.auth-brand-footer span{font-size:10px;letter-spacing:2.2px;color:#bcded7}.auth-brand-footer b{font-size:13px;font-weight:700;text-align:right;color:#e7f7f4}
.auth-form-panel{display:grid;place-items:center;padding:50px;background:linear-gradient(180deg,#fff 0%,#fbfdfd 100%)}.auth-form-inner{width:min(430px,100%)}.auth-mini-brand{font-size:12px;color:var(--primary);font-weight:900;letter-spacing:1.3px;margin-bottom:50px}.auth-mini-brand span{color:#8aa1a0}.auth-form-inner h2{font-size:34px;letter-spacing:-.8px;margin:0 0 8px}.auth-lead{margin:0 0 18px;color:var(--muted);line-height:1.6}.auth-fields label{font-size:13px}.input-wrap{position:relative}.input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--primary);z-index:2}.input-wrap input{padding-left:38px}.auth-login{margin-top:5px;display:flex;justify-content:center;gap:10px;align-items:center;font-size:15px;padding:14px}.auth-security{display:flex;gap:10px;align-items:flex-start;border-top:1px solid var(--line);margin-top:28px;padding-top:20px;color:var(--muted)}.auth-security span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--soft-primary);color:var(--primary);font-weight:900;flex:none}.auth-security small{line-height:1.55}

/* FORM ELEMENTS */
label{display:grid;gap:7px;font-size:12px;font-weight:800;color:#43556e}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:#fbfdfd;outline:none;color:var(--text);transition:.18s}input:focus,select:focus,textarea:focus{border-color:#5ec4b1;box-shadow:0 0 0 3px rgba(11,122,105,.09);background:#fff}.btn{border:0;border-radius:12px;padding:11px 15px;font-weight:850;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 8px 20px rgba(7,94,84,.18)}.btn.soft{background:#edf6f4;color:#23665d}.btn.danger{background:#fff0f2;color:#bd3144}.btn.warn{background:#fff6e6;color:#9a6718}.btn.ghost{background:transparent;color:#48586f;border:1px solid var(--line)}.btn.ghost.dark{border-color:rgba(255,255,255,.18);color:#e5f4f1}.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* APP LAYOUT */
.app{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:270px;background:linear-gradient(180deg,#063f3b 0%,#07584f 57%,#053a36 100%);padding:23px 17px;color:#fff;display:flex;flex-direction:column;z-index:30;box-shadow:8px 0 28px rgba(4,57,53,.07)}.brand-row{display:flex;gap:12px;align-items:center;padding:5px 7px 25px}.brand-row b{display:block;font-size:17px;letter-spacing:.2px}.brand-row small{display:block;color:#c4e3dd;margin-top:2px;font-size:11px}.brand-row em{display:block;color:#88bbb2;font-size:10px;font-style:normal;margin-top:3px}.sidebar nav{display:grid;gap:6px}.sidebar nav button{border:0;background:transparent;color:#d0e5e1;padding:12px 13px;text-align:left;border-radius:12px;cursor:pointer;font-weight:700;display:flex;align-items:center;gap:11px;transition:.16s}.sidebar nav button .nav-icon{width:25px;display:inline-grid;place-items:center;font-size:17px;color:#9ed3ca}.sidebar nav button.active,.sidebar nav button:hover{background:rgba(255,255,255,.10);color:#fff;box-shadow:inset 3px 0 0 #35d2b4}.sidebar nav button.active .nav-icon{color:#63e0ca}.sidebar-quote{margin-top:auto;padding:24px 13px 19px;font-size:13px;line-height:1.45;color:#d9efeb;background:linear-gradient(140deg,rgba(255,255,255,.055),transparent);border-radius:17px}.sidebar-quote small{display:block;margin-top:17px;color:#78aea5;font-size:9px;letter-spacing:1.6px}.side-bottom{border-top:1px solid rgba(255,255,255,.12);padding:15px 8px 2px;display:grid;gap:12px}.side-bottom small{display:block;color:#9dccbf;margin-top:3px}
.content{margin-left:270px;padding:0 30px 34px;min-height:100vh}.topbar{min-height:88px;display:flex;justify-content:space-between;align-items:center;margin:0 -30px 25px;padding:15px 30px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.topbar h2{margin:0;font-size:26px;letter-spacing:-.5px}.topbar p{margin:5px 0 0;font-size:13px}.top-actions{display:flex;gap:9px;align-items:center}.iconbtn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--primary);font-size:18px}.profile-chip{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 7px;border:1px solid var(--line);border-radius:999px;background:#fff}.profile-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#dff3ef;color:#08705f;font-weight:900;font-size:12px}.profile-chip b{display:block;font-size:12px}.profile-chip small{display:block;font-size:10px;color:var(--muted);margin-top:2px}

/* COMPONENTS */
.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.card{background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:19px}.card:hover{box-shadow:0 13px 34px rgba(16,35,61,.085)}
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#064d46,#087c6b 62%,#119b83);color:#fff;border-radius:22px;padding:26px 30px;box-shadow:0 18px 44px rgba(6,79,72,.16);min-height:158px}.hero:before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-110px;top:-175px;background:rgba(255,255,255,.07)}.hero:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:85px;bottom:-130px;border:35px solid rgba(255,255,255,.055)}.hero>*{position:relative;z-index:1}.hero h2,.hero h3{margin:7px 0;font-size:30px;letter-spacing:-.5px}.hero p{color:#d5eeea;margin:5px 0;max-width:720px;line-height:1.55}.hero.dangerous{background:linear-gradient(120deg,#902839,#d34d5b)}.hero.warning{background:linear-gradient(120deg,#8a5b14,#d79624)}.hero-kicker{font-size:10px;font-weight:900;letter-spacing:1.5px;color:#b8e7df}.hero-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:18px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:850}.pill.soft{background:#edf4f3;color:#4e6663}.pill.green{background:#e3f8ef;color:#0d734b}.pill.yellow{background:#fff3d9;color:#946313}.pill.red{background:#ffedf0;color:#b72f41}.pill.purple{background:#edeafb;color:#5c4ac0}.hero .pill.soft{background:rgba(255,255,255,.14);color:#fff}.hero .pill.green{background:rgba(188,255,225,.16);color:#d8fff0}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:23px 0 11px}.section-head h3{margin:0;font-size:17px;letter-spacing:-.2px}.section-head small{color:var(--muted)}
.metric{position:relative;overflow:hidden;min-height:118px}.metric:after{content:"";position:absolute;width:74px;height:74px;border-radius:50%;right:-18px;top:-22px;background:#eff8f6}.metric .label{color:#63758a;font-size:12px;font-weight:800}.metric .value{font-size:29px;font-weight:950;margin-top:6px;letter-spacing:-.7px}.metric .value small{font-size:12px}.metric .kpi-icon{width:38px;height:38px;border-radius:12px;background:#e3f6f2;color:var(--primary);display:grid;place-items:center;margin-bottom:11px;font-size:17px}.metric .kpi-status{font-size:11px;margin-top:7px;color:var(--muted)}
.shift-row{display:flex;gap:13px;align-items:flex-start}.ico{width:46px;height:46px;border-radius:14px;background:#e6f6f3;display:grid;place-items:center;font-size:20px;flex:none}.timeline{display:grid}.event{display:grid;grid-template-columns:68px 1fr auto;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:start}.event:last-child{border:0}.event .time{font-weight:900;color:#486078;font-size:12px}.event p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.5}.actions{display:flex;flex-wrap:wrap;gap:9px}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick button{border:1px solid var(--line);background:#fff;border-radius:16px;padding:17px;text-align:left;cursor:pointer}.quick .emoji{font-size:22px;display:block;margin-bottom:10px}.quick small{color:var(--muted);display:block;margin-top:4px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);font-size:12px}.data-table th{color:#63758a;white-space:nowrap;font-size:11px;text-transform:uppercase;letter-spacing:.4px}.data-table tbody tr:hover{background:#f8fbfa}
.notice{border:1px solid var(--line);border-radius:15px;padding:14px;margin-bottom:10px;background:#fff}.notice.danger{border-color:#f6c4ca;background:#fff5f6}.notice.warning{border-color:#f2d7a8;background:#fffaf0}.notice.success{border-color:#bce7d4;background:#f4fcf8}.modal{width:min(650px,calc(100% - 24px));border:0;border-radius:21px;padding:0;box-shadow:0 30px 90px rgba(0,0,0,.24)}.modal::backdrop{background:rgba(9,40,45,.55);backdrop-filter:blur(3px)}.modalbox{padding:23px}.modalhead{display:flex;justify-content:space-between;align-items:center;gap:10px}.modalhead h3{margin:0}.checklist{display:grid;gap:9px}.check{display:flex;gap:10px;align-items:center;border:1px solid var(--line);padding:11px;border-radius:12px;background:#fbfdfd}.check input{width:auto}.toast{position:fixed;right:22px;bottom:22px;background:#073f3b;color:#fff;padding:13px 16px;border-radius:13px;box-shadow:0 18px 40px rgba(0,0,0,.2);z-index:100;display:none;max-width:360px}.offlinebar{position:fixed;left:50%;top:12px;transform:translateX(-50%);background:#9a6718;color:#fff;padding:8px 14px;border-radius:999px;z-index:110;font-size:12px;font-weight:800}.bottom-nav{display:none}.bar-chart{height:200px;display:flex;gap:12px;align-items:flex-end}.baritem{flex:1;text-align:center;font-size:11px;color:var(--muted)}.baritem div{background:linear-gradient(180deg,#23b49a,#087665);border-radius:9px 9px 4px 4px;min-height:8px;margin-bottom:5px}.empty-state{text-align:center;padding:28px;color:var(--muted)}.kpi-status{font-size:13px;margin-top:6px}.footer-note{font-size:11px;color:var(--muted);margin-top:20px}.split{display:flex;justify-content:space-between;gap:12px;align-items:center}.danger-text{color:var(--danger)}.success-text{color:var(--success)}
.status-card{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.status-person{display:flex;gap:12px;align-items:center}.status-person .person-avatar{width:44px;height:44px;border-radius:14px;background:#e5f5f2;color:var(--primary);display:grid;place-items:center;font-weight:950}.status-person p{margin:3px 0 0;font-size:12px}.status-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.dashboard-subgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.activity-card .event{grid-template-columns:60px 1fr auto}

@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.dashboard-subgrid{grid-template-columns:1fr}.auth-shell{grid-template-columns:1fr 1fr}.auth-brand{padding:38px}.auth-brand-copy{margin-top:70px}.auth-brand h1{font-size:37px}}
@media(max-width:820px){.auth-wrap{padding:0;background:#fff}.auth-shell{width:100%;min-height:100vh;border:0;border-radius:0;grid-template-columns:1fr}.auth-brand{min-height:230px;padding:26px 23px}.auth-brand-copy{margin-top:28px}.auth-brand h1{font-size:29px;margin:12px 0}.auth-brand-copy p,.feature-row,.auth-brand-footer{display:none}.auth-form-panel{padding:34px 22px}.auth-mini-brand{margin-bottom:25px}.auth-form-inner h2{font-size:29px}.sidebar{display:none}.content{margin:0;padding:0 14px 86px}.topbar{margin:0 -14px 18px;padding:12px 14px;min-height:74px}.topbar h2{font-size:20px}.profile-chip #profileName,.profile-chip #profileRole{display:none}.profile-chip{padding:4px;border:0;background:transparent}.top-actions #syncBadge{display:none}.g4,.g3,.g2{grid-template-columns:1fr}.hero{border-radius:18px;padding:21px}.hero h2,.hero h3{font-size:25px}.bottom-nav{display:flex;position:fixed;left:10px;right:10px;bottom:9px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 18px 45px rgba(7,61,56,.15);border-radius:18px;z-index:50;padding:7px;justify-content:space-around;gap:3px}.bottom-nav button{border:0;background:transparent;color:#74858d;font-size:10px;display:grid;gap:3px;place-items:center;min-width:52px;padding:5px 3px;border-radius:12px}.bottom-nav button span{font-size:18px}.bottom-nav button.active{background:#e5f5f1;color:var(--primary);font-weight:850}.event{grid-template-columns:55px 1fr}.event>.pill{display:none}.quick{grid-template-columns:1fr 1fr}.status-card{display:block}.dashboard-subgrid{grid-template-columns:1fr}.modalbox{padding:18px}.section-head{margin-top:19px}}
@media(max-width:480px){.auth-brand{min-height:210px}.auth-brand h1{font-size:26px}.brand-title{font-size:18px}.brand-subtitle{font-size:10px}.app-logo{width:50px;height:50px}.top-actions .iconbtn{display:none}.g4{grid-template-columns:1fr 1fr}.metric{padding:15px;min-height:108px}.metric .value{font-size:24px}.hero p{font-size:13px}.actions .btn{flex:1}.quick{grid-template-columns:1fr 1fr}}


/* HOTFIX UI v1.1.1 — logout selalu terlihat */
.sidebar{height:100vh;overflow:hidden}
.brand-row{flex:0 0 auto;padding-bottom:18px}
.sidebar nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:3px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.sidebar nav::-webkit-scrollbar{width:5px}.sidebar nav::-webkit-scrollbar-track{background:transparent}.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:10px}
.sidebar-quote{flex:0 0 auto;margin-top:10px;padding:15px 13px 13px}
.sidebar-quote small{margin-top:10px}
.side-bottom{flex:0 0 auto;background:linear-gradient(180deg,rgba(5,58,54,.04),rgba(5,46,44,.42));padding-top:12px}
#logoutBtn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px}
.top-logout{height:42px;border:1px solid #f0cdd1;background:#fff7f8;color:#b73545;border-radius:12px;padding:0 13px;font-weight:850;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:.16s}
.top-logout:hover{background:#fff0f2;transform:translateY(-1px)}
.logout-symbol{font-size:18px;line-height:1}.logout-label{font-size:12px}
@media(max-height:820px) and (min-width:821px){.sidebar{padding-top:15px;padding-bottom:12px}.brand-row{padding-bottom:12px}.sidebar nav{gap:3px}.sidebar nav button{padding:9px 12px}.sidebar-quote{display:none}.side-bottom{padding-top:10px;gap:8px}}
@media(max-width:820px){.top-logout{height:38px;padding:0 10px}.logout-label{display:none}.logout-symbol{font-size:19px}}
@media(max-width:480px){.top-actions .top-logout{display:flex}.top-logout{border:0;background:#fff0f2;width:38px;padding:0}.top-actions{gap:5px}}