:root{
  --green:#16834a;--green-dark:#0b6034;--green-pale:#eaf6ee;
  --ink:#1e293b;--muted:#64748b;--line:#dce5df;--bg:#f3f6f4;
  --white:#fff;--gold:#e7bd4f;--danger:#b42318;--shadow:0 8px 28px rgba(20,54,34,.07);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.45}
.topbar{background:linear-gradient(105deg,#12b34a 0%,#38b94c 32%,#f4d34c 67%,#9dca5c 100%);color:white;padding:8px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 4px 14px rgba(8,65,34,.16)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{font-weight:900;font-size:30px;letter-spacing:-2px;line-height:1;color:#fff;border-bottom:4px solid var(--gold);padding-bottom:3px}
.brand-copy{font-size:11px;letter-spacing:1.4px;font-weight:800;line-height:1.25}
.brand-logo-wrap{background:transparent;border-radius:0;padding:0;display:flex;align-items:center;flex:0 0 auto}
.brand-logo{display:block;width:165px;max-width:100%;max-height:52px;height:auto;object-fit:contain;filter:brightness(0) invert(1)}
.language-control{display:flex;flex-direction:column;gap:4px;min-width:160px}
.language-control label{font-size:11px;color:#fff;margin:0;font-weight:700}
.language-control select{width:100%;min-width:160px;padding:8px 10px;border:1px solid rgba(255,255,255,.35);border-radius:8px;background:#fff;color:#1e293b;font-size:12px}
.top-title{text-align:center;flex:1;min-width:220px}
.top-title strong{display:block;font-size:clamp(17px,1.45vw,21px);font-weight:800;line-height:1.25}
.container{max-width:1440px;margin:0 auto;padding:24px}
.intro{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}
.intro h1{font-size:25px;margin:0 0 5px}
.intro p{margin:0;color:var(--muted);font-size:14px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:var(--green-pale);color:var(--green-dark);font-size:12px;font-weight:700;white-space:nowrap}
.dot{height:7px;width:7px;border-radius:50%;background:var(--green)}
.layout{display:grid;grid-template-columns:minmax(350px, .9fr) minmax(500px,1.1fr);gap:20px;align-items:start}
.screen-tabs{display:flex;gap:8px;margin:0 0 18px;padding:5px;background:#e8eee9;border-radius:12px;width:max-content;max-width:100%}
.screen-tab{background:transparent;color:#526158;border:1px solid transparent;padding:10px 16px;border-radius:8px}
.screen-tab.active{background:#fff;color:var(--green-dark);border-color:#d6e2d9;box-shadow:0 2px 7px rgba(20,54,34,.06)}
.screen-view[hidden]{display:none!important}
.status-badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:800}
.status-badge.complete{background:#eaf6ee;color:#17663a}
.status-badge.pending{background:#fff4df;color:#935c00}
.status-filter{max-width:170px;min-width:145px;padding:8px 10px}
.panel{background:white;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.panel-head{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-head h2{font-size:16px;margin:0}
.welding-records-heading{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}.welding-panel-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.welding-icon-btn{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.panel-head p{font-size:12px;color:var(--muted);margin:3px 0 0}
.panel-body{padding:20px}
.section-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--green-dark);font-weight:800;margin:0 0 12px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{min-width:0}
.field.full{grid-column:1/-1}
label{display:block;font-size:12px;font-weight:700;margin-bottom:6px;color:#344054}
label .sub{display:block;color:#8a96a5;font-size:11px;font-weight:400;margin-top:2px}
input,textarea,select{font-family:inherit;font-size:13px;width:100%;padding:11px 12px;border:1px solid #cfd9d2;border-radius:9px;background:#fff;color:var(--ink);outline:none;transition:border .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,131,74,.11)}
input[type="file"]{padding:9px;font-size:12px;background:#f9fbf9}
textarea{resize:vertical;min-height:76px}
.divider{height:1px;background:#edf1ee;margin:21px 0}
.upload-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.upload-box{border:1px dashed #b9cbbf;border-radius:12px;padding:12px;background:#fbfdfb;min-width:0}
.upload-box .upload-title{font-size:12px;font-weight:700;margin:0 0 8px}
.upload-preview{width:100%;height:130px;border-radius:8px;background:#f0f4f1;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:9px;color:#8b9a90;font-size:12px;text-align:center;padding:8px}
.upload-preview img{width:100%;height:100%;object-fit:contain}
.upload-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mini-btn{border:0;background:transparent;color:var(--danger);font-size:11px;cursor:pointer;padding:4px}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
button{font-family:inherit;cursor:pointer;border:0;border-radius:9px;padding:11px 15px;font-size:12px;font-weight:700;transition:transform .12s,opacity .12s}
button:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:white}
.btn-primary:hover{background:var(--green-dark)}
.btn-outline{background:#fff;color:#344054;border:1px solid #cfd9d2}
.btn-soft{background:var(--green-pale);color:var(--green-dark)}
.btn-danger{background:#fff1f0;color:var(--danger)}
.btn-small{padding:7px 9px;font-size:11px}
.status{margin-top:12px;padding:10px 12px;background:#f1f8f3;border-radius:8px;font-size:12px;color:var(--green-dark);display:none}
.preview-panel{position:sticky;top:18px}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.preview-toolbar .subtle{font-size:11px;color:var(--muted);font-weight:400}
.paper-wrap{padding:18px;background:#f4f6f4}
.paper{background:#fff;border:1px solid #d4ddd6;padding:18px;box-shadow:0 4px 16px rgba(0,0,0,.04);overflow:hidden}
 .nota-form-row{display:flex;justify-content:flex-start;gap:12px;padding-bottom:16px;margin-bottom:17px;border-bottom:1px solid #edf1ee}
.nota-form-row .field{width:100%;max-width:245px}
.paper-nota{border-left:1px solid #333;min-height:55px;padding:8px 10px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;text-align:center;font-size:11px}
.paper-nota strong{font-size:12px;overflow-wrap:anywhere;max-width:100%}
.paper-head{display:grid;grid-template-columns:27% 48% 25%;align-items:center;border:1px solid #333;min-height:55px}
.paper-brand{padding:8px 10px;display:flex;align-items:center;gap:8px}
.paper-brand-mark{font-size:31px;line-height:1;font-weight:900;color:#3da66b;letter-spacing:-2px;border-bottom:3px solid var(--gold)}
.paper-brand-copy{font-size:9px;line-height:1.2;font-weight:800;letter-spacing:1px;color:#24864b}
.paper-brand{padding:7px 10px;display:flex;align-items:center;justify-content:center;background:#fff}
.paper-logo{display:block;width:100%;max-width:175px;max-height:48px;object-fit:contain}
.server-alert{margin:0 0 16px;padding:12px 14px;border:1px solid #efc5a7;background:#fff7ed;color:#9a3412;border-radius:10px;font-size:13px}
body[data-lang="zh"] .sub,body[data-lang="zh"] .muted-cn{display:none!important}
.paper-title{text-align:center;font-size:16px;font-weight:700;padding:10px;border-left:1px solid #333}
.form-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11px}
.form-table th,.form-table td{border:1px solid #333;text-align:center;vertical-align:middle;padding:8px 5px;overflow-wrap:anywhere}
.form-table th{font-weight:500;height:75px}
.form-table td{height:48px;font-size:12px}
.form-table .muted-cn{display:block;font-size:10px;margin-top:3px}
.photo-table{width:100%;border-collapse:collapse;table-layout:fixed}
.photo-table td{border:1px solid #333;vertical-align:top;padding:8px;height:225px}
.photo-label{font-size:10px;color:#526158;text-align:center;margin-bottom:7px;font-weight:700}
.paper-photo{height:195px;display:flex;align-items:center;justify-content:center;color:#9ba79f;font-size:11px;text-align:center;overflow:hidden}
.paper-photo img{max-width:100%;max-height:100%;object-fit:contain}
.note-row{border:1px solid #333;border-top:0;padding:6px 8px;min-height:27px;font-size:11px;overflow-wrap:anywhere}
.note-row strong{font-weight:700}
.paper-foot{font-size:9px;color:#64748b;margin-top:8px;text-align:right}
.records-panel{margin-top:20px}
.records-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.records-toolbar input{max-width:250px;padding:8px 10px}.records-toolbar select{max-width:170px}
.table-scroll{overflow-x:auto}
.records-table{border-collapse:collapse;width:100%;font-size:12px;min-width:700px}
.records-table th,.records-table td{text-align:left;border-bottom:1px solid #edf1ee;padding:12px 14px;white-space:nowrap}
.records-table th{background:#f8faf8;color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.5px;position:sticky;top:0;z-index:2}
.records-table td:last-child{white-space:normal}
.record-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;white-space:nowrap}
/* Daftar data memakai area scroll sendiri agar judul, filter, dan pagination tetap terlihat. */
.records-panel{display:flex;flex-direction:column;min-height:0}
.records-panel .panel-head{flex:0 0 auto}
.records-panel .table-scroll{flex:1 1 auto;min-height:220px;max-height:calc(100vh - 340px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.records-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border-top:1px solid var(--line);background:#fff;flex:0 0 auto;min-width:0}
.pagination-pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pagination-button{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;border:1px solid transparent;border-radius:6px;background:#fff;color:#344054;font-size:11px;font-weight:700}
.pagination-button:hover:not(:disabled){background:var(--green-pale);color:var(--green-dark)}
.pagination-button.active{background:var(--green);color:#fff;border-color:var(--green)}
.pagination-button:disabled{opacity:.42;cursor:not-allowed}
.pagination-ellipsis{padding:0 3px;color:var(--muted);font-size:12px}
.pagination-meta{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;min-width:0}
.pagination-jump{display:flex;align-items:center;gap:5px;white-space:nowrap;color:var(--muted);font-size:11px;font-weight:400;margin:0}
.pagination-jump input{width:52px;min-height:30px;padding:5px 6px;text-align:center;font-size:11px}
.pagination-jump button{min-height:30px;padding:6px 8px;font-size:11px}
.pagination-total{font-size:11px;color:#475569;white-space:nowrap}
.pagination-size select{width:auto;min-width:138px;max-width:180px;min-height:32px;padding:6px 8px;font-size:11px}
/* Mode daftar memenuhi tinggi layar pada desktop; hanya tabel yang digulir vertikal. */
body.records-mode{overflow:hidden}
body.records-mode .container{display:flex;flex-direction:column;overflow:hidden}
body.records-mode .intro{flex:0 0 auto}
body.records-mode #recordsView{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}
body.records-mode .records-panel{flex:1 1 auto;height:auto!important;min-height:0}
body.records-mode .records-panel .table-scroll{flex:1 1 auto;min-height:0;max-height:none}
.btn-complete{background:#ecf8f0;color:#0d7540;border:1px solid #add7bd}
.btn-complete:hover:not(:disabled){background:#d6f0df}
.btn-complete:disabled{opacity:.6;cursor:wait}

.empty{text-align:center;padding:30px 12px;color:var(--muted);font-size:13px}
.footer-note{font-size:11px;color:var(--muted);margin-top:14px}
.toast{position:fixed;right:22px;bottom:22px;max-width:360px;background:#163d28;color:white;padding:13px 16px;border-radius:10px;box-shadow:var(--shadow);font-size:13px;display:none;z-index:10}

.preview-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px}
.preview-modal[hidden]{display:none!important}
.preview-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.62)}
.preview-modal-card{position:relative;z-index:1;width:min(1200px,96vw);max-height:94vh;overflow:auto;background:#fff;border-radius:14px;box-shadow:0 20px 70px rgba(0,0,0,.25)}
.preview-modal-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:#fff;border-bottom:1px solid var(--line)}
.preview-modal-head h2{margin:0;font-size:16px}
.preview-modal-content{padding:12px;background:#f4f6f4}
.preview-modal-content .paper{max-width:none}
.preview-modal-content .paper-photo{height:195px}
@media(max-width:1000px){.layout{grid-template-columns:1fr}.preview-panel{position:static}.topbar{padding:16px 20px;flex-wrap:wrap}.top-title{text-align:left;flex:1}.container{padding:18px}.upload-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.topbar{align-items:flex-start;flex-direction:column}.top-title{text-align:left}.brand-logo{width:235px}.language-control{width:100%;max-width:300px}.container{padding:12px}.intro{flex-direction:column}.field-grid,.upload-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.panel-body{padding:15px}.paper-wrap{padding:8px}.paper{padding:8px}.paper-head{grid-template-columns:27% 48% 25%}.paper-logo{max-width:108px;max-height:38px}.paper-title{font-size:11px}.paper-nota{padding:3px;font-size:9px}.paper-nota strong{font-size:10px}.form-table{font-size:9px}.form-table th{height:65px;padding:5px 2px}.form-table td{font-size:9px;padding:5px 2px}.form-table .muted-cn{font-size:8px}.photo-table td{height:150px;padding:4px}.paper-photo{height:130px}.photo-label{font-size:8px}}
@page{size:A4 landscape;margin:10mm}
@media print{
  body{background:#fff!important;color:#000}
  .no-print,.topbar,.intro,.entry-panel,.records-panel,.footer-note,.toast{display:none!important}
  .container{max-width:none;padding:0;margin:0}
  .layout{display:block}
  .preview-panel{position:static;border:0;box-shadow:none;border-radius:0;overflow:visible}
  .preview-panel .panel-head{display:none}
  .paper-wrap{padding:0;background:#fff}
  .paper{border:0;box-shadow:none;padding:0;overflow:visible}
  .paper-head,.form-table th,.form-table td,.photo-table td,.note-row{border-color:#222!important}
  .paper-photo{height:190px}
  .photo-table td{height:220px}
  .form-table th{height:68px}
  .paper-foot{display:none}
}

/* Match the baseline of fields with multi-line labels in both languages. */
.field-grid > .field label {min-height:34px;display:flex;align-items:flex-end}
.field-grid > .field label .sub {margin-left:4px}
@media(max-width:600px){.field-grid > .field label {min-height:0;display:block}}
/* Table alignment: one fixed 7-column grid is shared by the header, motor details, photos and note. */
.paper-wrap {overflow-x:auto}
.paper {min-width:640px}
.sheet-grid {width:100%;border-collapse:collapse;table-layout:fixed;font-size:11px;color:#17212b}
.sheet-grid th,.sheet-grid td {border:1px solid #2d3339;vertical-align:middle;box-sizing:border-box;overflow-wrap:anywhere;word-break:normal;text-align:center;padding:7px 5px}
.sheet-grid .sheet-head th {height:63px;padding:8px 10px}
.sheet-grid .sheet-logo {text-align:center}
.sheet-grid .sheet-logo img {display:block;width:100%;max-height:48px;max-width:165px;object-fit:contain;margin:0 auto}
.sheet-grid .sheet-title {font-weight:700;font-size:15px;line-height:1.28}
.sheet-grid .sheet-nota {text-align:center;font-weight:500;font-size:10px}
.sheet-grid .sheet-nota span {display:block;margin-bottom:5px}
.sheet-grid .sheet-nota strong {display:block;font-size:12px;font-weight:700;overflow-wrap:anywhere}
.sheet-grid .sheet-fields th {height:79px;font-size:10px;line-height:1.38;font-weight:600}
.sheet-grid .sheet-values td {height:46px;font-size:11px;line-height:1.25}
.sheet-grid .sheet-photos td {height:215px;padding:8px;vertical-align:middle}
.sheet-grid .sheet-photos .paper-photo {height:196px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sheet-grid .sheet-photos .paper-photo img {max-width:100%;max-height:100%;object-fit:contain}
.sheet-grid .sheet-notes td {padding:7px 9px;text-align:left;font-size:11px;min-height:29px}
.sheet-grid .sheet-notes strong {font-weight:700}
/* Saved records controls: filter + search + icon actions, aligned on one line. */
.records-panel {margin-top:0}
.records-panel .panel-head {display:flex;align-items:center;gap:16px}
.records-panel .panel-head h2 {flex:0 0 auto}
.records-toolbar {display:flex;justify-content:flex-end;align-items:center;flex-wrap:nowrap;gap:9px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}
.records-toolbar .status-filter {flex:0 0 152px;width:152px;min-width:152px;max-width:152px;min-height:38px}
.records-toolbar #searchRecords {flex:1 1 190px;min-width:150px;width:100%;max-width:260px;min-height:38px}
.icon-action {flex:0 0 38px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #cddcd3;border-radius:9px;background:#fff;color:#17653b;padding:0;transition:background .15s,box-shadow .15s}
.icon-action:hover {background:#eaf6ee;box-shadow:0 0 0 2px rgba(22,131,74,.07)}
.icon-action:focus-visible {outline:3px solid rgba(22,131,74,.32);outline-offset:2px}
.icon-action.icon-delete {color:#a82c29;border-color:#efc8c6}
.icon-action.icon-delete:hover {background:#fff1f0}
@media(max-width:1000px){
  .records-pagination{align-items:flex-start;flex-direction:column;gap:9px}
  .pagination-meta{width:100%;justify-content:flex-start}
}
@media(max-width:760px){
  body.records-mode{overflow:auto}
  body.records-mode .container{height:auto!important;display:block;overflow:visible}
  body.records-mode #recordsView{display:block}
  body.records-mode .records-panel{height:auto!important;min-height:0}
  body.records-mode .records-panel .table-scroll{max-height:calc(100vh - 340px);min-height:220px}
  .records-panel .panel-head {flex-direction:column;align-items:stretch}
  .records-toolbar {width:100%;justify-content:flex-start;flex:0 0 auto}
  .records-toolbar #searchRecords {max-width:none}
  .records-pagination{padding:10px}
  .pagination-meta{gap:8px}
}
@media print {
  .paper-wrap {overflow:visible!important}
  .paper {min-width:0!important;width:100%!important}
  .sheet-grid th,.sheet-grid td {border-color:#222!important}
  .sheet-grid .sheet-photos td {height:210px}
  .sheet-grid .sheet-photos .paper-photo {height:190px}
  .sheet-grid .sheet-fields th {height:72px}
}

/* Date-range filters for saved records. */
.records-panel .panel-head{align-items:flex-start}
.records-panel .panel-head h2{padding-top:10px}
.records-toolbar{align-items:flex-end;overflow-x:auto;scrollbar-width:thin}
.records-toolbar .date-filter-field{display:flex;flex:0 0 142px;flex-direction:column;gap:3px;min-width:142px}
.records-toolbar .date-filter-field label{margin:0;color:#64748b;font-size:10px;font-weight:700;line-height:1.2;white-space:nowrap}
.records-toolbar .date-filter-field input{width:142px;max-width:142px;min-width:142px;min-height:38px;padding:7px 8px;font-size:11px}
@media(max-width:1000px){
  .topbar{padding:9px 18px}
  .brand-logo{width:155px}
  .records-panel .panel-head h2{padding-top:0}
}
@media(max-width:760px){
  .records-panel .panel-head{align-items:stretch}
  .records-panel .panel-head h2{padding-top:0}
  .records-toolbar{align-items:flex-end;flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px}
}
@media(max-width:600px){
  .topbar{padding:12px;align-items:flex-start;flex-direction:column}
  .brand-logo{width:155px;max-height:48px}
}


/* Saved-records dashboard UI: header intentionally remains unchanged. */
.records-filter-panel{padding:15px 16px;margin:0 0 14px;overflow:visible}
.records-filter-grid{display:grid;grid-template-columns:minmax(270px,1.35fr) minmax(145px,.72fr) minmax(155px,.82fr) minmax(220px,1.2fr) auto;gap:14px;align-items:end}
.record-filter-field{min-width:0;display:flex;flex-direction:column;gap:6px}
.record-filter-field>label{margin:0;font-size:12px;font-weight:700;color:#344054;white-space:nowrap}
.record-filter-field input,.record-filter-field select{min-height:39px;padding:9px 10px;border-radius:8px;font-size:12px;min-width:0}
.date-range-inputs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:7px;align-items:center}
.date-range-inputs input{width:100%;min-width:0}
.date-range-separator{font-size:11px;color:#64748b;white-space:nowrap}
.records-filter-actions{display:flex;align-items:center;gap:8px}
.records-filter-actions button{min-height:39px;white-space:nowrap;padding:9px 13px}
.records-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 14px;flex:0 0 auto}
.summary-card{min-width:0;display:flex;align-items:center;gap:14px;padding:15px 17px;background:#fff;border:1px solid #e4ece6;border-radius:12px;box-shadow:var(--shadow)}
.summary-card.total{background:linear-gradient(110deg,#f0f6ff 0%,#f8fbff 100%);border-color:#e2ebf8}
.summary-card.complete{background:linear-gradient(110deg,#edf9f1 0%,#f8fdf9 100%);border-color:#dcefe2}
.summary-card.pending{background:linear-gradient(110deg,#fff8e9 0%,#fffdf7 100%);border-color:#f4ead0}
.summary-icon{width:48px;height:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(37,99,235,.10);color:#2563eb}
.summary-card.complete .summary-icon{background:rgba(22,163,74,.12);color:#159447}
.summary-card.pending .summary-icon{background:rgba(245,158,11,.15);color:#d97706}
.summary-icon svg{width:24px;height:24px}
.summary-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.summary-copy>span{font-size:12px;color:#475569;font-weight:600}
.summary-card.complete .summary-copy>span{color:#16834a}
.summary-card.pending .summary-copy>span{color:#a16207}
.summary-copy strong{font-size:26px;line-height:1.1;color:#102a43;font-weight:800;font-variant-numeric:tabular-nums}
.summary-copy small{font-size:11px;color:#64748b;line-height:1.3}
.records-panel .panel-head{align-items:center;flex-wrap:wrap;padding:13px 17px}
.records-panel .panel-head h2{padding-top:0}
.records-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-left:auto}
.records-head-actions .btn-small{min-height:36px}
.records-table{min-width:1120px}
.records-table th{font-size:10px;padding:12px 13px;background:#f5f8f6;color:#475569;white-space:nowrap}
.records-table td{padding:10px 13px;font-size:12px;color:#263746}
.records-table tbody tr:hover{background:#fbfefc}
.records-table td:nth-child(3){font-weight:600}
.records-table td:nth-child(6){max-width:260px;white-space:normal;overflow-wrap:anywhere}
.records-table .record-actions{gap:6px}
.records-table .record-actions button{border-radius:7px;padding:7px 9px}
.records-pagination{min-height:58px}
@media(max-width:1200px){
 .records-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .date-range-field{grid-column:span 2}
 .records-filter-actions{justify-content:flex-end}
}
@media(max-width:760px){
 .records-filter-panel{padding:12px}
 .records-filter-grid{grid-template-columns:minmax(0,1fr);gap:11px}
 .date-range-field{grid-column:auto}
 .records-filter-actions{justify-content:stretch}
 .records-filter-actions button{flex:1}
 .records-summary{grid-template-columns:1fr;gap:9px}
 .summary-card{padding:12px 14px}
 .summary-icon{width:42px;height:42px;flex-basis:42px}
 .summary-copy strong{font-size:23px}
 .records-head-actions{margin-left:0;justify-content:flex-start}
}


/* Fondasi multi-modul IMIP */
.module-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px;padding:6px;background:#e8eee9;border:1px solid #dce5df;border-radius:13px}
.module-tab{background:transparent;color:#526158;border:1px solid transparent;padding:10px 15px;border-radius:9px}
.module-tab.active{background:#fff;color:var(--green-dark);border-color:#d6e2d9;box-shadow:0 2px 7px rgba(20,54,34,.06)}
.module-nav .module-spacer{flex:1}
.module-nav .logout-button{padding:9px 13px}
.welding-module[hidden],#motorModule[hidden]{display:none!important}
.welding-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 18px}
.welding-heading h1{font-size:25px;margin:0 0 5px}
.welding-heading p{margin:0;color:var(--muted);font-size:14px}
.welding-actions{display:flex;gap:8px;flex-wrap:wrap}.welding-actions .cctv-site-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 15px;border-radius:9px;background:var(--green);color:#fff;border:1px solid var(--green);text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap;transition:background .15s,border-color .15s}.welding-actions .cctv-site-btn:hover{background:var(--green-dark);border-color:var(--green-dark)}
/* FAB khusus halaman Perbaikan Peralatan */
.welding-fab{position:fixed;right:28px;bottom:26px;z-index:1200;width:58px;height:58px;min-width:58px;padding:0;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#24b36b 0%,#087443 100%);color:#fff;font-size:34px;font-weight:400;line-height:1;box-shadow:0 8px 22px rgba(5,92,53,.32),0 2px 5px rgba(0,0,0,.12);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.welding-fab:hover{transform:translateY(-3px);filter:brightness(1.04);box-shadow:0 12px 26px rgba(5,92,53,.38),0 3px 7px rgba(0,0,0,.14)}
.welding-fab:focus-visible{outline:3px solid #a7bb53;outline-offset:4px}
.welding-fab[hidden]{display:none!important}
@media(max-width:600px){.welding-fab{right:18px;bottom:18px;width:54px;height:54px;min-width:54px}}
.welding-records-layout{display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:0;min-height:0;flex:1 1 auto;overflow:hidden}
.welding-summary{display:grid;grid-template-columns:minmax(210px,1.25fr) repeat(4,minmax(0,1fr));gap:10px;min-width:0;min-height:0;margin:0;flex:0 0 auto}
.welding-summary-intro{display:flex;flex-direction:column;justify-content:center;padding:13px 16px;border:1px solid rgba(255,255,255,.18);border-radius:15px;background:linear-gradient(145deg,#0b6034 0%,#16834a 62%,#31a765 100%);color:#fff;box-shadow:0 8px 20px rgba(11,96,52,.16);min-width:0}
.welding-summary-eyebrow{display:block;margin-bottom:5px;font-size:9px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:rgba(255,255,255,.72)}
.welding-summary-intro h2{margin:0 0 4px;font-size:17px;line-height:1.25;color:#fff}
.welding-summary-intro p{margin:0;font-size:11px;line-height:1.5;color:rgba(255,255,255,.82)}
.welding-stat{display:flex;align-items:center;gap:12px;min-height:82px;padding:12px;border:1px solid #e1e9e3;border-radius:13px;background:linear-gradient(135deg,#fff 0%,#f9fcfa 100%);box-shadow:0 3px 12px rgba(20,54,34,.045);min-width:0}
.welding-stat-icon{display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:#eaf6ee;color:#16834a}
.welding-stat-icon svg{display:block;width:20px;height:20px}
.welding-stat .stat-copy{min-width:0}
.welding-stat .stat-label{font-size:11px;color:#647568;font-weight:700;margin-bottom:3px;line-height:1.25}
.welding-stat .stat-value{font-size:25px;line-height:1.05;font-weight:800;color:var(--green-dark);font-variant-numeric:tabular-nums}
.welding-stat.pending .welding-stat-icon{background:#fff4df;color:#a16207}.welding-stat.pending .stat-value{color:#a16207}
.welding-stat.progress .welding-stat-icon{background:#eaf2ff;color:#2563eb}.welding-stat.progress .stat-value{color:#2563eb}
.welding-stat.complete .welding-stat-icon{background:#eaf6ee;color:#15803d}.welding-stat.complete .stat-value{color:#15803d}
.welding-records-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.welding-records-panel>.panel-head,.welding-records-panel>.welding-toolbar,.welding-records-panel>.welding-pagination{flex:0 0 auto}
.welding-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:15px 18px;border-bottom:1px solid var(--line)}
.welding-toolbar .field{flex:1 1 155px}.welding-toolbar .field.search{flex:2 1 230px}
.welding-toolbar label{font-size:11px;margin-bottom:5px}
.welding-toolbar input,.welding-toolbar select{padding:9px 10px}
.welding-table-wrap{flex:1 1 auto;min-width:0;overflow:auto;max-height:calc(100vh - 390px);min-height:220px;overscroll-behavior:contain;scrollbar-gutter:stable}
.welding-table{width:100%;border-collapse:collapse;min-width:1120px;font-size:12px}
.welding-table th,.welding-table td{padding:12px 13px;text-align:left;border-bottom:1px solid #edf1ee;vertical-align:middle}
.welding-table th{position:sticky;top:0;background:#f8faf8;color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.45px;z-index:1}
.welding-table td.description{white-space:normal;min-width:190px;max-width:260px}
.welding-status{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800;white-space:nowrap}
.welding-status.waiting{background:#fff4df;color:#935c00}.welding-status.processing{background:#eaf2ff;color:#1d4ed8}.welding-status.done{background:#eaf6ee;color:#17663a}.welding-status.cancelled{background:#fff1f0;color:#b42318}
.welding-row-actions{display:flex;gap:5px;flex-wrap:nowrap;min-width:0;align-items:center}
.welding-row-actions .welding-icon-action{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;padding:0;border:1px solid #d7e1da;border-radius:8px;background:#fff;color:#24563a;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,transform .12s}
.welding-row-actions .welding-icon-action svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.welding-row-actions .welding-icon-action:hover{background:#edf7f0;border-color:#a8c9b4}
.welding-row-actions .welding-icon-action.danger{color:#b42318;border-color:#f0d0cd}
.welding-row-actions .welding-icon-action.danger:hover{background:#fff1f0;border-color:#e8aaa4}
.welding-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.welding-form-panel{margin-bottom:18px}
.welding-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.welding-form-grid .field.full{grid-column:1/-1}
.welding-action-options{display:flex;flex-wrap:wrap;gap:12px}
.welding-action-option{display:flex;align-items:center;gap:10px;min-height:46px;padding:11px 14px;margin:0;border:1px solid #d5e0d8;border-radius:11px;background:#fff;color:#344054;font-size:12px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.welding-action-option:has(input:checked){background:#edf8f0;border-color:#78b98e;box-shadow:0 0 0 2px rgba(22,131,74,.06)}
.welding-action-option input[type="radio"]{width:16px;height:16px;flex:0 0 16px;margin:0;accent-color:var(--green)}
.welding-action-option span{display:inline-block}
@media(max-width:600px){.welding-action-options{flex-direction:column;align-items:stretch}.welding-action-option{width:100%}}
.welding-upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.welding-photo-preview{height:150px;border:1px dashed #b9cbbf;border-radius:10px;background:#f8fbf8;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:8px 0;color:#8b9a90;font-size:12px;padding:8px;text-align:center}
.welding-photo-preview img{width:100%;height:100%;object-fit:contain}
.startup-screen{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:24px;background:#f4f8f5;color:#163d2a}
.startup-screen[hidden]{display:none!important}
.startup-card{display:flex;flex-direction:column;align-items:center;gap:17px;min-width:230px;padding:30px 34px;border:1px solid #e0eae2;border-radius:18px;background:#fff;box-shadow:0 16px 46px rgba(20,65,39,.10)}
.startup-logo{display:block;width:148px;max-width:100%;max-height:54px;object-fit:contain}
.startup-spinner{width:25px;height:25px;border:3px solid #dce9df;border-top-color:#159447;border-radius:50%;animation:imip-startup-spin .8s linear infinite}
.startup-message{margin:0;color:#4a6454;font-size:13px;font-weight:600;letter-spacing:.1px;text-align:center}
@keyframes imip-startup-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.startup-spinner{animation:none;border-top-color:#159447}}
.auth-gate{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:22px;overflow:auto;background:linear-gradient(112deg,#0ca64a 0%,#35b84c 28%,#f1d14b 62%,#8fc75a 100%)}
.auth-gate::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 18% 18%,rgba(255,255,255,.22),transparent 34%),radial-gradient(ellipse at 86% 84%,rgba(4,83,43,.24),transparent 38%),linear-gradient(160deg,transparent 45%,rgba(255,255,255,.08) 45.2%,transparent 46%,transparent 68%,rgba(4,83,43,.12) 68.3%,transparent 69%)}
.auth-gate[hidden]{display:none!important}
.auth-card{position:relative;z-index:1;width:min(100%,410px);background:linear-gradient(155deg,rgba(7,76,43,.91),rgba(5,48,32,.94));border:1px solid rgba(255,255,255,.25);border-radius:22px;box-shadow:0 28px 80px rgba(5,49,27,.34),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:30px 34px 34px;color:#fff}
.auth-brand{display:flex;align-items:center;justify-content:center;margin:0 auto 22px;background:transparent;border-radius:0;padding:0}
.auth-brand img{width:154px;max-width:100%;max-height:54px;object-fit:contain;filter:brightness(0) invert(1)}
.auth-card h1{font-size:20px;letter-spacing:.2px;font-weight:700;margin:0 0 22px;text-align:center;color:#fff}
.auth-card .auth-desc,.auth-card .auth-hint{display:none!important}
.auth-language-control{display:flex;flex-direction:column;align-items:center;gap:5px;margin:0 0 23px}
.auth-language-control label{flex:0 0 auto;margin:0;font-size:11px;letter-spacing:.35px;color:rgba(255,255,255,.78);font-weight:600}
.auth-language-control select{width:164px;min-width:0;padding:9px 12px;text-align:center;border:1px solid rgba(255,255,255,.26);border-radius:9px;background:rgba(255,255,255,.09);color:#fff;font-size:12px;outline:none}
.auth-language-control select:focus{border-color:#f4d34c;box-shadow:0 0 0 3px rgba(244,211,76,.16)}
.auth-language-control select option{background:#fff;color:#153a27}
.auth-field{margin:0 0 16px}
.auth-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.auth-input-wrap{height:54px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.58);border-radius:10px 10px 5px 5px;background:rgba(255,255,255,.045);transition:border-color .18s,background .18s,box-shadow .18s}
.auth-input-wrap:focus-within{border-color:#f2d14b;border-bottom-color:#f2d14b;background:rgba(255,255,255,.095);box-shadow:0 4px 0 rgba(242,209,75,.08)}
.auth-input-wrap>svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:rgba(255,255,255,.92);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.auth-input-wrap input{flex:1;min-width:0;width:100%;height:100%;padding:0;border:0!important;border-radius:0;background:transparent!important;color:#fff!important;font-size:14px;box-shadow:none!important;outline:none!important}
.auth-input-wrap input::placeholder{color:rgba(255,255,255,.63);opacity:1}
.auth-input-wrap input:focus{border:0;box-shadow:none}
.auth-password-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:34px;padding:5px;border:0;border-radius:7px;background:transparent;color:#fff}
.auth-password-toggle:hover{background:rgba(255,255,255,.1)}
.auth-password-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.auth-card .btn-primary{width:100%;margin-top:8px;padding:13px 16px;border:0;border-radius:10px;background:linear-gradient(100deg,#18b34d 0%,#a8ce50 62%,#f2d14b 100%);color:#073b23;font-size:14px;font-weight:800;letter-spacing:.2px;box-shadow:0 8px 20px rgba(0,0,0,.16)}
.auth-card .btn-primary:hover{background:linear-gradient(100deg,#20c257 0%,#b6d75a 62%,#f7dc65 100%);transform:translateY(-1px)}
.auth-card .btn-primary:disabled{opacity:.65;transform:none}
.auth-error{display:none;background:rgba(255,240,239,.97);color:#a32018;border:1px solid rgba(255,212,208,.95);padding:10px 12px;border-radius:9px;font-size:12px;margin-top:13px}
@media(max-width:600px){.auth-gate{padding:16px}.auth-card{padding:25px 22px 27px;border-radius:18px}.auth-brand{margin-bottom:19px}.auth-brand img{width:142px}.auth-language-control{margin-bottom:20px}.auth-card h1{margin-bottom:19px}}
@media(prefers-reduced-motion:reduce){.auth-input-wrap,.auth-card .btn-primary{transition:none}}
@media(max-width:900px){.welding-records-layout{gap:10px}.welding-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.welding-summary-intro{grid-column:1/-1;padding:10px 13px}.welding-summary-intro h2{font-size:15px}.welding-summary-intro p{font-size:10px}.welding-stat{min-height:66px;padding:9px;gap:8px}.welding-stat-icon{width:34px;height:34px;flex-basis:34px;border-radius:10px}.welding-stat-icon svg{width:18px;height:18px}.welding-stat .stat-label{font-size:10px}.welding-stat .stat-value{font-size:21px}}
@media(max-width:600px){.module-nav{gap:5px}.module-tab{padding:9px 10px;font-size:11px}.module-nav .module-spacer{display:none}.module-nav .logout-button{margin-left:auto}.welding-heading{display:block}.welding-actions{margin-top:12px}.welding-form-grid,.welding-upload-grid{grid-template-columns:1fr}.welding-form-grid .field.full{grid-column:auto}.welding-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.welding-summary-intro{padding:9px 11px}.welding-stat{padding:9px;min-height:62px}.welding-stat .stat-value{font-size:21px}.welding-stat-icon{width:31px;height:31px;flex-basis:31px}.welding-pagination{align-items:flex-start;flex-direction:column}.auth-card{padding:23px}}


.auth-forgot-link{display:block;margin:13px auto 0;padding:4px 8px;border:0;background:transparent;color:rgba(255,255,255,.88);font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.auth-forgot-link:hover{color:#f7dc65}
.auth-forgot-link[hidden]{display:none!important}
.security-modal-card{width:min(620px,96vw)}
.security-modal-content{display:grid;gap:18px;padding:18px;background:#fff}
.security-modal-content form{display:grid;gap:12px}
.security-modal-content .field label{font-size:12px}
.security-modal-content .field input{width:100%}
.password-compare-wrap{display:flex;align-items:stretch;gap:0}
.password-compare-wrap input{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0}
.password-visibility-toggle{flex:0 0 auto;min-width:54px;padding:0 10px;border:1px solid #cfd9d2;border-left:0;border-radius:0 9px 9px 0;background:#f4f8f5;color:#17623a;font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.password-visibility-toggle:hover{background:#e6f4eb}
.password-visibility-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.password-compare-wrap:focus-within input{border-color:var(--green)}
.password-compare-wrap:focus-within .password-visibility-toggle{border-color:var(--green)}
.security-section{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.security-section h3{font-size:15px;margin:0 0 6px;color:var(--green-dark)}
.security-help{font-size:12px;line-height:1.55;color:var(--muted);margin:0 0 10px}
.security-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.security-actions .btn-primary{width:auto;min-width:190px}
.security-message{display:none;padding:10px 12px;border-radius:9px;font-size:12px;line-height:1.45}
.security-message.error{display:block;color:#a32018;background:#fff0ef;border:1px solid #ffd4d0}
.security-message.success{display:block;color:#17623a;background:#effaf2;border:1px solid #bfe8ca}
.auth-dialog{z-index:100001}
.auth-dialog .security-modal-card{max-height:92vh}
@media(max-width:600px){.security-modal-content{padding:12px}.security-section{padding:12px}.security-actions .btn-primary{width:100%;min-width:0}.security-actions .btn-outline{width:100%}.module-nav .logout-button{padding:8px 9px;font-size:11px}}


/* Header navigation/account redesign v1.5 */
.topbar{position:relative;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:8px 24px;min-height:62px}
.topbar .brand{flex:0 0 auto}
.topbar .brand-logo{width:165px;max-height:48px}
.header-app-controls{display:flex;align-items:center;flex:1;min-width:0;gap:20px}
.header-app-controls[hidden]{display:none!important}
.header-modules{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;gap:8px}
.header-modules .module-tab{position:relative;white-space:nowrap;padding:12px 15px;border:0;border-radius:7px;background:transparent;color:#fff;font-size:13px;font-weight:600;box-shadow:none;transition:background .16s ease,color .16s ease}
.header-modules .module-tab:hover{background:rgba(255,255,255,.14);color:#fff}
.header-modules .module-tab.active{background:rgba(255,255,255,.19);color:#fff;box-shadow:inset 0 -3px 0 rgba(255,255,255,.95)}
.header-account-wrap{position:relative;flex:0 0 auto}
.header-account-toggle{display:flex;align-items:center;justify-content:center;gap:9px;max-width:250px;min-height:44px;padding:5px 8px;border:0;border-radius:8px;background:transparent;color:#fff;cursor:pointer}
.header-account-toggle:hover,.header-account-toggle[aria-expanded="true"]{background:rgba(255,255,255,.15)}
.account-user-icon{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.account-display-name{max-width:170px;text-align:right;font-size:11px;font-weight:700;line-height:1.25;white-space:normal}
.account-chevron{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.account-dropdown-menu{position:absolute;top:calc(100% + 7px);right:0;z-index:1200;width:205px;padding:5px;background:#fff;border:1px solid #dce5df;border-radius:8px;box-shadow:0 12px 30px rgba(15,45,29,.2)}
.account-dropdown-menu[hidden]{display:none!important}
.account-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:5px;background:#fff;color:#25332a;text-align:left;font-size:13px;cursor:pointer}
.account-dropdown-item:hover{background:#edf2f7;color:#0f5130}
.account-dropdown-item svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.language-control{display:flex;flex:0 0 auto;min-width:0;margin-left:0}
.language-control label{display:none!important}
.language-control select{width:138px;min-width:138px;padding:9px 11px;border:1px solid rgba(255,255,255,.55);border-radius:8px;background:#fff;color:#1e293b;font-size:12px}
@media(max-width:1050px){
  .topbar{gap:12px;padding:8px 14px}
  .topbar .brand-logo{width:135px}
  .header-app-controls{gap:10px}
  .header-modules{gap:3px}
  .header-modules .module-tab{padding:10px 9px;font-size:12px}
  .account-display-name{max-width:125px;font-size:10px}
  .language-control select{width:125px;min-width:125px}
}
@media(max-width:760px){
  .topbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;padding:10px 12px}
  .topbar .brand-logo{width:125px;max-height:40px}
  .language-control{margin-left:auto}
  .language-control select{width:130px;min-width:130px}
  .header-app-controls{order:3;flex:1 0 100%;width:100%;gap:8px}
  .header-modules{justify-content:flex-start;overflow-x:auto;flex:1 1 auto}
  .header-modules .module-tab{padding:9px 10px;font-size:12px}
  .header-account-toggle{min-height:38px;padding:4px 6px}
  .account-display-name{max-width:100px;font-size:9px}
  .account-dropdown-menu{right:0}
}
@media(max-width:430px){
  .topbar .brand-logo{width:110px}
  .language-control select{width:118px;min-width:118px;font-size:11px}
  .header-app-controls{align-items:center}
  .account-display-name{max-width:83px}
  .header-modules .module-tab{font-size:11px;padding:8px 7px}
}


/* Header + subheader redesign v1.6 */
.topbar{position:relative;z-index:1000;display:flex;align-items:center;gap:18px;padding:6px 18px;min-height:52px;background:linear-gradient(95deg,#16ad43 0%,#25b341 42%,#d4c245 100%)}
.topbar .brand{flex:0 0 auto}
.topbar .brand-logo{width:170px;max-height:42px}
.header-app-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;flex:1;min-width:0}
.header-app-controls[hidden]{display:none!important}
.header-main-title{flex:1;min-width:0;color:#fff;font-size:15px;font-weight:700;line-height:1.3;letter-spacing:.15px;white-space:normal}
.header-right-controls{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.header-account-wrap{position:relative;flex:0 0 auto}
.header-account-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;max-width:280px;padding:5px 10px;border:0;border-radius:6px;background:transparent;color:#fff;cursor:pointer}
.header-account-toggle:hover,.header-account-toggle[aria-expanded="true"]{background:rgba(255,255,255,.16)}
.account-user-icon{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.account-display-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:12px;font-weight:700;line-height:1.2}
.account-chevron{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.account-dropdown-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:1200;width:210px;padding:5px;background:#fff;border:1px solid #dce5df;border-radius:8px;box-shadow:0 12px 30px rgba(15,45,29,.2)}
.account-dropdown-menu[hidden]{display:none!important}
.account-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:5px;background:#fff;color:#25332a;text-align:left;font-size:13px;cursor:pointer}
.account-dropdown-item:hover{background:#edf2f7;color:#0f5130}
.account-dropdown-item svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.language-control{display:flex;flex:0 0 auto;min-width:0}
.language-control label{display:none!important}
.language-control select{width:138px;min-width:138px;padding:8px 10px;border:1px solid rgba(255,255,255,.6);border-radius:8px;background:#fff;color:#1e293b;font-size:12px}

.module-subheader{background:#fff;border-bottom:1px solid #d6e0d7;box-shadow:0 1px 0 rgba(16,24,40,.02)}
.module-subheader[hidden]{display:none!important}
.module-subheader-inner{padding:0 18px;display:flex;align-items:center;min-height:38px}
.subheader-modules{display:flex;align-items:stretch;gap:0}
.subheader-modules .module-tab{position:relative;padding:10px 16px;border:0;border-right:1px solid #ecf0ea;border-radius:0;background:#fff;color:#54733d;font-size:13px;font-weight:600;box-shadow:none;transition:background .16s ease,color .16s ease}
.subheader-modules .module-tab:first-child{border-left:1px solid #ecf0ea}
.subheader-modules .module-tab:hover{background:#f7faf6;color:#40602c}
.subheader-modules .module-tab.active{background:#a7bb53;color:#fff}
.subheader-modules .module-tab.active:hover{background:#a7bb53;color:#fff}

@media(max-width:1080px){
  .topbar{padding:6px 12px;gap:12px}
  .topbar .brand-logo{width:145px}
  .header-main-title{font-size:13px}
  .header-right-controls{gap:9px}
  .account-display-name{max-width:130px;font-size:11px}
  .language-control select{width:125px;min-width:125px}
  .subheader-modules .module-tab{padding:10px 12px;font-size:12px}
}
@media(max-width:820px){
  .topbar{flex-wrap:wrap;align-items:flex-start}
  .header-app-controls{order:2;flex:1 0 calc(100% - 160px);flex-wrap:wrap;gap:8px}
  .header-main-title{flex:1 0 100%;font-size:13px}
  .header-right-controls{margin-left:auto}
  .module-subheader-inner{padding:0 12px;overflow-x:auto}
}
@media(max-width:620px){
  .topbar .brand-logo{width:130px}
  .header-app-controls{flex:1 0 100%}
  .header-main-title{font-size:12px}
  .header-right-controls{width:100%;justify-content:flex-end}
  .account-display-name{max-width:105px}
  .language-control select{width:118px;min-width:118px;font-size:11px}
  .subheader-modules{min-width:max-content}
}


/* UI refinement v1.7 */
.module-subheader-inner{padding:0 18px 0 188px}
.subheader-modules{align-items:stretch;gap:3px}
.subheader-modules .module-tab{
  position:relative;
  margin-top:3px;
  padding:10px 15px 11px;
  border:1px solid transparent;
  border-radius:8px 8px 0 0;
  background:#fff;
  color:#52665a;
  font-size:12px;
  font-weight:650;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.subheader-modules .module-tab:first-child{border-left:1px solid transparent}
.subheader-modules .module-tab:hover{background:#f2f8f4;color:#0b6034}
.subheader-modules .module-tab.active{
  color:#fff;
  background:linear-gradient(135deg,#087b43 0%,#159653 100%);
  border-color:#087b43;
  box-shadow:0 3px 9px rgba(9,105,55,.18);
}
.subheader-modules .module-tab.active::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:0;
  height:2px;
  border-radius:2px 2px 0 0;
  background:#e6cf54;
}
.subheader-modules .module-tab.active:hover{
  color:#fff;
  background:linear-gradient(135deg,#087b43 0%,#159653 100%);
}
@media(max-width:1080px){
  .module-subheader-inner{padding-left:169px}
}
@media(max-width:820px){
  .module-subheader-inner{padding:0 12px;overflow-x:auto}
}

/* Keep the saved-record table scrollable and pagination controls visible. */
body.records-mode .container{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
body.records-mode #motorModule{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
body.records-mode #motorModule > .intro,
body.records-mode #motorModule > .server-alert,
body.records-mode #motorModule > .screen-tabs{
  flex:0 0 auto;
}
body.records-mode #motorModule > #recordsView{
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
body.records-mode #recordsView > .records-filter-panel,
body.records-mode #recordsView > .records-summary{
  flex:0 0 auto;
}
body.records-mode #recordsView > .records-panel{
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  min-height:0;
  height:auto!important;
  overflow:hidden;
}
body.records-mode #recordsView > .records-panel > .panel-head{
  flex:0 0 auto;
}
body.records-mode #recordsView > .records-panel > .table-scroll{
  flex:1 1 0;
  min-height:0;
  max-height:none;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
body.records-mode #recordsView > .records-panel > .records-pagination{
  display:flex;
  flex:0 0 auto;
  visibility:visible;
  min-height:58px;
}
.pagination-size{display:flex;align-items:center;flex:0 0 auto}
.pagination-size select{display:block;visibility:visible;opacity:1}
@media(max-width:760px){
  .module-subheader-inner{padding:0 12px}
  body.records-mode #motorModule,
  body.records-mode #recordsView,
  body.records-mode #recordsView > .records-panel{
    display:block;
    overflow:visible;
  }
  body.records-mode #recordsView > .records-panel > .table-scroll{
    min-height:220px;
    max-height:calc(100vh - 340px);
  }
  body.records-mode #recordsView > .records-panel > .records-pagination{
    display:flex;
  }
}


/* UI refinement v1.8: remove the screen-tab strip and place the form action beside the page title. */
.motor-intro{align-items:flex-start;justify-content:space-between;gap:18px}
.motor-intro-copy{min-width:0}
.motor-form-toggle{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:39px;
  padding:10px 16px;
  border-radius:9px;
  white-space:nowrap;
  box-shadow:0 3px 8px rgba(22,131,74,.13);
}
.motor-form-toggle:hover{box-shadow:0 5px 13px rgba(22,131,74,.2)}
@media(max-width:760px){
  .motor-intro{align-items:stretch;flex-direction:column;gap:12px}
  .motor-form-toggle{align-self:flex-start}
}


/* Welding request form: preview, two-photo print sheet, and table pagination. */
#weldingPrintArea{display:none!important}
.welding-preview-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
.welding-preview-modal-card{width:min(1180px,96vw)}
.welding-print-wrap{padding:18px;background:#f4f6f4}
.welding-print-paper{width:100%;max-width:1100px;margin:0 auto;background:#fff;border:1px solid #d4ddd6;padding:18px;box-shadow:0 4px 16px rgba(0,0,0,.04);color:#17212b}
.welding-print-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11px;color:#17212b}
.welding-print-table th,.welding-print-table td{border:1px solid #2d3339;vertical-align:middle;box-sizing:border-box;overflow-wrap:anywhere;word-break:normal;text-align:center;padding:7px 5px}
.welding-print-table .wp-header th{height:64px;padding:8px 10px}
.welding-print-table .wp-logo img{display:block;width:100%;max-width:165px;max-height:48px;object-fit:contain;margin:0 auto}
.welding-print-table .wp-title{font-weight:700;font-size:15px;line-height:1.28}
.welding-print-table .wp-job{font-size:10px;font-weight:500}
.welding-print-table .wp-job strong{display:block;margin-top:5px;font-size:12px;font-weight:700}
.welding-print-table .wp-labels th{height:62px;background:#f8faf8;font-size:10px;font-weight:700}
.welding-print-table .wp-values td{height:48px;font-size:10px}
.welding-print-table .wp-subvalue{display:block;margin-top:3px;color:#64748b;font-size:9px}
.welding-print-table .wp-description td,.welding-print-table .wp-result td{height:74px;padding:10px;text-align:left;vertical-align:top}
.welding-print-table .wp-description strong,.welding-print-table .wp-result strong{display:block;margin-bottom:7px}
.welding-print-table .wp-text{min-height:35px;white-space:pre-wrap;text-align:left;line-height:1.45}
.welding-print-table .wp-photos td{height:225px;padding:6px}
.welding-print-table .wp-photo-box{height:210px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;overflow:hidden;color:#98a49d;font-size:11px}
.welding-print-table .wp-photo-box img{display:block;max-width:100%;max-height:190px;object-fit:contain}
.welding-print-table .wp-photo-label{font-size:10px;font-weight:700;color:#64748b}
.welding-print-table .wp-sign td{height:105px;vertical-align:top;padding:10px}
.welding-print-table .wp-sign-space{height:52px}
.welding-print-table .wp-sign-line{display:inline-block;min-width:140px;padding-top:5px;border-top:1px solid #6b7280;font-size:10px}
.welding-print-foot{margin-top:8px;text-align:right;color:#64748b;font-size:9px}
.welding-pagination{flex-wrap:wrap}
.welding-pagination .welding-pagination-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.welding-page-size{display:flex;align-items:center;gap:7px;white-space:nowrap}
.welding-page-size label{font-size:11px;color:var(--muted)}
.welding-page-size select{min-height:32px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-size:11px}
.welding-table{min-width:1080px}
.welding-row-actions{min-width:220px}
.welding-row-actions button{padding:6px 8px}
@media(max-width:760px){
  .welding-print-wrap{padding:5px}
  .welding-print-paper{padding:8px}
  .welding-print-table{font-size:9px}
  .welding-print-table .wp-title{font-size:12px}
  .welding-preview-modal-card{width:98vw}
  .welding-preview-modal-card .preview-modal-head{align-items:flex-start;flex-direction:column}
  .welding-preview-toolbar{width:100%;justify-content:flex-end}
}
@media print{
  body.welding-print-mode > :not(#weldingPrintArea){display:none!important}
  body.welding-print-mode #weldingPrintArea{display:block!important;position:static!important;width:100%!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:0!important;margin:0!important;background:#fff!important}
  body.welding-print-mode #weldingPrintArea[hidden]{display:block!important}
  body.welding-print-mode #weldingPrintArea .welding-print-wrap{padding:0!important;background:#fff!important}
  body.welding-print-mode #weldingPrintArea .welding-print-paper{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important}
  body.welding-print-mode #weldingPrintArea .welding-print-table th,
  body.welding-print-mode #weldingPrintArea .welding-print-table td{border-color:#222!important}
  body.welding-print-mode #weldingPrintArea .welding-print-table .wp-photos td{height:205px}
  body.welding-print-mode #weldingPrintArea .welding-print-table .wp-photo-box{height:190px}
}


/* v1.14: compact records heading and inline filters, matching the Perbaikan Peralatan layout */
.records-title-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.records-title-group h2{margin:0}
.records-count-label{font-size:12px;color:var(--muted);font-weight:400;white-space:nowrap}
.records-panel .records-inline-filters{display:grid;grid-template-columns:minmax(220px,1.35fr) minmax(135px,.72fr) minmax(145px,.78fr) minmax(145px,.78fr) minmax(145px,.78fr) auto;gap:10px;align-items:end;padding:15px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
.records-panel .records-inline-filters .record-filter-field{min-width:0;display:flex;flex-direction:column;gap:6px}
.records-panel .records-inline-filters .record-filter-field>label{margin:0;font-size:12px;font-weight:700;color:#344054;white-space:nowrap}
.records-panel .records-inline-filters input,.records-panel .records-inline-filters select{min-height:39px;height:39px;padding:9px 10px;border-radius:8px;font-size:12px;min-width:0;width:100%}
.records-panel .records-inline-filters .records-filter-actions{display:flex;align-items:end;justify-content:flex-end}
.records-panel .records-inline-filters .records-filter-actions button{min-height:39px;height:39px;white-space:nowrap;padding:9px 13px}
@media(max-width:1200px){
  .records-panel .records-inline-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .records-panel .records-inline-filters .search-field{grid-column:span 2}
}
@media(max-width:760px){
  .records-panel .records-inline-filters{grid-template-columns:minmax(0,1fr);gap:11px;padding:12px}
  .records-panel .records-inline-filters .search-field{grid-column:auto}
  .records-panel .records-inline-filters .records-filter-actions button{width:100%}
  .records-title-group{gap:7px}
}

/* v1.15: compact pagination controls without range/total counters */
.records-pagination{align-items:center}
.records-pagination .pagination-meta{margin-left:auto;width:auto;flex:0 0 auto}
.welding-pagination{align-items:center}
.welding-pagination .welding-pagination-left{margin-right:auto}
.welding-pagination .pagination-pages{display:flex;align-items:center;gap:4px}
.welding-pagination .welding-page-size{margin-left:auto}
@media(max-width:1000px){
  .records-pagination{align-items:center;flex-direction:row}
  .records-pagination .pagination-meta{width:auto;justify-content:flex-end}
  .welding-pagination{align-items:center;flex-direction:row}
}
@media(max-width:600px){
  .records-pagination{align-items:flex-start;flex-direction:column}
  .records-pagination .pagination-meta{margin-left:0;width:100%}
  .welding-pagination{align-items:flex-start;flex-direction:column}
  .welding-pagination .welding-page-size{margin-left:0}
}

/* Halaman Perbaikan Peralatan: ringkasan di sisi kiri, hanya area tabel yang digulir. */
body.welding-mode{height:100vh;height:100dvh;overflow:hidden}
body.welding-mode #appContainer:not([hidden]){display:flex;flex-direction:column;min-height:0;overflow:hidden;width:100%;margin:0 auto;padding:12px 18px}
body.welding-mode #weldingModule:not([hidden]){display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
body.welding-mode #weldingModule .welding-heading{flex:0 0 auto;margin-bottom:12px}
body.welding-mode #weldingRecordsView:not([hidden]){display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
body.welding-mode .welding-records-layout{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
body.welding-mode .welding-records-panel{height:auto;flex:1 1 auto;min-height:0}
body.welding-mode .welding-records-panel>.panel-head,body.welding-mode .welding-records-panel>.welding-toolbar,body.welding-mode .welding-pagination{flex:0 0 auto}
body.welding-mode .welding-table-wrap{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
body.welding-mode #weldingFormView:not([hidden]){flex:1 1 auto;min-height:0;overflow:auto}
@media(max-width:900px){body.welding-mode #appContainer:not([hidden]){padding:10px 12px}body.welding-mode .welding-records-layout{overflow:hidden}}

/* CCTV inventory module */
.cctv-module[hidden]{display:none!important}
.cctv-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:15px 18px;border-bottom:1px solid var(--line)}
.cctv-toolbar .field{flex:1 1 260px;min-width:160px}.cctv-toolbar .field label{font-size:11px;margin-bottom:5px}
.cctv-toolbar input{min-height:39px;height:39px;padding:9px 10px;border-radius:8px;font-size:12px;width:100%}
.cctv-table-wrap{overflow:auto;max-height:calc(100vh - 300px);min-height:220px}
.cctv-table{width:100%;border-collapse:collapse;min-width:790px;font-size:12px}
.cctv-table th,.cctv-table td{padding:12px 13px;text-align:left;border-bottom:1px solid #edf1ee;vertical-align:middle}
.cctv-table th{position:sticky;top:0;background:#f8faf8;color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.45px;z-index:1}
.cctv-table td.cctv-location{white-space:normal;min-width:230px;max-width:460px;overflow-wrap:anywhere}
.cctv-thumb-button{display:inline-flex;padding:0;border:0;background:transparent;cursor:pointer;border-radius:8px}
.cctv-thumb{display:block;width:86px;height:62px;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:#f5f8f6}
.cctv-no-photo{display:inline-flex;align-items:center;min-height:32px;color:var(--muted);font-size:11px}
.cctv-row-actions{display:flex;gap:6px;flex-wrap:wrap;min-width:125px}
.cctv-row-actions button{padding:7px 9px;font-size:10px}
.cctv-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.cctv-form-grid .field{min-width:0}
.cctv-upload-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:620px}
.cctv-photo-preview{height:245px;border:1px dashed #b9cbbf;border-radius:10px;background:#f8fbf8;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:8px 0;color:#8b9a90;font-size:12px;padding:10px;text-align:center}
.cctv-photo-preview img{width:100%;height:100%;object-fit:contain}
.cctv-photo-hint{font-size:11px;color:var(--muted);margin:7px 0}
.cctv-lightbox-body{padding:18px;display:flex;align-items:center;justify-content:center;min-height:160px;background:#f8faf8}
.cctv-lightbox-body img{display:block;max-width:100%;max-height:72vh;object-fit:contain}
@media(max-width:900px){.cctv-table-wrap{max-height:none}}
@media(max-width:600px){.cctv-toolbar{padding:12px}.cctv-form-grid{grid-template-columns:1fr}.cctv-photo-preview{height:200px}.cctv-table-wrap{min-height:180px}}
/* Halaman Data CCTV memakai tinggi viewport. Gulir vertikal berada di area tabel, bukan di seluruh halaman. */
body.cctv-mode{height:100vh;height:100dvh;overflow:hidden}
body.cctv-mode #appContainer:not([hidden]){display:flex;flex-direction:column;min-height:0;overflow:hidden;width:100%;margin:0 auto;padding:12px 18px}
body.cctv-mode #cctvModule:not([hidden]){display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
body.cctv-mode #cctvModule .welding-heading{flex:0 0 auto;margin-bottom:12px}
body.cctv-mode #cctvRecordsView:not([hidden]){display:flex;flex:1 1 auto;flex-direction:column;min-height:0}
body.cctv-mode #cctvRecordsView>.panel{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}
body.cctv-mode #cctvRecordsView>.panel>.panel-head,
body.cctv-mode #cctvRecordsView>.panel>.cctv-toolbar,
body.cctv-mode #cctvPagination{flex:0 0 auto}
body.cctv-mode .cctv-table-wrap{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}
body.cctv-mode #cctvFormView:not([hidden]){flex:1 1 auto;min-height:0;overflow:auto}
@media(max-width:600px){body.cctv-mode #appContainer:not([hidden]){padding:10px 10px}body.cctv-mode #cctvModule .welding-heading{gap:10px}body.cctv-mode #cctvModule .welding-heading h1{font-size:21px}body.cctv-mode #cctvModule .welding-heading p{font-size:12px}}



/* Inventaris Gudang: modul tambahan yang terisolasi dari modul lama. */
.inventory-module[hidden],.inventory-view[hidden]{display:none!important}
.inventory-module{min-width:0}
.inventory-module .inventory-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 12px}
.inventory-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;min-width:0;box-shadow:0 2px 8px rgba(20,45,30,.035)}
.inventory-stat-label{font-size:11px;color:var(--muted);font-weight:700;margin-bottom:6px}
.inventory-stat-value{font-size:25px;line-height:1.2;font-weight:800;color:var(--ink)}
.inventory-stat.low .inventory-stat-value{color:#b7791f}.inventory-stat.pending .inventory-stat-value{color:#b45309}
.inventory-tabs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid var(--line);flex:0 0 auto}
.inventory-tabs .module-tab{min-height:36px}
.inventory-view{min-width:0}
.inventory-view .panel{min-width:0}
.inventory-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.inventory-toolbar .field{flex:1 1 190px;min-width:145px;margin:0}.inventory-toolbar .field label{font-size:11px;margin-bottom:5px}
.inventory-toolbar input,.inventory-toolbar select{min-height:38px;height:38px;padding:8px 10px;border-radius:8px;font-size:12px;width:100%;min-width:0}
.inventory-table-wrap{overflow:auto;max-height:calc(100vh - 350px);min-height:190px;overscroll-behavior:contain}
.inventory-stock-pagination{flex:0 0 auto;min-height:58px;padding:10px 14px;border-top:1px solid var(--line);background:#fff;z-index:2}
.inventory-stock-pagination .welding-pagination-left{display:flex;align-items:center;gap:4px;min-width:0;flex-wrap:wrap}
.inventory-stock-pagination .welding-page-size{margin-left:auto}
.inventory-stock-pagination .welding-page-size select{min-width:112px}
.inventory-table{width:100%;border-collapse:collapse;min-width:950px;font-size:12px}
.inventory-table th,.inventory-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #edf1ee;vertical-align:middle}
.inventory-table th{position:sticky;top:0;background:#f8faf8;color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.35px;z-index:1;white-space:nowrap}
.inventory-table td{color:#344054}.inventory-table td strong{color:#173d2a}.inventory-table .inv-actions{display:flex;gap:5px;flex-wrap:wrap;min-width:145px}
.inventory-table .inv-actions button{padding:6px 8px;font-size:10px;white-space:nowrap}
.inventory-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap;background:#e8f4ec;color:#17633b}
.inventory-badge.low{background:#fff3d8;color:#8b5b00}.inventory-badge.pending{background:#fff0dc;color:#9a4d00}.inventory-badge.cancelled{background:#f1f2f4;color:#5f6672}.inventory-badge.inactive{background:#f1f2f4;color:#5f6672}.inventory-badge.loan-borrowed{background:#fee4e2;color:#b42318;border:1px solid #fecdca}.inventory-badge.loan-partial{background:#fff3d6;color:#8a5a00;border:1px solid #f4d58a}.inventory-badge.loan-closed{background:#e8f4ec;color:#17633b;border:1px solid #c8e5d1}
.inventory-thumb{width:44px;height:38px;object-fit:cover;border-radius:7px;border:1px solid var(--line);background:#f5f8f6}
.inventory-toolbar-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.inventory-fab{position:fixed;right:28px;bottom:26px;z-index:1200;width:58px;height:58px;min-width:58px;padding:0;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#24b36b 0%,#087443 100%);color:#fff;font-size:34px;font-weight:400;line-height:1;box-shadow:0 8px 22px rgba(5,92,53,.32),0 2px 5px rgba(0,0,0,.12);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.inventory-fab:hover{transform:translateY(-3px);filter:brightness(1.04);box-shadow:0 12px 26px rgba(5,92,53,.38),0 3px 7px rgba(0,0,0,.14)}
.inventory-fab:focus-visible{outline:3px solid #a7bb53;outline-offset:4px}
.inventory-warehouse-fab{bottom:26px}body.inventory-mode #inventoryWarehousesView:not([hidden]) .inventory-table-wrap{padding-bottom:72px}
@media(max-width:600px){.inventory-fab{right:18px;bottom:18px;width:54px;height:54px;min-width:54px;font-size:32px}}
.inventory-form-scroll{overflow:auto;min-height:0;padding-bottom:12px}
body.inventory-mode .inventory-view>.panel>.inventory-form-scroll{flex:1 1 auto;min-height:0;overflow:auto}
.inventory-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.inventory-form-grid .field{min-width:0;margin:0}.inventory-form-grid .field.full{grid-column:1/-1}
.inventory-form-grid label{font-size:11px}.inventory-form-grid input,.inventory-form-grid select,.inventory-form-grid textarea{width:100%;min-width:0}
.inventory-photo-preview{width:150px;height:115px;border:1px dashed #b9cbbf;border-radius:9px;background:#f8fbf8;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);font-size:11px;padding:8px;text-align:center}
.inventory-photo-preview img{width:100%;height:100%;object-fit:contain}
.inventory-lines{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.inventory-line-row{display:grid;grid-template-columns:minmax(180px,1.8fr) minmax(90px,.75fr) minmax(135px,1.1fr) minmax(135px,1.1fr) auto;gap:8px;align-items:end;padding:10px;background:#f8faf8;border:1px solid var(--line);border-radius:9px}
.inventory-line-row[data-inv-type="IN"]{grid-template-columns:minmax(160px,1.6fr) minmax(80px,.7fr) minmax(135px,1.1fr) minmax(135px,1.1fr) minmax(135px,1.1fr) auto}
.inventory-line-row[data-inv-type="OUT"]{grid-template-columns:minmax(160px,1.6fr) minmax(80px,.7fr) minmax(150px,1.1fr) minmax(130px,1fr) auto}
.inventory-line-row .field{min-width:0;margin:0}.inventory-line-row .field[hidden]{display:none!important}.inventory-line-row label{display:block;font-size:10px;margin-bottom:5px}.inventory-line-row input,.inventory-line-row select{width:100%;min-width:0;min-height:36px;height:36px;padding:7px 8px;font-size:11px}
.inventory-line-row .inv-remove-line{height:36px;padding:7px 9px}
.inventory-quantity-warning{display:block;margin-top:4px;color:#b42318;font-size:10px;line-height:1.35;font-weight:600}.inventory-line-row input[aria-invalid="true"],.inventory-loan-line-row input[aria-invalid="true"],.inventory-return-line input[aria-invalid="true"]{border-color:#d92d20!important;background:#fff6f5!important;box-shadow:0 0 0 1px rgba(217,45,32,.08)}

.inventory-line-row{position:relative;z-index:1;overflow:visible}
.inventory-line-row:focus-within{z-index:30}
.inventory-line-item-field{position:relative;z-index:2}
.inventory-item-picker{position:relative;width:100%}
.inventory-item-picker[hidden],.inventory-item-options[hidden],.inventory-line-item-select[hidden]{display:none!important}
.inventory-item-picker input.inventory-line-item-search{width:100%;min-width:0;min-height:36px;height:36px;padding:7px 30px 7px 9px;font-size:11px;border:1px solid #cbd8cf;border-radius:7px;background:#fff;color:#1c3528}
.inventory-item-picker:after{content:none;display:none}
.inventory-item-options{position:absolute;left:0;right:0;top:calc(100% + 4px);max-height:240px;overflow:auto;z-index:80;border:1px solid #cbd8cf;border-radius:9px;background:#fff;box-shadow:0 10px 26px rgba(17,55,34,.18);padding:4px}
.inventory-item-option{display:flex!important;width:100%;height:auto!important;min-height:43px!important;align-items:flex-start;justify-content:flex-start;text-align:left;gap:3px;padding:8px 9px!important;border:0;border-radius:6px;background:#fff;color:#183d2a;white-space:normal;font-size:11px;line-height:1.35;cursor:pointer}
.inventory-item-option:hover,.inventory-item-option.active{background:#eaf6ee;color:#145b35}
.inventory-item-option-main{display:block;min-width:0;flex:1}
.inventory-item-option-name{display:block;font-weight:700;overflow-wrap:anywhere}
.inventory-item-option-meta{display:block;color:#687a70;font-size:10px;margin-top:2px;overflow-wrap:anywhere}
.inventory-item-options-empty{padding:12px 9px;color:#718176;font-size:11px;text-align:center}
.inventory-help{font-size:11px;color:var(--muted);margin:6px 0 0}
.inventory-view .panel-head{flex:0 0 auto}
.inventory-empty{padding:26px 12px;text-align:center;color:var(--muted);font-size:12px}
body.inventory-mode{height:100vh;height:100dvh;overflow:hidden}
body.inventory-mode #appContainer:not([hidden]){display:flex;flex-direction:column;min-height:0;overflow:hidden;width:100%;margin:0 auto;padding:12px 18px}
body.inventory-mode #inventoryModule:not([hidden]){display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
body.inventory-mode #inventoryModule>.welding-heading{flex:0 0 auto;margin-bottom:10px}
body.inventory-mode #inventoryModule .inventory-summary-grid,body.inventory-mode #inventoryModule .inventory-tabs{flex:0 0 auto}
body.inventory-mode .inventory-view:not([hidden]){display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
body.inventory-mode .inventory-view>.panel{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
body.inventory-mode .inventory-view>.panel>.panel-head,body.inventory-mode .inventory-view>.panel>.inventory-toolbar{flex:0 0 auto}
body.inventory-mode .inventory-table-wrap{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;scrollbar-gutter:stable}
body.inventory-mode #inventoryStockView:not([hidden]) .inventory-stock-pagination{flex:0 0 auto}
body.inventory-mode #inventoryTransactionsView:not([hidden]) .inventory-transactions-pagination{flex:0 0 auto}
body.inventory-mode #inventoryTransactionsView:not([hidden]) .inventory-transactions-fab{bottom:86px}
body.inventory-mode #inventoryStockView:not([hidden]) .inventory-fab{bottom:86px}
body.inventory-mode #inventoryItemFormView:not([hidden]),body.inventory-mode #inventoryTransactionFormView:not([hidden]),body.inventory-mode #inventoryWarehouseFormView:not([hidden]),body.inventory-mode #inventoryLoanFormView:not([hidden]),body.inventory-mode #inventoryLoanReturnView:not([hidden]){overflow:auto}
@media(max-width:1000px){.inventory-module .inventory-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.inventory-line-row,.inventory-line-row[data-inv-type="IN"]{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-line-row .inventory-line-item-field,.inventory-line-row .inventory-line-notes-field{grid-column:1/-1}.inventory-line-row .inv-remove-line{justify-self:start}}
@media(max-width:760px){.inventory-module .inventory-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-toolbar{padding:12px}.inventory-form-grid{grid-template-columns:1fr}.inventory-form-grid .field.full{grid-column:auto}.inventory-line-row,.inventory-line-row[data-inv-type="IN"]{grid-template-columns:1fr 1fr}.inventory-line-row .inventory-line-item-field,.inventory-line-row .inventory-line-notes-field{grid-column:1/-1}}
/* Clean and elegant line-item layout refinement */
.inventory-lines{gap:14px;margin-top:14px}
.inventory-line-row,.inventory-line-row[data-inv-type="IN"],.inventory-line-row[data-inv-type="OUT"]{
  display:grid;
  grid-template-columns:minmax(230px,2.1fr) minmax(110px,.8fr) minmax(180px,1.35fr) minmax(170px,1.15fr) 44px;
  gap:14px;
  align-items:start;
  padding:16px 16px 12px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbf9 100%);
  border:1px solid #dce8e0;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(16,24,40,.05);
}
.inventory-line-row[data-inv-type="IN"]{grid-template-columns:minmax(230px,2fr) minmax(110px,.8fr) minmax(180px,1.25fr) minmax(170px,1.1fr) minmax(200px,1.25fr) 44px}
.inventory-line-row .field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  margin:0;
}
.inventory-line-row label{display:block;font-size:11px;font-weight:700;line-height:1.35;margin:0;color:#15392c}
.inventory-line-row input,.inventory-line-row select,
.inventory-item-picker input.inventory-line-item-search{
  width:100%;
  min-width:0;
  min-height:42px;
  height:42px;
  padding:10px 12px;
  font-size:13px;
  border:1px solid #cddbd2;
  border-radius:10px;
  background:#fff;
  color:#173729;
  box-shadow:none;
}
.inventory-line-row input:focus,.inventory-line-row select:focus,
.inventory-item-picker input.inventory-line-item-search:focus{
  border-color:#1c8c5d;
  box-shadow:0 0 0 4px rgba(28,140,93,.10);
  outline:none;
}
.inventory-line-row input[readonly]{background:#f3f7f4;color:#5a6b61}
.inventory-line-item-field{align-self:start}
.inventory-item-picker{position:relative}
.inventory-line-row .inv-remove-line{
  width:36px;height:36px;padding:0;border-radius:999px;
  align-self:center;justify-self:end;font-size:18px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:none;
}
.inventory-quantity-warning{
  display:block;
  min-height:30px;
  margin-top:0;
  color:#b42318;
  font-size:11px;
  line-height:1.35;
  font-weight:600;
}
.inventory-line-location-field input::placeholder{color:#8a9a91}
@media(max-width:1180px){
  .inventory-line-row,.inventory-line-row[data-inv-type="OUT"]{grid-template-columns:minmax(220px,1.8fr) minmax(110px,.75fr) minmax(170px,1.2fr) minmax(160px,1.1fr) 40px}
  .inventory-line-row[data-inv-type="IN"]{grid-template-columns:minmax(220px,1.8fr) minmax(110px,.75fr) minmax(170px,1.1fr) minmax(160px,1.05fr) minmax(170px,1.1fr) 40px}
}
@media(max-width:920px){
  .inventory-line-row,.inventory-line-row[data-inv-type="IN"],.inventory-line-row[data-inv-type="OUT"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inventory-line-row .inventory-line-item-field{grid-column:1/-1}
  .inventory-line-row .inv-remove-line{justify-self:start;align-self:start;margin-top:2px}
}
@media(max-width:640px){
  .inventory-line-row,.inventory-line-row[data-inv-type="IN"],.inventory-line-row[data-inv-type="OUT"]{grid-template-columns:1fr}
  .inventory-line-row .inventory-line-item-field,.inventory-line-row .inventory-line-notes-field{grid-column:auto}
  .inventory-line-row .inv-remove-line{justify-self:end}
}

@media(max-width:600px){body.inventory-mode #appContainer:not([hidden]){padding:10px}.inventory-stat{padding:10px}.inventory-stat-value{font-size:22px}body.inventory-mode #inventoryModule>.welding-heading{gap:10px}body.inventory-mode #inventoryModule>.welding-heading h1{font-size:21px}body.inventory-mode #inventoryModule>.welding-heading p{font-size:12px}.inventory-tabs .module-tab{font-size:11px;padding:7px 9px}.inventory-stock-pagination{align-items:flex-start;flex-direction:column;gap:9px;padding:10px}.inventory-stock-pagination .welding-page-size{margin-left:0;width:100%;justify-content:flex-start}body.inventory-mode #inventoryStockView:not([hidden]) .inventory-fab{bottom:118px;right:18px}body.inventory-mode #inventoryTransactionsView:not([hidden]) .inventory-transactions-fab{bottom:118px;right:18px}body.inventory-mode #inventoryLoansView:not([hidden]) .inventory-loans-fab{bottom:118px;right:18px}}

/* Sidebar Inventaris Gudang, mengikuti referensi navigasi vertikal. */
.inventory-layout{display:flex;gap:14px;flex:1 1 auto;min-height:0;overflow:hidden}
.inventory-sidebar{position:relative;isolation:isolate;display:flex;flex-direction:column;flex:0 0 218px;width:218px;min-height:0;overflow:hidden;border-radius:12px;background:linear-gradient(165deg,#142b39 0%,#234b69 54%,#3476a8 100%);color:#f8fafc;box-shadow:0 4px 16px rgba(18,42,61,.12)}
.inventory-sidebar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;background-image:radial-gradient(circle,rgba(255,255,255,.46) .7px,transparent 1px),radial-gradient(circle,rgba(255,255,255,.26) .7px,transparent 1px);background-size:22px 22px,37px 37px;background-position:3px 8px,12px 18px}
.inventory-sidebar-brand{display:flex;align-items:center;gap:10px;padding:19px 15px 21px;border-bottom:1px solid rgba(255,255,255,.14);font-size:11px;font-weight:800;letter-spacing:1.1px;line-height:1.45;color:#fff}
.inventory-sidebar-mark{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#2e6b9a;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.inventory-sidebar-mark svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.inventory-sidebar-nav{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;padding:13px 8px;overflow:auto;overscroll-behavior:contain}
.inventory-side-link{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:43px;padding:10px 11px;border:0;border-radius:7px;background:transparent;color:#e8f0f6;text-align:left;font-size:12px;font-weight:500;line-height:1.35;cursor:pointer;transition:background .15s ease,color .15s ease}
.inventory-side-link svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.inventory-side-link span{min-width:0}
.inventory-side-link:hover{background:rgba(255,255,255,.12);color:#fff}
.inventory-side-link.active{background:rgba(167,187,83,.2);color:#dff68d;box-shadow:inset 3px 0 0 #a7bb53}
.inventory-content{display:flex;flex:1 1 auto;flex-direction:column;gap:0;min-width:0;min-height:0;overflow:hidden}
body.inventory-mode #inventoryModule .inventory-layout{flex:1 1 auto;min-height:0}
body.inventory-mode #inventoryModule .inventory-content{flex:1 1 auto;min-height:0;overflow:hidden}
body.inventory-mode #inventoryModule .inventory-summary-grid{flex:0 0 auto}
.inventory-loans-list-panel{flex:1 1 auto!important;min-height:0}
.inventory-loans-history-panel{flex:1 1 auto!important;min-height:0;margin-top:0}
body.inventory-mode #inventoryLoansView:not([hidden]) .inventory-loans-pagination,body.inventory-mode #inventoryReturnsView:not([hidden]) .inventory-returns-pagination{flex:0 0 auto}
body.inventory-mode #inventoryLoansView:not([hidden]) .inventory-loans-fab{bottom:86px}
.inventory-loans-history-panel .inventory-table-wrap{min-height:90px}
.inventory-loan-summary{padding:10px 12px;border-radius:8px;background:#f3f7f4;color:#234331;font-size:12px;margin-bottom:12px}
.inventory-followup-caution{padding:11px 13px;border-radius:8px;background:#fff7e6;border:1px solid #f1d69a;color:#7a4d00;font-size:12px;line-height:1.5;margin:12px 0}
.inventory-followup-history-section{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.inventory-followup-history-section h3{font-size:14px;margin:0 0 10px;color:var(--ink)}
.inventory-followup-event-wrap{max-height:280px;min-height:100px;border:1px solid var(--line);border-radius:8px}
.inventory-followup-type{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap}
.inventory-followup-type.damaged{background:#fff3d6;color:#8a5a00;border:1px solid #f4d58a}
.inventory-followup-type.lost{background:#fee4e2;color:#b42318;border:1px solid #fecdca}
.inventory-followup-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap;background:#eef2f6;color:#475467}
.inventory-followup-status.in-progress{background:#e7f0ff;color:#175cd3}
.inventory-followup-status.pending{background:#fff3d6;color:#8a5a00}
.inventory-followup-status.partial{background:#fff3d6;color:#8a5a00}
.inventory-followup-status.done{background:#e8f4ec;color:#17633b}
.inventory-followup-stock-panel{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface, #fff)}
.inventory-followup-stock-panel h3{font-size:14px;margin:0 0 8px;color:var(--ink)}

.inventory-loan-line-row{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(110px,.65fr) minmax(180px,1.2fr) auto;gap:9px;align-items:end;padding:10px;background:#f8faf8;border:1px solid var(--line);border-radius:9px}
.inventory-loan-line-row .field{min-width:0;margin:0}.inventory-loan-line-row label{display:block;font-size:10px;margin-bottom:5px}.inventory-loan-line-row input,.inventory-loan-line-row select{width:100%;min-width:0;min-height:36px;height:36px;padding:7px 8px;font-size:11px}
.inventory-return-line{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(130px,.65fr) minmax(160px,.9fr) minmax(180px,1.1fr);gap:12px;align-items:start;padding:14px;background:#f8faf8;border:1px solid var(--line);border-radius:10px}
.inventory-return-line .field{display:flex;flex-direction:column;align-items:stretch;min-width:0;margin:0}
.inventory-return-line label{display:block;min-height:14px;font-size:10px;line-height:1.35;margin:0 0 6px;color:var(--muted,#667085);font-weight:600}
.inventory-return-line input,.inventory-return-line select{box-sizing:border-box;width:100%;min-width:0;min-height:36px;height:36px;padding:7px 9px;font-size:11px;border-radius:8px}
.inventory-return-line .field:first-child>div{min-width:0;line-height:1.5;overflow-wrap:anywhere}
.inventory-return-line .field:first-child strong{font-weight:750;color:var(--ink)}
.inventory-return-line .field:first-child .inventory-help{margin-top:4px;font-size:10px;line-height:1.4}
@media(max-width:1000px){.inventory-loan-line-row{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-loan-line-row .field:first-child,.inventory-loan-line-row .field:nth-child(3){grid-column:1/-1}.inventory-sidebar{flex-basis:185px;width:185px}.inventory-sidebar-brand{padding:15px 10px;font-size:10px}.inventory-side-link{gap:8px;padding:10px 8px;font-size:11px}.inventory-return-line{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-return-line .field:first-child{grid-column:1/-1}}
@media(max-width:760px){.inventory-loan-line-row{grid-template-columns:1fr 1fr}.inventory-loan-line-row .field:first-child,.inventory-loan-line-row .field:nth-child(3){grid-column:1/-1}.inventory-layout{gap:9px}.inventory-sidebar{flex-basis:155px;width:155px}.inventory-sidebar-brand{letter-spacing:.3px}.inventory-side-link{font-size:10px}.inventory-loans-list-panel,.inventory-loans-history-panel{flex:1 1 0!important}.inventory-return-line{grid-template-columns:1fr 1fr}.inventory-return-line .field:first-child,.inventory-return-line .field:last-child{grid-column:1/-1}}
@media(max-width:600px){.inventory-loan-line-row{grid-template-columns:1fr}.inventory-loan-line-row .field:first-child,.inventory-loan-line-row .field:nth-child(3){grid-column:auto}.inventory-layout{flex-direction:column;gap:8px}.inventory-sidebar{flex:0 0 auto;width:100%;max-height:112px;border-radius:9px}.inventory-sidebar-brand{display:none}.inventory-sidebar-nav{flex-direction:row;align-items:stretch;gap:5px;padding:6px;overflow-x:auto;overflow-y:hidden}.inventory-side-link{flex:0 0 104px;width:104px;min-height:76px;flex-direction:column;justify-content:center;gap:5px;padding:7px 6px;text-align:center;font-size:10px}.inventory-side-link.active{box-shadow:inset 0 -3px 0 #a7bb53}.inventory-side-link svg{width:19px;height:19px}.inventory-content{min-height:0}.inventory-loans-history-panel{margin-top:0}.inventory-return-line{grid-template-columns:1fr}.inventory-return-line .field:first-child,.inventory-return-line .field:last-child{grid-column:auto}}


/* Modul Inventaris, penyelarasan dengan logo IMIP dan tema hijau-kuning.
   Aturan berikut sengaja dibatasi pada mode inventaris agar modul lain tidak berubah. */
body.inventory-mode #appContainer:not([hidden]){
  max-width:none;
  width:100%;
  margin:0;
  padding:12px 18px 16px; /* tepi kiri = padding logo pada topbar */
}
body.inventory-mode #inventoryModule>.inventory-layout{
  flex:1 1 auto;
  min-height:0;
  gap:16px;
}
body.inventory-mode #inventoryModule .inventory-content>.inventory-page-heading{
  flex:0 0 auto;
  margin:0 0 12px;
  gap:12px;
}
body.inventory-mode #inventoryModule .inventory-content>#inventoryAlert{
  flex:0 0 auto;
}
.inventory-sidebar{
  flex:0 0 224px;
  width:224px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  background:linear-gradient(155deg,#085735 0%,#117c46 36%,#27934c 67%,#668f42 100%);
  color:#fff;
  box-shadow:0 8px 24px rgba(11,95,52,.13),inset 0 1px 0 rgba(255,255,255,.2);
}
.inventory-sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:1;
  background:linear-gradient(122deg,rgba(255,255,255,.10) 0%,transparent 41%,rgba(244,211,76,.12) 100%);
}
.inventory-sidebar-nav{
  gap:6px;
  padding:16px 10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.4) transparent;
}
.inventory-side-link{
  gap:11px;
  min-height:45px;
  padding:11px 12px;
  color:#f0f9f1;
  font-size:12px;
  font-weight:600;
  border:1px solid transparent;
  border-radius:9px;
  transition:background .17s ease,color .17s ease,border-color .17s ease;
}
.inventory-side-link svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  stroke-width:1.8;
}
.inventory-side-link:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.09);
  color:#fff;
}
.inventory-side-link:focus-visible{
  outline:2px solid #f4d34c;
  outline-offset:2px;
}
.inventory-side-link.active,
.inventory-side-link.active:hover{
  background:linear-gradient(100deg,rgba(255,255,255,.25),rgba(246,219,108,.12));
  color:#fff;
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 3px 0 0 #f4d34c,0 3px 10px rgba(4,67,33,.09);
}
.inventory-side-link.active svg{color:#fae798}
@media(max-width:1080px){
  body.inventory-mode #appContainer:not([hidden]){padding:12px 12px 16px}
  .inventory-sidebar{flex-basis:193px;width:193px}
}
@media(max-width:760px){
  .inventory-sidebar{flex-basis:160px;width:160px}
  .inventory-sidebar-nav{padding:11px 6px;gap:3px}
  .inventory-side-link{padding:10px 8px;font-size:11px;gap:8px}
  .inventory-layout{gap:10px}
}
@media(max-width:600px){
  body.inventory-mode #appContainer:not([hidden]){padding:10px 12px 12px}
  body.inventory-mode #inventoryModule>.inventory-layout{gap:10px}
  .inventory-sidebar{
    flex:0 0 auto;
    width:100%;
    max-height:105px;
  }
  .inventory-sidebar-nav{padding:7px;gap:5px}
  .inventory-side-link{
    flex:0 0 111px;
    width:111px;
    min-height:74px;
    padding:7px 6px;
    font-size:10px;
  }
  .inventory-side-link.active,
  .inventory-side-link.active:hover{
    box-shadow:inset 0 -3px 0 #f4d34c,0 3px 10px rgba(4,67,33,.09);
  }
  body.inventory-mode #inventoryModule .inventory-content>.inventory-page-heading{margin-bottom:9px}
}


/* Sidebar tidak boleh menyusut saat bahasa Indonesia/Mandarin diubah. */
@media(min-width:1081px){
  body.inventory-mode .inventory-sidebar{flex:0 0 224px;width:224px;min-width:224px}
}
@media(min-width:761px) and (max-width:1080px){
  body.inventory-mode .inventory-sidebar{flex:0 0 193px;width:193px;min-width:193px}
}
@media(min-width:601px) and (max-width:760px){
  body.inventory-mode .inventory-sidebar{flex:0 0 160px;width:160px;min-width:160px}
}

/* Layout dashboard inventaris IMIP; header global tidak diubah. */
body.inventory-mode #appContainer:not([hidden]){background:#f0f4f2}
body.inventory-mode #inventoryModule>.inventory-layout{gap:0;background:#f2f6f4;border:1px solid #dbe6df;border-radius:10px;box-shadow:0 5px 22px rgba(15,58,33,.05)}
body.inventory-mode .inventory-sidebar{flex:0 0 225px!important;width:225px!important;min-width:225px!important;border:0;border-radius:10px 0 0 10px;background:linear-gradient(160deg,#182d2b 0%,#203c34 52%,#15513a 100%);box-shadow:none}
body.inventory-mode .inventory-sidebar::before{background:radial-gradient(circle at 5% 90%,rgba(88,179,129,.22),transparent 54%)}
body.inventory-mode .inventory-sidebar-nav{padding:12px 10px 24px;gap:2px}
.inventory-side-group{padding:17px 12px 6px;color:#96b9a6;font-size:10px;font-weight:800;letter-spacing:1.05px}
.inventory-side-group:first-child{padding-top:5px}
body.inventory-mode .inventory-side-link{border:0;min-height:43px;padding:10px 12px;font-size:11.5px;font-weight:650;color:#deebe2;white-space:normal;box-shadow:none}
body.inventory-mode .inventory-side-link svg{width:18px;height:18px}
body.inventory-mode .inventory-side-link:hover{background:rgba(255,255,255,.1);color:white}
body.inventory-mode .inventory-side-link.active,body.inventory-mode .inventory-side-link.active:hover{background:linear-gradient(95deg,rgba(27,152,92,.38),rgba(27,152,92,.1));border:0;color:#fff;box-shadow:inset 3px 0 0 #9ee0a7}
body.inventory-mode .inventory-side-link.active svg{color:#a6eac1}
/* Menu Jenis Transaksi berada sebagai submenu di bawah Semua Transaksi. */
body.inventory-mode #inventoryModule .inventory-side-transactions{display:flex;flex-direction:column;gap:2px;min-width:0}
body.inventory-mode #inventoryModule .inventory-side-transactions>.inventory-side-link{width:100%}
body.inventory-mode #inventoryModule .inventory-tx-chevron{margin-left:auto;flex:0 0 auto;font-size:16px;line-height:1;transition:transform .16s ease}
body.inventory-mode #inventoryModule #inventoryTabTransactions[aria-expanded="true"] .inventory-tx-chevron{transform:rotate(180deg)}
body.inventory-mode #inventoryModule #inventoryTabReports[aria-expanded="true"] .inventory-tx-chevron{transform:rotate(180deg)}
body.inventory-mode #inventoryModule .inventory-tx-submenu{display:flex;flex-direction:column;gap:2px;margin:0 0 4px 10px;padding:3px 0 3px 8px;border-left:1px solid rgba(166,234,193,.32)}
body.inventory-mode #inventoryModule .inventory-tx-submenu[hidden]{display:none!important}
body.inventory-mode #inventoryModule .inventory-tx-sub-link{min-height:36px;padding:8px 9px 8px 10px;font-size:10.5px;font-weight:550;color:#cfe1d6;background:rgba(255,255,255,.025)}
body.inventory-mode #inventoryModule .inventory-tx-sub-link svg{width:16px;height:16px;flex-basis:16px}
body.inventory-mode #inventoryModule .inventory-tx-sub-link.active{background:linear-gradient(95deg,rgba(27,152,92,.42),rgba(27,152,92,.08));box-shadow:inset 2px 0 0 #9ee0a7;color:#fff}
body.inventory-mode #inventoryModule .inventory-tx-sub-link.active svg{color:#a6eac1}
body.inventory-mode .inventory-content{padding:17px 19px 14px}
body.inventory-mode #inventoryModule .inventory-content>.inventory-page-heading{margin-bottom:12px}
body.inventory-mode #inventoryModule #inventoryDashboardView:not([hidden]){overflow:hidden}
.inventory-dash-scroll{min-height:0;flex:1 1 auto;overflow:auto;scrollbar-width:thin;padding-right:3px}
.inventory-dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}
.inventory-dash-header h2{font-size:18px;margin:0;color:#224b32}.inventory-dash-header p{font-size:11px;color:#6b7a72;margin:3px 0 0}
body.inventory-mode #inventoryModule .inventory-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 13px}
.inventory-dashboard-tile{--c:#348f54;display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;min-height:125px;border:0;border-radius:7px;padding:16px 14px 0;background:var(--c);color:#fff;cursor:pointer;text-align:left;box-shadow:0 3px 12px rgba(12,47,29,.08);transition:transform .12s ease}
.inventory-dashboard-tile:hover{transform:translateY(-2px)}.inventory-dashboard-tile:focus-visible{outline:3px solid #fad886;outline-offset:2px}
.inventory-dashboard-number{position:relative;font-size:31px;font-weight:850;line-height:1;z-index:1}
.inventory-dashboard-label{position:relative;margin:11px 0 12px;font-size:11.5px;line-height:1.35;font-weight:700;z-index:1;max-width:85%}
.inventory-dashboard-symbol{position:absolute;right:14px;top:13px;opacity:.18;font-size:68px;font-weight:900;color:#143828}
.inventory-dashboard-foot{display:block;text-align:center;margin:auto -14px 0;background:rgba(0,0,0,.12);padding:8px;font-size:10px;font-weight:650}
.inv-tile-green{--c:#3c985b}.inv-tile-blue{--c:#3e84b5}.inv-tile-orange{--c:#e49b35}.inv-tile-red{--c:#c65b4b}.inv-tile-indigo{--c:#6864a8}.inv-tile-teal{--c:#227d80}.inv-tile-purple{--c:#8469a2}.inv-tile-cyan{--c:#40a7c7}
.inventory-dashboard-bottom{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(215px,.8fr);gap:12px}
.inventory-dashboard-panel{background:#fff;border:1px solid #dae8dd;border-radius:8px;min-height:195px;overflow:hidden}
.inventory-dashboard-panel-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid #e5ebe7;gap:6px}
.inventory-dashboard-panel-head h3{font-size:13px;font-weight:800;margin:0;color:#244932}
.inventory-inline-btn{border:0;background:transparent;color:#168047;font-size:11px;font-weight:700;cursor:pointer}
.inventory-dash-recent{max-height:278px;overflow:auto}.inventory-dash-table{min-width:480px;font-size:11px}.inventory-dash-table td,.inventory-dash-table th{padding:9px 11px}
.inventory-dashboard-quick{padding:9px 13px;display:flex;flex-direction:column}
.inventory-dashboard-quick button{padding:13px 6px;text-align:left;border:0;border-bottom:1px solid #e7efe9;background:#fff;color:#246943;font-size:12px;font-weight:700;cursor:pointer}
.inventory-dashboard-quick button:hover{background:#f0f8f2}.inventory-dashboard-quick button:last-child{border:0}
.inventory-report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px;overflow:auto}
.inventory-report-grid article{border:1px solid #dce7e0;border-radius:10px;min-height:190px;padding:17px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:#fbfdfc}
.inventory-report-grid h3{font-size:14px;color:#275c3c;margin:0}.inventory-report-grid p{flex:1;font-size:12px;color:#65776c;line-height:1.6;margin:0}
@media(max-width:1130px){body.inventory-mode #inventoryModule .inventory-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){body.inventory-mode .inventory-sidebar{flex:0 0 195px!important;width:195px!important;min-width:195px!important}body.inventory-mode #inventoryModule .inventory-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-dashboard-bottom{grid-template-columns:1fr}.inventory-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){body.inventory-mode .inventory-sidebar{flex:0 0 160px!important;width:160px!important;min-width:160px!important}body.inventory-mode .inventory-content{padding:12px}}
@media(max-width:600px){body.inventory-mode #inventoryModule>.inventory-layout{flex-direction:column}body.inventory-mode .inventory-sidebar{flex:0 0 auto!important;width:100%!important;min-width:0!important;max-height:105px;border-radius:10px 10px 0 0}body.inventory-mode .inventory-sidebar-nav{flex-direction:row;align-items:stretch;overflow-x:auto;padding:7px;gap:6px}body.inventory-mode .inventory-side-group{display:none}body.inventory-mode .inventory-side-link{flex:0 0 111px;width:111px;min-height:74px;flex-direction:column;justify-content:center;gap:6px;text-align:center;font-size:10px}body.inventory-mode .inventory-side-link.active{box-shadow:inset 0 -3px 0 #9ee0a7}body.inventory-mode #inventoryModule .inventory-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.inventory-dashboard-tile{min-height:113px;padding:12px 10px 0}.inventory-dashboard-number{font-size:25px}.inventory-dashboard-foot{margin-left:-10px;margin-right:-10px}.inventory-report-grid{grid-template-columns:1fr}.inventory-dash-header{align-items:flex-start}.inventory-dashboard-bottom{grid-template-columns:1fr}}
@media(max-width:600px){
  body.inventory-mode #inventoryModule .inventory-side-transactions{flex:0 0 111px;width:111px}
  body.inventory-mode #inventoryModule .inventory-side-transactions>.inventory-side-link{width:100%}
  body.inventory-mode #inventoryModule.inventory-transactions-expanded .inventory-sidebar{max-height:260px!important}
  body.inventory-mode #inventoryModule.inventory-transactions-expanded .inventory-sidebar-nav{flex-wrap:wrap;align-content:flex-start;overflow:auto;max-height:250px}
  body.inventory-mode #inventoryModule.inventory-transactions-expanded .inventory-side-transactions{flex:0 0 100%;width:100%}
  body.inventory-mode #inventoryModule.inventory-transactions-expanded .inventory-side-transactions>#inventoryTabTransactions{flex:0 0 100%;width:100%;min-height:48px;flex-direction:row;justify-content:flex-start;text-align:left}
  body.inventory-mode #inventoryModule.inventory-transactions-expanded .inventory-tx-submenu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0 0 6px 8px;padding:5px 0 5px 7px}
  body.inventory-mode #inventoryModule.inventory-transactions-expanded .inventory-tx-sub-link{width:100%;min-height:46px;flex:0 0 auto;flex-direction:row;justify-content:flex-start;text-align:left;font-size:10px}
}

/* IMIP: dashboard inventaris terintegrasi, semua aturan dibatasi ke mode inventaris */
body.inventory-mode #appContainer:not([hidden]){width:100%;max-width:none;padding:0;margin:0;background:#edf3f8}
body.inventory-mode #inventoryModule{height:100%;min-height:0;display:flex;flex-direction:column}
body.inventory-mode #inventoryModule>.inventory-layout{flex:1 1 auto;display:flex;gap:0;min-height:0;background:#edf3f8;border:0;border-radius:0;box-shadow:none;overflow:hidden}
body.inventory-mode #inventoryModule .inventory-sidebar{flex:0 0 250px!important;width:250px!important;min-width:250px!important;border:0;border-radius:0;background:linear-gradient(169deg,#06573d,#034c53 49%,#0b324c);box-shadow:none}
body.inventory-mode #inventoryModule .inventory-sidebar::before{background:radial-gradient(ellipse at 5% 95%,rgba(0,221,125,.22),transparent 57%)}
body.inventory-mode #inventoryModule .inventory-sidebar-nav{display:flex;flex-direction:column;gap:5px;padding:20px 9px;overflow-y:auto;overflow-x:hidden}
body.inventory-mode #inventoryModule .inventory-side-group{display:none!important}
body.inventory-mode #inventoryModule .inventory-side-link{display:flex;flex:0 0 auto;width:100%;min-height:52px;gap:14px;padding:13px 17px;border-radius:6px;border:0;color:#e9f7f4;font-size:14px;font-weight:500;box-shadow:none;white-space:normal;text-align:left}
body.inventory-mode #inventoryModule .inventory-side-link svg{width:21px;height:21px;flex:0 0 21px;stroke:#eafaf5}
body.inventory-mode #inventoryModule .inventory-side-link:hover{background:rgba(255,255,255,.13);color:#fff}
body.inventory-mode #inventoryModule .inventory-side-link.active{background:linear-gradient(90deg,rgba(35,184,124,.55),rgba(47,164,167,.35));color:#fff;font-weight:700;box-shadow:inset 4px 0 0 #62df93}
body.inventory-mode #inventoryModule .inventory-content{min-width:0;overflow:hidden;padding:20px 22px 18px;background:#edf3f8}
body.inventory-mode #inventoryModule .inventory-content>.inventory-page-heading{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:0 0 16px;flex:0 0 auto}
body.inventory-mode #inventoryModule .inv-page-row{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:18px}
body.inventory-mode #inventoryModule .inv-page-title{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap}
body.inventory-mode #inventoryModule .inv-page-title h1{font-size:clamp(22px,2vw,29px);letter-spacing:-.5px;line-height:1.2;color:#19263b;margin:0;font-weight:800}
body.inventory-mode #inventoryModule #inventoryContextLabel{margin:0;white-space:normal}
body.inventory-mode #inventoryModule:has(#inventoryDashboardView:not([hidden])) .inventory-page-heading .welding-actions{display:none}
body.inventory-mode #inventoryModule #inventoryDashboardView:not([hidden]){display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
body.inventory-mode #inventoryModule .inventory-dash-scroll{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;padding-right:4px}
body.inventory-mode #inventoryModule .inventory-dash-header{display:none}
body.inventory-mode #inventoryModule .inventory-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 20px}
body.inventory-mode #inventoryModule .inventory-dashboard-tile{display:flex;flex-direction:column;min-height:138px;padding:16px 16px 0;border:0;border-radius:5px;background:var(--tone);box-shadow:0 2px 8px rgba(13,46,74,.08);color:#fff;text-align:left;overflow:hidden}
body.inventory-mode #inventoryModule .inventory-dashboard-number{font-size:clamp(28px,3vw,43px);font-weight:800;line-height:1.05;z-index:2}
body.inventory-mode #inventoryModule .inventory-dashboard-label{font-size:clamp(11px,1vw,15px);font-weight:600;line-height:1.3;margin:9px 0 12px;max-width:80%;z-index:2}
body.inventory-mode #inventoryModule .inventory-dashboard-symbol{position:absolute;top:20px;right:16px;opacity:.20;color:#09314b}
body.inventory-mode #inventoryModule .inventory-dashboard-symbol svg{width:72px;height:72px}
body.inventory-mode #inventoryModule .inventory-dashboard-foot{margin:auto -16px 0;padding:9px;background:rgba(0,0,0,.13);font-size:11px;font-weight:700;text-align:center}
body.inventory-mode #inventoryModule .inv-tile-green{--tone:#19a75a}body.inventory-mode #inventoryModule .inv-tile-gold{--tone:#efa22d}body.inventory-mode #inventoryModule .inv-tile-coral{--tone:#da503e}body.inventory-mode #inventoryModule .inv-tile-sky{--tone:#25abe1}body.inventory-mode #inventoryModule .inv-tile-ocean{--tone:#257abd}body.inventory-mode #inventoryModule .inv-tile-violet{--tone:#6655ad}body.inventory-mode #inventoryModule .inv-tile-orange{--tone:#f77c29}body.inventory-mode #inventoryModule .inv-tile-blue{--tone:#1666b1}
body.inventory-mode #inventoryModule .inventory-dashboard-bottom{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px}
body.inventory-mode #inventoryModule .inventory-dashboard-panel{min-width:0;min-height:235px;background:#fff;border:1px solid #dce6ed;border-top:3px solid #38adea;border-radius:5px;box-shadow:0 3px 12px rgba(20,51,75,.045);overflow:hidden}
body.inventory-mode #inventoryModule .inventory-dashboard-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 14px;border:0}
body.inventory-mode #inventoryModule .inventory-dashboard-panel-head h3{display:flex;align-items:center;gap:10px;min-width:0;margin:0;font-size:15px;font-weight:800;color:#24334b}
body.inventory-mode #inventoryModule .inv-panel-icon{color:#0986ce;font-size:23px;line-height:1}body.inventory-mode #inventoryModule .inv-panel-icon.inv-danger{color:#dc3934}
body.inventory-mode #inventoryModule .inventory-inline-btn{font-size:11px;color:#078ed9;white-space:nowrap}
body.inventory-mode #inventoryModule .inventory-dash-recent{overflow-x:auto;padding:0 9px 10px}
body.inventory-mode #inventoryModule .inventory-dash-table{width:100%;min-width:570px;border-collapse:collapse;table-layout:auto}
body.inventory-mode #inventoryModule .inventory-low-panel .inventory-dash-table{min-width:430px}
body.inventory-mode #inventoryModule .inventory-dash-table th{position:static;padding:9px 7px;background:#f1f7fb;font-size:10px;color:#354657;white-space:nowrap;border:1px solid #e5edf3}
body.inventory-mode #inventoryModule .inventory-dash-table td{padding:9px 7px;font-size:10.5px;color:#354255;border:1px solid #e9eef2;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
body.inventory-mode #inventoryModule .inventory-dash-table tr:nth-child(even){background:#fbfdff}
body.inventory-mode #inventoryModule .inv-type-tag{display:inline-flex;padding:3px 7px;border-radius:3px;background:#687687;color:white;font-size:10px;font-weight:700}
body.inventory-mode #inventoryModule .inv-type-tag.in{background:#16a35a}body.inventory-mode #inventoryModule .inv-type-tag.out{background:#d7493b}body.inventory-mode #inventoryModule .inv-type-tag.loan{background:#3c83d3}body.inventory-mode #inventoryModule .inv-type-tag.return{background:#f57b25}
body.inventory-mode #inventoryModule .inv-low-number{color:#cf2a25!important;font-weight:800}
@media(min-width:1281px){body.inventory-mode .module-subheader-inner{padding-left:272px}}
@media(min-width:1051px) and (max-width:1280px){body.inventory-mode .module-subheader-inner{padding-left:231px}}
@media(min-width:601px) and (max-width:1050px){body.inventory-mode .module-subheader-inner{padding-left:208px}}
@media(max-width:1280px){body.inventory-mode #inventoryModule .inventory-sidebar{flex:0 0 215px!important;width:215px!important;min-width:215px!important}body.inventory-mode #inventoryModule .inventory-summary-grid{gap:12px}body.inventory-mode #inventoryModule .inventory-content{padding:16px}}
@media(max-width:1050px){body.inventory-mode #inventoryModule .inventory-sidebar{flex:0 0 192px!important;width:192px!important;min-width:192px!important}body.inventory-mode #inventoryModule .inventory-side-link{font-size:12px;gap:10px;padding:11px 9px}body.inventory-mode #inventoryModule .inventory-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.inventory-mode #inventoryModule .inventory-dashboard-bottom{grid-template-columns:1fr}}
@media(max-width:600px){body.inventory-mode .module-subheader-inner{padding-left:12px}body.inventory-mode #inventoryModule>.inventory-layout{flex-direction:column}body.inventory-mode #inventoryModule .inventory-sidebar{flex:0 0 auto!important;width:100%!important;min-width:0!important;max-height:85px}body.inventory-mode #inventoryModule .inventory-sidebar-nav{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:7px;gap:5px}body.inventory-mode #inventoryModule .inventory-side-link{flex:0 0 110px!important;width:110px!important;min-height:68px;padding:8px 6px;flex-direction:column;justify-content:center;text-align:center;font-size:10px;gap:5px}body.inventory-mode #inventoryModule .inventory-content{padding:12px}body.inventory-mode #inventoryModule .inventory-summary-grid{gap:10px}body.inventory-mode #inventoryModule .inventory-dashboard-tile{min-height:114px;padding:11px 11px 0}body.inventory-mode #inventoryModule .inventory-dashboard-number{font-size:27px}body.inventory-mode #inventoryModule .inventory-dashboard-label{font-size:11px}body.inventory-mode #inventoryModule .inventory-dashboard-symbol svg{width:48px;height:48px}body.inventory-mode #inventoryModule .inventory-dashboard-foot{margin-left:-11px;margin-right:-11px;font-size:10px}body.inventory-mode #inventoryModule .inv-page-title h1{font-size:21px}}

/* Barang masuk: nota terkompresi, pratinjau, dan lightbox pembesaran. */
.inventory-tx-detail-meta{margin:0 0 14px;max-width:560px}
.inventory-origin-hint,.inventory-receipt-hint{font-size:11px;color:var(--muted);margin:5px 0 0;line-height:1.45}
.inventory-receipt-preview{min-height:92px;max-width:260px;border:1px dashed #b7c9bd;border-radius:10px;background:#f7faf7;padding:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;text-align:center;overflow:hidden}
.inventory-receipt-preview button{border:0;background:transparent;padding:0;cursor:zoom-in;max-width:100%;display:block}
.inventory-receipt-preview img{display:block;max-width:100%;max-height:180px;object-fit:contain;border-radius:6px}
.inventory-receipt-thumb{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d7e2da;border-radius:7px;background:#f5faf6;padding:3px;cursor:zoom-in;max-width:74px}
.inventory-receipt-thumb img{display:block;width:64px;height:48px;object-fit:contain;border-radius:4px}
.inventory-receipt-lightbox-body{padding:12px;background:#eef3ef;max-height:calc(94vh - 74px);overflow:auto;text-align:center}
.inventory-receipt-lightbox-body img{display:block;width:100%;height:auto;max-width:none;margin:0 auto;object-fit:contain;transform-origin:top center}
.inventory-receipt-zoom-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inventory-receipt-zoom-controls button{min-width:34px;min-height:30px}
.inventory-receipt-zoom-label{font-size:12px;color:var(--muted);min-width:48px;text-align:center}
@media(max-width:600px){.inventory-tx-detail-meta{max-width:none}.inventory-receipt-preview{max-width:100%}.inventory-receipt-lightbox-body{padding:6px}}


/* Transaction form polish: understated premium back button and full-width add-row control. */
#inventoryTxBackBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:9px 17px;
  border:1px solid #d1dfd4;border-radius:999px;
  background:linear-gradient(135deg,#fffefa 0%,#f0f7f1 100%);
  color:#20543b;font-size:12px;font-weight:650;letter-spacing:.12px;
  box-shadow:0 3px 10px rgba(25,76,48,.08),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
#inventoryTxBackBtn:hover{
  transform:translateY(-1px);border-color:#a9cbb4;
  background:linear-gradient(135deg,#ffffff 0%,#e7f3ea 100%);
  box-shadow:0 7px 16px rgba(25,76,48,.13),inset 0 1px 0 rgba(255,255,255,.95);
}
#inventoryTxBackBtn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(25,76,48,.08)}
#inventoryTxBackBtn:focus-visible{outline:3px solid rgba(38,132,83,.22);outline-offset:3px}
.inventory-add-line-bottom{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:42px;margin:10px 0 0;padding:7px 16px;
  border:1px dashed #a8cbb5;border-radius:12px;
  background:linear-gradient(90deg,#f5faf6 0%,#ffffff 50%,#f5faf6 100%);
  color:#19724a;font-size:25px;font-weight:400;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.inventory-add-line-bottom:hover{
  border-style:solid;border-color:#72b38a;
  background:linear-gradient(90deg,#eaf6ee 0%,#fafffb 50%,#eaf6ee 100%);
  box-shadow:0 4px 12px rgba(24,112,70,.09);transform:translateY(-1px)
}
.inventory-add-line-bottom:active{transform:translateY(0);box-shadow:none}
.inventory-add-line-bottom:focus-visible{outline:3px solid rgba(38,132,83,.2);outline-offset:2px}
@media(max-width:640px){#inventoryTxBackBtn{min-height:38px;padding:8px 14px}.inventory-add-line-bottom{min-height:40px}}


/* Refined transaction item details in the Barang Masuk / All Transactions table. */
.inventory-table td.inventory-tx-items-cell{width:34%;min-width:320px;max-width:560px;padding:8px 10px;vertical-align:middle}
.inventory-tx-items-list{display:flex;flex-direction:column;gap:5px;min-width:0}
.inventory-tx-item-line{display:flex;flex-direction:column;gap:3px;min-width:0;padding:5px 8px;border:1px solid #e3ece6;border-left:3px solid #289663;border-radius:7px;background:linear-gradient(110deg,#fbfefc 0%,#f5faf6 100%)}
.inventory-tx-item-main{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.inventory-tx-item-name{min-width:0;color:#183d2a;font-size:11px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.inventory-tx-item-qty{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border-radius:6px;background:#e3f4e9;color:#146b43;font-size:10px;font-weight:800;line-height:1.2;white-space:nowrap}
.inventory-tx-item-meta{display:flex;align-items:flex-start;gap:5px;color:#77877d;font-size:10px;line-height:1.3;overflow-wrap:anywhere}
.inventory-tx-item-meta-dot{flex:0 0 5px;width:5px;height:5px;margin-top:3px;border-radius:50%;background:#a4b9aa}
.inventory-tx-items-empty{color:#98a49c;font-size:11px}
@media(max-width:760px){.inventory-table td.inventory-tx-items-cell{min-width:260px;max-width:none}.inventory-tx-item-line{padding:6px 8px}}


/* Plain aligned columns for Barang Masuk transaction details. */
.inventory-inbound-cell-lines{display:flex;flex-direction:column;gap:0;min-width:100px}
.inventory-inbound-cell-line{padding:7px 2px;min-height:31px;display:flex;align-items:center;line-height:1.35;overflow-wrap:anywhere;border-bottom:1px solid #edf1ee;color:#294236;font-size:12px}
.inventory-inbound-cell-line:last-child{border-bottom:0}
.inventory-table th{white-space:nowrap}
@media(max-width:760px){.inventory-inbound-cell-line{min-height:34px;padding:8px 2px}}

/* Location-aware transfer rows: dimensions follow source and destination, hide cost input. */
.inventory-line-row[data-inv-type="TRANSFER"]{grid-template-columns:minmax(185px,1.8fr) minmax(90px,.68fr) minmax(175px,1.1fr) minmax(175px,1.1fr) 40px;gap:12px}
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-cost-field{display:none!important}
.inventory-line-rack-field input,.inventory-line-rack-field select{min-width:0;width:100%;height:42px;border-radius:10px;border:1px solid #cddbd2;background:#fff;padding:8px 11px}
#inventoryTransferModeField{max-width:340px;margin:4px 0 12px}
#inventoryTransferModeField select{height:42px;border-radius:10px}
@media(max-width:1080px){.inventory-line-row[data-inv-type="TRANSFER"]{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-item-field{grid-column:1/-1}}
@media(max-width:600px){.inventory-line-row[data-inv-type="TRANSFER"]{grid-template-columns:minmax(0,1fr)}.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-item-field{grid-column:auto}}

/* Transfer: aligned transaction type/date with notes underneath */
.inventory-transfer-top{padding:0 0 18px;margin-bottom:16px;border-bottom:1px solid #e5ede7}
.inventory-transfer-top[hidden],.inventory-transfer-top [hidden]{display:none!important}
.inventory-transfer-top-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:end}
.inventory-transfer-top .field{margin:0;min-width:0}
.inventory-transfer-top .field label{font-weight:650;color:#214837}
.inventory-transfer-top #inventoryTransferNotesSlot{margin-top:14px}
.inventory-transfer-top #inventoryTransferNotesSlot .field{max-width:none;width:100%}
.inventory-transfer-top #inventoryTransferNotesSlot input{width:100%}
.inventory-line-destination-rack-field input[data-inv-line-new-rack]{margin-top:7px}
.inventory-line-row[data-inv-type="TRANSFER"]{grid-template-columns:minmax(190px,1.65fr) minmax(90px,.7fr) minmax(160px,1fr) minmax(160px,1fr) minmax(170px,1fr) 40px}
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-destination-rack-field{min-width:0}
@media(max-width:1180px){.inventory-line-row[data-inv-type="TRANSFER"]{grid-template-columns:repeat(3,minmax(0,1fr))}.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-item-field{grid-column:span 2}}
@media(max-width:740px){.inventory-line-row[data-inv-type="TRANSFER"]{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-item-field{grid-column:1/-1}.inventory-transfer-top-grid{grid-template-columns:1fr}}
@media(max-width:440px){.inventory-line-row[data-inv-type="TRANSFER"]{grid-template-columns:1fr}.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-item-field{grid-column:auto}}

/* Proportional layout refinement for Stock Transfer form */
.inventory-transfer-top{padding:0 0 20px;margin-bottom:18px}
.inventory-transfer-top-grid{grid-template-columns:minmax(300px,0.82fr) minmax(320px,1fr);gap:20px 22px;align-items:end}
.inventory-transfer-top #inventoryTransferNotesSlot{margin-top:12px}
.inventory-transfer-top #inventoryTransferNotesSlot input,
.inventory-transfer-top #inventoryTransferNotesSlot textarea{min-height:42px}

.inventory-line-row[data-inv-type="TRANSFER"]{
  grid-template-columns:minmax(250px,2.15fr) minmax(92px,.62fr) minmax(170px,1.1fr) minmax(170px,1.1fr) minmax(190px,1.18fr) 42px;
  gap:14px;
  align-items:start;
}
.inventory-line-row[data-inv-type="TRANSFER"] .field{align-self:start}
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-qty-field{max-width:120px}
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-source-field,
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-destination-field,
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-source-rack-field,
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-destination-rack-field{min-width:0}
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-destination-rack-field select,
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-source-rack-field select,
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-destination-field select,
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-source-field select{width:100%}
.inventory-line-row[data-inv-type="TRANSFER"] .inv-remove-line{align-self:center;justify-self:end}
.inventory-line-row[data-inv-type="TRANSFER"] [hidden]{display:none !important}
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-item-field .inventory-item-picker,
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-item-field .inventory-line-item-select{width:100%}

#inventoryTxForm .inventory-help{margin-top:8px}
#inventoryAddLineBtn{margin-top:2px}

@media(max-width:1320px){
  .inventory-line-row[data-inv-type="TRANSFER"]{grid-template-columns:minmax(220px,1.9fr) minmax(90px,.62fr) minmax(155px,1fr) minmax(155px,1fr) minmax(175px,1.08fr) 40px}
}
@media(max-width:1160px){
  .inventory-transfer-top-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inventory-line-row[data-inv-type="TRANSFER"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-item-field{grid-column:1 / span 2}
  .inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-qty-field{max-width:none}
}
@media(max-width:820px){
  .inventory-transfer-top-grid{grid-template-columns:1fr}
  .inventory-line-row[data-inv-type="TRANSFER"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-item-field{grid-column:1 / -1}
  .inventory-line-row[data-inv-type="TRANSFER"] .inv-remove-line{justify-self:start}
}
@media(max-width:560px){
  .inventory-line-row[data-inv-type="TRANSFER"]{grid-template-columns:1fr}
  .inventory-line-row[data-inv-type="TRANSFER"] .inventory-line-item-field{grid-column:auto}
  .inventory-line-row[data-inv-type="TRANSFER"] .inv-remove-line{justify-self:end}
}


/* Saran Catatan khusus per jenis transaksi; tidak menggunakan autocomplete browser. */
#inventoryStocktakeHelp[hidden]{display:none!important}
#inventoryTxNotesField{position:relative}
#inventoryTxNotes[aria-expanded="true"]{border-color:#268554}
#inventoryNotesSuggestions[hidden]{display:none!important}
#inventoryNotesSuggestions{
  position:absolute;z-index:160;left:0;right:0;top:calc(100% + 5px);
  padding:5px;max-height:216px;overflow-y:auto;
  border:1px solid #d7e4dc;border-radius:11px;
  background:#fff;box-shadow:0 12px 28px rgba(24,57,41,.13);
}
#inventoryNotesSuggestions .inventory-note-option{
  display:block;width:100%;border:0;border-radius:7px;
  padding:10px 12px;margin:0;text-align:left;
  background:transparent;color:#203b2e;cursor:pointer;
  font-size:12px;font-weight:500;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#inventoryNotesSuggestions .inventory-note-option:hover,
#inventoryNotesSuggestions .inventory-note-option.is-active{
  background:#eaf6ef;color:#086238;
}

/* Transfer UX: transaction type, date and notes on a single proportional row. */
#inventoryTransferTop .inventory-transfer-top-grid{
  display:grid;
  grid-template-columns:minmax(210px,1fr) minmax(220px,1fr) minmax(270px,1.4fr);
  align-items:end;
  gap:16px;
}
#inventoryTransferTop #inventoryTransferModeField{
  max-width:none;
  margin:0;
  width:100%;
}
#inventoryTransferTop #inventoryTransferNotesSlot{margin:0;min-width:0;width:100%}
#inventoryTransferTop #inventoryTransferDateSlot{min-width:0}
#inventoryTransferTop #inventoryTransferDateSlot .field,
#inventoryTransferTop #inventoryTransferNotesSlot .field{margin:0;width:100%;min-width:0}
#inventoryTransferTop #inventoryTransferDateSlot input,
#inventoryTransferTop #inventoryTransferNotesSlot input,
#inventoryTransferTop #inventoryTransferModeField select{
  width:100%;height:42px;min-height:42px;box-sizing:border-box;
}
/* The dropdown and the new-rack input take turns in the exact same cell. */
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-rack-destination-control{
  position:relative;width:100%;min-width:0;
}
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-rack-destination-control select,
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-rack-destination-control input{
  width:100%;height:42px;min-height:42px;margin:0;box-sizing:border-box;
}
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-rack-destination-control input:not([hidden]){padding-right:39px}
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-rack-back-choice{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:30px;height:30px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:7px;background:#eaf4ed;color:#0e6f48;
  font-size:20px;cursor:pointer;
}
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-rack-back-choice:hover{background:#d5ecdf}
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-rack-back-choice:focus-visible{
  outline:2px solid #168655;outline-offset:2px;
}
.inventory-line-row[data-inv-type="TRANSFER"] .inventory-rack-destination-control [hidden]{display:none!important}
@media(max-width:1080px){
  #inventoryTransferTop .inventory-transfer-top-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #inventoryTransferTop #inventoryTransferNotesSlot{grid-column:1/-1}
}
@media(max-width:660px){
  #inventoryTransferTop .inventory-transfer-top-grid{grid-template-columns:minmax(0,1fr)}
  #inventoryTransferTop #inventoryTransferNotesSlot{grid-column:auto}
}

/* Inventory: consistent Back on main page title and stacked actions on every form. */
body.inventory-mode #inventoryModule .inventory-page-heading .inv-page-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  gap:18px;
}
body.inventory-mode #inventoryModule .inventory-page-heading .inv-page-title{min-width:0}
body.inventory-mode #inventoryModule #inventoryPageBackBtn:not([hidden]){
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 20px;
  border:1px solid #bcd6c6;
  border-radius:999px;
  background:linear-gradient(145deg,#ffffff,#eff8f1);
  color:#0c6643;
  font-size:12px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(20,94,57,.08), inset 0 1px 0 #fff;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
body.inventory-mode #inventoryModule #inventoryPageBackBtn:hover{
  border-color:#78b998;
  background:linear-gradient(145deg,#ffffff,#e5f4e9);
  box-shadow:0 7px 18px rgba(20,94,57,.14);
  transform:translateY(-1px);
}
body.inventory-mode #inventoryModule #inventoryPageBackBtn:focus-visible{
  outline:3px solid rgba(20,145,87,.25);
  outline-offset:3px;
}
body.inventory-mode #inventoryModule #inventoryPageBackBtn[hidden]{display:none!important}
/* Old panel-level Back buttons are kept in the DOM for existing navigation callbacks. */
body.inventory-mode #inventoryModule :is(
  #inventoryItemBackBtn,#inventoryTxBackBtn,#inventoryWarehouseBackBtn,
  #inventoryLoanBackBtn,#inventoryLoanReturnBackBtn
){display:none!important}
/* Keep transfer's obsolete panel heading hidden, but no floating Back button. */
#inventoryTransactionFormView.inventory-transfer-view > .panel > .panel-head{
  flex:0 0 0px!important;
  height:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:hidden!important;
}
#inventoryTransactionFormView.inventory-transfer-view > .panel > .panel-head > div{display:none!important}
/* Save/Cancel: identical full-width buttons on all five inventory forms. */
body.inventory-mode #inventoryModule form:is(
  #inventoryItemForm,#inventoryTransactionForm,#inventoryWarehouseForm,
  #inventoryLoanForm,#inventoryLoanReturnForm
) > .actions{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:11px;
  justify-items:stretch;
  width:100%;
  margin:24px 0 4px;
}
body.inventory-mode #inventoryModule form:is(
  #inventoryItemForm,#inventoryTransactionForm,#inventoryWarehouseForm,
  #inventoryLoanForm,#inventoryLoanReturnForm
) > .actions > button{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-width:0;
  min-height:48px;
  padding:12px 18px;
  margin:0;
  border-radius:11px;
  font-size:13px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:.01em;
  transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
body.inventory-mode #inventoryModule form:is(
  #inventoryItemForm,#inventoryTransactionForm,#inventoryWarehouseForm,
  #inventoryLoanForm,#inventoryLoanReturnForm
) > .actions > button[type="submit"]{
  border:1px solid #078052;
  background:linear-gradient(135deg,#0e9460,#057c50);
  color:#fff;
  box-shadow:0 6px 15px rgba(7,119,76,.14);
}
body.inventory-mode #inventoryModule form:is(
  #inventoryItemForm,#inventoryTransactionForm,#inventoryWarehouseForm,
  #inventoryLoanForm,#inventoryLoanReturnForm
) > .actions > button[type="submit"]:not(:disabled):hover{
  background:linear-gradient(135deg,#0b8657,#056c46);
  box-shadow:0 8px 18px rgba(7,119,76,.2);
}
body.inventory-mode #inventoryModule form:is(
  #inventoryItemForm,#inventoryTransactionForm,#inventoryWarehouseForm,
  #inventoryLoanForm,#inventoryLoanReturnForm
) > .actions > button[type="button"]{
  border:1px solid #cbded2;
  background:#f4f8f5;
  color:#215540;
  box-shadow:0 2px 7px rgba(25,57,41,.04);
}
body.inventory-mode #inventoryModule form:is(
  #inventoryItemForm,#inventoryTransactionForm,#inventoryWarehouseForm,
  #inventoryLoanForm,#inventoryLoanReturnForm
) > .actions > button[type="button"]:hover{
  background:#eaf4ed;
  border-color:#a9ceb6;
}
body.inventory-mode #inventoryModule form:is(
  #inventoryItemForm,#inventoryTransactionForm,#inventoryWarehouseForm,
  #inventoryLoanForm,#inventoryLoanReturnForm
) > .actions > button:focus-visible{
  outline:3px solid rgba(20,145,87,.3);
  outline-offset:2px;
}
@media(max-width:640px){
  body.inventory-mode #inventoryModule .inventory-page-heading .inv-page-row{gap:8px}
  body.inventory-mode #inventoryModule #inventoryPageBackBtn:not([hidden]){min-height:38px;padding:8px 13px;font-size:11px}
  body.inventory-mode #inventoryModule form:is(
    #inventoryItemForm,#inventoryTransactionForm,#inventoryWarehouseForm,
    #inventoryLoanForm,#inventoryLoanReturnForm
  ) > .actions > button{min-height:46px}
}


/* BACK BUTTONS: only inside actual inventory forms, never on list-page headings. */
body.inventory-mode #inventoryModule :is(#inventoryItemBackBtn,#inventoryTxBackBtn,#inventoryWarehouseBackBtn,#inventoryLoanBackBtn,#inventoryLoanReturnBackBtn){
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:40px;
  padding:9px 18px;
  border:1px solid #bcd6c6;
  border-radius:999px;
  background:linear-gradient(145deg,#fff,#eff8f1);
  color:#0c6643;
  font-size:12px;
  line-height:1.25;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(20,94,57,.08),inset 0 1px 0 #fff;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
body.inventory-mode #inventoryModule :is(#inventoryItemBackBtn,#inventoryTxBackBtn,#inventoryWarehouseBackBtn,#inventoryLoanBackBtn,#inventoryLoanReturnBackBtn):hover{
  background:linear-gradient(145deg,#fff,#e3f4e9);
  box-shadow:0 6px 14px rgba(20,94,57,.14);
  transform:translateY(-1px);
}
/* The heading is already shown by the parent Inventory page. The IN/OUT
   and Transfer form panels show only their navigation action (no duplicate title). */
body.inventory-mode #inventoryModule #inventoryTransactionFormView:is(.inventory-transfer-view,.inventory-transaction-titleless) > .panel > .panel-head{
  display:flex!important;
  flex:0 0 auto!important;
  justify-content:flex-end!important;
  align-items:center!important;
  height:auto!important;
  min-height:0!important;
  padding:12px 20px!important;
  margin:0!important;
  border-bottom:1px solid #e5ede7!important;
  overflow:visible!important;
}
body.inventory-mode #inventoryModule #inventoryTransactionFormView:is(.inventory-transfer-view,.inventory-transaction-titleless) > .panel > .panel-head > div{
  display:none!important;
}
@media(max-width:640px){
  body.inventory-mode #inventoryModule :is(#inventoryItemBackBtn,#inventoryTxBackBtn,#inventoryWarehouseBackBtn,#inventoryLoanBackBtn,#inventoryLoanReturnBackBtn){min-height:38px;padding:8px 14px;font-size:11px}
}


/* Tampilkan kembali judul formulir transaksi sesuai halaman, dengan Kembali di kanan. */
body.inventory-mode #inventoryModule #inventoryTransactionFormView:is(.inventory-transfer-view,.inventory-transaction-titleless) > .panel > .panel-head {
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  min-height:68px!important;
  height:auto!important;
  padding:15px 20px!important;
  margin:0!important;
  overflow:visible!important;
  border-bottom:1px solid #e5ede7!important;
}
body.inventory-mode #inventoryModule #inventoryTransactionFormView:is(.inventory-transfer-view,.inventory-transaction-titleless) > .panel > .panel-head > div {
  display:block!important;
  flex:1 1 auto;
  min-width:0;
}
body.inventory-mode #inventoryModule #inventoryTransactionFormView:is(.inventory-transfer-view,.inventory-transaction-titleless) #inventoryTransactionFormHeading {
  display:block!important;
  margin:0;
  color:#173b2c;
  font-size:18px;
  font-weight:750;
  line-height:1.35;
  letter-spacing:-.02em;
}
/* Keterangan pengesahan versi lama tidak ditampilkan pada ketiga formulir. */
body.inventory-mode #inventoryModule #inventoryTransactionFormView:is(.inventory-transfer-view,.inventory-transaction-titleless) #inventoryTransactionFormHelp {display:none!important;}
@media(max-width:640px){
  body.inventory-mode #inventoryModule #inventoryTransactionFormView:is(.inventory-transfer-view,.inventory-transaction-titleless) > .panel > .panel-head {gap:10px!important;padding:12px 14px!important;min-height:62px!important;}
  body.inventory-mode #inventoryModule #inventoryTransactionFormView:is(.inventory-transfer-view,.inventory-transaction-titleless) #inventoryTransactionFormHeading {font-size:15px;}
}
/* The scoped transaction table has no panel title/count/status for Stock Opname. */
#inventoryTransactionsView > .panel > .panel-head[hidden],
#inventoryTransactionsCount[hidden]{display:none !important}


/* Additional integrity controls live under Laporan. */
.inv-integrity-panel{margin-top:18px}
.inv-integrity-panel .panel-body{padding:18px}
.inv-integrity-form{padding:16px;background:#f9fcfa;border:1px solid #d5e6dc;border-radius:12px;margin-top:14px}
.inv-integrity-form[hidden]{display:none!important}
.inv-integrity-form h3{font-size:15px;margin:0 0 12px}
.inv-integrity-form .inventory-form-grid{margin:12px 0}
.inv-integrity-form .inventory-form-grid input,.inv-integrity-form .inventory-form-grid select{min-height:42px;border-radius:9px}
.inv-integrity-actions{display:flex;gap:10px;flex-wrap:wrap}
.inv-integrity-check{display:flex;align-items:flex-start;gap:8px;font-size:12px;margin:15px 0}
.inv-integrity-check input{margin-top:2px}
.inv-integrity-ok{padding:14px;border-radius:9px;background:#eff8f2;color:#176641;font-weight:650}
.inv-integrity-entry{font-size:12px;padding:9px 2px;border-bottom:1px solid #edf0ee}
.inv-history-controls{display:grid;grid-template-columns:minmax(220px,2fr) minmax(145px,1fr) auto auto;gap:10px;margin-bottom:12px;align-items:end}
.inv-history-controls input,.inv-history-controls select{min-height:42px;min-width:0;width:100%}
.inv-history-footer{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:12px;flex-wrap:wrap}
.inv-integrity-table .inventory-table{width:100%;min-width:750px}

/* Laporan redesign */
.inventory-report-layout{display:flex;flex-direction:column;gap:18px}
.inventory-report-hero{padding:24px;border:1px solid #dbe8df;border-radius:18px;background:linear-gradient(135deg,#f6fbf8 0%,#eef6f1 50%,#fdfefe 100%);box-shadow:0 10px 28px rgba(17,79,53,.06)}
.inventory-report-hero-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.inventory-report-hero-copy h2{font-size:24px;line-height:1.2;margin:0 0 8px;color:#173825}
.inventory-report-hero-copy p{margin:0;max-width:760px;font-size:13px;line-height:1.7;color:#5e7268}
.inventory-report-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.inventory-report-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:#fff;border:1px solid #dbe7df;color:#214a33;font-size:12px;font-weight:700;box-shadow:0 8px 18px rgba(20,79,53,.05)}
.inventory-report-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.inventory-report-nav a{display:flex;flex-direction:column;gap:4px;padding:15px 16px;border-radius:16px;background:#fff;border:1px solid #dbe6e0;text-decoration:none;color:#254233;box-shadow:0 8px 20px rgba(22,72,50,.05);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.inventory-report-nav a:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(22,72,50,.1);border-color:#9fc7af}
.inventory-report-nav strong{font-size:14px;line-height:1.3}
.inventory-report-nav span{font-size:11px;color:#678074;line-height:1.5}
.inventory-report-section{border:1px solid #dce7e0;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(21,64,45,.05);overflow:hidden}
.inventory-report-section .panel-head{padding:18px 20px;background:linear-gradient(180deg,#ffffff,#f8fbf9)}
.inventory-report-section .panel-head h2{font-size:17px;color:#163726}
.inventory-report-section .panel-head p{font-size:12px;line-height:1.6;color:#61786e}
.inventory-report-section .panel-body{padding:20px}
.inventory-report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0}
.inventory-report-grid article{border:1px solid #dce7e0;border-radius:16px;min-height:220px;padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:linear-gradient(180deg,#ffffff 0%,#f8fbf9 100%);box-shadow:0 8px 22px rgba(22,72,50,.05)}
.inventory-report-card-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#ecf7f0;color:#1f6a44;box-shadow:inset 0 0 0 1px #d4e9dc}
.inventory-report-card-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.inventory-report-grid h3{font-size:15px;color:#234d35;margin:0}.inventory-report-grid p{flex:1;font-size:12px;color:#65776c;line-height:1.7;margin:0}
.inventory-report-grid .btn-primary{margin-top:auto;width:100%;justify-content:center}
.inventory-report-columns{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:18px}
.inventory-report-stack{display:flex;flex-direction:column;gap:18px}
.inventory-report-aside{padding:18px;border:1px solid #dce8e1;border-radius:16px;background:linear-gradient(180deg,#ffffff,#f8fbf9)}
.inventory-report-aside h3{margin:0 0 10px;font-size:15px;color:#183a27}
.inventory-report-aside p,.inventory-report-aside li{font-size:12px;line-height:1.7;color:#667c71}
.inventory-report-aside ul{margin:0;padding-left:18px}
.inventory-report-tip{margin-top:14px;padding:13px 14px;border-radius:12px;background:#eff7f1;border:1px solid #d9ebdf;color:#245438;font-size:12px;line-height:1.7}
#invAuditTable,#invHistoryTable{background:#fff;border:1px solid #e5ece7;border-radius:14px;padding:8px;overflow:auto}
#invReconAudit{margin-top:10px;background:#fff;border:1px solid #e5ece7;border-radius:12px;padding:6px 12px}
.inv-integrity-form details{margin-top:12px}
#inventoryReportsView details>summary{cursor:pointer;font-weight:700;color:#25513a;list-style:none}
#inventoryReportsView details>summary::-webkit-details-marker{display:none}
#inventoryReportsView details>summary::after{content:'▾';float:right;color:#6b8276}
#inventoryReportsView details[open]>summary::after{content:'▴'}
@media(max-width:1100px){.inventory-report-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-report-columns{grid-template-columns:1fr}.inventory-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.inv-history-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.inventory-report-grid{grid-template-columns:1fr}.inventory-report-nav{grid-template-columns:1fr}.inventory-report-hero{padding:18px}.inventory-report-section .panel-body{padding:16px}.inventory-report-section .panel-head{padding:16px 16px 14px}}
@media(max-width:550px){.inv-history-controls{grid-template-columns:1fr}}


/* Laporan v2 - segmented, fully operable panels. */
/* Inventory's generic views are overflow:hidden; reports must own their scroll area. */
body.inventory-mode #inventoryModule #inventoryReportsView:not([hidden]){display:flex;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;align-items:stretch;min-height:0}
body.inventory-mode #inventoryReportsView .inventory-report-layout{flex:0 0 auto;width:100%;min-width:0}

body.inventory-mode #inventoryReportsView .inventory-report-layout{gap:16px;min-width:0;padding-bottom:24px}
body.inventory-mode #inventoryReportsView .inventory-report-hero{padding:19px 22px;border-radius:15px}
body.inventory-mode #inventoryReportsView .inventory-report-hero-copy h2{font-size:22px}
body.inventory-mode #inventoryReportsView .inventory-report-badge{font-size:11px}
body.inventory-mode #inventoryReportsView .inventory-report-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-width:0}
body.inventory-mode #inventoryReportsView .inventory-report-nav .inv-report-tab{font-family:inherit;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;text-align:left;min-width:0;min-height:75px;gap:5px;border:1px solid #d6e5db;background:#fff;color:#20422f;padding:12px 15px;border-radius:12px;cursor:pointer;box-shadow:0 4px 13px rgba(9,65,38,.04);transition:all .15s ease}
body.inventory-mode #inventoryReportsView .inventory-report-nav .inv-report-tab strong{font-size:13px;font-weight:750;line-height:1.35}
body.inventory-mode #inventoryReportsView .inventory-report-nav .inv-report-tab span{font-size:11px;color:#667e71;line-height:1.4}
body.inventory-mode #inventoryReportsView .inventory-report-nav .inv-report-tab:hover{border-color:#76b99a;background:#f2f9f5}
body.inventory-mode #inventoryReportsView .inventory-report-nav .inv-report-tab.is-active{background:#137e54;border-color:#137e54;color:#fff;box-shadow:0 8px 20px rgba(12,97,58,.16)}
body.inventory-mode #inventoryReportsView .inventory-report-nav .inv-report-tab.is-active span{color:#e8f9ee}
body.inventory-mode #inventoryReportsView .inventory-report-nav .inv-report-tab:focus-visible{outline:3px solid #80d2a4;outline-offset:3px}
body.inventory-mode #inventoryReportsView [hidden]{display:none!important}
body.inventory-mode #inventoryReportsView .inventory-report-section.inv-integrity-panel{margin-top:0}
body.inventory-mode #inventoryReportsView .inventory-report-section{width:100%;min-width:0;max-width:none;border-radius:15px}
body.inventory-mode #inventoryReportsView .inventory-report-section>.panel-head{min-height:76px;align-items:center;gap:16px}
body.inventory-mode #inventoryReportsView .inventory-report-section>.panel-head h2{font-size:16px}
body.inventory-mode #inventoryReportsView .inventory-report-section>.panel-head p{max-width:800px}
body.inventory-mode #inventoryReportsView .inventory-report-section>.panel-body{padding:20px}
body.inventory-mode #inventoryReportsView #reportCorrectionSection .inv-integrity-form{margin-top:0;border:0;background:none;padding:0}
body.inventory-mode #inventoryReportsView #reportCorrectionSection .inv-integrity-form>strong{display:block;padding:13px 16px;border:1px solid #dcebe0;background:#f3faf5;border-radius:10px;font-size:12px;line-height:1.6}
body.inventory-mode #inventoryReportsView #reportCorrectionSection .inventory-form-grid{gap:15px;margin:18px 0}
body.inventory-mode #inventoryReportsView #reportCorrectionSection .inv-integrity-form>button[type=submit]{min-height:44px}
body.inventory-mode #inventoryReportsView .inv-integrity-table{width:100%;min-width:0;overflow-x:auto}
body.inventory-mode #inventoryReportsView .inv-history-controls{grid-template-columns:minmax(220px,2fr) minmax(160px,1fr) minmax(120px,.65fr) auto}
body.inventory-mode #inventoryReportsView .inv-history-controls #invHistorySearchBtn{padding-inline:22px;min-height:42px}
body.inventory-mode #inventoryReportsView .inv-history-footer{padding-top:16px;border-top:1px solid #e5ede7}
body.inventory-mode #inventoryReportsView .inv-report-feedback{border:1px solid #dcebe1;border-radius:11px;background:#edf8f0;color:#205b39;padding:12px 15px;font-size:12px;line-height:1.65}
body.inventory-mode #inventoryReportsView .inv-report-feedback.is-error{background:#fff4f2;border-color:#f4c5bc;color:#aa3021}
body.inventory-mode #inventoryReportsView .inv-report-help{padding:14px 18px;border-radius:12px}
body.inventory-mode #inventoryReportsView .inv-report-help h3{font-size:13px;margin:0 0 4px}
body.inventory-mode #inventoryReportsView .inv-report-help p{font-size:11px;margin:0}
@media(max-width:1100px){body.inventory-mode #inventoryReportsView .inventory-report-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){body.inventory-mode #inventoryReportsView .inv-history-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){body.inventory-mode #inventoryReportsView .inventory-report-nav{grid-template-columns:1fr 1fr;gap:7px}body.inventory-mode #inventoryReportsView .inventory-report-nav .inv-report-tab{padding:10px;min-height:72px}body.inventory-mode #inventoryReportsView .inventory-report-nav .inv-report-tab span{font-size:10px}body.inventory-mode #inventoryReportsView .inv-history-controls{grid-template-columns:1fr}body.inventory-mode #inventoryReportsView .inventory-report-section>.panel-head{flex-wrap:wrap}body.inventory-mode #inventoryReportsView .inventory-report-section>.panel-body{padding:14px}}


/* Riwayat Lengkap: hanya isi tabel yang scroll, sama seperti daftar Barang Masuk. */
body.inventory-mode #inventoryReportsView #reportHistorySection:not([hidden]){
  display:flex;flex-direction:column;overflow:hidden;
  height:clamp(430px,calc(100dvh - 218px),820px);min-height:0;
}
body.inventory-mode #inventoryReportsView #reportHistorySection>.panel-head{flex:0 0 auto}
body.inventory-mode #inventoryReportsView #reportHistorySection>.panel-body{
  display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden;
  padding-bottom:0;
}
body.inventory-mode #inventoryReportsView #reportHistorySection .inv-history-controls{flex:0 0 auto;grid-template-columns:minmax(220px,2fr) minmax(160px,1fr) auto}
body.inventory-mode #inventoryReportsView #invHistoryTable{
  flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;
  border:1px solid #e2eae5;border-radius:9px;
}
body.inventory-mode #inventoryReportsView #invHistoryTable>.inventory-table-wrap{
  height:100%;max-height:none;min-height:0;min-width:0;
  overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
}
body.inventory-mode #inventoryReportsView #invHistoryTable .inventory-table{min-width:750px}
body.inventory-mode #inventoryReportsView #invHistoryTable .inventory-table thead th{
  position:sticky;top:0;z-index:1;background:#f6faf7;
}
body.inventory-mode #inventoryReportsView #invHistoryPagination{
  flex:0 0 auto;margin:12px -20px 0;padding:12px 20px;
  border-top:1px solid #e5ede7;gap:10px;
}
body.inventory-mode #inventoryReportsView #invHistoryPagination .welding-pagination-left{min-width:0;gap:12px}
body.inventory-mode #inventoryReportsView #invHistoryPagination .pagination-pages{display:flex;gap:4px;align-items:center}
body.inventory-mode #inventoryReportsView #invHistoryPaging{font-size:11px;color:#62796c}
body.inventory-mode #inventoryReportsView #invHistoryPagination .welding-page-size{margin-left:auto}
@media(max-width:800px){
  body.inventory-mode #inventoryReportsView #reportHistorySection .inv-history-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.inventory-mode #inventoryReportsView #reportHistorySection .inv-history-controls #invHistorySearchBtn{grid-column:1/-1}
}
@media(max-width:580px){
  body.inventory-mode #inventoryReportsView #reportHistorySection:not([hidden]){height:max(620px,calc(100dvh - 180px))}
  body.inventory-mode #inventoryReportsView #reportHistorySection .inv-history-controls{grid-template-columns:1fr}
  body.inventory-mode #inventoryReportsView #reportHistorySection>.panel-body{padding:14px 14px 0}
  body.inventory-mode #inventoryReportsView #invHistoryPagination{margin:12px -14px 0;padding:10px 14px}
  body.inventory-mode #inventoryReportsView #invHistoryPagination .welding-page-size{margin-left:0}
}

/* Stok Opname: tanggal, gudang dan catatan tepat sebelum rincian barang. */
#inventoryStocktakeTop{padding:0 0 18px;margin-bottom:15px;border-bottom:1px solid #e5ede7}
#inventoryStocktakeTop[hidden],#inventoryStocktakeTop [hidden]{display:none!important}
#inventoryStocktakeTop .inventory-stocktake-top-grid{
  display:grid;
  grid-template-columns:minmax(175px,.85fr) minmax(210px,1fr) minmax(270px,1.5fr);
  gap:16px;
  align-items:end;
}
#inventoryStocktakeTop .inventory-stocktake-top-grid>div{min-width:0}
#inventoryStocktakeTop .field{margin:0;min-width:0;width:100%}
#inventoryStocktakeTop .field label{display:block;font-size:11px;font-weight:650;color:#214837}
#inventoryStocktakeTop .field input,
#inventoryStocktakeTop .field select{
  display:block;width:100%;height:42px;min-height:42px;min-width:0;box-sizing:border-box;
}
/* Tidak memperlihatkan Harga Satuan; field internal tetap ada untuk kompatibilitas JS. */
.inventory-line-row[data-inv-type="ADJUSTMENT"]{
  grid-template-columns:minmax(215px,2fr) minmax(115px,.8fr) minmax(200px,1.45fr) 44px;
  align-items:start;
}
.inventory-line-row[data-inv-type="ADJUSTMENT"] .inventory-line-cost-field{display:none!important}
@media(max-width:1020px){
  #inventoryStocktakeTop .inventory-stocktake-top-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #inventoryStocktakeNotesSlot{grid-column:1/-1}
  .inventory-line-row[data-inv-type="ADJUSTMENT"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inventory-line-row[data-inv-type="ADJUSTMENT"] .inventory-line-item-field{grid-column:1/-1}
}
@media(max-width:640px){
  #inventoryStocktakeTop .inventory-stocktake-top-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  #inventoryStocktakeNotesSlot{grid-column:auto}
  .inventory-line-row[data-inv-type="ADJUSTMENT"]{grid-template-columns:minmax(0,1fr)}
  .inventory-line-row[data-inv-type="ADJUSTMENT"] .inventory-line-item-field{grid-column:auto}
  .inventory-line-row[data-inv-type="ADJUSTMENT"] .inv-remove-line{justify-self:end}
}

/* Pemisahan otomatis aset dan barang habis pakai saat menyimpan formulir Barang Keluar. */
.inventory-tx-asset-routing-hint{margin:10px 0 0;padding:10px 13px;border-radius:8px;background:#eaf5ec;border:1px solid #cfe4d3;color:#28634b;font-size:11px;font-weight:600;line-height:1.5}
.inventory-loan-redirect-hint{margin:8px 0 0;padding:9px 12px;border-radius:8px;background:#fff6de;border:1px solid #e7d19b;color:#664a17;font-size:11px;font-weight:600;line-height:1.5}
/* Peminjaman aset: tata letak mengikuti rincian Barang Keluar. */
body.inventory-mode #inventoryModule #inventoryLoanFormView .panel-head>div>p{display:none}
#inventoryLoanForm .inventory-loan-warehouse-top{display:block;padding:10px 14px;margin-bottom:14px;border:1px solid #dbe8dd;border-radius:10px;background:#f7faf7}
#inventoryLoanForm .inventory-loan-warehouse-top .field{margin:0}
#inventoryLoanForm .inventory-loan-asset-notice{font-size:11px;color:#28634b;font-weight:600;padding:9px 12px;border-radius:8px;background:#eaf5ec}
#inventoryLoanForm .inventory-loan-lines-section{margin-bottom:16px}
#inventoryLoanForm .inventory-loan-lines-section .inventory-loan-section-label{font-size:13px;font-weight:700;margin:0 0 10px;color:#204934}
#inventoryLoanForm .inventory-loan-line-row{grid-template-columns:minmax(205px,1.85fr) minmax(90px,.65fr) minmax(165px,1.2fr) minmax(150px,1fr) 42px;gap:12px;align-items:center;padding:14px 12px;background:linear-gradient(180deg,#fcfdfc,#f4f9f5);border:1px solid #dbe8df;border-radius:11px;position:relative;z-index:1;overflow:visible}
#inventoryLoanForm .inventory-loan-line-row:focus-within{z-index:40}
#inventoryLoanForm .inventory-loan-line-row .field{min-width:0;margin:0;align-self:stretch}
#inventoryLoanForm .inventory-loan-line-row .field label{display:block;font-size:11px;font-weight:700;line-height:1.35;margin:0 0 5px;color:#15392c}
#inventoryLoanForm .inventory-loan-line-row input,#inventoryLoanForm .inventory-loan-line-row select{width:100%;height:38px;font-size:11px;min-width:0;padding:8px 9px;border-radius:7px;border:1px solid #cbd8cf}
#inventoryLoanForm .inventory-loan-line-row input[readonly]{background:#f3f7f4;color:#5a6b61}
#inventoryLoanForm .inventory-loan-line-row .inv-remove-line{height:38px;justify-self:end}
#inventoryLoanForm .inventory-loan-item-picker{position:relative;width:100%}
#inventoryLoanForm .inventory-loan-item-picker select[hidden],#inventoryLoanForm .inventory-loan-item-picker .inventory-item-options[hidden]{display:none!important}
#inventoryLoanForm .inventory-loan-item-picker .inventory-item-options{top:calc(100% + 4px)}
#inventoryLoanForm .inventory-add-line-bottom{display:flex;margin:10px auto 5px}
@media(max-width:1080px){#inventoryLoanForm .inventory-loan-line-row{grid-template-columns:repeat(2,minmax(0,1fr))}#inventoryLoanForm .inventory-loan-line-row .inventory-loan-item-field{grid-column:1/-1}}
@media(max-width:650px){#inventoryLoanForm .inventory-loan-line-row,#inventoryLoanForm .inventory-loan-warehouse-top{grid-template-columns:1fr}#inventoryLoanForm .inventory-loan-line-row .inventory-loan-item-field{grid-column:auto}}

/* Tindak Lanjut Aset: sembunyikan teks penjelasan/helper agar formulir lebih ringkas. */
body.inventory-mode #inventoryModule #inventoryAssetFollowupFormSubtitle,
body.inventory-mode #inventoryModule #inventoryAssetFollowupFormView [data-i18n="invFollowupNoHistoryMutation"],
body.inventory-mode #inventoryModule #inventoryAssetFollowupRepairHint,
body.inventory-mode #inventoryModule #inventoryAssetFollowupStockReturnHint {
  display: none !important;
}
/* Tombol Kembali Tindak Lanjut Aset mengikuti tombol Kembali pada formulir Barang Masuk. */
body.inventory-mode #inventoryModule #inventoryAssetFollowupBackBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 17px;
  border: 1px solid #d1dfd4;
  border-radius: 999px;
  background: linear-gradient(135deg, #fffefa 0%, #f0f7f1 100%);
  color: #20543b;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .12px;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(25,76,48,.08), inset 0 1px 0 rgba(255,255,255,.95);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
body.inventory-mode #inventoryModule #inventoryAssetFollowupBackBtn:hover {
  transform: translateY(-1px);
  border-color: #a9cbb4;
  background: linear-gradient(135deg, #ffffff 0%, #e7f3ea 100%);
  box-shadow: 0 7px 16px rgba(25,76,48,.13), inset 0 1px 0 rgba(255,255,255,.95);
}
body.inventory-mode #inventoryModule #inventoryAssetFollowupBackBtn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(25,76,48,.08);
}
body.inventory-mode #inventoryModule #inventoryAssetFollowupBackBtn:focus-visible {
  outline: 3px solid rgba(38,132,83,.22);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  body.inventory-mode #inventoryModule #inventoryAssetFollowupBackBtn {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 11px;
  }
}

body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-dashboard-bottom{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:stretch}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-dashboard-panel{min-width:0}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-dash-recent-panel .inventory-dash-table{min-width:500px}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-dash-usage-chart{padding:0 13px 15px}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 0 8px}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-note{color:#718096;font-size:10.5px;line-height:1.45;max-width:460px}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-period{flex:0 0 auto;padding:5px 9px;border:1px solid #dce8f3;border-radius:8px;background:#f4f9ff;color:#27628b;font-size:10px;font-weight:700;white-space:nowrap}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-bar-chart{position:relative;height:235px;padding:8px 0 0;box-sizing:border-box;overflow-x:auto;overflow-y:hidden}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-grid{position:absolute;inset:8px 0 32px;pointer-events:none}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-grid-line{position:absolute;left:0;right:0;border-top:1px dashed #e3ebf2}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-columns{position:relative;z-index:1;height:100%;min-width:590px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;align-items:stretch}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-column{display:grid;grid-template-rows:minmax(0,1fr) 24px;min-width:0;height:100%;align-items:stretch}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-bars{display:flex;align-items:flex-end;justify-content:center;gap:2px;width:100%;height:100%;min-height:0}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-bar{display:block;flex:1 1 0;min-width:2px;max-width:10px;min-height:3px;border-radius:3px 3px 0 0;transition:filter .15s ease,opacity .15s ease;cursor:default}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-bar:hover{filter:brightness(.92);opacity:.88}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-bar-placeholder{display:block;flex:1 1 0;min-width:2px;max-width:10px;height:2px}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-label{align-self:end;text-align:center;color:#65758a;font-size:10px;line-height:20px;white-space:nowrap}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-bar.rank-1,body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-legend-swatch.rank-1{background:#398cff}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-bar.rank-2,body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-legend-swatch.rank-2{background:#ff8b32}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-bar.rank-3,body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-legend-swatch.rank-3{background:#35b66b}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-bar.rank-4,body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-legend-swatch.rank-4{background:#8058dc}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-bar.rank-5,body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-legend-swatch.rank-5{background:#f04468}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-legend{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 13px;padding-top:6px}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-legend-item{display:inline-flex;align-items:center;gap:5px;color:#5d6c7c;font-size:10px;white-space:nowrap}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-legend-swatch{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 8px}
@media(max-width:900px){body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-dashboard-bottom{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-dashboard-bottom{grid-template-columns:minmax(0,1fr)}body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-dashboard-panel{min-height:0}body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-head{gap:8px}body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-note{font-size:10px}body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-bar-chart{height:225px}body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-columns{min-width:620px}}

body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-month-bar:focus{outline:2px solid #174d80;outline-offset:2px;filter:brightness(.92)}
body.inventory-mode #inventoryModule #inventoryDashboardView .inventory-chart-legend-item span{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}

/* Final layout refinements: aligned export actions and consistent summary cards. */
.motor-intro-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex:0 0 auto;flex-wrap:wrap}
.export-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:10px 14px;border:1px solid #cfe3d5;border-radius:10px;background:linear-gradient(180deg,#fff 0%,#f4fbf6 100%);color:#12683c;box-shadow:0 3px 8px rgba(22,131,74,.08);white-space:nowrap}
.export-action-btn svg{display:block;width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.export-action-btn:hover{background:#eaf6ee;border-color:#a8c9b4;box-shadow:0 5px 12px rgba(22,131,74,.12);transform:translateY(-1px)}
.export-action-btn[hidden]{display:none!important}
.welding-records-layout>.records-summary{margin-bottom:0}
@media(max-width:760px){.motor-intro-actions{align-self:flex-start;justify-content:flex-start}.motor-intro-actions .export-action-btn,.motor-intro-actions .motor-form-toggle{min-height:39px}.welding-actions{align-items:center}}
@media(max-width:600px){.motor-intro-actions{width:100%;gap:8px}.motor-intro-actions .export-action-btn,.motor-intro-actions .motor-form-toggle{flex:0 0 auto}.welding-actions .export-action-btn{padding:9px 11px}}

.record-actions .welding-icon-action{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;padding:0;border:1px solid #d7e1da;border-radius:8px;background:#fff;color:#24563a;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,transform .12s}
.record-actions .welding-icon-action svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.record-actions .welding-icon-action:hover{background:#edf7f0;border-color:#a8c9b4}
.record-actions .welding-icon-action.danger{color:#b42318;border-color:#f0d0cd}
.record-actions .welding-icon-action.danger:hover{background:#fff1f0;border-color:#e8aaa4}
.csv-export-modal-card{width:min(560px,96vw)}
.csv-export-modal-card .preview-modal-head{align-items:flex-start}
.csv-export-heading-copy{min-width:0}
.csv-export-heading-copy p{margin:5px 0 0;color:#64748b;font-size:12px;line-height:1.5;font-weight:400}
.csv-export-content{display:grid;gap:14px;padding:18px}
.csv-export-content .field{min-width:0;margin:0}
.csv-export-content .field select,.csv-export-content .field input{width:100%;max-width:none}
.csv-export-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.csv-export-grid[hidden],.csv-export-content [hidden]{display:none!important}
.csv-export-help{margin:0;padding:10px 12px;border:1px solid #e0ebe3;border-radius:9px;background:#f6faf7;color:#597063;font-size:11px;line-height:1.5}
.csv-export-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:2px}
@media(max-width:520px){.csv-export-grid{grid-template-columns:minmax(0,1fr)}.csv-export-modal-card .preview-modal-head{gap:8px;padding:12px}.csv-export-content{padding:14px}}

/* Ringkasan mencakup seluruh status permintaan perbaikan. */
body.welding-mode .welding-records-layout>.records-summary{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
body.welding-mode .welding-table{min-width:1320px}
body.welding-mode .welding-records-layout>.records-summary .summary-card{padding:12px 13px;gap:10px}
body.welding-mode .welding-records-layout>.records-summary .summary-icon{width:40px;height:40px;flex-basis:40px}
body.welding-mode .summary-card.processing{background:linear-gradient(110deg,#edf4ff 0%,#fbfdff 100%);border-color:#dce8fb}
body.welding-mode .summary-card.processing .summary-icon{background:rgba(37,99,235,.12);color:#2563eb}
body.welding-mode .summary-card.processing .summary-copy>span{color:#1d4ed8}
body.welding-mode .summary-card.cancelled{background:linear-gradient(110deg,#fff0ef 0%,#fffafa 100%);border-color:#f6d9d6}
body.welding-mode .summary-card.cancelled .summary-icon{background:rgba(220,38,38,.10);color:#c62828}
body.welding-mode .summary-card.cancelled .summary-copy>span{color:#b42318}
body.welding-mode .welding-form-grid.technician-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.welding-result-cell{min-width:205px;max-width:285px;white-space:normal;overflow-wrap:anywhere}
.welding-result-condition{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:0;margin:0;border:0}
.welding-result-notes{margin-top:5px;font-size:10px;line-height:1.5;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.welding-result-caption{display:block;margin-bottom:3px;color:#667085;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.35px}
.repair-result-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;border:1px solid transparent;font-size:10px;line-height:1.2;font-weight:800;white-space:nowrap;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.repair-result-badge.good{background:#e8f6ec;border-color:#c8e8d1;color:#17663a}
.repair-result-badge.monitor{background:#fff4d6;border-color:#f3df9f;color:#8a5a00}
.repair-result-badge.bad{background:#fff0ef;border-color:#f3c9c5;color:#b42318}
.repair-result-badge.unset{background:#f2f4f7;border-color:#e4e7ec;color:#667085}
@media(max-width:1100px){body.welding-mode .welding-records-layout>.records-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){body.welding-mode .welding-form-grid.technician-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){body.welding-mode .welding-records-layout>.records-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}body.welding-mode .welding-records-layout>.records-summary .summary-card{padding:10px;gap:8px}body.welding-mode .welding-records-layout>.records-summary .summary-icon{width:34px;height:34px;flex-basis:34px}body.welding-mode .welding-form-grid.technician-form-grid{grid-template-columns:minmax(0,1fr)}}

/* Employee directory — administrative dashboard Model 1 */
.employee-module[hidden],.employee-role-field[hidden],.employee-account-field[hidden],#employeeNoResults[hidden],#employeeAddBtn[hidden],#employeeAlert[hidden]{display:none!important}
.employee-module:not([hidden]){display:flex;flex-direction:column;gap:16px;min-height:0}
.employee-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.employee-heading h1{margin:0 0 5px;color:#173d2b;font-size:clamp(23px,2vw,29px);letter-spacing:-.45px}
.employee-heading p{margin:0;color:#68796f;font-size:13px}
.employee-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.employee-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.employee-summary-card{display:flex;align-items:center;gap:12px;min-width:0;padding:15px;border:1px solid #e1e9e3;border-radius:14px;background:linear-gradient(135deg,#fff 0%,#f8fbf8 100%);box-shadow:0 3px 12px rgba(20,55,35,.035)}
.employee-summary-icon{display:flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#e8f3ec;color:#246943}
.employee-summary-icon.active{background:#e5f6ec;color:#16834a}.employee-summary-icon.admin{background:#edf2ff;color:#3d5eb3}.employee-summary-icon.super{background:#fff4d8;color:#946200}
.employee-summary-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.employee-summary-card small{display:block;color:#708075;font-size:11px;font-weight:650;margin-bottom:4px}.employee-summary-card strong{display:block;color:#173d2b;font-size:24px;line-height:1.1;font-weight:800}
.employee-directory-panel{background:#fff;border:1px solid #e1e9e3;border-radius:15px;padding:16px;box-shadow:0 4px 20px rgba(20,55,35,.035)}
.employee-toolbar{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);width:100%;gap:10px;align-items:end;padding-bottom:16px;border-bottom:1px solid #edf1ed}
.employee-toolbar .field{min-width:0;gap:5px}.employee-toolbar label{font-size:11px;color:#6d7c72;font-weight:700}.employee-toolbar input,.employee-toolbar select{width:100%;min-width:0;min-height:39px;border-color:#dbe4dd;border-radius:9px;font-size:12px}
.employee-results-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0 12px}.employee-results-heading h2{font-size:16px;margin:0;color:#183d2b}
.employee-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.employee-card{display:flex;flex-direction:column;min-width:0;border:1px solid #e0e9e2;border-radius:14px;padding:15px;background:#fff;transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease}
.employee-card:hover{border-color:#bad7c4;box-shadow:0 8px 24px rgba(18,78,43,.08);transform:translateY(-1px)}
.employee-card-top{display:flex;align-items:flex-start;gap:10px;min-width:0}
.employee-avatar{display:flex;align-items:center;justify-content:center;flex:0 0 46px;width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#e4f2e8,#f3f8f4);color:#17643b;font-size:15px;font-weight:850;letter-spacing:.3px}
.employee-card-person{min-width:0;flex:1}.employee-card-person h3{margin:1px 0 4px;font-size:14px;line-height:1.3;color:#193e2b;overflow-wrap:anywhere}.employee-card-code{font-size:11px;color:#738176}
.employee-role-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:999px;background:#eef2f0;color:#506258;font-size:10px;font-weight:800;white-space:nowrap}
.employee-role-badge.admin{background:#edf2ff;color:#3656a6}.employee-role-badge.super_admin{background:#fff3d4;color:#8a5a00}
.employee-status-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:750;white-space:nowrap}.employee-status-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.employee-status-badge.active{color:#16834a}.employee-status-badge.inactive{color:#9b3b36}
.employee-card-divider{height:1px;background:#edf1ed;margin:13px 0}
.employee-card-meta{display:grid;gap:8px}.employee-meta-item{display:grid;grid-template-columns:82px minmax(0,1fr);gap:8px;font-size:11px;line-height:1.45}.employee-meta-item span{color:#7a877e}.employee-meta-item strong{font-weight:650;color:#34483b;overflow-wrap:anywhere}
.employee-card-certifications{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}.employee-cert-chip{display:inline-flex;padding:4px 6px;border-radius:6px;background:#eef7f0;color:#287046;font-size:9px;font-weight:750;line-height:1.3}.employee-cert-chip.none{background:#f3f5f4;color:#849087}
.employee-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:13px}.employee-card-actions{display:flex;gap:6px}.employee-card-actions button{font-size:11px;padding:7px 10px;min-height:31px;border-radius:8px}
.employee-empty{padding:34px 12px;text-align:center;color:#7a877e;font-size:13px;border:1px dashed #dce6de;border-radius:12px;background:#fbfdfb}
.employee-access-note{font-size:11px;color:#77867c;line-height:1.5;margin:14px 0 0}
.employee-modal-card{width:min(900px,96vw);max-height:92vh}.employee-editor-body{max-height:calc(92vh - 90px);overflow:auto}.employee-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.employee-editor-grid .field{min-width:0;gap:5px}.employee-editor-grid .field.full{grid-column:1/-1}.employee-editor-grid input:not([type=checkbox]),.employee-editor-grid select{width:100%;min-height:40px}.employee-editor-grid input[readonly]{background:#f2f5f3;color:#68786e}.employee-cert-checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px;border:1px solid #dfe8e1;border-radius:12px;background:#f7faf8;align-items:stretch}.employee-cert-checkboxes label{display:grid!important;grid-template-columns:18px minmax(0,1fr);align-items:start!important;justify-content:start!important;gap:9px!important;width:100%;min-width:0;min-height:54px;box-sizing:border-box;padding:10px 11px;border:1px solid #e1e9e3;border-radius:9px;background:#fff;font-size:12px;line-height:1.4;color:#344b3b;cursor:pointer}.employee-cert-checkboxes label span{display:block;min-width:0;overflow-wrap:anywhere;text-align:left}.employee-cert-checkboxes input{display:block!important;width:16px!important;height:16px;min-height:16px!important;margin:1px 0 0!important;padding:0;accent-color:#176b3e;justify-self:start;flex:none}.employee-cert-checkboxes label:has(input:checked){border-color:#9ac8a9;background:#f0f8f2}.employee-photo-field{grid-column:1/-1}.employee-photo-editor{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid #dfe8e1;border-radius:12px;background:#f8fbf9}.employee-photo-preview{width:88px;height:88px;flex:0 0 88px;border-radius:50%;overflow:hidden;display:grid;place-items:center;border:2px solid #d8e8dc;background:linear-gradient(145deg,#e6f2e9,#f6faf7);color:#587565;font-size:11px;text-align:center;padding:8px;box-sizing:border-box}.employee-photo-preview img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}.employee-photo-controls{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;flex:1}.employee-photo-controls input[type=file]{width:100%;max-width:100%;min-height:auto;padding:8px;border:1px solid #dbe5dd;border-radius:8px;background:#fff;font-size:12px}.employee-photo-controls .employee-field-help{max-width:560px}.employee-photo-message{color:#a33b35;font-size:11px;line-height:1.4}.employee-photo-message:empty{display:none}.employee-avatar.has-photo{overflow:hidden;border-radius:50%;padding:0;background:#edf5ef}.employee-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}.employee-detail-header .employee-avatar.has-photo{border-radius:50%}.employee-field-help,.employee-editor-note{font-size:11px;line-height:1.45;color:#7a877e;margin:2px 0 0}.employee-modal-actions{display:flex;justify-content:flex-end;gap:9px;padding:15px 20px;border-top:1px solid #e8eee9;background:#fbfcfb}.employee-detail-content{padding:20px}.employee-detail-header{display:flex;align-items:center;gap:15px;padding-bottom:18px;border-bottom:1px solid #edf1ed}.employee-detail-header .employee-avatar{width:60px;height:60px;flex-basis:60px;font-size:18px}.employee-detail-header h3{margin:0 0 5px;font-size:20px;color:#193e2b}.employee-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-top:18px}.employee-detail-field{min-width:0}.employee-detail-field small{display:block;color:#7a877e;font-size:11px;margin-bottom:5px}.employee-detail-field strong{display:block;color:#2f4336;font-size:13px;line-height:1.45;overflow-wrap:anywhere}.employee-detail-certifications{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
body.employee-mode #appContainer:not([hidden]){min-height:0}

/* Model 1: administrative dashboard and employee table */
.employee-table-wrap{width:100%;overflow:auto;border:1px solid #e3e9e5;border-radius:12px;background:#fff;}
.employee-table{width:100%;min-width:1220px;border-collapse:separate;border-spacing:0;font-size:12px;}
.employee-table thead th{position:sticky;top:0;z-index:1;background:#f5f8f6;color:#53665a;text-align:left;padding:12px 13px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.45px;border-bottom:1px solid #e3e9e5;white-space:nowrap;}
.employee-table tbody td{padding:12px 13px;border-bottom:1px solid #edf1ee;vertical-align:middle;color:#34483b;}
.employee-table tbody tr:last-child td{border-bottom:0;}
.employee-table tbody tr:hover{background:#f8fbf9;}
.employee-table .employee-name-cell{display:flex;align-items:center;gap:10px;min-width:205px;}
.employee-table .employee-avatar{width:36px;height:36px;flex-basis:36px;border-radius:10px;font-size:11px;}
.employee-table .employee-name-copy{min-width:0;}
.employee-table .employee-name-copy strong{display:block;color:#193e2b;font-size:12px;line-height:1.35;overflow-wrap:anywhere;}
.employee-table .employee-name-copy small{display:block;margin-top:3px;color:#7a877e;font-size:10px;}
.employee-table .employee-company-cell,.employee-table .employee-department-cell,.employee-table .employee-position-cell{max-width:220px;white-space:normal;overflow-wrap:anywhere;line-height:1.45;}
.employee-table .employee-actions-cell{white-space:nowrap;text-align:right;}
.employee-table .employee-actions-cell .employee-card-actions{justify-content:flex-end;}
.employee-table .employee-actions-cell button{min-height:30px;padding:6px 9px;font-size:10px;}
.employee-table .employee-table-empty{padding:30px 12px;text-align:center;color:#7a877e;}
.employee-results-heading{padding:15px 0 12px;}
.employee-access-note{margin-top:12px;}
@media(max-width:720px){.employee-toolbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.employee-search-field{grid-column:span 2}.employee-actions{width:100%}.employee-actions button{flex:1}.employee-table{min-width:1180px}.employee-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.employee-summary-card{padding:11px;gap:9px}.employee-summary-icon{width:35px;height:35px;flex-basis:35px}.employee-summary-card strong{font-size:21px}}

@media(max-width:1100px){.employee-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-toolbar{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}.employee-search-field{grid-column:auto}}
@media(max-width:720px){.employee-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.employee-summary-card{padding:11px;gap:9px}.employee-summary-icon{width:35px;height:35px;flex-basis:35px}.employee-summary-card strong{font-size:21px}.employee-card-grid{grid-template-columns:minmax(0,1fr)}.employee-toolbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.employee-search-field{grid-column:span 2}.employee-editor-grid,.employee-detail-grid{grid-template-columns:minmax(0,1fr)}.employee-cert-checkboxes{grid-template-columns:minmax(0,1fr)}.employee-photo-editor{align-items:flex-start;gap:12px}.employee-photo-preview{width:76px;height:76px;flex-basis:76px}.employee-directory-panel{padding:11px}.employee-heading{align-items:flex-start}.employee-actions{width:100%}.employee-actions button{flex:1}.employee-modal-actions{padding:12px}.employee-detail-content{padding:15px}}


/* Dashboard Data Karyawan: struktur sidebar dan area konten mengikuti Inventaris Gudang. */
.employee-module[hidden],.employee-view[hidden]{display:none!important}
.employee-module:not([hidden]){display:flex;flex-direction:column;gap:0;min-height:0}
body.employee-mode #appContainer:not([hidden]){max-width:none;width:100%;margin:0;padding:12px 18px 16px;background:#f0f4f2;min-height:0}
body.employee-mode #employeeModule>.employee-layout{flex:1 1 auto;min-height:0;gap:0;background:#f2f6f4;border:1px solid #dbe6df;border-radius:10px;box-shadow:0 5px 22px rgba(15,58,33,.05);overflow:hidden}
body.employee-mode .employee-sidebar{flex:0 0 225px!important;width:225px!important;min-width:225px!important;border:0;border-radius:10px 0 0 10px;background:linear-gradient(160deg,#182d2b 0%,#203c34 52%,#15513a 100%);box-shadow:none}
body.employee-mode .employee-sidebar::before{background:radial-gradient(circle at 5% 90%,rgba(88,179,129,.22),transparent 54%)}
body.employee-mode .employee-sidebar .inventory-sidebar-brand{border-bottom:1px solid rgba(255,255,255,.14);padding:19px 15px 21px}
body.employee-mode .employee-sidebar .inventory-sidebar-mark{color:#246943}
body.employee-mode .employee-sidebar .inventory-sidebar-nav{padding:12px 10px 24px;gap:2px}
body.employee-mode .employee-sidebar .inventory-side-link{border:0;min-height:43px;padding:10px 12px;font-size:11.5px;font-weight:650;color:#deebe2;white-space:normal;box-shadow:none}
body.employee-mode .employee-sidebar .inventory-side-link svg{width:18px;height:18px}
body.employee-mode .employee-sidebar .inventory-side-link:hover{background:rgba(255,255,255,.1);color:#fff}
body.employee-mode .employee-sidebar .inventory-side-link.active,body.employee-mode .employee-sidebar .inventory-side-link.active:hover{background:linear-gradient(90deg,rgba(73,157,104,.28),rgba(73,157,104,.08));color:#bce8c7;box-shadow:inset 3px 0 0 #9ee0a7}
body.employee-mode .employee-content{min-width:0;min-height:0;overflow:hidden;padding:20px 22px 18px;background:#edf3f8}
body.employee-mode .employee-page-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;flex:0 0 auto}
body.employee-mode .employee-page-heading .inv-page-row{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:18px}
body.employee-mode .employee-context-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
body.employee-mode #employeeContextLabel{font-size:clamp(22px,2vw,29px);letter-spacing:-.5px;line-height:1.2;color:#19263b;margin:0;font-weight:800;white-space:normal}
body.employee-mode #employeeContextDescription{font-size:12px;color:#64748b;margin:0;line-height:1.5}
body.employee-mode #employeeAlert{flex:0 0 auto;margin-bottom:10px}
body.employee-mode .employee-view:not([hidden]){display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
body.employee-mode .employee-view-scroll{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;padding:1px 4px 4px 1px}
.employee-dashboard-welcome{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 18px;padding:2px 1px}
.employee-eyebrow{display:inline-block;font-size:10px;letter-spacing:1.35px;font-weight:850;color:#27754a;margin-bottom:7px}
.employee-dashboard-welcome h2{font-size:clamp(20px,1.8vw,25px);letter-spacing:-.4px;line-height:1.25;color:#1e3428;margin:0 0 6px}
.employee-dashboard-welcome p{font-size:12px;line-height:1.6;color:#6a7c71;margin:0;max-width:670px}
.employee-date-chip{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 12px;background:#fff;border:1px solid #dce7df;border-radius:9px;color:#41594b;font-size:11px;font-weight:700;box-shadow:0 2px 8px rgba(18,55,32,.03)}
.employee-date-chip svg{width:16px;height:16px;fill:none;stroke:#47845e;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.employee-dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:18px}
.employee-metric-card{display:flex;align-items:center;gap:13px;min-width:0;padding:17px 16px;border:1px solid #dfe8e2;border-radius:11px;background:#fff;box-shadow:0 3px 11px rgba(20,55,35,.035)}
.employee-metric-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:11px;background:#e7f3eb;color:#287348}
.employee-metric-icon.blue{background:#e8efff;color:#4566b1}.employee-metric-icon.amber{background:#fff3da;color:#9b6a11}.employee-metric-icon.purple{background:#f0eaff;color:#7651a7}
.employee-metric-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.employee-metric-card span{display:block;color:#738176;font-size:11px;font-weight:650;margin-bottom:5px}.employee-metric-card strong{display:block;color:#1e3428;font-size:25px;font-weight:850;line-height:1.1;font-variant-numeric:tabular-nums}
.employee-dashboard-panels{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:15px;align-items:start}
.employee-dashboard-panel,.employee-info-card,.employee-info-note{border:1px solid #dfe8e2;border-radius:11px;background:#fff;box-shadow:0 3px 12px rgba(20,55,35,.03)}
.employee-dashboard-panel{padding:16px;min-width:0}
.employee-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}
.employee-panel-heading h3{font-size:14px;color:#243d2e;margin:0 0 4px;font-weight:800}.employee-panel-heading p{font-size:11px;color:#75847a;margin:0;line-height:1.5}
.employee-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.employee-quick-card{display:flex;align-items:center;gap:10px;min-width:0;min-height:77px;padding:11px;border:1px solid #e4ebe6;border-radius:9px;background:#fbfdfb;color:#34483b;text-align:left;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.employee-quick-card:hover{background:#f2f8f3;border-color:#bfd8c6;transform:translateY(-1px)}
.employee-quick-icon{width:35px;height:35px;flex:0 0 35px;display:grid;place-items:center;border-radius:9px;background:#e7f3eb;color:#2c7448}
.employee-quick-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.employee-quick-card>span:nth-child(2){display:block;flex:1;min-width:0}.employee-quick-card strong{display:block;font-size:11px;line-height:1.35;color:#273d30;margin-bottom:4px}.employee-quick-card small{display:block;font-size:10px;line-height:1.4;color:#7b897f}.employee-quick-card>b{font-size:17px;color:#7da48a;font-weight:500}
.employee-recent-list{display:flex;flex-direction:column;gap:0}
.employee-recent-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #edf1ee;min-width:0}.employee-recent-row:last-child{border-bottom:0}.employee-recent-row .employee-avatar{flex:0 0 35px;width:35px;height:35px}.employee-recent-copy{flex:1;min-width:0}.employee-recent-copy strong{display:block;font-size:11px;color:#293e31;line-height:1.4;overflow-wrap:anywhere}.employee-recent-copy small{display:block;margin-top:3px;font-size:10px;color:#7a897f;line-height:1.4}.employee-recent-date{white-space:nowrap;color:#6c7d71;font-size:10px;font-weight:700}
.employee-section-intro{display:flex;align-items:center;gap:13px;margin:2px 0 18px}.employee-section-icon{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:12px;background:#e3f1e7;color:#2b754a}.employee-section-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.employee-section-intro h2{font-size:20px;line-height:1.25;color:#1e3428;margin:0 0 5px}.employee-section-intro p{font-size:12px;line-height:1.5;color:#6e7e73;margin:0}
.employee-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:300px;padding:35px 22px;background:#fff;border:1px solid #dfe8e2;border-radius:12px;box-shadow:0 3px 12px rgba(20,55,35,.03)}
.employee-empty-state-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:#edf5ef;color:#43845a;margin-bottom:16px}.employee-empty-state-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.employee-empty-state h3{font-size:16px;color:#2a4132;margin:0 0 8px}.employee-empty-state p{font-size:12px;line-height:1.7;color:#738176;max-width:590px;margin:0 0 16px}
.employee-status-chip{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:750}.employee-status-chip.pending{background:#fff4dc;color:#94640c;border:1px solid #f1dfb0}.employee-status-chip.connected{background:#e8f7ec;color:#1e7b41;border:1px solid #cce9d4}
.employee-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.employee-info-card{padding:16px}.employee-info-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.employee-info-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:10px;background:#f0f3f2;color:#617468}.employee-info-icon.connected{background:#e8f7ec;color:#237747}.employee-info-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.employee-info-card h3{font-size:13px;color:#2a4132;margin:0 0 6px}.employee-info-card p,.employee-info-note p{font-size:11px;line-height:1.7;color:#728075;margin:0}.employee-info-note{padding:15px 17px;margin-top:14px;background:#f9fbf9}.employee-info-note strong{display:block;color:#334b3b;font-size:12px;margin-bottom:5px}
body.employee-mode #employeeDirectoryView:not([hidden]){overflow:hidden}
body.employee-mode #employeeDirectoryView .employee-directory-panel{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden;margin:0}
body.employee-mode #employeeDirectoryView .employee-toolbar{flex:0 0 auto}
body.employee-mode #employeeDirectoryView .employee-table-wrap{flex:1 1 auto;min-height:120px}
body.employee-mode #employeeDirectoryView .employee-results-heading{flex:0 0 auto}
body.employee-mode #employeeDirectoryView .employee-access-note{flex:0 0 auto}
@media(min-width:761px) and (max-width:1080px){body.employee-mode .employee-sidebar{flex:0 0 195px!important;width:195px!important;min-width:195px!important}.employee-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-dashboard-panels{grid-template-columns:minmax(0,1fr)} }
@media(max-width:760px){body.employee-mode #appContainer:not([hidden]){padding:10px 12px 12px}body.employee-mode .employee-content{padding:12px}.employee-dashboard-panels{grid-template-columns:minmax(0,1fr)}.employee-info-grid{grid-template-columns:minmax(0,1fr)}.employee-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.employee-metric-card{padding:12px;gap:9px}.employee-metric-icon{width:36px;height:36px;flex-basis:36px}.employee-metric-card strong{font-size:22px}.employee-dashboard-welcome{flex-direction:column;gap:10px}.employee-quick-grid{grid-template-columns:minmax(0,1fr)}body.employee-mode .employee-sidebar{flex:0 0 160px!important;width:160px!important;min-width:160px!important}}
@media(max-width:600px){body.employee-mode #employeeModule>.employee-layout{flex-direction:column;gap:0}body.employee-mode .employee-sidebar{flex:0 0 auto!important;width:100%!important;min-width:0!important;max-height:105px;border-radius:10px 10px 0 0}body.employee-mode .employee-sidebar .inventory-sidebar-brand{display:none}body.employee-mode .employee-sidebar .inventory-sidebar-nav{flex-direction:row;align-items:stretch;overflow-x:auto;padding:7px;gap:6px}body.employee-mode .employee-sidebar .inventory-side-link{flex:0 0 105px;width:105px;min-height:72px;flex-direction:column;justify-content:center;gap:6px;text-align:center;font-size:10px;padding:7px 5px}body.employee-mode .employee-sidebar .inventory-side-link.active{box-shadow:inset 0 -3px 0 #9ee0a7}body.employee-mode .employee-content{min-height:0;flex:1 1 auto}.employee-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-quick-card{min-height:68px}.employee-panel-heading{align-items:flex-start;flex-direction:column}.employee-page-heading .inv-page-row{align-items:flex-start;flex-direction:column}.employee-page-heading .employee-actions{width:100%}.employee-page-heading .employee-actions button{flex:1}.employee-date-chip{font-size:10px}}

/* Samakan shell Data Karyawan dengan shell Inventaris Gudang tanpa mengubah logika modul. */
body.employee-mode{height:100vh;height:100dvh;overflow:hidden}
body.employee-mode #appContainer:not([hidden]){display:flex;flex-direction:column;min-height:0;overflow:hidden;width:100%;max-width:none;margin:0;padding:0;background:#edf3f8}
body.employee-mode #employeeModule:not([hidden]){display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden;height:100%}
body.employee-mode #employeeModule>.employee-layout{flex:1 1 auto;display:flex;gap:0;min-height:0;background:#edf3f8;border:0;border-radius:0;box-shadow:none;overflow:hidden}
body.employee-mode #employeeModule .employee-sidebar{position:relative;isolation:isolate;flex:0 0 250px!important;width:250px!important;min-width:250px!important;border:0;border-radius:0;background:linear-gradient(169deg,#06573d,#034c53 49%,#0b324c);box-shadow:none;color:#f8fafc}
body.employee-mode #employeeModule .employee-sidebar::before{background:radial-gradient(ellipse at 5% 95%,rgba(0,221,125,.22),transparent 57%)}
body.employee-mode #employeeModule .employee-sidebar .inventory-sidebar-brand{padding:19px 15px 21px;border-bottom:1px solid rgba(255,255,255,.14);font-size:11px;font-weight:800;letter-spacing:1.1px;line-height:1.45;color:#fff}
body.employee-mode #employeeModule .employee-sidebar .inventory-sidebar-mark{background:#fff;color:#2e6b9a;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
body.employee-mode #employeeModule .employee-sidebar .inventory-sidebar-nav{display:flex;flex-direction:column;gap:5px;padding:20px 9px;overflow-y:auto;overflow-x:hidden}
body.employee-mode #employeeModule .employee-sidebar .inventory-side-link{display:flex;flex:0 0 auto;width:100%;min-height:52px;gap:14px;padding:13px 17px;border-radius:6px;border:0;color:#e9f7f4;font-size:14px;font-weight:500;box-shadow:none;white-space:normal;text-align:left}
body.employee-mode #employeeModule .employee-sidebar .inventory-side-link svg{width:21px;height:21px;flex:0 0 21px;stroke:#eafaf5;color:#eafaf5}
body.employee-mode #employeeModule .employee-sidebar .inventory-side-link:hover{background:rgba(255,255,255,.13);color:#fff}
body.employee-mode #employeeModule .employee-sidebar .inventory-side-link.active{background:linear-gradient(90deg,rgba(35,184,124,.55),rgba(47,164,167,.35));color:#fff;font-weight:700;box-shadow:inset 4px 0 0 #62df93}
body.employee-mode #employeeModule .employee-sidebar .inventory-side-link.active svg{color:#a6eac1}
body.employee-mode #employeeModule .employee-content{display:flex;flex:1 1 auto;flex-direction:column;min-width:0;min-height:0;overflow:hidden;padding:20px 22px 18px;background:#edf3f8}
body.employee-mode #employeeModule .employee-page-heading{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:0 0 16px;flex:0 0 auto}
body.employee-mode #employeeModule .employee-page-heading .inv-page-row{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:18px}
body.employee-mode #employeeModule .employee-context-copy{display:flex;align-items:baseline;flex-direction:row;gap:13px;flex-wrap:wrap;min-width:0}
body.employee-mode #employeeModule #employeeContextLabel{font-size:clamp(22px,2vw,29px);letter-spacing:-.5px;line-height:1.2;color:#19263b;margin:0;font-weight:800;white-space:normal}

/* Pada halaman Manajemen Cuti, sembunyikan aksi khusus direktori karyawan. */
body.employee-mode.employee-leave-only-mode #employeeModule #employeeDirectoryActions{display:none!important;}
body.employee-mode #employeeModule #employeeContextDescription{font-size:12px;color:#64748b;margin:0;line-height:1.5}
body.employee-mode #employeeModule #employeeAlert{flex:0 0 auto;margin-bottom:10px}
body.employee-mode #employeeModule .employee-view:not([hidden]){display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
body.employee-mode #employeeModule .employee-view-scroll{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:auto;scrollbar-width:thin;padding-right:4px}
body.employee-mode #employeeModule .employee-section-intro{display:none}

/* Dashboard Data Karyawan memakai grid, kartu, panel, dan warna dashboard Inventaris Gudang. */
body.employee-mode #employeeModule #employeeDashboardView:not([hidden]){display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
body.employee-mode #employeeModule #employeeDashboardView .employee-view-scroll{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;padding-right:4px}
body.employee-mode #employeeModule .employee-dashboard-welcome{display:none}
body.employee-mode #employeeModule .employee-dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 20px}
body.employee-mode #employeeModule .employee-metric-card{--emp-tone:#19a75a;position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:138px;padding:16px 16px 16px;border:0;border-radius:5px;background:var(--emp-tone);box-shadow:0 2px 8px rgba(13,46,74,.08);color:#fff;overflow:hidden}
body.employee-mode #employeeModule .employee-metric-card:nth-child(1){--emp-tone:#19a75a}
body.employee-mode #employeeModule .employee-metric-card:nth-child(2){--emp-tone:#25abe1}
body.employee-mode #employeeModule .employee-metric-card:nth-child(3){--emp-tone:#da503e}
body.employee-mode #employeeModule .employee-metric-card:nth-child(4){--emp-tone:#6655ad}
body.employee-mode #employeeModule .employee-metric-icon{position:absolute;top:20px;right:16px;width:auto;height:auto;flex:0 0 auto;border:0;border-radius:0;background:transparent!important;color:#09314b!important;opacity:.20}
body.employee-mode #employeeModule .employee-metric-icon svg{width:72px;height:72px;fill:none;stroke:currentColor;stroke-width:1.6}
body.employee-mode #employeeModule .employee-metric-card>div:last-child{position:relative;z-index:2;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:0;min-width:0}
body.employee-mode #employeeModule .employee-metric-card strong{font-size:clamp(28px,3vw,43px);font-weight:800;line-height:1.05;color:#fff}
body.employee-mode #employeeModule .employee-metric-card span{font-size:clamp(11px,1vw,15px);font-weight:600;line-height:1.3;margin:9px 0 12px;color:#fff;max-width:80%}
body.employee-mode #employeeModule .employee-dashboard-panels{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;min-height:0}
body.employee-mode #employeeModule .employee-dashboard-panel{min-width:0;min-height:235px;padding:0;background:#fff;border:1px solid #dce6ed;border-top:3px solid #38adea;border-radius:5px;box-shadow:0 3px 12px rgba(20,51,75,.045);overflow:hidden}
body.employee-mode #employeeModule .employee-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:13px 14px;border:0}
body.employee-mode #employeeModule .employee-panel-heading h3{display:flex;align-items:center;gap:10px;min-width:0;margin:0;font-size:15px;font-weight:800;color:#24334b}
body.employee-mode #employeeModule .employee-panel-heading p{font-size:11px;color:#64748b;margin:3px 0 0;line-height:1.5}
body.employee-mode #employeeModule .employee-quick-grid{display:flex;flex-direction:column;gap:0;padding:0 13px 9px}
body.employee-mode #employeeModule .employee-quick-card{display:flex;align-items:center;gap:10px;min-width:0;min-height:0;padding:13px 6px;border:0;border-bottom:1px solid #e7edf2;border-radius:0;background:#fff;color:#078ed9;text-align:left;box-shadow:none;transform:none}
body.employee-mode #employeeModule .employee-quick-card:hover{background:#f3f9fc;border-color:#e0eaf1;transform:none}
body.employee-mode #employeeModule .employee-quick-card:last-child{border-bottom:0}
body.employee-mode #employeeModule .employee-quick-icon{width:27px;height:27px;flex:0 0 27px;border-radius:0;background:transparent;color:#0986ce}
body.employee-mode #employeeModule .employee-quick-icon svg{width:22px;height:22px}
body.employee-mode #employeeModule .employee-quick-card>span:nth-child(2) strong{color:#078ed9;font-size:12px;font-weight:700}
body.employee-mode #employeeModule .employee-quick-card>span:nth-child(2) small{color:#64748b;font-size:10px}
body.employee-mode #employeeModule .employee-quick-card>b{color:#078ed9;font-size:17px}
body.employee-mode #employeeModule .employee-recent-list{padding:0 9px 10px;overflow:auto}
body.employee-mode #employeeModule .employee-recent-row{display:flex;align-items:center;gap:10px;padding:9px 7px;border-bottom:1px solid #e9eef2;color:#354255}
body.employee-mode #employeeModule .employee-recent-row:nth-child(even){background:#fbfdff}
body.employee-mode #employeeModule .employee-avatar{background:#e6f4fb;color:#087fbd;border-color:#d5eaf5}
body.employee-mode #employeeModule .employee-recent-copy strong{color:#24334b}
body.employee-mode #employeeModule .employee-recent-copy small,body.employee-mode #employeeModule .employee-recent-date{color:#64748b}

/* Daftar karyawan dan halaman lainnya memakai border, header tabel, dan bidang warna yang sama. */
body.employee-mode #employeeModule .employee-directory-panel{min-height:0;background:#fff;border:1px solid #dce6ed;border-top:3px solid #38adea;border-radius:5px;padding:16px;box-shadow:0 3px 12px rgba(20,51,75,.045)}
body.employee-mode #employeeModule .employee-toolbar{border-bottom:1px solid #e5edf3}
body.employee-mode #employeeModule .employee-toolbar label{color:#536579}
body.employee-mode #employeeModule .employee-toolbar input,body.employee-mode #employeeModule .employee-toolbar select{border-color:#d4e0e8;border-radius:5px;background:#fff}
body.employee-mode #employeeModule .employee-results-heading h2{color:#24334b}
body.employee-mode #employeeModule .employee-table-wrap{border:1px solid #dce6ed;border-radius:5px;background:#fff}
body.employee-mode #employeeModule .employee-table thead th{background:#f1f7fb;color:#354657;border-bottom:1px solid #e5edf3}
body.employee-mode #employeeModule .employee-table tbody td{color:#354255;border-bottom:1px solid #e9eef2}
body.employee-mode #employeeModule .employee-table tbody tr:hover{background:#f3f9fc}
body.employee-mode #employeeModule .employee-table .employee-name-copy strong{color:#24334b}
body.employee-mode #employeeModule .employee-table .employee-name-copy small{color:#64748b}
body.employee-mode #employeeModule .employee-empty-state{background:#fff;border:1px solid #dce6ed;border-top:3px solid #38adea;border-radius:5px;box-shadow:0 3px 12px rgba(20,51,75,.045)}
body.employee-mode #employeeModule .employee-empty-state-icon{border-radius:5px;background:#e8f5fc;color:#0986ce}
body.employee-mode #employeeModule .employee-empty-state h3{color:#24334b}
body.employee-mode #employeeModule .employee-empty-state p{color:#64748b}
body.employee-mode #employeeModule .employee-section-icon{border-radius:5px;background:#e8f5fc;color:#0986ce}
body.employee-mode #employeeModule .employee-detail-header h3{color:#24334b}
body.employee-mode #employeeModule .employee-detail-field small{color:#64748b}
body.employee-mode #employeeModule .employee-detail-field strong{color:#354255}

/* Responsif sama dengan Inventaris Gudang. */
@media(min-width:1281px){body.employee-mode .module-subheader-inner{padding-left:272px}}
@media(min-width:1051px) and (max-width:1280px){body.employee-mode .module-subheader-inner{padding-left:231px}}
@media(min-width:601px) and (max-width:1050px){body.employee-mode .module-subheader-inner{padding-left:208px}}
@media(max-width:1280px){body.employee-mode #employeeModule .employee-sidebar{flex:0 0 215px!important;width:215px!important;min-width:215px!important}body.employee-mode #employeeModule .employee-dashboard-metrics{gap:12px}body.employee-mode #employeeModule .employee-content{padding:16px}}
@media(max-width:1050px){body.employee-mode #employeeModule .employee-sidebar{flex:0 0 192px!important;width:192px!important;min-width:192px!important}body.employee-mode #employeeModule .employee-sidebar .inventory-side-link{font-size:12px;gap:10px;padding:11px 9px}body.employee-mode #employeeModule .employee-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}body.employee-mode #employeeModule .employee-dashboard-panels{grid-template-columns:1fr}}
@media(max-width:600px){body.employee-mode .module-subheader-inner{padding-left:12px}body.employee-mode #employeeModule>.employee-layout{flex-direction:column}body.employee-mode #employeeModule .employee-sidebar{flex:0 0 auto!important;width:100%!important;min-width:0!important;max-height:85px}body.employee-mode #employeeModule .employee-sidebar .inventory-sidebar-nav{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:7px;gap:5px}body.employee-mode #employeeModule .employee-sidebar .inventory-side-link{flex:0 0 110px!important;width:110px!important;min-height:68px;padding:8px 6px;flex-direction:column;justify-content:center;text-align:center;font-size:10px;gap:5px}body.employee-mode #employeeModule .employee-content{padding:12px}body.employee-mode #employeeModule .employee-dashboard-metrics{gap:10px}body.employee-mode #employeeModule .employee-metric-card{min-height:114px;padding:11px 11px 12px}body.employee-mode #employeeModule .employee-metric-card strong{font-size:27px}body.employee-mode #employeeModule .employee-metric-card span{font-size:11px}body.employee-mode #employeeModule .employee-metric-icon svg{width:48px;height:48px}body.employee-mode #employeeModule .employee-dashboard-panels{grid-template-columns:1fr}body.employee-mode #employeeModule .employee-page-heading .inv-page-row{align-items:flex-start;flex-direction:column}body.employee-mode #employeeModule .employee-page-heading .employee-actions{width:100%}body.employee-mode #employeeModule .employee-page-heading .employee-actions button{flex:1}}

/* Daftar Hadir — input harian dan rekap bulanan; dibatasi pada modul karyawan. */
body.employee-mode #employeeAttendanceView .attendance-view-scroll{gap:12px;padding:0 2px 6px}
body.employee-mode #employeeAttendanceView .attendance-import-notice{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;background:#edf6ef;border:1px solid #d4e8d9;border-left:4px solid #27824e;border-radius:7px;color:#244b34}
body.employee-mode #employeeAttendanceView .attendance-import-icon{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;border-radius:50%;background:#d6ebdc;color:#1f7040;font-weight:900}
body.employee-mode #employeeAttendanceView .attendance-import-notice strong{display:block;font-size:12px;font-weight:800;margin:1px 0 3px}
body.employee-mode #employeeAttendanceView .attendance-import-notice p{margin:0;font-size:11px;line-height:1.55;color:#526e5a}
body.employee-mode #employeeAttendanceView .attendance-mode-switch{display:flex;gap:5px;align-self:flex-start;padding:4px;border:1px solid #d7e4dc;border-radius:7px;background:#e9f0eb}
body.employee-mode #employeeAttendanceView .attendance-mode-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 15px;border:1px solid transparent;border-radius:5px;background:transparent;color:#4c6555;font-size:12px;font-weight:750;cursor:pointer}
body.employee-mode #employeeAttendanceView .attendance-mode-btn.active{background:#1d6544;color:#fff;border-color:#1d6544;box-shadow:0 2px 5px rgba(25,75,48,.12)}
body.employee-mode #employeeAttendanceView .attendance-panel{min-width:0;min-height:0;background:#fff;border:1px solid #d8e4dc;border-top:3px solid #27824e;border-radius:7px;padding:15px;box-shadow:0 3px 12px rgba(20,55,35,.045)}
body.employee-mode #employeeAttendanceView .attendance-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 14px}
body.employee-mode #employeeAttendanceView .attendance-panel-heading h3{margin:0 0 5px;color:#1c3d2b;font-size:16px;line-height:1.3;font-weight:800}
body.employee-mode #employeeAttendanceView .attendance-panel-heading p{margin:0;color:#6a7b70;font-size:11px;line-height:1.55}
body.employee-mode #employeeAttendanceView .attendance-panel-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex:0 0 auto}
body.employee-mode #employeeAttendanceView .attendance-panel-actions button{min-height:36px;white-space:nowrap}
body.employee-mode #employeeAttendanceView .attendance-filter-grid{display:grid;grid-template-columns:minmax(145px,.9fr) minmax(150px,.95fr) minmax(220px,1.8fr);gap:10px;align-items:end;margin-bottom:13px}
body.employee-mode #employeeAttendanceView .attendance-filter-grid .field{display:flex;flex-direction:column;gap:5px;min-width:0;margin:0}
body.employee-mode #employeeAttendanceView .attendance-filter-grid label{color:#52695b;font-size:11px;font-weight:750}
body.employee-mode #employeeAttendanceView .attendance-filter-grid input,body.employee-mode #employeeAttendanceView .attendance-filter-grid select{width:100%;min-width:0;min-height:38px;border:1px solid #d3e0d7;border-radius:5px;padding:8px 10px;background:#fff;color:#243b2d;font-size:12px}
body.employee-mode #employeeAttendanceView .attendance-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 13px}
body.employee-mode #employeeAttendanceView .attendance-summary-card{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:11px 13px;background:#f4f8f5;border:1px solid #e0e9e2;border-radius:6px}
body.employee-mode #employeeAttendanceView .attendance-summary-card span{font-size:11px;line-height:1.35;color:#5e7464;font-weight:700}
body.employee-mode #employeeAttendanceView .attendance-summary-card strong{font-size:23px;line-height:1.1;color:#243d2e;font-weight:850;font-variant-numeric:tabular-nums}
body.employee-mode #employeeAttendanceView .attendance-summary-card.success{background:#eef8f0;border-color:#d5ead9}
body.employee-mode #employeeAttendanceView .attendance-summary-card.success strong{color:#237747}
body.employee-mode #employeeAttendanceView .attendance-summary-card.pending{background:#fff8e9;border-color:#f0e3bf}
body.employee-mode #employeeAttendanceView .attendance-summary-card.pending strong{color:#a66b0d}
body.employee-mode #employeeAttendanceView .attendance-bulk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;margin-bottom:10px;background:#f6f9f7;border:1px solid #e1e9e3;border-radius:5px}
body.employee-mode #employeeAttendanceView .attendance-select-all{display:flex;align-items:center;gap:7px;min-width:0;color:#52695b;font-size:11px;font-weight:700;cursor:pointer}
body.employee-mode #employeeAttendanceView .attendance-select-all input{accent-color:#26794a;width:15px;height:15px;margin:0}
body.employee-mode #employeeAttendanceView .attendance-bulk-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
body.employee-mode #employeeAttendanceView .attendance-bulk-actions label{font-size:11px;color:#52695b;font-weight:750}
body.employee-mode #employeeAttendanceView .attendance-bulk-actions select{min-width:155px;max-width:220px;min-height:34px;padding:6px 9px;border:1px solid #d3e0d7;border-radius:5px;background:#fff;color:#243b2d;font-size:11px}
body.employee-mode #employeeAttendanceView .attendance-bulk-actions button{min-height:34px;font-size:11px}
body.employee-mode #employeeAttendanceView .attendance-alert{padding:10px 12px;margin:0 0 10px;border-radius:5px;background:#edf7ef;border:1px solid #d1e7d6;color:#23663b;font-size:12px;line-height:1.5}
body.employee-mode #employeeAttendanceView .attendance-alert.error{background:#fff0ef;border-color:#f1d0cc;color:#a12b22}
body.employee-mode #employeeAttendanceView .attendance-table-wrap{width:100%;max-width:100%;min-height:100px;overflow:auto;border:1px solid #d9e4dc;border-radius:5px;background:#fff;scrollbar-width:thin}
body.employee-mode #employeeAttendanceView .attendance-table{width:100%;min-width:1050px;border-collapse:separate;border-spacing:0;font-size:11px}
body.employee-mode #employeeAttendanceView .attendance-table thead th{position:sticky;top:0;z-index:2;padding:10px 9px;background:#edf4ef;color:#385343;text-align:left;white-space:nowrap;font-size:10px;font-weight:850;border-bottom:1px solid #d9e4dc}
body.employee-mode #employeeAttendanceView .attendance-table tbody td{padding:7px 9px;border-bottom:1px solid #e8eee9;color:#304738;vertical-align:middle;background:#fff}
body.employee-mode #employeeAttendanceView .attendance-table tbody tr:nth-child(even) td{background:#fbfdfb}
body.employee-mode #employeeAttendanceView .attendance-table tbody tr:hover td{background:#f2f8f3}
body.employee-mode #employeeAttendanceView .attendance-table tbody tr:last-child td{border-bottom:0}
body.employee-mode #employeeAttendanceView .attendance-table .attendance-check-col{width:42px;text-align:center}
body.employee-mode #employeeAttendanceView .attendance-table input[type=checkbox]{width:15px;height:15px;accent-color:#26794a;cursor:pointer}
body.employee-mode #employeeAttendanceView .attendance-employee-copy{display:flex;flex-direction:column;gap:3px;min-width:155px}
body.employee-mode #employeeAttendanceView .attendance-employee-copy strong{font-size:11px;color:#263f2f;font-weight:800}
body.employee-mode #employeeAttendanceView .attendance-employee-copy small{font-size:10px;color:#728276;line-height:1.35}
body.employee-mode #employeeAttendanceView .attendance-warning-chip{display:inline-flex;align-items:center;gap:4px;max-width:210px;margin-top:3px;padding:3px 6px;border-radius:4px;background:#fff5df;color:#8a5a08;font-size:9px;line-height:1.35;white-space:normal}
body.employee-mode #employeeAttendanceView .attendance-unmatched-chip{display:inline-flex;align-items:center;margin-top:3px;padding:3px 6px;border-radius:4px;background:#fff0ef;color:#a12b22;font-size:9px;line-height:1.35;white-space:normal}
body.employee-mode #employeeAttendanceView .attendance-group-select{min-width:120px;max-width:145px}
body.employee-mode #employeeAttendanceView .attendance-table select,body.employee-mode #employeeAttendanceView .attendance-table input[type=text]{min-height:33px;width:100%;min-width:110px;padding:5px 7px;border:1px solid #d4e1d8;border-radius:5px;background:#fff;color:#2e4938;font-size:11px}
body.employee-mode #employeeAttendanceView .attendance-table select:disabled,body.employee-mode #employeeAttendanceView .attendance-table input:disabled{background:#f3f6f4;color:#89968c;cursor:not-allowed}
body.employee-mode #employeeAttendanceView .attendance-table .attendance-status-select{min-width:142px;font-weight:700}
body.employee-mode #employeeAttendanceView .attendance-status-select[data-status="present"]{background:#eaf7ed;border-color:#cbe7d2;color:#216d3c}
body.employee-mode #employeeAttendanceView .attendance-status-select[data-status="night"]{background:#f0edfb;border-color:#dcd4f3;color:#59489a}
body.employee-mode #employeeAttendanceView .attendance-status-select[data-status="off"]{background:#f1f4f2;border-color:#dce3de;color:#56675b}
body.employee-mode #employeeAttendanceView .attendance-status-select[data-status="permission"],body.employee-mode #employeeAttendanceView .attendance-status-select[data-status="sick"],body.employee-mode #employeeAttendanceView .attendance-status-select[data-status="leave"]{background:#fff6e8;border-color:#f0dfbd;color:#8a5c12}
body.employee-mode #employeeAttendanceView .attendance-status-select[data-status="late"],body.employee-mode #employeeAttendanceView .attendance-status-select[data-status="early_leave"],body.employee-mode #employeeAttendanceView .attendance-status-select[data-status="late_early"]{background:#fff0ef;border-color:#f1d1cd;color:#a22e25}
body.employee-mode #employeeAttendanceView .attendance-status-select[data-status="absent"]{background:#fee9e8;border-color:#efc3bf;color:#a21f1a}
body.employee-mode #employeeAttendanceView .attendance-status-select[data-status="training"],body.employee-mode #employeeAttendanceView .attendance-status-select[data-status="event"]{background:#eaf4fc;border-color:#cfe4f5;color:#17628b}
body.employee-mode #employeeAttendanceView .attendance-table-footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 2px 0;color:#6b7d70;font-size:10px;line-height:1.5}
body.employee-mode #employeeAttendanceView .attendance-month-summary{padding:9px 11px;margin-bottom:10px;border:1px solid #e0e9e2;border-radius:5px;background:#f5f8f6;color:#52695b;font-size:11px;font-weight:700}
body.employee-mode #employeeAttendanceView .attendance-month-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:10px}
body.employee-mode #employeeAttendanceView .attendance-month-table th,body.employee-mode #employeeAttendanceView .attendance-month-table td{padding:4px;border-right:1px solid #e5ece7;border-bottom:1px solid #e5ece7;text-align:center;background:#fff}
body.employee-mode #employeeAttendanceView .attendance-month-table thead th{position:sticky;top:0;z-index:5;height:36px;min-width:58px;background:#edf4ef;color:#385343;font-weight:850;white-space:nowrap}
body.employee-mode #employeeAttendanceView .attendance-month-table thead th.sticky-no,body.employee-mode #employeeAttendanceView .attendance-month-table tbody td.sticky-no{position:sticky;left:0;z-index:4;min-width:42px;width:42px}
body.employee-mode #employeeAttendanceView .attendance-month-table thead th.sticky-name,body.employee-mode #employeeAttendanceView .attendance-month-table tbody td.sticky-name{position:sticky;left:42px;z-index:4;min-width:165px;width:165px;text-align:left}
body.employee-mode #employeeAttendanceView .attendance-month-table thead th.sticky-position,body.employee-mode #employeeAttendanceView .attendance-month-table tbody td.sticky-position{position:sticky;left:207px;z-index:4;min-width:185px;width:185px;text-align:left}
body.employee-mode #employeeAttendanceView .attendance-month-table thead th.sticky-id,body.employee-mode #employeeAttendanceView .attendance-month-table tbody td.sticky-id{position:sticky;left:392px;z-index:4;min-width:98px;width:98px}
body.employee-mode #employeeAttendanceView .attendance-month-table thead th.sticky-no,body.employee-mode #employeeAttendanceView .attendance-month-table thead th.sticky-name,body.employee-mode #employeeAttendanceView .attendance-month-table thead th.sticky-position,body.employee-mode #employeeAttendanceView .attendance-month-table thead th.sticky-id{z-index:7;background:#e6f0e9}
body.employee-mode #employeeAttendanceView .attendance-month-table tbody td.sticky-no,body.employee-mode #employeeAttendanceView .attendance-month-table tbody td.sticky-name,body.employee-mode #employeeAttendanceView .attendance-month-table tbody td.sticky-position,body.employee-mode #employeeAttendanceView .attendance-month-table tbody td.sticky-id{background:#fff}
body.employee-mode #employeeAttendanceView .attendance-month-table tbody tr:nth-child(even) td{background:#fbfdfb}
body.employee-mode #employeeAttendanceView .attendance-month-table tbody tr:nth-child(even) td.sticky-no,body.employee-mode #employeeAttendanceView .attendance-month-table tbody tr:nth-child(even) td.sticky-name,body.employee-mode #employeeAttendanceView .attendance-month-table tbody tr:nth-child(even) td.sticky-position,body.employee-mode #employeeAttendanceView .attendance-month-table tbody tr:nth-child(even) td.sticky-id{background:#fbfdfb}
body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell{min-width:58px;width:58px;max-width:68px;padding:4px 3px;font-size:9px;line-height:1.2;white-space:pre-line;overflow-wrap:anywhere;color:#304738;background:#fff}
body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell[data-status="present"]{background:#eaf7ed;color:#216d3c;font-weight:800}
body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell[data-status="night"]{background:#f0edfb;color:#59489a;font-weight:800}
body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell[data-status="off"]{background:#f1f4f2;color:#56675b}
body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell[data-status="permission"],body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell[data-status="sick"],body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell[data-status="leave"]{background:#fff6e8;color:#8a5c12}
body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell[data-status="late"],body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell[data-status="early_leave"],body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell[data-status="late_early"],body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell[data-status="absent"]{background:#fff0ef;color:#a22e25;font-weight:800}
body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell[data-status="training"],body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell[data-status="event"],body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell[data-status="new_employee"]{background:#eaf4fc;color:#17628b}
body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-status-cell .attendance-month-status{display:block;white-space:pre-line}

/* Kolom tanggal merah nasional (tanpa Cuti Bersama) dan libur perusahaan manual pada Rekapan Bulanan. */
body.employee-mode #employeeAttendanceView .attendance-month-table thead th.attendance-month-holiday-column{
  background:#fee2e2!important;color:#991b1b!important;border-color:#efb0b0!important;
  box-shadow:inset 0 -2px 0 #dc6b6b;
}
body.employee-mode #employeeAttendanceView .attendance-month-table tbody td.attendance-month-holiday-column{
  background:#fff0f0!important;color:#9f2525!important;border-color:#f1c4c4!important;
}
body.employee-mode #employeeAttendanceView .attendance-month-table tbody td.attendance-month-holiday-column .attendance-month-status{
  color:inherit!important;font-weight:750;
}
body.employee-mode #employeeAttendanceView .attendance-month-holiday-legend{
  display:flex;align-items:center;gap:8px;min-height:28px;padding:5px 2px;
  color:#8f2a2a;font-size:10px;font-weight:750;
}
body.employee-mode #employeeAttendanceView .attendance-month-holiday-legend-mark{
  display:inline-block;width:13px;height:13px;flex:0 0 13px;border:1px solid #e7a2a2;
  border-radius:3px;background:#fee2e2;
}

body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-position{display:flex;flex-direction:column;gap:2px;min-width:170px;line-height:1.25}
body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-position small{font-size:9px;color:#728276;font-weight:500}
body.employee-mode #employeeAttendanceView .attendance-month-table .attendance-month-group-row td{position:static!important;padding:6px 10px;background:#dce9df!important;color:#2e5b3e;font-weight:850;text-align:left;letter-spacing:.2px;border-bottom:1px solid #c8d9cd;white-space:nowrap}
body.employee-mode #employeeAttendanceView .attendance-table-empty{padding:26px 14px!important;text-align:center!important;color:#728276!important;font-size:12px!important}
body.employee-mode #employeeAttendanceView .attendance-readonly-notice{padding:10px 12px;border:1px solid #f0dfbd;border-radius:5px;background:#fff8e9;color:#8a5c12;font-size:11px;line-height:1.5}
@media(max-width:1050px){body.employee-mode #employeeAttendanceView .attendance-panel-heading{flex-direction:column;align-items:stretch}body.employee-mode #employeeAttendanceView .attendance-panel-actions{justify-content:flex-start}body.employee-mode #employeeAttendanceView .attendance-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.employee-mode #employeeAttendanceView .attendance-search-field{grid-column:1/-1}}
@media(max-width:700px){body.employee-mode #employeeAttendanceView .attendance-panel{padding:10px}body.employee-mode #employeeAttendanceView .attendance-panel-heading{gap:10px}body.employee-mode #employeeAttendanceView .attendance-panel-actions{display:grid;grid-template-columns:1fr 1fr}body.employee-mode #employeeAttendanceView .attendance-panel-actions button{white-space:normal;padding:8px 9px;font-size:11px}body.employee-mode #employeeAttendanceView .attendance-filter-grid{grid-template-columns:1fr 1fr;gap:8px}body.employee-mode #employeeAttendanceView .attendance-search-field{grid-column:1/-1}body.employee-mode #employeeAttendanceView .attendance-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}body.employee-mode #employeeAttendanceView .attendance-summary-card{padding:9px}body.employee-mode #employeeAttendanceView .attendance-summary-card strong{font-size:20px}body.employee-mode #employeeAttendanceView .attendance-bulk-toolbar{align-items:flex-start;flex-direction:column}body.employee-mode #employeeAttendanceView .attendance-bulk-actions{justify-content:flex-start;width:100%}body.employee-mode #employeeAttendanceView .attendance-bulk-actions select{flex:1;min-width:120px}body.employee-mode #employeeAttendanceView .attendance-mode-switch{width:100%}body.employee-mode #employeeAttendanceView .attendance-mode-btn{flex:1;padding:8px 6px}}

/* Daftar Hadir: submenu navigasi dan tiga pilihan grup untuk input harian. */
body.employee-mode #employeeModule .employee-sidebar-attendance-group{display:flex;flex-direction:column;gap:2px;width:100%;min-width:0}
body.employee-mode #employeeModule .employee-sidebar-attendance-group #employeeTabAttendance{width:100%;display:flex;align-items:center}
body.employee-mode #employeeModule .employee-attendance-chevron{margin-left:auto;font-size:15px;line-height:1;opacity:.8;transition:transform .15s ease}
body.employee-mode #employeeModule #employeeTabAttendance[aria-expanded="true"] .employee-attendance-chevron{transform:rotate(180deg)}
body.employee-mode #employeeModule .employee-attendance-subnav{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:4px 0 8px 34px;margin:0;border:0;background:transparent;border-radius:0;align-self:stretch;width:100%}
body.employee-mode #employeeModule .employee-attendance-subnav[hidden]{display:none!important}
body.employee-mode #employeeModule .employee-attendance-subnav .attendance-mode-btn{display:flex;width:100%;min-height:36px;align-items:center;justify-content:flex-start;text-align:left;padding:8px 12px;border:0;border-radius:5px;background:transparent;color:#c8ddd5;font-size:12px;font-weight:550;box-shadow:none;white-space:normal;cursor:pointer}
body.employee-mode #employeeModule .employee-attendance-subnav .attendance-mode-btn:hover{background:rgba(255,255,255,.1);color:#fff}
body.employee-mode #employeeModule .employee-attendance-subnav .attendance-mode-btn.active{background:linear-gradient(90deg,rgba(35,184,124,.4),rgba(47,164,167,.15));color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #62df93}
body.employee-mode #employeeModule .attendance-group-select{min-width:150px;max-width:175px}
@media(max-width:600px){
 body.employee-mode #employeeModule .employee-sidebar-attendance-group{flex:0 0 128px;width:128px;align-self:stretch}
 body.employee-mode #employeeModule .employee-sidebar-attendance-group #employeeTabAttendance{min-height:45px;flex:0 0 auto;width:100%;justify-content:center;gap:5px;padding:7px 5px;font-size:10px}
 body.employee-mode #employeeModule .employee-attendance-chevron{display:none}
 body.employee-mode #employeeModule .employee-attendance-subnav{padding:2px 3px 3px;gap:2px}
 body.employee-mode #employeeModule .employee-attendance-subnav .attendance-mode-btn{min-height:30px;justify-content:center;text-align:center;padding:5px 3px;font-size:9px}
}

body.employee-mode #employeeModule .employee-attendance-subnav.inventory-tx-submenu{display:flex;flex-direction:column;gap:2px;margin:0 0 4px 10px;padding:3px 0 3px 8px;border-left:1px solid rgba(166,234,193,.32);background:transparent;border-radius:0;align-items:stretch}
body.employee-mode #employeeModule .employee-attendance-subnav[hidden]{display:none!important}
body.employee-mode #employeeModule .employee-attendance-subnav .inventory-tx-sub-link{display:flex;align-items:center;width:100%;min-height:36px;padding:8px 9px 8px 10px;border:0;border-radius:7px;font-size:10.5px;font-weight:550;text-align:left;color:#cfe1d6;background:rgba(255,255,255,.025);cursor:pointer}
body.employee-mode #employeeModule .employee-attendance-subnav .inventory-tx-sub-link:hover{background:rgba(255,255,255,.08);color:#fff}
body.employee-mode #employeeModule .employee-attendance-subnav .inventory-tx-sub-link.active{background:linear-gradient(95deg,rgba(27,152,92,.42),rgba(27,152,92,.08));box-shadow:inset 2px 0 0 #9ee0a7;color:#fff}
body.employee-mode #employeeModule .attendance-person-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
body.employee-mode #employeeModule .attendance-person-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:15px;border:1px solid var(--line,#dce5de);border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(20,45,30,.035)}
body.employee-mode #employeeModule .attendance-person-card-top{display:flex;align-items:flex-start;gap:10px;min-width:0}
body.employee-mode #employeeModule .attendance-person-avatar{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#e8f3eb;color:#276443;font-size:13px;font-weight:800}
body.employee-mode #employeeModule .attendance-person-copy{flex:1;min-width:0}
body.employee-mode #employeeModule .attendance-person-copy strong{display:block;color:var(--ink,#20352a);font-size:13px;line-height:1.4;overflow-wrap:anywhere}
body.employee-mode #employeeModule .attendance-person-copy small{display:block;margin-top:3px;color:var(--muted,#718078);font-size:11px;line-height:1.45;overflow-wrap:anywhere}
body.employee-mode #employeeModule .attendance-person-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid #edf1ee;font-size:11px;color:var(--muted,#718078)}
body.employee-mode #employeeModule .attendance-person-group{display:inline-flex;align-items:center;max-width:58%;padding:4px 8px;border-radius:999px;background:#edf5ef;color:#2b6647;font-size:10px;font-weight:700;white-space:normal}
body.employee-mode #employeeModule .attendance-person-status{display:inline-flex;align-items:center;justify-content:center;max-width:62%;padding:5px 8px;border-radius:999px;background:#f0f2f1;color:#58655e;font-size:10px;font-weight:750;text-align:center;white-space:normal}
body.employee-mode #employeeModule .attendance-person-status.status-present,body.employee-mode #employeeModule .attendance-person-status.status-night{background:#e5f5e9;color:#237343}
body.employee-mode #employeeModule .attendance-person-status.status-absent{background:#fde8e7;color:#a62b2b}
body.employee-mode #employeeModule .attendance-person-status.status-pending{background:#fff4d7;color:#916514}
body.employee-mode #employeeModule .attendance-person-status.status-leave,body.employee-mode #employeeModule .attendance-person-status.status-off{background:#eaf0f8;color:#375a85}
body.employee-mode #employeeModule .attendance-cards-filter-grid{grid-template-columns:minmax(150px,.8fr) minmax(160px,.8fr) minmax(220px,1.6fr)}
body.employee-mode #employeeModule .attendance-cards-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1050px){body.employee-mode #employeeModule .attendance-person-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){body.employee-mode #employeeModule .attendance-person-card-grid{grid-template-columns:1fr}body.employee-mode #employeeModule .attendance-cards-filter-grid{grid-template-columns:1fr}body.employee-mode #employeeModule .attendance-cards-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}body.employee-mode #employeeModule .attendance-cards-summary-grid .attendance-summary-card{padding:9px}body.employee-mode #employeeModule .attendance-cards-summary-grid .attendance-summary-card strong{font-size:19px}}

/* Absensi Harian: fokus pada susunan grup yang bersih, elegan, dan profesional. */
body.employee-mode.attendance-cards-only-mode #employeeModule #attendanceImportNotice,
body.employee-mode.attendance-cards-only-mode #employeeModule #attendanceReadOnlyNotice,
body.employee-mode #employeeModule #attendanceDailyCardsPanel > .attendance-panel-heading,
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-cards-filter-grid,
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-cards-summary-grid,
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-table-footer {display:none !important;}
body.employee-mode #employeeModule #attendanceDailyCardsPanel {padding:2px 0 0;background:transparent;border:0;box-shadow:none;}
body.employee-mode #employeeModule #attendanceCardsGrid {display:flex;flex-direction:column;gap:20px;min-width:0;padding:4px 0 10px;}
body.employee-mode #employeeModule .attendance-group-section {min-width:0;padding:0;border:1px solid #dbe7df;border-radius:18px;background:linear-gradient(180deg,#ffffff 0%,#fbfdfb 100%);box-shadow:0 8px 24px rgba(23,71,45,.06);overflow:hidden;}
body.employee-mode #employeeModule .attendance-group-section.attendance-not-present-section{background:linear-gradient(180deg,#ffffff 0%,#fffaf8 100%);border-color:#f0e1d8;}
body.employee-mode #employeeModule .attendance-group-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 14px;border-bottom:1px solid #ecf1ed;}
body.employee-mode #employeeModule .attendance-group-header-main{display:flex;align-items:center;gap:12px;min-width:0;}
body.employee-mode #employeeModule .attendance-group-accent{width:5px;align-self:stretch;border-radius:999px;background:linear-gradient(180deg,#19a45b 0%,#0f7d45 100%);}
body.employee-mode #employeeModule .attendance-not-present-section .attendance-group-accent{background:linear-gradient(180deg,#dc6d42 0%,#b9471d 100%);}
body.employee-mode #employeeModule .attendance-group-heading {margin:0;color:#183d2b;font-size:28px;line-height:1.15;font-weight:850;letter-spacing:-.02em;}
body.employee-mode #employeeModule .attendance-group-count{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;background:#ecf6ef;color:#206942;font-size:12px;font-weight:800;white-space:nowrap;}
body.employee-mode #employeeModule .attendance-not-present-section .attendance-group-count{background:#fff0e8;color:#a64f1f;}
body.employee-mode #employeeModule .attendance-group-member-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:18px 14px;padding:18px 20px 22px;align-items:start;}
body.employee-mode #employeeModule .attendance-person-card.attendance-person-card-simple {display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;min-width:0;padding:8px 6px 10px;border-radius:16px;border:1px solid transparent;background:transparent;box-shadow:none;text-align:center;transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;}
body.employee-mode #employeeModule .attendance-person-card.attendance-person-card-simple:hover{transform:translateY(-2px);background:#f8fbf8;border-color:#e1ebe3;box-shadow:0 7px 18px rgba(22,63,41,.06);}
body.employee-mode #employeeModule .attendance-person-card-clickable{cursor:pointer;}
body.employee-mode #employeeModule .attendance-person-card-clickable:focus-visible{outline:3px solid #7cc99a;outline-offset:2px;background:#f8fbf8;}
body.employee-mode #employeeModule .attendance-person-card-simple .attendance-person-avatar {display:flex;align-items:center;justify-content:center;flex:0 0 66px;width:66px;height:66px;overflow:hidden;border-radius:50%;border:3px solid #dcebe1;background:linear-gradient(145deg,#e7f3eb,#f8fbf8);color:#1f6844;font-size:18px;font-weight:800;box-shadow:0 4px 12px rgba(18,66,40,.08);}
body.employee-mode #employeeModule .attendance-person-card-simple .attendance-person-avatar img {display:block;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:50%;}
body.employee-mode #employeeModule .attendance-person-name {display:block;max-width:100%;color:#193325;font-size:12.5px;line-height:1.45;font-weight:800;letter-spacing:.01em;overflow-wrap:anywhere;text-transform:uppercase;}
body.employee-mode #employeeModule .attendance-person-status{display:inline-flex;align-items:center;justify-content:center;max-width:100%;margin-top:1px;padding:5px 10px;border-radius:999px;background:#eef2ef;color:#52635a;font-size:10px;line-height:1.3;font-weight:800;text-align:center;white-space:normal;overflow-wrap:anywhere;}
body.employee-mode #employeeModule .attendance-person-status.status-present,body.employee-mode #employeeModule .attendance-person-status.status-night{background:#e5f5e9;color:#237343;}
body.employee-mode #employeeModule .attendance-person-status.status-late,body.employee-mode #employeeModule .attendance-person-status.status-early-leave{background:#fff2d6;color:#8b5d0b;}
body.employee-mode #employeeModule .attendance-person-status.status-off,body.employee-mode #employeeModule .attendance-person-status.status-leave{background:#eaf0f8;color:#375a85;}
body.employee-mode #employeeModule .attendance-person-status.status-absent,body.employee-mode #employeeModule .attendance-person-status.status-permission,body.employee-mode #employeeModule .attendance-person-status.status-sick{background:#fde8e7;color:#a62b2b;}
body.employee-mode #employeeModule .attendance-person-status.status-training,body.employee-mode #employeeModule .attendance-person-status.status-event,body.employee-mode #employeeModule .attendance-person-status.status-new-employee,body.employee-mode #employeeModule .attendance-person-status.status-late-early{background:#f1eafe;color:#6842a0;}
body.employee-mode #employeeModule .attendance-person-status.status-pending{background:#fff4d7;color:#916514;}
body.employee-mode #employeeModule .attendance-group-empty {padding:0 20px 22px;color:#6f8276;font-size:12px;}
body.employee-mode.attendance-cards-only-mode #employeeModule .employee-page-heading{display:none!important;}
body.employee-mode #employeeModule .attendance-form-fab{display:none;position:fixed;right:28px;bottom:28px;z-index:1500;align-items:center;justify-content:center;gap:0;width:52px;min-width:52px;height:52px;min-height:52px;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,#16834b,#0c6c3e);color:#fff;font-size:13px;font-weight:800;box-shadow:0 8px 24px rgba(14,100,56,.28);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease;}
body.employee-mode #employeeModule .attendance-form-fab:hover{transform:translateY(-2px);box-shadow:0 11px 28px rgba(14,100,56,.34);}
body.employee-mode #employeeModule .attendance-form-fab:focus-visible{outline:3px solid #a8e3bc;outline-offset:3px;}
body.employee-mode #employeeModule .attendance-form-fab svg{width:21px;height:21px;flex:0 0 21px;}
body.employee-mode.attendance-cards-only-mode #employeeModule #attendanceFormFab{display:inline-flex;}
/* FAB Pengajuan Cuti: gunakan bentuk dan warna yang sama dengan FAB absensi. */
body.employee-mode #employeeModule #employeeLeaveView:not([hidden]) #leaveAddBtn:not([hidden]){display:inline-flex;}
body.employee-mode #employeeModule #employeeLeaveView #leaveAddBtn[hidden]{display:none!important;}
@media(max-width:900px){
  body.employee-mode #employeeModule .attendance-group-header{padding:16px 16px 12px;}
  body.employee-mode #employeeModule .attendance-group-heading{font-size:24px;}
  body.employee-mode #employeeModule .attendance-group-member-grid{padding:16px 16px 18px;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:16px 10px;}
}
@media(max-width:650px){
  body.employee-mode #employeeModule .attendance-form-fab{right:16px;bottom:18px;width:48px;min-width:48px;height:48px;min-height:48px;padding:0;}
  body.employee-mode #employeeModule .attendance-group-header{align-items:flex-start;flex-direction:column;gap:8px;}
  body.employee-mode #employeeModule .attendance-group-header-main{width:100%;}
  body.employee-mode #employeeModule .attendance-group-heading{font-size:21px;}
  body.employee-mode #employeeModule .attendance-group-count{font-size:11px;padding:6px 10px;}
  body.employee-mode #employeeModule .attendance-group-member-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:14px 8px;}
  body.employee-mode #employeeModule .attendance-person-card-simple .attendance-person-avatar{flex-basis:58px;width:58px;height:58px;}
  body.employee-mode #employeeModule .attendance-person-name{font-size:11.5px;}
}

/* Hanya Form Input: sembunyikan header halaman dan notifikasi riwayat yang ada di atasnya. */
body.employee-mode.attendance-form-only-mode #employeeModule .employee-page-heading,
body.employee-mode.attendance-form-only-mode #employeeModule #attendanceImportNotice,
body.employee-mode.attendance-form-only-mode #employeeModule #attendanceReadOnlyNotice {
  display: none !important;
}
body.employee-mode.attendance-form-only-mode #employeeModule .attendance-view-scroll {
  padding-top: 0 !important;
}

.employee-photo-button-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.employee-photo-crop-panel{margin-top:12px;padding:14px;border:1px solid #d9e7dd;border-radius:12px;background:#f6faf7}
.employee-photo-crop-panel[hidden]{display:none!important}
.employee-photo-crop-layout{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:18px}
.employee-photo-crop-stage{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
#employeePhotoCropCanvas{display:block;width:min(280px,100%);height:auto;aspect-ratio:1/1;border-radius:50%;border:3px solid #d5e7db;background:#fff;box-shadow:0 2px 9px rgba(20,65,38,.10);cursor:grab;touch-action:none;user-select:none}
#employeePhotoCropCanvas.dragging{cursor:grabbing}
.employee-photo-crop-caption{font-size:11px;line-height:1.4;color:#66786c;text-align:center}
.employee-photo-crop-controls{display:flex;flex-direction:column;gap:9px;min-width:0}
.employee-photo-crop-controls>label{font-size:12px;font-weight:750;color:#33483a}
.employee-photo-crop-controls input[type=range]{width:100%;accent-color:#167747;min-height:22px}
.employee-photo-zoom-value{font-size:12px;font-weight:800;color:#176b3e}
.employee-photo-preview{width:104px;height:104px;flex-basis:104px;padding:0;border-width:3px}
.employee-photo-preview img{object-fit:cover;object-position:center center;image-rendering:auto}
.employee-avatar.has-photo img,.employee-avatar img{object-fit:cover;object-position:center center;image-rendering:auto}
.employee-card-top .employee-avatar{width:56px;height:56px;flex-basis:56px}
.employee-table .employee-avatar{width:42px;height:42px;flex-basis:42px}
.employee-detail-header .employee-avatar{width:88px;height:88px;flex-basis:88px;font-size:20px}
.employee-detail-header .employee-avatar img{object-fit:cover;object-position:center center}
body.employee-mode #employeeModule .attendance-person-card-simple .attendance-person-avatar{flex-basis:64px;width:64px;height:64px;font-size:15px;box-shadow:0 1px 4px rgba(18,64,38,.08)}
body.employee-mode #employeeModule .attendance-person-card-simple .attendance-person-avatar img{object-fit:cover;object-position:center center;image-rendering:auto}
@media(max-width:720px){.employee-photo-crop-layout{grid-template-columns:minmax(0,1fr)}.employee-photo-crop-stage{width:100%}#employeePhotoCropCanvas{width:min(250px,100%)}.employee-photo-preview{width:84px;height:84px;flex-basis:84px}.employee-detail-header .employee-avatar{width:76px;height:76px;flex-basis:76px}body.employee-mode #employeeModule .attendance-person-card-simple .attendance-person-avatar{flex-basis:56px;width:56px;height:56px}}

/* Form Input: tanggal, pilih semua, dan aksi massal dalam satu baris yang ringkas. */
body.employee-mode #employeeModule .attendance-form-hidden-filters[hidden]{display:none!important;}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-form-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  min-height:66px;padding:12px 14px;margin:0 0 14px;
  background:linear-gradient(110deg,#f7faf8 0%,#f1f7f3 100%);
  border:1px solid #dbe8df;border-radius:10px;box-shadow:0 2px 7px rgba(24,69,42,.035);
}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-form-toolbar-left{
  display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 auto;flex-wrap:wrap;
}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-date-inline{
  display:flex;align-items:center;gap:9px;min-width:0;margin:0;
}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-date-inline label{
  margin:0;color:#365541;font-size:11px;font-weight:800;white-space:nowrap;
}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-date-inline input{
  width:165px;min-width:145px;min-height:36px;padding:7px 10px;border:1px solid #cadbcf;border-radius:7px;
  background:#fff;color:#233f2d;font-size:12px;font-weight:650;box-shadow:inset 0 1px 2px rgba(20,55,35,.025);
}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-date-inline input:focus{
  outline:3px solid rgba(36,139,79,.13);border-color:#26834d;
}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-toolbar-divider{
  width:1px;height:30px;flex:0 0 1px;background:#d8e5dc;
}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-select-all{
  display:flex;align-items:center;gap:8px;margin:0;color:#405b49;font-size:11px;font-weight:750;white-space:nowrap;
}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-select-all input{
  width:16px;height:16px;margin:0;accent-color:#16824b;cursor:pointer;
}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-bulk-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:9px;flex:0 1 auto;min-width:0;
}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-bulk-actions label{
  color:#405b49;font-size:11px;font-weight:800;white-space:nowrap;
}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-bulk-actions select{
  width:175px;min-width:150px;max-width:190px;min-height:36px;padding:7px 10px;border:1px solid #cadbcf;border-radius:7px;
  background:#fff;color:#294433;font-size:11px;
}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-bulk-actions button{
  min-height:36px;padding:7px 12px;border-radius:7px;font-size:11px;font-weight:750;white-space:nowrap;
}
@media(max-width:900px){
  body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-form-toolbar{align-items:stretch;gap:12px;}
  body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-form-toolbar-left{justify-content:space-between;}
  body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-bulk-actions{justify-content:flex-start;flex-wrap:wrap;}
}
@media(max-width:600px){
  body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-form-toolbar{padding:11px;gap:12px;}
  body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-form-toolbar-left{align-items:flex-start;flex-direction:column;gap:10px;}
  body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-date-inline{width:100%;align-items:center;justify-content:space-between;}
  body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-date-inline input{width:62%;min-width:0;}
  body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-toolbar-divider{display:none;}
  body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-bulk-actions{display:grid;grid-template-columns:auto minmax(0,1fr);width:100%;gap:8px;}
  body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-bulk-actions label{grid-column:1/-1;}
  body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-bulk-actions select{width:100%;min-width:0;max-width:none;}
  body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-bulk-actions button{grid-column:1/-1;width:100%;}
}

body.employee-mode #employeeModule .attendance-group-select-dropdown{position:relative;display:inline-flex;align-items:center;min-width:205px;z-index:30;}
body.employee-mode #employeeModule .attendance-group-select-toggle{display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;min-height:38px;max-width:270px;padding:8px 11px;border:1px solid #cbdccf;border-radius:8px;background:#fff;color:#264b34;font-size:11px;font-weight:800;cursor:pointer;box-shadow:0 1px 2px rgba(20,55,35,.03);}
body.employee-mode #employeeModule .attendance-group-select-toggle:disabled{opacity:.55;cursor:not-allowed;}
body.employee-mode #employeeModule .attendance-group-select-toggle>svg:first-child{width:16px;height:16px;flex:0 0 16px;color:#247849;}
body.employee-mode #employeeModule .attendance-group-select-toggle .attendance-group-select-chevron{width:14px;height:14px;flex:0 0 14px;margin-left:auto;transition:transform .15s ease;}
body.employee-mode #employeeModule .attendance-group-select-toggle[aria-expanded="true"] .attendance-group-select-chevron{transform:rotate(180deg);}
body.employee-mode #employeeModule .attendance-group-select-menu{position:absolute;left:0;top:calc(100% + 7px);width:260px;max-width:calc(100vw - 36px);padding:8px;border:1px solid #d7e4da;border-radius:12px;background:#fff;box-shadow:0 14px 34px rgba(20,58,35,.16);z-index:1000;}
body.employee-mode #employeeModule .attendance-group-select-menu[hidden]{display:none!important;}
body.employee-mode #employeeModule .attendance-group-select-option{display:grid;grid-template-columns:17px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:39px;padding:7px 9px;border-radius:8px;color:#294a35;font-size:12px;font-weight:700;cursor:pointer;}
body.employee-mode #employeeModule .attendance-group-select-option:hover{background:#f2f8f3;}
body.employee-mode #employeeModule .attendance-group-select-option input{width:16px;height:16px;margin:0;accent-color:#16824b;cursor:pointer;}
body.employee-mode #employeeModule .attendance-group-select-option input:disabled{cursor:not-allowed;}
body.employee-mode #employeeModule .attendance-group-select-option small{display:inline-flex;align-items:center;justify-content:center;min-width:25px;padding:3px 6px;border-radius:999px;background:#edf5ef;color:#477054;font-size:10px;font-weight:800;}
body.employee-mode #employeeModule .attendance-group-select-all-option{background:#f5faf6;}
body.employee-mode #employeeModule .attendance-group-select-divider{height:1px;margin:6px 4px;background:#e7eee8;}
body.employee-mode #employeeModule .attendance-group-select-footer{margin-top:6px;padding:9px 8px 3px;border-top:1px solid #edf1ed;color:#65796b;font-size:10px;font-weight:750;}
@media(max-width:600px){body.employee-mode #employeeModule .attendance-group-select-dropdown{width:100%;min-width:0;}body.employee-mode #employeeModule .attendance-group-select-toggle{width:100%;max-width:none;}body.employee-mode #employeeModule .attendance-group-select-menu{width:100%;max-width:100%;}}

body.employee-mode #employeeModule #attendanceDailyPanel #attendanceExportDailyBtn[hidden]{display:none!important;}
body.employee-mode #employeeModule #attendanceDailyPanel .attendance-table tr.attendance-status-missing td{background:#fff4f2!important;}
body.employee-mode #employeeModule #attendanceDailyPanel .attendance-table tr.attendance-status-missing td:first-child{box-shadow:inset 3px 0 0 #d94c3d;}
body.employee-mode #employeeModule #attendanceDailyPanel .attendance-status-select[aria-invalid="true"]{border-color:#d94c3d!important;outline:3px solid rgba(217,76,61,.16);background:#fffafa;}
body.employee-mode #employeeModule #attendanceDailyPanel #attendanceBackToDailyBtn{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:40px;padding:9px 18px;
  border:1px solid #bcd6c6;border-radius:999px;background:linear-gradient(145deg,#fff,#eff8f1);color:#0c6643;
  font-size:12px;line-height:1.25;font-weight:700;white-space:nowrap;
  box-shadow:0 4px 12px rgba(20,94,57,.08),inset 0 1px 0 #fff;cursor:pointer;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
body.employee-mode #employeeModule #attendanceDailyPanel #attendanceBackToDailyBtn:hover{
  background:linear-gradient(145deg,#fff,#e3f4e9);box-shadow:0 6px 14px rgba(20,94,57,.14);transform:translateY(-1px);
}
@media(max-width:620px){
  body.employee-mode #employeeModule #attendanceDailyPanel .attendance-panel-heading .attendance-panel-actions{display:flex;flex-wrap:wrap;gap:8px}
  body.employee-mode #employeeModule #attendanceDailyPanel #attendanceSaveDailyBtn,body.employee-mode #employeeModule #attendanceDailyPanel #attendanceBackToDailyBtn{flex:1 1 100%;}
  body.employee-mode #employeeModule #attendanceDailyPanel #attendanceBackToDailyBtn{min-height:38px;padding:8px 14px;font-size:11px;}
}

/* Hindari panel Form Input menyusut sehingga baris tabel tampak keluar dari kartu. */
body.employee-mode #employeeAttendanceView .attendance-panel{flex:0 0 auto!important;align-self:stretch;height:auto!important;max-height:none!important;overflow:visible!important;}
body.employee-mode #employeeAttendanceView #attendanceDailyTableWrap{flex:0 0 auto!important;width:100%;height:auto!important;min-height:0;max-height:none!important;overflow:auto!important;position:relative;}
body.employee-mode #employeeAttendanceView #attendanceDailyTableWrap .attendance-daily-table{height:auto!important;max-height:none!important;margin:0;}
body.employee-mode #employeeAttendanceView #attendanceDailyPanel .attendance-table-footer{position:relative;flex:0 0 auto;}

/* Rekapan Bulanan: header ringkas, ekspor di kanan, tabel terpisah tanpa judul kelompok. */
body.employee-mode.attendance-monthly-only-mode #employeeModule .employee-page-heading,
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceImportNotice,
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceReadOnlyNotice{display:none!important;}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel{flex:0 0 auto!important;height:auto!important;max-height:none!important;}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel > .attendance-monthly-page-heading{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:16px;margin:0 0 16px;padding:0 0 13px;border-bottom:1px solid #e5ece7;}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-monthly-heading-copy{min-width:0;}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-monthly-page-heading h3{margin:0;color:#173d2a;font-size:23px;line-height:1.25;font-weight:850;letter-spacing:-.02em;}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-panel-actions{display:flex!important;align-items:center;justify-content:flex-end!important;gap:10px;margin-left:auto;}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-month-header-filter{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px;min-width:250px;margin:0;}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-month-header-filter label{flex:0 0 auto;margin:0;color:#536b5b;font-size:11px;line-height:1.2;font-weight:750;white-space:nowrap;}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-month-header-filter input{flex:0 1 150px;width:150px;min-width:125px;height:40px;padding:8px 10px;border:1px solid #cddbd1;border-radius:8px;background:#fff;color:#244c35;font-family:inherit;font-size:12px;font-weight:600;}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-month-export-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 15px;border-radius:9px;background:#fff;border:1px solid #cddbd1;color:#244c35;font-size:12px;font-weight:750;white-space:nowrap;box-shadow:0 2px 5px rgba(22,62,39,.035);}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-month-export-btn:hover{background:#f1f8f3;border-color:#a8cbb4;color:#176b3c;}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-month-export-btn svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-month-filter-grid{display:none!important;}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel #attendanceMonthSummary{display:none!important;}
body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyTableWrap{display:flex;flex-direction:column;gap:18px;overflow:visible!important;border:0;background:transparent;padding:0;}
body.employee-mode #employeeAttendanceView .attendance-month-table-section{min-width:0;width:100%;display:flex;flex-direction:column;gap:0;}
body.employee-mode #employeeAttendanceView .attendance-month-section-title{display:none!important;}
body.employee-mode #employeeAttendanceView .attendance-month-section-table-wrap{width:100%;max-width:100%;overflow:auto;border:1px solid #d9e4dc;border-radius:8px;background:#fff;scrollbar-width:thin;}
body.employee-mode #employeeAttendanceView .attendance-month-table{width:max-content;min-width:100%;}
body.employee-mode #employeeAttendanceView .attendance-month-table .sticky-no{font-variant-numeric:tabular-nums;}
/* Match the inventory submenu's icon size, button height, and spacing. */
body.employee-mode #employeeModule .employee-attendance-subnav .inventory-tx-sub-link{gap:8px;min-height:36px;padding:8px 9px 8px 10px;font-size:10.5px;line-height:1.25;}
body.employee-mode #employeeModule .employee-attendance-subnav .inventory-tx-sub-link svg{display:block;width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
body.employee-mode #employeeModule .employee-attendance-subnav .inventory-tx-sub-link span{min-width:0;}
@media(max-width:650px){
  body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-monthly-page-heading{flex-direction:row!important;align-items:center!important;gap:10px;}
  body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-monthly-page-heading h3{font-size:19px;}
  body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-panel-actions{gap:7px;}
  body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-month-header-filter{min-width:225px;gap:6px;}
  body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-month-header-filter input{flex-basis:130px;width:130px;min-width:115px;}
  body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-month-header-filter input{height:36px;padding:7px 8px;font-size:11px;}
  body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-month-export-btn{min-height:36px;padding:7px 10px;font-size:11px;}
}
@media(max-width:480px){
  body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel > .attendance-monthly-page-heading{align-items:flex-start!important;flex-wrap:wrap;}
  body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-monthly-heading-copy{flex:1 1 100%;}
  body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-panel-actions{width:100%;margin-left:0;justify-content:flex-start!important;}
  body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-month-header-filter{flex:1 1 auto;min-width:0;}
  body.employee-mode.attendance-monthly-only-mode #employeeModule #attendanceMonthlyPanel .attendance-month-header-filter input{flex:0 1 130px;width:130px;min-width:105px;}
}

/* Samakan jarak dan tinggi submenu Daftar Hadir dengan submenu transaksi Inventaris Gudang. */
body.employee-mode #employeeModule #employeeAttendanceSubnav.inventory-tx-submenu{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:2px !important;
  margin:0 0 4px 10px !important;
  padding:3px 0 3px 8px !important;
  border-left:1px solid rgba(166,234,193,.32) !important;
  background:transparent !important;
  border-radius:0 !important;
  width:calc(100% - 10px);
  box-sizing:border-box;
}
body.employee-mode #employeeModule #employeeAttendanceSubnav .inventory-tx-sub-link{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  width:100%;
  min-height:52px !important;
  box-sizing:border-box !important;
  padding:10px 10px !important;
  margin:0 !important;
  gap:8px !important;
  border:0 !important;
  border-radius:7px !important;
  font-size:10.5px !important;
  line-height:1.25 !important;
  font-weight:550 !important;
  text-align:left;
  white-space:normal;
}
body.employee-mode #employeeModule #employeeAttendanceSubnav .inventory-tx-sub-link svg{
  display:block;
  flex:0 0 16px;
  width:16px;
  height:16px;
  margin:0;
}
body.employee-mode #employeeModule #employeeAttendanceSubnav .inventory-tx-sub-link span{min-width:0;}
body.employee-mode #employeeModule #employeeAttendanceSubnav[hidden]{display:none !important;}

/* Manajemen Cuti */
.leave-view-scroll{gap:14px}
.leave-page-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 2px}
.leave-page-title{display:flex;align-items:center;gap:12px;min-width:0}
.leave-page-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:7px;background:#e7f2fb;color:#1686c8}
.leave-page-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.leave-page-title h2{margin:0 0 4px;color:#1e2f42;font-size:20px;line-height:1.25;font-weight:800}
.leave-page-title p{margin:0;color:#64748b;font-size:12px;line-height:1.5}
.leave-add-btn,.leave-save-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:9px 14px;border:1px solid #1686c8;border-radius:4px;background:#1686c8;color:#fff;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.leave-add-btn:hover,.leave-save-btn:hover{background:#0876b6;border-color:#0876b6}
.leave-add-btn[hidden]{display:none!important}
.leave-alert,.leave-form-feedback{padding:10px 12px;border:1px solid #b9e4c7;border-radius:5px;background:#effaf2;color:#176b36;font-size:12px;line-height:1.5}
.leave-alert{position:sticky;top:0;z-index:25;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 12px;box-shadow:0 3px 12px rgba(20,51,75,.10)}
.leave-alert[hidden]{display:none!important}
.leave-alert-text{flex:1;min-width:0;white-space:pre-line}
.leave-alert-close{flex:0 0 26px;width:26px;height:26px;margin:-3px -4px 0 0;border:0;border-radius:4px;background:transparent;color:currentColor;font-size:21px;line-height:1;cursor:pointer}
.leave-alert-close:hover{background:rgba(0,0,0,.07)}
.leave-alert.is-error,.leave-form-feedback.is-error{border-color:#f1c1c1;background:#fff2f2;color:#a12c2c}
.leave-form-panel,.leave-list-panel{min-width:0;background:#fff;border:1px solid #dce6ed;border-radius:5px;box-shadow:0 2px 8px rgba(20,51,75,.035)}
.leave-panel-heading,.leave-list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #e7edf2}
.leave-panel-heading h3,.leave-list-heading h3{margin:0 0 4px;color:#24334b;font-size:14px;font-weight:800}
.leave-panel-heading p,.leave-list-heading p{margin:0;color:#64748b;font-size:11px;line-height:1.5}
.leave-close-btn{width:31px;height:31px;display:grid;place-items:center;border:0;border-radius:4px;background:#eef3f7;color:#536579;font-size:22px;line-height:1;cursor:pointer}
.leave-close-btn:hover{background:#e0eaf1;color:#24334b}
.leave-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 18px;padding:16px}
.leave-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.leave-field-wide{grid-column:1/-1}
.leave-field label{color:#354657;font-size:12px;font-weight:700}
.leave-policy-info{padding:10px 12px;border:1px solid #d9e8df;border-radius:5px;background:#f4faf6;color:#315b43;font-size:11px;line-height:1.55}
.leave-policy-info[hidden]{display:none!important}
.leave-preview-summary{margin-top:7px;color:#25633f;font-size:11px;font-weight:700;line-height:1.5}
.leave-holiday-manager{background:#fff;border:1px solid #dce6ed;border-radius:5px;padding:13px 16px;box-shadow:0 2px 8px rgba(20,51,75,.035)}
.leave-holiday-manager summary{cursor:pointer;color:#24334b;font-size:13px;font-weight:800;list-style-position:inside}
.leave-holiday-help{margin:9px 0 12px;color:#64748b;font-size:11px;line-height:1.5}
.leave-holiday-syncbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;margin:0 0 14px;border:1px solid #dcebe2;border-radius:6px;background:#f6fbf7}
.leave-holiday-sync-copy{display:grid;gap:4px;min-width:0}
.leave-holiday-sync-copy strong{color:#245b3b;font-size:12px;line-height:1.45}
.leave-holiday-sync-copy strong.is-error{color:#9a4b20}
.leave-holiday-sync-copy small{color:#64748b;font-size:10px;line-height:1.45}
.leave-holiday-sync-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;min-height:36px;padding:8px 11px;border:1px solid #b9d8c3;border-radius:5px;background:#fff;color:#27633f;font-size:11px;font-weight:800;cursor:pointer}
.leave-holiday-sync-btn:hover{background:#edf7f0}
.leave-holiday-sync-btn:disabled{opacity:.55;cursor:wait}
.leave-holiday-sync-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.leave-holiday-manual-heading{margin:0 0 8px;color:#34465a;font-size:11px;font-weight:800}
.leave-holiday-form{display:grid;grid-template-columns:minmax(160px,.8fr) minmax(220px,1.4fr) auto;align-items:end;gap:12px;margin-bottom:12px}
.leave-holiday-form .leave-save-btn{min-height:39px;white-space:nowrap}
.leave-holiday-list{display:grid;gap:7px;max-height:320px;overflow:auto;padding-right:3px}
.leave-holiday-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid #e7edf2;border-radius:4px;background:#fbfdfc;color:#334155;font-size:11px}
.leave-holiday-row strong{font-weight:700}
.leave-holiday-row small{display:block;margin-top:2px;color:#64748b}
.leave-holiday-source{display:inline-flex;align-items:center;width:max-content;margin-top:5px;padding:2px 6px;border-radius:999px;background:#edf4f8;color:#4b6174;font-size:9px;font-weight:800}
.leave-holiday-source.national{background:#e8f4ec;color:#28643f}
.leave-holiday-source.joint{background:#fff5df;color:#8a641b}
.leave-holiday-source.tentative{background:#f2edff;color:#65519b}
.leave-holiday-source.manual{background:#eaf1fb;color:#345b91}
.leave-holiday-delete{width:29px;height:29px;display:grid;place-items:center;border:1px solid #f0caca;border-radius:4px;background:#fff;color:#a12c2c;cursor:pointer}
.leave-holiday-delete svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.leave-holiday-empty{padding:10px;border:1px dashed #dce5df;border-radius:4px;color:#64748b;font-size:11px;text-align:center}
@media(max-width:680px){.leave-holiday-form{grid-template-columns:1fr}.leave-holiday-form .leave-save-btn{width:100%}.leave-holiday-syncbar{align-items:stretch;flex-direction:column}.leave-holiday-sync-btn{width:100%}}
.leave-field input,.leave-field select,.leave-field textarea{width:100%;min-height:39px;padding:9px 12px;border:1px solid #cfdbe5;border-radius:3px;background:#fff;color:#334155;font:inherit;font-size:12px;outline:none}
.leave-field textarea{min-height:82px;resize:vertical;line-height:1.5}
.leave-field input:focus,.leave-field select:focus,.leave-field textarea:focus{border-color:#4aa8df;box-shadow:0 0 0 3px rgba(56,165,222,.12)}
.leave-form-feedback{margin:0 16px 12px}
.leave-form-actions{display:flex;gap:8px;padding:0 16px 16px}
.leave-cancel-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 14px;border:1px solid #cbd5df;border-radius:4px;background:#fff;color:#526174;font-size:12px;font-weight:700;cursor:pointer}
.leave-cancel-btn:hover{background:#f3f6f9}
.leave-list-heading{border-bottom:0;padding-bottom:10px}

.leave-table-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px 12px;color:#46576a;font-size:12px}
.leave-entries-control,.leave-search-control{display:flex;align-items:center;gap:7px;white-space:nowrap}
.leave-entries-control select{height:31px;min-width:55px;padding:4px 7px;border:1px solid #cbd7e1;border-radius:4px;background:#fff;color:#344255;font-size:12px}
.leave-search-control input{width:min(245px,42vw);height:33px;padding:6px 9px;border:1px solid #cbd7e1;border-radius:4px;color:#344255;font-size:12px}
.leave-table-wrap{width:100%;overflow:auto;border-top:1px solid #dce6ed;border-bottom:1px solid #dce6ed;background:#fff}
.leave-table{width:100%;min-width:970px;border-collapse:collapse;font-size:12px;color:#344255}
.leave-table thead th{padding:12px 11px;border-bottom:2px solid #d9e2e9;background:#f8fafc;color:#24334b;text-align:left;font-size:12px;font-weight:800;white-space:nowrap}
.leave-table tbody td{padding:12px 11px;border-bottom:1px solid #e5ebf0;vertical-align:top;line-height:1.55}
.leave-table thead th[data-leave-sort]{position:relative;padding-right:25px;cursor:pointer;user-select:none}
.leave-table thead th[data-leave-sort]::after{content:'↕';position:absolute;right:9px;color:#a7b3bf;font-size:12px;font-weight:500}
.leave-table thead th[data-leave-sort].sort-asc::after{content:'↑';color:#1686c8}
.leave-table thead th[data-leave-sort].sort-desc::after{content:'↓';color:#1686c8}
.leave-table tbody tr:nth-child(odd){background:#f8f8f8}
.leave-table tbody tr:hover{background:#f0f7fc}
.leave-table tbody tr:last-child td{border-bottom:0}
.leave-table .leave-table-empty{padding:30px 12px;text-align:center;color:#728197}
.leave-employee-cell{display:flex;align-items:center;gap:9px;min-width:160px}
.leave-employee-cell .employee-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:5px;font-size:10px}
.leave-employee-copy{min-width:0}
.leave-employee-copy strong{display:block;color:#25364a;font-size:12px;overflow-wrap:anywhere}
.leave-employee-copy small{display:block;margin-top:3px;color:#728197;font-size:10px}
.leave-period-cell{min-width:205px}
.leave-period-cell strong{display:block;color:#24334b;font-size:11px;margin-bottom:3px}
.leave-period-cell small{display:block;color:#56677b;font-size:10px;line-height:1.65}
.leave-period-note{display:block;max-width:220px;margin-top:4px;color:#7a8796;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leave-days-value{display:inline-block;min-width:55px;color:#344255;font-weight:700;white-space:nowrap}
.leave-status-pill{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:5px 8px;border-radius:4px;font-size:10px;font-weight:800;white-space:nowrap}
.leave-status-pill.pending{background:#fff4dc;color:#94640c}
.leave-status-pill.approved{background:#e8f7ec;color:#1d7b42}
.leave-status-pill.rejected{background:#fdecec;color:#b13c3c}
.leave-status-pill.cancelled{background:#eef1f4;color:#5e6875}
.leave-capacity-pill{display:inline-flex;align-items:center;margin-top:5px;padding:4px 7px;border-radius:4px;font-size:9px;font-weight:850;line-height:1.3;white-space:normal}
.leave-capacity-pill.required{background:#fff0d9;color:#985b00;border:1px solid #f2d49c}
.leave-capacity-pill.approved{background:#fce8e8;color:#a12f2f;border:1px solid #efbcbc}
.leave-capacity-override-wrap{padding:10px 12px;border:1px solid #edc7a0;border-radius:6px;background:#fff8ed}
.leave-capacity-override-label{display:flex;align-items:flex-start;gap:9px;cursor:pointer;color:#71470b;font-size:12px;font-weight:800}
.leave-capacity-override-label input{width:17px;height:17px;margin:1px 0 0;accent-color:#b66a12;flex:0 0 17px}
.leave-capacity-override-label span{display:grid;gap:4px}
.leave-capacity-override-label small{font-size:11px;font-weight:500;line-height:1.5;color:#805c2b}

.leave-options{display:flex;align-items:center;justify-content:flex-start;gap:4px;white-space:nowrap;text-align:left}
.leave-action-btn{width:32px;height:32px;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;line-height:1!important;text-align:center!important;vertical-align:middle;border:0;border-radius:4px;color:#fff;cursor:pointer;flex:0 0 32px}
.leave-action-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.leave-action-btn.view{background:#19a34a}.leave-action-btn.edit{background:#f7b928;color:#263548}.leave-action-btn.delete{background:#dc4545}.leave-action-btn.decision-approve{background:#16864a}.leave-action-btn.decision-reject{background:#dc4545}
.leave-action-btn:hover{filter:brightness(.94)}
.leave-status-pill.workflow-waiting{background:#fff4dc;color:#94640c}
.leave-status-pill.workflow-in_progress{background:#e7f2ff;color:#1768a5}
.leave-status-pill.workflow-completed{background:#e8f7ec;color:#1d7b42}
.leave-status-pill.workflow-none{background:#eef1f4;color:#7b8794}
.leave-workflow-action{display:inline-flex;align-items:center;justify-content:center;min-height:29px;padding:5px 8px;border:0;border-radius:4px;background:#176fa8;color:#fff;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap}
.leave-workflow-action.complete{background:#21834b}
.leave-workflow-action:hover,.leave-action-btn.workflow-play:hover{filter:brightness(.94)}
.leave-action-btn.workflow-play{background:#176fa8}
.leave-action-btn.workflow-play svg{width:17px;height:17px;display:block;flex:0 0 auto;margin:0}
.leave-options{flex-wrap:wrap;max-width:260px}
.leave-table-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;color:#64748b;font-size:11px}

.leave-pagination{display:flex;align-items:center;gap:4px}
.leave-pagination button{min-width:31px;height:29px;padding:4px 8px;border:1px solid #d4dee7;border-radius:4px;background:#fff;color:#42556a;font-size:11px;cursor:pointer}
.leave-pagination button.active{border-color:#1686c8;background:#1686c8;color:#fff}
.leave-pagination button:disabled{opacity:.45;cursor:not-allowed}
.leave-modal{position:fixed;inset:0;z-index:10020;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(15,30,45,.48)}
.leave-modal[hidden]{display:none!important}
.leave-modal-card{width:min(620px,100%);max-height:min(85vh,760px);overflow:auto;border-radius:7px;background:#fff;box-shadow:0 16px 50px rgba(15,30,45,.25)}
.leave-modal-heading{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-bottom:1px solid #e5ebf0}
.leave-modal-heading h3{margin:0;color:#24334b;font-size:15px}
.leave-detail-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:17px}
.leave-detail-field{min-width:0;padding:10px;border:1px solid #e6edf2;border-radius:4px;background:#fbfcfd}
.leave-detail-field.wide{grid-column:1/-1}
.leave-detail-field small{display:block;margin-bottom:5px;color:#718096;font-size:10px;font-weight:700}
.leave-detail-field strong{display:block;color:#2c3d50;font-size:12px;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}
.leave-modal-actions{display:flex;justify-content:flex-end;padding:0 17px 16px}
@media(max-width:760px){.leave-page-header{align-items:flex-start;flex-direction:column}.leave-add-btn{width:100%}.leave-table-controls{align-items:flex-start;flex-direction:column}.leave-search-control{width:100%;justify-content:space-between}.leave-search-control input{width:min(65%,300px)}.leave-form-grid{grid-template-columns:minmax(0,1fr)}.leave-field-wide{grid-column:auto}.leave-table-footer{align-items:flex-start;flex-direction:column}.leave-detail-content{grid-template-columns:minmax(0,1fr)}.leave-detail-field.wide{grid-column:auto}}

#employeeLeaveView.leave-form-open .leave-list-panel,
  #employeeLeaveView.leave-form-open #leaveHolidayPanel,
  #employeeLeaveView.leave-form-open #leaveAddBtn {
    display: none !important;
  }

#employeeLeaveView #leaveFormPanel .leave-policy-computation-only,
  #employeeLeaveView #leaveFormPanel #leavePolicyInfo,
  #employeeLeaveView #leaveFormPanel #leavePreviewSummary {
    display:none !important;
  }

/* Hilangkan judul halaman Manajemen Cuti di atas tabel maupun formulir. */
  body.employee-mode.employee-leave-only-mode #employeeModule .employee-page-heading {
    display:none !important;
  }
  /* Satu baris: judul daftar di kiri, pencarian di kanan. */
  #employeeLeaveView .leave-list-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px 20px;
    padding:15px 16px;
    border-bottom:1px solid #e7edf2;
    flex-wrap:wrap;
  }
  #employeeLeaveView .leave-list-heading h3 {
    flex:0 1 auto;
    margin:0;
    color:#24334b;
    font-size:14px;
    line-height:1.5;
  }
  #employeeLeaveView .leave-list-heading .leave-search-control {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
    color:#46576a;
    font-size:12px;
    white-space:nowrap;
  }
  #employeeLeaveView .leave-list-heading .leave-search-control input {
    width:clamp(180px,25vw,300px);
    max-width:100%;
  }
  /* Scrolling horizontal dan vertikal dibatasi pada tabel pengajuan. */
  #employeeLeaveView .leave-table-wrap {
    width:100%;
    max-height:min(60vh,560px);
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    border-top:0;
  }
  #employeeLeaveView .leave-table thead th,
  #employeeLeaveView .leave-table thead th[data-leave-sort] {
    position:sticky;
    top:0;
    z-index:2;
    background:#f8fafc;
  }
  /* Pilihan jumlah data menempati posisi lama teks jumlah baris. */
  #employeeLeaveView .leave-table-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px 16px;
    padding:12px 16px;
  }
  #employeeLeaveView .leave-table-footer .leave-entries-control {
    display:flex;
    align-items:center;
    gap:7px;
    color:#46576a;
    white-space:nowrap;
    font-size:12px;
  }
  @media (max-width:680px) {
    #employeeLeaveView .leave-list-heading {align-items:stretch;flex-direction:column;}
    #employeeLeaveView .leave-list-heading .leave-search-control {width:100%;margin-left:0;justify-content:space-between;}
    #employeeLeaveView .leave-list-heading .leave-search-control input {flex:1;min-width:0;width:auto;}
    #employeeLeaveView .leave-table-footer {flex-direction:column;align-items:stretch;}
    #employeeLeaveView .leave-table-footer .leave-pagination {justify-content:flex-end;flex-wrap:wrap;}
  }

#employeeBestView .employee-best-shell{gap:18px;padding:25px 27px 38px}
#employeeBestView .employee-best-heading h2{font-size:25px;letter-spacing:-.6px}
#employeeBestView .employee-best-eyebrow{color:#376d4e;letter-spacing:1.4px}
#employeeBestView .employee-best-period{border-radius:15px;box-shadow:0 2px 15px rgba(17,65,42,.04)}
#employeeBestView .employee-best-live{display:flex;align-items:center;gap:6px;font-size:10px;color:#4a7558;margin-top:3px;font-weight:650}
#employeeBestView .employee-best-live-dot{width:7px;height:7px;border-radius:99px;background:#35ab77;box-shadow:0 0 0 3px #d1eddd}
#employeeBestView .employee-best-award{position:relative;overflow:hidden;display:flex;align-items:center;gap:22px;padding:26px 27px;background:linear-gradient(112deg,#173e2b 0%,#20583a 66%,#246347 100%);border:1px solid #2d6c4c;border-radius:19px;box-shadow:0 13px 34px rgba(27,64,42,.15);color:white;min-height:172px}
#employeeBestView .employee-best-award:before{content:"";position:absolute;width:330px;height:330px;right:-118px;top:-185px;border-radius:50%;border:1px solid rgba(248,218,137,.23);box-shadow:0 0 0 52px rgba(255,255,255,.022),0 0 0 107px rgba(255,255,255,.02);pointer-events:none}
#employeeBestView .employee-best-award-emblem{display:flex;align-items:center;justify-content:center;flex:0 0 92px;height:92px;border-radius:21px;background:linear-gradient(140deg,#dcb877,#f8e4af);color:#765622;box-shadow:0 9px 22px rgba(1,28,13,.25);z-index:1}
#employeeBestView .employee-best-award-emblem svg{width:61px;height:61px}
#employeeBestView .employee-best-award-body{min-width:0;flex:1;position:relative;z-index:1}
#employeeBestView .employee-best-award-kicker{font-size:10px;letter-spacing:1.4px;font-weight:800;color:#d6e6d9}
#employeeBestView .employee-best-award-body h3{margin:8px 0 7px;color:white;font-size:21px;line-height:1.32;font-weight:820;letter-spacing:-.35px;overflow-wrap:anywhere}
#employeeBestView .employee-best-award-body p{margin:0;max-width:620px;color:#c5dfd0;font-size:12px;line-height:1.6}
#employeeBestView .employee-best-award-meta{margin-top:12px;display:flex;align-items:center;gap:11px;flex-wrap:wrap;color:#d8e9dc;font-size:11px}
#employeeBestView .employee-best-award-meta[hidden]{display:none}
#employeeBestView .employee-best-award-actions{display:flex;position:relative;z-index:1;align-items:flex-end;justify-content:center;flex-direction:column;gap:10px;min-width:180px}
#employeeBestView .employee-best-award-status{background:rgba(244,226,161,.13);border:1px solid rgba(255,236,189,.29);color:#fde7aa;border-radius:100px;padding:8px 12px;font-size:11px;font-weight:760;white-space:nowrap}
#employeeBestView .employee-best-award.has-winner .employee-best-award-status{background:rgba(204,238,215,.17);border-color:rgba(204,238,215,.34);color:#ddf9df}
#employeeBestView .employee-best-hero-button{border:0;border-radius:10px;background:#f7db9d;color:#33422c;font-size:11.5px;padding:11px 15px;font-weight:800;cursor:pointer;box-shadow:0 4px 9px rgba(0,0,0,.1)}
#employeeBestView .employee-best-hero-button:hover{background:#ffecbd}
#employeeBestView .employee-best-reset{background:transparent;border:0;padding:2px 3px;color:#d3ebdb;font-weight:650;text-decoration:underline;text-underline-offset:3px;font-size:11px;cursor:pointer}
#employeeBestView .employee-best-reset:hover{color:#fff}
#employeeBestView .employee-best-award button[hidden]{display:none!important}
#employeeBestView .employee-best-stat{border-radius:14px;padding:18px 20px;box-shadow:0 4px 15px rgba(24,66,43,.04)}
#employeeBestView .employee-best-stat strong{font-size:32px}
#employeeBestView .employee-best-stat small{font-size:10px;line-height:1.55;color:#8a998f}
#employeeBestView .employee-best-panel{border-radius:16px;box-shadow:0 5px 23px rgba(25,67,41,.045)}
#employeeBestView .employee-best-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:20px 22px}
#employeeBestView .employee-best-panel-tag{background:#ecf6f0;color:#356e50;padding:7px 10px;font-weight:740;font-size:10px;border-radius:7px;white-space:nowrap}
#employeeBestView .employee-best-table{min-width:900px}
#employeeBestView .employee-best-table td,#employeeBestView .employee-best-table th{padding:15px 14px}
#employeeBestView .employee-best-table tr.employee-best-winner-row{background:#f1faf2}
#employeeBestView .employee-best-table tr.employee-best-winner-row:hover{background:#e8f7ea}
#employeeBestView .employee-best-table tr.employee-best-winner-row td:first-child{box-shadow:inset 3px 0 0 #349160}
#employeeBestView .employee-best-rank{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border:1px solid #e4ece6;background:#f8faf8;border-radius:9px;font-weight:800;color:#54725c}
#employeeBestView .employee-best-rank.top{background:#fff4d7;border-color:#f4dfae;color:#986a20}
#employeeBestView .employee-best-result.selected{background:#def3e4;color:#1c6941;border-color:#b7e4c4}
#employeeBestView .employee-best-result.top{background:#fff6e4;border-color:#f2dfb0;color:#996822}
#employeeBestView .employee-best-pick{display:inline-flex;align-items:center;justify-content:center;min-width:94px;gap:6px;border:1px solid #b8d9c3;border-radius:9px;background:#f1f8f3;color:#245b38;padding:9px 12px;font-weight:760;font-size:11px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
#employeeBestView .employee-best-pick:hover:not([disabled]){background:#dcf0e1;border-color:#8dbd99}
#employeeBestView .employee-best-pick[disabled]{cursor:default;opacity:.7}
#employeeBestView .employee-best-pick.chosen{color:#17643c;background:#dff3e5;border-color:#b5e2c2}
#employeeBestView .employee-best-view-only{font-size:11px;color:#a1aca3}
@media(max-width:850px){#employeeBestView .employee-best-award{flex-wrap:wrap;gap:16px;padding:21px}#employeeBestView .employee-best-award-actions{flex-direction:row;align-items:center;justify-content:flex-start;min-width:0;width:100%;flex-wrap:wrap}#employeeBestView .employee-best-award-emblem{flex-basis:72px;height:72px;border-radius:17px}#employeeBestView .employee-best-award-emblem svg{width:49px;height:49px}}
@media(max-width:680px){#employeeBestView .employee-best-shell{padding:16px 13px 28px;gap:14px}#employeeBestView .employee-best-award{gap:13px;padding:18px 15px;align-items:flex-start}#employeeBestView .employee-best-award-emblem{flex-basis:54px;height:54px;border-radius:13px}#employeeBestView .employee-best-award-emblem svg{width:37px;height:37px}#employeeBestView .employee-best-award-body h3{font-size:17px}#employeeBestView .employee-best-award-kicker{font-size:9px}#employeeBestView .employee-best-award-body p{font-size:11px}#employeeBestView .employee-best-stat{padding:12px 10px}#employeeBestView .employee-best-stat strong{font-size:25px}#employeeBestView .employee-best-stat small{font-size:9px}#employeeBestView .employee-best-panel-head{padding:15px}}

/* Karyawan Terbaik: kandidat berbasis absensi bulan sebelumnya */
#employeeBestView .employee-best-shell{padding:22px 24px 34px;max-width:1500px;margin:0 auto;display:grid;gap:20px;min-width:0}
#employeeBestView .employee-best-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
#employeeBestView .employee-best-eyebrow{margin:0 0 7px;color:#488063;font-size:11px;font-weight:800;letter-spacing:1.1px}
#employeeBestView .employee-best-heading h2{margin:0;color:#193e2b;font-size:24px;line-height:1.3}
#employeeBestView .employee-best-description{margin:7px 0 0;font-size:13px;color:#637568;line-height:1.55;max-width:800px}
#employeeBestView .employee-best-period{display:flex;flex-direction:column;gap:6px;min-width:195px;background:#f0f7f2;border:1px solid #d9e9dd;border-radius:13px;padding:13px 17px}
#employeeBestView .employee-best-period span{color:#647a6b;font-weight:600;font-size:11px}
#employeeBestView .employee-best-period strong{color:#23553a;font-weight:800;font-size:16px}
#employeeBestView .employee-best-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#employeeBestView .employee-best-stat{display:flex;flex-direction:column;gap:8px;padding:15px 18px;background:#fff;border:1px solid #e2eae4;border-radius:13px;box-shadow:0 2px 12px rgba(26,58,37,.035)}
#employeeBestView .employee-best-stat span{color:#61766a;font-size:12px;font-weight:600}
#employeeBestView .employee-best-stat strong{font-size:28px;line-height:1.1;font-weight:800;color:#1f5437;font-variant-numeric:tabular-nums}
#employeeBestView .employee-best-panel{background:#fff;border:1px solid #e0e9e3;border-radius:15px;overflow:hidden;box-shadow:0 3px 20px rgba(29,63,43,.035)}
#employeeBestView .employee-best-panel-head{padding:18px 20px;border-bottom:1px solid #e5eee7}
#employeeBestView .employee-best-panel-head h3{margin:0;font-size:16px;color:#1d4430}
#employeeBestView .employee-best-panel-head p{margin:6px 0 0;color:#708176;font-size:12px}
#employeeBestView .employee-best-table-scroll{max-height:min(58vh,580px);overflow:auto;overscroll-behavior:contain}
#employeeBestView .employee-best-table{width:100%;min-width:750px;border-collapse:separate;border-spacing:0;font-size:12px}
#employeeBestView .employee-best-table thead th{position:sticky;top:0;z-index:1;text-align:left;white-space:nowrap;background:#f4f8f5;border-bottom:1px solid #dfe8e2;color:#4d6958;font-size:11px;font-weight:800;padding:13px 14px}
#employeeBestView .employee-best-table td{padding:13px 14px;border-bottom:1px solid #eff3f0;color:#384c3e;vertical-align:middle}
#employeeBestView .employee-best-table tr:last-child td{border-bottom:none}
#employeeBestView .employee-best-table tbody tr:hover{background:#f9fcfa}
#employeeBestView .employee-best-number{color:#6e8174;font-variant-numeric:tabular-nums}
#employeeBestView .employee-best-name{display:flex;align-items:center;gap:10px;min-width:175px}
#employeeBestView .employee-best-name strong{font-weight:700;color:#223f2d}
#employeeBestView .employee-best-count{font-variant-numeric:tabular-nums;font-weight:700}
#employeeBestView .employee-best-result{display:inline-block;padding:5px 10px;color:#276445;background:#eaf5ed;border:1px solid #d6e9dc;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
#employeeBestView .employee-best-message{text-align:center!important;color:#718275!important;padding:35px 15px!important;font-size:13px}
#employeeBestView .employee-best-footnote{margin:0;padding:15px 20px;color:#758578;background:#fbfdfb;border-top:1px solid #edf2ee;font-size:11.5px;line-height:1.6}
@media(max-width:680px){#employeeBestView .employee-best-shell{padding:15px 13px 26px;gap:14px}#employeeBestView .employee-best-heading h2{font-size:21px}#employeeBestView .employee-best-period{width:100%;min-width:0}#employeeBestView .employee-best-stats{gap:8px}#employeeBestView .employee-best-stat{padding:12px 10px;min-width:0}#employeeBestView .employee-best-stat span{font-size:10px}#employeeBestView .employee-best-stat strong{font-size:23px}}

#employeeEditorFeedback:not([hidden]) {
    margin: 2px 20px 14px;
    padding: 11px 13px;
    border: 1px solid #f2b8b5;
    border-radius: 9px;
    background: #fff4f2;
    color: #a4262c;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
  }

#employeeBestView .employee-best-shell{padding-top:21px}
#employeeBestView .employee-best-awards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#employeeBestView .employee-best-award-card{display:flex;flex-direction:column;align-items:stretch;gap:15px;min-height:236px;padding:22px 24px;border-radius:17px}
#employeeBestView .employee-best-award-card:nth-child(2){background:linear-gradient(118deg,#194730 0%,#236448 100%)}
#employeeBestView .employee-best-award-card-top{display:flex;align-items:center;gap:13px;position:relative;z-index:1}
#employeeBestView .employee-best-award-card .employee-best-award-emblem{flex:0 0 54px;height:54px;border-radius:12px}
#employeeBestView .employee-best-award-card .employee-best-award-emblem svg{width:38px;height:38px}
#employeeBestView .employee-best-slot-tag{font-size:12px;font-weight:780;color:#f6dda9;margin-top:6px}
#employeeBestView .employee-best-award-card .employee-best-award-body{flex:1}
#employeeBestView .employee-best-award-card .employee-best-award-body h3{font-size:20px;margin:4px 0 7px}
#employeeBestView .employee-best-award-card .employee-best-award-body p{font-size:11px}
#employeeBestView .employee-best-award-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;position:relative;z-index:1}
#employeeBestView .employee-best-award-card .employee-best-award-status{font-size:10px}
#employeeBestView .employee-best-award-card .employee-best-reset{font-size:11px}
#employeeBestView .employee-best-award-card .employee-best-reset[hidden]{display:none!important}
#employeeBestView .employee-best-slot-buttons{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#employeeBestView .employee-best-slot-buttons .employee-best-pick{min-width:69px;padding:7px 10px;font-size:10.5px}
#employeeBestView .employee-best-slot-buttons .employee-best-pick[disabled]{opacity:.7}
#employeeBestView .employee-best-result.selected{background:#e3f5e8;color:#24623d}
@media(max-width:900px){#employeeBestView .employee-best-awards{grid-template-columns:1fr}}
@media(max-width:680px){#employeeBestView .employee-best-award-card{padding:18px 17px;min-height:205px}}

/* Ikuti lebar penuh halaman Karyawan dan Manajemen Cuti. */
body.employee-mode #employeeBestView .employee-view-scroll{
  width:100%; min-width:0; padding:1px 4px 4px 1px;
}
#employeeBestView .employee-best-shell{
  width:100%; max-width:none; min-width:0; margin:0;
  padding:0 0 18px 0; box-sizing:border-box; align-content:start;
  gap:16px;
}
#employeeBestView .employee-best-awards,
#employeeBestView .employee-best-stats,
#employeeBestView .employee-best-panel{width:100%; min-width:0;}
/* Foto sejajar dengan nama karyawan, jabatan dan penetap. */
#employeeBestView .employee-best-award-card{
  min-width:0; min-height:228px; padding:20px 22px; gap:16px;
}
#employeeBestView .employee-best-award-profile{
  display:flex; flex:1 1 auto; min-width:0; align-items:center;
  gap:17px; position:relative; z-index:1;
}
#employeeBestView .employee-best-award-profile .employee-best-award-body{
  flex:1 1 0; min-width:0;
}
#employeeBestView .employee-best-award-profile .employee-best-award-body h3{
  margin:0 0 6px; font-size:clamp(16px,1.45vw,21px);
  line-height:1.3; overflow-wrap:anywhere;
}
#employeeBestView .employee-best-award-profile .employee-best-award-body p{
  margin:0; font-size:11.5px; line-height:1.5;
}
#employeeBestView .employee-best-award-profile .employee-best-award-meta{
  margin-top:7px; font-size:11px; line-height:1.5;
}
#employeeBestView .employee-best-winner-photo{
  width:100px; height:110px; position:relative;
  flex:0 0 100px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:13px; border:2px solid #e7c989;
  background:linear-gradient(145deg,#e4d4ae,#a9905c);
  box-shadow:0 8px 20px rgba(5,27,15,.25); color:#31533c;
}
#employeeBestView .employee-best-winner-photo[hidden]{display:none!important;}
#employeeBestView .employee-best-winner-photo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 22%; background:#e6e4d9;
}
#employeeBestView .employee-best-winner-initials{
  font-size:32px; letter-spacing:1px; font-weight:800;
  line-height:1; user-select:none;
}
/* Status di kiri, tombol pembatalan di kanan pada baris yang sama. */
#employeeBestView .employee-best-award-footer{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap; gap:12px; min-width:0;
  padding-top:11px; border-top:1px solid rgba(255,255,255,.14);
}
#employeeBestView .employee-best-award-footer .employee-best-award-status{
  flex:0 1 auto; min-width:0;
}
#employeeBestView .employee-best-award-footer .employee-best-reset{
  margin-left:auto; text-align:right; white-space:normal;
  flex:0 1 auto; min-width:0;
  padding:6px 3px; font-size:11px;
}
@media(max-width:900px){
  #employeeBestView .employee-best-awards{grid-template-columns:1fr;}
}
@media(max-width:680px){
  #employeeBestView .employee-best-shell{padding:0 0 14px 0; gap:12px;}
  #employeeBestView .employee-best-award-card{min-height:0; padding:17px 15px; gap:13px;}
  #employeeBestView .employee-best-award-profile{gap:12px;}
  #employeeBestView .employee-best-winner-photo{
    width:74px; height:84px; flex-basis:74px; border-radius:11px;
  }
  #employeeBestView .employee-best-winner-initials{font-size:25px;}
  #employeeBestView .employee-best-award-profile .employee-best-award-body h3{font-size:16px;}
  #employeeBestView .employee-best-award-footer{gap:8px;}
  #employeeBestView .employee-best-award-footer .employee-best-reset{font-size:10.5px;}
}

/* Header global dihilangkan hanya pada halaman Karyawan Terbaik. */
  body.employee-mode.employee-best-only-mode #employeeModule .employee-page-heading {
    display: none !important;
  }

/* Kartu penghargaan tidak memiliki scrollbar tersendiri. Scroll hanya pada tabel kandidat. */
#employeeBestView .employee-best-awards,
#employeeBestView .employee-best-award-card,
#employeeBestView .employee-best-award-profile,
#employeeBestView .employee-best-award-footer {overflow:visible;scrollbar-width:none;}
@media (min-width:901px) and (min-height:690px){
  body.employee-mode #employeeBestView .employee-view-scroll{overflow-y:hidden!important;}
  #employeeBestView .employee-best-shell{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
  #employeeBestView .employee-best-awards{flex:0 0 auto;}
  #employeeBestView .employee-best-panel{flex:1 1 0;min-height:185px;display:flex;flex-direction:column;}
  #employeeBestView .employee-best-table-scroll{flex:1 1 auto;min-height:120px;max-height:none;}
  #employeeBestView .employee-best-panel-head,
  #employeeBestView .employee-best-table-footer,
  #employeeBestView .employee-best-footnote{flex:0 0 auto;}
}
/* Jika layar rendah atau sempit, halaman tetap dapat digulir tanpa membuat kartu ber-scroll. */
#employeeBestView .employee-best-table-scroll{
  max-height:clamp(220px,43vh,500px);
  min-width:0;overflow:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#afc9b5 transparent;
  border-bottom:1px solid #e6eee8;
}
#employeeBestView .employee-best-table thead th{position:sticky;top:0;z-index:2;background:#f4f8f5;}
#employeeBestView .employee-best-table-footer{
  border-top:0;min-height:56px;flex:0 0 auto;
  background:#fff;padding:11px 18px;gap:12px;flex-wrap:wrap;
}
#employeeBestView .employee-best-table-footer .leave-entries-control{color:#596e60;font-weight:600;}
#employeeBestView .employee-best-table-footer .leave-entries-control select{
  border-color:#d3e1d7;color:#244b33;background:#fbfdfb;border-radius:7px;
}
#employeeBestView .employee-best-table-footer .leave-pagination button{
  border-color:#d7e3da;border-radius:7px;color:#496151;background:#fff;
}
#employeeBestView .employee-best-table-footer .leave-pagination button.active{
  background:#256b46;border-color:#256b46;color:#fff;
}
#employeeBestView .employee-best-table-footer .leave-pagination button:not(:disabled):hover{border-color:#72a785;}
#employeeBestView .employee-best-result.previous{
  display:inline-flex;max-width:240px;align-items:center;white-space:normal;
  line-height:1.4;border:1px solid #e9d5a7;background:#fff7e8;color:#856024;
  border-radius:9px;font-weight:760;padding:7px 10px;
}
#employeeBestView .employee-best-results-stack{display:flex;flex-direction:column;gap:5px;align-items:flex-start;}
#employeeBestView .employee-best-prior-month{font-size:10px;font-weight:650;color:#92723f;line-height:1.2;}
@media(max-width:680px){
  #employeeBestView .employee-best-table-scroll{max-height:clamp(250px,48vh,450px);}
  #employeeBestView .employee-best-table-footer{padding:12px;align-items:flex-start;flex-direction:column;}
  #employeeBestView .employee-best-table-footer .leave-pagination{flex-wrap:wrap;}
}

#employeeBestView .employee-best-award-effective-work{margin-top:6px;font-size:11px;line-height:1.5;color:#dbeadb;font-weight:550}
#employeeBestView .employee-best-award-effective-work[hidden]{display:none!important}
#employeeBestView .employee-best-vote-total{display:inline-flex;align-items:center;justify-content:center;min-width:30px;padding:5px 9px;border-radius:9px;background:#eef5ef;color:#245a3e;font-weight:800;font-variant-numeric:tabular-nums}
#employeeBestView .employee-best-vote-total.my-vote{background:#dcefe2;color:#1d6340}
#employeeBestView .employee-best-vote-button{min-width:106px;border:1px solid #b3d3bd;border-radius:8px;background:#f1f8f3;padding:8px 10px;color:#286141;font-weight:750;font-size:11px;cursor:pointer;transition:background .15s,border-color .15s}
#employeeBestView .employee-best-vote-button:hover:not(:disabled){background:#dcefe2;border-color:#73aa82}
#employeeBestView .employee-best-vote-button.selected{background:#d7eee1;border-color:#75ab87;color:#1d643c}
#employeeBestView .employee-best-vote-button:disabled{cursor:default;opacity:.85}
#employeeBestView .employee-best-table{min-width:840px}
@media(max-width:680px){#employeeBestView .employee-best-award-effective-work{font-size:10.5px}}

/* Kartu penghargaan menampilkan identitas di kiri dan piala berperingkat di area kanan. */
#employeeBestView .employee-best-award-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) 78px;
  grid-template-rows:minmax(115px,auto) auto;
  align-items:center;
  gap:13px 14px;
}
#employeeBestView .employee-best-award-card .employee-best-award-profile {
  grid-column:1;
  grid-row:1;
  min-width:0;
  width:100%;
  align-self:center;
}
#employeeBestView .employee-best-award-card .employee-best-award-card-top {
  grid-column:2;
  grid-row:1;
  margin:0;
  padding:0;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:7px;
  align-self:center;
  justify-self:end;
  position:relative;
  z-index:1;
}
#employeeBestView .employee-best-award-card .employee-best-award-emblem {
  flex:0 0 62px;
  width:62px;
  height:62px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#employeeBestView .employee-best-award-card .employee-best-award-emblem svg {width:43px;height:43px;}
#employeeBestView .employee-best-award-rank {
  display:block;
  color:#ffdfa0;
  font-size:25px;
  font-weight:850;
  line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 5px rgba(0,0,0,.12);
}
#employeeBestView .employee-best-award-card .employee-best-award-footer {
  grid-column:1 / -1;
  grid-row:2;
  width:100%;
  align-self:end;
}
@media(max-width:680px){
  #employeeBestView .employee-best-award-card {
    grid-template-columns:minmax(0,1fr) 57px;
    gap:11px 9px;
  }
  #employeeBestView .employee-best-award-card .employee-best-award-emblem {
    flex-basis:49px;
    width:49px;
    height:49px;
    border-radius:12px;
  }
  #employeeBestView .employee-best-award-card .employee-best-award-emblem svg{width:34px;height:34px;}
  #employeeBestView .employee-best-award-rank{font-size:21px;}
}

/* Dashboard Manajemen Karyawan: ringkasan kehadiran dari database, periode 13–12. */
body.employee-mode #employeeDashboardView .emp-att-report{margin:0 0 20px;min-width:0;background:#fff;border:1px solid #dce6ed;border-top:3px solid #1b9b73;border-radius:8px;box-shadow:0 3px 12px rgba(20,51,75,.045);overflow:hidden;color:#223a36}
body.employee-mode #employeeDashboardView .emp-att-report-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 20px;border-bottom:1px solid #e6eeeb;background:linear-gradient(115deg,#f5fbf8 0%,#fff 77%)}
body.employee-mode #employeeDashboardView .emp-att-kicker{display:block;margin:0 0 6px;font-size:10px;letter-spacing:1.35px;font-weight:800;color:#188462}
body.employee-mode #employeeDashboardView .emp-att-report-heading h3{margin:0;font-size:19px;line-height:1.4;font-weight:800;color:#193e32}
body.employee-mode #employeeDashboardView .emp-att-report-heading p{margin:5px 0 0;font-size:12px;color:#64776e}
body.employee-mode #employeeDashboardView .emp-att-controls{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap}
body.employee-mode #employeeDashboardView .emp-att-controls label{display:grid;gap:5px;font-size:11px;font-weight:700;color:#4a6659}
body.employee-mode #employeeDashboardView .emp-att-controls input{height:38px;padding:7px 10px;border:1px solid #cadbd2;border-radius:6px;min-width:156px;background:white;color:#1e3b30;outline:none;font:inherit;font-size:13px}
body.employee-mode #employeeDashboardView .emp-att-controls input:focus{border-color:#139a6b;box-shadow:0 0 0 3px rgba(21,156,109,.14)}
body.employee-mode #employeeDashboardView .emp-att-refresh{height:38px;min-height:38px;display:inline-flex;align-items:center;gap:7px;border:1px solid #147e60;border-radius:6px;padding:0 13px;background:#16825f;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
body.employee-mode #employeeDashboardView .emp-att-refresh:hover{background:#116e50}
body.employee-mode #employeeDashboardView .emp-att-refresh:disabled{opacity:.65;cursor:wait}
body.employee-mode #employeeDashboardView .emp-att-alert{padding:10px 19px;font-size:12px;line-height:1.5;background:#fff6e8;color:#86521a;border-bottom:1px solid #f2e3c6}
body.employee-mode #employeeDashboardView .emp-att-alert[hidden]{display:none!important}
body.employee-mode #employeeDashboardView .emp-att-indicators{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;padding:17px 18px 14px}
body.employee-mode #employeeDashboardView .emp-att-indicator{position:relative;min-width:0;min-height:112px;display:flex;flex-direction:column;gap:4px;padding:13px 14px 13px;background:#f8fbfa;border:1px solid #e3efea;border-radius:8px}
body.employee-mode #employeeDashboardView .emp-att-indicator:last-child{background:linear-gradient(120deg,#176e54,#1a966e);border-color:#16855f;color:white}
body.employee-mode #employeeDashboardView .emp-att-chinese{font-size:12px;font-weight:700;color:#457262;line-height:1.3}
body.employee-mode #employeeDashboardView .emp-att-indicator:last-child .emp-att-chinese{color:#d5ffeb}
body.employee-mode #employeeDashboardView .emp-att-indicator-label{font-size:10px;line-height:1.35;font-weight:800;letter-spacing:.3px;color:#536e63}
body.employee-mode #employeeDashboardView .emp-att-indicator:last-child .emp-att-indicator-label{color:#e7fff2}
body.employee-mode #employeeDashboardView .emp-att-indicator strong{display:block;margin-top:auto;font-weight:850;font-size:clamp(25px,2.3vw,34px);letter-spacing:-1px;line-height:1.2;color:#173d32;font-variant-numeric:tabular-nums}
body.employee-mode #employeeDashboardView .emp-att-indicator:last-child strong{color:#fff}
body.employee-mode #employeeDashboardView .emp-att-indicator small{font-size:10px;color:#789083}
body.employee-mode #employeeDashboardView .emp-att-indicator:last-child small{color:#dff9e9}
body.employee-mode #employeeDashboardView .emp-att-visuals{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:16px;margin:0 18px 17px}
body.employee-mode #employeeDashboardView .emp-att-chart-panel,body.employee-mode #employeeDashboardView .emp-att-formula-panel{min-width:0;background:#fff;border:1px solid #e2ece7;border-radius:8px;padding:16px 17px}
body.employee-mode #employeeDashboardView .emp-att-chart-panel h4,body.employee-mode #employeeDashboardView .emp-att-formula-panel h4{font-size:13px;color:#224438;margin:0 0 11px;font-weight:800}
body.employee-mode #employeeDashboardView .emp-att-chart-layout{display:flex;align-items:center;gap:22px;justify-content:center;min-height:189px;flex-wrap:wrap}
body.employee-mode #employeeDashboardView .emp-att-pie{width:174px;height:174px;flex:0 0 174px;aspect-ratio:1;display:block;border-radius:50%;background:#e2e9e5;border:5px solid #fff;box-shadow:0 0 0 1px #dfe8e3,0 4px 16px rgba(0,0,0,.06)}
body.employee-mode #employeeDashboardView .emp-att-legend{display:grid;gap:15px;flex:1;min-width:160px;max-width:290px}
body.employee-mode #employeeDashboardView .emp-att-legend-item{display:flex;align-items:flex-start;gap:9px}
body.employee-mode #employeeDashboardView .emp-att-dot{height:11px;width:11px;border-radius:3px;flex:0 0 11px;margin-top:3px}
body.employee-mode #employeeDashboardView .emp-att-dot.green{background:#1da47a}
body.employee-mode #employeeDashboardView .emp-att-dot.gold{background:#f2ad48}
body.employee-mode #employeeDashboardView .emp-att-legend-item strong{display:block;color:#234538;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
body.employee-mode #employeeDashboardView .emp-att-legend-item span{display:block;font-size:11px;line-height:1.4;color:#71837c}
body.employee-mode #employeeDashboardView .emp-att-formula-panel{display:flex;flex-direction:column}
body.employee-mode #employeeDashboardView .emp-att-formula{padding:13px 15px;border-radius:7px;background:#f3f8f5;border:1px solid #e0ece5;color:#254b3b;font-size:13px;font-weight:700;line-height:1.9;overflow-wrap:anywhere}
body.employee-mode #employeeDashboardView .emp-att-formula-result{margin:12px 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
body.employee-mode #employeeDashboardView .emp-att-formula-result strong{font-size:28px;letter-spacing:-.8px;color:#168665;font-weight:850;font-variant-numeric:tabular-nums}
body.employee-mode #employeeDashboardView .emp-att-formula-result span{font-size:11px;color:#697e72}
body.employee-mode #employeeDashboardView .emp-att-explainer{font-size:11px;color:#687a72;line-height:1.55;margin:12px 0 0}
body.employee-mode #employeeDashboardView .emp-att-period-note{margin:0 18px 18px;border-top:1px solid #edf3f0;padding-top:12px;font-size:11px;color:#6b8375;line-height:1.55}
@media(max-width:1200px){body.employee-mode #employeeDashboardView .emp-att-indicators{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:790px){body.employee-mode #employeeDashboardView .emp-att-visuals{grid-template-columns:minmax(0,1fr)}body.employee-mode #employeeDashboardView .emp-att-indicators{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){body.employee-mode #employeeDashboardView .emp-att-report-heading{padding:14px}body.employee-mode #employeeDashboardView .emp-att-indicators{padding:12px;gap:8px}body.employee-mode #employeeDashboardView .emp-att-indicator{padding:11px;min-height:103px}body.employee-mode #employeeDashboardView .emp-att-indicator strong{font-size:24px}body.employee-mode #employeeDashboardView .emp-att-visuals{margin:0 12px 14px}body.employee-mode #employeeDashboardView .emp-att-pie{width:146px;height:146px;flex-basis:146px}}

/* Dashboard-only layout repair: avoid flex shrink and clipping of attendance charts. */
body.employee-mode #employeeModule #employeeDashboardView .employee-view-scroll{
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  min-width:0;
}
body.employee-mode #employeeModule #employeeDashboardView .employee-view-scroll > .employee-dashboard-metrics,
body.employee-mode #employeeModule #employeeDashboardView .employee-view-scroll > .emp-att-report{
  flex:0 0 auto;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-report{
  width:100%;
  container-type:inline-size;
  overflow:visible;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-report-heading > div:first-child{
  flex:1 1 275px;
  min-width:0;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-report-heading h3,
body.employee-mode #employeeModule #employeeDashboardView .emp-att-report-heading p{
  overflow-wrap:anywhere;
  white-space:normal;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-controls{
  min-width:0;
  max-width:100%;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-indicator{
  min-width:0;
  height:auto;
  overflow:visible;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-indicator strong{
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  font-size:clamp(23px,2.1vw,32px);
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-indicator-label,
body.employee-mode #employeeModule #employeeDashboardView .emp-att-chinese,
body.employee-mode #employeeModule #employeeDashboardView .emp-att-indicator small{
  overflow-wrap:anywhere;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-visuals{
  min-width:0;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-formula,
body.employee-mode #employeeModule #employeeDashboardView .emp-att-chart-layout,
body.employee-mode #employeeModule #employeeDashboardView .emp-att-legend{
  min-width:0;
  max-width:100%;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-chart-layout{
  height:auto;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-pie{
  flex-shrink:0;
}
/* Respond to the actual dashboard content width, not just the screen width. */
@container (max-width:850px){
  body.employee-mode #employeeDashboardView .emp-att-indicators{grid-template-columns:repeat(3,minmax(0,1fr));}
  body.employee-mode #employeeDashboardView .emp-att-visuals{grid-template-columns:minmax(0,1fr);}
}
@container (max-width:550px){
  body.employee-mode #employeeDashboardView .emp-att-indicators{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.employee-mode #employeeDashboardView .emp-att-report-heading{padding:14px;}
  body.employee-mode #employeeDashboardView .emp-att-visuals{margin:0 12px 14px;}
  body.employee-mode #employeeDashboardView .emp-att-controls{width:100%;}
}
@container (max-width:355px){
  body.employee-mode #employeeDashboardView .emp-att-indicators{grid-template-columns:minmax(0,1fr);}
  body.employee-mode #employeeDashboardView .emp-att-chart-panel,
  body.employee-mode #employeeDashboardView .emp-att-formula-panel{padding:12px;}
}

/* Simplified attendance report layout: one main panel with inline controls. */
body.employee-mode #employeeModule #employeeDashboardView .emp-att-report{
  margin-top:10px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-visuals{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  gap:16px;
  margin:0 18px 17px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-chart-panel,
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-panel{
  min-width:0;
  display:flex;
  flex-direction:column;
  height:100%;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-panel-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-panel-toolbar h4{
  margin:0;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-panel-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-inline-control{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:#35584a;
  font-size:12px;
  font-weight:700;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-inline-control span{
  white-space:nowrap;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-inline-control input[type="month"]{
  min-width:156px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-chart-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:12px;
  width:100%;
  min-width:0;
  flex:1 1 auto;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-chart-main .emp-att-chart-layout{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:218px;
  min-width:0;
  width:100%;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-chart-main .emp-att-pie{
  display:block;
  width:clamp(130px,13.4vw,194px);
  height:clamp(130px,13.4vw,194px);
  max-width:100%;
  flex:0 1 clamp(130px,13.4vw,194px);
  aspect-ratio:1;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table-wrap{
  width:100%;
  min-width:0;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  background:#fff;
  border:1px solid #dce9e2;
  border-radius:8px;
  overflow:hidden;
  color:#21483a;
  font-size:12px;
  line-height:1.35;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table tr:nth-child(odd){background:#f5faf7;}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table tr+tr th,
body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table tr+tr td{border-top:1px solid #e1ebe5;}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table th,
body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table td{
  border-bottom:0;
  padding:11px 13px;
  vertical-align:middle;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table th{
  width:68%;
  font-size:12px;
  font-weight:650;
  text-align:left;
  white-space:normal;
  overflow-wrap:break-word;
  color:#385a4d;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table td{
  width:32%;
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table td strong{
  font-size:17px;
  font-weight:800;
  color:#1a4b35;
  letter-spacing:-.3px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table .emp-att-metric-percent{
  background:#e7f5ec;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table .emp-att-metric-percent th,
body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table .emp-att-metric-percent td strong{
  color:#147950;
  font-weight:800;
}
@media (max-width:980px){
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-panel-toolbar{
    align-items:flex-start;
  }
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-panel-controls{
    width:100%;
    margin-left:0;
  }
}
@container (max-width:640px){
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-chart-main{
    grid-template-columns:minmax(0,1fr);
    row-gap:8px;
  }
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-chart-main .emp-att-chart-layout{
    min-height:188px;
  }
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-chart-main .emp-att-pie{
    width:176px;
    height:176px;
    flex-basis:176px;
  }
}
@container (max-width:460px){
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-panel-controls{
    flex-direction:column;
    align-items:stretch;
  }
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-inline-control{
    justify-content:space-between;
  }
}
@container (max-width:355px){
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table th,
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-metrics-table td{
    padding:9px 10px;
  }
}

/* Top-five employee status ranking uses calendar months; pie still uses 13–12. */
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-panel{
  padding:16px 17px;
  background:#fff;
  border:1px solid #e2ece7;
  border-radius:8px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;min-height:34px;margin-bottom:12px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-head h4{
  font-size:13px;color:#224438;margin:0;font-weight:800;line-height:1.4;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-absence-key{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  color:#567365;font-size:10px;font-weight:700;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-absence-key>span{
  display:inline-flex;align-items:center;gap:5px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-key-dot{
  display:inline-block;width:9px;height:9px;border-radius:3px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-key-sick{background:#e8a553;}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-key-permission{background:#2ea888;}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-key-late{background:#8178c7;}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-title-group{min-width:0;flex:1 1 230px;}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-month{font-size:11px;color:#72887a;margin:4px 0 0;font-weight:650;}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table-wrap{
  min-width:0;flex:1 1 auto;overflow-x:auto;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table{
  width:100%;min-width:460px;border-collapse:separate;border-spacing:0;table-layout:fixed;
  border:1px solid #e1ece5;border-radius:8px;overflow:hidden;
  font-size:11px;color:#284a3a;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table thead th{
  padding:10px 8px;background:#eff6f1;color:#456557;text-align:center;
  font-weight:750;border-bottom:1px solid #dce9e0;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table thead th:first-child{
  text-align:left;width:45%;padding-left:12px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table thead th:nth-child(2),
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table thead th:nth-child(3){width:12%;}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table thead th:nth-child(4){width:19%;}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table thead th:nth-child(5){width:12%;}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table tbody tr+tr td{
  border-top:1px solid #edf2ee;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table tbody td{
  padding:13px 8px;text-align:center;vertical-align:middle;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table tbody td:first-child{
  padding-left:12px;text-align:left;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-name{
  display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:8px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-rank{
  flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  background:#eaf4ee;color:#2d8057;font-weight:850;font-size:10px;border-radius:5px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-person{
  min-width:0;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-bar-track{
  display:flex;width:100%;height:8px;overflow:hidden;background:#edf3ef;border-radius:99px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-bar-sick{
  display:block;height:100%;background:#e8a553;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-bar-permission{
  display:block;height:100%;background:#2ea888;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-bar-late{
  display:block;height:100%;background:#8178c7;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table .emp-att-top-num{
  font-weight:800;font-variant-numeric:tabular-nums;color:#3c6351;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table .emp-att-top-num-total{
  color:#146b4a;font-size:13px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-table .emp-att-top-empty td{
  text-align:center;padding:30px 12px;color:#728a7c;line-height:1.65;
}
/* Two equal report cards when there is sufficient horizontal space. */
@media (max-width:1120px){
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-visuals{
    grid-template-columns:minmax(0,1fr);
  }
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-chart-main{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
}
@media (max-width:640px){
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-chart-main{
    grid-template-columns:minmax(0,1fr);
    row-gap:12px;
  }
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-chart-panel,
  body.employee-mode #employeeModule #employeeDashboardView .emp-att-top-five-panel{padding:13px;}
}

/* Dashboard reminder for unsubmitted Family Visit leave within 30 days. */
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-panel{
  min-width:0;flex:0 0 auto;margin:0 0 22px;background:#fff;border:1px solid #dce6ed;
  border-top:3px solid #1b9b73;border-radius:8px;box-shadow:0 3px 12px rgba(20,51,75,.045);
  overflow:hidden;color:#223a36;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-heading{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px 12px;
  border-bottom:1px solid #e5eee9;background:linear-gradient(115deg,#f6faf8,#fff);
}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-heading-copy{min-width:0}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-heading-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-icon{
  display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:8px;background:#e8f6ed;font-size:16px
}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-heading h3{margin:0;color:#194733;font-weight:800;font-size:14px;line-height:1.4}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-range{margin:5px 0 0 40px;font-size:11px;color:#718279;line-height:1.4}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-scroll{max-height:340px;overflow:auto;scrollbar-width:thin}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table{width:100%;min-width:0;table-layout:fixed;border-collapse:separate;border-spacing:0;text-align:left;font-size:12px}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table thead th{
  position:sticky;top:0;z-index:1;background:#f3f8f5;color:#3d5d4e;border-bottom:1px solid #dce9e1;
  padding:12px 14px;font-size:11px;font-weight:800;white-space:nowrap
}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table tbody td{padding:11px 14px;border-bottom:1px solid #edf2ee;color:#2c4d3c;vertical-align:middle}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table th:first-child,
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table td:first-child{width:8%;min-width:44px;text-align:center}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table th:nth-child(2),
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table td:nth-child(2){width:58%;overflow-wrap:anywhere}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table th:last-child,
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table td:last-child{width:34%;white-space:nowrap}
@media(max-width:520px){
  body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table th,
  body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table td{padding:10px 8px}
  body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table th:first-child,
  body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table td:first-child{width:14%}
  body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table th:nth-child(2),
  body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table td:nth-child(2){width:48%}
  body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table th:last-child,
  body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table td:last-child{width:38%}
}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table tbody tr:nth-child(even){background:#fbfdfb}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-table tbody tr:last-child td{border-bottom:0}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-name{font-weight:800;color:#224c37}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-id{display:block;margin-top:2px;font-size:10px;color:#819287}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-days{font-weight:800;color:#177249;white-space:nowrap}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-status{
  display:inline-flex;align-items:center;min-height:24px;border-radius:13px;padding:3px 10px;
  background:#fff7e6;border:1px solid #f6e1ae;color:#987019;font-size:10px;font-weight:800;white-space:nowrap;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-empty{text-align:center!important;color:#7b8e80!important;padding:27px 16px!important;font-size:12px}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-date-controls{
  display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  gap:10px 16px;min-width:0;margin-left:auto;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-date-field{
  display:flex;align-items:center;gap:8px;margin:0;color:#466658;font-size:11px;font-weight:750;white-space:nowrap;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-date-field input[type="date"]{
  height:35px;min-width:145px;max-width:100%;padding:6px 9px;
  border:1px solid #cdded2;border-radius:7px;background:#fff;color:#214c37;
  font:inherit;font-size:12px;font-weight:650;outline-offset:2px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-date-field input[type="date"]:focus{
  outline:2px solid #4eb38a;border-color:#22965d;
}
@media(max-width:840px){
  body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-heading{flex-wrap:wrap}
  body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-date-controls{width:100%;justify-content:flex-start;margin-left:0}
}
@media(max-width:680px){
  body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-heading{padding:13px 12px}
}
@media(max-width:420px){
  body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-date-controls{flex-direction:column;align-items:stretch}
  body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-date-field{justify-content:space-between}
}

/* Bottom dashboard: equal-width leave reminder and monthly absence-ranking panel. */
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-bottom-panels{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  align-items:stretch;min-width:0;margin:0 0 22px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-bottom-panels .emp-upcoming-leave-panel{
  margin:0;min-width:0;min-height:0;height:100%;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-panel{
  display:flex;flex-direction:column;min-width:0;height:100%;background:#fff;
  border:1px solid #dce6ed;border-top:3px solid #1b9b73;border-radius:8px;
  box-shadow:0 3px 12px rgba(20,51,75,.045);overflow:hidden;color:#223a36;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-heading{
  min-height:65px;padding:14px 18px 12px;display:flex;align-items:center;
  gap:12px;justify-content:space-between;border-bottom:1px solid #e5eee9;
  background:linear-gradient(115deg,#f6faf8,#fff);
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-heading-label{
  display:flex;align-items:center;gap:10px;min-width:0;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-heading h3{
  margin:0;font-size:14px;line-height:1.4;font-weight:800;color:#194733;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-icon{
  display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:8px;background:#e8f6ed;font-size:16px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-month{
  font-size:11px;color:#397458;background:#ebf6ef;border-radius:24px;
  padding:6px 9px;font-weight:800;text-align:right;white-space:nowrap;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-body{
  display:flex;flex:1 1 auto;flex-direction:column;gap:10px;padding:13px 14px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-winners{
  display:grid;grid-template-columns:1fr;gap:11px;min-width:0;flex:1 1 auto;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-card{
  display:flex;flex-direction:column;gap:12px;min-width:0;border-radius:12px;
  padding:13px 15px;background:linear-gradient(130deg,#1a5139,#246b4b);
  color:#fff;box-shadow:0 5px 14px rgba(15,69,41,.10);
}
body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-card:nth-child(2){
  background:linear-gradient(130deg,#1d5941,#307559);
}
body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-row{
  display:flex;align-items:center;gap:11px;min-width:0;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-photo{
  position:relative;width:68px;height:68px;flex:0 0 68px;display:grid;place-items:center;
  border-radius:13px;overflow:hidden;border:2px solid #e9d5a5;background:#e8f1eb;
  color:#37664a;font-size:23px;font-weight:800;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-photo img{
  display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-detail{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-name{
  margin:0;font-size:14px;line-height:1.25;font-weight:850;color:#fff;
  overflow-wrap:anywhere;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-detail-line{
  color:#e3f1e9;font-size:11px;line-height:1.4;overflow-wrap:anywhere;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-trophy{
  display:flex;flex:0 0 48px;flex-direction:column;align-items:center;gap:0;
  color:#f0d494;align-self:center;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-trophy svg{
  width:36px;height:36px;display:block;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-rank{
  font-size:23px;font-weight:900;line-height:1.1;color:#f0d494;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-status{
  padding-top:9px;border-top:1px solid rgba(255,255,255,.18);
  font-size:10px;line-height:1.3;font-weight:750;color:#e4f5e9;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-status .emp-db-best-status-dot{
  display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#91e8b4;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-loading{
  padding:30px 10px;text-align:center;font-size:12px;color:#758b7d;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-initialization{
  border:1px solid #dce9dc;background:#f4faf5;border-radius:9px;
  padding:11px 12px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-initialization[hidden],
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-message[hidden]{display:none!important}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-initialization p{
  margin:0 0 8px;color:#446653;font-size:11px;line-height:1.55;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-seed-btn{
  background:#168557;border:1px solid #168557;border-radius:7px;color:#fff;
  font-size:11px;font-weight:800;padding:9px 13px;cursor:pointer;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-seed-btn:disabled{
  opacity:.55;cursor:default;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-message{
  margin:0;color:#b44e36;font-size:11px;line-height:1.45;
}
@media(max-width:1060px){
  body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-bottom-panels{
    grid-template-columns:minmax(0,1fr);
  }
}
@media(max-width:540px){
  body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-heading{padding:12px;flex-wrap:wrap}
  body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-best-body{padding:11px}
  body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-card{padding:11px}
  body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-photo{width:54px;height:54px;flex-basis:54px}
  body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-trophy{flex-basis:34px}
  body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-trophy svg{width:29px;height:29px}
  body.employee-mode #employeeModule #employeeDashboardView .emp-db-best-name{font-size:12px}
}

/* Absensi Harian: four real-data groups in a compact 2x2 layout.
   Form Input and monthly attendance are intentionally untouched. */
body.employee-mode #employeeModule #attendanceDailyCardsPanel #attendanceCardsGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:row;
  gap:12px;
  align-items:stretch;
  min-width:0;
  padding:2px 0 8px;
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-section{
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
  border-radius:13px;
  background:#fff;
  box-shadow:0 5px 15px rgba(20,72,43,.045);
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-header{
  min-height:48px;
  padding:9px 12px;
  gap:8px;
  flex-direction:row;
  align-items:center;
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-header-main{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-accent{
  width:4px;
  min-width:4px;
  height:24px;
  border-radius:4px;
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-heading{
  font-size:17px;
  line-height:1.18;
  font-weight:850;
  letter-spacing:-.25px;
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-count{
  font-size:10px;
  padding:5px 9px;
  line-height:1.25;
  white-space:nowrap;
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-member-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(0,auto);
  align-content:start;
  align-items:stretch;
  gap:7px;
  min-width:0;
  padding:10px;
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-person-card.attendance-person-card-simple{
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  min-width:0;
  min-height:51px;
  padding:5px 7px;
  text-align:left;
  background:#fbfdfb;
  border:1px solid #eef2ef;
  border-radius:9px;
  box-shadow:none;
  flex-wrap:wrap;
  align-content:center;
  transform:none;
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-person-card.attendance-person-card-simple:hover{
  transform:none;
  background:#f4faf6;
  border-color:#cfe6d6;
  box-shadow:none;
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-person-card-simple .attendance-person-avatar{
  display:flex;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-width:2px;
  font-size:12px;
  box-shadow:0 1px 4px rgba(18,64,38,.08);
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-person-card-simple .attendance-person-avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-person-name{
  display:block;
  flex:1 1 65px;
  min-width:0;
  max-width:100%;
  margin:0;
  text-align:left;
  font-size:10.4px;
  font-weight:800;
  line-height:1.28;
  letter-spacing:0;
  overflow-wrap:anywhere;
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-person-status{
  order:3;
  margin:0 0 0 48px;
  flex:0 1 auto;
  padding:3px 6px;
  border-radius:12px;
  font-size:9px;
  line-height:1.15;
  text-align:left;
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-not-present-section .attendance-person-card-simple{
  background:#fffaf8;
  border-color:#f5e7df;
}
body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-empty{
  padding:0 12px 14px;
  font-size:11px;
}
/* Keep every group visible on ordinary desktops. Narrow viewports stack panels. */
@media (min-width:1750px){
  body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-member-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:1000px){
  body.employee-mode #employeeModule #attendanceDailyCardsPanel #attendanceCardsGrid{
    gap:10px;
  }
  body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-member-grid{
    padding:8px;
    gap:6px;
  }
  body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-person-card.attendance-person-card-simple{
    padding:5px;
    gap:6px;
  }
  body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-person-card-simple .attendance-person-avatar{
    width:36px;height:36px;flex-basis:36px;
  }
  body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-person-status{margin-left:42px}
}
@media (max-width:820px){
  body.employee-mode #employeeModule #attendanceDailyCardsPanel #attendanceCardsGrid{
    grid-template-columns:minmax(0,1fr);
  }
}
@media (max-width:430px){
  body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-header{
    min-height:44px;
    padding:8px 10px;
    flex-direction:row;
    align-items:center;
  }
  body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-heading{font-size:16px}
  body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-person-name{font-size:9.8px}
  body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-count{padding:5px 7px;font-size:9px}
}
@media (max-width:360px){
  body.employee-mode #employeeModule #attendanceDailyCardsPanel .attendance-group-member-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

/* Keep the two visual panels side by side: attendance left, award recipients right. */
body.employee-mode #employeeModule #employeeDashboardView .emp-att-visuals > .emp-dashboard-best-panel{
  margin:0;min-width:0;align-self:stretch;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-dashboard-bottom-panels > .emp-att-top-five-panel{
  min-width:0;min-height:0;margin:0;height:100%;
}

body.employee-mode #employeeModule #employeeInfoView .employee-feedback-scroll{padding:16px 18px 25px;overflow:auto}
body.employee-mode #employeeModule #employeeInfoView [hidden]{display:none!important}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-layout{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.3fr);align-items:start;gap:18px;max-width:1450px;margin:0 auto}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-layout:not(.has-inbox){grid-template-columns:minmax(0,720px);justify-content:center}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-panel{min-width:0;background:#fff;border:1px solid #dfe9e3;border-radius:12px;box-shadow:0 5px 17px rgba(30,67,42,.05);padding:21px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-panel-heading{display:flex;align-items:center;gap:12px;margin-bottom:16px;min-width:0}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-heading-icon{height:44px;width:44px;display:grid;place-items:center;flex:none;border-radius:11px;background:#e9f6ef;color:#187549;font-size:23px;font-weight:800}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-panel-heading h2{margin:0 0 3px;color:#1b4631;font-size:17px;line-height:1.3;font-weight:850}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-panel-heading p{margin:0;color:#678074;font-size:11.6px;line-height:1.55}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-privacy-note{display:flex;gap:10px;align-items:flex-start;background:#f1f9f4;border:1px solid #dbeee1;padding:10px 12px;border-radius:8px;margin-bottom:18px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-privacy-note span{font-size:17px;line-height:1.2}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-privacy-note p{margin:0;font-size:11.6px;color:#3a6651;line-height:1.55}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-field{display:grid;gap:7px;margin-bottom:16px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-field label{color:#325444;font-size:12px;font-weight:800}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-field input,
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-field textarea,
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-field select{display:block;width:100%;border:1px solid #d5e3da;border-radius:8px;padding:11px 12px;font-family:inherit;font-size:12.5px;color:#234536;background:#fff;outline:none;min-height:41px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-field textarea{resize:vertical;min-height:160px;line-height:1.55}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-field :is(input,textarea,select):focus{border-color:#148b54;box-shadow:0 0 0 3px #158b5417}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-counter{color:#7d9183;text-align:right;font-size:10px}
body.employee-mode #employeeModule .employee-feedback-form-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:15px;flex-wrap:wrap}
body.employee-mode #employeeModule .employee-feedback-primary,body.employee-mode #employeeModule .employee-feedback-secondary{padding:10px 14px;border-radius:7px;min-height:37px;font-size:12px;font-family:inherit;font-weight:800;cursor:pointer}
body.employee-mode #employeeModule .employee-feedback-primary{background:#168754;border:1px solid #168754;color:white}
body.employee-mode #employeeModule .employee-feedback-primary:hover{background:#106a41}
body.employee-mode #employeeModule .employee-feedback-secondary{background:#fff;border:1px solid #d8e4dc;color:#3c624f}
body.employee-mode #employeeModule .employee-feedback-primary:disabled{opacity:.65;cursor:wait}
body.employee-mode #employeeModule .employee-feedback-notice{margin:12px 0 0;padding:10px 12px;background:#e9f8ee;border:1px solid #c9e9d1;color:#1c7443;border-radius:7px;font-size:11.8px;line-height:1.5}
body.employee-mode #employeeModule .employee-feedback-notice.is-error{background:#fff0ed;border-color:#f2d1cb;color:#af3f33}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-inbox-heading{border-bottom:1px solid #e9eee9;padding-bottom:13px;align-items:flex-start}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-heading-text{min-width:0;flex:1}
body.employee-mode #employeeModule .employee-feedback-icon-button{border:1px solid #dce7df;background:#f6faf7;color:#336349;border-radius:7px;min-width:34px;min-height:34px;font-size:21px;font-weight:700;cursor:pointer}
body.employee-mode #employeeModule .employee-feedback-icon-button:hover{background:#e8f4ec}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-list{display:grid;gap:11px;max-height:min(700px,65vh);overflow:auto;padding-right:3px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-item{border:1px solid #e3ebe5;border-radius:9px;padding:13px 14px;background:#fff;min-width:0}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-item.is-new{border-left:3px solid #1a9c63;background:#fbfefb}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-item-top{display:flex;justify-content:space-between;align-items:center;gap:9px;flex-wrap:wrap}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-item-badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-chip{font-size:10px;color:#13774b;background:#eaf7ee;border-radius:20px;padding:5px 8px;font-weight:800}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-chip.kritik{color:#a15c27;background:#fff3e5}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-chip.reviewed{color:#5d7465;background:#eaf0ec}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-item time{font-size:10.5px;color:#75877b}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-item h3{font-size:14px;color:#244b37;margin:9px 0 6px;overflow-wrap:anywhere}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-message{font-size:12px;color:#40594a;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-identity{margin-top:11px;background:#f4f7f5;border:1px dashed #cedcd2;padding:10px;border-radius:7px;font-size:11.5px;color:#2e563e}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-item-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;border-top:1px solid #e9efeb;margin-top:12px;padding-top:10px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-item-actions button{border:1px solid #d6e4da;border-radius:7px;background:#f7faf8;color:#296445;font-weight:800;font-size:10.7px;padding:8px 10px;cursor:pointer}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-item-actions button:hover{background:#e9f5ec}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-empty{text-align:center;padding:30px 18px;color:#7e9185;font-size:12px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px;font-size:11px;color:#557463}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-pagination button{padding:7px 10px;border-radius:6px;border:1px solid #dce7df;background:#fff;color:#226343;cursor:pointer}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-pagination button:disabled{opacity:.4;cursor:default}
body.employee-mode #employeeModule .employee-feedback-modal{position:fixed;inset:0;z-index:9999;background:rgba(13,32,23,.55);display:flex;justify-content:center;align-items:center;padding:18px}
body.employee-mode #employeeModule .employee-feedback-modal-card{background:white;padding:22px;max-width:470px;width:100%;border-radius:13px;box-shadow:0 16px 40px #152c2055}
body.employee-mode #employeeModule .employee-feedback-modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
body.employee-mode #employeeModule .employee-feedback-modal-head h2{font-size:18px;margin:0;color:#194934}
body.employee-mode #employeeModule .employee-feedback-modal-card p{font-size:12px;color:#53715f;line-height:1.6}
body.employee-mode #employeeModule .employee-feedback-modal-card label{display:block;font-size:12px;font-weight:800;color:#28523c;margin-bottom:6px}
body.employee-mode #employeeModule .employee-feedback-modal-card input{display:block;width:100%;min-height:42px;border:1px solid #cfded4;border-radius:8px;padding:9px 12px;font-size:14px;outline:none}
body.employee-mode #employeeModule .employee-feedback-modal-card input:focus{border-color:#168754}
@media(max-width:1170px){body.employee-mode #employeeModule #employeeInfoView .employee-feedback-layout{grid-template-columns:1fr}}
@media(max-width:650px){body.employee-mode #employeeModule #employeeInfoView .employee-feedback-scroll{padding:10px 10px 22px}body.employee-mode #employeeModule #employeeInfoView .employee-feedback-panel{padding:15px}body.employee-mode #employeeModule #employeeInfoView .employee-feedback-panel-heading h2{font-size:15px}}


/* Responsive inbox table and the Super Admin-only compose FAB. */
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-layout.has-inbox{
  display:grid;grid-template-columns:minmax(0,1fr);max-width:none;justify-content:stretch;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-layout.has-inbox.is-composing{
  grid-template-columns:minmax(0,780px);justify-content:center;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-back{
  margin-left:auto;white-space:nowrap;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table-scroll{
  width:100%;min-width:0;max-height:min(640px,65vh);overflow:auto;
  border:1px solid #e0eae3;border-radius:9px;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table{
  width:100%;min-width:880px;border-collapse:separate;border-spacing:0;
  background:#fff;font-size:11.5px;line-height:1.5;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th{
  background:#eff7f1;color:#2c5c42;text-align:left;font-size:11px;font-weight:850;
  padding:12px 11px;border-bottom:1px solid #dce9e0;position:sticky;top:0;z-index:2;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table td{
  vertical-align:top;border-bottom:1px solid #eaf0ec;padding:12px 11px;
  color:#355944;overflow-wrap:anywhere;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table tr:last-child td{border-bottom:0}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table tr.is-new td{background:#f9fdfa}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th:nth-child(1),
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table td:nth-child(1){width:45px;text-align:center}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th:nth-child(2){width:148px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th:nth-child(3){width:82px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th:nth-child(4){min-width:270px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th:nth-child(5){width:165px}
body.employee-mode #employeeModule #employeeDashboardView .employee-feedback-table th:nth-child(6),
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th:nth-child(6){width:92px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th:nth-child(7){width:162px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table .employee-feedback-table-subject{
  display:block;font-weight:800;color:#234735;font-size:12px;margin-bottom:4px;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table .employee-feedback-table-message{
  color:#587263;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table details{margin-top:5px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table summary{
  cursor:pointer;font-weight:700;color:#177a50;font-size:11px;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table details p{
  white-space:pre-wrap;line-height:1.55;margin:7px 0 0;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table .employee-feedback-identity{
  margin:0;font-size:11px;padding:6px 8px;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table .employee-feedback-chip{
  display:inline-block;margin:0;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table .employee-feedback-item-actions{
  border:0;padding:0;margin:0;display:flex;align-items:stretch;flex-direction:column;gap:6px;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table .employee-feedback-item-actions button{
  font-size:10.5px;text-align:center;padding:7px 8px;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-empty{background:#fff}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-fab{
  position:fixed;right:27px;bottom:27px;z-index:200;
  width:54px;height:54px;border-radius:50%;border:0;
  display:grid;place-items:center;background:#168754;color:#fff;
  font-family:inherit;font-size:34px;line-height:1;cursor:pointer;
  box-shadow:0 9px 24px rgba(19,105,65,.34);
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-fab:hover{background:#116b44}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-fab:focus-visible{
  outline:3px solid #a7e3bf;outline-offset:3px;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-toast{
  position:sticky;top:10px;z-index:10;display:block;margin:0 0 12px auto;
  padding:11px 15px;width:fit-content;max-width:min(100%,440px);
  background:#e9f8ee;border:1px solid #b6e3c6;border-radius:8px;
  color:#17683d;font-size:12px;font-weight:750;box-shadow:0 6px 18px #1e4d2e18;
}
@media(max-width:650px){
  body.employee-mode #employeeModule #employeeInfoView .employee-feedback-fab{right:18px;bottom:18px}
  body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table{min-width:820px}
  body.employee-mode #employeeModule #employeeInfoView .employee-feedback-panel-heading{flex-wrap:wrap}
}

/* Inbox sizing aligned with the other full-width employee pages. */
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-scroll{padding:16px 20px 26px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-layout.has-inbox{
  display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:1450px;margin:0 auto;justify-content:stretch;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-panel.employee-feedback-inbox{
  width:100%;padding:20px;min-height:0;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-searchbar{margin:0 0 13px;max-width:560px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-searchbar label{
  display:block;margin:0 0 6px;color:#325444;font-size:11.5px;font-weight:800;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-search-control{
  display:flex;align-items:center;gap:8px;min-height:42px;padding:4px 5px 4px 11px;
  border:1px solid #d5e3da;border-radius:8px;background:#fff;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-search-control:focus-within{
  border-color:#148b54;box-shadow:0 0 0 3px #158b5417;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-search-icon{font-size:22px;color:#6b8877;line-height:1;flex:none}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-search-control input{
  flex:1;min-width:0;width:100%;min-height:32px;border:0;outline:0;background:transparent;
  color:#234536;font:12.5px inherit;padding:5px 2px;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-search-control input:focus{box-shadow:none}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-search-button{
  min-height:32px;padding:7px 11px;border:1px solid #168754;border-radius:6px;
  background:#168754;color:#fff;font:700 10.8px inherit;white-space:nowrap;cursor:pointer;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-search-button:hover{background:#106a41}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-search-button:disabled{opacity:.65;cursor:wait}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-search-help{
  margin:5px 0 0;color:#7b8f82;font-size:10.5px;line-height:1.45;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table-scroll{
  width:100%;max-height:min(640px,65vh);overflow:auto;border:1px solid #e0eae3;border-radius:9px;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table{
  width:100%;min-width:760px;border-collapse:separate;border-spacing:0;background:#fff;font-size:11.5px;line-height:1.5;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th[data-col="number"],
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table td[data-col="number"]{width:48px;text-align:center}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th[data-col="date"]{width:145px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th[data-col="category"]{width:95px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th[data-col="message"]{min-width:300px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th[data-col="sender"]{width:210px;min-width:170px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table th[data-col="status"]{width:100px}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table td[data-col="sender"]{font-weight:700;color:#27583c}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-table [hidden]{display:none!important}
@media(max-width:650px){
  body.employee-mode #employeeModule #employeeInfoView .employee-feedback-scroll{padding:10px 10px 22px}
  body.employee-mode #employeeModule #employeeInfoView .employee-feedback-panel.employee-feedback-inbox{padding:14px}
  body.employee-mode #employeeModule #employeeInfoView .employee-feedback-search-control{flex-wrap:wrap;padding:7px}
  body.employee-mode #employeeModule #employeeInfoView .employee-feedback-search-control input{flex-basis:calc(100% - 42px)}
}


/* Kritik & Saran: label Pencarian sejajar dengan kolom input. */
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-searchbar{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  align-items:center;
  gap:12px;
  width:100%;
  max-width:760px;
  margin:0 0 13px;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-searchbar label{
  display:block;
  width:100%;
  margin:0;
  color:#325444;
  font-size:11.5px;
  font-weight:800;
  line-height:1.3;
}
body.employee-mode #employeeModule #employeeInfoView .employee-feedback-search-control{
  width:100%;
  min-width:0;
}
body.employee-mode #employeeModule .employee-feedback-icon-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  padding:0;
  color:#555b57;
  background:#fff;
}
body.employee-mode #employeeModule .employee-feedback-icon-button:hover{
  color:#303b34;
  background:#f1f5f2;
}
body.employee-mode #employeeModule .employee-feedback-refresh-icon{
  display:block;
  width:25px;
  height:25px;
  fill:currentColor;
}
@media(max-width:650px){
  body.employee-mode #employeeModule #employeeInfoView .employee-feedback-searchbar{
    grid-template-columns:82px minmax(0,1fr);
    gap:9px;
    max-width:none;
  }
}

body.employee-mode #employeeDirectoryActions #employeeBulkCreateAccountsBtn[hidden]{display:none!important}
#gkeb-noop{display:none}
.gkeb-first-password-overlay{position:fixed;inset:0;z-index:999999;background:#eaf1ec;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}
.gkeb-first-password-overlay[hidden]{display:none!important}
.gkeb-first-password-card{width:min(100%,440px);padding:27px 26px;border-radius:15px;background:#fff;border:1px solid #d8e8de;box-shadow:0 16px 60px #183a281e;color:#224632}
.gkeb-first-password-mark{font-size:25px;margin-bottom:6px}
.gkeb-first-password-card h2{font-size:20px;margin:0 0 8px}
.gkeb-first-password-card p{font-size:12px;color:#607968;line-height:1.6;margin:0 0 20px}
.gkeb-first-password-card form{display:grid;gap:9px}
.gkeb-first-password-card label{font-size:12px;font-weight:750;color:#325443}
.gkeb-first-password-card input{display:block;width:100%;height:43px;padding:9px 12px;border-radius:8px;background:#fff;border:1px solid #cedfd3;font-size:14px;color:#21372c;margin-bottom:7px}
.gkeb-first-password-card input:focus{outline:2px solid #66b788;outline-offset:1px}
.gkeb-first-password-card button{min-height:40px;margin-top:5px}
#gkeb-noop2{display:none}
#employeeInitialPasswordError{color:#b22318;background:#fff2ef;border:1px solid #f5cfc8;border-radius:8px;padding:8px 10px;margin:0 0 4px;font-size:12px}
#employeeInitialPasswordError[hidden]{display:none!important}

/* Keep privileged reset hidden for non-Super-Admin roles. */
#superAdminPasswordResetBtn[hidden],#superAdminPasswordResetModal[hidden]{display:none!important}
#superAdminPasswordResetModal .security-modal-card{width:min(96vw,540px)}
#superAdminPasswordResetModal select{width:100%;min-height:40px;background:#fff;border:1px solid #d2e0d7;border-radius:7px;padding:8px 10px;color:#244637}
#superAdminPasswordResetModal .security-message{min-height:0;line-height:1.5}
#superAdminCreateAccountBtn[hidden],#superAdminCreateAccountModal[hidden],#superAdminPasswordResetTemporaryField[hidden]{display:none!important}
#superAdminCreateAccountModal .security-modal-card{width:min(96vw,560px);max-height:min(92vh,820px);overflow:auto}
#superAdminCreateAccountModal input,#superAdminCreateAccountModal select{width:100%;min-height:40px;border:1px solid #d2e0d7;border-radius:7px;background:#fff;padding:8px 10px;color:#244637}
#superAdminCreateAccountModal .security-message{min-height:0;line-height:1.5}
#superAdminPasswordResetTemporaryField input{width:100%;min-height:40px;border:1px solid #d2e0d7;border-radius:7px;padding:8px 10px;color:#244637}

/* Reversible account status action replaces permanent deletion. */
body.employee-mode #employeeAccountsView .employee-account-delete-btn{
  color:#946323;border-color:#efd8b8;background:#fffbf5;
}
body.employee-mode #employeeAccountsView .employee-account-delete-btn:hover,
body.employee-mode #employeeAccountsView .employee-account-delete-btn:focus-visible{
  background:#fff3df;border-color:#e4c48b;
}
body.employee-mode #employeeAccountsView .employee-account-delete-btn.reactivate{
  background:#f1faf4;border-color:#b6ddc3;color:#147449;
}
body.employee-mode #employeeAccountsView .employee-account-delete-btn.reactivate:hover{
  background:#e3f5e8;border-color:#8ac6a1;
}
.employee-account-delete-submit{background:#a96c2e;border-color:#925b21}
.employee-account-delete-submit:hover:not(:disabled){background:#89541c}
.employee-account-delete-submit.reactivate{background:#118052;border-color:#0b7045}
.employee-account-delete-submit.reactivate:hover:not(:disabled){background:#066640}

body.employee-mode #employeeModule #employeeTabAccounts[hidden]{display:none!important}
body.employee-mode #employeeModule #employeeAccountsView:not([hidden]){display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}
body.employee-mode #employeeAccountsView .employee-accounts-panel{width:100%;min-height:0;display:flex;flex-direction:column;gap:0;background:#fff;border:1px solid #dce6ed;border-top:3px solid #10935e;border-radius:7px;overflow:hidden}
body.employee-mode #employeeAccountsView .employee-accounts-toolbar{display:flex;gap:14px;align-items:end;padding:17px 20px 14px;border-bottom:1px solid #e5ede8;flex-wrap:wrap}
body.employee-mode #employeeAccountsView .employee-accounts-filter{display:flex;flex-direction:column;gap:6px;min-width:220px;flex:1 1 280px}
body.employee-mode #employeeAccountsView .employee-accounts-type-filter{flex:0 1 230px;min-width:180px}
body.employee-mode #employeeAccountsView label{font-size:11px;color:#425e50;font-weight:750}
body.employee-mode #employeeAccountsView input,body.employee-mode #employeeAccountsView select{height:37px;background:#fff;color:#1f3d2c;padding:8px 11px;border-radius:6px;border:1px solid #cedbd2;width:100%;min-width:0;font-size:12px}
body.employee-mode #employeeAccountsView .employee-accounts-list-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid #e5ede8}
body.employee-mode #employeeAccountsView .employee-accounts-list-heading h2{margin:0;font-size:16px;color:#1d4632}
body.employee-mode #employeeAccountsView .employee-accounts-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.employee-mode #employeeAccountsView .employee-accounts-total{color:#426857;background:#edf7f0;border-radius:30px;font-size:11px;font-weight:750;padding:8px 12px}
body.employee-mode #employeeAccountsView .employee-accounts-buttons button{font-size:11px;min-height:34px;padding:7px 11px}
body.employee-mode #employeeAccountsView .employee-accounts-table-scroll{flex:1 1 auto;min-height:130px;overflow:auto;scrollbar-gutter:stable}
body.employee-mode #employeeAccountsView .employee-accounts-table{border-collapse:collapse;min-width:760px;width:100%;font-size:12px}
body.employee-mode #employeeAccountsView .employee-accounts-table th{position:sticky;top:0;z-index:2;background:#f0f6f2;color:#355c46;padding:12px 14px;text-align:left;white-space:nowrap;border-bottom:1px solid #d7e5da;font-weight:800}
body.employee-mode #employeeAccountsView .employee-accounts-table td{padding:11px 14px;border-bottom:1px solid #e8efea;vertical-align:middle;color:#2d4f3c;white-space:nowrap}
body.employee-mode #employeeAccountsView .employee-accounts-table tbody tr:hover{background:#f7fbf8}
body.employee-mode #employeeAccountsView .employee-accounts-table td:nth-child(2){white-space:normal;min-width:180px}
body.employee-mode #employeeAccountsView .employee-accounts-type{display:inline-flex;align-items:center;border-radius:20px;padding:5px 9px;font-size:11px;font-weight:750;background:#edf8f0;color:#206b43}
body.employee-mode #employeeAccountsView .employee-accounts-type.standalone{background:#edf3fb;color:#45658b}
body.employee-mode #employeeAccountsView .employee-accounts-empty{text-align:center;color:#6b8374;padding:30px 12px}
body.employee-mode #employeeAccountsView .employee-accounts-error{background:#fff1ef;color:#a93b30;border:1px solid #f5d0c7;margin:10px 20px 4px;padding:9px 11px;border-radius:6px;font-size:12px}
body.employee-mode #employeeAccountsView .employee-accounts-footer{flex:0 0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #e5ede8;flex-wrap:wrap}
body.employee-mode #employeeAccountsView .employee-accounts-footer label{display:flex;align-items:center;gap:8px}
body.employee-mode #employeeAccountsView .employee-accounts-footer select{width:80px;height:32px}
body.employee-mode #employeeAccountsView .employee-accounts-pagination{display:flex;align-items:center;gap:9px;font-size:12px;color:#456253}
body.employee-mode #employeeAccountsView .employee-accounts-pagination button{padding:7px 10px;border:1px solid #d3e2d8;color:#2a6045;border-radius:5px;background:#fff;font-size:11px}
body.employee-mode #employeeAccountsView .employee-accounts-pagination button:disabled{opacity:.42;cursor:default}
@media(max-width:720px){body.employee-mode #employeeAccountsView .employee-accounts-toolbar,body.employee-mode #employeeAccountsView .employee-accounts-list-heading,body.employee-mode #employeeAccountsView .employee-accounts-footer{padding-left:12px;padding-right:12px}body.employee-mode #employeeAccountsView .employee-accounts-type-filter{flex:1 1 180px}}

/* Penghapusan akun: tabel tindakan dan dialog konfirmasi yang mengikuti tema GKEB. */
body.employee-mode #employeeAccountsView .employee-accounts-table th:last-child,
body.employee-mode #employeeAccountsView .employee-accounts-table td:last-child{
  width:108px;min-width:105px;text-align:center;white-space:nowrap;
}
body.employee-mode #employeeAccountsView .employee-account-delete-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid #efcecb;color:#b53d38;background:#fffafa;
  border-radius:6px;min-height:29px;padding:5px 9px;
  font-family:inherit;font-size:11px;font-weight:750;cursor:pointer;
}
body.employee-mode #employeeAccountsView .employee-account-delete-btn:hover,
body.employee-mode #employeeAccountsView .employee-account-delete-btn:focus-visible{
  background:#fff0ef;border-color:#e2a4a1;
}
body.employee-mode #employeeAccountsView .employee-account-delete-btn svg{
  width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
body.employee-mode #employeeAccountsView .employee-accounts-notice{
  margin:9px 18px 2px;padding:10px 12px;border:1px solid #bee4cb;
  border-radius:6px;background:#ecf9f0;color:#236446;font-size:12px;font-weight:700;
}
.employee-account-delete-dialog{max-width:480px}
.employee-account-delete-target{
  margin:12px 0 16px;padding:13px 15px;background:#f7faf8;
  border:1px solid #dcebe2;border-radius:8px;display:flex;flex-direction:column;gap:4px;
}
.employee-account-delete-target strong{font-size:15px;color:#173e2b;overflow-wrap:anywhere}
.employee-account-delete-target small{font-size:12px;color:#607b6c;overflow-wrap:anywhere}
.employee-account-delete-check{display:flex;align-items:flex-start;gap:8px;margin:13px 0 10px;
 font-weight:650;font-size:12px;line-height:1.5;color:#3b5146;cursor:pointer}
.employee-account-delete-check input{accent-color:#aa3431;margin:2px 0 0;flex:0 0 auto;width:16px;height:16px}
.employee-account-delete-submit{background:#ba3c37;color:#fff;border:1px solid #aa3631;
 border-radius:6px;min-height:37px;padding:9px 17px;font-weight:800;font-size:12px;cursor:pointer}
.employee-account-delete-submit:hover:not(:disabled){background:#a42f2c}
.employee-account-delete-submit:disabled{opacity:.6;cursor:wait}

/* Inventory RBAC: UI restrictions complement, never replace, PHP access checks. */
#inventoryModule [hidden]{display:none!important}
#inventoryModule[data-inv-role="user"] :is(
  [data-inv-item-action="edit"],[data-inv-item-action="activate"],
  [data-inv-item-action="deactivate"],[data-inv-item-action="delete"],
  [data-inv-tx-action="correction"],[data-inv-tx-action="cancel"],
  [data-inv-tx-action="edit"],[data-inv-tx-action="delete"],
  [data-inv-warehouse-action],[data-inv-loan-action],[data-inv-return-action],
  [data-inv-followup-action]
){display:none!important}
#inventoryModule[data-inv-role="admin"] :is(
  [data-inv-item-action="activate"],[data-inv-item-action="deactivate"],
  [data-inv-item-action="delete"],[data-inv-tx-action="correction"],
  [data-inv-tx-action="cancel"],[data-inv-tx-action="edit"],
  [data-inv-tx-action="delete"],[data-inv-warehouse-action]
){display:none!important}
#inventoryModule[data-inv-role="user"] :is(
 #inventoryTabLoanTx,#inventoryTabReturnTx,#inventoryTabAssetFollowups,#inventoryTabReports,
 #inventoryNewItemBottomBtn,#inventoryNewTransactionFab,#inventoryNewLoanFab,#inventoryNewWarehouseFab,
 #inventoryReportStock,#inventoryReportTx,#inventoryReportLoans
){display:none!important}
#inventoryModule[data-inv-role="admin"] :is(
 #inventoryNewWarehouseFab,#inventoryReportNavAudit,#inventoryReportNavCorrection,#inventoryReportNavHistory
){display:none!important}

/* Account-only access management: account rows expose actions while employee editor has no role control. */
body.employee-mode #employeeAccountsView .employee-account-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
body.employee-mode #employeeAccountsView .employee-account-role-btn{border:1px solid #bedfc8;background:#eff9f2;color:#1a7547;border-radius:5px;min-height:33px;padding:6px 10px;font-size:11px;font-weight:750;cursor:pointer;white-space:nowrap}
body.employee-mode #employeeAccountsView .employee-account-role-btn:hover,body.employee-mode #employeeAccountsView .employee-account-role-btn:focus-visible{background:#dcf0e3;border-color:#82c8a0}
body.employee-mode #employeeAccountsView .employee-accounts-table td:last-child{min-width:160px}
.employee-account-role-dialog .security-modal-content .field{margin-bottom:12px}
.employee-account-role-dialog select{width:100%;min-height:39px;border:1px solid #cbded2;border-radius:6px;padding:8px 10px;background:#fff;color:#244536}

/* RBAC: always honor the HTML hidden attribute, including for grid and flex widgets. */
#employeeModule [hidden],#employeeModule [hidden=""]{display:none!important;}
body.employee-mode #employeeModule .emp-dashboard-bottom-panels:has(#employeeUpcomingLeavePanel[hidden]){display:none!important;}


/* Accessibility and restrained interaction feedback. */
:where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid rgba(22, 131, 74, .58);
  outline-offset: 2px;
}
button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
  transform: translateY(1px);
}
button:disabled,
[role="button"][aria-disabled="true"] {
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* IMIP ENTERPRISE REDESIGN 2026 - FIXED LAYOUT */
:root{
  --imip-green:#176b45;--imip-green-dark:#104c32;
  --imip-bg:#f4f7f5;--imip-line:#e1e9e3;--imip-ink:#24352c;
}
html{scroll-behavior:smooth}
body{background:var(--imip-bg);color:var(--imip-ink);font-family:Inter,"Segoe UI",Arial,sans-serif}
.topbar{
  min-height:78px;padding:10px 26px;gap:22px;position:sticky;top:0;z-index:120;
  background:#fff;color:var(--imip-ink);border-bottom:1px solid var(--imip-line);
  box-shadow:0 3px 14px rgba(24,55,37,.045)
}
.brand-logo-wrap{padding:0;background:transparent}
.brand-logo{width:158px;max-height:52px;filter:none;object-fit:contain}
.header-app-controls{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:18px}
.header-main-title{color:#263a2f;font-size:15px;font-weight:750;letter-spacing:-.2px}
.header-right-controls{display:flex;align-items:center;gap:12px}
.header-account-toggle{color:#31453a;background:#f6f8f6;border:1px solid var(--imip-line);border-radius:10px;min-height:40px}
.language-control select{border:1px solid var(--imip-line);background:#fff;color:#31453a;border-radius:9px;min-height:40px}

/* Sidebar: reset old horizontal-navigation offsets that caused clipped labels. */
.module-subheader{
  position:fixed!important;z-index:100;left:0;top:78px;bottom:0;
  width:252px!important;max-width:252px;overflow-y:auto;overflow-x:hidden;
  background:#123f2b;border-right:1px solid rgba(255,255,255,.07);
  box-shadow:5px 0 22px rgba(18,63,43,.07);padding:22px 14px;
}
body .module-subheader-inner{
  display:block!important;width:100%!important;max-width:none!important;
  min-width:0!important;margin:0!important;padding:0!important;
  overflow:visible!important;box-sizing:border-box;
}
body .subheader-modules{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  gap:6px!important;width:100%!important;min-width:0!important;max-width:100%;
  box-sizing:border-box;
}
.subheader-modules:before{
  content:"NAVIGASI UTAMA";display:block;color:#a9c7b5;font-size:10px;
  font-weight:800;letter-spacing:1.15px;padding:3px 12px 12px;
}
body .subheader-modules .module-tab{
  display:flex!important;align-items:center;justify-content:flex-start;
  width:100%!important;min-width:0!important;max-width:100%;
  min-height:44px;margin:0!important;padding:11px 13px!important;
  border:1px solid transparent!important;border-radius:10px!important;
  background:transparent;color:#e3eee7;font-size:12px;font-weight:650;
  text-align:left;line-height:1.35;white-space:normal;overflow-wrap:anywhere;
  box-sizing:border-box;box-shadow:none;
}
body .subheader-modules .module-tab:hover{color:#fff;background:rgba(255,255,255,.09)}
body .subheader-modules .module-tab.active{
  color:#164b31;background:#f0f7f2;border-color:#d8e9dd!important;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
body .subheader-modules .module-tab.active:after{display:none!important}

/* Critical fix: the application content must sit beside the fixed sidebar,
   not underneath it. Apply to every module layout, including CCTV/inventory. */
#appContainer:not([hidden]){
  position:relative;
  margin-left:252px!important;
  margin-right:0!important;
  width:calc(100% - 252px)!important;
  max-width:none!important;
  min-width:0;
  box-sizing:border-box;
  padding:26px clamp(18px,2.3vw,36px) 36px;
}
.intro{align-items:center;margin-bottom:22px}
.intro h1{font-size:clamp(22px,2vw,28px);letter-spacing:-.65px;color:#20372a}
.intro p{font-size:13px;color:#75847b}
.panel,.content-card,.stat-card{border:1px solid var(--imip-line);border-radius:14px;box-shadow:0 8px 24px rgba(24,55,37,.055)}
.panel-head{padding:18px 21px;background:#fff}
.panel-body{padding:22px}
input,textarea,select{border-color:#d7e1d9;border-radius:9px}
.btn-primary{background:var(--imip-green)}
.btn-primary:hover{background:var(--imip-green-dark)}
.records-table th{background:#f5f8f6}
.mobile-nav-toggle{
  display:none;align-items:center;justify-content:center;width:40px;height:40px;
  padding:0;color:#24553a;background:#edf5ef;border:1px solid #dce9df;
  border-radius:10px;font-size:19px;cursor:pointer
}
.nav-scrim{display:none}

@media(max-width:1000px){
  #appContainer:not([hidden]){padding:22px 18px 30px}
  .header-main-title{font-size:13px}
}
@media(max-width:760px){
  .topbar{min-height:68px;padding:9px 14px;gap:10px}
  .brand-logo{width:124px;max-height:44px}
  .header-app-controls{gap:8px}
  .header-main-title{display:none}
  .header-right-controls{gap:7px}
  .header-account-toggle{min-height:38px;padding:8px}
  .account-display-name{max-width:82px;overflow:hidden;text-overflow:ellipsis}
  .language-control{min-width:0}
  .language-control select{min-width:0;width:42px;padding:7px 3px;font-size:10px}
  .mobile-nav-toggle{display:inline-flex;flex:0 0 40px}
  .module-subheader{
    top:68px!important;width:min(290px,84vw)!important;max-width:84vw;
    transform:translateX(-105%);transition:transform .22s ease;
    box-shadow:12px 0 34px rgba(0,0,0,.16)
  }
  .module-subheader.mobile-open{transform:translateX(0)}
  .nav-scrim.active{
    display:block;position:fixed;inset:68px 0 0;z-index:90;
    background:rgba(12,29,19,.42)
  }
  #appContainer:not([hidden]){
    margin-left:0!important;margin-right:0!important;width:100%!important;
    padding:18px 13px 28px;
  }
  .intro{gap:12px}
  .intro h1{font-size:22px}
}
@media(max-width:430px){
  .topbar{padding:8px 10px}
  .brand-logo{width:108px}
  .header-right-controls{gap:5px}
  .header-account-toggle{gap:4px;font-size:11px}
  .account-chevron{display:none}
  #appContainer:not([hidden]){padding:15px 10px 24px}
}
@media print{
  .module-subheader,.mobile-nav-toggle,.nav-scrim{display:none!important}
  #appContainer:not([hidden]){margin:0!important;width:100%!important;padding:0!important}
  .topbar{position:static;display:none!important}
}


/* IMIP MODULE LAYOUT ALIGNMENT FIX V2
   All module-specific legacy viewport rules must respect the global sidebar.
   Preserve each module's own flex/scroll behavior; only correct its page frame. */
body.welding-mode #appContainer:not([hidden]),
body.cctv-mode #appContainer:not([hidden]),
body.inventory-mode #appContainer:not([hidden]),
body.employee-mode #appContainer:not([hidden]){
  margin-left:252px!important;
  margin-right:0!important;
  width:calc(100% - 252px)!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
body.welding-mode #appContainer:not([hidden]),
body.cctv-mode #appContainer:not([hidden]),
body.inventory-mode #appContainer:not([hidden]),
body.employee-mode #appContainer:not([hidden]){
  min-width:0!important;
}
@media(max-width:760px){
  body.welding-mode #appContainer:not([hidden]),
  body.cctv-mode #appContainer:not([hidden]),
  body.inventory-mode #appContainer:not([hidden]),
  body.employee-mode #appContainer:not([hidden]){
    margin-left:0!important;
    margin-right:0!important;
    width:100%!important;
    max-width:none!important;
  }
}


/* =========================================================
   IMIP SINGLE SIDEBAR V5
   One blue-gradient rail for module navigation and the
   original nested Inventory / Employee navigation trees.
   ========================================================= */
.module-subheader{
  position:fixed!important;
  z-index:100!important;
  left:0!important;
  top:74px!important;
  bottom:0!important;
  width:252px!important;
  max-width:252px!important;
  min-width:252px!important;
  box-sizing:border-box!important;
  padding:20px 13px 24px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  background:linear-gradient(165deg,#142b39 0%,#234b69 54%,#3476a8 100%)!important;
  color:#f8fafc!important;
  border-right:1px solid rgba(255,255,255,.13)!important;
  box-shadow:5px 0 22px rgba(18,42,61,.13)!important;
}
.module-subheader::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.42) .7px,transparent .8px),
    radial-gradient(circle,rgba(255,255,255,.22) .7px,transparent .8px);
  background-size:22px 22px,37px 37px;
  background-position:3px 8px,12px 18px;
}
.module-subheader-inner{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.module-subheader-inner>.subheader-modules{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
}
.module-subheader .subheader-modules .module-tab{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
  margin:0!important;
  padding:10px 12px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#e5edf4!important;
  text-align:left!important;
  white-space:normal!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1.35!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease!important;
}
.module-subheader .subheader-modules .module-tab:hover{
  background:rgba(255,255,255,.11)!important;
  color:#fff!important;
}
.module-subheader .subheader-modules .module-tab.active,
.module-subheader .subheader-modules .module-tab.active:hover{
  background:rgba(255,255,255,.17)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:inset 3px 0 0 #a9d8f5!important;
}

/* Context menu remains inside the same blue sidebar. */
.module-context-nav{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:16px 0 0!important;
  padding:14px 0 0!important;
  border-top:1px solid rgba(255,255,255,.2)!important;
  box-sizing:border-box!important;
}
.module-context-nav[hidden],
.module-context-group[hidden]{display:none!important}
.module-context-heading{
  display:block!important;
  padding:0 12px 9px!important;
  color:#d9e8f3!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:1px!important;
  line-height:1.4!important;
  text-transform:uppercase!important;
}
.module-context-nav #inventoryContextNavHost,
.module-context-nav #employeeContextNavHost{
  display:block!important;
  width:100%!important;
  min-width:0!important;
}
.module-context-nav .inventory-sidebar-nav{
  position:static!important;
  z-index:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:4px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
}
.module-context-nav .inventory-side-transactions,
.module-context-nav .employee-sidebar-attendance-group{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-width:0!important;
}
.module-context-nav .inventory-side-link{
  position:relative!important;
  display:flex!important;
  flex:0 0 auto!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:40px!important;
  margin:0!important;
  padding:9px 12px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#e5edf4!important;
  text-align:left!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.35!important;
  white-space:normal!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transition:background .16s ease,color .16s ease!important;
}
.module-context-nav .inventory-side-link svg{
  display:block!important;
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
  fill:none!important;
  stroke:currentColor!important;
}
.module-context-nav .inventory-side-link:hover{
  background:rgba(255,255,255,.11)!important;
  color:#fff!important;
}
.module-context-nav .inventory-side-link.active,
.module-context-nav .inventory-side-link.active:hover{
  background:rgba(255,255,255,.17)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:inset 3px 0 0 #a9d8f5!important;
}
.module-context-nav .inventory-tx-submenu{
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
  width:calc(100% - 17px)!important;
  min-width:0!important;
  margin:3px 0 6px 17px!important;
  padding:4px 0 4px 9px!important;
  border-left:1px solid rgba(217,232,243,.32)!important;
  overflow:visible!important;
}
.module-context-nav .inventory-tx-submenu[hidden]{
  display:none!important;
}
.module-context-nav .inventory-tx-sub-link{
  min-height:35px!important;
  padding:7px 10px!important;
  color:#d0dfeb!important;
  font-size:11px!important;
  font-weight:550!important;
}
.module-context-nav .inventory-tx-sub-link:hover{
  color:#fff!important;
  background:rgba(255,255,255,.1)!important;
}
.module-context-nav .inventory-tx-sub-link.active,
.module-context-nav .inventory-tx-sub-link.active:hover{
  color:#fff!important;
  background:rgba(255,255,255,.17)!important;
}

/* Content takes the full space after the original sidebars are removed. */
#inventoryModule .inventory-layout,
#employeeModule .employee-layout{
  display:flex!important;
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  gap:0!important;
}
#inventoryModule .inventory-content,
#employeeModule .employee-content{
  display:flex!important;
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}

/* Keep the single sidebar usable on tablets and phones. */
@media(max-width:760px){
  .module-subheader{
    top:68px!important;
    width:min(290px,84vw)!important;
    min-width:0!important;
    max-width:84vw!important;
    padding:18px 12px 22px!important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:12px 0 34px rgba(0,0,0,.2)!important;
  }
  .module-subheader.mobile-open{transform:translateX(0)!important}
  .module-context-nav{margin-top:13px!important;padding-top:12px!important}
  .module-context-nav .inventory-side-link{min-height:42px!important}
}


/* IMIP V6: user-provided emerald-to-deep-teal-blue sidebar gradient */
.module-subheader{
  background:linear-gradient(
    155deg,
    #03543f 0%,
    #045047 46%,
    #07504f 68%,
    #0a344b 100%
  ) !important;
  background-color:#064b49 !important;
}
.module-subheader::before{
  display:none !important;
  content:none !important;
  background:none !important;
}


/* =========================================================
   IMIP V7: INLINE EXPANDABLE MODULE NAVIGATION
   The module's own original navigation appears immediately
   under its parent item in the single primary sidebar.
   ========================================================= */
.module-subheader .subheader-modules{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:5px!important;
}
.module-subheader .module-parent-tab{
  position:relative;
  padding-right:30px!important;
}
.module-subheader .module-parent-tab::after{
  content:"";
  position:absolute;
  right:13px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
  opacity:.75;
  transition:transform .18s ease;
}
.module-subheader .module-parent-tab[aria-expanded="true"]::after{
  transform:translateY(-25%) rotate(225deg);
}
.module-inline-nav{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:-1px 0 5px!important;
  padding:0 0 0 9px!important;
  border-left:2px solid rgba(190,226,245,.52)!important;
  box-sizing:border-box!important;
}
.module-inline-nav[hidden]{
  display:none!important;
}
.module-inline-nav>div{
  width:100%;
  min-width:0;
}
.module-inline-nav .inventory-sidebar-nav{
  position:static!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:3px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
}
.module-inline-nav .inventory-side-transactions,
.module-inline-nav .employee-sidebar-attendance-group{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-width:0!important;
}
.module-inline-nav .inventory-side-link{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:37px!important;
  margin:0!important;
  padding:8px 10px!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#e5edf4!important;
  font-size:11.5px!important;
  font-weight:600!important;
  line-height:1.35!important;
  text-align:left!important;
  white-space:normal!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.module-inline-nav .inventory-side-link svg{
  display:block!important;
  flex:0 0 16px!important;
  width:16px!important;
  height:16px!important;
  fill:none!important;
  stroke:currentColor!important;
}
.module-inline-nav .inventory-side-link:hover{
  color:#fff!important;
  background:rgba(255,255,255,.1)!important;
}
.module-inline-nav .inventory-side-link.active,
.module-inline-nav .inventory-side-link.active:hover{
  color:#fff!important;
  background:rgba(255,255,255,.17)!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:inset 3px 0 0 #a9d8f5!important;
}
.module-inline-nav .inventory-tx-submenu{
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
  width:calc(100% - 14px)!important;
  margin:2px 0 5px 14px!important;
  padding:3px 0 3px 8px!important;
  border-left:1px solid rgba(217,232,243,.3)!important;
  overflow:visible!important;
}
.module-inline-nav .inventory-tx-submenu[hidden]{
  display:none!important;
}
.module-inline-nav .inventory-tx-sub-link{
  min-height:32px!important;
  padding:6px 9px!important;
  color:#d0dfeb!important;
  font-size:10.5px!important;
}
.module-inline-nav .inventory-tx-sub-link:hover{
  color:#fff!important;
  background:rgba(255,255,255,.1)!important;
}
.module-inline-nav .inventory-tx-sub-link.active,
.module-inline-nav .inventory-tx-sub-link.active:hover{
  color:#fff!important;
  background:rgba(255,255,255,.17)!important;
}

/* Guarantee the internal rails and their former empty columns are gone. */
#inventoryModule .inventory-sidebar,
#employeeModule .employee-sidebar{
  display:none!important;
  width:0!important;
  min-width:0!important;
  flex:0 0 0!important;
  visibility:hidden!important;
}
#inventoryModule .inventory-layout,
#employeeModule .employee-layout{
  display:flex!important;
  flex-direction:row!important;
  gap:0!important;
  width:100%!important;
  min-width:0!important;
}
#inventoryModule .inventory-content,
#employeeModule .employee-content{
  display:flex!important;
  flex:1 1 100%!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
@media(max-width:760px){
  .module-inline-nav{
    padding-left:7px!important;
    margin-bottom:4px!important;
  }
  .module-inline-nav .inventory-side-link{
    min-height:39px!important;
  }
}



/* =========================================================
   IMIP V9: COLLAPSIBLE INVENTORY NAV + EMPLOYEE ATTENDANCE
   ========================================================= */

/* Parent module buttons behave as accessible accordion controls. */
.module-subheader #moduleInventoryBtn,
.module-subheader #moduleEmployeesBtn{
  position:relative!important;
  padding-right:34px!important;
}
.module-subheader #moduleInventoryBtn::after,
.module-subheader #moduleEmployeesBtn::after{
  content:"";
  position:absolute;
  right:15px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
  opacity:.8;
  transition:transform .18s ease;
}
.module-subheader #moduleInventoryBtn[aria-expanded="true"]::after,
.module-subheader #moduleEmployeesBtn[aria-expanded="true"]::after{
  transform:translateY(-25%) rotate(225deg);
}

/* The submenu wrappers must obey the hidden attribute regardless of other rules. */
#inventoryInlineGroup[hidden],
#employeeInlineGroup[hidden],
#inventoryInlineGroup #inventoryTxSubmenu[hidden],
#inventoryInlineGroup #inventoryReportsSubmenu[hidden],
#employeeInlineGroup #employeeAttendanceSubnav[hidden]{
  display:none!important;
}

/* Inventory transaction and report accordions can always be collapsed. */
#inventoryInlineNavHost #inventoryTxSubmenu,
#inventoryInlineNavHost #inventoryReportsSubmenu{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:3px!important;
  width:calc(100% - 14px)!important;
  margin:3px 0 7px 14px!important;
  padding:4px 0 4px 9px!important;
  border-left:1px solid rgba(210,232,246,.38)!important;
  box-sizing:border-box!important;
}
#inventoryInlineNavHost #inventoryTxSubmenu[hidden],
#inventoryInlineNavHost #inventoryReportsSubmenu[hidden]{
  display:none!important;
}
#inventoryInlineNavHost #inventoryTabTransactions[aria-expanded="true"] .inventory-tx-chevron,
#inventoryInlineNavHost #inventoryTabReports[aria-expanded="true"] .inventory-tx-chevron{
  transform:rotate(180deg);
}
#inventoryInlineNavHost .inventory-tx-chevron{
  margin-left:auto;
  font-size:14px;
  line-height:1;
  transition:transform .18s ease;
}

/* Employee attendance submenu: aligned directly beneath its parent,
   with clear hierarchy and a distinct active state. */
#employeeInlineNavHost #employeeAttendanceNavGroup{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
}
#employeeInlineNavHost #employeeTabAttendance{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
}
#employeeInlineNavHost #employeeTabAttendance .employee-attendance-chevron{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-left:auto!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  border-radius:5px!important;
  color:#dcecf6!important;
  font-size:15px!important;
  line-height:1!important;
  opacity:.9!important;
  transition:transform .18s ease,background .18s ease!important;
}
#employeeInlineNavHost #employeeTabAttendance[aria-expanded="true"] .employee-attendance-chevron{
  transform:rotate(180deg)!important;
  background:rgba(255,255,255,.1)!important;
}
#employeeInlineNavHost #employeeAttendanceSubnav{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:4px!important;
  width:calc(100% - 15px)!important;
  min-width:0!important;
  margin:4px 0 8px 15px!important;
  padding:5px 0 5px 10px!important;
  border-left:2px solid rgba(169,216,245,.58)!important;
  border-radius:0 0 0 2px!important;
  background:transparent!important;
  box-sizing:border-box!important;
}
#employeeInlineNavHost #employeeAttendanceSubnav[hidden]{
  display:none!important;
}
#employeeInlineNavHost #employeeAttendanceSubnav .attendance-mode-btn{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
  min-height:37px!important;
  margin:0!important;
  padding:8px 10px!important;
  border:1px solid rgba(220,237,248,.08)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.045)!important;
  color:#d9e8f2!important;
  font-size:11px!important;
  font-weight:550!important;
  line-height:1.3!important;
  text-align:left!important;
  white-space:normal!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease!important;
}
#employeeInlineNavHost #employeeAttendanceSubnav .attendance-mode-btn svg{
  display:block!important;
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.6!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#employeeInlineNavHost #employeeAttendanceSubnav .attendance-mode-btn:hover{
  color:#fff!important;
  background:rgba(255,255,255,.11)!important;
  border-color:rgba(220,237,248,.2)!important;
}
#employeeInlineNavHost #employeeAttendanceSubnav .attendance-mode-btn.active,
#employeeInlineNavHost #employeeAttendanceSubnav .attendance-mode-btn[aria-current="page"]{
  color:#fff!important;
  background:linear-gradient(100deg,rgba(71,155,205,.34),rgba(71,155,205,.11))!important;
  border-color:rgba(169,216,245,.3)!important;
  box-shadow:inset 3px 0 0 #a9d8f5!important;
}
@media(max-width:760px){
  #employeeInlineNavHost #employeeAttendanceSubnav{
    width:calc(100% - 12px)!important;
    margin-left:12px!important;
  }
  #employeeInlineNavHost #employeeAttendanceSubnav .attendance-mode-btn{
    min-height:40px!important;
  }
}


/* =========================================================
   IMIP V10: HEADER TITLE ALIGNMENT + SIDEBAR SPACING
   ========================================================= */

/* Align the website title with the left edge of the page content below.
   The fixed sidebar is 252px wide; the content has responsive inner padding. */
@media (min-width:1081px){
  .topbar .header-main-title{
    margin-left:calc(252px + clamp(18px, 2.3vw, 36px) - 218px)!important;
    align-self:center!important;
    line-height:1.35!important;
    text-align:left!important;
  }
}
@media (min-width:821px) and (max-width:1080px){
  .topbar .header-main-title{
    margin-left:calc(252px + clamp(18px, 2.3vw, 25px) - 169px)!important;
    align-self:center!important;
    line-height:1.35!important;
    text-align:left!important;
  }
}
@media (max-width:820px){
  .topbar .header-main-title{
    margin-left:0!important;
    align-self:flex-start!important;
  }
}

/* More balanced vertical rhythm for the primary navigation. */
.module-subheader .subheader-modules{
  gap:8px!important;
}
.module-subheader .subheader-modules > .module-tab{
  min-height:44px!important;
  padding:11px 13px!important;
  border-radius:10px!important;
  line-height:1.4!important;
}
.module-subheader .module-inline-nav{
  margin:0 0 9px!important;
  padding:2px 0 3px 11px!important;
  border-left-width:2px!important;
}
.module-subheader .module-inline-nav .inventory-sidebar-nav{
  gap:5px!important;
}
.module-subheader .module-inline-nav .inventory-side-link{
  min-height:39px!important;
  padding:9px 11px!important;
  border-radius:8px!important;
  line-height:1.4!important;
}
.module-subheader .module-inline-nav .inventory-tx-submenu{
  gap:5px!important;
  width:calc(100% - 13px)!important;
  margin:4px 0 8px 13px!important;
  padding:5px 0 5px 9px!important;
}
.module-subheader .module-inline-nav .inventory-tx-sub-link{
  min-height:36px!important;
  padding:8px 10px!important;
  border-radius:7px!important;
  line-height:1.35!important;
}

/* Keep the attendance submenu consistent with the other nested menus. */
#employeeInlineNavHost #employeeAttendanceSubnav{
  gap:5px!important;
  margin:5px 0 9px 13px!important;
  padding:5px 0 5px 9px!important;
  width:calc(100% - 13px)!important;
}
#employeeInlineNavHost #employeeAttendanceSubnav .attendance-mode-btn{
  min-height:38px!important;
  padding:9px 10px!important;
  border-radius:8px!important;
  line-height:1.35!important;
}

/* Slightly tighter rhythm on smaller screens to preserve room for scrolling. */
@media(max-width:760px){
  .module-subheader .subheader-modules{
    gap:6px!important;
  }
  .module-subheader .subheader-modules > .module-tab{
    min-height:43px!important;
    padding:10px 12px!important;
  }
  .module-subheader .module-inline-nav{
    margin-bottom:7px!important;
    padding-left:9px!important;
  }
  .module-subheader .module-inline-nav .inventory-sidebar-nav{
    gap:4px!important;
  }
  .module-subheader .module-inline-nav .inventory-side-link{
    min-height:38px!important;
    padding:8px 10px!important;
  }
}


/* =========================================================
   IMIP V11: ACCOUNT PROFILE CARD INSIDE THE PRIMARY SIDEBAR
   ========================================================= */

/* The account card now sits above the "NAVIGASI UTAMA" heading. */
.module-subheader .header-account-wrap{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 0 17px!important;
  padding:0 0 16px!important;
  border-bottom:1px solid rgba(220,242,238,.22)!important;
  box-sizing:border-box!important;
  z-index:130!important;
}
.module-subheader .header-account-toggle{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:11px!important;
  width:100%!important;
  max-width:none!important;
  min-height:78px!important;
  padding:11px 12px!important;
  border:1px solid rgba(218,244,239,.2)!important;
  border-radius:12px!important;
  background:linear-gradient(
    112deg,
    rgba(87,177,157,.22) 0%,
    rgba(28,111,111,.22) 48%,
    rgba(14,56,79,.3) 100%
  )!important;
  color:#f5fffb!important;
  text-align:left!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 15px rgba(0,25,35,.12)!important;
  cursor:pointer!important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.module-subheader .header-account-toggle:hover,
.module-subheader .header-account-toggle[aria-expanded="true"]{
  background:linear-gradient(
    112deg,
    rgba(105,194,173,.3) 0%,
    rgba(34,126,127,.3) 50%,
    rgba(18,67,91,.38) 100%
  )!important;
  border-color:rgba(226,250,245,.34)!important;
}
.module-subheader .header-account-toggle .account-user-icon{
  display:block!important;
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  padding:9px!important;
  border:1px solid rgba(230,250,245,.26)!important;
  border-radius:50%!important;
  background:rgba(230,250,245,.13)!important;
  color:#e8fff7!important;
  stroke:currentColor!important;
  box-sizing:border-box!important;
}
.module-subheader .account-identity-copy{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:4px!important;
  min-width:0!important;
  text-align:left!important;
}
.module-subheader .account-display-name{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  overflow:hidden!important;
  color:#f7fffc!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1.25!important;
  text-align:left!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.module-subheader .account-caption{
  display:block!important;
  color:rgba(226,246,240,.78)!important;
  font-size:11px!important;
  font-weight:500!important;
  line-height:1.2!important;
  letter-spacing:.15px!important;
}
.module-subheader .header-account-toggle .account-chevron{
  display:block!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  margin-left:auto!important;
  fill:none!important;
  stroke:#e8fff7!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  transition:transform .18s ease!important;
}
.module-subheader .header-account-toggle[aria-expanded="true"] .account-chevron{
  transform:rotate(180deg)!important;
}
.module-subheader .account-dropdown-menu{
  position:absolute!important;
  top:calc(100% - 8px)!important;
  left:0!important;
  right:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  z-index:1500!important;
  padding:6px!important;
  border:1px solid #dce8e4!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:0 14px 32px rgba(0,25,35,.28)!important;
  box-sizing:border-box!important;
}
.module-subheader .account-dropdown-menu[hidden]{
  display:none!important;
}
.module-subheader .account-dropdown-item{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  width:100%!important;
  min-height:38px!important;
  padding:8px 10px!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#244238!important;
  font-size:12px!important;
  font-weight:600!important;
  text-align:left!important;
  cursor:pointer!important;
}
.module-subheader .account-dropdown-item:hover{
  background:#edf6f2!important;
  color:#07504f!important;
}
.module-subheader .account-dropdown-item svg{
  width:16px!important;
  height:16px!important;
  flex:0 0 16px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Keep the account card comfortable on narrow sidebar widths. */
@media(max-width:760px){
  .module-subheader .header-account-wrap{
    margin-bottom:14px!important;
    padding-bottom:13px!important;
  }
  .module-subheader .header-account-toggle{
    min-height:72px!important;
    padding:9px 10px!important;
    gap:9px!important;
  }
  .module-subheader .header-account-toggle .account-user-icon{
    width:39px!important;
    height:39px!important;
    flex-basis:39px!important;
  }
}


/* =========================================================
   IMIP V12: AUTHENTICATED EMPLOYEE PHOTO IN SIDEBAR PROFILE
   ========================================================= */
.module-subheader .header-account-toggle .account-avatar-photo,
.module-subheader .header-account-toggle .account-avatar-fallback{
  display:block!important;
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  border:1px solid rgba(230,250,245,.3)!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
}
.module-subheader .header-account-toggle .account-avatar-photo{
  padding:0!important;
  object-fit:cover!important;
  object-position:center!important;
  background:rgba(230,250,245,.12)!important;
  box-shadow:0 1px 5px rgba(0,0,0,.18)!important;
}
.module-subheader .header-account-toggle .account-avatar-fallback{
  padding:9px!important;
  color:#e8fff7!important;
  background:rgba(230,250,245,.13)!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#activeAccountAvatar[hidden],
#activeAccountAvatarFallback[hidden]{
  display:none!important;
}
.module-subheader .account-identity-copy{gap:0!important}
@media(max-width:760px){
  .module-subheader .header-account-toggle .account-avatar-photo,
  .module-subheader .header-account-toggle .account-avatar-fallback{
    width:39px!important;height:39px!important;flex-basis:39px!important;
  }
}


/* =========================================================
   IMIP V13: CLEAN SIDEBAR PROFILE + LOCALIZED NAV HEADING
   ========================================================= */

/* Only the signed-in employee photo is displayed in the account card. */
.module-subheader .header-account-toggle .account-avatar-photo{
  display:block!important;
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center!important;
  border:1px solid rgba(230,250,245,.34)!important;
  border-radius:50%!important;
  background:rgba(230,250,245,.12)!important;
  box-shadow:0 1px 5px rgba(0,0,0,.18)!important;
  box-sizing:border-box!important;
}
.module-subheader .header-account-toggle #activeAccountAvatar[hidden]{
  display:none!important;
}

/* The heading is CSS-generated, so explicitly localize it with the page language. */
.subheader-modules:before{
  content:"NAVIGASI UTAMA"!important;
}
html[lang="zh"] .subheader-modules:before,
body[data-lang="zh"] .subheader-modules:before{
  content:"主导航"!important;
}
html[lang="id"] .subheader-modules:before,
body[data-lang="id"] .subheader-modules:before{
  content:"NAVIGASI UTAMA"!important;
}

@media(max-width:760px){
  .module-subheader .header-account-toggle .account-avatar-photo{
    width:39px!important;
    height:39px!important;
    flex-basis:39px!important;
  }
}


/* =========================================================
   IMIP V14: ACTIVE SIDEBAR CHEVRONS + PROFESSIONAL TOP HEADER
   ========================================================= */

/* The active-tab reset hides ordinary ::after decorations. Restore the
   disclosure chevron only for the two expandable module parents. */
.module-subheader .subheader-modules .module-parent-tab.active::after,
body .module-subheader .subheader-modules .module-parent-tab.active::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  right:15px!important;
  top:50%!important;
  width:8px!important;
  height:8px!important;
  border-right:2px solid #e3f5ec!important;
  border-bottom:2px solid #e3f5ec!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(-70%) rotate(45deg)!important;
  transition:transform .18s ease,opacity .18s ease!important;
  pointer-events:none!important;
}
.module-subheader .subheader-modules .module-parent-tab.active[aria-expanded="true"]::after,
body .module-subheader .subheader-modules .module-parent-tab.active[aria-expanded="true"]::after{
  transform:translateY(-25%) rotate(225deg)!important;
}
.module-subheader .subheader-modules .module-parent-tab{
  padding-right:38px!important;
}

/* A cleaner enterprise-style top header with a consistent IMIP brand zone. */
.topbar{
  min-height:78px!important;
  height:auto!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:24px!important;
  padding:10px clamp(18px,2.2vw,32px)!important;
  position:sticky!important;
  top:0!important;
  z-index:120!important;
  color:#183c31!important;
  background:linear-gradient(100deg,#ffffff 0%,#fbfdfc 68%,#f4faf7 100%)!important;
  border-top:3px solid #08a64a!important;
  border-bottom:1px solid #dce9e2!important;
  box-shadow:0 5px 20px rgba(12,55,39,.075)!important;
  box-sizing:border-box!important;
}
.topbar::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,rgba(8,166,74,.35),rgba(8,166,74,0) 72%);
  pointer-events:none;
}
.topbar .brand.brand-imip{
  flex:0 0 178px!important;
  width:178px!important;
  min-width:150px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding-right:20px!important;
  border-right:1px solid #e2ece6!important;
}
.topbar .brand-imip .brand-logo-wrap{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-height:48px!important;
}
.topbar .brand-imip .brand-logo{
  display:block!important;
  width:100%!important;
  max-width:176px!important;
  height:46px!important;
  max-height:46px!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:none!important;
}
.topbar .header-app-controls[hidden]{
  display:none!important;
}
.topbar .header-app-controls{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:22px!important;
  order:initial!important;
}
.topbar .header-main-title{
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0 0 0 2px!important;
  color:#173d30!important;
  font-size:15px!important;
  font-weight:760!important;
  line-height:1.4!important;
  letter-spacing:-.25px!important;
  white-space:normal!important;
  text-align:left!important;
}
.topbar .header-main-title::before{
  content:"IMIP  |  ELECTRIC JETTY";
  display:block;
  margin:0 0 4px;
  color:#0b9950;
  font-size:9px;
  font-weight:850;
  line-height:1.2;
  letter-spacing:1.25px;
}
.topbar .header-right-controls{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  margin:0!important;
}
.topbar .language-control{
  display:flex!important;
  align-items:center!important;
  margin:0!important;
}
.topbar .language-control select{
  min-width:148px!important;
  width:auto!important;
  min-height:42px!important;
  padding:0 34px 0 13px!important;
  color:#29483b!important;
  background:#fff!important;
  border:1px solid #d6e5dc!important;
  border-radius:10px!important;
  box-shadow:0 2px 6px rgba(20,70,48,.035)!important;
  font-size:12px!important;
  font-weight:650!important;
  transition:border-color .18s ease,box-shadow .18s ease!important;
}
.topbar .language-control select:hover,
.topbar .language-control select:focus{
  border-color:#76bd94!important;
  box-shadow:0 0 0 3px rgba(8,166,74,.09)!important;
  outline:none!important;
}
.topbar .mobile-nav-toggle{
  border:1px solid #d9e9e0!important;
  border-radius:10px!important;
  background:#f7fbf8!important;
  color:#145c3a!important;
}
@media(max-width:820px){
  .topbar{
    min-height:68px!important;
    padding:8px 14px!important;
    gap:12px!important;
    flex-wrap:wrap!important;
  }
  .topbar .brand.brand-imip{
    flex:0 0 132px!important;
    width:132px!important;
    min-width:112px!important;
    padding-right:10px!important;
  }
  .topbar .brand-imip .brand-logo{height:40px!important;max-height:40px!important}
  .topbar .header-app-controls{
    flex:1 1 auto!important;
    min-width:0!important;
    flex-wrap:wrap!important;
    gap:6px!important;
  }
  .topbar .header-main-title{
    display:block!important;
    flex:1 1 100%!important;
    order:2!important;
    font-size:11px!important;
    line-height:1.25!important;
    padding:0!important;
  }
  .topbar .header-main-title::before{
    display:none!important;
  }
  .topbar .header-right-controls{
    margin-left:auto!important;
    order:1!important;
  }
  .topbar .language-control select{
    min-width:118px!important;
    min-height:36px!important;
    font-size:11px!important;
  }
}
@media(max-width:520px){
  .topbar{
    min-height:68px!important;
    padding:7px 10px!important;
    gap:8px!important;
  }
  .topbar .brand.brand-imip{
    flex:0 0 112px!important;
    width:112px!important;
    min-width:100px!important;
    padding-right:8px!important;
  }
  .topbar .brand-imip .brand-logo{height:34px!important;max-height:34px!important}
  .topbar .header-main-title{font-size:10px!important}
  .topbar .language-control select{
    min-width:104px!important;
    padding-left:8px!important;
    padding-right:22px!important;
    font-size:10px!important;
  }
}


/* =========================================================
   IMIP V15: SIDEBAR-WIDTH BRAND COLUMN + CLEAN CHEVRONS
   ========================================================= */

/* Desktop: the IMIP brand zone occupies exactly the same 252px
   horizontal width as the fixed navigation sidebar. */
@media (min-width:821px){
  .topbar{
    padding-left:0!important;
    padding-right:clamp(18px,2.2vw,32px)!important;
    gap:20px!important;
  }
  .topbar .brand.brand-imip{
    flex:0 0 252px!important;
    width:252px!important;
    min-width:252px!important;
    max-width:252px!important;
    box-sizing:border-box!important;
    padding-left:20px!important;
    padding-right:14px!important;
    margin:0!important;
  }
  .topbar .brand-imip .brand-logo-wrap{
    width:100%!important;
    min-width:0!important;
    justify-content:flex-start!important;
  }
  .topbar .brand-imip .brand-logo{
    width:218px!important;
    max-width:100%!important;
    height:auto!important;
    max-height:51px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
}

/* One consistent disclosure chevron for both expandable menu parents.
   Explicitly clear the old active-tab underline geometry (left/bottom,
   yellow background and full-width sizing) before drawing the arrow. */
.module-subheader .subheader-modules .module-parent-tab::after,
body .module-subheader .subheader-modules .module-parent-tab::after,
.module-subheader .subheader-modules .module-parent-tab.active::after,
body .module-subheader .subheader-modules .module-parent-tab.active::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:auto!important;
  right:15px!important;
  top:50%!important;
  bottom:auto!important;
  width:8px!important;
  height:8px!important;
  min-width:8px!important;
  min-height:8px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-right:2px solid #e3f5ec!important;
  border-bottom:2px solid #e3f5ec!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:.92!important;
  visibility:visible!important;
  transform:translateY(-70%) rotate(45deg)!important;
  transition:transform .18s ease,opacity .18s ease!important;
  pointer-events:none!important;
}

/* Closed: arrow points down. Open: arrow points up.
   The right position is identical in both states. */
.module-subheader .subheader-modules .module-parent-tab[aria-expanded="false"]::after,
body .module-subheader .subheader-modules .module-parent-tab[aria-expanded="false"]::after{
  left:auto!important;
  right:15px!important;
  bottom:auto!important;
  transform:translateY(-70%) rotate(45deg)!important;
}
.module-subheader .subheader-modules .module-parent-tab[aria-expanded="true"]::after,
body .module-subheader .subheader-modules .module-parent-tab[aria-expanded="true"]::after{
  left:auto!important;
  right:15px!important;
  bottom:auto!important;
  transform:translateY(-25%) rotate(225deg)!important;
}
.module-subheader .subheader-modules .module-parent-tab{
  padding-right:38px!important;
}

@media(max-width:820px){
  .topbar .brand.brand-imip{
    flex:0 0 132px!important;
    width:132px!important;
    min-width:112px!important;
    max-width:132px!important;
    padding-left:0!important;
  }
  .topbar .brand-imip .brand-logo{
    width:100%!important;
    max-width:100%!important;
    height:40px!important;
    max-height:40px!important;
  }
}


/* =========================================================
   IMIP V17: DISTRIBUTION CHECKLIST MASTER + WORD EXPORT PAGE
   ========================================================= */
body.distribution-mode #appContainer{
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
.distribution-module{
  width:100%;
  max-width:100%;
  padding:22px 24px 34px;
  box-sizing:border-box;
  color:#183b31;
}
.distribution-module[hidden],.distribution-modal[hidden]{display:none!important}
.distribution-page-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  margin:0 0 20px;
}
.distribution-heading-copy{min-width:0}
.distribution-eyebrow{
  color:#0b9660;font-size:10px;font-weight:850;letter-spacing:1.25px;
  line-height:1.3;margin:0 0 6px;text-transform:uppercase;
}
.distribution-page-header h1{
  margin:0;color:#163d31;font-size:26px;font-weight:820;letter-spacing:-.55px;line-height:1.2;
}
.distribution-page-header p{
  margin:7px 0 0;color:#6c7e78;font-size:13px;line-height:1.55;max-width:760px;
}
.distribution-header-actions{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.distribution-stat-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 16px;
}
.distribution-stat-card{
  min-height:86px;background:linear-gradient(135deg,#fff 0%,#f5faf7 100%);
  border:1px solid #dfebe4;border-radius:13px;box-shadow:0 4px 14px rgba(19,67,47,.045);
  padding:15px 17px;display:flex;align-items:center;gap:13px;box-sizing:border-box;
}
.distribution-stat-icon{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:#e7f5ed;
  color:#087d4a;display:grid;place-items:center;font-size:22px;font-weight:800;
}
.distribution-stat-card span{display:block;color:#70827a;font-size:11px;font-weight:650;margin-bottom:4px}
.distribution-stat-card strong{display:block;color:#183c30;font-size:23px;line-height:1.1;font-weight:820}
.distribution-panel{
  background:#fff;border:1px solid #dfe9e3;border-radius:14px;
  box-shadow:0 5px 20px rgba(19,67,47,.055);overflow:hidden;
}
.distribution-panel-heading{
  padding:18px 19px 14px;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.distribution-panel-heading h2{margin:0;color:#1b4033;font-size:16px;font-weight:780}
.distribution-panel-heading p{margin:5px 0 0;color:#788982;font-size:11px;line-height:1.5}
.distribution-refresh-btn{white-space:nowrap}
.distribution-toolbar{
  padding:0 19px 14px;display:grid;grid-template-columns:minmax(240px,1fr) minmax(200px,280px);gap:12px;
}
.distribution-toolbar label,.distribution-form-field,.distribution-date-grid label{
  display:flex;flex-direction:column;gap:6px;min-width:0;
}
.distribution-toolbar label>span,.distribution-form-field>span,.distribution-date-grid label>span{
  color:#38574b;font-size:11px;font-weight:720;
}
.distribution-toolbar input,.distribution-toolbar select,
.distribution-form-field input,.distribution-date-grid input{
  width:100%;min-width:0;min-height:39px;box-sizing:border-box;border:1px solid #d7e4dc;
  border-radius:9px;padding:8px 11px;background:#fff;color:#25463a;font:inherit;font-size:12px;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.distribution-toolbar input:focus,.distribution-toolbar select:focus,
.distribution-form-field input:focus,.distribution-date-grid input:focus{
  border-color:#53ad7b;box-shadow:0 0 0 3px rgba(8,150,80,.09);
}
.distribution-selection-bar{
  min-height:42px;padding:8px 19px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;background:#f7faf8;border-top:1px solid #edf2ee;border-bottom:1px solid #e5eee8;
}
.distribution-select-all{display:flex;align-items:center;gap:8px;color:#426052;font-size:11px;font-weight:650;cursor:pointer}
.distribution-select-all input,.distribution-row-check{width:15px;height:15px;accent-color:#07834d;cursor:pointer}
.distribution-selected-count{color:#087d4a;font-size:11px;font-weight:760}
.distribution-table-wrap{width:100%;overflow:auto}
.distribution-table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
.distribution-table th{
  background:#f4f8f5;color:#60766b;text-align:left;padding:12px 13px;
  font-size:10px;font-weight:820;letter-spacing:.45px;text-transform:uppercase;
  border-bottom:1px solid #e4ece7;white-space:nowrap;
}
.distribution-table td{
  padding:12px 13px;color:#29483c;font-size:12px;vertical-align:middle;
  border-bottom:1px solid #edf2ee;background:#fff;
}
.distribution-table tbody tr:hover td{background:#fbfdfb}
.distribution-table tbody tr:last-child td{border-bottom:0}
.distribution-check-col{width:42px;text-align:center!important}
.distribution-area-name{font-weight:760;color:#1b4033;min-width:250px}
.distribution-area-sub{display:block;color:#91a099;font-size:10px;margin-top:3px;font-weight:500}
.distribution-pic-cell{white-space:nowrap;font-weight:650}
.distribution-date-chips{display:flex;flex-wrap:wrap;gap:5px;max-width:390px}
.distribution-date-chip{
  display:inline-flex;align-items:center;padding:4px 7px;border-radius:6px;
  background:#edf7f1;color:#24704b;font-size:10px;font-weight:700;white-space:nowrap;
}
.distribution-no-date{color:#9aa7a0;font-size:11px;font-style:italic}
.distribution-row-actions{display:flex;gap:5px;white-space:nowrap}
.distribution-row-actions button{
  border:1px solid #dce8e0;background:#fff;color:#3d6b54;border-radius:7px;
  min-height:30px;padding:5px 8px;font-size:10px;font-weight:700;cursor:pointer;
}
.distribution-row-actions button:hover{background:#eff8f2;border-color:#9cc8ad}
.distribution-row-actions button.danger{color:#c44747;border-color:#f0d9d9}
.distribution-row-actions button.danger:hover{background:#fff4f4}
.distribution-empty{text-align:center!important;padding:34px 16px!important;color:#8a9a92!important}
.distribution-export-bar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:15px 19px;border-top:1px solid #e9f0eb;background:#fbfdfb;
}
.distribution-export-note{display:flex;flex-direction:column;gap:4px;min-width:0}
.distribution-export-note strong{font-size:12px;color:#254a39}
.distribution-export-note span{font-size:10px;color:#7a8d83;line-height:1.45}
.distribution-export-actions{display:flex;gap:9px;align-items:center;flex:0 0 auto}
.distribution-export-actions button:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.2)}
.distribution-notice{
  margin:0 19px 16px;padding:10px 12px;border-radius:8px;font-size:11px;font-weight:650;
  background:#eff8f2;border:1px solid #d6eadc;color:#287448;
}
.distribution-notice.error{background:#fff5f4;border-color:#f2d8d5;color:#a83e36}
.distribution-modal{
  position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;
  padding:20px;box-sizing:border-box;
}
.distribution-modal-backdrop{position:absolute;inset:0;background:rgba(8,30,22,.56);backdrop-filter:blur(3px)}
.distribution-modal-card{
  position:relative;width:min(680px,100%);max-height:min(90vh,900px);overflow:auto;
  background:#fff;border:1px solid #dce9e1;border-radius:16px;
  box-shadow:0 22px 70px rgba(0,0,0,.22);padding:22px;box-sizing:border-box;
}
.distribution-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:19px}
.distribution-modal-header h2{margin:0;color:#173e30;font-size:20px;font-weight:800}
.distribution-icon-close{
  width:34px;height:34px;border:1px solid #e1ebe5;background:#f8fbf9;color:#557266;
  border-radius:9px;font-size:22px;line-height:1;cursor:pointer;
}
.distribution-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.distribution-form-wide{grid-column:1/-1}
.distribution-date-section{margin-top:20px;padding-top:17px;border-top:1px solid #edf2ee}
.distribution-date-section h3{margin:0;color:#2c4d3e;font-size:13px;font-weight:780}
.distribution-date-section p{margin:5px 0 13px;color:#819188;font-size:10px}
.distribution-date-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.distribution-modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}
.distribution-preview-card{width:min(860px,100%)}
.distribution-preview-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;
}
.distribution-preview-meta div{padding:11px 12px;border:1px solid #e5eee8;border-radius:9px;background:#f9fcfa}
.distribution-preview-meta span{display:block;color:#82948b;font-size:10px;margin-bottom:4px}
.distribution-preview-meta strong{color:#2a4a3c;font-size:12px}
.distribution-preview-dates{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.distribution-preview-table-wrap{overflow:auto;border:1px solid #e4ece7;border-radius:9px}
.distribution-preview-table{width:100%;min-width:680px;border-collapse:collapse}
.distribution-preview-table th,.distribution-preview-table td{border:1px solid #e3eae5;padding:7px 8px;font-size:10px}
.distribution-preview-table th{background:#f4f8f5;color:#496354}
.distribution-preview-table td:nth-child(n+3){min-width:32px;height:18px}
.distribution-preview-note{margin:10px 0 0;color:#819188;font-size:10px}
@media(max-width:900px){
  .distribution-module{padding:18px 16px 28px}
  .distribution-stat-grid{gap:9px}
  .distribution-stat-card{padding:12px;min-height:78px}
  .distribution-export-bar{align-items:flex-start;flex-direction:column}
  .distribution-export-actions{width:100%;flex-wrap:wrap}
}
@media(max-width:650px){
  .distribution-page-header{flex-direction:column;align-items:stretch}
  .distribution-header-actions{width:100%}
  .distribution-header-actions button{width:100%}
  .distribution-page-header h1{font-size:21px}
  .distribution-stat-grid{grid-template-columns:1fr;gap:8px}
  .distribution-stat-card{min-height:66px}
  .distribution-toolbar{grid-template-columns:1fr;padding:0 13px 13px}
  .distribution-panel-heading{padding:15px 13px 12px}
  .distribution-selection-bar{padding:8px 13px}
  .distribution-export-bar{padding:13px}
  .distribution-export-actions button{flex:1 1 100%;width:100%}
  .distribution-form-grid{grid-template-columns:1fr}
  .distribution-form-wide{grid-column:auto}
  .distribution-date-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .distribution-modal{padding:9px}
  .distribution-modal-card{padding:16px;border-radius:12px;max-height:94vh}
  .distribution-preview-meta{grid-template-columns:1fr}
}


/* V18: Monthly mail merge controls and generated weekly sheet plan */
.distribution-merge-panel{
  margin:0 19px 17px;padding:17px 17px 14px;border:1px solid #dcebe1;border-radius:12px;
  background:linear-gradient(135deg,#f8fcf9 0%,#eef8f1 100%);
}
.distribution-merge-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.distribution-merge-heading h3{margin:0;color:#1c4434;font-size:15px;font-weight:800}
.distribution-merge-heading p{margin:5px 0 0;color:#71857a;font-size:11px;line-height:1.45}
.distribution-merge-controls{display:grid;grid-template-columns:minmax(160px,210px) minmax(110px,140px);gap:10px;flex:0 0 auto}
.distribution-merge-controls select,.distribution-merge-controls input{min-height:39px;border:1px solid #d4e3d9;border-radius:9px;padding:8px 10px;background:#fff;color:#294b3b;font:inherit;font-size:12px;box-sizing:border-box;width:100%}
.distribution-merge-summary{display:grid;grid-template-columns:minmax(220px,1.1fr) minmax(260px,1.4fr);gap:14px;margin-top:15px}
.distribution-merge-block{min-width:0}
.distribution-merge-label{display:block;color:#547060;font-size:10px;font-weight:800;letter-spacing:.35px;text-transform:uppercase;margin-bottom:7px}
.distribution-merge-identities{display:flex;flex-direction:column;gap:6px;max-height:150px;overflow:auto}
.distribution-identity-chip{display:flex;flex-direction:column;gap:3px;padding:8px 10px;background:#fff;border:1px solid #e0ece4;border-radius:8px}
.distribution-identity-chip strong{color:#244b38;font-size:11px;line-height:1.35}
.distribution-identity-chip span{color:#75877d;font-size:10px}
.distribution-merge-plan{display:flex;flex-wrap:wrap;gap:6px}
.distribution-merge-plan .distribution-date-chip{background:#fff;border:1px solid #dcebe1;color:#2e704a;padding:6px 8px}
.distribution-merge-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-top:1px solid #dcebe1;margin-top:13px;padding-top:11px}
.distribution-merge-footer strong{color:#17653c;font-size:11px;line-height:1.5}
.distribution-merge-footer span{max-width:520px;color:#75877d;font-size:10px;line-height:1.5;text-align:right}
.distribution-master-help{display:flex;align-items:flex-start;gap:8px;margin-top:17px;padding:11px 12px;border-radius:9px;background:#f1f8f3;border:1px solid #e0eee4;color:#698074;font-size:10px;line-height:1.5}
.distribution-master-help-icon{color:#16834b;font-size:14px;font-weight:800}
.distribution-preview-period{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px;color:#2c513e;font-size:12px}
.distribution-preview-period span{color:#71857a;font-size:10px}
@media(max-width:760px){
  .distribution-merge-heading{flex-direction:column}
  .distribution-merge-controls{width:100%;grid-template-columns:1fr 120px}
  .distribution-merge-summary{grid-template-columns:1fr}
  .distribution-merge-footer{flex-direction:column}
  .distribution-merge-footer span{text-align:left}
  .distribution-merge-panel{margin:0 13px 14px;padding:13px}
}


/* V19: Compact distribution filters and direct-print actions */
.distribution-toolbar{
  grid-template-columns:minmax(220px,1.35fr) minmax(190px,1fr) minmax(165px,.85fr) minmax(125px,.58fr);
  align-items:end;
}
.distribution-toolbar .distribution-filter-field{min-width:0}
.distribution-toolbar .distribution-filter-field select,
.distribution-toolbar .distribution-filter-field input{width:100%;min-width:0}
.distribution-export-bar{
  align-items:center;
  flex-direction:row;
}
.distribution-export-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.distribution-export-actions button{min-width:138px}
@media(max-width:980px){
  .distribution-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .distribution-export-bar{align-items:center;flex-direction:row}
}
@media(max-width:650px){
  .distribution-toolbar{grid-template-columns:1fr;padding:0 13px 13px}
  .distribution-export-bar{align-items:stretch;flex-direction:column;padding:13px}
  .distribution-export-actions{width:100%;flex-direction:column}
  .distribution-export-actions button{width:100%;min-width:0;flex:1 1 auto}
}


/* V21: Manual employee certification type management */
.employee-cert-add-tools{display:grid;gap:6px;margin-top:10px}
.employee-cert-add-row{display:flex;align-items:center;gap:8px;min-width:0}
.employee-cert-add-row input{flex:1 1 auto;min-width:0;min-height:38px;padding:8px 11px;border:1px solid #d8e4db;border-radius:8px;background:#fff;color:#183b2b;font-size:12px}
.employee-cert-add-row input:focus{outline:2px solid rgba(20,132,83,.16);border-color:#168653}
.employee-cert-add-row button{flex:0 0 auto;white-space:nowrap}
.employee-cert-add-feedback{min-height:0;color:#167447;font-size:11px;line-height:1.4}
.employee-cert-add-feedback:empty{display:none}
.employee-cert-add-feedback.is-error{color:#b42318}
@media(max-width:520px){
  .employee-cert-add-row{align-items:stretch;flex-direction:column}
  .employee-cert-add-row button{width:100%}
}


/* V22: Super Admin-only distribution Word template manager */
.distribution-template-panel{
  margin:0 0 14px;
  padding:18px;
  border:1px solid #d9e8df;
  border-radius:14px;
  background:linear-gradient(135deg,#f5fbf7 0%,#f4f8fc 100%);
  box-shadow:0 4px 14px rgba(20,65,45,.05);
}
.distribution-template-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:13px;
  border-bottom:1px solid #dce9e1;
}
.distribution-template-heading h2{
  margin:0 0 5px;
  color:#123b2b;
  font-size:15px;
  font-weight:800;
}
.distribution-template-heading p{
  margin:0;
  max-width:760px;
  color:#657b70;
  font-size:12px;
  line-height:1.6;
}
.distribution-template-current{
  margin-top:8px;
  color:#087548;
  font-size:11px;
  font-weight:700;
  overflow-wrap:anywhere;
}
.distribution-template-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding-top:14px;
}
.distribution-template-field{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  padding:14px;
  border:1px solid #e0eae4;
  border-radius:10px;
  background:#fff;
}
.distribution-template-field label{
  color:#234b38;
  font-size:12px;
  font-weight:800;
}
.distribution-template-field input[type=file],
.distribution-template-field select{
  width:100%;
  min-width:0;
  min-height:38px;
  padding:7px 9px;
  border:1px solid #d7e3db;
  border-radius:8px;
  background:#fff;
  color:#244333;
  font-size:12px;
}
.distribution-template-field small{
  color:#718278;
  font-size:10px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.distribution-template-field button{
  min-height:36px;
}
@media(max-width:760px){
  .distribution-template-heading{flex-direction:column;align-items:stretch}
  .distribution-template-grid{grid-template-columns:1fr}
}


/* V23: Crane & Gantry inspection page */
.crane-module{width:100%;max-width:100%;padding:22px 24px 34px;box-sizing:border-box;color:#183b31}
.crane-module[hidden],.crane-modal[hidden]{display:none!important}
.crane-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 18px}
.crane-heading-copy{min-width:0}
.crane-eyebrow{display:block;color:#0b9660;font-size:10px;font-weight:850;letter-spacing:1.2px;margin:0 0 6px}
.crane-page-header h1{margin:0;color:#163d31;font-size:26px;font-weight:820;letter-spacing:-.5px;line-height:1.2}
.crane-page-header p{margin:7px 0 0;color:#6c7e78;font-size:13px;line-height:1.55;max-width:760px}
.crane-header-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.crane-notice{margin:0 0 14px;padding:10px 13px;border-radius:9px;font-size:11px;font-weight:650;background:#eff8f2;border:1px solid #d6eadc;color:#287448}
.crane-notice.is-error{background:#fff5f4;border-color:#f2d8d5;color:#a83e36}
.crane-stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 15px}
.crane-stat-card{min-width:0;min-height:78px;padding:13px 14px;display:flex;align-items:center;gap:11px;border:1px solid #dfeae3;border-radius:13px;background:linear-gradient(135deg,#fff 0%,#f5faf7 100%);box-shadow:0 4px 14px rgba(19,67,47,.045)}
.crane-stat-icon{width:39px;height:39px;flex:0 0 39px;display:grid;place-items:center;border-radius:11px;background:#e7f5ed;color:#087d4a;font-size:20px;font-weight:800}
.crane-stat-icon.crane-stat-crane{background:#eaf2ff;color:#2874c8}
.crane-stat-icon.crane-stat-gantry{background:#f0edff;color:#6b57b4}
.crane-stat-card small{display:block;margin-bottom:4px;color:#70827a;font-size:10px;font-weight:680}
.crane-stat-card strong{display:block;color:#183c30;font-size:22px;line-height:1.1;font-weight:830}
.crane-panel{margin:0 0 15px;background:#fff;border:1px solid #dfe9e3;border-radius:14px;box-shadow:0 5px 20px rgba(19,67,47,.055);overflow:hidden}
.crane-filter-grid{display:grid;grid-template-columns:minmax(220px,1.7fr) repeat(2,minmax(145px,1fr)) minmax(125px,.85fr) minmax(105px,.7fr);gap:10px;align-items:end;padding:16px}
.crane-filter-field{display:flex;min-width:0;flex-direction:column;gap:6px}
.crane-filter-field>span{color:#38574b;font-size:10px;font-weight:760}
.crane-filter-field input,.crane-filter-field select,.crane-form-grid input,.crane-form-grid select,.crane-template-field input[type=file],.crane-template-field select{
  width:100%;min-width:0;min-height:38px;box-sizing:border-box;border:1px solid #d7e4dc;border-radius:9px;padding:8px 10px;background:#fff;color:#25463a;font:inherit;font-size:11px;outline:none;transition:border-color .15s,box-shadow .15s
}
.crane-filter-field input:focus,.crane-filter-field select:focus,.crane-form-grid input:focus,.crane-form-grid select:focus{border-color:#53ad7b;box-shadow:0 0 0 3px rgba(8,150,80,.09)}
.crane-reset-btn{min-height:38px;white-space:nowrap}
.crane-list-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 18px 13px}
.crane-list-heading h2{margin:0;color:#1b4033;font-size:15px;font-weight:800}
.crane-list-heading p{margin:5px 0 0;color:#788982;font-size:10px;line-height:1.5}
.crane-list-tools{display:flex;gap:8px;align-items:center}
.crane-table-wrap{width:100%;overflow:auto}
.crane-table{width:100%;min-width:1040px;border-collapse:separate;border-spacing:0}
.crane-table th{background:#f4f8f5;color:#60766b;text-align:left;padding:11px 12px;font-size:9px;font-weight:820;letter-spacing:.4px;text-transform:uppercase;border-top:1px solid #edf2ee;border-bottom:1px solid #e4ece7;white-space:nowrap}
.crane-table td{padding:11px 12px;color:#29483c;font-size:11px;vertical-align:middle;border-bottom:1px solid #edf2ee;background:#fff}
.crane-table tbody tr:hover td{background:#fbfdfb}
.crane-table tbody tr:last-child td{border-bottom:0}
.crane-check-col{width:42px;text-align:center!important}
.crane-check-col input{width:15px;height:15px;accent-color:#07834d;cursor:pointer}
.crane-type-pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:6px;background:#eaf2ff;color:#286cb4;font-size:9px;font-weight:800;letter-spacing:.2px}
.crane-type-pill.gantry{background:#f0edff;color:#6652aa}
.crane-device-code{font-weight:800;color:#193f31}
.crane-date-list{display:flex;flex-wrap:wrap;gap:4px;max-width:320px}
.crane-date-chip{display:inline-flex;align-items:center;padding:4px 6px;border-radius:6px;background:#edf7f1;color:#24704b;font-size:9px;font-weight:700;white-space:nowrap}
.crane-row-actions{display:flex;gap:5px;white-space:nowrap}
.crane-action-btn{border:1px solid #dce8e0;background:#fff;color:#3d6b54;border-radius:7px;min-width:29px;min-height:29px;padding:4px 7px;font-size:12px;font-weight:750;cursor:pointer}
.crane-action-btn:hover{background:#eff8f2;border-color:#9cc8ad}
.crane-action-btn.danger{color:#c44747;border-color:#f0d9d9}
.crane-action-btn.danger:hover{background:#fff4f4}
.crane-empty{text-align:center!important;padding:34px 16px!important;color:#8a9a92!important}
.crane-list-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;border-top:1px solid #e9f0eb;background:#fbfdfb}
.crane-selection-status{display:flex;flex-direction:column;gap:4px;min-width:0}
.crane-selection-status strong{font-size:11px;color:#254a39}
.crane-selection-status span{font-size:10px;color:#7a8d83;line-height:1.45}
.crane-output-actions{display:flex;gap:9px;align-items:center;flex:0 0 auto}
.crane-output-actions button:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.2)}
.crane-template-panel{margin:0 0 15px;padding:17px;border:1px solid #d9e8df;border-radius:14px;background:linear-gradient(135deg,#f5fbf7 0%,#f4f8fc 100%);box-shadow:0 4px 14px rgba(20,65,45,.05)}
.crane-template-panel[hidden]{display:none!important}
.crane-template-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:13px;border-bottom:1px solid #dce9e1}
.crane-template-heading h2{margin:0 0 5px;color:#123b2b;font-size:15px;font-weight:800}
.crane-template-heading p{margin:0;max-width:760px;color:#657b70;font-size:11px;line-height:1.6}
.crane-template-current{margin-top:8px;color:#087548;font-size:10px;font-weight:700;overflow-wrap:anywhere}
.crane-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding-top:13px}
.crane-template-field{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:8px;padding:13px;border:1px solid #e0eae4;border-radius:10px;background:#fff}
.crane-template-field label{color:#234b38;font-size:11px;font-weight:800}
.crane-template-field small{color:#718278;font-size:10px;line-height:1.5;overflow-wrap:anywhere}
.crane-modal{position:fixed;inset:0;z-index:1600;display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box}
.crane-modal-backdrop{position:absolute;inset:0;background:rgba(8,30,22,.56);backdrop-filter:blur(3px)}
.crane-modal-card{position:relative;width:min(700px,100%);max-height:min(90vh,900px);overflow:auto;background:#fff;border:1px solid #dce9e1;border-radius:16px;box-shadow:0 22px 70px rgba(0,0,0,.22);padding:21px;box-sizing:border-box}
.crane-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.crane-modal-header h2{margin:0;color:#173e30;font-size:19px;font-weight:800}
.crane-modal-x{width:34px;height:34px;border:1px solid #e1ebe5;background:#f8fbf9;color:#557266;border-radius:9px;font-size:22px;line-height:1;cursor:pointer}
.crane-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.crane-form-grid label{display:flex;min-width:0;flex-direction:column;gap:6px}
.crane-form-grid label>span{color:#38574b;font-size:11px;font-weight:720}
.crane-form-wide{grid-column:1/-1;padding-top:7px;border-top:1px solid #edf2ee}
.crane-form-wide strong{display:block;color:#2c4d3e;font-size:12px}
.crane-form-wide p{margin:5px 0 0;color:#819188;font-size:10px;line-height:1.5}
.crane-modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.crane-preview-card{width:min(1050px,100%)}
.crane-preview-content{min-width:0}
.crane-preview-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:13px}
.crane-preview-meta div{padding:10px 11px;border:1px solid #e5eee8;border-radius:9px;background:#f9fcfa;min-width:0}
.crane-preview-meta span{display:block;color:#82948b;font-size:9px;margin-bottom:4px}
.crane-preview-meta strong{display:block;color:#2a4a3c;font-size:11px;overflow-wrap:anywhere}
.crane-preview-table-wrap{overflow:auto;border:1px solid #e4ece7;border-radius:9px}
.crane-preview-table{width:100%;min-width:850px;border-collapse:collapse;table-layout:fixed}
.crane-preview-table th,.crane-preview-table td{border:1px solid #e3eae5;padding:6px 5px;font-size:9px;text-align:center}
.crane-preview-table th{background:#f4f8f5;color:#496354}
.crane-preview-table td:nth-child(2){text-align:left}
.crane-preview-table td:nth-child(n+3){min-width:36px;height:25px}
.crane-preview-group th{font-weight:750}
@media(max-width:1180px){
 .crane-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .crane-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .crane-filter-search{grid-column:span 2}
}
@media(max-width:760px){
 .crane-module{padding:16px 12px 25px}
 .crane-page-header{flex-direction:column;align-items:stretch}
 .crane-header-actions{flex-wrap:wrap}
 .crane-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .crane-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:13px}
 .crane-filter-search{grid-column:1/-1}
 .crane-list-heading{align-items:flex-start;flex-direction:column}
 .crane-list-footer{align-items:stretch;flex-direction:column}
 .crane-output-actions{display:grid;grid-template-columns:1fr 1fr}
 .crane-template-heading{flex-direction:column;align-items:stretch}
 .crane-template-grid{grid-template-columns:1fr}
 .crane-form-grid{grid-template-columns:1fr}
 .crane-preview-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:440px){
 .crane-stats-grid{grid-template-columns:1fr 1fr}
 .crane-stat-card{padding:10px;gap:8px}
 .crane-stat-icon{width:33px;height:33px;flex-basis:33px}
 .crane-output-actions{grid-template-columns:1fr}
 .crane-preview-meta{grid-template-columns:1fr}
}

body.crane-mode #appContainer{height:auto!important;max-height:none!important;overflow:visible!important}


/* GKEB UI consistency fixes — keep compact date filters and page-size labels readable. */
.leave-entries-control,
.leave-entries-control > span,
.leave-entries-control > select,
.welding-page-size,
.welding-page-size > label,
.welding-page-size > select,
body.employee-mode #employeeModule #employeeAccountsView .employee-accounts-footer label,
body.employee-mode #employeeModule #employeeAccountsView .employee-accounts-footer label > span,
body.employee-mode #employeeModule #employeeAccountsView .employee-accounts-footer label > select {
  flex-shrink: 0;
}
.leave-entries-control {
  flex: 0 0 auto;
  min-width: max-content;
}
.leave-entries-control > span {
  display: inline-block;
  white-space: nowrap;
}
.leave-entries-control > select {
  flex: 0 0 auto;
  min-width: 60px;
}
.leave-table-footer {
  flex-wrap: wrap;
}
.leave-pagination {
  flex: 0 1 auto;
  flex-wrap: wrap;
}
.welding-page-size {
  flex: 0 0 auto;
  min-width: max-content;
}
body.employee-mode #employeeModule #employeeAccountsView .employee-accounts-footer label {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}
body.employee-mode #employeeModule #employeeAccountsView .employee-accounts-footer select {
  flex: 0 0 80px;
  min-width: 80px;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-date-field {
  flex: 0 0 auto;
  min-width: max-content;
}
body.employee-mode #employeeModule #employeeDashboardView .emp-upcoming-leave-date-field input[type="date"] {
  box-sizing: border-box;
  flex: 0 0 145px;
  width: 145px;
  min-width: 145px;
}
@media (max-width: 520px) {
  .leave-table-footer {
    align-items: flex-start;
  }
  .leave-entries-control {
    max-width: 100%;
  }
  .leave-pagination {
    max-width: 100%;
  }
}

/* GKEB-DESKTOP-AUTOFILL-V32
   Menyamakan warna autofill browser dengan field login desktop.
   Tidak menonaktifkan autocomplete dan tidak mengubah autentikasi.
*/
@media (min-width: 601px) {
  #authGate .auth-input-wrap input:-webkit-autofill,
  #authGate .auth-input-wrap input:-webkit-autofill:hover,
  #authGate .auth-input-wrap input:-webkit-autofill:focus,
  #authGate .auth-input-wrap input:-webkit-autofill:active,
  #authGate .auth-input-wrap input:autofill {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.045) inset !important;
    box-shadow: 0 0 0 1000px rgba(255,255,255,.045) inset !important;
    transition: background-color 99999s ease-out 0s !important;
    border-radius: 0 !important;
  }

  #authGate .auth-input-wrap input:-moz-autofill {
    color: #fff !important;
    caret-color: #fff !important;
    background-color: transparent !important;
    box-shadow: 0 0 0 1000px rgba(255,255,255,.045) inset !important;
  }
}

/* GKEB-DESKTOP-AUTOFILL-UNIFIED-V33
   Menyatukan permukaan autofill dengan seluruh bidang input, termasuk area ikon.
   Autofill/rekomendasi browser tetap aktif; hanya tampilan visual yang diselaraskan.
*/
@media (min-width: 601px) {
  /* Chrome / Edge: latar wrapper mengikuti warna field normal. */
  #authGate .auth-input-wrap:has(input:-webkit-autofill) {
    --gkeb-autofill-surface: rgba(255,255,255,.045);
    background: var(--gkeb-autofill-surface) !important;
  }
  #authGate .auth-input-wrap:has(input:-webkit-autofill):focus-within {
    --gkeb-autofill-surface: rgba(255,255,255,.095);
    background: var(--gkeb-autofill-surface) !important;
  }

  /* Chromium autofill paint disamakan dengan wrapper agar tidak muncul blok berbeda. */
  #authGate .auth-input-wrap input:-webkit-autofill,
  #authGate .auth-input-wrap input:-webkit-autofill:hover,
  #authGate .auth-input-wrap input:-webkit-autofill:focus,
  #authGate .auth-input-wrap input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 1000px var(--gkeb-autofill-surface, rgba(255,255,255,.045)) inset !important;
    box-shadow: 0 0 0 1000px var(--gkeb-autofill-surface, rgba(255,255,255,.045)) inset !important;
    border-radius: 0 !important;
    transition: background-color 99999s ease-out 0s !important;
  }

  /* Fallback untuk browser yang menerapkan pseudo-class standar :autofill. */
  #authGate .auth-input-wrap:has(input:autofill) {
    --gkeb-autofill-surface: rgba(255,255,255,.045);
    background: var(--gkeb-autofill-surface) !important;
  }
  #authGate .auth-input-wrap:has(input:autofill):focus-within {
    --gkeb-autofill-surface: rgba(255,255,255,.095);
    background: var(--gkeb-autofill-surface) !important;
  }
  #authGate .auth-input-wrap input:autofill {
    color: #fff !important;
    caret-color: #fff !important;
    background-color: transparent !important;
    box-shadow: 0 0 0 1000px var(--gkeb-autofill-surface, rgba(255,255,255,.045)) inset !important;
    border-radius: 0 !important;
  }

  /* Firefox fallback. */
  #authGate .auth-input-wrap:has(input:-moz-autofill) {
    --gkeb-autofill-surface: rgba(255,255,255,.045);
    background: var(--gkeb-autofill-surface) !important;
  }
  #authGate .auth-input-wrap:has(input:-moz-autofill):focus-within {
    --gkeb-autofill-surface: rgba(255,255,255,.095);
    background: var(--gkeb-autofill-surface) !important;
  }
  #authGate .auth-input-wrap input:-moz-autofill {
    color: #fff !important;
    caret-color: #fff !important;
    background-color: transparent !important;
    box-shadow: 0 0 0 1000px var(--gkeb-autofill-surface, rgba(255,255,255,.045)) inset !important;
    border-radius: 0 !important;
  }
}