/* Approved Obsidian Command 01. Presentation only; operational IDs remain intact. */
:root{--bg:#111315;--card:#1a1d20;--card2:#232629;--line:#34332e;--line-soft:#292b2b;--ink:#eeeae4;--muted:#b2b2ae;--muted2:#a4a6a3;--gold:#e2be76;--gold2:#f0d8a7;--violet:#e2be76;--violet-dk:#f0d8a7;--indigo:#e2be76;--yellow:#e2be76;--grad:#111315;--grad-btn:#e2be76;--shadow:none;--shadow-md:0 18px 48px #0004;--radius:10px;--oc-ease:cubic-bezier(.22,1,.36,1)}
body{font-family:'Segoe UI Variable','Segoe UI','Trebuchet MS',sans-serif!important;font-size:14px;line-height:1.5}
h1,h2,h3,.sb-name,.brand h1,.hub-card .t,.hero .hi h2,.sec-head h2,.hub-hero h1,.login-title,body .login-title,.q-text{font-family:'Segoe UI Variable','Segoe UI','Trebuchet MS',sans-serif!important;letter-spacing:-.035em!important;font-style:normal!important}
body :is(input,select,textarea){background:#141719!important;border-color:var(--line)!important;border-radius:6px!important}
body :is(input,select,textarea):focus{border-color:var(--gold)!important}
body :is(button,a,[role=button],input,select,textarea):focus-visible{outline:2px solid var(--gold2)!important;outline-offset:3px!important}
body :is(.card,.clock-card,.leave-card,.slip-card,.rq-card,.prj-card,.qa-btn,.sys-card,.prof-card,.txn,.pj,.stat-card,.curbar,.radial-card,.gaji-month,.baki .b){background:var(--card)!important;border-color:var(--line)!important;border-radius:10px!important;box-shadow:none!important}
.sidebar{background:#141618!important;padding:26px 16px!important}.sb-brand{padding-bottom:26px!important}.sb-logo{width:34px!important;height:34px!important}.sb-name{font-weight:600!important;font-size:18px!important}.sb-item{min-height:44px;border-radius:6px!important;gap:11px!important}.sb-item.on{background:#e2be7612!important;box-shadow:inset 2px 0 var(--gold)!important;color:var(--gold2)!important}.sb-uname{overflow-wrap:anywhere}
.hero{background:#111315!important;border-radius:0!important}.hero .hi h2{font-size:clamp(27px,3vw,40px)!important;font-weight:600!important}.hero .hi p{color:var(--muted)!important}.hero .hi{position:relative}.hero .hi:after{content:'';display:block;width:64px;height:2px;background:var(--gold);margin-top:22px}.brand h1{font-weight:600!important}
.stat{background:transparent!important;border:0!important;border-right:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important}.stat:last-child{border-right:0!important}.stat .ico{background:transparent!important;box-shadow:none!important}.stat .num,.clock-time,.hub-marks .n{font-family:inherit!important;font-variant-numeric:tabular-nums;color:var(--ink)!important}.stats{gap:0!important;border-bottom:1px solid var(--line)}
body :is(.btn,.btn-save,.sys-save,.sys-pdf-btn,.chip,.tool-btn,.seg-btn,.navcta){border-radius:6px!important}body :is(.btn-primary,.btn-save,.sys-save,.sys-pdf-btn,.login-btn){background:var(--gold)!important;color:#211c13!important;box-shadow:none!important}.btn-ghost,.workspace-tools button{background:#1a1d20!important;border-color:var(--line)!important}.seg,.nav{background:#171a1c!important;backdrop-filter:none!important}.seg-btn.on,.chip.on{background:#e2be7618!important;color:var(--gold2)!important}
th{background:#202326!important;color:#c9c9c2!important}td{border-color:#303332!important}.table-scroll{border-radius:8px!important}.modal,.workspace-command{background:#1a1d20!important;border-radius:12px!important;border-color:#494439!important}.empty{color:var(--muted)!important}.network-label{color:var(--muted)!important}
/* Calm login, with no perpetual decorative canvas workload. */
.login,.login .land-bg{background:#111315!important}.login .login-card{background:#1a1d20!important;border-color:#454035!important;border-radius:12px!important;box-shadow:none!important}.q-text{font-weight:550!important;color:var(--ink)!important}.q-author,.q-eyebrow{color:var(--gold)!important}.login-shield{border-radius:8px!important}.login .land-copy{border-top:2px solid var(--gold);padding-top:30px!important}.login :is(.land-canvas,.trail-canvas){display:none!important}
/* Portal: compact module rail + live metrics + priority work, never demo data. */
.hub{background:#111315!important;isolation:isolate}.hub-top,.hub-hero,.hub-marks,.hub-cards,.workspace-focus,.hub-foot,.oc-priority{max-width:1240px!important}.hub-top{border-color:var(--line)!important;margin-bottom:24px!important;padding:25px 32px!important}.lb-carat{font-family:inherit!important;font-size:27px!important;letter-spacing:2px!important;font-weight:650!important}.lb-sys{font-family:inherit!important;color:var(--muted)!important}.hub-hero{padding:8px 32px 22px!important}.hub-hero h1{font-size:clamp(30px,3.3vw,46px)!important;font-weight:600!important}.hub-hero p{color:var(--muted)!important}.hh-eyebrow{font-family:inherit!important;letter-spacing:2px!important;color:var(--gold)!important}.hh-clock{font-family:inherit!important;font-size:24px!important}.hh-date{font-family:inherit!important;color:var(--muted)!important}.hh-left{min-width:0}.hh-left>p{max-width:56ch}
.hub-marks{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0!important;padding:0 32px!important;margin:0 auto 24px!important}.hub-marks .hm{background:transparent!important;border:0!important;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:23px 22px!important;text-align:left!important}.hub-marks .hm:last-child{border-right:0!important}.hub-marks .n{font-size:34px!important;font-weight:600!important}.hub-marks .l{font-family:inherit!important;color:var(--muted)!important}.hub-marks .hm:nth-child(3) .n{color:var(--gold2)!important}
.hub-cards{padding:0 32px 28px!important;gap:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.hub-card{min-height:116px!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:22px 18px!important;box-shadow:none!important}.hub-card:before,.hub-card:after{display:none!important}.hub-card .no{display:none}.hub-card .ic{display:none}.hub-card .t{font-size:18px!important;font-weight:550!important}.hub-card .d{font-family:inherit!important;font-size:12px!important;max-width:80%;color:var(--muted)!important}.hub-card .open{font-family:inherit!important;font-size:12px!important;right:16px!important;bottom:19px!important;color:var(--gold2)!important}.hub-card:hover{transform:none!important;background:#1a1d20!important;box-shadow:none!important}
.workspace-focus{padding:0 32px 26px!important}.focus-grid{gap:0!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.focus-tile{background:transparent!important;border:0!important;border-right:1px solid var(--line)!important;border-radius:0!important;min-height:105px!important;padding:18px!important}.focus-tile:last-child{border-right:0!important}.focus-tile strong{font-family:inherit!important;font-weight:550!important;font-size:28px!important;color:var(--gold2)!important}.focus-heading h2{font-weight:550!important}.focus-tile small,.focus-heading span{color:var(--muted)!important}.workspace-tools{gap:8px!important}.workspace-tools button{font-family:inherit!important;min-height:44px!important}.workspace-tools kbd{color:var(--muted)!important}
.hub .navcta{display:inline-flex;align-items:center;justify-content:center}.oc-rail{display:none}.oc-rail[hidden]{display:none!important}.oc-priority{margin:0 auto 24px;padding:0 32px}.oc-priority[hidden]{display:none!important}.oc-priority-inner{background:linear-gradient(145deg,#1c1f22,#1a1d20 65%);border:1px solid #34332e;border-top-color:#88744e;border-radius:12px;padding:24px}.oc-priority-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:8px}.oc-priority h2{font-size:20px;font-weight:550;margin:0}.oc-count{border:1px solid #695b40;border-radius:4px;padding:3px 9px;color:var(--gold2);font-size:12px;white-space:nowrap}.oc-request{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}.oc-request:last-child{border-bottom:0}.oc-avatar{width:36px;height:36px;display:grid;place-items:center;background:#e2be7612;color:var(--gold2);border-radius:7px;font-weight:600}.oc-request strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}.oc-request small{display:block;color:var(--muted);font-size:12px;margin-top:4px;overflow-wrap:anywhere}.oc-request a,.oc-priority-foot a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border-radius:6px;background:var(--gold);color:#211c13;font-weight:600;font-size:12px;text-decoration:none}.oc-priority-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;color:var(--muted);font-size:12px}.oc-priority-foot a{background:transparent;color:var(--gold2);border:1px solid #514938}.oc-empty{padding:20px 0;color:var(--muted);font-size:14px}

@media(min-width:1100px){.hub{padding-left:208px!important}.oc-rail{display:flex;position:fixed;z-index:2;left:0;top:0;bottom:0;width:208px;padding:32px 18px;background:#141618;border-right:1px solid var(--line);flex-direction:column;gap:28px;overflow:auto}.oc-rail-brand{font-size:26px;letter-spacing:3px;color:var(--ink);font-weight:600}.oc-rail-brand small{display:block;font-size:10px;letter-spacing:1.7px;color:var(--gold);margin-top:4px}.oc-rail nav{display:flex;flex-direction:column;gap:6px}.oc-rail button{font:inherit;font-size:13px;color:var(--muted);min-height:44px;text-align:left;padding:11px 12px;border:0;border-radius:6px;background:transparent;cursor:pointer}.oc-rail button:hover{background:#25282a;color:var(--gold2)}.oc-rail .oc-current{background:#e2be7612;color:var(--gold2);box-shadow:inset 2px 0 var(--gold)}.oc-rail-footer{margin-top:auto;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:12px;overflow-wrap:anywhere}.oc-rail-footer strong{display:block;color:var(--ink);font-weight:550;margin-bottom:5px}.hub-top .land-brand2{opacity:.75}.hub-hero{position:relative}.hub-hero:after{content:'';position:absolute;left:32px;bottom:0;height:2px;width:72px;background:var(--gold)}.hub-marks{margin-top:8px!important}}
@media(min-width:980px){body>.sidebar{width:208px!important}.app{margin-left:208px!important;max-width:none!important;width:calc(100% - 208px)!important}.app .hero{padding:26px 32px 36px!important}}
@media(max-width:760px){.hub-top{padding:20px!important;gap:14px!important}.hub-top>div:last-child{flex-wrap:wrap}.hub-hero{padding:8px 20px 22px!important}.hub-marks{padding:0 20px!important;grid-template-columns:repeat(2,minmax(0,1fr))}.hub-marks .hm{padding:17px 14px!important}.hub-marks .hm:nth-child(2){border-right:0!important}.hub-marks .n{font-size:29px!important}.hub-cards{padding:0 20px 24px!important;grid-template-columns:1fr!important}.hub-card{min-height:107px!important;padding:20px 8px!important}.workspace-focus{padding:0 20px 24px!important}.focus-grid{grid-template-columns:1fr!important}.focus-tile{min-height:86px!important;border-right:0!important;border-bottom:1px solid var(--line)!important;padding:16px 4px!important}.focus-tile:last-child{border-bottom:0!important}.oc-priority{padding:0 20px;margin-bottom:24px}.oc-priority-inner{padding:18px}.oc-priority h2{font-size:18px}.oc-request{grid-template-columns:30px minmax(0,1fr) auto;gap:10px}.oc-avatar{width:30px;height:34px}.oc-request a{padding:8px 10px}.oc-priority-foot{flex-wrap:wrap}.network-label{width:100%;margin-left:0}.land-hero{padding:24px 20px!important}.q-text{font-size:30px!important}.login .login-card{padding:26px!important}.hero .row{gap:12px;flex-wrap:wrap}.hero .hi h2{font-size:28px!important}.workspace-tools button{padding:9px 11px!important}}
@media(hover:hover){:is(.oc-request a,.workspace-tools button,.btn):not(:disabled):hover{transform:translateY(-1px)}tbody tr:hover{background:#222629!important}}
:is(.oc-request a,.workspace-tools button,.btn){transition:transform 160ms var(--oc-ease)}:is(.oc-request a,.workspace-tools button,.btn):not(:disabled):active{transform:translateY(1px) scale(.98)}
/* Shared module details retain status colors, without the old navy panels. */
.rq,.rq-detail,.att-day-h,.att-row,.prof-head,.month-bar{background:var(--card)!important;border-color:var(--line)!important}.rq-detail{background:#222629!important}.rq{border-radius:10px!important}.toast{background:#25282a!important;color:var(--ink)!important;border:1px solid #69604d!important;border-radius:8px!important;max-width:calc(100vw - 32px);text-align:center}.toast.show{opacity:1!important}
body button[onclick^="laporanKewangan"],body button[onclick^="laporanBulanan"]{background:var(--gold)!important;color:#211c13!important;border-radius:6px!important;box-shadow:none!important}.b-ok,.btn-approve{background:#263a30!important;color:#b6e2c2!important}.b-no,.btn-reject{background:#3b282a!important;color:#f0b4b7!important}
/* Clear navigation hierarchy: recognizable destinations, not hidden pictograms. */
.oc-icon{display:block;width:22px;height:22px;flex:0 0 22px}
.hub-hero{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:start!important;gap:24px!important;padding-bottom:28px!important}
.hub-hero h1{line-height:1.18!important;margin-bottom:12px!important;max-width:24ch}
.hub-hero p{letter-spacing:.015em!important;line-height:1.6!important;margin-bottom:0!important}
.hh-right{padding-top:26px;min-width:138px;border-left:1px solid var(--line);padding-left:24px}
.hh-clock{font-size:28px!important;letter-spacing:-.04em!important;font-variant-numeric:tabular-nums}
.hh-date{font-size:12px!important;letter-spacing:.04em!important;margin-top:4px}
.workspace-tools{width:100%;margin:22px 0 0!important;gap:12px!important}
.workspace-tools .workspace-search{display:flex;align-items:center;gap:12px;flex:1 1 390px;width:min(100%,500px);max-width:560px;min-width:0!important;min-height:52px!important;padding:12px 16px!important;text-align:left;background:#202326!important;border-color:#514a3d!important;font-size:14px!important}
.workspace-search>.oc-icon{color:var(--gold2)}
.workspace-search>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d9d7d0}
.workspace-tools .workspace-search kbd{margin-left:auto;flex-shrink:0;border:1px solid #4a4942;border-bottom-width:2px;padding:3px 6px;border-radius:4px;font-size:11px;font-family:inherit;white-space:nowrap}
.workspace-tools .network-label{flex-basis:100%;margin:0;font-size:12px!important}
.workspace-command{width:min(640px,calc(100vw - 24px))!important}
.command-results{padding:10px!important}
.command-results button{display:flex!important;align-items:center;justify-content:flex-start!important;gap:16px!important;min-height:78px!important;padding:12px 14px!important;border:1px solid transparent!important;border-radius:12px!important;text-align:left!important;margin:2px 0!important;width:100%}
.command-results button>.oc-icon{display:grid!important;place-items:center;flex:0 0 48px!important;width:48px!important;height:48px!important;padding:9px;box-sizing:border-box;border-radius:12px;background:#292a26;border:1px solid #4b4434;color:#ecd19a!important}
.command-results button>.oc-icon svg{width:26px!important;height:26px!important}
.command-results button>.command-copy{flex:1;min-width:0;margin:0!important;text-align:left!important;align-items:flex-start!important}
.command-results button:is(:hover,:focus-visible){background:#292c2c!important;border-color:#66583c!important;outline:none}
.command-results button:focus-visible{box-shadow:inset 0 0 0 1px #e2be76}
.command-results .command-copy>span{font-weight:650;font-size:16px!important;line-height:1.4}
.command-results .command-copy>small{font-size:13px!important;line-height:1.5;color:#b8bebc!important}
@media(max-width:480px){.command-results button{gap:12px!important;padding:10px!important;min-height:74px!important}.command-top{padding:14px!important}}
.command-results .oc-icon{color:var(--gold2)}.command-copy{display:flex;flex-direction:column;gap:3px;text-align:left}.command-copy>span{font-size:15px}.command-copy>small{font-size:12px!important}
.hub-marks .l{font-size:13px!important;letter-spacing:0!important;line-height:1.45!important;min-height:20px}
.hub-cards{column-gap:24px!important}.hub-card{font-family:'Segoe UI Variable','Segoe UI','Trebuchet MS',sans-serif!important;padding:24px 16px 24px 76px!important;min-height:126px!important}
.hub-card .ic{display:grid!important;place-items:center;position:absolute!important;top:24px!important;left:12px!important;right:auto!important;width:46px!important;height:46px!important;margin:0!important;border:1px solid #494337!important;border-radius:9px!important;background:#e2be760a!important;color:var(--gold2)!important;opacity:1!important;transform:none!important}
.hub-card .ic .oc-icon{width:26px;height:26px}.hub-card .d{max-width:100%!important;padding-right:0;font-size:13px!important;line-height:1.55!important}.hub-card .open{position:static!important;display:block;margin-top:10px;font-size:12px!important}
.oc-rail button,.oc-rail a{display:flex;align-items:center;gap:11px;line-height:1.35}.oc-rail button[hidden]{display:none!important}.oc-rail .oc-icon{width:20px;height:20px;flex-basis:20px;color:var(--gold2)}
.oc-rail a{font:inherit;font-size:13px;text-decoration:none;color:var(--muted);min-height:44px;padding:11px 12px;border-radius:6px}.oc-rail a:hover{background:#25282a;color:var(--gold2)}
.oc-rail-teams{border-top:1px solid var(--line);padding-top:18px}.oc-rail-teams:before{content:'PASUKAN';font-size:10px;color:var(--muted);letter-spacing:.16em;padding:0 12px 6px}
.oc-channels{max-width:1240px;margin:0 auto;padding:4px 32px 32px}.oc-channel-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}.oc-channel-heading h2{margin:0;font-size:20px;font-weight:550}.oc-channel-heading p{margin:0;font-size:12px;color:var(--muted)}
.oc-channels nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.oc-channels a{display:flex;align-items:center;gap:16px;min-height:88px;border:1px solid var(--line);background:#191c1e;border-radius:8px;padding:18px;text-decoration:none;color:var(--ink);transition:background 160ms var(--oc-ease),transform 160ms var(--oc-ease)}.oc-channels a:hover{background:#232629;transform:translateY(-2px)}.oc-channels .oc-icon{width:26px;height:26px;flex-basis:26px;color:var(--gold2)}.oc-channels a>span:not(.oc-channel-arrow){min-width:0;flex:1}.oc-channels strong{display:block;font-size:14px;font-weight:600}.oc-channels small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.oc-channel-arrow{color:var(--gold2)}
@media(max-width:760px){.hub-hero{grid-template-columns:minmax(0,1fr)!important;gap:18px!important}.hh-right{padding:0!important;border:0;display:flex;align-items:baseline;gap:12px}.hh-clock{font-size:21px!important}.hh-date{font-size:11px!important}.hub-hero h1{font-size:30px!important}.workspace-tools .workspace-search{flex-basis:100%;max-width:none;width:100%;font-size:14px!important}.workspace-tools .workspace-search kbd{display:none}.hub-card{padding:22px 10px 22px 68px!important}.hub-card .ic{left:4px!important;top:22px!important}.hub-cards{column-gap:0!important}.oc-channels{padding:0 20px 28px}.oc-channel-heading{display:block}.oc-channel-heading p{margin-top:6px}.oc-channels nav{grid-template-columns:1fr}.oc-channels a{min-height:84px}.oc-channels strong{font-size:15px}.oc-channels small{font-size:13px}.command-help{font-size:12px!important}.oc-rail{display:none}}
/* Staff clock-first surface uses the original clock node and handlers. */
#ocStaffDashboard{max-width:1240px;margin:0 auto;padding:0 32px 24px}
#ocStaffDashboard[hidden]{display:none!important}
.oc-staff #hubStats,.oc-staff #workspaceFocus{display:none!important}
.oc-staff-heading,.oc-staff-links{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.oc-staff-heading span{font-size:11px;letter-spacing:.14em;color:var(--gold2)}
.oc-staff-heading h2{margin:6px 0;font-size:26px}
#ocStaffDashboard button:not(.clock-btn),.oc-staff-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:#232629;color:var(--ink);font:inherit;text-decoration:none;cursor:pointer}
#ocStaffDashboard .clock-card{margin:0 0 16px;padding:24px;border:1px solid var(--line);background:#191c1e;border-radius:12px;text-align:center}
#ocStaffDashboard #clockBtn{min-height:64px;width:100%;max-width:580px;font-size:22px}
#ocStaffDashboard .clock-time{font-size:44px}
#ocStaffDashboard .clock-status{margin:12px 0 20px}
@media(max-width:760px){#ocStaffDashboard{padding:0 20px 20px}.oc-staff-heading,.oc-staff-links{flex-wrap:wrap;gap:8px}.oc-staff-heading h2{font-size:23px}#ocStaffDashboard .clock-card{padding:18px}.oc-staff .hub-hero{padding-bottom:16px!important}}
/* Legacy decorative CSS loops become finite; meaningful data canvas remains. */
body *,body *:before,body *:after{animation-iteration-count:1!important}
html[data-oc-motion=off] *,html[data-oc-motion=off] *:before,html[data-oc-motion=off] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.oc-rail,.oc-priority,.oc-channels{display:none!important}.app{margin:0!important;width:100%!important}body{background:white!important;color:black!important}}