:root {
  /* Padanan web dari palet Kementerian Kesehatan yang diberikan pengguna. */
  --primary: #03B8A4;
  --primary-dark: #087D72;
  --primary-medium: #52CDBE;
  --secondary: #D6DF21;
  --dark: #576765;
  --ink: #354443;
  --muted: #6D7B79;
  --line: #DDE7E5;
  --soft: #F4F9F8;
  --white: #FFFFFF;
  --danger: #C83E4D;
  --warning: #D98E04;
  --success: #278C5B;
  --shadow: 0 12px 34px rgba(87, 103, 101, .12);
  --radius: 16px;
  --font-primary: "VAG Rounded Bold", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --font-secondary: "Segoe UI", Tahoma, Arial, sans-serif;
  font-family: var(--font-secondary);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--soft); color: var(--ink); }
body { font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font-family: var(--font-secondary); font-size: inherit; }
h1, h2, h3, h4, .button, .eyebrow, .nav-item, .badge, .current-stage-badge { font-family: var(--font-primary); }
button { cursor: pointer; }
.hidden { display: none !important; }

.login-view { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, 520px) 1fr; background: #fff; }
.login-panel { padding: clamp(32px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.brand-block-login { margin-bottom: 42px; }
.brand-logo { display: block; width: min(100%, 410px); height: auto; max-height: 125px; object-fit: contain; object-position: left center; }
.brand-fallback { display: inline-flex; align-items: center; gap: 14px; color: var(--primary); }
.brand-symbol { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-size: 30px; font-weight: 700; }
.brand-fallback strong, .brand-fallback small { display: block; }
.brand-fallback strong { font-size: 20px; }
.brand-fallback small { color: var(--muted); letter-spacing: .02em; }
.login-heading h1 { margin: 4px 0 10px; font-size: clamp(30px, 4vw, 45px); line-height: 1.1; color: var(--dark); }
.login-heading p { margin: 0 0 30px; color: var(--muted); max-width: 460px; }
.eyebrow { color: var(--primary-dark); text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.login-note { margin-top: 22px; padding: 12px 14px; background: #F0F9F7; border-left: 4px solid var(--secondary); color: #476269; border-radius: 8px; font-size: 12px; }
.login-visual { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 8vw; background: linear-gradient(145deg, rgba(3,184,164,.96), rgba(87,103,101,.98)); color: #fff; }
.login-visual::before, .login-visual::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); }
.login-visual::before { width: 520px; height: 520px; top: -180px; right: -120px; }
.login-visual::after { width: 330px; height: 330px; top: -30px; right: -20px; background: rgba(141,198,63,.13); }
.visual-card { position: relative; z-index: 1; max-width: 720px; }
.visual-card h2 { font-size: clamp(34px, 5vw, 58px); line-height: 1.05; margin: 26px 0 16px; }
.visual-card p { font-size: 17px; color: rgba(255,255,255,.78); max-width: 640px; }
.visual-flow { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.visual-flow span { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.visual-flow i { font-style: normal; color: var(--secondary); }

.stack-form { display: grid; gap: 18px; }
label > span { display: block; font-size: 12px; font-weight: 700; margin-bottom: 7px; color: #38545C; }
input, select, textarea { width: 100%; border: 1px solid #C9D9DD; border-radius: 10px; padding: 11px 12px; background: #fff; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,169,157,.13); }
input:disabled, select:disabled, textarea:disabled { background: #EDF3F4; color: #60747A; cursor: not-allowed; }
textarea { min-height: 90px; resize: vertical; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 48px; }
.icon-button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); }
.button { border: 0; border-radius: 10px; padding: 10px 15px; font-weight: 700; transition: transform .1s, background .2s, border-color .2s; }
.button:active { transform: translateY(1px); }
.button-primary { color: #fff; background: var(--primary); box-shadow: 0 5px 14px rgba(3,184,164,.20); }
.button-primary:hover { background: var(--primary-dark); }
.button-secondary { color: #45514F; background: rgba(214, 223, 33, .25); border: 1px solid rgba(172, 181, 20, .55); }
.button-secondary:hover { background: rgba(214, 223, 33, .42); }
.button-outline { color: var(--dark); background: #fff; border: 1px solid #BDD0D4; }
.button-outline:hover { border-color: var(--primary); color: var(--primary-dark); }
.button-ghost { background: transparent; color: var(--dark); }
.button-ghost:hover { background: #EAF3F3; }
.button-danger { background: #FFF0F1; color: var(--danger); }
.button-large { padding: 13px 18px; }
.button-small { padding: 7px 10px; font-size: 12px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 70px 1fr; }
.topbar { grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; height: 70px; display: flex; align-items: center; gap: 18px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--line); }
.menu-toggle { display: none; border: 0; background: transparent; font-size: 22px; color: var(--dark); }
.topbar-brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.topbar-logo { display: block; width: 210px; height: 58px; object-fit: contain; object-position: left center; flex: 0 0 auto; }
.topbar-brand > div:last-child { display: none; }
.topbar-brand strong, .topbar-brand small { display: block; }
.topbar-brand small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 460px; }
.mini-brand { display: flex; align-items: center; gap: 8px; color: var(--primary); }
.mini-brand span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 10px; background: transparent; border: 0; padding: 6px 9px; border-radius: 12px; text-align: left; }
.user-chip:hover { background: var(--soft); }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; background: #DDF4F1; color: var(--primary-dark); font-weight: 800; border-radius: 12px; }
.user-chip-text strong, .user-chip-text small { display: block; }
.user-chip-text small { color: var(--muted); }
.sidebar { grid-row: 2; background: var(--dark); color: #fff; padding: 20px 14px; position: sticky; top: 70px; height: calc(100vh - 70px); display: flex; flex-direction: column; z-index: 20; }
.main-nav { display: grid; gap: 6px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; color: rgba(255,255,255,.77); background: transparent; border-radius: 10px; padding: 11px 12px; text-align: left; font-weight: 650; }
.nav-item span { width: 20px; text-align: center; color: var(--secondary); font-size: 17px; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: var(--primary); color: #fff; }
.nav-item.active span { color: #fff; }
.sidebar-footer { margin-top: auto; color: rgba(255,255,255,.52); padding: 12px; }
.main-content { min-width: 0; padding: 28px; }
.page { display: none; }
.page.active-page { display: block; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-header h2 { margin: 3px 0 5px; font-size: 27px; color: var(--dark); }
.page-header p { margin: 0; color: var(--muted); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.metric-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 0 5px 20px rgba(23,75,87,.05); }
.metric-card::after { content: ''; position: absolute; width: 90px; height: 90px; right: -35px; top: -35px; border-radius: 50%; background: rgba(0,169,157,.08); }
.metric-card small { color: var(--muted); font-weight: 700; }
.metric-card strong { display: block; font-size: 32px; color: var(--dark); margin: 8px 0 2px; }
.metric-card span { color: var(--muted); font-size: 12px; }
.metric-card.success { border-top: 4px solid var(--success); }
.metric-card.warning { border-top: 4px solid var(--warning); }
.metric-card.primary { border-top: 4px solid var(--primary); }
.metric-card.dark { border-top: 4px solid var(--dark); }
.category-dashboard-section { margin-bottom: 18px; }
.section-inline-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 11px; }
.section-inline-header h3 { margin: 0 0 3px; color: var(--dark); font-size: 17px; }
.section-inline-header p { margin: 0; color: var(--muted); font-size: 12px; }
.category-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.category-metric-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 104px; padding: 18px 20px; border: 1px solid var(--line); border-left: 6px solid #95A5A9; border-radius: var(--radius); background: #fff; box-shadow: 0 5px 20px rgba(23,75,87,.05); }
.category-metric-card::after { content: ''; position: absolute; right: -25px; bottom: -42px; width: 105px; height: 105px; border-radius: 50%; background: rgba(149,165,169,.10); }
.category-metric-card > div, .category-metric-card > strong { position: relative; z-index: 1; }
.category-metric-card span { display: block; color: var(--dark); font-size: 15px; font-weight: 850; }
.category-metric-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.category-metric-card strong { flex: none; color: var(--dark); font-size: 34px; line-height: 1; }
.category-metric-card.category-ringan { border-left-color: var(--success); background: linear-gradient(110deg, #FFFFFF 0%, #F0FAF5 100%); }
.category-metric-card.category-ringan::after { background: rgba(39,140,91,.11); }
.category-metric-card.category-sedang { border-left-color: var(--warning); background: linear-gradient(110deg, #FFFFFF 0%, #FFF8E9 100%); }
.category-metric-card.category-sedang::after { background: rgba(217,142,4,.11); }
.category-metric-card.category-berat { border-left-color: var(--danger); background: linear-gradient(110deg, #FFFFFF 0%, #FFF2F3 100%); }
.category-metric-card.category-berat::after { background: rgba(200,62,77,.10); }
.category-metric-card.category-unclassified { border-left-color: #87999E; background: linear-gradient(110deg, #FFFFFF 0%, #F3F6F6 100%); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.dashboard-main-column { display: grid; gap: 18px; min-width: 0; }
.dashboard-status-panel { min-width: 0; }
.dashboard-page-header { align-items: flex-end; }
.dashboard-toolbar { display: flex; align-items: flex-end; gap: 10px; }
.dashboard-year-field { min-width: 180px; }
.dashboard-year-field > span { margin-bottom: 5px; }
.dashboard-year-field select { min-height: 42px; }
.dashboard-analysis-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
.distribution-list { display: grid; gap: 11px; padding: 18px 20px 20px; }
.distribution-row { display: grid; grid-template-columns: minmax(125px, 1fr) minmax(120px, 2fr) 48px; gap: 12px; align-items: center; padding: 5px 7px; border-radius: 9px; }
.distribution-row.active { background: #EAF7F5; }
.distribution-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #38545C; font-size: 12px; font-weight: 750; }
.distribution-track { height: 9px; overflow: hidden; border-radius: 999px; background: #E8F0F1; }
.distribution-track span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--secondary)); }
.distribution-row strong { text-align: right; color: var(--dark); }
.dashboard-matrix-panel { margin-bottom: 18px; }
.dashboard-matrix-wrap { width: 100%; overflow: auto; }
.dashboard-matrix-table { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; }
.dashboard-matrix-table th, .dashboard-matrix-table td { padding: 11px 12px; border-right: 1px solid #E5EDEE; border-bottom: 1px solid #E5EDEE; text-align: center; vertical-align: middle; }
.dashboard-matrix-table thead th { position: sticky; top: 0; z-index: 2; min-width: 145px; max-width: 220px; background: #F2F8F8; color: #38545C; font-size: 11px; line-height: 1.25; }
.dashboard-matrix-table thead th span { display: block; max-height: 56px; overflow: hidden; }
.dashboard-matrix-table .matrix-unit { position: sticky; left: 0; z-index: 1; min-width: 260px; max-width: 320px; text-align: left; background: #FAFCFC; color: var(--dark); }
.dashboard-matrix-table thead .matrix-unit { z-index: 3; background: #EAF4F4; }
.dashboard-matrix-table tfoot .matrix-unit { z-index: 2; background: #EAF4F4; }
.dashboard-matrix-table tbody tr:hover td, .dashboard-matrix-table tbody tr:hover .matrix-unit { background: #F8FBFB; }
.dashboard-matrix-table .matrix-number { color: #72858A; }
.dashboard-matrix-table .matrix-number.has-data { background: #EAF7F5; color: var(--primary-dark); font-weight: 850; }
.dashboard-matrix-table .matrix-total, .dashboard-matrix-table tfoot td, .dashboard-matrix-table tfoot th { background: #F3F7F7; color: var(--dark); font-weight: 850; }
.dashboard-matrix-table .matrix-grand-total { background: var(--dark); color: #fff; font-weight: 900; }
.category-matrix-table { min-width: 720px; }
.category-matrix-table .matrix-category-head { min-width: 135px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.category-matrix-table .category-head-ringan { background: #EAF7F0; color: #26794C; }
.category-matrix-table .category-head-sedang { background: #FFF3DA; color: #9A6500; }
.category-matrix-table .category-head-berat { background: #FFE9EB; color: #A82F3D; }
.category-matrix-table .category-head-belum_dikategorikan { background: #EEF2F3; color: #667A80; }
.category-matrix-table .category-cell-ringan.has-data { background: #F0FAF5; color: #26794C; }
.category-matrix-table .category-cell-sedang.has-data { background: #FFF8E9; color: #9A6500; }
.category-matrix-table .category-cell-berat.has-data { background: #FFF1F2; color: #A82F3D; }
.category-matrix-table .category-cell-belum_dikategorikan.has-data { background: #F2F5F6; color: #5F7379; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 5px 20px rgba(23,75,87,.05); overflow: hidden; }
.panel-wide { grid-row: span 2; }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 20px; border-bottom: 1px solid #EDF2F3; }
.panel-header h3 { margin: 0 0 4px; color: var(--dark); }
.panel-header p { margin: 0; color: var(--muted); font-size: 12px; }
.stage-flow { padding: 20px; display: grid; gap: 12px; }
.stage-row { display: grid; grid-template-columns: minmax(210px, .9fr) 2fr 48px; gap: 12px; align-items: center; }
.stage-row-label { font-size: 12px; font-weight: 700; color: #38545C; }
.progress-track { height: 9px; background: #E8F0F1; border-radius: 999px; overflow: hidden; }
.progress-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: inherit; min-width: 0; }
.stage-count { font-weight: 800; color: var(--dark); text-align: right; }
.summary-list, .compact-list { padding: 9px 20px 18px; }
.summary-item, .compact-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EEF3F3; }
.summary-item:last-child, .compact-item:last-child { border-bottom: 0; }
.summary-item span, .compact-item small { color: var(--muted); }
.summary-item strong { color: var(--dark); }
.compact-item { align-items: center; }
.compact-item > div { min-width: 0; }
.compact-item strong, .compact-item small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-item button { flex: none; }
.recent-cases-horizontal { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.recent-cases-horizontal .compact-item { min-width: 0; padding: 13px 14px; border: 1px solid #E2EBEC; border-radius: 12px; background: #FBFDFD; }
.recent-cases-horizontal .compact-item:last-child { border-bottom: 1px solid #E2EBEC; }
.recent-cases-horizontal .empty-state { grid-column: 1 / -1; }


.filter-bar { display: grid; grid-template-columns: minmax(250px, 1.8fr) repeat(6, minmax(135px, 1fr)) auto; gap: 10px; margin-bottom: 14px; align-items: stretch; }
.scope-chip { display: flex; flex-direction: column; justify-content: center; min-width: 180px; padding: 8px 12px; border: 1px solid #B9DCDC; border-radius: 10px; background: #EAF7F5; color: var(--primary-dark); }
.scope-chip span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.scope-chip strong { margin-top: 2px; font-size: 12px; line-height: 1.25; }
.search-field { position: relative; }
.search-field > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); margin: 0; color: var(--muted); font-size: 18px; }
.search-field input { padding-left: 38px; }
.table-panel { overflow: hidden; }
.table-wrap { width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1380px; }
.data-table th { background: #F5F9F9; color: #486169; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.data-table td { padding: 13px 14px; border-bottom: 1px solid #EDF2F3; vertical-align: top; }
.data-table tbody tr:hover { background: #FBFDFD; }
.data-table td strong, .data-table td small { display: block; }
.data-table td small { color: var(--muted); margin-top: 2px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #E8F5F3; color: var(--primary-dark); }
.badge-success { background: #E7F6EE; color: var(--success); }
.badge-warning { background: #FFF4DC; color: #A96E00; }
.badge-danger { background: #FFE8EA; color: var(--danger); }
.case-classification { display: grid; gap: 6px; min-width: 220px; }
.classification-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.asn-badge, .category-badge { display: inline-flex; align-items: center; width: fit-content; padding: 3px 8px; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.asn-badge { background: #E7F2F7; color: #275F77; }
.asn-badge.is-empty { background: #EEF2F3; color: #75878C; }
.category-badge.category-ringan { background: #E7F6EE; color: #26794C; }
.category-badge.category-sedang { background: #FFF4DC; color: #9A6500; }
.category-badge.category-berat { background: #FFE8EA; color: #A82F3D; }
.category-badge.category-unclassified { background: #EEF2F3; color: #667A80; }
.case-type { display: block; color: #38545C; font-size: 11px; line-height: 1.35; }
.table-progress { min-width: 130px; }
.table-progress small { margin-bottom: 5px; }
.process-cell { min-width: 760px; }
.table-stage-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.table-stage-heading strong { color: var(--dark); }
.current-stage-badge { display: inline-flex; flex: none; padding: 3px 7px; border-radius: 999px; background: #DDF4F1; color: var(--primary-dark); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.current-stage-badge.is-complete { background: #E7F6EE; color: #26794C; }
.process-journey { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); gap: 18px 4px; width: 100%; }
.process-step { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; text-align: center; color: #8A9CA1; }
.process-step::after { content: ''; position: absolute; top: 13px; left: calc(50% + 14px); width: calc(100% - 28px); height: 3px; border-radius: 999px; background: #DDE6E8; }
.process-step:nth-child(7n)::after, .process-step:last-child::after { display: none; }
.process-marker { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid #CBD7DA; border-radius: 50%; background: #fff; color: #83969B; font-size: 10px; font-weight: 900; }
.process-step-label { margin-top: 6px; max-width: 112px; font-size: 10px; font-weight: 750; line-height: 1.22; }
.process-step.completed { color: #26794C; }
.process-step.completed .process-marker { border-color: #3BA66B; background: #3BA66B; color: #fff; }
.process-step.completed::after { background: #8DD0AA; }
.process-step.current { color: var(--primary-dark); }
.process-step.current .process-marker { border-color: var(--primary); background: #fff; color: var(--primary-dark); box-shadow: 0 0 0 5px rgba(0, 145, 137, .15); }
.process-step.current .process-step-label { font-weight: 900; }
.process-journey-compact { grid-template-columns: repeat(7, minmax(88px, 1fr)); gap: 14px 2px; }
.process-journey-compact .process-marker { width: 22px; height: 22px; font-size: 8px; }
.process-journey-compact .process-step::after { top: 10px; left: calc(50% + 11px); width: calc(100% - 22px); height: 2px; }
.process-journey-compact .process-step-label { margin-top: 5px; max-width: 96px; font-size: 8px; line-height: 1.15; }
.case-process-panel { margin-bottom: 18px; padding: 16px; border: 1px solid #DDE9EA; border-radius: 14px; background: #FBFDFD; }
.case-process-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.case-process-header h4 { margin: 0 0 4px; color: var(--dark); }
.case-process-header p { margin: 0; color: var(--muted); font-size: 11px; }
.process-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.process-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; color: var(--muted); }
.process-legend span::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #CBD7DA; }
.process-legend .legend-completed::before { background: #3BA66B; }
.process-legend .legend-current::before { background: var(--primary); box-shadow: 0 0 0 3px rgba(0,145,137,.14); }
.pagination-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #FBFDFD; color: var(--muted); }
.pagination-bar > div { display: flex; gap: 8px; }
.empty-state { text-align: center; color: var(--muted); padding: 35px !important; }

.case-form { display: grid; gap: 16px; }
.case-edit-context { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 18px; background: #EAF7F4; border: 1px solid rgba(0, 150, 136, .22); border-radius: var(--radius); }
.case-edit-context div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.case-edit-context small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.case-edit-context strong { color: var(--dark); overflow-wrap: anywhere; }
.case-edit-context span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.form-section { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.form-section-header { padding: 16px 19px; background: #F7FAFA; border-bottom: 1px solid var(--line); }
.form-section-header h3 { margin: 0 0 3px; color: var(--dark); }
.form-section-header p { margin: 0; color: var(--muted); font-size: 12px; }
.form-section-body { padding: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.form-field.full { grid-column: 1 / -1; }
.form-field.two { grid-column: span 2; }
.field-hint { margin-top: 5px; color: var(--muted); font-size: 11px; }
.sticky-actions { position: sticky; bottom: 12px; z-index: 8; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); box-shadow: var(--shadow); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; justify-content: flex-end; gap: 10px; }

.profile-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.5fr); gap: 18px; }
.profile-card { padding: 28px; text-align: center; }
.profile-avatar { margin: 0 auto 14px; width: 78px; height: 78px; display: grid; place-items: center; border-radius: 24px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-size: 26px; font-weight: 800; }
.profile-card h3 { margin: 0; font-size: 22px; }
.profile-card > p { margin: 3px 0 10px; color: var(--muted); }
.profile-card dl { text-align: left; margin-top: 24px; }
.profile-card dl > div { padding: 10px 0; border-bottom: 1px solid #EDF2F3; }
.profile-card dt { color: var(--muted); font-size: 11px; text-transform: uppercase; font-weight: 800; }
.profile-card dd { margin: 4px 0 0; }
.padded-form { padding: 20px; }

.modal-dialog { width: min(620px, calc(100vw - 28px)); border: 0; padding: 0; border-radius: 18px; box-shadow: 0 28px 80px rgba(23,49,58,.3); }
.modal-wide { width: min(1020px, calc(100vw - 28px)); }
.modal-dialog::backdrop { background: rgba(11,37,44,.58); backdrop-filter: blur(3px); }
.dialog-card { background: #fff; }
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.dialog-header h3 { margin: 3px 0 0; font-size: 21px; color: var(--dark); }
.dialog-close { width: 38px; height: 38px; border: 0; background: #F0F5F5; border-radius: 10px; font-size: 22px; color: var(--muted); }
.dialog-body { padding: 20px; max-height: 70vh; overflow: auto; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--line); }
.form-grid { display: grid; gap: 15px; }
.form-grid.two-columns { grid-template-columns: 1fr 1fr; }
.checkbox-field { display: flex; align-items: center; gap: 9px; padding-top: 22px; }
.checkbox-field input { width: auto; }
.checkbox-field span { margin: 0; }
.detail-duration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.detail-duration-card { min-width: 0; }
.detail-duration-card .duration-item { min-height: 76px; padding: 13px 15px 13px 19px; }
.detail-duration-card .duration-item::before { top: 12px; bottom: 12px; left: 7px; width: 4px; }
.detail-duration-card .duration-item small { font-size: 11px; }
.detail-duration-card .duration-item strong { font-size: 20px; }
.detail-duration-card .duration-item span { font-size: 11px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.detail-item { background: #F7FAFA; border-radius: 10px; padding: 11px; }
.detail-item.wide { grid-column: span 2; }
.detail-item.full { grid-column: 1 / -1; }
.detail-item small { display: block; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.detail-item strong { white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.timeline h4 { margin: 0 0 12px; }
.timeline-item { position: relative; padding: 0 0 16px 24px; border-left: 2px solid #D8E7E8; margin-left: 6px; }
.timeline-item::before { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; left: -6px; top: 4px; background: var(--primary); }
.timeline-item strong, .timeline-item small { display: block; }
.timeline-item small { color: var(--muted); }

.loading-overlay { position: fixed; z-index: 130; top: 14px; right: 18px; max-width: min(360px, calc(100vw - 36px)); display: flex; flex-direction: row; gap: 10px; align-items: center; color: var(--dark); background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; box-shadow: 0 10px 30px rgba(45,77,76,.16); font-size: 13px; font-weight: 700; pointer-events: none; }
.spinner { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; border: 3px solid #D9E9E9; border-top-color: var(--primary); animation: spin .8s linear infinite; }
.upload-process-panel { position: fixed; z-index: 135; top: 62px; right: 18px; width: min(420px, calc(100vw - 36px)); display: flex; align-items: center; gap: 13px; color: var(--dark); background: rgba(255,255,255,.98); border: 1px solid rgba(0,150,136,.28); border-left: 5px solid var(--primary); border-radius: 16px; padding: 14px 16px; box-shadow: 0 16px 42px rgba(45,77,76,.22); pointer-events: none; }
.upload-process-visual { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: #EAF7F4; }
.upload-process-spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #CFE7E4; border-top-color: var(--primary); animation: spin .75s linear infinite; }
.upload-process-result { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--success); font-weight: 900; font-size: 16px; line-height: 1; }
.upload-process-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.upload-process-copy strong { color: var(--dark); font-size: 14px; }
.upload-process-copy span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.upload-process-panel.is-success { border-left-color: var(--success); }
.upload-process-panel.is-success .upload-process-visual { background: #EAF8EF; }
.upload-process-panel.is-error { border-left-color: var(--danger); }
.upload-process-panel.is-error .upload-process-visual { background: #FDEEEE; }
.upload-process-panel.is-error .upload-process-result { background: var(--danger); }
.page-loading-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--dark); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 700; box-shadow: 0 5px 16px rgba(45,77,76,.08); }
.mini-spinner { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; border: 2px solid #D9E9E9; border-top-color: var(--primary); animation: spin .8s linear infinite; }
.page[aria-busy="true"] .page-header { opacity: .98; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; z-index: 120; right: 24px; bottom: 24px; max-width: min(420px, calc(100vw - 32px)); color: #fff; background: var(--dark); border-radius: 12px; padding: 13px 16px; box-shadow: var(--shadow); }
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

@media (max-width: 1100px) {
  .login-view { grid-template-columns: minmax(360px, 470px) 1fr; }
  .login-visual { padding: 5vw; }
  .visual-card h2 { font-size: 42px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .category-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar { grid-template-columns: minmax(230px, 2fr) repeat(2, minmax(150px, 1fr)); }
  .process-cell { min-width: 680px; }
}
@media (max-width: 850px) {
  .login-view { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .app-shell { grid-template-columns: 1fr; }
  .topbar { padding: 0 14px; }
  .menu-toggle { display: block; }
  .topbar-logo { width: 165px; height: 48px; }
  .user-chip-text { display: none; }
  .sidebar { position: fixed; left: -270px; top: 70px; width: 250px; transition: left .25s; box-shadow: var(--shadow); }
  .sidebar.open { left: 0; }
  .main-content { padding: 20px 14px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-analysis-grid { grid-template-columns: 1fr; }
  .dashboard-main-column { min-width: 0; }
  .dashboard-page-header { align-items: flex-start; }
  .panel-wide { grid-row: auto; }
  .form-section-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-edit-context { grid-template-columns: 1fr 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .login-panel { padding: 30px 22px; }
  .brand-logo { width: min(100%, 340px); max-height: 105px; }
  .login-heading h1 { font-size: 31px; }
  .topbar-actions .button { display: none; }
  .topbar-brand > div:last-child { display: none; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { padding: 15px; }
  .metric-card strong { font-size: 25px; }
  .category-metric-grid { grid-template-columns: 1fr; }
  .category-metric-card { min-height: 88px; padding: 15px 17px; }
  .category-metric-card strong { font-size: 29px; }
  .page-header { flex-direction: column; }
  .dashboard-toolbar { width: 100%; align-items: flex-end; }
  .dashboard-year-field { flex: 1; min-width: 0; }
  .distribution-row { grid-template-columns: minmax(100px, 1fr) minmax(80px, 1.5fr) 42px; gap: 8px; }
  .recent-cases-horizontal { grid-template-columns: 1fr; padding: 12px 14px 16px; }
  .filter-bar { grid-template-columns: 1fr; }
  .stage-row { grid-template-columns: 1fr 45px; }
  .stage-row .progress-track { grid-column: 1 / -1; grid-row: 2; }
  .form-section-body { grid-template-columns: 1fr; }
  .case-edit-context { grid-template-columns: 1fr; }
  .form-field.two, .form-field.full { grid-column: auto; }
  .form-grid.two-columns { grid-template-columns: 1fr; }
  .detail-duration-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-item.wide, .detail-item.full { grid-column: auto; }
  .case-process-header { flex-direction: column; }
  .process-legend { justify-content: flex-start; }
  .process-journey { grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: 16px 6px; }
  .process-step:nth-child(7n)::after { display: block; }
  .process-step:nth-child(2n)::after { display: none; }
  .process-journey-compact { grid-template-columns: repeat(7, minmax(88px, 1fr)); }
  .process-journey-compact .process-step:nth-child(2n)::after { display: block; }
  .process-journey-compact .process-step:nth-child(7n)::after { display: none; }
  .modal-dialog { width: calc(100vw - 14px); }
}

  .current-position-panel {
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(0, 169, 157, .25);
    border-left: 5px solid var(--primary);
    border-radius: 14px;
    background: rgba(0, 169, 157, .06);
    display: grid;
    gap: 5px;
  }
  .current-position-panel small {
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .current-position-panel strong {
    color: var(--dark);
    font-size: 1.2rem;
  }
  .current-position-panel span { color: var(--muted); }
  .current-position-panel.is-complete {
    border-color: rgba(68, 160, 80, .3);
    border-left-color: #44a050;
    background: rgba(68, 160, 80, .08);
  }

.bast-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; }
.bast-summary-card { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--primary); border-radius: 14px; padding: 17px 19px; box-shadow: 0 8px 22px rgba(23,75,87,.06); }
.bast-summary-card.warning { border-left-color: var(--warning); }
.bast-summary-card.success { border-left-color: var(--success); }
.bast-summary-card small { display: block; color: var(--muted); font-weight: 750; margin-bottom: 5px; }
.bast-summary-card strong { display: block; font-size: 30px; color: var(--dark); }
.bast-filter-bar { grid-template-columns: minmax(260px, 2fr) minmax(180px, .8fr) auto; }
.modal-bast { width: min(1080px, calc(100vw - 28px)); }
.bast-employee-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; background: #F1F8F7; border: 1px solid rgba(0,169,157,.18); border-radius: 13px; margin-bottom: 18px; }
.bast-employee-summary > div { min-width: 0; }
.bast-employee-summary small, .bast-employee-summary strong, .bast-employee-summary span { display: block; }
.bast-employee-summary small { color: var(--muted); font-weight: 750; margin-bottom: 4px; }
.bast-employee-summary strong { color: var(--dark); overflow-wrap: anywhere; }
.bast-employee-summary span { color: var(--muted); font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
.bast-form-section { padding: 17px 0; border-top: 1px solid var(--line); }
.bast-form-section:first-of-type { border-top: 0; }
.bast-section-heading { margin-bottom: 13px; }
.bast-section-heading h4 { margin: 0 0 4px; color: var(--dark); }
.bast-section-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.full-width-field { grid-column: 1 / -1; }
.form-hint { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.file-upload-field { display: flex; align-items: center; gap: 12px; border: 1px dashed #9CC9C6; background: #F5FBFA; border-radius: 12px; padding: 15px; cursor: pointer; }
.file-upload-field input { width: auto; max-width: 100%; }
.file-upload-field > span { margin: 0; color: var(--dark); font-weight: 750; }
.existing-file-note { margin-top: 10px; border-radius: 10px; padding: 10px 12px; background: #EEF7F0; color: #2D6D38; font-size: 13px; }
.data-table td small { display: block; color: var(--muted); margin-top: 3px; max-width: 420px; }

@media (max-width: 850px) {
  .bast-employee-summary { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bast-summary-grid { grid-template-columns: 1fr; }
  .bast-filter-bar { grid-template-columns: 1fr; }
}


/* Supergrafis Kementerian Kesehatan */
.login-supergraphic { position: absolute; width: min(64vw, 720px); right: -7%; top: -10%; opacity: .18; transform: rotate(7deg); filter: saturate(1.03); pointer-events: none; }
.visual-card { position: relative; z-index: 2; }
.main-content { position: relative; overflow: hidden; }
.main-content > .page { position: relative; z-index: 2; }
.app-supergraphic { position: fixed; z-index: 0; width: min(36vw, 520px); right: -110px; bottom: -115px; opacity: .035; pointer-events: none; }

/* Tabel Data Hukuman Disiplin */
.data-table th { position: sticky; top: 0; z-index: 3; white-space: nowrap; background: #EEF8F6; border-bottom: 2px solid rgba(3,184,164,.18); }
.data-table th:first-child { border-top-left-radius: 12px; }
.data-table th:last-child { border-top-right-radius: 12px; }
.data-table tbody tr:nth-child(even) { background: #FCFEFD; }
.data-table tbody tr:hover { background: #F1FBF9; }
.data-table .col-number { width: 54px; min-width: 54px; text-align: center; }
.data-table .col-actions { width: 170px; min-width: 170px; }
.employee-cell { min-width: 190px; }
.work-unit-cell { min-width: 240px; max-width: 300px; }
.organizer-cell { min-width: 170px; }
.sk-data-cell { min-width: 190px; max-width: 250px; }
.position-cell { min-width: 175px; }
.position-cell > strong, .position-cell > small { display: block; margin-top: 5px; }
.duration-cell { min-width: 220px; }
.duration-stack { display: grid; gap: 8px; }
.duration-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; min-width: 0; padding: 8px 10px 8px 13px; border: 1px solid #E0E9EA; border-radius: 10px; background: #F8FBFB; }
.duration-item::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 5px; width: 3px; border-radius: 999px; background: #B7C5C8; }
.duration-item small { grid-column: 1; margin: 0 !important; color: var(--muted); font-size: 10px; font-weight: 800; line-height: 1.25; }
.duration-item strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--dark); font-size: 14px; white-space: nowrap; }
.duration-item span { grid-column: 1; color: var(--muted); font-size: 10px; line-height: 1.25; }
.duration-item.is-running::before { background: var(--primary); }
.duration-item.is-running { background: #EEFAF8; border-color: rgba(3,184,164,.22); }
.duration-item.is-complete::before { background: var(--success); }
.duration-item.is-complete { background: #EFF9F3; border-color: rgba(38,121,76,.18); }
.duration-item.is-invalid::before { background: var(--danger); }
.duration-item.is-invalid { background: #FFF3F4; border-color: rgba(168,47,61,.18); }
.document-cell { min-width: 135px; }
.muted-text { color: var(--muted); font-size: 12px; }
.compact-actions { max-width: 168px; justify-content: flex-start; flex-wrap: wrap; }
.compact-actions .button { flex: 1 1 72px; white-space: nowrap; }
.document-status-list { display: grid; gap: 6px; }
.document-chip { width: 100%; display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 999px; padding: 5px 9px; background: transparent; font-family: var(--font-secondary); font-size: 10px; font-weight: 700; text-align: left; }
.document-chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.document-chip.is-ready { color: #166B5F; background: #E5F8F4; border-color: #B8E9E1; cursor: pointer; }
.document-chip.is-ready i { background: var(--primary); box-shadow: 0 0 0 3px rgba(3,184,164,.12); }
.document-chip.is-ready:hover { background: #D7F4EF; }
.document-chip.is-missing { color: #7D8987; background: #F0F3F2; border-color: #E2E7E6; cursor: default; }
.document-chip.is-missing i { background: #AAB5B3; }

/* Dialog dokumen */
.modal-document { width: min(720px, calc(100vw - 28px)); }
.document-employee-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.document-employee-summary > div { padding: 12px 14px; border: 1px solid #DCE9E6; border-radius: 12px; background: #F8FCFB; min-width: 0; }
.document-employee-summary small, .document-employee-summary strong, .document-employee-summary span { display: block; }
.document-employee-summary small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.document-employee-summary strong { margin: 4px 0 2px; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.document-employee-summary span { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.document-form-grid { padding-top: 4px; }
.detail-document-actions { flex-wrap: wrap; }

/* Penggunaan palet pada komponen utama */
.sidebar { background: var(--dark); }
.nav-item span { color: var(--secondary); }
.nav-item.active { background: var(--primary); color: #FFFFFF; }
.login-note { background: #EAF9F6; border-left-color: var(--secondary); }
.avatar { background: #DDF7F2; color: #087D72; }
.progress-track span { background: linear-gradient(90deg, var(--primary), var(--primary-medium), var(--secondary)); }

@media (max-width: 760px) {
  .document-employee-summary { grid-template-columns: 1fr; }
  .login-supergraphic { width: 95vw; right: -35%; top: -2%; opacity: .12; }
  .app-supergraphic { width: 75vw; right: -35vw; bottom: -12vw; }
}
</style>

<style id="v31-generated-documents">
.document-filter-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.document-filter-bar .search-field { min-width: 0; }
.document-filter-bar .button { min-width: 110px; }
.document-generator-notice { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid #E8D59B; border-left: 5px solid var(--warning); border-radius: 12px; background: #FFF9E9; color: #725B20; font-size: 12px; line-height: 1.45; }
.document-generator-notice strong { flex: 0 0 auto; color: #584514; }
.document-generator-notice.compact { margin: 0; }
.document-generator-table th:nth-child(1) { width: 25%; }
.document-generator-table th:nth-child(2) { width: 24%; }
.document-generator-table th:nth-child(3),
.document-generator-table th:nth-child(4) { width: 14%; }
.document-generator-table th:nth-child(5) { width: 23%; }
.document-generator-table td > small { display: block; margin-top: 3px; color: var(--muted); }
.document-case-punishment { display: block; margin-top: 7px; font-size: 12px; line-height: 1.45; }
.document-row-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
.document-row-actions .button { width: 100%; white-space: normal; line-height: 1.2; }
.generated-status-cell { display: grid; justify-items: start; gap: 5px; }
.generated-status-cell small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.document-status-empty, .document-template-unavailable { color: var(--muted); font-size: 11px; line-height: 1.4; }
.document-template-unavailable { color: #926F19; }

.modal-generated-document { width: min(1180px, calc(100vw - 24px)); }
.modal-generated-document .dialog-card { display: flex; flex-direction: column; max-height: calc(100vh - 24px); overflow: hidden; }
.modal-generated-document .dialog-header,
.modal-generated-document .dialog-actions { flex: 0 0 auto; }
.generated-document-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
.document-employee-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.document-employee-summary article { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 11px; background: #F9FCFB; }
.document-employee-summary small,
.document-employee-summary strong,
.document-employee-summary span { display: block; }
.document-employee-summary small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.document-employee-summary strong { margin-top: 4px; color: var(--dark); overflow-wrap: anywhere; }
.document-employee-summary span { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.generated-document-section { margin-top: 15px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #FFFFFF; }
.generated-document-section-heading { margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid #EDF2F1; }
.generated-document-section-heading h4 { margin: 0; color: var(--dark); font-size: 14px; }
.generated-document-section textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.generated-document-section label > small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.generated-document-output { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 15px; padding: 14px 16px; border: 1px solid #BFE1DA; border-radius: 13px; background: #EEF9F7; }
.generated-document-output small,
.generated-document-output strong,
.generated-document-output span { display: block; }
.generated-document-output small { color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.generated-document-output strong { margin-top: 2px; color: var(--dark); }
.generated-document-output span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.generated-output-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.generated-document-actions { flex-wrap: wrap; }

@media (max-width: 900px) {
  .document-generator-table { min-width: 880px; }
  .document-employee-summary { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .document-filter-bar { grid-template-columns: 1fr; }
  .document-filter-bar .button { width: 100%; }
  .document-generator-notice { flex-direction: column; }
  .modal-generated-document { width: calc(100vw - 10px); }
  .generated-document-section { padding: 12px; }
  .generated-document-output { align-items: stretch; flex-direction: column; }
  .generated-output-actions { justify-content: flex-start; }
  .generated-document-actions .button { flex: 1 1 100%; }
}
</style>

<style id="v30-bulk-user-import">
.user-page-actions { justify-content: flex-end; }
.modal-user-import { width: min(1180px, calc(100vw - 28px)); }
.modal-user-import .dialog-card { display: flex; flex-direction: column; max-height: calc(100vh - 28px); overflow: hidden; }
.modal-user-import .dialog-header, .modal-user-import .dialog-actions { flex: 0 0 auto; }
.user-import-body { flex: 1 1 auto; min-height: 0; max-height: none; }
.user-import-guide { padding: 14px 16px; border: 1px solid #CDE5E1; border-left: 5px solid var(--primary); border-radius: 12px; background: #F1FAF8; }
.user-import-guide strong { display: block; color: var(--dark); }
.user-import-guide p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.user-import-fields { margin-top: 16px; align-items: end; }
.user-import-fields .file-upload-field { min-height: 67px; }
.user-import-security-note { margin: 12px 0 16px; padding: 10px 12px; border-radius: 10px; background: #FFF8E8; color: #765B1D; font-size: 12px; }
.user-import-empty-state { display: grid; place-items: center; min-height: 150px; padding: 24px; border: 1px dashed #C9DAD7; border-radius: 13px; background: #FAFCFC; color: var(--muted); text-align: center; }
.user-import-empty-state strong, .user-import-empty-state span { display: block; }
.user-import-empty-state strong { color: var(--dark); }
.user-import-empty-state span { margin-top: 4px; font-size: 12px; }
.user-import-preview { display: grid; gap: 12px; }
.user-import-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.user-import-summary-grid article { padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 11px; background: #FAFDFC; }
.user-import-summary-grid article.warning { border-left-color: var(--warning); }
.user-import-summary-grid article.danger { border-left-color: var(--danger); }
.user-import-summary-grid article.success { border-left-color: var(--success); }
.user-import-summary-grid small, .user-import-summary-grid strong { display: block; }
.user-import-summary-grid small { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.user-import-summary-grid strong { margin-top: 3px; color: var(--dark); font-size: 23px; }
.user-import-preview-notice { color: var(--muted); font-size: 12px; }
.user-import-table-wrap { max-height: 42vh; border: 1px solid var(--line); border-radius: 12px; }
.user-import-table { min-width: 940px; }
.user-import-table th { top: 0; }
.user-import-table td { font-size: 12px; }
.user-import-invalid-row { background: #FFF7F7 !important; }
.user-import-invalid-row:hover { background: #FFF0F1 !important; }

@media (max-width: 760px) {
  .user-page-actions { width: 100%; justify-content: flex-start; }
  .user-import-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-user-import .dialog-actions { flex-wrap: wrap; }
}
</style>

<style id="v29-list-pagination-responsive-table">
/* Pilihan jumlah baris untuk seluruh halaman daftar. */
.pagination-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.page-size-control { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 800; }
.page-size-control > span { margin: 0; }
.page-size-control select { width: auto; min-width: 82px; height: 34px; padding: 5px 28px 5px 9px; border-radius: 8px; font-size: 12px; }
.case-filter-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.case-filter-bar .search-field { grid-column: span 2; }
.case-filter-bar #caseAsnFilter { grid-column: 4; }
.case-filter-bar #caseScopeInfo:not(.hidden) { grid-column: 1 / -1; }
.case-list-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; margin: -3px 0 10px; }
.case-list-controls-row .page-size-control { flex: 0 0 auto; }
.case-list-controls-row #resetCaseFilters { flex: 0 0 auto; min-width: 110px; margin-left: auto; }

/* Area atas tetap terlihat; hanya baris data yang bergulir pada layar lebar. */
@media (min-width: 901px) {
  #page-cases.active-page { display: flex; flex-direction: column; height: calc(100vh - 126px); height: calc(100dvh - 126px); min-height: 480px; overflow: hidden; }
  #page-cases > .page-header,
  #page-cases > .case-filter-bar,
  #page-cases > .case-list-controls-row { flex: 0 0 auto; }
  #page-cases .case-table-panel { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  #page-cases .case-table-panel .table-wrap { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  #page-cases .case-table-panel .pagination-bar { flex: 0 0 auto; }
}

/* Tabel ringkas Data Hukuman Disiplin tanpa gulir horizontal. */
.case-table-panel .table-wrap { overflow-x: hidden; }
.case-data-table { width: 100%; min-width: 0; table-layout: fixed; }
.case-data-table th { white-space: normal; overflow-wrap: anywhere; padding: 11px 10px; line-height: 1.25; }
.case-data-table td { min-width: 0 !important; max-width: none !important; padding: 12px 10px; overflow-wrap: anywhere; }
.case-data-table .case-col-number { width: 4%; }
.case-data-table .case-col-person { width: 19%; }
.case-data-table .case-col-classification { width: 20%; }
.case-data-table .case-col-organizer { width: 13%; }
.case-data-table .case-col-process { width: 24%; }
.case-data-table .case-col-tools { width: 20%; }
.case-data-table .col-number { width: auto; min-width: 0; }
.case-data-table .case-classification { min-width: 0; }
.case-classification-sk-cell .case-type,
.case-classification-sk-cell .case-cell-divider > strong { color: var(--dark); font-size: 14px; font-weight: 700; line-height: 1.4; }
.case-cell-section { min-width: 0; }
.case-cell-divider { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #D9E5E3; }
.cell-label { margin: 0 0 4px !important; color: var(--muted); font-size: 9px !important; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.case-organizer-cell strong, .case-organizer-cell small { overflow-wrap: anywhere; }
.case-process-duration-cell .position-cell { min-width: 0; }
.case-process-duration-cell .duration-stack { gap: 6px; }
.case-process-duration-cell .duration-item { padding: 7px 8px 7px 12px; gap: 2px 6px; }
.case-process-duration-cell .duration-item strong { font-size: 12px; }
.case-tools-cell .document-cell { min-width: 0; }
.case-action-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #D9E5E3; }
.case-action-stack .button { min-width: 0; width: 100%; white-space: normal; line-height: 1.2; }

@media (max-width: 1100px) {
  .case-filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-filter-bar #caseAsnFilter { grid-column: 3; }
  .case-data-table th, .case-data-table td { padding-left: 8px; padding-right: 8px; }
  .case-action-stack { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .case-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-filter-bar .search-field { grid-column: 1 / -1; }
  .case-filter-bar #caseAsnFilter { grid-column: 2; }
  .case-table-panel { background: transparent; box-shadow: none; overflow: visible; }
  .case-table-panel .table-wrap { overflow: visible; }
  .case-data-table, .case-data-table tbody { display: block; }
  .case-data-table thead { display: none; }
  .case-data-table tbody { display: grid; gap: 12px; }
  .case-data-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #FFFFFF; box-shadow: 0 8px 22px rgba(31,66,63,.07); }
  .case-data-table tbody tr:hover, .case-data-table tbody tr:nth-child(even) { background: #FFFFFF; }
  .case-data-table tbody td { display: block; border: 0; border-bottom: 1px solid #EDF2F3; }
  .case-data-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
  .case-data-table tbody .col-number { grid-column: 1 / -1; padding: 8px 12px; text-align: left; background: #EEF8F6; color: var(--primary-dark); font-weight: 900; }
  .case-data-table tbody .col-number::before { display: inline; margin-right: 5px; }
  .case-data-table tbody .case-tools-cell { grid-column: 1 / -1; border-bottom: 0; }
  .case-action-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-data-table .empty-state { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .case-filter-bar { grid-template-columns: 1fr; }
  .case-filter-bar .search-field { grid-column: auto; }
  .case-filter-bar #caseAsnFilter { grid-column: auto; }
  .case-data-table tbody tr { grid-template-columns: 1fr; }
  .case-data-table tbody .col-number, .case-data-table tbody .case-tools-cell { grid-column: auto; }
  .case-action-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagination-bar { align-items: stretch; flex-direction: column; gap: 10px; }
  .pagination-controls { justify-content: space-between; }
  .page-size-control { margin-right: auto; }
}
</style>

<style id="v25-upload-responsive">
@media (max-width: 620px) {
  .upload-process-panel { top: 66px; left: 14px; right: 14px; width: auto; }
}
</style>

<style id="v26-bast-delivery-method">
.badge-info { background: #E5F8F4; color: #087D72; }
.bast-method-section { padding-top: 2px; }
.delivery-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.delivery-method-card { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 92px; padding: 15px 16px; border: 2px solid #D8E8E5; border-radius: 15px; background: #FBFEFD; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.delivery-method-card:hover { border-color: var(--primary-medium); background: #F2FBF9; transform: translateY(-1px); }
.delivery-method-card:has(input:checked) { border-color: var(--primary); background: #EAF9F6; box-shadow: 0 0 0 3px rgba(3,184,164,.10); }
.delivery-method-card input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.delivery-method-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--secondary); color: var(--dark); font-family: var(--font-primary); font-size: 20px; font-weight: 800; }
.delivery-method-card strong, .delivery-method-card small { display: block; }
.delivery-method-card strong { color: var(--dark); margin-bottom: 4px; }
.delivery-method-card small { color: var(--muted); line-height: 1.4; font-weight: 500; }
#bastPostalFields .file-upload-field { min-height: 76px; }
@media (max-width: 720px) {
  .delivery-method-grid { grid-template-columns: 1fr; }
}
</style>


<style id="v27-document-preview">
.modal-document-preview { width: min(1120px, calc(100vw - 24px)); }
.modal-document-preview .dialog-card { max-height: calc(100vh - 24px); }
.document-preview-body { padding: 14px 18px 8px; min-height: 260px; }
.document-preview-message { min-height: 260px; display: grid; place-items: center; align-content: center; gap: 9px; text-align: center; color: var(--muted); }
.document-preview-message strong { color: var(--dark); font-size: 1rem; }
.document-preview-message small { max-width: 460px; }
.document-preview-spinner { width: 38px; height: 38px; border: 4px solid #DDEDEA; border-top-color: var(--primary); border-radius: 50%; animation: documentPreviewSpin .8s linear infinite; }
.document-preview-message.is-error { color: #A53939; }
.document-preview-error-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #FBE9E9; color: #B43C3C; font-family: var(--font-primary); font-size: 24px; font-weight: 800; }
.document-preview-canvas { min-height: 62vh; max-height: 72vh; overflow: auto; display: grid; place-items: center; background: #EEF3F2; border: 1px solid #D9E5E3; border-radius: 14px; }
.document-preview-frame { display: block; width: 100%; height: 68vh; min-height: 520px; border: 0; background: #FFFFFF; border-radius: 13px; }
.document-preview-image { display: block; max-width: 100%; max-height: 68vh; object-fit: contain; padding: 12px; }
.document-preview-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 3px 0; color: var(--muted); font-size: 12px; }
.document-preview-meta strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dark); }
.document-chip.is-ready span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-chip.is-ready b { margin-left: auto; color: #087D72; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
@keyframes documentPreviewSpin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .modal-document-preview { width: calc(100vw - 12px); }
  .document-preview-body { padding: 10px 10px 4px; }
  .document-preview-canvas { min-height: 52vh; max-height: 62vh; }
  .document-preview-frame { min-height: 430px; height: 56vh; }
  .document-preview-image { max-height: 58vh; padding: 6px; }
  .document-preview-meta { align-items: flex-start; flex-direction: column; gap: 3px; }
}
</style>
<style id="v27-document-preview-layout-fix">
.modal-document-preview .dialog-card { display: flex; flex-direction: column; overflow: hidden; }
.modal-document-preview .document-preview-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; }
.modal-document-preview .dialog-header,
.modal-document-preview .dialog-actions { flex: 0 0 auto; }
</style>


<style id="v271-pdfjs-preview-fix">
/* PDF tidak lagi ditampilkan melalui iframe/plugin Chrome. Halaman dirender ke canvas. */
.document-preview-canvas:has(.pdf-preview-shell) { display: block; place-items: initial; background: #E8EFEE; }
.pdf-preview-shell { display: flex; flex-direction: column; width: 100%; min-height: 62vh; }
.pdf-preview-toolbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; min-height: 54px; padding: 9px 12px; background: rgba(255,255,255,.97); border-bottom: 1px solid #D5E2E0; box-shadow: 0 4px 12px rgba(31,66,63,.08); }
.pdf-preview-page-info, .pdf-preview-zoom-info { min-width: 108px; text-align: center; color: var(--dark); font-weight: 700; font-size: 12px; }
.pdf-preview-zoom-info { min-width: 52px; }
.pdf-preview-toolbar-separator { width: 1px; height: 26px; margin: 0 3px; background: #D3DFDD; }
.pdf-preview-zoom-button { min-width: 38px; font-size: 18px; line-height: 1; }
.pdf-preview-page-viewport { position: relative; flex: 1 1 auto; display: flex; align-items: flex-start; justify-content: center; min-height: 56vh; padding: 18px; overflow: auto; }
.pdf-preview-page-canvas { display: block; max-width: none; background: #FFFFFF; box-shadow: 0 7px 24px rgba(33,58,56,.20); transition: opacity .12s ease; }
.pdf-preview-page-canvas.is-rendering { opacity: .28; }
.pdf-preview-page-loading { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: var(--muted); font-weight: 700; pointer-events: none; }
.pdf-preview-page-loading.hidden { display: none !important; }
@media (max-width: 700px) {
  .pdf-preview-shell { min-height: 52vh; }
  .pdf-preview-toolbar { justify-content: flex-start; padding: 8px; }
  .pdf-preview-toolbar-separator { display: none; }
  .pdf-preview-page-info { min-width: 96px; }
  .pdf-preview-page-viewport { min-height: 46vh; padding: 10px; }
}