/* Elestra · shadcn/ui Maia · teal · Inter. Business table semantics stay explicit. */
@font-face{font-family:Inter;src:url('inter-latin-wght-normal.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--ink:#182c2a;--muted:#6c7b78;--line:#e2e9e7;--grid:#b4c3bf;--blue:#0f766e;--blue-dark:#115e59;--green:#15803d;--font-sans:Inter,Arial,sans-serif}
[hidden]{display:none!important}
body{font-family:Inter,Arial,sans-serif;background:#f5f8f7;color:var(--ink);font-size:14px}
button:not([data-slot]){border-radius:999px;font-weight:500;box-shadow:none;border-color:#d8e2df;color:#294440;background:#fff;transition:background .15s,border-color .15s}
button:not([data-slot]):hover{background:#edf7f4;border-color:#99c8be;color:#115e59}
button.primary:not([data-slot]){background:#0f766e;border-color:#0f766e;color:white}
button.primary:not([data-slot]):hover{background:#115e59}
button:focus-visible,a:focus-visible{outline:2px solid #0d9488;outline-offset:3px}
button:disabled{opacity:.5;cursor:not-allowed}
input,select,textarea{font-family:inherit;border:1px solid #d8e2df;border-radius:12px;color:#182c2a;background:white;font-size:13px}
input:hover,select:hover,textarea:hover{border-color:#8cb8ae}
input:focus,select:focus,textarea:focus{outline:0;border-color:#0f766e;box-shadow:0 0 0 3px #0f766e18}
input[readonly],input:disabled{background:#f5f8f7;color:#6c7b78}
label{font-size:12px;color:#435e59;line-height:1.5;font-weight:500}
h1,h2,h3,h4{color:#182c2a;letter-spacing:-.025em}h1{font-size:22px;font-weight:650}h2{font-size:27px;font-weight:600}h3{font-size:16px;font-weight:600}
p{color:#6c7b78}.hint,small{color:#6c7b78;line-height:1.65}.eyebrow{font-size:10px;letter-spacing:.13em;color:#60867e;font-weight:600}
#workspace > header{background:white;border-bottom:1px solid #e2e9e7;padding:14px 26px;min-height:82px;gap:14px}
.identity{gap:12px;min-width:0;flex-wrap:nowrap}
.brand{padding:0;width:46px;height:46px;border-radius:14px;overflow:hidden;background:#06102a;box-shadow:none;flex-shrink:0}
.brand img{width:100%;height:100%;object-fit:contain;display:block}
h1 span{font-size:10px;letter-spacing:0;font-weight:500;color:#7f9490}.brand-subtitle{font-size:11px;color:#7b8f8a;line-height:1.5}
.app-shell{grid-template-columns:238px minmax(0,1fr)}
.sidebar{background:#fff;border-right:1px solid #e2e9e7;padding:24px 12px 18px}
.sidebar-label{padding-left:14px;color:#8a9c97;font-size:10px;letter-spacing:.12em;margin-bottom:14px}
.maia-nav{display:flex;flex-direction:column;gap:6px}
.maia-nav-item[data-slot=button]{width:100%;justify-content:flex-start;padding:12px 14px;height:44px;gap:12px;border:0;border-radius:12px;color:#607570;font-size:12px;font-weight:500;box-shadow:none;background:transparent;line-height:1.3;white-space:nowrap;overflow:hidden}
.maia-nav-item[data-slot=button]:hover{background:#f1f7f5;color:#115e59}
.maia-nav-item.is-active[data-slot=button]{background:#0f766e;color:#fff;box-shadow:0 3px 10px #0f766e18}
.maia-nav-item span{overflow:hidden;text-overflow:ellipsis}
.sidebar-collapsed .app-shell{grid-template-columns:76px minmax(0,1fr)}
.sidebar-collapsed .sidebar{padding:24px 10px}
.sidebar-collapsed .maia-nav-item[data-slot=button]{padding:12px;justify-content:center}
.sidebar-collapsed .maia-nav-item span{display:none}
.sidebar-bottom{margin-top:auto;padding:20px 10px 0;border-top:1px solid #e2e9e7}.sidebar #sync{color:#83958f}.sync-dot{background:#14b8a6}
#maia-top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#maia-top-actions [data-slot=button]{font-size:12px;gap:7px;min-height:34px}
.maia-account[data-slot=badge]{border-radius:999px;background:#f1f5f4;color:#607570;border:1px solid #e2e9e7;padding:6px 12px;max-width:290px;overflow:hidden;text-overflow:ellipsis;font-size:10px}
#sidebar-toggle{border:0;background:transparent;width:34px;height:34px;padding:6px;display:grid;place-items:center}
#maia-sidebar-icon{display:grid;place-items:center}
.maia-ready .legacy-navigation,.maia-ready .legacy-actions,.maia-ready .schedule-group-switch,.maia-ready #notice,.maia-ready .sidebar-fallback-icon{display:none!important}
.app-content{background:#f5f8f7}.app-content main{padding:28px;max-width:2400px;margin:auto}
.section-head{gap:20px;margin-bottom:24px;align-items:flex-start}.section-head h2{margin-bottom:5px}.section-head p{font-size:12px;line-height:1.65}.section-head .eyebrow{margin-bottom:7px;font-size:10px}
.actions{gap:8px}.actions button:not([data-slot]){font-size:12px;min-height:36px;padding:8px 14px}
.card{border:1px solid #e0e8e5;border-radius:18px;box-shadow:0 2px 4px #173b3003;background:#fff}
.filter-bar{padding:14px 16px;border-radius:16px;border:1px solid #e0e8e5;gap:10px;margin-bottom:18px;background:#fff}
.filter-bar select{min-width:165px;max-width:285px;border-radius:10px;background:white;height:36px;font-size:12px}
.filter-search{min-width:200px;max-width:340px;flex-basis:220px}.filter-search input{height:36px;font-size:12px;background:white}.filter-search > span{color:#86a399}#knowledge-search{padding-left:12px}.filter-bar .reset-filter{color:#0f766e;font-size:12px}
.schedule-group-toolbar{margin-bottom:16px;gap:12px}#maia-schedule-groups{max-width:100%}
#maia-schedule-groups [data-slot=tabs-list]{background:#e8efec;padding:4px;height:auto;min-height:40px;max-width:100%;border-radius:999px}
#maia-schedule-groups [data-slot=tabs-trigger]{font-size:12px;border-radius:999px;padding:8px 14px;color:#6c7b78;line-height:1.2;box-shadow:none}
#maia-schedule-groups [data-slot=tabs-trigger][data-active]{background:white;color:#0f766e;box-shadow:0 1px 4px #173b3010}
.schedule-edit-note{background:#e8f5ef;color:#0f766e;border-color:#beded3;border-radius:999px;font-size:10px}.schedule-group-heading{margin-bottom:12px}.schedule-group-heading strong{font-weight:600;color:#294440}
.legend{font-size:10px;color:#6c7b78;gap:12px}.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;border:1px solid #0002;margin-right:4px}
.table-wrap{border:1px solid #acbdb7;border-radius:14px;background:#fff;scrollbar-color:#b5c8c0 #f2f6f4}
.data-grid th{background:#edf4f1;color:#45655c;border-color:#b4c3bf;font-weight:600}.data-grid td{border-color:#b4c3bf}
.data-grid .name,.data-grid .row-no{background:#fff}.schedule-grid thead th.name,.schedule-grid thead th.row-no{background:#edf4f1}
.schedule-grid td.function{padding:4px 9px;color:#182c2a}.schedule-grid .person-name{color:#182c2a}
.schedule-grid .employee-link{background:transparent;border:0;border-radius:0;color:inherit;box-shadow:none}
.schedule-grid .cell-action,.matrix-grid .cell-action{border:0;border-radius:0;background:transparent;color:inherit;box-shadow:none}
.schedule-grid .cell-action:hover{background:#ffffff38;color:inherit}
.schedule-grid th.holiday-head{background:#f4a66f;color:#20170e}
.schedule-grid td.holiday-cell.shift-normal,.schedule-grid td.holiday-cell.shift-off{background:#f8b07e;color:#111}
.schedule-grid td.holiday-cell{box-shadow:inset 0 3px #e97c26}
.schedule-grid .holiday-head small{color:#49301d}
.employees-grid{font-size:12px}.employees-grid th{font-size:10px;background:#edf4f1}.employees-grid th:first-child,.employees-grid th:nth-child(2),.employees-grid th:last-child{background:#edf4f1}
.employees-grid .manage-employee{color:#0f766e;border-color:#bcdbd0;background:#f3faf7;border-radius:999px}
.employment-badge{border-radius:999px;padding:3px 8px;font-size:10px;font-weight:500}.employment-badge.active{background:#e5f5ed;color:#23744e}.employment-badge.inactive,.employment-badge.resigned{background:#fceceb;color:#ad4740}.employment-badge.transferred{background:#f1eafa;color:#78539e}
.master-review{border-color:#bcdbd0;background:#eff8f4;color:#356658;border-radius:12px}
.table-note{font-size:11px;line-height:1.7;color:#84948f}.audit{margin-top:20px;padding:20px;border-color:#e0e8e5}.audit p{line-height:1.7}
.stats{gap:14px;margin-bottom:22px}.stat[data-maia-stat]{padding:0;display:block;background:none;border:0;box-shadow:none;border-radius:16px}
.maia-stat[data-slot=card]{height:100%;background:#fff;border:1px solid #e0e8e5;box-shadow:none;gap:10px;padding:20px;border-radius:18px}
.maia-stat [data-slot=card-header],.maia-stat [data-slot=card-content]{padding:0}.maia-stat [data-slot=card-description]{font-size:11px;line-height:1.6;color:#7b8f86}.maia-stat-value{font-size:30px;font-weight:550;letter-spacing:-.04em;color:#0f766e;line-height:1.2}
.dashboard-stats{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px}.dashboard-chart,.dashboard-report{padding:24px;margin-bottom:20px}.dashboard-chart h3,.dashboard-report h3{padding-bottom:16px;border-bottom:1px solid #e2e9e7}.report-table th{background:#edf4f1;color:#45655c}.report-table td,.report-table th{border-color:#c9d5d0;padding:11px}
.report-warning,.lesson-review{border:1px solid #e8cc92;background:#fff9ea;color:#896324;border-radius:12px;font-size:12px;padding:12px 16px}
.knowledge-section{margin-top:26px}.knowledge-section > h3{font-size:17px;margin-bottom:14px}.knowledge-list{gap:12px}.knowledge-lesson{border-color:#e0e8e5;border-radius:18px}.knowledge-lesson > summary{padding:20px 22px;color:#294440}.knowledge-lesson > summary:hover,.knowledge-lesson[open] > summary{background:#f4faf7}.knowledge-lesson summary b{font-size:15px;font-weight:550}.knowledge-lesson summary small{font-size:12px;color:#84948f}.lesson-content{padding:4px 22px 22px;border-color:#e2e9e7;font-size:13px}.lesson-content h4{font-size:13px}.lesson-sources{color:#84948f}
.settings-grid{gap:20px}.settings-grid .card{padding:26px}.settings-grid h3{font-size:17px;margin-bottom:12px}.settings-grid p,.queue-item p{font-size:12px;line-height:1.8}.settings-grid button{margin-right:6px;margin-bottom:8px}.queue-item{padding:24px;margin-bottom:14px}.pill{border-radius:999px;background:#e6f3ed;color:#0f766e;border:1px solid #bcdbd0;font-size:11px;font-weight:500}
#maia-notice{margin-bottom:18px}#maia-notice [data-slot=alert]{border-radius:14px;border:1px solid #bcdbd0;background:#eff8f4}#maia-notice [data-slot=alert-description]{font-size:12px;color:inherit}
footer{font-size:10px;background:transparent;color:#8ba096;border-top:1px solid #e2e9e7;padding:18px 28px}
.gate{background:radial-gradient(ellipse at 20% 10%,#dceee7 0,transparent 55%),radial-gradient(ellipse at 90% 100%,#e6efed 0,transparent 50%),#f7faf8}
.login{padding:38px!important;max-width:450px;border-radius:28px;border:1px solid #e0e8e5;box-shadow:0 18px 65px #123c2c08;gap:16px}.login .brand{width:68px;height:68px;border-radius:20px}.login h1{font-size:30px;font-weight:550}.login p{font-size:13px;line-height:1.7}.login .eyebrow{font-size:10px;margin-top:8px}.login label{font-size:12px;gap:7px}.login input{height:43px;border-radius:12px;background:#fff;font-size:14px}.login .primary{height:44px;font-size:14px;margin-top:5px}.login small{font-size:11px}
/* A persistent shadcn Dialog hosts the original validated form and its listeners. */
#modal[data-maia-managed=true]{display:none!important}
[data-slot=dialog-overlay]{background:#071c1880;backdrop-filter:blur(3px);z-index:1100}
.elestra-modal[data-slot=dialog-content]{width:min(680px,calc(100vw - 32px));max-width:680px;max-height:calc(100dvh - 32px);border-radius:28px;padding:26px;gap:0;background:white;z-index:1101;box-shadow:0 24px 80px #04181029;overflow:auto}
[data-slot=dialog-content][data-closed],[data-slot=dialog-overlay][data-closed]{display:none!important}
.elestra-modal [data-slot=dialog-title]{font-size:20px;font-weight:600;line-height:1.4;padding-right:24px;letter-spacing:-.02em}
.elestra-modal #modal-form > .dialog-head{display:none}.elestra-modal #modal-body{margin-top:20px;font-size:13px}.elestra-modal #modal-body label{font-size:12px}.elestra-modal #modal-body input,.elestra-modal #modal-body select{min-height:36px}.elestra-modal .dialog-actions{border-top:1px solid #e2e9e7;padding-top:16px;margin-top:20px}.elestra-modal .dialog-actions button{min-height:36px;font-size:12px}.elestra-modal #modal-error{color:#b34040;font-size:12px;margin-top:10px}
.elestra-modal.employee-editor{width:min(820px,calc(100vw - 32px));max-width:820px}.elestra-modal.employee-editor [data-editor-panel]{min-height:200px}.elestra-modal.employee-editor #modal-body label{display:flex;flex-direction:column;gap:5px;margin:0;line-height:16px}.elestra-modal.employee-editor #modal-body input{width:100%;height:36px;padding:7px 10px;font-size:13px}.elestra-modal.employee-editor #modal-body textarea{width:100%;height:82px;min-height:82px;padding:7px 10px;resize:none;font-size:13px;line-height:1.4}
.employee-editor-tabs{display:flex;gap:4px;border:0;background:#eaf1ed;border-radius:999px;padding:4px;margin-bottom:20px}.employee-editor-tabs button{flex:1;background:transparent;border:0;border-radius:999px;font-size:12px;padding:9px 12px;box-shadow:none;color:#73877e}.employee-editor-tabs button[aria-selected=true]{background:#fff;color:#0f766e;box-shadow:0 1px 4px #173b3010}.employee-action-menu button{border-color:#d8e2df;border-radius:14px;padding:14px 16px}
#calendar button.selected{background:#0f766e;color:#fff;border-color:#0f766e}
@media(max-width:1100px){#workspace > header{padding:12px 18px}.app-content main{padding:20px}.section-head{flex-wrap:wrap}.section-head .actions{justify-content:flex-start}}
@media(max-width:1000px){.app-shell,.sidebar-collapsed .app-shell{grid-template-columns:minmax(0,1fr)}.sidebar{width:238px}.sidebar-collapsed .sidebar{display:none}}
@media(max-width:700px){.app-content main{padding:16px}.section-head h2{font-size:23px}.dashboard-stats{grid-template-columns:1fr 1fr}.filter-bar select{max-width:none;flex:1 1 170px}.filter-search{max-width:none}.schedule-edit-note{display:none}.schedule-group-toolbar .actions{width:100%}#maia-schedule-groups [data-slot=tabs-trigger]{font-size:11px;padding:8px 10px}.brand-subtitle{font-size:10px}}
@media(max-width:520px){#workspace > header{padding:12px 16px;min-height:125px}#maia-top-actions{width:100%;justify-content:flex-start}.maia-account[data-slot=badge]{max-width:100%;flex:1}.section-head .actions{width:100%}.elestra-modal[data-slot=dialog-content]{padding:20px;border-radius:20px}}
@media(max-height:600px){.elestra-modal.employee-editor{padding:16px}.elestra-modal.employee-editor #modal-body{margin-top:10px}.elestra-modal.employee-editor .employee-editor-tabs{margin-bottom:10px}.elestra-modal.employee-editor .employee-editor-grid{gap:8px 12px}.elestra-modal.employee-editor [data-editor-panel]{min-height:158px}.elestra-modal.employee-editor #modal-body input{height:30px;min-height:30px}.elestra-modal.employee-editor #modal-body textarea{height:64px;min-height:64px}.elestra-modal.employee-editor .dialog-actions{margin-top:12px;padding-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{#maia-navigation,#maia-top-actions,#maia-schedule-groups,#maia-notice,#maia-dialog-root,[data-slot=dialog-overlay],[data-slot=dialog-content]{display:none!important}.app-content main{padding:0}.table-wrap{max-height:none;overflow:visible}.schedule-grid .holiday-cell,.schedule-grid .holiday-head{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
/* Maia tables: calm headers and spacious reports; the schedule keeps its fitted grid. */
.table-wrap{border-radius:18px;border-color:#b8c8c0;box-shadow:0 2px 5px #163e2b04}
.data-grid thead th{background:#f3f6f4;color:#53685f;letter-spacing:0;font-weight:550;border-bottom-color:#b8c8c0}
.schedule-grid thead th.name,.schedule-grid thead th.row-no,.employees-grid th:first-child,.employees-grid th:nth-child(2),.employees-grid th:last-child{background:#f3f6f4}
.data-grid tbody td{font-variant-numeric:tabular-nums}
.data-grid .person-name{font-weight:550}
.schedule-grid td.hours-kjk{background:#e8f5ef;color:#0f766e;font-weight:650}
.schedule-grid td.hours-total,.schedule-grid td.hours-normal{background:#f7faf8}
.schedule-grid tbody tr:hover td.name,.schedule-grid tbody tr:hover td.row-no,.employees-grid tbody tr:hover td{background:#eff6f2}
.schedule-grid th.holiday-head{background:#f4a66f;color:#20170e}
.schedule-grid .holiday-head small{color:#49301d}
.employees-grid th,.employees-grid td{padding-top:13px;padding-bottom:13px}
.employees-grid th{height:46px;vertical-align:middle}
.maia-report-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;color:#29443b;font-family:Inter,Arial,sans-serif}
.maia-report-table [data-slot=table-head]{padding:13px 16px;height:46px;background:#f3f6f4;color:#64796f;font-size:11px;font-weight:550;text-align:left;border-bottom:1px solid #b8c8c0;border-right:1px solid #d4ded8;white-space:nowrap}
.maia-report-table [data-slot=table-cell]{padding:13px 16px;border-bottom:1px solid #d4ded8;border-right:1px solid #d4ded8;white-space:normal;vertical-align:middle;line-height:1.6}
.maia-report-table th:last-child,.maia-report-table td:last-child{border-right:0}
.maia-report-table tbody tr:last-child td{border-bottom:0}
.maia-report-table tbody tr:hover{background:#f3f8f5}
.maia-report-table .numeric{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.maia-report-table .maia-table-empty{text-align:center;color:#87988e;padding:32px}
.dashboard-chart,.dashboard-report{border-radius:22px;border-color:#e0e8e5;box-shadow:0 2px 5px #163e2b04}
.dashboard-chart h3,.dashboard-report h3{font-size:16px;font-weight:550;letter-spacing:-.02em;border:0;padding:0;margin:0 0 18px}
.dashboard-chart details{margin-top:18px;border-top:1px solid #e2e9e7;padding-top:14px}
.dashboard-chart details > summary{font-size:12px;color:#0f766e;cursor:pointer;font-weight:500;width:fit-content;padding:4px 0}
.dashboard-chart details[open] > summary{margin-bottom:12px}
.maia-chart-subtitle{font-size:11px;color:#7d9187;margin:-9px 0 20px}
.maia-report-chart[data-slot=chart]{width:100%;height:280px;min-height:280px;aspect-ratio:auto;font-family:Inter,Arial,sans-serif}
.maia-report-chart svg{overflow:visible}
.maia-report-chart .recharts-cartesian-axis-tick-value{font-family:Inter,Arial,sans-serif;font-size:10px;fill:#83958b}
.maia-report-chart [data-slot=chart-tooltip]{border-radius:12px;background:#fff;border:1px solid #d5e2db;box-shadow:0 8px 24px #173b3014}
.maia-chart-help{font-size:10px;color:#8b9d92;margin-top:12px;line-height:1.7}
@media(max-width:700px){.maia-report-table [data-slot=table-head],.maia-report-table [data-slot=table-cell]{padding:10px 12px}.maia-report-chart[data-slot=chart]{height:250px;min-height:250px}}
@media print{.maia-chart-help{display:none}.dashboard-report,.dashboard-chart{box-shadow:none}.maia-report-table{font-size:10px}.maia-report-table td,.maia-report-table th{padding:7px!important}.schedule-grid td.hours-kjk{print-color-adjust:exact}}
/* v4.13.2: green leave matrix, gray weekend headers, crisp black table grid. */
:root{--grid:#000}
.matrix-grid thead th{background:#edf7f1;color:#245c43}
.matrix-grid th.quota-head,.matrix-grid th.remain-head,.matrix-grid td.quota{background:#ddf3e5;color:#166534}
.matrix-grid th.current-month{background:#bce8cd;color:#14532d}
.matrix-grid td.month-soft{background:#dcfce7;color:#166534}
.matrix-grid td.month-strong{background:#15803d;color:#fff}
.matrix-grid .month-soft .cell-action:hover{background:#bbf7d0;color:#14532d;box-shadow:inset 0 0 0 2px #16a34a}
.matrix-grid .month-strong .cell-action:hover{background:#166534;color:#fff;box-shadow:inset 0 0 0 2px #14532d}
.matrix-grid .cell-action:focus-visible{outline-color:#15803d}
.matrix-grid .balance-ok{background:#dcfce7;color:#166534}
.schedule-grid thead th.weekend-head{background:#bfc4ca;color:#111}
.schedule-grid thead th.weekend-head small{color:#30363d}
/* A confirmed holiday takes precedence when it falls on a weekend. */
.schedule-grid thead th.holiday-head{background:#f4a66f;color:#20170e}
.schedule-grid thead th.holiday-head small{color:#49301d}
.table-wrap,.data-grid th,.data-grid td,.maia-report-table,.maia-report-table [data-slot=table-head],.maia-report-table [data-slot=table-cell]{border-color:#000}
.employees-grid th:nth-child(2),.employees-grid td:nth-child(2){box-shadow:1px 0 #000}
.employees-grid th:last-child,.employees-grid td:last-child{box-shadow:-1px 0 #000}
@media print{.matrix-grid .month-soft,.matrix-grid .month-strong,.matrix-grid thead th,.schedule-grid th.weekend-head{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* v4.14 — quieter workspace, unified actions and account menu. */
.brand{background:transparent!important;box-shadow:none!important;border:0!important}.brand img{object-fit:contain}
#view-schedule .filter-bar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,320px)}
#view-schedule .filter-bar .filter-search{max-width:none;min-width:0}#view-schedule .filter-bar select{max-width:none;width:100%}
.dashboard-actions{align-items:flex-end!important;gap:12px!important}.dashboard-actions label{margin:0}.dashboard-actions input,.dashboard-actions [data-slot=dropdown-menu-trigger]{height:40px;min-height:40px}
#maia-dashboard-download,#maia-schedule-actions{display:flex;align-items:center}#maia-schedule-actions{margin-top:16px}.schedule-settings-card label{display:grid;gap:7px;margin-top:16px}.schedule-settings-card select{width:100%}
#maia-top-actions{display:flex;align-items:center;gap:16px;margin-left:auto;flex-shrink:0}.profile-trigger{display:flex;align-items:center;gap:12px!important;height:auto!important;min-height:52px;padding:6px 10px!important;border-radius:16px!important;text-align:left}.profile-avatar{width:40px;height:40px;border-radius:50%;background:#d1fae5;color:#0f766e;display:grid;place-items:center;font-size:14px;font-weight:650;flex:none}.profile-label{display:flex;flex-direction:column;gap:3px;max-width:240px}.profile-label strong{font-size:12px;font-weight:650;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-label small{font-size:11px;color:#64796f;line-height:1.4}.notification-trigger{position:relative;overflow:visible!important;width:40px!important;height:40px!important}.notification-count{position:absolute;top:0;right:-3px;min-width:18px;height:18px;border-radius:999px;padding:0 4px;background:#dc4444;color:#fff;font-size:10px;line-height:18px;text-align:center;border:1px solid #fff}
.elestra-menu,.notification-panel{font-family:Inter,Arial,sans-serif;color:#29443b;background:#fff;border:1px solid #dce7e1;box-shadow:0 12px 42px #183a2b1a;z-index:100!important}.elestra-menu{min-width:220px}.elestra-menu [data-slot=dropdown-menu-item]{cursor:pointer;padding:10px 12px;font-size:13px}.elestra-menu [data-highlighted]{background:#e7f6ee;color:#0f766e}.profile-menu-summary{display:flex;flex-direction:column;gap:4px;padding:10px 12px;max-width:320px;overflow-wrap:anywhere}.profile-menu-summary strong{font-size:13px}.profile-menu-summary span{font-size:12px;color:#64796f}
.notification-panel{width:min(380px,calc(100vw - 32px));padding:20px;border-radius:20px;display:flex;flex-direction:column;gap:12px}.notification-list{max-height:min(380px,55vh);overflow-y:auto}.notification-item{display:flex;flex-direction:column;gap:5px;width:100%;text-align:left;border:0;border-bottom:1px solid #e0e8e5;padding:12px;border-radius:10px;background:white;color:#29443b;cursor:pointer}.notification-item.is-unread{background:#eefaf3}.notification-item:hover{background:#dff3e9}.notification-item strong{font-size:12px}.notification-item span,.notification-empty{font-size:12px;line-height:1.6}.notification-item small{color:#0f766e;font-size:10px}.notification-footnote{font-size:10px;color:#64796f;margin:0}.profile-details{display:grid;gap:16px}.profile-details p{margin:0;overflow-wrap:anywhere}
#dashboard-person-maia{max-height:none;min-width:0;max-width:100%;overflow:visible}.recap-description{font-size:12px;color:#64796f;margin:0 0 14px}.recap-window{position:relative;border-radius:14px;overflow:hidden}.recap-window.is-preview{max-height:270px}.recap-window.is-preview::after{content:'';position:absolute;bottom:0;left:0;right:0;height:22px;background:linear-gradient(transparent,#fff);pointer-events:none}.recap-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:12px;color:#64796f}
@media(max-width:900px){.profile-label{max-width:150px}#maia-top-actions{gap:8px}.brand-subtitle{max-width:260px}}
@media(max-width:640px){.profile-label{display:none}.profile-trigger{gap:5px!important;padding:4px!important}.profile-avatar{width:34px;height:34px}.profile-trigger>svg{width:14px}#maia-top-actions{gap:4px}#view-schedule .filter-bar{grid-template-columns:1fr}.dashboard-actions{width:100%}.dashboard-actions>label{flex:1}.dashboard-actions input{width:100%}.recap-footer{flex-wrap:wrap}}
@media print{#maia-top-actions,#maia-dashboard-download,#maia-schedule-actions{display:none!important}.recap-window.is-preview{max-height:none}.recap-window.is-preview::after{display:none}}

/* v4.14.1 — contain the expanded recap and keep popup layers above tables. */
#dashboard-body,.dashboard-report,.dashboard-chart{min-width:0;max-width:100%}
.recap-window{width:100%;min-width:0;max-width:100%;isolation:isolate}
.recap-window.is-expanded{max-height:min(480px,60dvh);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.recap-window.is-expanded [data-slot=table-container]{overflow:visible}
.recap-window .maia-report-table{table-layout:fixed;min-width:0;width:100%}
.recap-window .maia-report-table th,.recap-window .maia-report-table td{white-space:normal;overflow-wrap:anywhere;padding:11px 12px}
.recap-window .maia-report-table th:nth-child(1),.recap-window .maia-report-table th:nth-child(2){width:24%}
.recap-window .maia-report-table th:nth-child(n+3){width:8.666%}
.recap-window.is-expanded [data-slot=table-header]{position:sticky;top:0;z-index:2;background:#f3f6f4}
[data-slot=dropdown-menu-positioner],[data-slot=popover-positioner]{z-index:1000}
.elestra-menu,.notification-panel{max-width:calc(100vw - 24px);max-height:min(var(--available-height,80dvh),80dvh)}
@media(max-width:640px){.recap-window .maia-report-table th,.recap-window .maia-report-table td{padding:8px 5px;font-size:10px}.recap-window.is-expanded{max-height:55dvh}}
@media print{#dashboard-person-maia,.recap-window.is-expanded{max-height:none;overflow:visible}.recap-window.is-expanded [data-slot=table-header]{position:static}}

/* v4.15 — visible cross-tab sync and partial-read diagnostics. */
.digita-sync-status{padding:14px 18px;border:1px solid #b8dccc;background:#effaf4;color:#205744;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.7;margin-bottom:20px}.digita-sync-status.error{border-color:#e8bd89;background:#fff8e9;color:#79511d}

/* Digita request cards: aligned statuses and a separate removal action. */
#queue .queue-item{display:grid;grid-template-columns:minmax(0,1fr) 372px;align-items:center;gap:24px;padding:24px;margin-bottom:16px}
.queue-main{min-width:0}.queue-heading{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.queue-heading h3{font-size:15px;margin:0;overflow-wrap:anywhere}.queue-request-status{font-size:11px;color:#0f766e;background:#eef8f4;border:1px solid #cfe7dd;padding:4px 9px;border-radius:8px}
.queue-meta{margin:7px 0 14px!important;font-size:11px!important}.queue-details{display:grid;gap:10px;margin:0}.queue-details>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px}.queue-details dt{font-size:11px;color:var(--muted);font-weight:500}.queue-details dd{font-size:12px;margin:0;overflow-wrap:anywhere;line-height:1.6}.queue-details dd span{display:block}.queue-verified{display:block;margin-top:14px;color:#64827a;font-size:10px}
.queue-controls{display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:center;gap:14px;min-width:0}.queue-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.queue-step{display:grid;gap:8px;min-width:0}.queue-step-label{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;text-align:center}
.queue-status-grid .queue-badge,.queue-status-grid button:not([data-slot]){display:flex;align-items:center;justify-content:center;min-height:42px;width:100%;margin:0;padding:9px 10px;border-radius:10px;border:1px solid #dbe5e1;font-size:11px;line-height:1.4;font-weight:500;text-align:center;overflow-wrap:anywhere}
.queue-success{color:#0f766e;background:#e8f5ef;border-color:#bdded0!important}.queue-neutral{color:#62746e;background:#f5f8f7}.queue-status-grid button:not([data-slot]){background:#0f766e;color:#fff;border-color:#0f766e}.queue-status-grid button:not([data-slot]):hover{background:#115e59;color:#fff}
.queue-controls button.queue-remove:not([data-slot]){width:36px;height:36px;min-width:36px;padding:0;margin-top:20px;border-radius:10px;font-size:20px;line-height:1;color:#7a8b85}.queue-controls button.queue-remove:not([data-slot]):hover{background:#fff1f2;border-color:#fecdd3;color:#b4233a}
@media(max-width:1100px){#queue .queue-item{grid-template-columns:minmax(0,1fr);gap:20px}.queue-controls{padding-top:16px;border-top:1px solid #e4ece8}.queue-status-grid{max-width:460px}}
@media(max-width:520px){#queue .queue-item{padding:18px;gap:16px}.queue-details>div{grid-template-columns:minmax(0,1fr);gap:2px}.queue-controls{gap:8px}.queue-status-grid{gap:8px}.queue-status-grid .queue-badge,.queue-status-grid button:not([data-slot]){font-size:10px;min-height:44px;padding:8px 6px}}
/* Activity colors are independent of shift codes, so swapped rest days are also visible. */
.schedule-grid td.activity-backup:not(.shift-sick):not(.shift-leave),.schedule-grid td.activity-swap:not(.shift-sick):not(.shift-leave){background:#ffd335!important;color:#111!important}
.schedule-grid td.activity-covered,.schedule-grid td.activity-backup.shift-sick,.schedule-grid td.activity-backup.shift-leave,.schedule-grid td.activity-swap.shift-sick,.schedule-grid td.activity-swap.shift-leave{box-shadow:none}
#swap-queue{display:grid;gap:16px;margin-bottom:24px}#swap-preview{margin-top:16px}#swap-preview .table-wrap{max-height:280px}#swap-queue .queue-controls{align-content:start}

/* Compact integration list: detail actions appear only on explicit expansion. */
.digita-toolbar{display:flex;align-items:flex-end;gap:20px;margin:20px 0}.digita-toolbar label{display:grid;gap:8px;flex:1;max-width:620px;font-size:12px}.digita-toolbar input{width:100%;min-width:0}.digita-toolbar>span{font-size:12px;color:#64796f;padding-bottom:12px}
#queue,#swap-queue{display:grid;gap:0;border:1px solid #dbe5e1;border-radius:16px;overflow:hidden;margin-bottom:24px}.digita-record+.digita-record{border-top:1px solid #dbe5e1}.digita-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(140px,.7fr) auto;gap:16px;align-items:center;padding:14px 18px;background:#fff}.digita-person,.digita-status{display:grid;gap:5px;min-width:0}.digita-person strong{font-size:13px;font-weight:600;overflow-wrap:anywhere}.digita-person small,.digita-status small,.digita-dates{font-size:11px;color:#64796f;overflow-wrap:anywhere}.digita-status .queue-request-status{justify-self:start}.digita-row>button{font-size:12px;min-width:70px}.digita-detail{padding:8px 18px 18px;background:#f6faf8}.digita-detail[hidden]{display:none!important}#queue .digita-detail .queue-item,#swap-queue .digita-detail .queue-item{margin:0;padding:18px;border-radius:12px}.digita-detail .table-wrap{max-width:100%;overflow:auto}#view-digita details.audit>summary{cursor:pointer;font-size:13px;font-weight:600}
@media(max-width:700px){.digita-toolbar{align-items:stretch;flex-direction:column;gap:6px}.digita-toolbar>span{padding:0}.digita-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px}.digita-dates{grid-column:1}.digita-status{grid-column:1;grid-row:3}.digita-row>button{grid-column:2;grid-row:1 / span 3}.digita-detail{padding:8px}.digita-detail .queue-details>div{grid-template-columns:1fr}}

/* Calendar selection shares the teal Maia palette. */
.schedule-month-control{display:grid;gap:7px}.schedule-month-control>span{font-size:12px;color:#64796f}.calendar-nav{display:flex;align-items:center;justify-content:space-between;margin:18px 0 12px;gap:12px}.calendar-nav button{min-width:38px;font-size:20px}.month-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.month-grid button{padding:18px 8px;white-space:normal}.day-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.day-label{text-align:center;font-size:11px;color:#64796f;padding:6px}.day-calendar button{min-width:0;min-height:52px;padding:7px 3px;display:grid;place-content:center;gap:4px;border-radius:12px;font-size:12px}.day-calendar button small{font-size:10px}.month-grid button[aria-pressed=true],.day-calendar button[aria-pressed=true]{background:#0f766e!important;color:white!important;border-color:#0f766e!important}.month-grid button:disabled,.day-calendar button:disabled{background:#f1f5f3;color:#94a39b;opacity:.65;cursor:not-allowed}.day-calendar button:not(:disabled):hover,.month-grid button:not(:disabled):hover{box-shadow:inset 0 0 0 2px #0f766e}.day-calendar button:focus-visible,.month-grid button:focus-visible{outline:3px solid #0f766e;outline-offset:2px}#swap-shift-options button{margin-right:8px}#schedule-edit-comment[readonly]{background:#eff6f3;color:#29443b}
@media(max-width:480px){.day-calendar{gap:3px}.day-calendar button{min-height:46px;border-radius:8px}.month-grid{gap:6px}}

.digita-list-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px 18px;border-top:1px solid #dbe5e1;background:#f7faf8;font-size:12px;color:#64796f}.digita-list-footer button{font-size:12px}

/* v4.23: the table owns its border; summary and actions sit outside it. */
#dashboard-person-maia.table-wrap{border:0;border-radius:0;background:transparent;box-shadow:none;padding:0;overflow:visible}.recap-description{margin:0 0 14px;line-height:1.6}.recap-window{border:1px solid #000;border-radius:12px}.recap-window.is-preview{max-height:none}.recap-window.is-preview::after{display:none}.recap-footer{padding:4px 0;margin-top:14px}.recap-window .maia-report-table th:first-child{width:26%}.recap-window .maia-report-table th:nth-child(2){width:24%}.recap-window .maia-report-table th:nth-child(n+3){width:10%}.recap-window .maia-report-table th,.recap-window .maia-report-table td{vertical-align:middle;line-height:1.5}.notification-panel button.notification-item{background:#fff!important;border-radius:0!important;box-shadow:none!important;border:0;border-bottom:1px solid #e0e8e5;padding:14px 10px;min-height:0}.notification-panel button.notification-item:hover{background:#fafcfb!important}.notification-panel .notification-item.is-unread strong{color:#0f766e}.import-sheet{display:flex!important;align-items:center;gap:9px;margin:12px 0}.import-sheet input{width:auto!important;flex:0 0 auto}.import-change-list{max-height:240px;overflow:auto;border:1px solid #dbe5e1;border-radius:10px}.import-change-list table{font-size:11px}.import-change-list th{position:sticky;top:0}


/* Elestra • Pemburu Kuda — v4.25 Round 3 Revisions */
.sidebar-label, .brand-subtitle { display: none !important; }

/* Aesthetic Brand Typography: Plus Jakarta Sans + Outfit */
.brand-title {
  margin: 0 !important;
  font-family: 'Plus Jakarta Sans', 'Outfit', Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}
.brand-title .brand-main {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #133934 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.brand-title .brand-dot {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #14b8a6 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.brand-title .brand-sub {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #0f766e !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Left Sidebar Bold + Larger Font + Teal Pill Gradient when Active */
.sidebar { padding: 20px 14px 18px !important; }
.maia-nav, .sidebar nav { display: flex; flex-direction: column; gap: 8px !important; }
.maia-nav-item[data-slot=button], .sidebar nav button {
  width: 100%;
  justify-content: flex-start;
  padding: 11px 18px !important;
  height: 46px !important;
  gap: 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #3f5853 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease !important;
}
.maia-nav-item[data-slot=button]:hover, .sidebar nav button:hover {
  background: #eaf5f2 !important;
  color: #0f766e !important;
}
.maia-nav-item.is-active[data-slot=button], .maia-nav-item.active, .sidebar nav button.active {
  background: linear-gradient(90deg, #14b8a6 0%, #0d9488 52%, #0f766e 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.maia-nav-item[data-slot=button] svg, .sidebar nav button svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2 !important;
  flex-shrink: 0;
}
.sidebar-collapsed .maia-nav-item[data-slot=button], .sidebar-collapsed .sidebar nav button {
  padding: 11px !important;
  justify-content: center !important;
}

/* Leave Matrix locked cells shaded/hatched (diarsir saja, tanpa icon gembok) */
.data-grid td.lock, .matrix-grid td.lock {
  background: repeating-linear-gradient(135deg, #f1f5f4 0px, #f1f5f4 5px, #cbd8d4 5px, #cbd8d4 7px) !important;
  color: #647b75;
}

/* Keep Detail Ketidakhadiran table header sticky when scrolling */
#dashboard-detail-maia [data-slot=table-header], #dashboard-detail-maia thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f3f6f4;
}

/* Tools Hub Specific Styles */
.tools-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tools-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tools-view-switch { display: inline-flex; background: #e6efec; padding: 4px; border-radius: 999px; gap: 4px; flex-shrink: 0; height: 36px; align-items: center; }
.tools-view-switch button { border: 0 !important; background: transparent !important; color: #5c756f !important; font-size: 12px; padding: 5px 13px !important; min-height: 28px !important; height: 28px !important; border-radius: 999px !important; font-weight: 600; }
.tools-view-switch button.selected { background: #ffffff !important; color: #0f766e !important; box-shadow: 0 1px 4px rgba(15, 118, 110, 0.14) !important; font-weight: 700; }

.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 18px; margin-top: 12px; }
.tool-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 20px; border: 1px solid #dce6e3; background: #ffffff; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; position: relative; }
.tool-card:hover { border-color: #99c8be; box-shadow: 0 10px 26px -10px rgba(15, 118, 110, 0.12); }
.tool-card.is-favorite { border-color: #0f766e; box-shadow: inset 0 0 0 1px #0f766e1a, 0 6px 20px -8px rgba(15, 118, 110, 0.12); }

.tool-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tool-card-top-actions { display: flex; align-items: center; gap: 6px; }

/* Symmetrical Favorite Star Button & Column */
.tools-table th.tool-fav-col,
.tools-table td.tool-fav-col {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  padding: 10px 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.tool-th-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #45655c;
  vertical-align: middle;
}
.tool-icon-btn, .tool-fav-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border: 1px solid #d8e4e0 !important;
  background: #f8fbfa !important;
  color: #647b75 !important;
  vertical-align: middle !important;
}
.tool-icon-btn svg, .tool-fav-btn svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  flex-shrink: 0;
}
.tool-icon-btn:hover, .tool-fav-btn:hover { background: #edf7f4 !important; color: #0f766e !important; border-color: #99c8be !important; }
.tool-icon-btn.is-fav, .tool-fav-btn.is-fav { background: #fffbeb !important; color: #d97706 !important; border-color: #fcd34d !important; }

.tool-card-title-row h3 { font-size: 18px; font-weight: 700; color: #182c2a; margin: 0; letter-spacing: -0.02em; }
.tool-desc { margin: 0; font-size: 12px; line-height: 1.55; color: #647b75; }

.tool-url-box { background: #f6faf9; border: 1px solid #e0eae7; border-radius: 13px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.tool-url-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tool-field-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; color: #608079; text-transform: uppercase; }
.tool-url-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tool-url-link { font-size: 12px; font-weight: 600; color: #0f766e; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tool-url-link:hover { text-decoration: underline; color: #115e59; }

.tool-creds-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.tool-cred-box { background: #ffffff; border: 1px solid #d8e4e0; border-radius: 13px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tool-cred-box.is-revealed { background: #f0fdf9; border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12); }
.tool-cred-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tool-copy-link { border: 0 !important; background: transparent !important; padding: 0 !important; font-size: 11px; font-weight: 600; color: #0f766e !important; cursor: pointer; white-space: nowrap; }
.tool-copy-link:hover { text-decoration: underline; color: #115e59 !important; }
.tool-copy-link.is-copied, .tool-mini-btn.is-copied { color: #15803d !important; font-weight: 700; }

.tool-cred-value { display: flex; align-items: center; min-height: 30px; padding: 4px 8px; background: #f5f9f8; border-radius: 8px; cursor: pointer; overflow: hidden; }
.tool-cred-value:hover { background: #eaf4f1; }
.tool-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12.5px; font-weight: 600; color: #182c2a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-mono.is-muted, .tool-code-val.is-muted { color: #6c7b78; font-weight: 500; font-style: italic; }

.tool-pass-reveal-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 4px 9px !important; border-radius: 8px !important; border: 1px dashed #b4ccc5 !important; background: #f5f9f8 !important; color: #182c2a !important; cursor: pointer; text-align: left; }
.tool-pass-reveal-trigger:hover { border-color: #0f766e !important; background: #eaf4f1 !important; }
.tool-pass-reveal-trigger.is-revealed { border-style: solid !important; border-color: #0d9488 !important; background: #ffffff !important; user-select: all; }
.tool-pass-text { letter-spacing: 0.03em; color: #0f766e; }
.tool-reveal-badge { font-size: 10px; font-weight: 600; color: #56736c; background: #e3efec; padding: 2px 7px; border-radius: 999px; flex-shrink: 0; }
.tool-pass-reveal-trigger.is-revealed .tool-reveal-badge { background: #ccfbf1; color: #0f766e; }

.tool-card-footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
.tool-smart-launch { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; font-size: 12.5px; font-weight: 600; border-radius: 999px !important; }
.tool-open-only-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border-radius: 999px; border: 1px solid #d0deda; background: #ffffff; color: #294440; font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.tool-open-only-btn:hover { background: #edf7f4; border-color: #99c8be; color: #115e59; }

.tool-mini-btn { padding: 4px 10px !important; font-size: 11px !important; min-height: 26px !important; border-radius: 999px !important; white-space: nowrap; }
.tools-table th, .tools-table td { padding: 10px 12px; height: auto; vertical-align: middle; }
.tool-table-name { display: block; font-size: 13.5px; font-weight: 700; color: #182c2a; margin: 0; }
.tool-inline-cred { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.tool-code-val { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; background: #f3f8f6; padding: 3px 8px; border-radius: 6px; }
.tool-pass-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px !important; border-radius: 8px !important; border: 1px dashed #b4ccc5 !important; background: #f6faf9 !important; font-size: 12px; }
.tool-pass-pill.is-revealed { border-style: solid !important; border-color: #0f766e !important; background: #ecfdf5 !important; }
.tool-pass-eye { font-size: 10px; color: #607d76; }
.tool-table-actions { display: flex; align-items: center; justify-content: center; gap: 6px; }
.tool-launch-btn { font-size: 11.5px !important; padding: 6px 12px !important; }
.tool-modal-extra-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #d8e2df; }

@media (max-width: 760px) {
  .tools-grid { grid-template-columns: 1fr; }
  .tool-creds-grid { grid-template-columns: 1fr; }
  .tool-card-footer { flex-direction: column; align-items: stretch; }
  .tool-open-only-btn { text-align: center; }
}

/* v4.26: match numeric cells; name buttons retain their existing alignment. */
#schedule-table .hours-total,#schedule-table .hours-normal,#schedule-table .hours-kjk,
#schedule-table thead th:nth-last-child(-n+3){text-align:center;vertical-align:middle}
#schedule-table .hours-kjk .kjk-value{display:flex;align-items:center;justify-content:center;width:100%;min-height:26px;padding:0;margin:0;text-align:center;font:inherit;color:inherit;line-height:1.25;white-space:nowrap;overflow-wrap:normal;font-variant-numeric:tabular-nums}
#schedule-table .hours-kjk .kjk-value:focus-visible{outline:2px solid #0f766e;outline-offset:-2px;border-radius:4px}
.kjk-breakdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 18px}
.kjk-breakdown>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:74px;padding:10px 6px;background:#f0fdfa;border:1px solid #cdece5;border-radius:10px;text-align:center}
.kjk-breakdown span{font-size:11px;line-height:1.35;color:#526963}.kjk-breakdown b{font-size:21px;font-variant-numeric:tabular-nums;color:#0f766e}
.kjk-source-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.kjk-preview-wrap{max-height:320px;overflow:auto}.kjk-preview{width:100%;border-collapse:collapse}.kjk-preview th,.kjk-preview td{padding:8px;border:1px solid #a3bdb6;text-align:center}.kjk-preview th{background:#f0fdfa;position:sticky;top:0}.kjk-preview td:first-child{text-align:left}
@media(max-width:520px){.kjk-breakdown{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.kjk-breakdown>div{min-height:58px}}


/* ============================================================================
   Clean Schedule Header & Footer + Rolled-Back Solid Table Header +
   1-Column Hover + Modern Pastel Shift Pills (v4.30)
   ============================================================================ */
#view-schedule .schedule-clean-head {
  margin-bottom: 14px !important;
  align-items: center !important;
}
#view-schedule .schedule-clean-head h2 {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: #133934 !important;
  margin: 0 !important;
}
#view-schedule .schedule-group-heading,
#view-schedule .schedule-edit-note {
  display: none !important;
}
#view-schedule .filter-bar {
  margin-bottom: 12px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
}
#view-schedule .schedule-group-toolbar {
  margin-bottom: 10px !important;
}
#view-schedule .schedule-clean-legend {
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 12px !important;
  gap: 12px !important;
  font-size: 11px !important;
}

/* Clean Footer Bar below Schedule Table */
.schedule-clean-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 11.5px;
  color: #64748b;
}
.schedule-clean-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.schedule-clean-summary .norm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #0f766e;
  border: 1px solid #a7f3d0;
  font-weight: 600;
  font-size: 11px;
}
.schedule-clean-audit {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.schedule-audit-details {
  position: relative;
}
.schedule-audit-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
}
.schedule-audit-details > summary::-webkit-details-marker { display: none; }
.schedule-audit-details > summary:hover {
  background: #f1f5f9;
  color: #0f766e;
  border-color: #99c8be;
}
.schedule-audit-popover {
  margin-top: 8px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12);
  font-size: 11.5px;
  max-width: 520px;
}

/* Schedule Table Container: Horizontal Scroll + Frozen Left (NO & Nama) & Frozen Right (KJK) */
#schedule-table.table-wrap {
  border: 1px solid #cbd5e1 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px -2px rgba(15, 23, 42, 0.05) !important;
  background: #ffffff !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}
.schedule-grid.modern-calendar-grid {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: max-content !important;
  min-width: 100% !important;
  table-layout: auto !important;
  background: #ffffff !important;
}
.schedule-grid.modern-calendar-grid col.col-no { width: 38px !important; min-width: 38px !important; }
.schedule-grid.modern-calendar-grid col.col-person { width: 225px !important; min-width: 225px !important; }
.schedule-grid.modern-calendar-grid col.col-day { width: 42px !important; min-width: 42px !important; }
.schedule-grid.modern-calendar-grid col.col-hours { width: 68px !important; min-width: 68px !important; }

/* Rolled-Back Solid Table Header (<thead>) — 100% Opaque, Never Transparent on Scroll */
.schedule-grid.modern-calendar-grid thead th {
  background: #f3f6f4 !important;
  color: #45655c !important;
  border-right: 1px solid #d4ded8 !important;
  border-bottom: 1px solid #b8c8c0 !important;
  padding: 6px 4px !important;
  height: 42px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  vertical-align: middle !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 6 !important;
}
.schedule-grid.modern-calendar-grid thead th:last-child {
  border-right: 0 !important;
}
.schedule-grid.modern-calendar-grid thead th.day-head {
  min-width: 42px !important;
  width: 42px !important;
  text-align: center !important;
}
.schedule-grid.modern-calendar-grid thead th.day-head small {
  display: block !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
  color: #64796f !important;
  line-height: 1 !important;
}
/* Solid Gray Weekend Header (Rolled Back) */
.schedule-grid.modern-calendar-grid thead th.weekend-head {
  background: #cfd6dc !important;
  color: #1e293b !important;
}
.schedule-grid.modern-calendar-grid thead th.weekend-head small {
  color: #334155 !important;
}
/* Solid Pink National Holiday Header (Tanpa garis horizontal di atas) */
.schedule-grid th.holiday-head,
.schedule-grid thead th.holiday-head,
.schedule-grid.modern-calendar-grid thead th.holiday-head {
  background: #fce7f3 !important;
  color: #9d174d !important;
  box-shadow: none !important;
}
.schedule-grid.modern-calendar-grid thead th.holiday-head small {
  color: #be185d !important;
  font-weight: 600 !important;
}
/* Solid Opaque Today Header (Fixes Transparency Bug in Video!) */
.schedule-grid.modern-calendar-grid thead th.current-date {
  background: #d1fae5 !important;
  color: #065f46 !important;
  box-shadow: inset 0 3px 0 #0d9488 !important;
  font-weight: 700 !important;
}
.schedule-grid.modern-calendar-grid thead th.current-date small {
  color: #0f766e !important;
  font-weight: 700 !important;
}

/* 1-Column Hover Effect (Especially for Today / Hovered Date Column) */
.schedule-grid.modern-calendar-grid thead th.day-head.is-col-hover:not(.weekend-head):not(.holiday-head):not(.current-date) {
  background: #e6f4f1 !important;
}
.schedule-grid.modern-calendar-grid thead th.current-date.is-col-hover,
.schedule-grid.modern-calendar-grid thead th.current-date:hover {
  background: #a7f3d0 !important;
  box-shadow: inset 0 3px 0 #0f766e, inset 1.5px 0 0 #0d9488, inset -1.5px 0 0 #0d9488 !important;
}
.schedule-grid.modern-calendar-grid td.shift-cell.current-date-col {
  background: #ffffff !important;
  box-shadow: inset 1px 0 0 #a7f3d0, inset -1px 0 0 #a7f3d0 !important;
}
.schedule-grid.modern-calendar-grid td.shift-cell.is-col-hover {
  background: #f0fdfa !important;
  box-shadow: inset 1.5px 0 0 #2dd4bf, inset -1.5px 0 0 #2dd4bf !important;
}
.schedule-grid.modern-calendar-grid td.shift-cell.current-date-col.is-col-hover {
  background: #ecfdf5 !important;
  box-shadow: inset 1.5px 0 0 #0d9488, inset -1.5px 0 0 #0d9488 !important;
}

/* Frozen Left Column 1: NO */
.schedule-grid.modern-calendar-grid thead th.col-no-head {
  position: sticky !important;
  left: 0 !important;
  z-index: 9 !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  text-align: center !important;
  background: #f3f6f4 !important;
}
.schedule-grid.modern-calendar-grid td.col-no-cell {
  position: sticky !important;
  left: 0 !important;
  z-index: 4 !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  text-align: center !important;
  padding: 5px 4px !important;
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

/* Frozen Left Column 2: NAMA PERSONEL & FUNGSI */
.schedule-grid.modern-calendar-grid thead th.person-slot-head {
  position: sticky !important;
  left: 38px !important;
  z-index: 9 !important;
  text-align: left !important;
  padding: 6px 14px !important;
  width: 225px !important;
  min-width: 225px !important;
  max-width: 245px !important;
  background: #f3f6f4 !important;
  border-right: 1px solid #cbd5e1 !important;
  box-shadow: 3px 0 8px -3px rgba(15, 23, 42, 0.08) !important;
}
.schedule-grid.modern-calendar-grid td.person-slot-cell {
  position: sticky !important;
  left: 38px !important;
  z-index: 4 !important;
  text-align: left !important;
  padding: 5px 14px !important;
  width: 225px !important;
  min-width: 225px !important;
  max-width: 245px !important;
  background: #ffffff !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  box-shadow: 3px 0 8px -3px rgba(15, 23, 42, 0.06) !important;
}

/* Frozen Right Column: KJK */
.schedule-grid.modern-calendar-grid thead th.kjk-head {
  position: sticky !important;
  right: 0 !important;
  z-index: 9 !important;
  width: 66px !important;
  min-width: 66px !important;
  text-align: center !important;
  padding: 6px 8px !important;
  background: #e8f5ef !important;
  color: #0f766e !important;
  border-left: 1px solid #cbd5e1 !important;
  box-shadow: -3px 0 8px -3px rgba(15, 23, 42, 0.08) !important;
}
.schedule-grid.modern-calendar-grid td.hours-kjk {
  position: sticky !important;
  right: 0 !important;
  z-index: 4 !important;
  width: 66px !important;
  min-width: 66px !important;
  text-align: center !important;
  padding: 5px 8px !important;
  background: #ffffff !important;
  border-left: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  box-shadow: -3px 0 8px -3px rgba(15, 23, 42, 0.06) !important;
}

.schedule-grid.modern-calendar-grid tbody tr:hover td.col-no-cell,
.schedule-grid.modern-calendar-grid tbody tr:hover td.person-slot-cell,
.schedule-grid.modern-calendar-grid tbody tr:hover td.hours-kjk {
  background: #f8fafc !important;
}

.person-slot-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.person-row-num {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.person-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.person-meta .person-name {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.person-meta .person-func {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.person-meta .person-shift-tag {
  color: #0f766e;
  font-weight: 600;
}

/* Override legacy yellow full-cell background from maia-theme.css */
.schedule-grid.modern-calendar-grid td.shift-cell,
.schedule-grid.modern-calendar-grid td.activity-backup:not(.shift-sick):not(.shift-leave),
.schedule-grid.modern-calendar-grid td.activity-swap:not(.shift-sick):not(.shift-leave),
.schedule-grid.modern-calendar-grid td.shift-double {
  background: #ffffff !important;
  border-right: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 5px 3px !important;
  text-align: center !important;
  vertical-align: middle !important;
  position: relative;
}
/* Holiday Cell Tanpa Garis Horizontal (menghapus box-shadow inset 0 3px #e97c26) */
.schedule-grid td.holiday-cell,
.schedule-grid.modern-calendar-grid td.shift-cell.holiday-cell {
  background: #fdf2f8 !important;
  box-shadow: none !important;
}

/* Rounded Pastel Pill Tiles inside each Day Cell */
.schedule-grid.modern-calendar-grid .shift-pill {
  width: 34px !important;
  height: 30px !important;
  min-width: 34px !important;
  min-height: 30px !important;
  padding: 0 2px !important;
  margin: 0 auto !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.schedule-grid.modern-calendar-grid .shift-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.10);
}
.shift-pill.pill-p, .legend .code.pill-p {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
}
.shift-pill.pill-s, .legend .code.pill-s {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}
.shift-pill.pill-m, .legend .code.pill-m {
  background: #ede9fe !important;
  color: #6d28d9 !important;
  border: 1px solid #ddd6fe !important;
}
.shift-pill.pill-n, .legend .code.pill-n {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}
.shift-pill.pill-sw {
  background: #ccfbf1 !important;
  color: #0f766e !important;
  border: 1px solid #99f6e4 !important;
}
.shift-pill.shift-off, .legend .code.off {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 600 !important;
}
/* National Holiday Pill in Pink */
.schedule-grid.modern-calendar-grid td.holiday-cell .shift-pill.shift-off,
.shift-pill.pill-holiday,
.legend .code.pill-holiday {
  background: #fce7f3 !important;
  color: #be185d !important;
  border: 1px solid #f472b6 !important;
  font-weight: 700 !important;
}
/* Double Shift / Backup in Warm Orange/Brown (Without ⇄ Icon) */
.shift-pill.shift-double,
.shift-pill.shift-backup,
.legend .code.double {
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%) !important;
  color: #9a3412 !important;
  border: 1.5px solid #ea580c !important;
  box-shadow: 0 1px 3px rgba(234, 88, 12, 0.18) !important;
}
.shift-pill.shift-leave, .legend .code.leave {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.24);
}
.shift-pill.shift-sick, .legend .code.sick {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
}
.shift-pill.shift-empty {
  background: #f8fafc !important;
  color: #cbd5e1 !important;
  border: 1px dashed #e2e8f0 !important;
  font-weight: 500 !important;
}
.shift-pill .comment-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ef4444;
}
.schedule-grid.modern-calendar-grid td.hours-total,
.schedule-grid.modern-calendar-grid td.hours-normal {
  padding: 5px 8px !important;
  min-width: 68px !important;
  text-align: center !important;
  font-weight: 600 !important;
  border-right: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
}
.schedule-grid.modern-calendar-grid td.hours-total {
  border-left: 1px solid #cbd5e1 !important;
}
.hours-bal-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #0f766e;
  background: #ccfbf1;
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 3px;
}
.kjk-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e8f5ef;
  color: #0f766e;
  font-weight: 700;
  font-size: 12px;
}

/* ============================================================================
   Helpdesk Response & Coordination Template Hub Styles
   ============================================================================ */
.template-vars-bar {
  margin-bottom: 16px;
  padding: 14px 18px !important;
  background: linear-gradient(180deg, #f4faf7 0%, #ffffff 100%) !important;
  border: 1px solid #bcdbd0 !important;
}
.template-vars-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #115e59;
}
.template-vars-head span {
  color: #5c756f;
  flex: 1;
}
.template-vars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 8px;
}
.template-vars-grid input {
  height: 35px;
  font-size: 12px;
  border-radius: 10px;
  background: #ffffff;
}
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}
.template-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px !important;
  border-radius: 18px !important;
  border: 1px solid #dce6e3 !important;
  background: #ffffff !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.template-card:hover {
  border-color: #99c8be !important;
  box-shadow: 0 8px 24px -10px rgba(15, 118, 110, 0.14) !important;
}
.template-card.is-favorite {
  border-color: #0f766e !important;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12), 0 6px 20px -8px rgba(15, 118, 110, 0.14) !important;
}
.template-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.template-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  margin-bottom: 5px;
}
.template-cat-email { background: #e0f2fe; color: #0369a1; }
.template-cat-sd { background: #fef3c7; color: #b45309; }
.template-cat-log { background: #ede9fe; color: #6d28d9; }
.template-subject-box {
  background: #f6faf9;
  border: 1px solid #e0eae7;
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.template-subject-text {
  font-weight: 600;
  color: #182c2a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-body-preview {
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  background: #f8fbfa;
  border: 1px solid #e2ece9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: #1e293b;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 210px;
  overflow-y: auto;
  flex: 1;
}
.template-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.template-copy-main {
  flex: 1;
  min-height: 36px;
  font-weight: 600;
}
.template-copy-main.is-copied {
  background: #15803d !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

/* ============================================================================
   Inventory Perangkat Kantor CC YGY (SPV & Koordinator Only — 3 View Modes)
   ============================================================================ */
.inventory-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.inv-kpi-card {
  background: #ffffff;
  border: 1px solid #dce6e3;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}
.inv-kpi-card span {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}
.inv-kpi-card b {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f766e;
}
.inv-kpi-card small {
  font-size: 10.5px;
  color: #6c7b78;
}
.inv-cond-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.inv-cond-good { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.inv-cond-maint { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.inv-cond-broken { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.inv-cond-spare { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }

.inv-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
}
.inv-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}
.inv-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1px solid #dce6e3 !important;
  background: #ffffff !important;
}
.inv-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.inv-tag-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: #0f766e;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 6px;
}
.inv-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11.5px;
}
.inv-spec-grid div span {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
}
.inv-spec-grid div b {
  color: #1e293b;
  font-weight: 600;
}
.inv-zone-section {
  margin-bottom: 18px;
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1px solid #dce6e3 !important;
  background: #ffffff !important;
}
.inv-zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.inv-zone-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}
.inv-zone-item {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ============================================================================
   Knowledge Management — Interactive Huawei CLI Studio & Node Decoder (v4.33)
   ============================================================================ */
.hw-studio-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 22px;
}
.hw-hero-card {
  border: 1px solid #bcdbd0 !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #f2fbf8 0%, #ffffff 100%) !important;
  padding: 22px !important;
  box-shadow: 0 4px 16px -4px rgba(15, 118, 110, 0.08) !important;
}
.hw-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.hw-vendor-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.hw-role-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hw-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
}
.hw-role-pill b {
  color: #0f766e;
}
.hw-node-anatomy-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .hw-node-anatomy-grid {
    grid-template-columns: 1fr;
  }
}
.hw-node-box {
  background: #ffffff;
  border: 1px solid #dce6e3;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hw-node-visual {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
}
.hw-node-seg {
  flex: 1 1 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border-radius: 12px;
  text-align: center;
  border: 1.5px solid transparent;
}
.hw-node-seg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.hw-node-seg span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.hw-node-seg small {
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.3;
}
.hw-seg-city { background: #e0f2fe; border-color: #7dd3fc; color: #0369a1; }
.hw-seg-pop  { background: #fef3c7; border-color: #fcd34d; color: #b45309; }
.hw-seg-ven  { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.hw-seg-num  { background: #dcfce7; border-color: #86efac; color: #15803d; }

.hw-service-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .hw-service-roles { grid-template-columns: 1fr; }
}
.hw-service-card {
  padding: 12px 14px;
  border-radius: 13px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hw-service-card .hw-layer-tag {
  display: inline-block;
  width: fit-content;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.hw-layer-l2 { background: #ede9fe; color: #6d28d9; }
.hw-layer-l3 { background: #ccfbf1; color: #0f766e; }

.hw-cmd-builder-card {
  border: 1px solid #dce6e3 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  padding: 22px !important;
}
.hw-vars-bar {
  background: #f4faf7;
  border: 1px solid #bcdbd0;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.hw-vars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.hw-vars-grid label {
  font-size: 11px;
  font-weight: 700;
  color: #133934;
  gap: 4px;
}
.hw-vars-grid input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  height: 36px;
  background: #ffffff;
  border: 1px solid #99c8be;
}
.hw-steps-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.hw-step-card {
  border: 1px solid #dce6e3;
  border-radius: 16px;
  padding: 16px 18px;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hw-step-card:hover {
  border-color: #0f766e;
  box-shadow: 0 6px 20px -10px rgba(15, 118, 110, 0.15);
}
.hw-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.hw-step-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hw-step-num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #0f766e;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hw-cmd-line-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #0f172a;
  color: #f8fafc;
  padding: 11px 14px;
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  overflow-x: auto;
  margin-bottom: 10px;
}
.hw-cmd-line-box code {
  color: #38bdf8;
  font-weight: 700;
  white-space: nowrap;
}
.hw-cmd-line-box .hw-prompt {
  color: #94a3b8;
  margin-right: 8px;
  user-select: none;
}
.hw-copy-cmd-btn {
  background: #0f766e !important;
  border-color: #14b8a6 !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  min-height: 30px !important;
  flex-shrink: 0;
}
.hw-copy-cmd-btn:hover {
  background: #0d9488 !important;
}
.hw-copy-cmd-btn.is-copied {
  background: #15803d !important;
  border-color: #22c55e !important;
}
.hw-output-details {
  margin-top: 8px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 8px;
}
.hw-output-details > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #0f766e;
  user-select: none;
}
.hw-terminal-pre {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}
.hw-terminal-pre .hl-val {
  background: rgba(20, 184, 166, 0.28);
  color: #5eead4;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 700;
}
.hw-takeaway-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.hw-takeaway-chip {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}
.hw-takeaway-chip b {
  color: #0f766e;
}



/* ==========================================================================
   Elestra v4.27 — Menu Command (6 Perangkat) & Menu POP Lintasarta (1.285 POP)
   ========================================================================== */
.cmd-knowledge-shortcut-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #f0fdf9 0%, #f8fafc 100%);
  border: 1.5px solid #99f6e4;
  border-radius: 16px;
  flex-wrap: wrap;
}
.cmd-knowledge-shortcut-info strong {
  display: block;
  font-size: 15px;
  color: #0f3f38;
  margin: 2px 0 4px;
}
.cmd-knowledge-shortcut-info p {
  margin: 0;
  font-size: 13px;
  color: #334155;
  max-width: 720px;
}
.cmd-knowledge-shortcut-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Command Devices Directory Grid */
.cmd-devices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.cmd-device-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  background: #ffffff;
  border: 1px solid #d7e3df;
  border-radius: 16px;
}
.cmd-device-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(15, 63, 56, 0.16);
  border-color: #0f766e;
}
.cmd-device-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.cmd-vendor-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.cmd-count-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: #0f766e;
  background: #f0fdf9;
  border: 1px solid #99f6e4;
  padding: 3px 10px;
  border-radius: 999px;
}
.cmd-device-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.cmd-device-card-title h3 {
  margin: 0;
  font-size: 19px;
  color: #0f3f38;
}
.cmd-layer-pill, .cmd-cli-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 3px 9px;
  border-radius: 8px;
}
.cmd-device-card-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}
.cmd-device-card-nodes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  flex-wrap: wrap;
}
.cmd-node-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cmd-node-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 800;
  color: #0f766e;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 3px 8px;
  border-radius: 6px;
}
.cmd-device-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #eef2f6;
}
.cmd-cli-hint {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
}

/* Command Detail View */
.cmd-detail-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cmd-detail-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #d7e3df;
  border-radius: 14px;
}
.cmd-back-btn {
  font-weight: 700;
  color: #0f3f38;
  background: #f0fdf9;
  border: 1px solid #99f6e4;
}
.cmd-device-switcher {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cmd-switch-chip {
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-weight: 700;
  cursor: pointer;
}
.cmd-switch-chip.is-active {
  background: #0f766e;
  color: #ffffff;
  border-color: #0f766e;
}
.cmd-switch-chip small {
  opacity: 0.85;
  font-weight: 600;
}
.cmd-device-hero {
  padding: 20px 22px;
}
.cmd-device-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cmd-hero-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.cmd-device-hero h2 {
  margin: 0 0 6px;
  font-size: 22px;
  color: #0f3f38;
}
.cmd-hero-summary {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #334155;
  max-width: 820px;
}
.cmd-hero-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}
.cmd-hero-nodes-box, .cmd-hero-notes-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
}
.cmd-example-nodes-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cmd-node-chip-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 4px 8px;
  border-radius: 10px;
}
.cmd-role-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.5;
}
.cmd-vars-panel {
  padding: 18px 20px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1.5px solid #cbd5e1;
}
.cmd-vars-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cmd-vars-top h4 {
  margin: 2px 0 0;
  font-size: 15px;
  color: #0f3f38;
}
.cmd-submode-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cmd-mode-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
}
.cmd-mode-pill.is-active {
  background: #0f766e;
  color: #ffffff;
  border-color: #0f766e;
}
.cmd-vars-subbox {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
}
.cmd-vars-subhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 13px;
  color: #0f3f38;
}
.cmd-inline-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
}
.cmd-vars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.cmd-vars-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
}
.cmd-vars-grid input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
}
.cmd-group-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cmd-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cmd-group-header h3 {
  margin: 0;
  font-size: 16px;
  color: #0f3f38;
}
.cmd-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cmd-step-card {
  padding: 14px 18px;
  border: 1px solid #d7e3df;
  border-radius: 14px;
  background: #ffffff;
}
.cmd-step-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cmd-step-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cmd-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.cmd-step-title-wrap h4 {
  margin: 0 0 2px;
  font-size: 14.5px;
  color: #0f3f38;
}
.cmd-template-label {
  font-size: 11.5px;
  color: #64748b;
}
.cmd-template-label code {
  color: #0f766e;
  font-weight: 700;
}
.cmd-terminal-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0f172a;
  color: #f8fafc;
  padding: 11px 14px;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  overflow-x: auto;
}
.cmd-prompt {
  color: #38bdf8;
  font-weight: 700;
  user-select: none;
  flex-shrink: 0;
}
.cmd-live-code {
  color: #4ade80;
  font-weight: 700;
  white-space: pre-wrap;
  word-break: break-all;
}
.cmd-alt-terminal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 7px 11px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
}
.cmd-alt-badge {
  font-weight: 700;
  color: #475569;
}
.cmd-step-desc {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
}
.cmd-quick-match-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  flex-wrap: wrap;
}
.cmd-quick-match-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cmd-quick-match-actions {
  display: flex;
  gap: 6px;
}

/* POP Lintasarta View */
.pop-sheet-link-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 10px;
  background: #f0fdf9;
  border: 1px solid #99f6e4;
  color: #0f766e;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}
.pop-sheet-link-btn:hover {
  background: #ccfbf1;
}
.pop-anatomy-card {
  padding: 20px 22px;
  border-top: 4px solid #0f766e;
}
.pop-anatomy-head h3 {
  margin: 2px 0 4px;
  font-size: 18px;
  color: #0f3f38;
}
.pop-anatomy-head p {
  margin: 0 0 14px;
  font-size: 13px;
  color: #475569;
}
.pop-decoder-controls {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 16px;
  align-items: end;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 14px;
}
@media (max-width: 820px) {
  .pop-decoder-controls {
    grid-template-columns: 1fr;
  }
}
.pop-decoder-input-wrap label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0f766e;
  margin-bottom: 4px;
  display: block;
}
.pop-decoder-input-wrap input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0f3f38;
}
.pop-preset-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.pop-matched-detail-card {
  margin-top: 14px;
  padding: 16px 18px;
  background: #f0fdf9;
  border: 1.5px solid #99f6e4;
  border-radius: 14px;
}
.pop-matched-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #bbf7d0;
}
.pop-found-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  color: #047857;
  background: #d1fae5;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.pop-matched-head h4 {
  margin: 4px 0 0;
  font-size: 16px;
  color: #064e3b;
}
.pop-matched-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pop-matched-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 14px;
  font-size: 12.5px;
}
.pop-matched-grid strong {
  display: block;
  color: #0f3f38;
  margin-top: 2px;
}
.pop-sublocs-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pop-subloc-pill, .pop-subloc-mini {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
}
.pop-unmatched-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  font-size: 12.5px;
  color: #92400e;
}
.pop-device-codes-guide {
  margin-top: 14px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.pop-device-codes-guide summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 12.5px;
  color: #0f3f38;
}
.pop-device-codes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.pop-devcode-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
}
.pop-devcode-item p {
  margin: 6px 0 8px;
  color: #475569;
  line-height: 1.4;
}
.pop-region-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  margin-top: 2px;
}

/* ==========================================================================
   Elestra v4.27 Revision — POP Lintasarta Visual Segmen (Screenshot 1 + 3)
   ========================================================================== */
.pop-clean-input-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.pop-clean-input-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  margin: 0;
}
.pop-clean-node-input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f172a !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pop-clean-node-input:focus {
  outline: none !important;
  border-color: #0f766e !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14) !important;
}
.pop-preset-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.pop-decoder-visual-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pop-decoder-visual-wrap .hw-node-visual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .pop-decoder-visual-wrap .hw-node-visual {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .pop-decoder-visual-wrap .hw-node-visual {
    grid-template-columns: 1fr;
  }
}
.pop-decoder-visual-wrap .hw-node-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  border-radius: 14px;
  text-align: center;
  border: 1.5px solid transparent;
  min-height: 108px;
}
.pop-decoder-visual-wrap .hw-node-seg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  background: transparent;
  border: none;
  padding: 0;
}
.pop-decoder-visual-wrap .hw-node-seg span {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.pop-decoder-visual-wrap .hw-node-seg small {
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.35;
  color: #475569;
}
.pop-decoder-visual-wrap .hw-seg-city {
  background: #e8f5ff;
  border-color: #93c5fd;
  color: #0369a1;
}
.pop-decoder-visual-wrap .hw-seg-pop {
  background: #fef9c3;
  border-color: #fde047;
  color: #a16207;
}
.pop-decoder-visual-wrap .hw-seg-ven {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.pop-decoder-visual-wrap .hw-seg-num {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}
.hw-node-summary {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #334155;
}
.pop-suggestions-bar {
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}
.pop-device-codes-guide {
  margin-top: 4px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.pop-device-codes-guide summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  color: #0f3f38;
  user-select: none;
}
.pop-device-codes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.pop-devcode-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pop-devcode-item.is-active-devcode {
  border-color: #0f766e;
  background: #f0fdf9;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.1);
}
.pop-devcode-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pop-devcode-head > div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pop-try-code-btn {
  font-size: 10.5px !important;
  padding: 2px 7px !important;
  min-height: 22px !important;
}
.pop-open-cmd-btn {
  width: fit-content;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-weight: 700 !important;
}


/* Example Command & Output Preview on Device Directory Cards */
.cmd-card-sample-box {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.45;
  border: 1px solid #1e293b;
  overflow-x: auto;
}
.cmd-card-sample-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 5px;
}
.cmd-card-sample-line {
  color: #f8fafc;
  font-weight: 700;
  white-space: nowrap;
}
.cmd-card-sample-line .p-node {
  color: #34d399;
  margin-right: 6px;
}
.cmd-card-sample-out {
  color: #94a3b8;
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px dashed #334155;
  white-space: nowrap;
}
.cmd-card-sample-out b {
  color: #fde047;
  font-weight: 700;
}

/* Interactive Node Preset Chips & Output Terminal Block */
.cmd-node-chip-group.is-active {
  border-color: #0f766e;
  background: #f0fdf9;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.14);
}
.cmd-node-use-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f3f38;
  cursor: pointer;
}
.cmd-node-use-btn.is-active {
  background: #0f766e;
  color: #ffffff;
  border-color: #0f766e;
}
.cmd-output-details {
  margin-top: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  overflow: hidden;
}
.cmd-output-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #0f3f38;
  background: #f1f5f9;
  user-select: none;
  list-style: none;
}
.cmd-output-summary::-webkit-details-marker {
  display: none;
}
.cmd-output-summary-left {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cmd-output-badge {
  font-size: 10.5px;
  font-weight: 800;
  color: #0f766e;
  background: #ccfbf1;
  border: 1px solid #99f6e4;
  padding: 2px 8px;
  border-radius: 999px;
}
.cmd-output-body {
  padding: 10px 12px 12px;
  background: #0b1120;
  color: #cbd5e1;
  border-top: 1px solid #1e293b;
}
.cmd-output-pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #e2e8f0;
  white-space: pre;
  overflow-x: auto;
}
.cmd-output-pre .hl-cmd {
  color: #38bdf8;
  font-weight: 700;
}
.cmd-output-pre .hl-val {
  color: #fde047;
  background: rgba(250, 204, 21, 0.16);
  border: 1px solid rgba(250, 204, 21, 0.38);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 800;
}
.cmd-output-pre .hl-ok {
  color: #4ade80;
  font-weight: 800;
}
.cmd-takeaways-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed #334155;
}
.cmd-takeaway-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #ecfdf5;
  background: rgba(15, 118, 110, 0.35);
  border: 1px solid rgba(45, 212, 191, 0.4);
  padding: 3px 9px;
  border-radius: 6px;
}
.cmd-takeaway-chip b {
  color: #5eead4;
}


/* Priority Recheck & Manual Apply Controls (v4.33) */
.queue-priority-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  padding: 2px 8px;
  border-radius: 999px;
}
.btn-force-approve {
  background: #0d7a5f !important;
  color: #ffffff !important;
  border-color: #0d7a5f !important;
  font-weight: 600;
}
.btn-force-approve:hover {
  background: #095c47 !important;
}
.queue-reapply {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
}
.queue-reapply:hover {
  background: #ecfdf5;
  border-color: #0d7a5f;
  color: #065f46;
}


/* ============================================================================
   v4.28 Visual Refinements: Login, Schedule, Dashboard, Employee
   ============================================================================ */

/* 1. Login Screen: Side-by-side Brand & 7 Blooming Green Snowflakes (25% opacity) */
#gate.gate {
  position: relative !important;
  overflow: hidden !important;
}
.gate-snowflakes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.gate-snowflake {
  position: absolute;
  color: #10b981;
  opacity: 0;
  pointer-events: none;
  transform-origin: center center;
  animation: snowflakeBloom 7.2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.25));
}
.gate-snowflake svg {
  width: 100%;
  height: 100%;
  display: block;
}
.gate-snowflake.sf-1 { width: 96px; height: 96px; top: 12%; left: 10%; animation-delay: 0s; animation-duration: 6.8s; }
.gate-snowflake.sf-2 { width: 132px; height: 132px; top: 15%; left: 78%; animation-delay: 0.9s; animation-duration: 7.9s; color: #059669; }
.gate-snowflake.sf-3 { width: 72px; height: 72px; top: 48%; left: 8%; animation-delay: 1.7s; animation-duration: 6.2s; color: #14b8a6; }
.gate-snowflake.sf-4 { width: 118px; height: 118px; top: 52%; left: 82%; animation-delay: 2.4s; animation-duration: 8.4s; }
.gate-snowflake.sf-5 { width: 84px; height: 84px; top: 76%; left: 16%; animation-delay: 3.1s; animation-duration: 7.1s; color: #0d9488; }
.gate-snowflake.sf-6 { width: 140px; height: 140px; top: 74%; left: 74%; animation-delay: 1.3s; animation-duration: 8.8s; color: #10b981; }
.gate-snowflake.sf-7 { width: 64px; height: 64px; top: 22%; left: 46%; animation-delay: 2.8s; animation-duration: 6.5s; color: #059669; }

@keyframes snowflakeBloom {
  0% {
    transform: scale(0.15) rotate(0deg);
    opacity: 0;
  }
  35% {
    transform: scale(0.92) rotate(40deg);
    opacity: 0.25;
  }
  65% {
    transform: scale(1.06) rotate(75deg);
    opacity: 0.25;
  }
  100% {
    transform: scale(1.26) rotate(115deg);
    opacity: 0;
  }
}

#login.login {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px);
}
.login-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}
.login .login-brand-row .brand {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  flex-shrink: 0;
}
.login .login-brand-row .brand-title {
  flex-wrap: wrap;
}

/* 2. Schedule: ON/OFF Distinct Colors for OH & Middle and Shift 24 Jam */
#view-schedule .schedule-clean-head {
  margin-bottom: 10px !important;
  min-height: 0 !important;
}
#maia-schedule-groups [data-slot=tabs-list],
.schedule-group-switch {
  background: #f1f5f9 !important;
  padding: 5px !important;
  border-radius: 999px !important;
  border: 1px solid #cbd5e1 !important;
  gap: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
}
#maia-schedule-groups [data-slot=tabs-trigger],
.schedule-group-switch button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  background: #e2e8f0 !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08) !important;
  font-weight: 600 !important;
  transition: all 0.18s ease !important;
}
#maia-schedule-groups [data-slot=tabs-trigger]::before,
.schedule-group-switch button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
#maia-schedule-groups [data-slot=tabs-trigger][data-active],
#maia-schedule-groups [data-slot=tabs-trigger][aria-selected="true"],
.schedule-group-switch button[aria-pressed="true"],
.schedule-group-switch button.selected {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid #047857 !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35) !important;
  font-weight: 700 !important;
}
#maia-schedule-groups [data-slot=tabs-trigger][data-active]::before,
#maia-schedule-groups [data-slot=tabs-trigger][aria-selected="true"]::before,
.schedule-group-switch button[aria-pressed="true"]::before,
.schedule-group-switch button.selected::before {
  background: #ecfdf5;
  box-shadow: 0 0 6px #ffffff;
}

/* 3. Dashboard: Clean header, Schedule-style month selector, Icon-only Download */
#view-dashboard .dashboard-clean-head {
  margin-bottom: 14px !important;
  align-items: flex-end !important;
}
#dashboard-definition {
  display: none !important;
}
#maia-dashboard-download [data-slot=dropdown-menu-trigger],
#maia-dashboard-download button {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 4. Employee: Clean header without title block */
#view-employees .employees-clean-head {
  margin-bottom: 14px !important;
  align-items: center !important;
}