:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --text: #172033;
    --muted: #6b7280;
    --line: #e5e7eb;
    --primary: #1f5d50;
    --primary-dark: #17483e;
    --sidebar: #132a2f;
    --success-bg: #e9f8ef;
    --success: #177245;
    --danger-bg: #fff0f0;
    --danger: #b42318;
    --warning-bg: #fff8e6;
    --warning: #9a6700;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, .button {
    border: 0; border-radius: 10px; padding: 10px 16px; background: var(--primary); color: white;
    font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
button:hover, .button:hover { background: var(--primary-dark); }
button.secondary, .button.secondary { background: #eef2f5; color: var(--text); }
.app-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar { background: var(--sidebar); color: #fff; padding: 24px 18px; display: flex; flex-direction: column; gap: 28px; }
.brand, .login-brand { display: flex; gap: 12px; align-items: center; }
.brand strong, .brand small { display: block; }
.brand small { opacity: .68; margin-top: 2px; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; background: #d6f5e7; color: var(--sidebar); display: grid; place-items: center; font-weight: 900; }
.brand-mark.large { width: 58px; height: 58px; font-size: 20px; }
.sidebar nav { display: grid; gap: 8px; }
.sidebar nav a { padding: 11px 12px; border-radius: 9px; text-decoration: none; color: #dce7e8; }
.sidebar nav a:hover { background: rgba(255,255,255,.08); color: white; }
.sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; display: grid; gap: 4px; }
.sidebar-footer small { color: #a9bdc0; }
.logout-link { margin-top: 10px; color: #ffe1dd; }
.main-content { padding: 28px; min-width: 0; }
.topbar { margin-bottom: 18px; display: flex; justify-content: space-between; align-items: flex-start; }
.topbar h1, .panel h2, .login-card h1 { margin: 0; }
.eyebrow { margin: 0 0 5px; color: var(--primary); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.cards-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.stat-card, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px rgba(20, 35, 55, .04); }
.stat-card { padding: 20px; display: grid; gap: 10px; }
.stat-card span { color: var(--muted); }
.stat-card strong { font-size: 30px; }
.panel { padding: 22px; margin-bottom: 18px; }
.panel-header { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; }
.badge { display: inline-flex; border-radius: 999px; padding: 5px 10px; background: #eef2f5; font-size: 12px; font-weight: 800; }
.badge-work { background: var(--success-bg); color: var(--success); }
.badge-off { background: var(--danger-bg); color: var(--danger); }
.badge-holiday { background: var(--warning-bg); color: var(--warning); }
.progress-list { display: grid; gap: 0; }
.progress-list div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); gap: 20px; }
.progress-list div:last-child { border-bottom: 0; }
.progress-list span { color: var(--muted); text-align: right; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tbody tr:hover { background: #fafbfc; }
.empty { text-align: center; color: var(--muted); padding: 30px; }
.actions { display: flex; gap: 10px; align-items: center; }
.actions form { margin: 0; }
.link-button { padding: 0; background: none; color: var(--primary); font-weight: 700; }
.link-button:hover { background: none; text-decoration: underline; }
.link-button.danger { color: var(--danger); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.form-grid.compact { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
.form-stack { display: grid; gap: 15px; }
label { display: grid; gap: 7px; font-size: 13px; font-weight: 750; color: #344054; }
input, select, textarea { width: 100%; border: 1px solid #cfd6df; border-radius: 9px; padding: 10px 11px; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(31,93,80,.12); border-color: var(--primary); }
.span-2 { grid-column: span 2; }
.form-actions { display: flex; align-items: end; }
.checkbox { display: flex; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; padding-bottom: 10px; }
.checkbox input { width: auto; }
.filter-bar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.filter-bar label { min-width: 190px; }
.alert { border-radius: 11px; padding: 12px 14px; margin-bottom: 16px; font-weight: 650; }
.alert-success { background: var(--success-bg); color: var(--success); }
.alert-error { background: var(--danger-bg); color: var(--danger); }
.muted { color: var(--muted); }
.prose { line-height: 1.7; }
.prose h3 { margin-top: 28px; margin-bottom: 5px; }
.prose ul { margin-top: 6px; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top left, #dff2e9, transparent 36%), var(--bg); }
.login-card { width: min(500px, 100%); background: white; border: 1px solid var(--line); border-radius: 20px; padding: 30px; box-shadow: 0 20px 60px rgba(20,35,55,.12); }
.login-brand { align-items: flex-start; margin-bottom: 24px; }
.login-brand p:last-child { color: var(--muted); margin-bottom: 0; }
.login-help { margin-top: 18px; padding: 13px; background: #f5f7f8; border-radius: 10px; line-height: 1.6; }
code { background: #eef2f5; padding: 2px 5px; border-radius: 5px; }
@media (max-width: 1000px) {
    .cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .form-grid.compact { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .main-content { padding: 18px; }
    .cards-grid, .form-grid, .form-grid.compact { grid-template-columns: 1fr; }
    .span-2 { grid-column: span 1; }
    .panel-header { align-items: flex-start; flex-direction: column; }
}

/* Import master data v0.1.4 */
.import-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.import-template-card { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: #fbfcfd; }
.import-template-card h3 { margin: 3px 0 7px; }
.import-template-card p { margin: 0 0 16px; color: var(--muted); line-height: 1.5; min-height: 45px; }
.import-step { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 850; font-size: 12px; }
.template-actions { display: flex; align-items: center; gap: 12px; }
.template-actions .button { padding: 8px 12px; }
.template-actions > a:not(.button) { color: var(--primary); font-weight: 750; }
.import-warning { border: 1px solid #f1d18a; background: var(--warning-bg); color: #6f4d00; border-radius: 10px; padding: 12px 14px; line-height: 1.55; }
.import-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.import-summary-grid > div { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 6px; background: #fbfcfd; }
.import-summary-grid span { color: var(--muted); font-size: 13px; }
.import-summary-grid strong { font-size: 26px; }
.import-summary-grid .has-error { background: var(--danger-bg); border-color: #ffd1cc; color: var(--danger); }
.import-error-heading { margin-top: 8px; }
.import-error-heading h3 { margin-bottom: 3px; }
@media (max-width: 1000px) {
    .import-template-grid { grid-template-columns: 1fr; }
    .import-template-card p { min-height: 0; }
    .import-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .import-summary-grid { grid-template-columns: 1fr; }
}

/* Sidebar accordion stable v0.1.10 */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.sidebar .sidebar-nav .nav-item-main {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 11px 13px;
    border-radius: 13px;
    color: #dce7e8;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.sidebar .sidebar-nav .nav-item-main:hover,
.sidebar .sidebar-nav .nav-item-main.active {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

.sidebar .nav-main-icon,
.sidebar .menu-group-icon {
    display: inline-grid;
    place-items: center;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
}

.sidebar .nav-main-icon svg,
.sidebar .menu-group-icon svg {
    display: block;
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar .menu-group {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* Reset the global button style so the accordion header never becomes a large card. */
.sidebar .menu-group-toggle {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    margin: 0;
    padding: 12px 13px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #dce7e8;
    font: inherit;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.sidebar .menu-group-toggle:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.sidebar .menu-group.is-open .menu-group-toggle,
.sidebar .menu-group.has-active .menu-group-toggle {
    background: #dff5ec;
    color: #17483e;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.sidebar .menu-group-label,
.sidebar .menu-group-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
}

.sidebar .menu-group-label {
    flex: 1 1 auto;
    gap: 11px;
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.sidebar .menu-group-label > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .menu-group-meta {
    flex: 0 0 auto;
    gap: 7px;
}

.sidebar .menu-count {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(31, 93, 80, .11);
    color: currentColor;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
}

.sidebar .menu-chevron {
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.sidebar .menu-chevron svg {
    display: block;
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar .menu-group.is-open .menu-chevron {
    transform: rotate(180deg);
}

.sidebar .menu-group-panel {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: height .32s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, visibility 0s linear .32s;
}

.sidebar .menu-group.is-open .menu-group-panel {
    opacity: 1;
    visibility: visible;
    transition: height .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, visibility 0s;
}

.sidebar .menu-group-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 8px 4px 5px;
}

.sidebar .sidebar-nav .menu-group-inner a {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 8px 10px 8px 36px;
    border-radius: 9px;
    color: #bdccce;
    font-size: 14px;
    font-weight: 620;
    line-height: 1.3;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.sidebar .sidebar-nav .menu-group-inner a::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 9px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    opacity: .72;
    transform: translateY(-50%);
}

.sidebar .sidebar-nav .menu-group-inner a:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    transform: translateX(2px);
}

.sidebar .sidebar-nav .menu-group-inner a.active {
    background: rgba(223, 245, 236, .12);
    color: #e6fff6;
    font-weight: 800;
}

.sidebar .sidebar-nav .menu-group-inner a.active::before {
    width: 12px;
    opacity: 1;
}

@media (max-width: 760px) {
    .sidebar {
        position: static;
        height: auto;
        overflow: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar .menu-group-panel,
    .sidebar .menu-chevron,
    .sidebar .menu-group-toggle,
    .sidebar .sidebar-nav .nav-item-main,
    .sidebar .sidebar-nav .menu-group-inner a {
        transition: none !important;
    }
}


/* Layout refinement v0.1.11: wider sidebar + sticky dashboard summary */
:root {
    --sidebar-width: 290px;
}

.app-shell {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
    width: var(--sidebar-width);
    padding-left: 20px;
    padding-right: 20px;
}

.sidebar .menu-group-label > span:last-child {
    text-overflow: clip;
}

.page-head {
    position: relative;
}

.page-head .topbar {
    margin-bottom: 18px;
}

.page-head-sticky {
    position: sticky;
    top: 0;
    z-index: 40;
    margin: -28px -28px 18px;
    padding: 28px 28px 18px;
    background: rgba(245, 247, 251, .97);
    border-bottom: 1px solid rgba(229, 231, 235, .92);
    box-shadow: 0 8px 22px rgba(20, 35, 55, .05);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.page-head-sticky .topbar {
    margin-bottom: 16px;
}

.page-head-summary {
    min-width: 0;
}

.page-head-sticky .dashboard-summary-cards {
    margin-bottom: 0;
}

.has-sticky-page-head > .alert {
    position: relative;
    z-index: 1;
}

@media (max-width: 1180px) and (min-width: 761px) {
    :root {
        --sidebar-width: 270px;
    }

    .sidebar {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 1000px) and (min-width: 761px) {
    .page-head-sticky {
        margin-left: -24px;
        margin-right: -24px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .main-content {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 760px) {
    :root {
        --sidebar-width: 100%;
    }

    .sidebar {
        width: 100%;
    }

    .page-head-sticky {
        position: static;
        margin: 0 0 18px;
        padding: 0;
        background: transparent;
        border-bottom: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Sticky page header on every authenticated menu v0.1.12 */
.page-head-compact {
    padding-bottom: 14px;
}

.page-head-compact .topbar {
    margin-bottom: 10px;
}

.page-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.page-context-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.page-context-section {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e7f4ef;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

.page-context-description {
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-context-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.page-context-actions .button {
    min-height: 36px;
    padding: 8px 13px;
    border-radius: 9px;
    font-size: 13px;
}

/* Keep in-page anchors and focused fields visible below the frozen header. */
.panel,
[id] {
    scroll-margin-top: 165px;
}

@media (max-width: 1000px) and (min-width: 761px) {
    .page-context-description {
        max-width: 44vw;
    }
}

@media (max-width: 760px) {
    .page-head-compact {
        padding-bottom: 0;
    }

    .page-context-bar,
    .page-context-copy {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-context-bar {
        gap: 10px;
    }

    .page-context-copy {
        gap: 7px;
    }

    .page-context-description {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .page-context-actions {
        width: 100%;
    }

    .page-context-actions .button {
        width: 100%;
    }
}

/* Penugasan tambahan dan matriks approval v0.1.13 */
.assignment-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.assignment-summary-grid > div {
    display: grid;
    gap: 6px;
    min-height: 86px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfcfd;
}
.assignment-summary-grid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.assignment-summary-grid strong {
    line-height: 1.4;
}
.approval-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.approval-summary-grid > div {
    min-height: 78px;
}
.approval-summary-grid strong {
    font-size: 26px;
}
.approval-rule-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}
.approval-rule-grid article {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fbfcfd;
}
.approval-rule-grid article strong {
    color: var(--primary);
}
.approval-rule-grid article span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}
.employee-primary-summary .panel-header {
    margin-bottom: 14px;
}
@media (max-width: 1180px) {
    .approval-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .approval-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .assignment-summary-grid,
    .approval-summary-grid,
    .approval-rule-grid { grid-template-columns: 1fr; }
}

/* Pola organisasi site v0.1.14 */
.site-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}
.site-policy-grid article {
    display: grid;
    gap: 9px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfcfd;
}
.site-policy-grid article strong {
    color: var(--primary);
}
.site-policy-grid article span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}
.field-recommended select {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(20, 93, 75, .08);
}
@media (max-width: 820px) {
    .site-policy-grid { grid-template-columns: 1fr; }
}
/* Data Karyawan explorer v0.1.15 */
.employee-form-panel {
    overflow: hidden;
}
.employee-form-heading {
    margin-bottom: 0;
}
.employee-form-summary {
    margin: 5px 0 0;
}
.employee-form-actions-top {
    flex-wrap: wrap;
    justify-content: flex-end;
}
.employee-form-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 154px;
    justify-content: center;
}
.employee-form-chevron {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.employee-form-panel.is-open .employee-form-chevron {
    transform: rotate(180deg);
}
.employee-form-collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .35s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
}
.employee-form-panel.is-open .employee-form-collapse {
    grid-template-rows: 1fr;
    opacity: 1;
}
.employee-form-collapse-inner {
    min-height: 0;
    overflow: hidden;
}
.employee-form-content {
    padding-top: 18px;
}
.employee-list-panel {
    min-width: 0;
}
.employee-list-heading {
    margin-bottom: 14px;
}
.employee-table-toolbar {
    position: sticky;
    top: var(--page-sticky-offset, 0px);
    z-index: 14;
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 160px;
    align-items: end;
    gap: 14px;
    padding: 12px 0 14px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
.employee-search-label,
.employee-page-size-label {
    margin: 0;
}
.employee-search-box {
    position: relative;
    display: block;
}
.employee-search-box > span {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 21px;
    pointer-events: none;
}
.employee-search-box input {
    padding-left: 40px;
}
.employee-table-scroll {
    position: relative;
    max-height: calc(100vh - 315px);
    min-height: 310px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}
.employee-data-table {
    min-width: 1480px;
}
.employee-data-table th,
.employee-data-table td {
    background: #fff;
}
.employee-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f6f8fa;
    box-shadow: 0 1px 0 var(--line);
}
.employee-data-table tbody tr:hover td {
    background: #fafbfc;
}
.employee-data-table th:nth-child(1),
.employee-data-table td:nth-child(1) {
    position: sticky;
    left: 0;
    min-width: 115px;
    width: 115px;
    z-index: 3;
    box-shadow: 1px 0 0 var(--line);
}
.employee-data-table th:nth-child(2),
.employee-data-table td:nth-child(2) {
    position: sticky;
    left: 115px;
    min-width: 220px;
    width: 220px;
    z-index: 3;
    box-shadow: 1px 0 0 var(--line);
}
.employee-data-table th:last-child,
.employee-data-table td:last-child {
    position: sticky;
    right: 0;
    min-width: 245px;
    z-index: 3;
    box-shadow: -1px 0 0 var(--line);
}
.employee-data-table thead th:nth-child(1),
.employee-data-table thead th:nth-child(2),
.employee-data-table thead th:last-child {
    z-index: 8;
    background: #eef3f5;
}
.employee-data-table td.actions {
    flex-wrap: wrap;
    align-content: center;
}
.employee-data-table tr[hidden] {
    display: none;
}
.employee-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
}
.employee-pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.employee-pagination-controls .button {
    padding: 8px 12px;
}
.employee-pagination-controls .button:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.employee-page-indicator {
    min-width: 105px;
    text-align: center;
    font-size: 13px;
    font-weight: 750;
    color: var(--muted);
}
@media (max-width: 900px) {
    .employee-table-toolbar {
        position: static;
        grid-template-columns: 1fr;
    }
    .employee-table-scroll {
        max-height: 65vh;
    }
    .employee-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}
@media (max-width: 600px) {
    .employee-form-actions-top,
    .employee-pagination-controls {
        width: 100%;
    }
    .employee-form-actions-top .button,
    .employee-form-toggle {
        flex: 1 1 auto;
    }
    .employee-pagination-controls {
        justify-content: space-between;
    }
    .employee-data-table th:nth-child(2),
    .employee-data-table td:nth-child(2) {
        position: static;
        box-shadow: none;
    }
}

/* Uji Routing Approval v0.1.16 */
.approval-test-form {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(150px, .65fr) minmax(180px, .8fr) minmax(290px, 1.35fr) auto;
    gap: 14px;
    align-items: end;
}
.approval-test-form label { margin: 0; }
.approval-test-form button { min-height: 45px; white-space: nowrap; }
.approval-route-overview {
    border-top: 4px solid var(--line);
}
.approval-route-overview.is-ready { border-top-color: #198754; }
.approval-route-overview.has-error { border-top-color: #c2413a; }
.route-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.route-status.is-ready { color: #087443; background: #e6f7ee; }
.route-status.has-error { color: #a72f2a; background: #fde9e7; }
.approval-profile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.approval-profile-grid > div {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfcfd;
}
.approval-profile-grid span { color: var(--muted); font-size: 12px; }
.approval-profile-grid strong { color: var(--ink); }
.route-warning-list,
.route-step-warnings {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}
.route-warning-list p,
.route-step-warnings p {
    margin: 0;
    padding: 10px 12px;
    border-left: 4px solid #d59b22;
    border-radius: 8px;
    background: #fff7df;
    color: #73520e;
    font-size: 13px;
}
.approval-route-timeline {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}
.approval-route-stage {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    box-shadow: var(--shadow);
}
.approval-route-stage.is-ready { border-left: 5px solid #198754; }
.approval-route-stage.has-error { border-left: 5px solid #c2413a; }
.route-stage-number {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 900;
}
.route-stage-body { min-width: 0; }
.route-stage-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.route-stage-heading h3 { margin: 3px 0 0; }
.route-candidate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.route-candidate-card {
    display: grid;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfcfd;
}
.route-candidate-name,
.route-candidate-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.route-candidate-name span,
.route-candidate-meta span { color: var(--muted); font-size: 12px; }
.route-scope-list { display: grid; gap: 8px; }
.route-scope-list > div { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 8px; }
.route-scope-list small { color: var(--muted); line-height: 1.4; }
.route-empty-state {
    display: grid;
    gap: 5px;
    padding: 15px;
    border: 1px dashed #d65f58;
    border-radius: 12px;
    background: #fff7f6;
}
.route-empty-state strong { color: #a72f2a; }
.route-empty-state span { color: var(--muted); font-size: 13px; }
.route-excluded {
    margin-top: 13px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fafbfc;
}
.route-excluded summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.route-excluded-list { display: grid; gap: 8px; padding-top: 10px; }
.route-excluded-list > div { display: grid; gap: 3px; padding-top: 8px; border-top: 1px solid var(--line); }
.route-excluded-list span { color: var(--muted); font-size: 12px; }
@media (max-width: 1180px) {
    .approval-test-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .approval-test-form button { width: max-content; }
    .approval-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .approval-test-form,
    .approval-profile-grid,
    .route-candidate-grid { grid-template-columns: 1fr; }
    .approval-test-form button { width: 100%; }
    .approval-route-stage { grid-template-columns: 1fr; }
    .route-stage-heading,
    .route-candidate-name,
    .route-candidate-meta { align-items: flex-start; flex-direction: column; }
}


/* Routing PJS/PLT v0.1.17 */
.route-policy-note {
    display: grid;
    gap: 4px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #b9d9cf;
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    background: #f1faf7;
}
.route-policy-note strong { color: var(--primary); }
.route-policy-note span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.route-rank-audit-notes {
    display: grid;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px dashed #d7c27a;
}
.route-rank-audit-notes p {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff8df;
    color: #72530c;
    font-size: 12px;
    line-height: 1.45;
}

/* Migrasi Cuti 2025 v0.1.19 */
.migration-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.migration-status-card {
    display: grid;
    gap: 6px;
    padding: 18px;
    border: 1px solid var(--line);
    border-left: 5px solid #d7a21b;
    border-radius: 14px;
    background: var(--panel);
    box-shadow: var(--shadow);
}
.migration-status-card.is-locked { border-left-color: #198754; }
.migration-status-card.is-summary { border-left-color: var(--primary); }
.migration-status-card span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.migration-status-card strong { font-size: 18px; color: var(--ink); }
.migration-status-card p { margin: 0; color: var(--muted); }
.migration-upload-form {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 14px;
    align-items: end;
}
.migration-upload-form-usage { grid-template-columns: minmax(250px, 1fr) minmax(220px, .65fr) auto; }
.migration-upload-form label { margin: 0; }
.migration-upload-form button { min-height: 45px; white-space: nowrap; }
.migration-locked-note {
    padding: 13px 15px;
    border: 1px solid #b8ddca;
    border-radius: 10px;
    background: #edf9f2;
    color: #087443;
    font-weight: 700;
}
.migration-batch-table td { vertical-align: top; }
.migration-validation-detail { margin-top: 8px; }
.migration-validation-detail summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 800; }
.migration-validation-detail p { margin: 7px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.45; }
.migration-validation-detail .is-error { background: var(--danger-bg); color: var(--danger); }
.migration-validation-detail .is-warning { background: var(--warning-bg); color: var(--warning); }
.migration-lock-form { display: grid; gap: 8px; min-width: 150px; }
.migration-confirm { display: flex !important; align-items: center; gap: 7px; margin: 0 !important; font-size: 12px; color: var(--muted); }
.migration-confirm input { width: auto; }
.migration-lock-form button { padding: 9px 12px; }
.migration-safety-panel ul { margin: 10px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.7; }
@media (max-width: 980px) {
    .migration-status-grid,
    .migration-upload-form,
    .migration-upload-form-usage { grid-template-columns: 1fr; }
    .migration-upload-form button { width: 100%; }
}

/* Patch v0.1.21 - Rekap Saldo Aktual Cuti 2025 */
.balance-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.balance-summary-card {
    background: #fff;
    border: 1px solid #e1e7ee;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 8px 24px rgba(15, 39, 71, .05);
}
.balance-summary-card span,
.balance-summary-card small { display: block; color: #667085; }
.balance-summary-card strong { display: inline-block; margin-top: 7px; font-size: 28px; color: #0b1f3a; }
.balance-summary-card small { margin-top: 4px; }
.balance-summary-card.is-primary { background: #eaf5f1; border-color: #b9dfd2; }
.balance-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(150px, .8fr));
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}
.balance-toolbar label { display: grid; gap: 6px; font-weight: 700; color: #344054; }
.balance-toolbar input,
.balance-toolbar select { width: 100%; }
.balance-table-scroll,
.balance-ledger-scroll {
    max-height: 560px;
    overflow: auto;
    border: 1px solid #e1e7ee;
    border-radius: 14px;
}
.balance-data-table,
.balance-ledger-table { min-width: 1320px; border-collapse: separate; border-spacing: 0; }
.balance-data-table thead th,
.balance-ledger-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8fafc;
    box-shadow: inset 0 -1px 0 #dfe5ec;
}
.balance-data-table th:first-child,
.balance-data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff;
    min-width: 90px;
}
.balance-data-table th:nth-child(2),
.balance-data-table td:nth-child(2) {
    position: sticky;
    left: 90px;
    z-index: 3;
    background: #fff;
    min-width: 230px;
}
.balance-data-table thead th:first-child,
.balance-data-table thead th:nth-child(2) { z-index: 7; background: #f8fafc; }
.balance-data-table th:last-child,
.balance-data-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #fff;
    min-width: 95px;
}
.balance-data-table thead th:last-child { z-index: 7; background: #f8fafc; }
.balance-ledger-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.balance-ledger-mini-grid > div { background: #f8fafc; border: 1px solid #e4e7ec; border-radius: 12px; padding: 12px 14px; }
.balance-ledger-mini-grid span { display: block; color: #667085; font-size: 13px; }
.balance-ledger-mini-grid strong { display: block; margin-top: 4px; color: #0b1f3a; }
@media (max-width: 1100px) {
    .balance-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .balance-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .balance-ledger-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .balance-summary-grid,
    .balance-toolbar,
    .balance-ledger-mini-grid { grid-template-columns: 1fr; }
}

/* Patch v0.1.22 - Kontrol Cuti 2026, koreksi HRD, dan audit trail */
.leave-control-summary { margin-bottom: 18px; }
.leave-detail-panel { margin-bottom: 22px; }
.leave-detail-kpis { grid-template-columns: repeat(4, minmax(135px, 1fr)); }
.leave-control-disclosure {
    border: 1px solid #dce5ef;
    border-radius: 14px;
    margin: 14px 0;
    background: #fbfdff;
    overflow: hidden;
}
.leave-control-disclosure > summary {
    cursor: pointer;
    padding: 14px 16px;
    font-weight: 700;
    color: #15344e;
    background: #eef6fb;
}
.leave-control-disclosure[open] > summary { border-bottom: 1px solid #dce5ef; }
.leave-control-form { padding: 16px; }
.leave-control-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px;
}
.leave-control-form-grid label,
.transaction-edit-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: .86rem;
    font-weight: 650;
    color: #34495e;
}
.leave-control-form-grid input,
.leave-control-form-grid select,
.leave-control-form-grid textarea,
.transaction-edit-form input,
.transaction-edit-form select,
.transaction-edit-form textarea {
    width: 100%;
    border: 1px solid #cdd9e5;
    border-radius: 9px;
    padding: 9px 10px;
    background: #fff;
    font: inherit;
}
.leave-control-form-grid .span-2 { grid-column: span 2; }
.leave-control-form-grid .form-actions { display: flex; align-items: end; }
.required-field input { border-color: #d9a550; background: #fffdf6; }
.leave-transaction-table-wrap { max-height: 720px; overflow: auto; }
.leave-transaction-table { min-width: 1220px; }
.leave-transaction-table tr.is-cancelled { opacity: .62; background: #f3f4f6; text-decoration: line-through; }
.transaction-edit-disclosure { min-width: 230px; }
.transaction-edit-disclosure > summary { cursor: pointer; color: #0877b9; font-weight: 700; }
.transaction-edit-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    width: 520px;
    padding: 12px 0 4px;
    text-decoration: none;
}
.transaction-edit-form button { grid-column: span 2; }
.inline-form { display: flex; gap: 7px; align-items: center; }
.inline-form input { min-width: 170px; }
.leave-control-filter { align-items: end; }
.leave-control-filter button,
.leave-control-filter .button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
.text-danger { color: #b42318; font-weight: 700; }

@media (max-width: 1100px) {
    .leave-detail-kpis { grid-template-columns: repeat(2, minmax(135px, 1fr)); }
    .leave-control-form-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 720px) {
    .leave-detail-kpis,
    .leave-control-form-grid { grid-template-columns: 1fr; }
    .leave-control-form-grid .span-2 { grid-column: span 1; }
    .transaction-edit-form { width: 290px; grid-template-columns: 1fr; }
    .transaction-edit-form button { grid-column: span 1; }
}

/* Patch v0.1.23 - Pengajuan, approval, verifikasi sakit, dan kebijakan tahunan */
.alert-info { background: #eef7ff; color: #175b8f; border: 1px solid #c9e5fb; }
.alert-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid #f0d58d; }
button.danger, .button.danger { background: var(--danger); color: #fff; }
button.danger:hover, .button.danger:hover { background: #8e1d14; }
button:disabled, .button:disabled { opacity: .5; cursor: not-allowed; }
.button.compact { padding: 7px 10px; font-size: 12px; }
.status-pill { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 6px 10px; background: #eef2f5; color: #475467; font-size: 12px; font-weight: 850; white-space: nowrap; }
.status-pill.success { background: var(--success-bg); color: var(--success); }
.status-pill.warning { background: var(--warning-bg); color: var(--warning); }
.status-pill.danger { background: var(--danger-bg); color: var(--danger); }
.status-pill.info { background: #eaf5ff; color: #17689a; }
.status-pill.muted { background: #eef2f5; color: #667085; }
.request-summary-grid .request-card-text { font-size: 18px; line-height: 1.25; }
.request-form-grid, .policy-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.request-form-grid .span-all, .policy-form-grid .span-all { grid-column: 1 / -1; }
.request-form-grid small, .policy-form-grid small { color: var(--muted); font-weight: 500; line-height: 1.45; }
.route-self-note { display: grid; align-content: center; gap: 3px; border: 1px solid #b9dfd2; border-radius: 10px; padding: 11px 13px; background: #edf9f4; }
.route-self-note span { color: var(--muted); font-size: 12px; }
.request-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); padding-top: 15px; }
.request-submit-row p { margin: 0; color: var(--muted); line-height: 1.5; }
.my-leave-action-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 18px; margin-bottom: 18px; border: 1px solid #b9dfd2; border-radius: 15px; background: #edf9f4; }
.my-leave-action-row div { display: grid; gap: 4px; }
.my-leave-action-row span { color: var(--muted); font-size: 13px; }
.request-history-wrap { max-height: 460px; }
.request-history-wrap td:first-child { display: grid; gap: 3px; }
.request-history-wrap td:first-child small { color: var(--muted); }
.request-card-list { display: grid; gap: 16px; }
.request-approval-card { border: 1px solid #dce4ec; border-radius: 15px; padding: 17px; background: #fbfdff; }
.request-approval-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.request-approval-head span:first-child { color: var(--primary); font-size: 12px; font-weight: 850; }
.request-approval-head h3 { margin: 4px 0 0; }
.request-approval-head h3 small { color: var(--muted); font-size: 12px; }
.request-approval-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 13px; }
.request-approval-grid > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.request-approval-grid span { display: block; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.request-approval-grid strong { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; }
.request-reason-box { margin: 12px 0; padding: 12px 14px; border-left: 4px solid var(--primary); background: #f4f8f7; border-radius: 8px; }
.request-reason-box p { margin: 5px 0 0; line-height: 1.55; }
.request-actions-row { display: grid; grid-template-columns: auto minmax(320px, 1fr); gap: 14px; align-items: end; }
.approval-action-form { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 10px; align-items: end; }
.approval-action-form > div { display: flex; gap: 8px; }
.empty-state { display: grid; place-items: center; gap: 5px; min-height: 150px; border: 1px dashed #cfd8e2; border-radius: 13px; color: var(--muted); text-align: center; }
.request-detail-panel .button { margin-top: 8px; }
.approval-timeline { display: grid; gap: 0; }
.approval-timeline > div { position: relative; display: grid; gap: 4px; padding: 0 0 18px 28px; border-left: 2px solid #cfe0db; }
.approval-timeline > div::before { content: ''; position: absolute; left: -7px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 0 0 1px #b9d2cb; }
.approval-timeline > div:last-child { border-left-color: transparent; }
.approval-timeline span { color: var(--muted); font-size: 12px; }
.approval-timeline p { margin: 2px 0 0; color: #475467; }
.danger-panel { border-color: #f1c4c0; background: #fffafa; }
.cancel-request-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.policy-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.policy-list-panel { position: sticky; top: 150px; }
.policy-version-list { display: grid; gap: 8px; }
.policy-version-item { display: grid; gap: 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; background: #fff; }
.policy-version-item.active { border-color: #87bdad; background: #edf9f4; }
.policy-version-item span { color: var(--primary); font-size: 11px; font-weight: 850; }
.policy-version-item small { color: var(--muted); }
.policy-main-column { min-width: 0; }
.policy-checkboxes { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f9fafb; }
.policy-checkboxes label { display: flex; flex-direction: row; align-items: center; gap: 7px; }
.policy-checkboxes input { width: auto; }
.policy-activate-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.policy-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.policy-simulation-wrap { max-height: 560px; overflow: auto; }
.policy-simulation-wrap table { min-width: 1450px; }
.policy-simulation-wrap thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; }
@media (max-width: 1100px) {
    .request-form-grid, .policy-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .request-approval-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .policy-layout { grid-template-columns: 1fr; }
    .policy-list-panel { position: static; }
}
@media (max-width: 720px) {
    .request-form-grid, .policy-form-grid, .request-approval-grid, .policy-summary-grid { grid-template-columns: 1fr; }
    .request-form-grid .span-all, .policy-form-grid .span-all { grid-column: span 1; }
    .request-submit-row, .my-leave-action-row { align-items: stretch; flex-direction: column; }
    .request-actions-row, .approval-action-form, .cancel-request-form, .policy-activate-form { grid-template-columns: 1fr; }
    .approval-action-form > div { flex-wrap: wrap; }
}

/* v0.1.24 - aturan tanggal, preview cuti khusus, dan status jadwal */
.request-rule-note {
    margin-bottom: 14px;
}
.special-date-preview {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
}
.special-date-preview.is-loading {
    color: #475569;
}
.special-date-preview.is-ready {
    border-color: #99d8c9;
    background: #eefbf7;
    color: #0f5c4d;
}
.special-date-preview.is-error {
    border-color: #fecaca;
    background: #fff1f2;
    color: #9f1239;
}
.special-date-preview span {
    font-size: .88rem;
}
.request-form-grid input[readonly],
.request-form-grid select:disabled {
    background: #f1f5f9;
    color: #475569;
    cursor: not-allowed;
}
.attendance-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e7f7f3;
    color: #0f6252;
    font-weight: 700;
    font-size: .82rem;
}
.attendance-valid-note,
.compact-link {
    display: block;
    margin-top: 5px;
    font-size: .78rem;
}
.attendance-valid-note {
    color: #397267;
}
.compact-link {
    color: #1565c0;
    text-decoration: none;
}
.compact-link:hover {
    text-decoration: underline;
}

/* v0.1.25 - izin berbasis waktu */
.request-form-grid [hidden] {
    display: none !important;
}
.permission-time-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid #cfe0db;
    border-radius: 12px;
    background: #f2faf7;
}
.permission-time-summary > div {
    display: grid;
    gap: 4px;
}
.permission-time-summary span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.permission-time-summary strong {
    color: #164b40;
}
.attendance-time-note {
    display: block;
    margin-top: 5px;
    color: #475569;
    font-size: .78rem;
    font-weight: 650;
}
@media (max-width: 720px) {
    .permission-time-summary {
        grid-template-columns: 1fr;
    }
}

/* v0.1.26 - riwayat approval, filter, pagination */
.panel-description {
    margin: 5px 0 0;
    color: var(--muted);
    line-height: 1.5;
}
.approval-history-filter {
    display: grid;
    grid-template-columns: minmax(210px, 1.4fr) minmax(170px, .8fr) minmax(210px, 1fr) minmax(145px, .65fr) auto;
    gap: 12px;
    align-items: end;
}
.approval-history-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 1px;
}
.approval-history-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.approval-history-summary article {
    display: grid;
    gap: 5px;
    padding: 15px 17px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(31, 50, 74, .05);
}
.approval-history-summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .035em;
}
.approval-history-summary strong {
    font-size: 23px;
    color: var(--text);
}
.approval-history-table-wrap {
    max-height: none;
}
.approval-history-table {
    min-width: 1350px;
}
.approval-history-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f7f9fb;
}
.approval-history-table td {
    vertical-align: top;
}
.approval-history-table td strong,
.approval-history-table td small {
    display: block;
}
.approval-history-table td small {
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.35;
}
.approval-history-notes {
    min-width: 190px;
    max-width: 300px;
    line-height: 1.45;
    white-space: normal;
}
.muted-text {
    color: var(--muted);
}
.approval-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}
.approval-pagination-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.approval-pagination-pages a,
.approval-pagination-pages span {
    display: inline-flex;
    min-width: 34px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    text-decoration: none;
    color: var(--text);
    font-weight: 750;
}
.approval-pagination-pages a {
    border: 1px solid var(--line);
    background: #fff;
}
.approval-pagination-pages a:hover,
.approval-pagination-pages a.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.button.is-disabled {
    pointer-events: none;
    opacity: .45;
}
@media (max-width: 1180px) {
    .approval-history-filter {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
    .approval-history-filter-actions {
        grid-column: 1 / -1;
    }
}
@media (max-width: 720px) {
    .approval-history-filter,
    .approval-history-summary {
        grid-template-columns: 1fr;
    }
    .approval-history-filter-actions {
        grid-column: span 1;
        align-items: stretch;
        flex-direction: column;
    }
    .approval-history-filter-actions > * {
        width: 100%;
    }
    .approval-pagination {
        align-items: stretch;
        flex-direction: column;
    }
    .approval-pagination > .button {
        width: 100%;
    }
}


/* v0.1.26a - hotfix layout riwayat approval */
.approval-history-filter-panel,
.approval-history-summary,
.approval-history-table-wrap {
    max-width: 100%;
}
.approval-history-filter-panel .panel-header {
    flex-wrap: wrap;
    align-items: flex-start;
}
.approval-history-filter-panel .panel-header > :first-child {
    flex: 1 1 460px;
    min-width: 0;
}
.approval-history-filter-panel .panel-header > .button {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
}
.approval-history-filter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.approval-history-filter label {
    min-width: 0;
}
.approval-history-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.approval-history-filter-actions > * {
    max-width: 100%;
}
@media (max-width: 1180px) {
    .approval-history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .approval-history-filter-panel .panel-header > :first-child,
    .approval-history-filter-panel .panel-header > .button {
        flex: 1 1 100%;
    }
    .approval-history-summary {
        grid-template-columns: 1fr;
    }
}

/* v0.1.27 - Dashboard Karyawan Modern */
.employee-dashboard-page {
    padding: 24px 28px 34px;
    font-family: "Segoe UI Variable", "Inter", "Aptos", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 85% 6%, rgba(82, 190, 161, .12), transparent 24%),
        radial-gradient(circle at 18% 2%, rgba(105, 153, 255, .10), transparent 22%),
        #f5f7fb;
}
.employee-dashboard {
    display: grid;
    gap: 18px;
    max-width: 1500px;
    margin: 0 auto;
}
.employee-welcome-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, .75fr);
    min-height: 300px;
    border-radius: 26px;
    padding: 34px 36px;
    background:
        radial-gradient(circle at 80% 15%, rgba(255,255,255,.19), transparent 24%),
        linear-gradient(135deg, #164d48 0%, #1f6d60 56%, #3d917d 100%);
    color: #fff;
    box-shadow: 0 22px 55px rgba(25, 79, 72, .22);
}
.employee-welcome-card::before,
.employee-welcome-card::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}
.employee-welcome-card::before {
    width: 260px;
    height: 260px;
    right: -85px;
    top: -100px;
    border: 42px solid rgba(255,255,255,.08);
}
.employee-welcome-card::after {
    width: 170px;
    height: 170px;
    left: 50%;
    bottom: -115px;
    background: rgba(175, 238, 214, .12);
}
.employee-welcome-copy,
.employee-welcome-side {
    position: relative;
    z-index: 1;
}
.employee-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: #eaf8f4;
    font-size: 12px;
    font-weight: 750;
    backdrop-filter: blur(8px);
}
.employee-date-chip svg,
.employee-welcome-actions svg,
.employee-stat-icon svg,
.employee-request-arrow,
.employee-quick-links svg,
.employee-empty-icon svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.employee-greeting-kicker {
    margin: 30px 0 7px;
    color: #b9e4d8;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 11px;
    font-weight: 850;
}
.employee-welcome-copy h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: -.035em;
    color: #fff;
}
.employee-welcome-copy h1 span {
    color: #c9ffe9;
}
.employee-welcome-message {
    max-width: 650px;
    margin: 13px 0 0;
    color: rgba(255,255,255,.78);
    font-size: 15px;
    line-height: 1.65;
}
.employee-profile-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.employee-profile-chips span {
    padding: 6px 10px;
    border-radius: 9px;
    background: rgba(255,255,255,.10);
    color: #ecfffa;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.13);
}
.employee-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}
.employee-primary-action,
.employee-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 11px 17px;
    border-radius: 13px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.employee-primary-action {
    background: #eafff6;
    color: #174d44;
    box-shadow: 0 10px 26px rgba(8, 47, 40, .20);
}
.employee-secondary-action {
    background: rgba(255,255,255,.11);
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
}
.employee-primary-action:hover,
.employee-secondary-action:hover {
    transform: translateY(-2px);
}
.employee-primary-action:hover { background: #fff; }
.employee-secondary-action:hover { background: rgba(255,255,255,.18); }
.employee-welcome-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-left: 24px;
}
.employee-avatar-ring {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 0 0 8px rgba(255,255,255,.06);
}
.employee-avatar {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 999px;
    background: linear-gradient(145deg, #d9fff0, #9ce0cc);
    color: #174d44;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: .03em;
    box-shadow: 0 10px 28px rgba(11, 46, 40, .22);
}
.employee-avatar-has-photo {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #d9fff0, #9ce0cc);
}
.employee-avatar-has-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: none;
    transform-origin: center center;
    pointer-events: none;
    user-select: none;
}
.employee-welcome-side > strong {
    margin-top: 13px;
    font-size: 16px;
}
.employee-welcome-side > span {
    margin-top: 3px;
    color: rgba(255,255,255,.65);
    font-size: 12px;
}
.employee-today-status {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 290px;
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 15px;
    background: rgba(8, 37, 33, .23);
    border: 1px solid rgba(255,255,255,.13);
    text-align: left;
}
.employee-status-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #afffe1;
    box-shadow: 0 0 0 5px rgba(175,255,225,.12);
}
.employee-today-status.is-off .employee-status-dot { background: #ffd27f; box-shadow: 0 0 0 5px rgba(255,210,127,.12); }
.employee-today-status.is-holiday .employee-status-dot { background: #a8c7ff; box-shadow: 0 0 0 5px rgba(168,199,255,.12); }
.employee-today-status.is-leave .employee-status-dot { background: #f7c0ff; box-shadow: 0 0 0 5px rgba(247,192,255,.12); }
.employee-today-status.is-neutral .employee-status-dot { background: #d4dbe7; box-shadow: 0 0 0 5px rgba(212,219,231,.12); }
.employee-today-status strong,
.employee-today-status small { display: block; }
.employee-today-status strong { font-size: 12px; }
.employee-today-status small { margin-top: 3px; color: rgba(255,255,255,.66); font-size: 10.5px; line-height: 1.35; }
.employee-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.employee-stat-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(30, 56, 75, .08);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(30, 51, 72, .06);
}
.employee-stat-card::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    right: -28px;
    top: -28px;
    border-radius: 999px;
    background: var(--stat-soft, #eef5f4);
}
.employee-stat-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: var(--stat-color, #1f6d60);
    background: var(--stat-soft, #e8f6f2);
}
.stat-balance { --stat-color: #17725f; --stat-soft: #e2f6ef; }
.stat-year { --stat-color: #316fd0; --stat-soft: #e7efff; }
.stat-pending { --stat-color: #ae6a10; --stat-soft: #fff1d8; }
.stat-approved { --stat-color: #7d56b5; --stat-soft: #f0e9fb; }
.employee-stat-copy {
    position: relative;
    z-index: 1;
    margin-top: 14px;
}
.employee-stat-copy > span {
    display: block;
    color: #6d7787;
    font-size: 11.5px;
    font-weight: 750;
}
.employee-stat-copy > strong {
    display: block;
    margin-top: 6px;
    color: #172033;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -.025em;
}
.employee-stat-copy > strong small {
    font-size: 11px;
    color: #788494;
    font-weight: 750;
    letter-spacing: 0;
}
.employee-stat-copy p {
    margin: 7px 0 0;
    color: #8a94a3;
    font-size: 10.5px;
    line-height: 1.4;
}
.employee-balance-progress {
    height: 5px;
    margin-top: 15px;
    border-radius: 999px;
    background: #edf2f3;
    overflow: hidden;
}
.employee-balance-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #46b995, #1f6d60);
}
.employee-dashboard-content {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .72fr);
    gap: 16px;
    align-items: start;
}
.employee-dashboard-main,
.employee-dashboard-side {
    min-width: 0;
}
.employee-dashboard-side {
    display: grid;
    gap: 16px;
}
.employee-dashboard-panel {
    padding: 22px;
    border: 1px solid rgba(30, 56, 75, .08);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(30, 51, 72, .055);
}
.employee-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px;
}
.employee-panel-head span {
    display: block;
    color: #1f6d60;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .10em;
}
.employee-panel-head h2 {
    margin: 4px 0 0;
    font-size: 20px;
    letter-spacing: -.02em;
}
.employee-panel-head > a {
    color: #1f6d60;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}
.employee-panel-head > a:hover { text-decoration: underline; }
.employee-request-list {
    display: grid;
}
.employee-request-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 20px;
    gap: 12px;
    align-items: center;
    padding: 13px 2px;
    border-top: 1px solid #edf0f4;
    color: inherit;
    text-decoration: none;
    transition: background .16s ease, padding .16s ease;
}
.employee-request-item:first-child { border-top: 0; }
.employee-request-item:hover {
    margin: 0 -8px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 12px;
    background: #f8fbfa;
}
.employee-request-date {
    display: grid;
    place-items: center;
    min-height: 48px;
    border-radius: 13px;
    background: #edf8f4;
    color: #1f6d60;
}
.employee-request-date strong { font-size: 17px; line-height: 1; }
.employee-request-date span { margin-top: 3px; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.employee-request-info { min-width: 0; }
.employee-request-info strong,
.employee-request-info span,
.employee-request-info small { display: block; }
.employee-request-info strong {
    overflow: hidden;
    color: #202b3d;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.employee-request-info span {
    margin-top: 4px;
    color: #687485;
    font-size: 10.5px;
}
.employee-request-info small {
    margin-top: 3px;
    color: #98a1ae;
    font-size: 9.5px;
}
.employee-request-item .status-pill {
    white-space: nowrap;
    font-size: 9px;
}
.employee-request-arrow {
    width: 17px;
    height: 17px;
    color: #a9b1bc;
}
.employee-empty-state {
    display: grid;
    justify-items: center;
    padding: 38px 18px;
    text-align: center;
}
.employee-empty-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    border-radius: 18px;
    background: #edf8f4;
    color: #1f6d60;
}
.employee-empty-icon svg { width: 27px; height: 27px; }
.employee-empty-state strong { font-size: 13px; }
.employee-empty-state span { max-width: 360px; margin-top: 6px; color: #8b95a3; font-size: 11px; line-height: 1.55; }
.employee-quick-links {
    display: grid;
    gap: 5px;
}
.employee-quick-links > a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 11px;
    align-items: center;
    padding: 11px 8px;
    border-radius: 13px;
    color: inherit;
    text-decoration: none;
    transition: background .16s ease, transform .16s ease;
}
.employee-quick-links > a:hover {
    background: #f7f9fb;
    transform: translateX(2px);
}
.employee-quick-links > a > svg {
    width: 16px;
    height: 16px;
    color: #a6afba;
}
.quick-link-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
}
.quick-link-icon svg { width: 19px !important; height: 19px !important; }
.ql-green { color: #18705e; background: #e5f6f0; }
.ql-blue { color: #316fd0; background: #e8efff; }
.ql-orange { color: #ac6910; background: #fff0d6; }
.ql-purple { color: #7950ad; background: #f0e9fa; }
.employee-quick-links strong,
.employee-quick-links small { display: block; }
.employee-quick-links strong { color: #263043; font-size: 11.5px; }
.employee-quick-links small { margin-top: 3px; color: #8a94a3; font-size: 9.5px; line-height: 1.35; }
.employee-info-panel {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    background: linear-gradient(145deg, #f1f7ff, #f9fbff);
    border-color: #dfe9fa;
}
.employee-info-illustration {
    display: grid;
    place-items: center;
    width: 96px;
    height: 86px;
    border-radius: 18px;
    background: #e5eefc;
    color: #4777c3;
}
.employee-info-illustration svg {
    width: 80px;
    height: 65px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.employee-info-panel span { color: #4777c3; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.employee-info-panel strong { display: block; margin-top: 5px; color: #25334b; font-size: 11.5px; line-height: 1.45; }
.employee-info-panel p { margin: 6px 0 0; color: #738096; font-size: 9.5px; line-height: 1.5; }
@media (max-width: 1220px) {
    .employee-welcome-card { grid-template-columns: minmax(0, 1.4fr) minmax(230px, .7fr); }
    .employee-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .employee-dashboard-content { grid-template-columns: minmax(0, 1.35fr) minmax(270px, .75fr); }
}
@media (max-width: 980px) {
    .employee-welcome-card { grid-template-columns: 1fr; }
    .employee-welcome-side {
        align-items: flex-start;
        padding: 26px 0 0;
        text-align: left;
    }
    .employee-avatar-ring { width: 84px; height: 84px; }
    .employee-avatar { width: 62px; height: 62px; font-size: 21px; }
    .employee-today-status { max-width: 420px; }
    .employee-dashboard-content { grid-template-columns: 1fr; }
    .employee-dashboard-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .employee-dashboard-page { padding: 16px; }
    .employee-welcome-card { min-height: 0; padding: 25px 22px; border-radius: 21px; }
    .employee-welcome-copy h1 { font-size: 32px; }
    .employee-dashboard-stats { grid-template-columns: 1fr; }
    .employee-dashboard-side { grid-template-columns: 1fr; }
    .employee-request-item { grid-template-columns: 44px minmax(0, 1fr) 18px; }
    .employee-request-item .status-pill { grid-column: 2 / 4; justify-self: start; margin-top: -4px; }
    .employee-request-arrow { grid-column: 3; grid-row: 1; }
    .employee-info-panel { grid-template-columns: 78px minmax(0, 1fr); }
    .employee-info-illustration { width: 78px; height: 74px; }
    .employee-info-illustration svg { width: 65px; }
}
@media (max-width: 460px) {
    .employee-welcome-actions { display: grid; }
    .employee-primary-action,
    .employee-secondary-action { width: 100%; }
    .employee-profile-chips { display: grid; }
    .employee-profile-chips span { width: fit-content; }
    .employee-dashboard-panel { padding: 18px; }
}


/* v0.1.27c - Mobile reset & compact dashboard stats */
.sidebar-backdrop,
.mobile-topbar,
.sidebar-mobile-close {
    display: none;
}

/* Kartu ringkasan tetap tampil di desktop. */
.employee-dashboard-stats {
    display: grid;
}

.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    align-items: center;
    gap: 11px;
    min-height: 62px;
    margin: -18px -14px 14px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(23, 32, 51, .08);
    backdrop-filter: blur(12px);
}
.mobile-menu-toggle,
.sidebar-mobile-close {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #e8f2ef;
    color: #17483e;
    box-shadow: none;
}
.mobile-menu-toggle:hover,
.sidebar-mobile-close:hover {
    background: #dcece7;
}
.mobile-menu-toggle svg,
.sidebar-mobile-close svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mobile-topbar-copy {
    min-width: 0;
}
.mobile-topbar-copy strong,
.mobile-topbar-copy small {
    display: block;
}
.mobile-topbar-copy strong {
    color: #172033;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.15;
}
.mobile-topbar-copy small {
    overflow: hidden;
    margin-top: 3px;
    color: #718093;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar .brand {
    position: relative;
    padding-right: 50px;
}
.sidebar-mobile-close {
    position: absolute;
    top: 0;
    right: 0;
}

@media (max-width: 760px) {
    body.mobile-sidebar-open {
        overflow: hidden;
    }
    .mobile-topbar {
        display: flex;
    }
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 98;
        background: rgba(7, 18, 30, .42);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
    }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        width: min(292px, calc(100vw - 42px));
        height: 100dvh;
        transform: translateX(-108%);
        transition: transform .24s ease;
        box-shadow: 18px 0 46px rgba(5, 14, 24, .24);
    }
    .sidebar-mobile-close {
        display: inline-grid;
        place-items: center;
    }
    body.mobile-sidebar-open .sidebar {
        transform: translateX(0);
    }
    body.mobile-sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    .main-content {
        padding: 18px 14px 24px;
    }
    .employee-dashboard-page {
        padding: 0 14px 24px;
    }
    .employee-dashboard-page .mobile-topbar {
        margin: 0 -14px 14px;
    }

    /* Ringkasan mobile: compact, 2 kolom, tidak mencolok. */
    .employee-dashboard-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .employee-stat-card {
        min-height: 126px;
        padding: 13px;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(30, 51, 72, .045);
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .employee-stat-card::after {
        width: 54px;
        height: 54px;
        right: -20px;
        top: -20px;
        opacity: .55;
    }
    .employee-stat-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        transition: transform .22s ease;
    }
    .employee-stat-icon svg {
        width: 16px;
        height: 16px;
    }
    .employee-stat-copy {
        margin-top: 9px;
    }
    .employee-stat-copy > span {
        font-size: 9.5px;
        line-height: 1.25;
    }
    .employee-stat-copy > strong {
        margin-top: 4px;
        font-size: 20px;
    }
    .employee-stat-copy > strong small {
        font-size: 8.5px;
    }
    .employee-stat-copy p {
        display: none;
    }
    .employee-balance-progress {
        height: 3px;
        margin-top: 9px;
    }
    .employee-stat-card:hover {
        transform: translateY(-3px);
        border-color: rgba(31, 93, 80, .16);
        box-shadow: 0 9px 22px rgba(30, 51, 72, .08);
    }
    .employee-stat-card:hover .employee-stat-icon {
        transform: translateY(-2px) rotate(-3deg);
    }
    .employee-stat-card:active {
        transform: scale(.985);
    }
}

@media (max-width: 520px) {
    .employee-welcome-card {
        min-height: 0;
        padding: 20px 16px;
        border-radius: 18px;
    }
    .employee-welcome-copy h1 {
        font-size: 28px;
        line-height: 1.14;
    }
    .employee-welcome-message {
        font-size: 13px;
    }
    .employee-date-chip {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .employee-welcome-side {
        padding-top: 20px;
    }
    .employee-dashboard-panel {
        padding: 16px;
        border-radius: 16px;
    }
    .employee-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .employee-request-item {
        gap: 9px;
    }
    .employee-request-info strong {
        white-space: normal;
        line-height: 1.35;
    }
}

@media (max-width: 360px) {
    .employee-dashboard-stats {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-backdrop,
    .employee-stat-card,
    .employee-stat-icon {
        transition: none !important;
    }
}


/* v0.1.27d - dashboard desktop kembali tampil, tombol X dihapus */
.sidebar .brand {
    padding-right: 0;
}
.sidebar-mobile-close {
    display: none !important;
}

/* v0.1.27e - Smooth hover animation kartu dashboard */
.employee-stat-card,
.employee-stat-card::after,
.employee-stat-icon,
.employee-stat-copy,
.employee-stat-copy > strong,
.employee-balance-progress span {
    will-change: transform;
}

.employee-stat-card {
    transition:
        transform .34s cubic-bezier(.22, 1, .36, 1),
        box-shadow .34s ease,
        border-color .34s ease;
}

.employee-stat-card::after {
    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        opacity .35s ease;
}

.employee-stat-icon {
    transition:
        transform .38s cubic-bezier(.22, 1, .36, 1),
        box-shadow .35s ease;
}

.employee-stat-copy,
.employee-stat-copy > strong {
    transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}

.employee-balance-progress span {
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}

@keyframes employeeStatIconFloat {
    0% { transform: translateY(-2px) rotate(-2deg) scale(1.04); }
    100% { transform: translateY(-5px) rotate(2deg) scale(1.08); }
}

@keyframes employeeStatOrbFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-7px, 7px) scale(1.09); }
}

@media (hover: hover) and (pointer: fine) {
    .employee-stat-card:hover {
        transform: translateY(-7px) scale(1.012);
        border-color: rgba(31, 93, 80, .17);
        box-shadow: 0 20px 38px rgba(30, 51, 72, .13);
    }

    .employee-stat-card:hover::after {
        opacity: .9;
        animation: employeeStatOrbFloat 1.25s ease-in-out infinite alternate;
    }

    .employee-stat-card:hover .employee-stat-icon {
        box-shadow: 0 10px 20px color-mix(in srgb, var(--stat-color, #1f6d60) 18%, transparent);
        animation: employeeStatIconFloat 1.05s ease-in-out infinite alternate;
    }

    .employee-stat-card:hover .employee-stat-copy {
        transform: translateY(-1px);
    }

    .employee-stat-card:hover .employee-stat-copy > strong {
        transform: translateX(2px);
    }

    .employee-stat-card:hover .employee-balance-progress span {
        transform: scaleX(1.025);
        filter: brightness(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .employee-stat-card,
    .employee-stat-card::after,
    .employee-stat-icon,
    .employee-stat-copy,
    .employee-stat-copy > strong,
    .employee-balance-progress span {
        animation: none !important;
        transition: none !important;
    }
}


/* v0.1.27f - Logo perusahaan pada sidebar */
.brand-mark.brand-mark-company {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    padding: 4px;
    overflow: hidden;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(4, 22, 31, .22);
}
.brand-company-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}
.brand-logo-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--sidebar);
    font-weight: 900;
}
.brand-logo-fallback[hidden] {
    display: none;
}
@media (max-width: 760px) {
    .brand-mark.brand-mark-company {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 14px;
    }
}


/* v0.1.28 - Role separation & HRD hybrid dashboard */
.hrd-hybrid-section {
    padding: 22px;
    border: 1px solid rgba(28, 78, 69, .12);
    border-radius: 22px;
    background: linear-gradient(145deg, #eef8f5, #ffffff 62%);
    box-shadow: 0 12px 34px rgba(28, 65, 60, .07);
}
.hrd-hybrid-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 17px;
}
.hrd-hybrid-heading span {
    color: #1f6d60;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.hrd-hybrid-heading h2 {
    margin: 5px 0 0;
    font-size: 23px;
    letter-spacing: -.025em;
}
.hrd-hybrid-heading p {
    margin: 7px 0 0;
    color: #6d7787;
    font-size: 12px;
    line-height: 1.55;
}
.hrd-hybrid-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 11px;
}
.hrd-hybrid-stats a {
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(30, 78, 69, .09);
    border-radius: 16px;
    background: rgba(255,255,255,.88);
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hrd-hybrid-stats a:hover {
    transform: translateY(-3px);
    border-color: rgba(31,109,96,.28);
    box-shadow: 0 11px 24px rgba(30, 72, 65, .09);
}
.hrd-hybrid-stats span,
.hrd-hybrid-stats strong,
.hrd-hybrid-stats small { display: block; }
.hrd-hybrid-stats span { color: #657183; font-size: 10px; font-weight: 800; }
.hrd-hybrid-stats strong { margin-top: 7px; color: #173f39; font-size: 26px; }
.hrd-hybrid-stats small { margin-top: 4px; color: #8a94a3; font-size: 9.5px; line-height: 1.4; }
.hrd-hybrid-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.hrd-hybrid-links a {
    padding: 8px 11px;
    border-radius: 10px;
    background: #e1f2ed;
    color: #1c5d52;
    font-size: 10.5px;
    font-weight: 800;
    text-decoration: none;
}
.hrd-hybrid-links a:hover { background: #d3ebe4; }
@media (max-width: 1180px) {
    .hrd-hybrid-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .hrd-hybrid-section { padding: 17px; border-radius: 17px; }
    .hrd-hybrid-heading { flex-direction: column; }
    .hrd-hybrid-heading .button { width: 100%; }
    .hrd-hybrid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
    .hrd-hybrid-stats { grid-template-columns: 1fr; }
}

/* v0.1.30 - Manajemen Akun Super Admin */
.account-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.account-summary-grid article {
    display: grid;
    gap: 7px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(20,35,55,.045);
}
.account-summary-grid span { color: var(--muted); font-size: 12px; font-weight: 750; }
.account-summary-grid strong { font-size: 28px; color: var(--text); }
.account-editor-panel { border-color: rgba(31,93,80,.24); box-shadow: 0 16px 38px rgba(31,93,80,.09); }
.account-editor-info {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.account-editor-info > div {
    padding: 13px 14px;
    border-radius: 12px;
    background: #f6f9f8;
    border: 1px solid #e5eeeb;
}
.account-editor-info span,
.account-editor-info strong { display: block; }
.account-editor-info span { color: var(--muted); font-size: 11px; }
.account-editor-info strong { margin-top: 5px; font-size: 13px; }
.account-editor-form {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(210px, .7fr) minmax(280px, 1.2fr) auto;
    gap: 12px;
    align-items: end;
}
.account-editor-form small { color: var(--muted); font-weight: 500; line-height: 1.45; }
.account-active-check { min-height: 44px; align-content: center; padding-bottom: 0; }
.account-editor-actions { display: flex; align-items: end; }
.account-reset-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.account-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(180px, .8fr) minmax(180px, .8fr) minmax(120px, .5fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
}
.account-filter-actions { display: flex; gap: 8px; align-items: center; }
.account-table { min-width: 1080px; }
.account-table td { vertical-align: top; }
.account-table td strong,
.account-table td small,
.account-audit-table td strong,
.account-audit-table td small { display: block; }
.account-table td small,
.account-audit-table td small { margin-top: 4px; color: var(--muted); }
.account-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}
.account-pagination > div { display: flex; align-items: center; gap: 10px; }
.account-audit-table { min-width: 850px; }
.button.compact { padding: 8px 11px; border-radius: 9px; font-size: 12px; }
@media (max-width: 1180px) {
    .account-summary-grid,
    .account-editor-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-editor-form,
    .account-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-editor-actions,
    .account-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .account-summary-grid,
    .account-editor-info,
    .account-editor-form,
    .account-filter-grid,
    .account-reset-form { grid-template-columns: 1fr; }
    .account-editor-actions,
    .account-filter-actions { grid-column: auto; }
    .account-filter-actions { flex-direction: column; align-items: stretch; }
    .account-filter-actions > *,
    .account-editor-actions > *,
    .account-reset-form > button { width: 100%; }
    .account-pagination { flex-direction: column; align-items: stretch; }
    .account-pagination > div { justify-content: space-between; }
}

/* =========================================================
   v0.1.31 - Modern UI package (dashboard karyawan dipertahankan)
   ========================================================= */
.main-content:not(.employee-dashboard-page) {
    background:
        radial-gradient(circle at 88% 4%, rgba(52, 181, 151, .08), transparent 25%),
        radial-gradient(circle at 12% 1%, rgba(77, 129, 225, .07), transparent 22%),
        #f5f7fb;
}

.main-content:not(.employee-dashboard-page) .page-head {
    border-radius: 0 0 24px 24px;
    box-shadow: 0 10px 32px rgba(30, 52, 72, .06);
}

.main-content:not(.employee-dashboard-page) .topbar h1 {
    letter-spacing: -.035em;
}

.main-content:not(.employee-dashboard-page) .panel {
    border-color: rgba(31, 55, 74, .08);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(31, 50, 72, .055);
}

.main-content:not(.employee-dashboard-page) button,
.main-content:not(.employee-dashboard-page) .button {
    min-height: 42px;
    border-radius: 12px;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.main-content:not(.employee-dashboard-page) button:hover,
.main-content:not(.employee-dashboard-page) .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(27, 91, 77, .13);
}

.topbar-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 11px 7px 7px;
    border: 1px solid rgba(31, 55, 74, .09);
    border-radius: 14px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 7px 20px rgba(31,50,72,.05);
}

.topbar-user-chip > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: #176353;
    background: #e2f5ef;
    font-size: 13px;
    font-weight: 900;
}

.topbar-user-chip strong,
.topbar-user-chip small {
    display: block;
}

.topbar-user-chip strong {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.topbar-user-chip small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9.5px;
}

.notification-center {
    position: relative;
}

.notification-bell {
    position: relative;
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(31, 55, 74, .09) !important;
    border-radius: 14px !important;
    color: #29364a !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 7px 20px rgba(31,50,72,.055) !important;
}

.notification-bell:hover,
.notification-center.is-open .notification-bell {
    color: #176353 !important;
    background: #eaf7f3 !important;
    transform: translateY(-1px);
}

.notification-bell svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-bell > span {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: #e6473d;
    font-size: 9px;
    font-weight: 900;
    box-shadow: 0 5px 12px rgba(198, 48, 42, .25);
}

.notification-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 120;
    width: min(390px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid rgba(31, 55, 74, .09);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(22, 43, 61, .20);
    transform-origin: top right;
    animation: notificationPopoverIn .18s ease both;
}

@keyframes notificationPopoverIn {
    from { opacity: 0; transform: translateY(-7px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.notification-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 18px;
    border-bottom: 1px solid #edf0f4;
    background: linear-gradient(145deg, #f4fbf8, #fff);
}

.notification-popover-head strong,
.notification-popover-head small {
    display: block;
}

.notification-popover-head strong {
    font-size: 15px;
}

.notification-popover-head small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

.notification-popover-head > span {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    color: #fff;
    background: #1f6d60;
    font-size: 10px;
    font-weight: 900;
}

.notification-list {
    max-height: 370px;
    overflow-y: auto;
    padding: 7px;
}

.notification-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: center;
    padding: 12px 11px;
    border-radius: 13px;
    text-decoration: none;
    transition: background .16s ease, transform .16s ease;
}

.notification-item:hover {
    background: #f6f9fb;
    transform: translateX(2px);
}

.notification-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #aeb7c4;
    box-shadow: 0 0 0 5px rgba(174,183,196,.12);
}
.notification-item.is-warning .notification-item-dot { background: #f0a126; box-shadow: 0 0 0 5px rgba(240,161,38,.12); }
.notification-item.is-info .notification-item-dot { background: #4b83dd; box-shadow: 0 0 0 5px rgba(75,131,221,.12); }
.notification-item.is-danger .notification-item-dot { background: #e15b54; box-shadow: 0 0 0 5px rgba(225,91,84,.12); }
.notification-item.is-neutral .notification-item-dot { background: #7757b7; box-shadow: 0 0 0 5px rgba(119,87,183,.12); }

.notification-item strong,
.notification-item small {
    display: block;
}

.notification-item strong {
    color: #263144;
    font-size: 11.5px;
    line-height: 1.4;
}

.notification-item small {
    margin-top: 4px;
    color: #7e8998;
    font-size: 9.5px;
    line-height: 1.45;
}

.notification-item > svg {
    width: 17px;
    height: 17px;
    color: #a2acb8;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-empty {
    display: grid;
    justify-items: center;
    padding: 28px 16px;
    text-align: center;
}

.notification-empty strong {
    color: #263144;
    font-size: 12px;
}

.notification-empty span {
    max-width: 260px;
    margin-top: 6px;
    color: #8b95a3;
    font-size: 10px;
    line-height: 1.5;
}

.nav-notification-badge,
.submenu-notification-badge {
    display: inline-grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 999px;
    color: #fff;
    background: #ed4f45;
    font-size: 9px;
    font-weight: 900;
    box-shadow: 0 5px 13px rgba(215, 49, 43, .27);
    animation: navBadgePulse 2.2s ease-in-out infinite;
}

.submenu-notification-badge {
    min-width: 19px;
    height: 19px;
    margin-left: 8px;
    font-size: 8px;
}

@keyframes navBadgePulse {
    0%, 70%, 100% { transform: scale(1); }
    78% { transform: scale(1.13); }
    86% { transform: scale(1); }
    93% { transform: scale(1.08); }
}

.sidebar .menu-group-inner a {
    display: flex;
    align-items: center;
}

.modern-selfservice-page,
.modern-approval-page {
    display: grid;
    gap: 18px;
}

.modern-stat-grid {
    gap: 14px;
}

.modern-stat-grid .selfservice-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 142px;
    padding: 20px;
    border: 1px solid var(--card-border, #dce7e4);
    border-radius: 19px;
    background: linear-gradient(145deg, #fff 45%, var(--card-soft, #eef8f5));
    box-shadow: 0 10px 28px rgba(31, 51, 72, .065);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.modern-stat-grid .selfservice-stat-card::before {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    top: -42px;
    right: -34px;
    border-radius: 999px;
    background: var(--card-accent-soft, rgba(28, 149, 119, .10));
    transition: transform .32s ease;
}

.modern-stat-grid .selfservice-stat-card::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 4px;
    border-radius: 999px 999px 0 0;
    background: var(--card-accent, #1e8b72);
    opacity: .85;
}

.modern-stat-grid .selfservice-stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--card-accent, #1e8b72);
    box-shadow: 0 18px 38px rgba(31, 51, 72, .11);
}

.modern-stat-grid .selfservice-stat-card:hover::before {
    transform: translate(-8px, 8px) scale(1.08);
}

.selfservice-stat-card.is-green { --card-accent:#1f9b7d; --card-soft:#edf9f5; --card-border:#ccece2; --card-accent-soft:rgba(31,155,125,.12); }
.selfservice-stat-card.is-blue { --card-accent:#4b83dd; --card-soft:#f0f5ff; --card-border:#d7e3fa; --card-accent-soft:rgba(75,131,221,.12); }
.selfservice-stat-card.is-purple { --card-accent:#805bc1; --card-soft:#f5f0fd; --card-border:#e5d9f6; --card-accent-soft:rgba(128,91,193,.12); }
.selfservice-stat-card.is-orange { --card-accent:#e59427; --card-soft:#fff7e9; --card-border:#f4e0bd; --card-accent-soft:rgba(229,148,39,.13); }

.modern-stat-grid .selfservice-stat-card > span {
    position: relative;
    z-index: 1;
    color: #647084;
    font-size: 11.5px;
    font-weight: 800;
}

.modern-stat-grid .selfservice-stat-card > strong {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    color: #172033;
    font-size: 31px;
    letter-spacing: -.035em;
}

.modern-stat-grid .selfservice-stat-card > small {
    position: relative;
    z-index: 1;
    margin-top: 7px;
    color: #8490a0;
    font-size: 10px;
}

.modern-action-banner {
    position: relative;
    overflow: hidden;
    border: 1px solid #cfe8e0;
    border-radius: 18px;
    background: linear-gradient(135deg, #eaf8f4, #f8fcfb);
    box-shadow: 0 8px 24px rgba(31, 91, 76, .06);
}

.modern-action-banner::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -55px;
    top: -70px;
    border-radius: 999px;
    background: rgba(56, 174, 144, .09);
}

.modern-action-banner > * {
    position: relative;
    z-index: 1;
}

.modern-content-panel {
    overflow: hidden;
}

.modern-content-panel > .panel-header {
    margin: -22px -22px 18px;
    padding: 20px 22px;
    border-bottom: 1px solid #edf0f4;
    background: linear-gradient(145deg, #fbfdfd, #f5faf8);
}

.modern-content-panel .panel-header h2 {
    color: #172033;
    letter-spacing: -.025em;
}

.modern-data-table {
    min-width: 760px;
}

.modern-data-table th {
    background: #f7faf9;
    color: #647084;
}

.modern-data-table tbody tr {
    transition: background .16s ease, transform .16s ease;
}

.modern-data-table tbody tr:hover {
    background: #f6fbf9;
}

.modern-data-table td strong,
.modern-data-table td small {
    display: block;
}

.modern-request-form {
    gap: 14px;
}

.modern-request-form > label,
.modern-request-form > .route-self-note {
    min-width: 0;
    padding: 15px;
    border: 1px solid #e3e9ef;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(31,50,72,.035);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.modern-request-form > label:focus-within {
    border-color: #58aa96;
    box-shadow: 0 0 0 4px rgba(57, 158, 133, .10), 0 9px 24px rgba(31,50,72,.06);
    transform: translateY(-1px);
}

.modern-request-form input,
.modern-request-form select,
.modern-request-form textarea {
    border-color: #d9e1e8;
    background: #fbfcfd;
}

.modern-request-form textarea {
    resize: vertical;
}

.modern-request-form .request-submit-row {
    padding: 16px 18px;
    border: 1px solid #cee7df;
    border-radius: 16px;
    background: linear-gradient(135deg, #effaf6, #fff);
}

.modern-request-form .request-submit-row button {
    min-width: 180px;
    background: linear-gradient(135deg, #1f7867, #1c9a7c);
    box-shadow: 0 10px 25px rgba(31, 120, 103, .18);
}

.modern-approval-panel .request-card-list {
    gap: 14px;
}

.modern-approval-panel .request-approval-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e0e7ec;
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #fbfdfd);
    box-shadow: 0 9px 26px rgba(31, 50, 72, .055);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.modern-approval-panel .request-approval-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(#f0aa31, #e68a1f);
}

.modern-approval-panel .request-approval-card:hover {
    transform: translateY(-3px);
    border-color: #d6e5df;
    box-shadow: 0 18px 38px rgba(31, 50, 72, .10);
}

.modern-approval-panel .request-reason-box {
    border-radius: 14px;
    background: #f7faf9;
}

.modern-approval-panel .approval-action-form {
    padding: 13px;
    border: 1px solid #e3e9ee;
    border-radius: 14px;
    background: #fbfcfd;
}

.modern-approval-history-page .approval-history-summary article {
    transition: transform .2s ease, box-shadow .2s ease;
}

.modern-approval-history-page .approval-history-summary article:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(31,50,72,.09);
}

.modern-approval-history-page .approval-history-filter input,
.modern-approval-history-page .approval-history-filter select {
    background: #fbfcfd;
}

@media (max-width: 1000px) {
    .topbar-user-chip {
        display: none;
    }

    .modern-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .notification-center.is-desktop {
        display: none;
    }

    .notification-center.is-mobile {
        margin-left: auto;
    }

    .notification-center.is-mobile .notification-bell {
        width: 40px;
        height: 40px;
        min-height: 40px !important;
        border-radius: 12px !important;
    }

    .notification-center.is-mobile .notification-popover {
        position: fixed;
        top: 64px;
        right: 10px;
        width: min(390px, calc(100vw - 20px));
    }

    .modern-content-panel > .panel-header {
        margin: -18px -18px 16px;
        padding: 17px 18px;
    }

    .modern-request-form > label,
    .modern-request-form > .route-self-note {
        padding: 13px;
    }

    .modern-approval-panel .request-actions-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .modern-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .modern-stat-grid .selfservice-stat-card {
        min-height: 126px;
        padding: 15px;
        border-radius: 16px;
    }

    .modern-stat-grid .selfservice-stat-card > strong {
        font-size: 24px;
    }

    .modern-stat-grid .selfservice-stat-card > span {
        font-size: 10px;
        line-height: 1.35;
    }

    .modern-stat-grid .selfservice-stat-card > small {
        font-size: 8.8px;
        line-height: 1.4;
    }

    .modern-action-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .modern-action-banner .button {
        width: 100%;
    }

    .modern-request-form .request-submit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .modern-request-form .request-submit-row button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-notification-badge,
    .submenu-notification-badge {
        animation: none;
    }

    .modern-stat-grid .selfservice-stat-card,
    .modern-approval-panel .request-approval-card,
    .notification-popover {
        transition: none;
        animation: none;
    }
}


/* Hotfix v0.1.31a - tabel riwayat cuti modern */
.leave-history-panel {
    border-color: #dfe9e6;
    box-shadow: 0 12px 32px rgba(31, 72, 63, .065);
}

.leave-history-panel > .panel-header {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 10%, rgba(47, 164, 133, .12), transparent 24%),
        linear-gradient(135deg, #fbfefd, #f0f8f5);
}

.leave-history-panel > .panel-header::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -48px;
    top: -62px;
    border-radius: 999px;
    border: 20px solid rgba(48, 154, 128, .07);
    pointer-events: none;
}

.leave-history-panel > .panel-header > * {
    position: relative;
    z-index: 1;
}

.leave-history-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 9px 14px;
    border: 1px solid #cde7df;
    border-radius: 999px;
    background: #eaf8f3;
    color: #176b59;
    font-size: 14px;
    font-weight: 850;
    white-space: nowrap;
}

.leave-usage-table-wrap {
    overflow: hidden;
    border: 1px solid #e3ebe8;
    border-radius: 15px;
    background: #fff;
}

.leave-usage-table {
    min-width: 600px;
}

.leave-usage-table thead th {
    padding: 14px 15px;
    border-bottom: 1px solid #dce8e4;
    background: linear-gradient(180deg, #f6faf9, #eff6f4);
    color: #526476;
    font-size: 11px;
    letter-spacing: .055em;
}

.leave-usage-table tbody tr {
    background: #fff;
    transition: background .18s ease, box-shadow .18s ease;
}

.leave-usage-table tbody tr:nth-child(even) {
    background: #fbfdfc;
}

.leave-usage-table tbody tr:hover {
    background: #f1faf7;
    box-shadow: inset 4px 0 0 #39a786;
}

.leave-usage-table td {
    padding: 15px;
    border-bottom-color: #e7eeeb;
}

.leave-usage-table tbody tr:last-child td {
    border-bottom: 0;
}

.leave-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #203044;
    font-weight: 750;
}

.leave-date-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #33a987;
    box-shadow: 0 0 0 5px rgba(51, 169, 135, .11);
}

.leave-duration-value {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #eef5ff;
    color: #376cb6;
}

.leave-duration-value strong {
    font-size: 15px;
    line-height: 1;
}

.leave-duration-value small {
    color: #6d83a1;
    font-size: 10px;
    font-weight: 750;
}

.leave-approved-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #e8f8ef;
    color: #177245;
    border: 1px solid #ccebd9;
    font-weight: 800;
}

.leave-approved-badge::before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #2ea66d;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}

@media (max-width: 680px) {
    .leave-history-total {
        min-width: 0;
        padding: 7px 11px;
        font-size: 12px;
    }

    .leave-usage-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .leave-usage-table {
        min-width: 0;
        display: block;
    }

    .leave-usage-table thead {
        display: none;
    }

    .leave-usage-table tbody {
        display: grid;
        gap: 10px;
    }

    .leave-usage-table tbody tr {
        display: grid;
        overflow: hidden;
        border: 1px solid #e0ebe7;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 7px 20px rgba(31, 72, 63, .05);
    }

    .leave-usage-table tbody tr:hover {
        box-shadow: 0 9px 24px rgba(31, 72, 63, .08);
    }

    .leave-usage-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px 14px;
        border-bottom: 1px dashed #e5ecea;
        text-align: right;
    }

    .leave-usage-table td::before {
        content: attr(data-label);
        color: #788596;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .035em;
        text-transform: uppercase;
        text-align: left;
    }

    .leave-usage-table td:last-child {
        border-bottom: 0;
    }

    .leave-usage-table td.empty,
    .leave-usage-table td[colspan] {
        display: block;
        padding: 24px 16px;
        text-align: center;
    }

    .leave-usage-table td.empty::before,
    .leave-usage-table td[colspan]::before {
        display: none;
    }
}


/* Hotfix v0.1.31b - visual-only Riwayat Cuti */
.leave-history-panel {
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(38, 111, 93, .13);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #fbfdfc);
    box-shadow: 0 18px 44px rgba(27, 68, 60, .08);
}

.leave-history-panel > .panel-header {
    margin: 0;
    padding: 24px 26px;
    border-bottom: 1px solid rgba(39, 102, 87, .10);
    background:
        linear-gradient(135deg, rgba(232, 248, 243, .95), rgba(247, 252, 250, .98)),
        #f6fbf9;
}

.leave-history-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.leave-history-heading > div {
    min-width: 0;
}

.leave-history-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(40, 115, 95, .14);
}

.leave-history-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.leave-history-icon.is-previous {
    color: #16705d;
    background: linear-gradient(145deg, #dff7ef, #c9efe2);
}

.leave-history-icon.is-current {
    color: #346fd1;
    background: linear-gradient(145deg, #e8f0ff, #dbe7ff);
}

.leave-history-heading h2 {
    margin: 2px 0 0;
    color: #15253b;
    font-size: clamp(21px, 2vw, 28px);
    letter-spacing: -.025em;
}

.leave-history-subtitle {
    margin: 7px 0 0;
    color: #748193;
    font-size: 12px;
    line-height: 1.5;
}

.leave-history-total {
    position: relative;
    min-width: 102px;
    padding: 10px 16px;
    border: 1px solid rgba(42, 144, 117, .18);
    background: rgba(255,255,255,.76);
    color: #176b59;
    box-shadow: 0 8px 20px rgba(31, 93, 80, .08);
    backdrop-filter: blur(8px);
}

.leave-usage-table-wrap {
    margin: 20px 22px 24px;
    border-radius: 16px;
    border-color: #e0ebe7;
    box-shadow: 0 8px 22px rgba(24, 62, 54, .035);
}

.leave-usage-table thead th {
    padding: 15px 18px;
    background: #f4f8f7;
    color: #526172;
}

.leave-usage-table td {
    padding: 16px 18px;
}

.leave-usage-table tbody tr {
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

@media (hover: hover) and (pointer: fine) {
    .leave-usage-table tbody tr:hover {
        transform: translateY(-1px);
        background: #f3faf7;
        box-shadow: inset 4px 0 0 #39a786, 0 7px 18px rgba(41, 104, 88, .055);
    }

    .leave-history-panel:hover .leave-history-icon {
        transform: translateY(-2px) rotate(-2deg);
    }

    .leave-history-icon {
        transition: transform .22s ease, box-shadow .22s ease;
    }
}

@media (max-width: 680px) {
    .leave-history-panel {
        border-radius: 18px;
    }

    .leave-history-panel > .panel-header {
        padding: 18px 16px;
        gap: 14px;
    }

    .leave-history-heading {
        align-items: flex-start;
        gap: 11px;
    }

    .leave-history-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px;
    }

    .leave-history-icon svg {
        width: 20px;
        height: 20px;
    }

    .leave-history-heading h2 {
        font-size: 20px;
        line-height: 1.25;
    }

    .leave-history-subtitle {
        display: none;
    }

    .leave-history-total {
        align-self: flex-start;
        min-width: 0;
        margin-left: auto;
    }

    .leave-usage-table-wrap {
        margin: 14px 14px 18px;
    }
}

/* =========================================================
   v0.1.32 - Flexible Schedule Management
   Scoped agar dashboard karyawan tetap sama.
   ========================================================= */
.schedule-workspace{display:grid;gap:22px}.schedule-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:30px 32px;border-radius:28px;color:#fff;background:linear-gradient(135deg,#173c74 0%,#1f6d97 52%,#2b9b8f 100%);box-shadow:0 22px 48px rgba(21,67,113,.2)}.schedule-hero:before,.schedule-hero:after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.1)}.schedule-hero:before{width:220px;height:220px;right:-75px;top:-105px}.schedule-hero:after{width:150px;height:150px;left:42%;bottom:-110px}.schedule-hero>div{position:relative;z-index:1}.schedule-hero-kicker{display:inline-flex;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.schedule-hero h1{max-width:650px;margin:12px 0 8px;font-size:clamp(25px,3vw,38px);line-height:1.12}.schedule-hero p{max-width:720px;margin:0;color:rgba(255,255,255,.82);font-size:14px}.schedule-hero-badges{display:grid;grid-template-columns:repeat(3,minmax(95px,1fr));gap:10px;min-width:340px}.schedule-hero-badges span{display:grid;gap:3px;padding:14px 12px;border:1px solid rgba(255,255,255,.16);border-radius:17px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);text-align:center;font-size:11px;color:rgba(255,255,255,.78)}.schedule-hero-badges strong{font-size:22px;color:#fff}.schedule-pattern-showcase{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.schedule-pattern-card{position:relative;min-height:190px;padding:18px;border:1px solid #e3ebf4;border-radius:22px;background:linear-gradient(180deg,#fff,#f8fbfe);box-shadow:0 10px 26px rgba(35,69,105,.07);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.schedule-pattern-card:hover{transform:translateY(-3px);box-shadow:0 17px 34px rgba(35,69,105,.12);border-color:#c8daec}.schedule-pattern-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.schedule-pattern-top span{display:inline-flex;padding:6px 10px;border-radius:10px;background:#e8f2ff;color:#245f9f;font-size:11px;font-weight:900}.schedule-pattern-top small{font-size:10px;color:#6e8094;font-weight:800}.schedule-pattern-card h3{margin:15px 0 10px;color:#163453;font-size:17px}.schedule-pattern-card p{margin:12px 0 0;color:#687c90;font-size:12px;line-height:1.55}.schedule-sequence{display:flex;flex-wrap:wrap;gap:5px}.schedule-sequence span{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#edf3f9;color:#36546f;font-size:11px;font-weight:900}.schedule-sequence .token-1{background:#dff6ea;color:#178159}.schedule-sequence .token-2{background:#e8efff;color:#335fc8}.schedule-sequence .token-3{background:#f1e9ff;color:#7449bd}.schedule-sequence .token-d{background:#dcf5f1;color:#147b70}.schedule-sequence .token-0{background:#f2f4f7;color:#7c8996}.schedule-pattern-card.code-4a .schedule-pattern-top span{background:#fff0df;color:#b26314}.schedule-pattern-card.code-9 .schedule-pattern-top span{background:#efe8ff;color:#7043bb}.schedule-grid-two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:18px}.schedule-form-card{border:1px solid #e1e9f2;border-radius:24px;box-shadow:0 13px 32px rgba(41,72,105,.08)}.schedule-form-card .panel-header{padding-bottom:14px;border-bottom:1px solid #edf1f5}.schedule-step-badge{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,#2387dc,#2b66bb);color:#fff;font-size:15px;font-weight:900;box-shadow:0 10px 22px rgba(35,113,194,.25)}.schedule-step-badge.is-purple{background:linear-gradient(135deg,#7654d4,#a35dcc);box-shadow:0 10px 22px rgba(118,84,212,.25)}.schedule-form{display:grid;gap:15px;margin-top:18px}.schedule-form label{display:grid;gap:7px;color:#32475b;font-size:12px;font-weight:800}.schedule-form label small{font-size:10px;font-weight:600;color:#8393a4}.schedule-form input,.schedule-form select{width:100%;min-height:43px;border:1px solid #d8e2ec;border-radius:12px;background:#fbfdff;color:#20394f;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.schedule-form input:focus,.schedule-form select:focus{border-color:#4d9ad2;background:#fff;box-shadow:0 0 0 4px rgba(62,144,205,.12)}.schedule-form select[multiple]{min-height:205px;padding:7px}.schedule-form select[multiple] option{padding:8px;border-radius:7px}.schedule-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.schedule-form-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}.schedule-time-overrides{border:1px dashed #cbd9e6;border-radius:15px;background:#f8fbfd}.schedule-time-overrides summary{display:flex;justify-content:space-between;gap:10px;padding:13px 15px;cursor:pointer;color:#2f526c;font-size:12px;font-weight:900}.schedule-time-overrides summary span{color:#8798a8;font-size:10px}.schedule-time-overrides>p{margin:0;padding:0 15px 8px;color:#75889b;font-size:11px}.schedule-time-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:8px 15px 15px}.schedule-check{display:flex!important;grid-template-columns:none!important;align-items:center;gap:9px!important;padding:11px 13px;border-radius:13px;background:#eef8f5;color:#285f58!important}.schedule-check input{width:17px!important;min-height:auto!important;height:17px}.schedule-check.compact{padding:7px 9px;font-size:11px}.schedule-form-actions{display:flex;justify-content:flex-end}.schedule-form-actions button{min-height:44px;padding:0 18px;border-radius:13px;background:linear-gradient(135deg,#1b8a78,#2d9e88);box-shadow:0 10px 20px rgba(31,139,120,.2)}.schedule-form-actions .purple-button{background:linear-gradient(135deg,#7453d0,#9f5cc8);box-shadow:0 10px 20px rgba(116,83,208,.22)}.schedule-form-intro{margin:15px 0 0;padding:12px 14px;border-radius:14px;background:#f6f1ff;color:#705d8b;font-size:12px;line-height:1.55}.schedule-custom-preview{display:grid;gap:3px;padding:16px;border-radius:17px;background:linear-gradient(135deg,#eef4ff,#f5edff);border:1px solid #e2ddf7}.schedule-custom-preview span{color:#6c5b8d;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.schedule-custom-preview strong{color:#313f70;font-size:21px}.schedule-custom-preview small{color:#8791a5}.schedule-assignment-panel,.schedule-calendar-panel{border:1px solid #e0e8f1;border-radius:24px;box-shadow:0 13px 32px rgba(41,72,105,.07)}.schedule-filter-bar{display:flex;align-items:end;flex-wrap:wrap;gap:10px;margin:14px 0 18px;padding:13px;border-radius:15px;background:#f6f9fc}.schedule-filter-bar label{display:grid;gap:5px;min-width:190px;color:#516779;font-size:11px;font-weight:800}.schedule-filter-bar input,.schedule-filter-bar select{min-height:39px;border-radius:11px}.schedule-filter-bar button{min-height:39px}.schedule-assignment-list{display:grid;gap:10px}.schedule-assignment-item{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px;border:1px solid #e5ebf1;border-radius:18px;background:#fff;transition:background .18s ease,border-color .18s ease,transform .18s ease}.schedule-assignment-item:hover{transform:translateY(-1px);border-color:#cfdce8;background:#fbfdff}.schedule-assignment-code{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#e9f3ff,#dfeeff);color:#26629b;font-size:16px;font-weight:950}.schedule-assignment-main>div:first-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}.schedule-assignment-main strong{color:#183953;font-size:14px}.schedule-assignment-main span{color:#7a8b9b;font-size:11px}.schedule-assignment-main h3{margin:5px 0 7px;color:#315b76;font-size:13px}.schedule-assignment-meta{display:flex;flex-wrap:wrap;gap:6px}.schedule-assignment-meta span{padding:5px 8px;border-radius:8px;background:#f1f5f9;color:#607588;font-size:10px}.schedule-assignment-actions{position:relative}.schedule-assignment-actions>summary{list-style:none;cursor:pointer;padding:8px 12px;border-radius:10px;background:#eef4f8;color:#45647b;font-size:11px;font-weight:900}.schedule-assignment-actions>summary::-webkit-details-marker{display:none}.schedule-assignment-actions[open]{min-width:260px}.schedule-assignment-actions[open]>summary{margin-bottom:8px}.schedule-assignment-actions form{display:grid;gap:7px;padding:10px;border:1px solid #e1e8ef;border-radius:12px;background:#fff}.schedule-assignment-actions form+form{margin-top:8px}.schedule-assignment-actions label{display:grid;gap:4px;font-size:10px;font-weight:800;color:#617486}.schedule-assignment-actions input{min-height:35px;border-radius:9px}.schedule-assignment-actions button{min-height:36px;border-radius:9px;font-size:11px}.danger-button{background:#fff1f1!important;color:#bf3e49!important;border:1px solid #f2ced1!important;box-shadow:none!important}.schedule-empty-state{display:grid;place-items:center;gap:4px;min-height:120px;border:1px dashed #cfdbe5;border-radius:16px;background:#fafcfe;color:#718496;text-align:center}.schedule-empty-state strong{color:#3b586e}.schedule-table-wrap{border:1px solid #e3eaf1;border-radius:16px}.schedule-table{min-width:1200px}.schedule-table thead th{background:linear-gradient(180deg,#f5f9fc,#edf3f8);color:#435f75;font-size:10px;text-transform:uppercase;letter-spacing:.05em}.schedule-table tbody tr{transition:background .16s ease}.schedule-table tbody tr:hover{background:#f8fbfd}.schedule-table td strong{display:block;color:#253f53;font-size:12px}.schedule-table td small{display:block;margin-top:3px;color:#8393a2;font-size:10px}.schedule-code-pill{display:inline-grid;place-items:center;min-width:32px;height:27px;padding:0 8px;border-radius:9px;background:#e6f2ff;color:#2867a1;font-size:11px;font-weight:950}.schedule-shift-pill{display:inline-grid;place-items:center;min-width:29px;height:29px;padding:0 8px;border-radius:10px;background:#eef2f6;color:#637487;font-size:11px;font-weight:950}.schedule-shift-pill.is-1,.schedule-shift-pill.is-d{background:#dff5e9;color:#167b54}.schedule-shift-pill.is-2{background:#e6edff;color:#355fc4}.schedule-shift-pill.is-3{background:#efe6ff;color:#7447ba}.schedule-shift-pill.is-0,.schedule-shift-pill.is-off{background:#f1f3f6;color:#7d8994}.schedule-source{display:inline-flex;padding:5px 8px;border-radius:8px;font-size:10px;font-weight:900}.schedule-source.is-pattern{background:#e3f6ef;color:#1c7a61}.schedule-source.is-manual{background:#f1e9ff;color:#7046ac}.schedule-migration-card{display:flex;align-items:center;gap:18px;border-radius:22px;border:1px solid #f1d49a;background:#fffaf0}.schedule-migration-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#ffe7b9;color:#ac6b08;font-size:23px;font-weight:950}.schedule-migration-card h2{margin:3px 0 5px}.schedule-migration-card p{margin:0;color:#77664e}.schedule-migration-card code{padding:3px 6px;border-radius:6px;background:#f4ead5}.schedule-table .badge-off{background:#eef1f4;color:#6d7b88}.schedule-table .badge-holiday{background:#fff2de;color:#a76a18}
@media(max-width:1250px){.schedule-pattern-showcase{grid-template-columns:repeat(3,minmax(0,1fr))}.schedule-grid-two{grid-template-columns:1fr}.schedule-time-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.schedule-hero{align-items:flex-start;flex-direction:column}.schedule-hero-badges{min-width:0;width:100%}.schedule-pattern-showcase{grid-template-columns:repeat(2,minmax(0,1fr))}.schedule-form-row.three{grid-template-columns:1fr 1fr}.schedule-assignment-item{grid-template-columns:50px minmax(0,1fr)}.schedule-assignment-actions{grid-column:1/-1}.schedule-assignment-actions[open]{min-width:0}.schedule-filter-bar label{min-width:160px;flex:1}}
@media(max-width:680px){.schedule-workspace{gap:15px}.schedule-hero{padding:23px 20px;border-radius:22px}.schedule-hero-badges{grid-template-columns:repeat(3,1fr)}.schedule-hero-badges span{padding:10px 5px;font-size:9px}.schedule-hero-badges strong{font-size:17px}.schedule-pattern-showcase{grid-template-columns:1fr}.schedule-pattern-card{min-height:0}.schedule-form-card,.schedule-assignment-panel,.schedule-calendar-panel{border-radius:19px}.schedule-form-row,.schedule-form-row.three,.schedule-time-grid{grid-template-columns:1fr}.schedule-filter-bar{align-items:stretch;flex-direction:column}.schedule-filter-bar label{min-width:0;width:100%}.schedule-assignment-item{padding:12px}.schedule-assignment-code{width:44px;height:44px;border-radius:13px}.schedule-table-wrap{overflow:visible;border:0}.schedule-table{min-width:0;border-collapse:separate;border-spacing:0 10px}.schedule-table thead{display:none}.schedule-table tbody,.schedule-table tr,.schedule-table td{display:block;width:100%}.schedule-table tr{padding:12px 13px;border:1px solid #e0e8ef;border-radius:16px;background:#fff;box-shadow:0 7px 18px rgba(45,74,102,.06)}.schedule-table td{display:grid;grid-template-columns:105px minmax(0,1fr);align-items:start;gap:8px;padding:7px 0!important;border:0!important}.schedule-table td:before{content:attr(data-label);color:#7b8d9d;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.schedule-table td form{justify-self:start}}


/* Hotfix v0.1.32b - Form jadwal dinamis dan pencarian karyawan */
.schedule-employee-picker {
    display: grid;
    gap: 9px;
}

.schedule-employee-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

.schedule-employee-search-row input[type="search"],
.schedule-employee-search {
    padding-left: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23667b8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 17px;
}

.schedule-selected-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    padding: 0 12px;
    border-radius: 11px;
    background: #e8f6f1;
    color: #1c7564;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.schedule-employee-picker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.schedule-employee-picker-actions button {
    min-height: 34px !important;
    padding: 7px 11px !important;
    border-radius: 9px !important;
    font-size: 10px;
}

.schedule-employee-picker select[multiple] {
    min-height: 220px;
}

#pattern_rotation_fields[hidden],
#pattern_time_overrides[hidden],
.schedule-time-grid label[hidden] {
    display: none !important;
}

@media (max-width: 680px) {
    .schedule-employee-search-row {
        grid-template-columns: 1fr;
    }
    .schedule-selected-count {
        justify-self: start;
    }
    .schedule-employee-picker-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .schedule-employee-picker-actions button {
        width: 100%;
    }
}

/* Patch v0.1.32c - Import jadwal massal */
.schedule-import-panel {
    overflow: hidden;
    padding: 0;
    border: 1px solid #dce7ef;
    background: linear-gradient(135deg, #ffffff 0%, #f5fbfa 56%, #eef5ff 100%);
}
.schedule-import-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr);
    align-items: center;
    gap: 24px;
    padding: 22px;
}
.schedule-import-copy {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}
.schedule-import-icon {
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    background: linear-gradient(135deg, #198a78, #35a992);
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(30, 142, 122, .22);
}
.schedule-import-copy h2 { margin: 2px 0 7px; color: #173b52; }
.schedule-import-copy p:not(.eyebrow) { max-width: 760px; margin: 0; color: #677d8f; line-height: 1.55; }
.schedule-import-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.schedule-import-links > a:not(.button) { color: #1d7668; font-size: 12px; font-weight: 850; text-decoration: none; }
.schedule-import-links > a:not(.button):hover { text-decoration: underline; }
.schedule-import-form {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #d9e6ee;
    border-radius: 17px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 10px 28px rgba(38, 71, 96, .07);
}
.schedule-import-form label { gap: 7px; }
.schedule-import-form input[type="file"] { min-height: 47px; padding: 10px; border-radius: 12px; background: #fafdff; }
.schedule-import-form small { color: #8192a1; font-size: 10px; }
.schedule-import-form button { width: 100%; background: linear-gradient(135deg, #177d6e, #2c9b87); }
.schedule-import-result { border-color: #dce7ef; }
.schedule-import-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.schedule-import-summary > div { display: grid; gap: 5px; padding: 16px; border: 1px solid #e1e9f0; border-radius: 15px; background: #f9fbfd; }
.schedule-import-summary span { color: #748697; font-size: 11px; font-weight: 800; }
.schedule-import-summary strong { color: #163953; font-size: 25px; }
.schedule-import-summary .has-error { border-color: #f0c8cc; background: #fff4f5; }
.schedule-import-summary .has-error strong { color: #b53f49; }
.schedule-import-error-table { max-height: 380px; border: 1px solid #e3e9ef; border-radius: 14px; }
.schedule-import-error-table table { min-width: 760px; }
.schedule-import-error-table th { position: sticky; top: 0; background: #f2f6f9; z-index: 1; }

@media (max-width: 1050px) {
    .schedule-import-layout { grid-template-columns: 1fr; }
    .schedule-import-form { max-width: none; }
}
@media (max-width: 680px) {
    .schedule-import-layout { padding: 17px; }
    .schedule-import-copy { flex-direction: column; }
    .schedule-import-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .schedule-import-links { align-items: stretch; flex-direction: column; }
    .schedule-import-links .button { width: 100%; }
}

/* =========================================================
   Hotfix v0.1.32e - Jadwal responsif tanpa mematikan freeze
   Penting: jangan memberi overflow hidden/auto pada app-shell
   atau schedule-workspace karena keduanya menjadi ancestor
   elemen position: sticky (sidebar dan page header).
   ========================================================= */
html,
body {
    width: 100%;
    max-width: 100%;
}

.app-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.main-content,
.schedule-workspace,
.schedule-workspace > *,
.schedule-pattern-showcase,
.schedule-grid-two,
.schedule-import-layout,
.schedule-form-card,
.schedule-assignment-panel,
.schedule-calendar-panel {
    min-width: 0;
    max-width: 100%;
}

.schedule-workspace {
    width: 100%;
}

.schedule-hero > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.schedule-hero-badges {
    flex: 0 1 340px;
    width: min(340px, 100%);
    min-width: 0;
}

.schedule-pattern-card,
.schedule-pattern-top,
.schedule-pattern-top small,
.schedule-grid-two > *,
.schedule-import-layout > *,
.schedule-import-copy > div {
    min-width: 0;
}

.schedule-pattern-card {
    overflow: hidden;
}

.schedule-pattern-top small {
    text-align: right;
    overflow-wrap: anywhere;
}

.schedule-pattern-card h3,
.schedule-pattern-card p,
.schedule-hero h1,
.schedule-hero p {
    overflow-wrap: anywhere;
}

.schedule-table-wrap,
.schedule-import-error-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

@media (max-width: 1500px) {
    .schedule-pattern-showcase {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .schedule-pattern-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .schedule-pattern-showcase {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   v0.1.32f - Pencarian dan pagination Pola Jadwal Karyawan
   ========================================================= */
.schedule-assignment-filter-bar {
    align-items: end;
}

.schedule-assignment-filter-bar .schedule-assignment-search {
    flex: 1 1 320px;
    min-width: 260px;
}

.schedule-assignment-filter-bar .schedule-assignment-limit {
    flex: 0 0 120px;
    min-width: 120px;
}

.schedule-assignment-filter-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.schedule-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    padding: 0 13px;
    border: 1px solid #d8e2ec;
    border-radius: 11px;
    background: #fff;
    color: #617588;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
}

.schedule-filter-reset:hover {
    border-color: #b9cad9;
    background: #f9fbfd;
    color: #315b76;
}

.schedule-assignment-result-info {
    margin: -3px 0 13px;
    color: #718496;
    font-size: 11px;
    line-height: 1.55;
}

.schedule-assignment-result-info strong {
    color: #315b76;
}

.schedule-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #e7edf3;
    color: #718496;
    font-size: 11px;
    font-weight: 750;
}

.schedule-pagination-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.schedule-pagination-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #dce5ed;
    border-radius: 10px;
    background: #fff;
    color: #45647b;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.schedule-pagination-links a:hover {
    border-color: #bcd1e2;
    background: #f4f8fb;
    color: #245f8c;
}

.schedule-pagination-links a.is-active {
    border-color: #2b7faf;
    background: linear-gradient(135deg, #287fb2, #278f87);
    color: #fff;
    box-shadow: 0 7px 16px rgba(38, 121, 151, .19);
}

.schedule-pagination-ellipsis {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    color: #98a6b3;
}

@media (max-width: 900px) {
    .schedule-assignment-filter-bar .schedule-assignment-search {
        flex-basis: 100%;
        min-width: 100%;
    }

    .schedule-assignment-filter-bar .schedule-assignment-limit {
        flex: 1 1 130px;
        min-width: 130px;
    }
}

@media (max-width: 680px) {
    .schedule-assignment-filter-bar .schedule-assignment-search,
    .schedule-assignment-filter-bar .schedule-assignment-limit {
        min-width: 0;
        width: 100%;
    }

    .schedule-assignment-filter-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .schedule-assignment-filter-actions button,
    .schedule-filter-reset {
        width: 100%;
    }

    .schedule-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .schedule-pagination-links {
        width: 100%;
    }
}

/* =========================================================
   v0.1.32g - Search, pagination, dan fokus langsung tabel
   Jadwal & Status Kehadiran
   ========================================================= */
#schedule-assignments,
#schedule-calendar {
    scroll-margin-top: 112px;
}

.schedule-calendar-filter-bar {
    align-items: end;
}

.schedule-calendar-filter-bar .schedule-calendar-search {
    flex: 1 1 310px;
    min-width: 270px;
}

.schedule-calendar-filter-bar .schedule-calendar-limit {
    flex: 0 0 120px;
    min-width: 120px;
}

@media (max-width: 1100px) {
    .schedule-calendar-filter-bar .schedule-calendar-search {
        flex-basis: 100%;
        min-width: 100%;
    }

    .schedule-calendar-filter-bar .schedule-calendar-limit {
        flex: 1 1 130px;
        min-width: 130px;
    }
}

@media (max-width: 680px) {
    #schedule-assignments,
    #schedule-calendar {
        scroll-margin-top: 82px;
    }

    .schedule-calendar-filter-bar .schedule-calendar-search,
    .schedule-calendar-filter-bar .schedule-calendar-limit {
        min-width: 0;
        width: 100%;
    }
}

/* =========================================================
   v0.1.33 - Surat Perintah Lembur (SPL)
   ========================================================= */
#spl-form,
#spl-list,
#pending-spl,
#spl-actions {
    scroll-margin-top: 112px;
}

.overtime-page,
.overtime-detail-page,
.overtime-approval-page {
    min-width: 0;
}

.overtime-intro-panel .panel-header,
.overtime-document-head {
    align-items: flex-start;
}

.overtime-intro-actions,
.overtime-document-actions,
.filter-actions,
.table-pagination > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.overtime-unit-picker {
    display: flex;
    align-items: end;
    gap: 12px;
    margin-bottom: 18px;
}

.overtime-unit-picker label {
    width: min(520px, 100%);
}

.overtime-create-form {
    display: grid;
    gap: 16px;
}

.overtime-form-grid,
.overtime-approval-grid,
.overtime-document-grid,
.overtime-signature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.overtime-approval-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overtime-skip-card,
.overtime-document-grid > div,
.overtime-signature-grid > div {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafbfc;
    padding: 14px;
    display: grid;
    gap: 5px;
}

.overtime-skip-card span,
.overtime-document-grid span,
.overtime-signature-grid span,
.overtime-document-copy span,
.overtime-status-banner > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.overtime-skip-card small,
.overtime-signature-grid small,
.overtime-picker-head span,
.table-subtext {
    color: var(--muted);
    font-size: 12px;
}

.table-subtext {
    display: block;
    margin-top: 4px;
    line-height: 1.35;
}

.overtime-employee-picker {
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fbfcfd;
}

.overtime-picker-head {
    padding: 14px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.overtime-picker-head > div {
    display: grid;
    gap: 3px;
}

.overtime-picker-head input {
    max-width: 340px;
}

.overtime-employee-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    max-height: 360px;
    overflow-y: auto;
}

.overtime-employee-option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 11px;
    background: #fff;
    cursor: pointer;
    min-width: 0;
}

.overtime-employee-option:hover {
    border-color: #9fc6bc;
    background: #f6fbf9;
}

.overtime-employee-option input {
    width: auto;
    margin-top: 3px;
}

.overtime-employee-option span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.overtime-employee-option strong,
.overtime-employee-option small {
    overflow-wrap: anywhere;
}

.overtime-filter-form {
    display: grid;
    grid-template-columns: minmax(250px, 2fr) minmax(150px, .8fr) minmax(180px, 1fr) 110px auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
}

.overtime-table-wrap,
.overtime-detail-table {
    max-width: 100%;
    overflow-x: auto;
}

.overtime-table-wrap table {
    min-width: 1120px;
}

.overtime-detail-table table {
    min-width: 1020px;
}

.table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding-top: 14px;
}

.button.small,
button.small {
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
}

button.danger,
.button.danger {
    background: var(--danger);
    color: #fff;
}

button:disabled,
.button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .55;
}

.status-pill.info {
    background: #eaf3ff;
    color: #245c9f;
}

.status-pill.neutral {
    background: #eef2f5;
    color: #475467;
}

.status-pill.danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.overtime-document-panel {
    padding: 28px;
}

.overtime-document-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.overtime-document-brand h2 {
    margin: 0 0 5px;
    font-size: 28px;
}

.overtime-document-brand > strong {
    color: var(--primary);
    font-size: 16px;
}

.overtime-status-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 15px;
    margin-bottom: 16px;
    background: #fafbfc;
}

.overtime-status-banner > small {
    color: var(--muted);
    margin-left: auto;
}

.overtime-status-banner.is-success {
    background: var(--success-bg);
    border-color: #b9e3c9;
}

.overtime-status-banner.is-warning {
    background: var(--warning-bg);
    border-color: #f1d18a;
}

.overtime-status-banner.is-danger {
    background: var(--danger-bg);
    border-color: #ffd1cc;
}

.overtime-status-banner.is-info {
    background: #eaf3ff;
    border-color: #c7dcf7;
}

.overtime-document-copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.overtime-document-copy > div {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
}

.overtime-document-copy p {
    margin: 8px 0 0;
    line-height: 1.6;
}

.overtime-signature-grid {
    margin-top: 20px;
}

.overtime-signature-grid > div {
    min-height: 110px;
    align-content: end;
}

.overtime-history-list {
    display: grid;
}

.overtime-history-list article {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
}

.overtime-history-list article:last-child {
    border-bottom: 0;
}

.overtime-history-list article > span {
    color: var(--muted);
    font-size: 12px;
}

.overtime-history-list article > div {
    display: grid;
    gap: 4px;
}

.overtime-history-list p {
    margin: 4px 0 0;
    color: #475467;
    line-height: 1.5;
}

.inline-action-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
}

.overtime-approval-card .request-approval-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1180px) {
    .overtime-form-grid,
    .overtime-document-grid,
    .overtime-signature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overtime-employee-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overtime-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overtime-filter-form .filter-actions {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    #spl-form,
    #spl-list,
    #pending-spl,
    #spl-actions {
        scroll-margin-top: 82px;
    }

    .overtime-form-grid,
    .overtime-approval-grid,
    .overtime-document-grid,
    .overtime-document-copy,
    .overtime-signature-grid,
    .overtime-filter-form,
    .overtime-employee-list,
    .overtime-approval-card .request-approval-grid {
        grid-template-columns: 1fr;
    }

    .overtime-filter-form .filter-actions {
        grid-column: auto;
    }

    .overtime-picker-head,
    .overtime-document-head,
    .table-pagination,
    .inline-action-form {
        align-items: stretch;
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .overtime-picker-head input {
        max-width: none;
    }

    .overtime-status-banner > small {
        margin-left: 0;
        width: 100%;
    }

    .overtime-history-list article {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

@media print {
    body {
        background: #fff;
    }

    .sidebar,
    .sidebar-backdrop,
    .mobile-topbar,
    .page-head,
    .alert,
    .no-print,
    .notification-center {
        display: none !important;
    }

    .app-shell {
        display: block;
    }

    .main-content {
        padding: 0;
    }

    .overtime-document-panel {
        border: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }

    .overtime-detail-table {
        overflow: visible;
    }

    .overtime-detail-table table {
        min-width: 0;
        font-size: 10px;
    }

    .overtime-document-grid,
    .overtime-signature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* v0.1.33a - SPL access control */
.overtime-access-page {
    min-width: 0;
}

.overtime-backup-card {
    border: 1px solid #e8d8ad;
    border-radius: 12px;
    background: #fffaf0;
    padding: 14px;
    display: grid;
    gap: 5px;
}

.overtime-backup-card span {
    color: #8a641c;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.overtime-backup-card small {
    color: var(--muted);
    font-size: 12px;
}

.spl-access-guidance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.spl-access-guidance > div {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fbfa;
    padding: 14px;
    display: grid;
    gap: 5px;
}

.spl-access-guidance span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.spl-access-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.spl-access-form .spl-access-notes {
    grid-column: span 2;
}

.spl-access-form .form-actions {
    margin: 0;
}

#spl-access-form,
#spl-access-list {
    scroll-margin-top: 112px;
}

@media (max-width: 1050px) {
    .spl-access-form,
    .spl-access-guidance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .spl-access-form,
    .spl-access-guidance {
        grid-template-columns: 1fr;
    }

    .spl-access-form .spl-access-notes {
        grid-column: auto;
    }
}

@media (min-width: 1181px) {
    .overtime-approval-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .overtime-approval-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* v0.1.34 - Machine attendance import and schedule-based calculation */
.attendance-machine-page,
.attendance-machine-page > * {
    min-width: 0;
}

.attendance-machine-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    background:
        radial-gradient(circle at 90% 10%, rgba(48, 178, 158, .18), transparent 30%),
        linear-gradient(135deg, #173f69 0%, #197269 100%);
    color: #fff;
    border: 0;
}

.attendance-machine-hero .eyebrow,
.attendance-machine-hero p {
    color: rgba(255,255,255,.85);
}

.attendance-machine-hero h2 {
    max-width: 760px;
    margin-bottom: 10px;
    font-size: clamp(23px, 2.2vw, 34px);
}

.attendance-machine-hero p {
    margin: 0;
    line-height: 1.6;
}

.attendance-flow-mini {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-width: min(100%, 360px);
}

.attendance-flow-mini span {
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.11);
    border-radius: 999px;
    padding: 9px 12px;
    font-weight: 800;
    white-space: nowrap;
}

.attendance-import-guidance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.attendance-import-guidance > div {
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #f8fbfa;
    padding: 14px;
    display: grid;
    gap: 5px;
}

.attendance-import-guidance span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.attendance-upload-form {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(320px, 1.4fr) auto;
    gap: 16px;
    align-items: end;
}

.attendance-coverage-choice {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 13px 12px;
    margin: 0;
    min-width: 0;
}

.attendance-coverage-choice legend {
    padding: 0 5px;
    font-size: 13px;
    font-weight: 800;
    color: #344054;
}

.attendance-coverage-choice label {
    display: flex;
    grid-template-columns: none;
    align-items: flex-start;
    gap: 9px;
    padding: 6px 0;
    cursor: pointer;
}

.attendance-coverage-choice input {
    width: auto;
    margin-top: 3px;
}

.attendance-coverage-choice span {
    display: grid;
    gap: 2px;
}

.attendance-coverage-choice small {
    color: var(--muted);
    line-height: 1.35;
    font-weight: 500;
}

.attendance-import-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.attendance-import-summary > div,
.attendance-kpi-grid > article {
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fbfcfd;
    padding: 15px;
    display: grid;
    gap: 5px;
}

.attendance-import-summary span,
.attendance-kpi-grid span,
.attendance-kpi-grid small {
    color: var(--muted);
    font-size: 12px;
}

.attendance-import-summary strong,
.attendance-kpi-grid strong {
    font-size: 25px;
}

.attendance-import-summary .has-warning {
    border-color: #efd28d;
    background: #fffaf0;
    color: #8a641c;
}

.attendance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.attendance-kpi-grid > article {
    background: #fff;
    box-shadow: 0 8px 24px rgba(20, 35, 55, .035);
}

.panel-header-actions,
.filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.attendance-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(130px, .7fr)) repeat(3, minmax(150px, .9fr)) minmax(95px, .5fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
}

.attendance-summary-table {
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 13px;
}

.attendance-summary-table table {
    min-width: 1680px;
}

.attendance-summary-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafb;
}

.attendance-summary-table td strong,
.attendance-summary-table td small,
#attendance-unmatched td small,
.attendance-machine-page .panel table td small {
    display: block;
}

.attendance-summary-table td small,
#attendance-unmatched td small,
.attendance-machine-page .panel table td small {
    color: var(--muted);
    margin-top: 4px;
    line-height: 1.35;
}

.attendance-result-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.attendance-result-pill.tone-success { background: var(--success-bg); color: var(--success); }
.attendance-result-pill.tone-danger { background: var(--danger-bg); color: var(--danger); }
.attendance-result-pill.tone-warning { background: var(--warning-bg); color: var(--warning); }
.attendance-result-pill.tone-info { background: #eaf4ff; color: #175c9e; }

.attendance-row-review {
    background: #fffaf0;
}

.attendance-ot-warning {
    display: inline-flex;
    border-radius: 999px;
    padding: 4px 8px;
    background: #fff0e8;
    color: #a33f12;
    font-size: 11px;
    font-weight: 850;
}

.attendance-recalculate-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 260px)) auto;
    gap: 12px;
    align-items: end;
}

#attendance-upload,
#attendance-import-result,
#attendance-recap,
#attendance-recalculate,
#attendance-unmatched {
    scroll-margin-top: 112px;
}

@media (max-width: 1450px) {
    .attendance-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .attendance-filter-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .attendance-filter-form .filter-actions { grid-column: span 4; }
}

@media (max-width: 1080px) {
    .attendance-machine-hero { align-items: flex-start; flex-direction: column; }
    .attendance-import-guidance { grid-template-columns: 1fr; }
    .attendance-upload-form { grid-template-columns: 1fr; }
    .attendance-upload-form .form-actions { align-items: stretch; }
    .attendance-upload-form .form-actions button { width: 100%; }
    .attendance-import-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .attendance-filter-form,
    .attendance-kpi-grid,
    .attendance-import-summary,
    .attendance-recalculate-form {
        grid-template-columns: 1fr;
    }
    .attendance-filter-form .filter-actions { grid-column: auto; }
    .attendance-flow-mini { min-width: 0; justify-content: flex-start; }
    .panel-header-actions { width: 100%; }
}

/* v0.1.34a - resumable machine attendance calculation */
#attendance-batches {
    scroll-margin-top: 112px;
}

.attendance-batch-table table {
    min-width: 1460px;
}

.attendance-batch-progress {
    min-width: 190px;
}

.attendance-batch-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

.attendance-batch-progress > div:first-child span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.attendance-progress-track {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8eef1;
}

.attendance-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #17644f, #2a9b83);
    transition: width .25s ease;
}

.attendance-batch-action {
    min-width: 165px;
}

.attendance-batch-action button {
    width: 100%;
    white-space: nowrap;
}

.attendance-batch-error {
    display: block;
    max-width: 320px;
    margin-top: 7px;
    color: var(--danger);
    line-height: 1.35;
}

/* v0.1.35 - Import Ketidakhadiran Terpadu */
.manual-absence-rule-grid > div { align-content: start; }
.manual-absence-rule-grid small { color: var(--muted); font-size: 11px; line-height: 1.45; }
#absence-import-history td > small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }

/* v0.1.36 - Notification Center */
.notification-item.is-success .notification-item-dot {
    background: #1e9a70;
    box-shadow: 0 0 0 5px rgba(30,154,112,.12);
}

.notification-item.is-unread {
    background: #f1faf7;
}

.notification-item time {
    display: block;
    margin-top: 5px;
    color: #98a2af;
    font-size: 8.5px;
    font-weight: 700;
}

.notification-popover-footer {
    padding: 10px 14px;
    border-top: 1px solid #edf0f4;
    background: #fbfcfd;
    text-align: center;
}

.notification-popover-footer a {
    color: #176353;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
}

.employee-dashboard-top-tools {
    display: flex;
    justify-content: flex-end;
    padding: 22px 28px 0;
}

.notification-page-panel {
    overflow: visible;
}

.notification-page-heading {
    align-items: flex-start;
}

.notification-page-heading p:not(.eyebrow) {
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.notification-page-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.notification-page-summary > span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    color: #176353;
    background: #e8f7f2;
    font-size: 11px;
    font-weight: 900;
}

.notification-page-summary form {
    margin: 0;
}

.notification-filter-form {
    display: grid;
    grid-template-columns: minmax(260px, 1.7fr) minmax(180px, .8fr) minmax(155px, .65fr) minmax(110px, .45fr) auto auto;
    gap: 12px;
    align-items: end;
    margin: 22px 0;
}

.notification-filter-form label {
    display: grid;
    gap: 7px;
    color: #39465a;
    font-size: 11px;
    font-weight: 900;
}

.notification-page-list {
    display: grid;
    gap: 11px;
}

.notification-page-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 17px 18px;
    border: 1px solid #e6ebef;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31,50,72,.04);
}

.notification-page-item.is-unread {
    border-color: rgba(30,154,112,.28);
    background: linear-gradient(135deg, #f1faf7, #fff);
}

.notification-page-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #8f99a8;
    box-shadow: 0 0 0 6px rgba(143,153,168,.10);
}

.notification-page-item.is-info .notification-page-dot { background: #4b83dd; box-shadow: 0 0 0 6px rgba(75,131,221,.11); }
.notification-page-item.is-success .notification-page-dot { background: #1e9a70; box-shadow: 0 0 0 6px rgba(30,154,112,.11); }
.notification-page-item.is-warning .notification-page-dot { background: #f0a126; box-shadow: 0 0 0 6px rgba(240,161,38,.11); }
.notification-page-item.is-danger .notification-page-dot { background: #e15b54; box-shadow: 0 0 0 6px rgba(225,91,84,.11); }
.notification-page-item.is-neutral .notification-page-dot { background: #7757b7; box-shadow: 0 0 0 6px rgba(119,87,183,.11); }

.notification-page-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.notification-page-meta span {
    color: #176353;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.notification-page-meta time {
    color: #98a2af;
    font-size: 9px;
    font-weight: 700;
}

.notification-page-copy h3 {
    margin: 0;
    color: #202b3d;
    font-size: 14px;
}

.notification-page-copy p {
    margin: 5px 0 0;
    color: #6f7b8c;
    font-size: 11px;
    line-height: 1.55;
}

.notification-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.notification-page-actions form {
    margin: 0;
}

.notification-pagination {
    margin-top: 22px;
}

@media (max-width: 1100px) {
    .notification-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notification-filter-form > button,
    .notification-filter-form > .button {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .employee-dashboard-top-tools {
        display: none;
    }

    .notification-filter-form {
        grid-template-columns: 1fr;
    }

    .notification-page-item {
        grid-template-columns: 10px minmax(0, 1fr);
    }

    .notification-page-actions {
        grid-column: 2;
        justify-content: flex-start;
    }

    .notification-page-actions .button,
    .notification-page-actions button {
        width: 100%;
    }

    .notification-page-summary {
        justify-content: flex-start;
    }
}


/* v0.1.36a - Dashboard bell inside welcome card */
.employee-dashboard-page {
    position: relative;
}

.employee-dashboard-top-tools {
    position: absolute;
    top: 46px;
    left: 28px;
    right: 28px;
    z-index: 40;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px;
    pointer-events: none;
}

.employee-dashboard-top-tools .topbar-tools {
    width: 100%;
    justify-content: flex-end;
    pointer-events: auto;
}

.notification-center.is-dashboard .notification-bell {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.24) !important;
    background: rgba(255,255,255,.13) !important;
    box-shadow: 0 10px 26px rgba(7,41,35,.18) !important;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

.notification-center.is-dashboard .notification-bell:hover,
.notification-center.is-dashboard.is-open .notification-bell {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.34) !important;
    background: rgba(255,255,255,.22) !important;
}

.notification-center.is-dashboard .notification-bell > span {
    border-color: #226f62;
}

@media (max-width: 760px) {
    .employee-dashboard-top-tools {
        display: none;
    }
}

/* =========================================================
   v0.1.36c - Detail hasil Import Ketidakhadiran
   ========================================================= */
.manual-absence-history-actions,
.manual-absence-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.manual-absence-detail-filter {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) minmax(170px, .8fr) 120px auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
}

.manual-absence-detail-filter label {
    display: grid;
    gap: 6px;
}

.manual-absence-detail-table table {
    min-width: 1120px;
}

.manual-absence-detail-table td strong,
.manual-absence-detail-table td small {
    display: block;
}

.manual-absence-detail-table td small {
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.4;
}

.manual-absence-error-text {
    display: block;
    max-width: 420px;
    color: var(--danger);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

@media (max-width: 920px) {
    .manual-absence-detail-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .manual-absence-detail-filter .filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .manual-absence-detail-filter {
        grid-template-columns: 1fr;
    }
    .manual-absence-detail-filter .filter-actions {
        grid-column: auto;
    }
    .manual-absence-detail-actions,
    .manual-absence-history-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .manual-absence-detail-actions .button,
    .manual-absence-history-actions .button {
        width: 100%;
        text-align: center;
    }
}

/* v0.1.36d - Edit / override jadwal harian */
.schedule-table th:last-child,
.schedule-table td:last-child { min-width: 132px; }
.schedule-row-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.schedule-row-actions form { margin: 0; }
.schedule-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 12px;
    background: #e2f3ee;
    color: #175f51;
    font-weight: 800;
    text-decoration: none;
}
.schedule-edit-button:hover { background: #cde9e1; text-decoration: none; }
.schedule-inline-edit {
    margin: 18px 0;
    padding: 22px;
    border: 1px solid #cfe2dc;
    border-radius: 22px;
    background: linear-gradient(135deg, #f6fbfa 0%, #eef7f4 100%);
    scroll-margin-top: 24px;
}
.schedule-inline-edit-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.schedule-inline-edit-head h3 { margin: 3px 0 6px; }
.schedule-inline-edit-head p { margin: 0; color: var(--muted); }
.schedule-inline-edit-close {
    display: inline-flex;
    padding: 9px 13px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #d7e4e1;
    color: #40515b;
    font-weight: 800;
    text-decoration: none;
}
.schedule-inline-edit-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(260px, 1.4fr) auto;
    gap: 14px;
    align-items: end;
}
.schedule-inline-edit-form label { margin: 0; }
.schedule-inline-edit-notes { grid-column: span 1; }
.schedule-inline-time-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 12px;
}
.schedule-inline-edit-form button { white-space: nowrap; }
@media (max-width: 1000px) {
    .schedule-inline-edit-form { grid-template-columns: 1fr 1fr; }
    .schedule-inline-edit-form button { width: 100%; }
}
@media (max-width: 700px) {
    .schedule-inline-edit-head { flex-direction: column; }
    .schedule-inline-edit-form { grid-template-columns: 1fr; }
    .schedule-inline-time-fields { grid-template-columns: 1fr 1fr; }
    .schedule-row-actions { justify-content: flex-end; }
}

/* v0.1.37 Attendance Correction & Shift Exchange */
.attendance-workflow-page,
.attendance-workflow-detail,
.attendance-workflow-approval-page {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.workflow-intro-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.workflow-intro-card {
    position: relative;
    overflow: hidden;
    min-height: 180px;
    padding: 28px;
    border: 0;
}

.workflow-intro-card::after {
    content: "";
    position: absolute;
    right: -44px;
    top: -52px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .24);
}

.workflow-intro-card.is-correction {
    background: linear-gradient(135deg, #eef9f5, #e8f2ff);
}

.workflow-intro-card.is-shift {
    background: linear-gradient(135deg, #fff7e7, #f1edff);
}

.workflow-intro-card h2 {
    margin: 8px 0 12px;
    max-width: 620px;
}

.workflow-intro-card p:last-child {
    margin: 0;
    max-width: 660px;
    color: var(--muted, #687386);
}

.workflow-form-panel,
.workflow-incoming-panel,
.workflow-history-panel,
.workflow-detail-panel,
.workflow-approval-panel,
.workflow-approval-hero,
.workflow-detail-hero {
    min-width: 0;
}

.workflow-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.workflow-form-grid > label,
.workflow-form-grid > .route-self-note {
    min-width: 0;
}

.workflow-form-grid .span-all {
    grid-column: 1 / -1;
}

.workflow-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 6px;
}

.workflow-submit-row p {
    margin: 0;
    color: var(--muted, #687386);
}

.workflow-double-note {
    margin: 0;
}

.workflow-card-list {
    display: grid;
    gap: 16px;
}

.workflow-action-card {
    padding: 22px;
    border: 1px solid #dfe7ed;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(31, 59, 77, .05);
}

.workflow-action-card > div:first-child > span,
.workflow-card-head > div > span {
    display: inline-block;
    margin-bottom: 5px;
    color: #1f6b5b;
    font-weight: 800;
    letter-spacing: .03em;
}

.workflow-action-card h3 {
    margin: 0;
}

.workflow-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.workflow-card-head small {
    font-weight: 600;
    color: var(--muted, #687386);
}

.workflow-schedule-compare,
.workflow-detail-grid,
.workflow-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.workflow-schedule-compare > div,
.workflow-detail-grid > div,
.workflow-snapshot-grid > article {
    min-width: 0;
    padding: 15px 16px;
    border-radius: 16px;
    background: #f4f7f9;
}

.workflow-schedule-compare span,
.workflow-detail-grid span,
.workflow-snapshot-grid span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted, #687386);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.workflow-schedule-compare strong,
.workflow-detail-grid strong,
.workflow-snapshot-grid strong {
    display: block;
    overflow-wrap: anywhere;
}

.workflow-detail-grid small {
    display: block;
    margin-top: 4px;
    color: var(--muted, #687386);
}

.workflow-card-actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
}

.workflow-partner-form,
.workflow-approval-form {
    display: flex;
    flex: 1;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
}

.workflow-partner-form input,
.workflow-approval-form textarea {
    min-width: 250px;
    flex: 1;
}

.workflow-approval-form {
    align-items: stretch;
    flex-direction: column;
    max-width: 560px;
}

.workflow-approval-form > div {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.workflow-history-panel .table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.workflow-history-panel td small {
    display: block;
    margin-top: 4px;
    color: var(--muted, #687386);
}

.workflow-detail-hero,
.workflow-approval-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.workflow-detail-hero h2,
.workflow-approval-hero h2 {
    margin: 4px 0 6px;
}

.workflow-detail-hero p,
.workflow-approval-hero p {
    margin: 0;
    color: var(--muted, #687386);
}

.workflow-reason-box {
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #f7fafb;
}

.workflow-reason-box p {
    margin: 8px 0 0;
}

.workflow-timeline {
    display: grid;
    gap: 0;
}

.workflow-timeline article {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 14px;
    padding: 4px 0 22px;
}

.workflow-timeline article:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 19px;
    bottom: 0;
    width: 2px;
    background: #dbe7e4;
}

.workflow-timeline-dot {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    border: 4px solid #d8f1e9;
    border-radius: 50%;
    background: #1f6b5b;
}

.workflow-timeline p,
.workflow-timeline small,
.workflow-timeline em {
    display: block;
    margin: 4px 0 0;
}

.workflow-timeline small {
    color: var(--muted, #687386);
}

.workflow-timeline em {
    padding: 8px 10px;
    border-radius: 10px;
    background: #f4f7f9;
    font-style: normal;
}

.button.compact {
    min-height: 36px;
    padding: 8px 14px;
}

@media (max-width: 1100px) {
    .workflow-schedule-compare,
    .workflow-detail-grid,
    .workflow-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .workflow-intro-grid,
    .workflow-form-grid,
    .workflow-schedule-compare,
    .workflow-detail-grid,
    .workflow-snapshot-grid {
        grid-template-columns: 1fr;
    }

    .workflow-form-grid .span-all {
        grid-column: auto;
    }

    .workflow-submit-row,
    .workflow-card-actions,
    .workflow-detail-hero,
    .workflow-approval-hero,
    .workflow-partner-form {
        align-items: stretch;
        flex-direction: column;
    }

    .workflow-partner-form input,
    .workflow-approval-form textarea {
        min-width: 0;
        width: 100%;
    }
}

/* v0.1.38 - Friendly navigation and role-based action centers */
.sidebar-nav-simple {
    display: grid;
    gap: 8px;
    align-content: start;
}

.sidebar-nav-simple .nav-item-main {
    min-height: 54px;
}

.sidebar-nav-simple .nav-item-main > span:nth-child(2) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friendly-hub {
    display: grid;
    gap: 22px;
}

.friendly-hub-intro {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 30px;
    border: 1px solid rgba(31, 107, 91, .12);
    border-radius: 26px;
    background:
        radial-gradient(circle at 92% 12%, rgba(43, 166, 145, .18), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f4faf8 100%);
    box-shadow: 0 18px 40px rgba(28, 55, 78, .08);
}

.friendly-hub-intro::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -64px;
    bottom: -112px;
    border: 24px solid rgba(31, 107, 91, .06);
    border-radius: 50%;
    pointer-events: none;
}

.friendly-hub-intro > div {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.friendly-hub-intro h2 {
    margin: 5px 0 8px;
    color: #17223a;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.15;
}

.friendly-hub-intro p:last-child {
    margin: 0;
    color: #6d7788;
    font-size: 15px;
    line-height: 1.65;
}

.friendly-hub-badge {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: #e4f4ef;
    color: #17604f;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
}

.friendly-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.friendly-action-card {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;
    min-height: 132px;
    padding: 22px;
    border: 1px solid #e1e8ee;
    border-radius: 22px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(28, 55, 78, .055);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.friendly-action-card:hover {
    transform: translateY(-3px);
    border-color: rgba(31, 107, 91, .28);
    box-shadow: 0 17px 34px rgba(28, 55, 78, .11);
}

.friendly-action-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #e8f5f1;
    color: #1f6b5b;
}

.friendly-action-icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.friendly-action-card.is-blue .friendly-action-icon { background: #e9f2ff; color: #2a66a5; }
.friendly-action-card.is-purple .friendly-action-icon { background: #f1ebff; color: #7048b5; }
.friendly-action-card.is-orange .friendly-action-icon { background: #fff0df; color: #a85c13; }
.friendly-action-card.is-neutral .friendly-action-icon { background: #edf1f4; color: #536173; }

.friendly-action-copy {
    min-width: 0;
}

.friendly-action-copy strong,
.friendly-action-copy small {
    display: block;
}

.friendly-action-copy strong {
    margin-bottom: 7px;
    color: #1d2940;
    font-size: 18px;
    line-height: 1.25;
}

.friendly-action-copy small {
    color: #717c8d;
    font-size: 13.5px;
    line-height: 1.55;
}

.friendly-action-arrow {
    align-self: end;
    color: #1f6b5b;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.friendly-count-badge {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    border-radius: 14px;
    background: #fff0df;
    color: #9b540e;
    font-size: 15px;
    font-weight: 900;
}

.friendly-secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.friendly-secondary-grid > a {
    display: block;
    padding: 19px 22px;
    border: 1px solid #e2e8ed;
    border-radius: 18px;
    background: #f9fbfc;
    color: inherit;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease;
}

.friendly-secondary-grid > a:hover {
    border-color: rgba(31, 107, 91, .25);
    background: #f2faf7;
}

.friendly-secondary-grid strong,
.friendly-secondary-grid span {
    display: block;
}

.friendly-secondary-grid strong {
    margin-bottom: 5px;
    color: #253249;
    font-size: 15px;
}

.friendly-secondary-grid span {
    color: #788293;
    font-size: 13px;
    line-height: 1.5;
}

.friendly-admin-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.friendly-admin-group {
    min-width: 0;
    padding: 22px;
    border: 1px solid #e1e8ee;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(28, 55, 78, .05);
}

.friendly-admin-group > div {
    margin-bottom: 17px;
    padding-bottom: 15px;
    border-bottom: 1px solid #edf1f4;
}

.friendly-admin-group strong,
.friendly-admin-group span {
    display: block;
}

.friendly-admin-group strong {
    color: #1d2940;
    font-size: 17px;
}

.friendly-admin-group span {
    margin-top: 5px;
    color: #7a8493;
    font-size: 13px;
}

.friendly-admin-group nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.friendly-admin-group nav a {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 12px;
    background: #f6f8fa;
    color: #334158;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.friendly-admin-group nav a:hover {
    background: #e7f4ef;
    color: #1c6554;
}

.friendly-empty {
    max-width: 720px;
    margin: 40px auto;
    padding: 35px;
    text-align: center;
}

.friendly-empty strong {
    display: block;
    margin-bottom: 8px;
    color: #1d2940;
    font-size: 20px;
}

.friendly-empty p {
    margin: 0;
    color: #707b8c;
}

@media (max-width: 980px) {
    .friendly-action-grid,
    .friendly-admin-groups {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .friendly-hub {
        gap: 15px;
    }

    .friendly-hub-intro {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
        border-radius: 20px;
    }

    .friendly-hub-badge {
        min-height: 36px;
        padding: 0 13px;
    }

    .friendly-action-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 0;
        padding: 18px;
        border-radius: 18px;
    }

    .friendly-action-icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    .friendly-action-arrow,
    .friendly-count-badge {
        grid-column: 2;
        justify-self: start;
    }

    .friendly-secondary-grid,
    .friendly-admin-group nav {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   v0.1.39a - Laporan Detail Kehadiran HRD (A4 Landscape)
   ========================================================= */
.attendance-detail-report-page {
    min-width: 0;
}

.attendance-report-filter {
    margin-bottom: 18px;
}

.attendance-report-filter-form {
    display: grid;
    grid-template-columns: minmax(280px, 2fr) minmax(180px, .7fr) auto;
    gap: 14px;
    align-items: end;
}

.attendance-report-filter-form label {
    min-width: 0;
}

.attendance-report-filter-form .filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.attendance-detail-document {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 22px 24px 18px;
    border: 1px solid #d9e2df;
    border-radius: 18px;
    background: #fff;
    color: #101828;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .08);
    font-family: Arial, Helvetica, sans-serif;
}

.attendance-detail-document-head {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(420px, 1.55fr) minmax(230px, .9fr);
    gap: 18px;
    align-items: center;
}

.attendance-detail-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #0d5d3d;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .01em;
}

.attendance-detail-brand img {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    object-fit: contain;
}

.attendance-detail-title-block {
    text-align: center;
}

.attendance-detail-title-block h1 {
    margin: 0;
    color: #122039;
    font-size: 26px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: .015em;
}

.attendance-detail-title-block span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    min-height: 30px;
    margin-top: 8px;
    padding: 4px 18px;
    border-radius: 5px;
    background: linear-gradient(135deg, #0c5e3d, #147b50);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .025em;
    box-shadow: 0 4px 12px rgba(12, 94, 61, .2);
}

.attendance-detail-print-meta {
    justify-self: end;
    min-width: 230px;
    font-size: 11px;
}

.attendance-detail-print-meta > div {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 5px;
    margin: 4px 0;
}

.attendance-detail-print-meta span {
    color: #344054;
}

.attendance-detail-print-meta strong {
    font-weight: 700;
}

.attendance-detail-green-line {
    height: 4px;
    margin: 12px 0 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0d5d3d, #2d8a62 70%, #0d5d3d);
}

.attendance-detail-employee-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 60px;
    row-gap: 6px;
    max-width: 1120px;
    margin: 0 auto 13px;
    padding: 0 28px;
    font-size: 11px;
}

.attendance-detail-employee-grid > div {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
}

.attendance-detail-employee-grid span {
    color: #344054;
    font-weight: 500;
}

.attendance-detail-employee-grid strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #101828;
    font-weight: 800;
}

.attendance-detail-table-wrap {
    overflow-x: auto;
    border: 1px solid #0b4f35;
    border-radius: 8px;
}

.attendance-detail-table {
    width: 100%;
    min-width: 1220px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 8.5px;
    line-height: 1.08;
}

.attendance-detail-table .col-no { width: 3%; }
.attendance-detail-table .col-date { width: 8%; }
.attendance-detail-table .col-schedule { width: 10%; }
.attendance-detail-table .col-time { width: 6%; }
.attendance-detail-table .col-duration { width: 6.2%; }
.attendance-detail-table .col-hours { width: 6%; }
.attendance-detail-table .col-flag { width: 4.5%; }
.attendance-detail-table .col-flag-wide { width: 6%; }

.attendance-detail-table th,
.attendance-detail-table td {
    height: 22px;
    padding: 2px 4px;
    border: 1px solid rgba(15, 57, 42, .42);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.attendance-detail-table thead th {
    background: linear-gradient(180deg, #0c603e, #064d32);
    color: #fff;
    font-weight: 800;
    white-space: normal;
    line-height: 1.08;
}

.attendance-detail-table thead tr:first-child th {
    height: 27px;
}

.attendance-detail-table thead tr:last-child th {
    height: 22px;
}

.attendance-detail-table thead small {
    color: rgba(255, 255, 255, .86);
    font-size: .85em;
    font-weight: 600;
}

.attendance-detail-table tbody tr:nth-child(even) td {
    background: #fbfdfc;
}

.attendance-detail-table tbody tr:hover td {
    background: #f1faf6;
}

.attendance-detail-row-off td,
.attendance-detail-row-holiday td {
    background: #f2f4f7 !important;
    color: #667085;
}

.attendance-detail-table tbody tr.has-approved-absence td {
    background: #f7fbf2;
}

.attendance-detail-table .status-cell {
    font-weight: 800;
}

.attendance-detail-table .status-alpha:not(:empty) {
    background: #ffd9df !important;
    color: #9b1c31;
}

.attendance-detail-table .status-missing:not(:empty) {
    background: #ffe7d1 !important;
    color: #9a4d0b;
}

.attendance-detail-table .status-work:not(:empty) {
    background: #e7f5ec !important;
    color: #17643f;
}

.attendance-detail-table .status-leave:not(:empty),
.attendance-detail-table .status-special:not(:empty),
.attendance-detail-table .status-permission:not(:empty) {
    background: #fff2b9 !important;
    color: #765b00;
}

.attendance-detail-table .status-sick:not(:empty),
.attendance-detail-table .status-duty:not(:empty) {
    background: #dff3f7 !important;
    color: #135b68;
}

.attendance-detail-table tfoot th {
    height: 26px;
    padding: 3px 4px;
    background: linear-gradient(180deg, #eaf6df, #dcefcf);
    color: #183b2b;
    font-weight: 900;
    border-color: rgba(15, 57, 42, .5);
}

.attendance-detail-document-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 24px;
    align-items: start;
    margin-top: 10px;
    color: #101828;
    font-size: 9px;
}

.attendance-detail-notes {
    display: grid;
    gap: 3px;
}

.attendance-detail-notes strong {
    margin-bottom: 2px;
}

.attendance-detail-signature {
    text-align: center;
}

.attendance-detail-signature .signature-space {
    height: 38px;
    margin: 3px 18px 4px;
    border-bottom: 1px solid #344054;
}

.attendance-detail-signature strong {
    font-weight: 800;
}

.friendly-action-card.is-teal .friendly-action-icon {
    background: #e2f5f2;
    color: #167568;
}

@media (max-width: 1100px) {
    .attendance-detail-document-head {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .attendance-detail-brand,
    .attendance-detail-print-meta {
        justify-self: center;
    }

    .attendance-detail-print-meta {
        display: none;
    }
}

@media (max-width: 900px) {
    .attendance-report-filter-form,
    .attendance-detail-employee-grid {
        grid-template-columns: 1fr;
    }

    .attendance-report-filter-form .filter-actions {
        align-items: stretch;
    }

    .attendance-detail-document {
        padding: 18px;
    }

    .attendance-detail-title-block h1 {
        font-size: 22px;
    }
}

@media print {
    html,
    body {
        width: 297mm;
        height: 210mm;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .attendance-detail-report-page {
        width: 287mm;
        margin: 0;
        padding: 0;
    }

    .attendance-detail-document {
        width: 287mm;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .attendance-detail-document-head {
        grid-template-columns: 71mm 126mm 74mm;
        gap: 5mm;
    }

    .attendance-detail-brand {
        gap: 2.5mm;
        font-size: 10.5pt;
    }

    .attendance-detail-brand img {
        width: 12mm;
        height: 12mm;
        flex-basis: 12mm;
    }

    .attendance-detail-title-block h1 {
        font-size: 17pt;
    }

    .attendance-detail-title-block span {
        min-width: 64mm;
        min-height: 6.5mm;
        margin-top: 1.5mm;
        padding: .7mm 4mm;
        font-size: 9.5pt;
    }

    .attendance-detail-print-meta {
        min-width: 0;
        font-size: 7.5pt;
    }

    .attendance-detail-print-meta > div {
        grid-template-columns: 25mm minmax(0, 1fr);
        gap: 1mm;
        margin: 1mm 0;
    }

    .attendance-detail-green-line {
        height: .8mm;
        margin: 2mm 0 2mm;
    }

    .attendance-detail-employee-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 16mm;
        row-gap: 1.1mm;
        max-width: 250mm;
        margin: 0 auto 2.5mm;
        padding: 0 7mm;
        font-size: 7.7pt;
    }

    .attendance-detail-employee-grid > div {
        grid-template-columns: 31mm minmax(0, 1fr);
        gap: 2mm;
    }

    .attendance-detail-table-wrap {
        overflow: visible;
        border-radius: 0;
    }

    .attendance-detail-table {
        width: 100%;
        min-width: 0;
        font-size: 6.2pt;
        page-break-inside: avoid;
    }

    .attendance-detail-table th,
    .attendance-detail-table td {
        height: 3.55mm;
        padding: .25mm .42mm;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .attendance-detail-table thead tr:first-child th {
        height: 4.6mm;
    }

    .attendance-detail-table thead tr:last-child th {
        height: 3.9mm;
    }

    .attendance-detail-table tfoot th {
        height: 4mm;
    }

    .attendance-detail-document-footer {
        grid-template-columns: 1fr 55mm;
        gap: 8mm;
        margin-top: 1.8mm;
        font-size: 6.7pt;
    }

    .attendance-detail-notes {
        gap: .5mm;
    }

    .attendance-detail-signature .signature-space {
        height: 9mm;
        margin: .5mm 5mm 1mm;
    }
}

/* v0.1.39b - Lembur Saya */
.overtime-my-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}

.overtime-my-summary article {
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid #dce8e4;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff 0%, #f4faf8 100%);
    box-shadow: 0 8px 22px rgba(30, 72, 61, 0.07);
}

.overtime-my-summary article.is-warning {
    border-color: #f3d39b;
    background: linear-gradient(145deg, #fffdf7 0%, #fff5df 100%);
}

.overtime-my-summary span,
.overtime-my-summary small {
    display: block;
}

.overtime-my-summary span {
    margin-bottom: 7px;
    color: #61726d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.overtime-my-summary strong {
    display: block;
    color: #174b3d;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.overtime-my-summary small {
    margin-top: 6px;
    color: #7a8985;
    font-size: 12px;
}

.overtime-list-panel .status-pill {
    white-space: normal;
    text-align: center;
}

.overtime-detail-table .table-subtext,
.overtime-table-wrap .table-subtext {
    max-width: 260px;
    white-space: normal;
}

@media (max-width: 1180px) {
    .overtime-my-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .overtime-my-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .overtime-my-summary {
        grid-template-columns: 1fr;
    }
}

/* v0.1.40 - Employee attendance self monitoring */
.my-attendance-page {
    display: grid;
    gap: 22px;
}

.my-attendance-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 28px;
    align-items: center;
    padding: 28px 30px;
    border: 1px solid rgba(24, 91, 76, .12);
    border-radius: 26px;
    background:
        radial-gradient(circle at 92% 12%, rgba(91, 193, 169, .22), transparent 32%),
        linear-gradient(135deg, #174f45 0%, #217563 58%, #2d927c 100%);
    color: #fff;
    box-shadow: 0 18px 45px rgba(23, 79, 69, .16);
}

.my-attendance-hero .eyebrow {
    color: #bff5e6;
}

.my-attendance-hero h2 {
    margin: 5px 0 8px;
    color: #fff;
    font-size: clamp(1.55rem, 2.5vw, 2.35rem);
}

.my-attendance-hero-copy > p:last-of-type {
    margin: 0;
    max-width: 760px;
    color: rgba(255, 255, 255, .82);
    line-height: 1.65;
}

.my-attendance-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.my-attendance-identity span {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .19);
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .9);
    font-size: .86rem;
}

.my-attendance-month-form {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
}

.my-attendance-month-form label {
    display: grid;
    gap: 7px;
    color: rgba(255, 255, 255, .9);
    font-weight: 800;
}

.my-attendance-month-form input {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, .26);
    background: #fff;
    color: #17253c;
}

.my-attendance-month-form button {
    width: 100%;
    min-height: 46px;
    background: #fff;
    color: #175749;
}

.my-attendance-month-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.my-attendance-month-nav .button {
    min-width: 0;
    padding-inline: 10px;
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    text-align: center;
}

.my-attendance-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 14px;
}

.my-attendance-kpis article {
    position: relative;
    min-width: 0;
    padding: 18px 18px 17px;
    overflow: hidden;
    border: 1px solid #dce7e4;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(25, 50, 66, .07);
}

.my-attendance-kpis article::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: #91a4a0;
}

.my-attendance-kpis article span,
.my-attendance-kpis article small {
    display: block;
}

.my-attendance-kpis article span {
    color: #667976;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.my-attendance-kpis article strong {
    display: block;
    margin: 8px 0 3px;
    color: #163f36;
    font-size: 2rem;
    line-height: 1;
}

.my-attendance-kpis article small {
    color: #7b8c89;
    font-size: .82rem;
}

.my-attendance-kpis .tone-success::before { background: #25a77d; }
.my-attendance-kpis .tone-leave::before { background: #4c75d8; }
.my-attendance-kpis .tone-permission::before { background: #9266d8; }
.my-attendance-kpis .tone-sick::before { background: #42a6b8; }
.my-attendance-kpis .tone-business::before { background: #2d8eae; }
.my-attendance-kpis .tone-warning::before { background: #e6a93b; }
.my-attendance-kpis .tone-danger::before { background: #d85656; }
.my-attendance-kpis .tone-neutral::before { background: #899692; }

.my-attendance-detail-panel {
    overflow: hidden;
}

.my-attendance-info-note {
    margin: 0 0 16px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #eef8f5;
    color: #456b62;
    font-size: .88rem;
}

.my-attendance-table-wrap {
    max-height: 720px;
    border: 1px solid #dfe8e6;
    border-radius: 16px;
}

.my-attendance-table {
    min-width: 980px;
}

.my-attendance-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eff5f4;
    color: #536863;
    white-space: nowrap;
}

.my-attendance-table tbody tr.is-future {
    opacity: .58;
}

.my-attendance-table tbody tr.tone-danger {
    background: #fff4f4;
}

.my-attendance-table tbody tr.tone-leave,
.my-attendance-table tbody tr.tone-permission,
.my-attendance-table tbody tr.tone-sick,
.my-attendance-table tbody tr.tone-business {
    background: #f7fbff;
}

.my-attendance-table tbody tr.tone-off {
    background: #f5f6f6;
}

.my-attendance-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}

.my-attendance-status-pill.tone-success { background: #ddf5ec; color: #11664f; }
.my-attendance-status-pill.tone-warning { background: #fff1cf; color: #905d00; }
.my-attendance-status-pill.tone-danger { background: #ffe0e0; color: #a42323; }
.my-attendance-status-pill.tone-leave { background: #e6edff; color: #385ba8; }
.my-attendance-status-pill.tone-permission { background: #efe7ff; color: #6d43a5; }
.my-attendance-status-pill.tone-sick { background: #ddf5f7; color: #247687; }
.my-attendance-status-pill.tone-business { background: #dff1f8; color: #226c86; }
.my-attendance-status-pill.tone-off,
.my-attendance-status-pill.tone-neutral { background: #ecefef; color: #687673; }

.my-attendance-note {
    display: block;
    min-width: 180px;
    max-width: 300px;
    color: #778582;
    font-size: .82rem;
    line-height: 1.45;
}

.quick-link-icon.ql-teal {
    background: #ddf4ee;
    color: #18705d;
}

@media (max-width: 1180px) {
    .my-attendance-kpis {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 820px) {
    .my-attendance-hero {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .my-attendance-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .my-attendance-kpis {
        grid-template-columns: 1fr;
    }

    .my-attendance-month-nav {
        grid-template-columns: 1fr;
    }
}

/* v0.1.41 - Validasi Realisasi Overtime HRD */
.overtime-validation-page{display:grid;gap:20px;min-width:0}.overtime-validation-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,#f8fffc,#eef8f5)}.overtime-validation-hero h2{margin:.25rem 0 .55rem}.overtime-validation-hero p:last-child{margin:0;max-width:820px;color:#667085}.overtime-validation-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.overtime-validation-kpis article{background:#fff;border:1px solid #dbe7e3;border-radius:20px;padding:18px 20px;box-shadow:0 10px 28px rgba(16,56,49,.05);min-width:0}.overtime-validation-kpis span,.overtime-validation-kpis small{display:block;color:#71807d}.overtime-validation-kpis span{font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.overtime-validation-kpis strong{display:block;margin:8px 0 4px;font-size:1.65rem;color:#14594d;overflow-wrap:anywhere}.overtime-validation-filter{display:grid;grid-template-columns:minmax(220px,1.8fr) repeat(5,minmax(135px,1fr));gap:12px;align-items:end;padding:16px;border-radius:18px;background:#f5f8fa}.overtime-validation-filter label{min-width:0}.overtime-validation-filter .form-actions{display:flex;gap:8px;grid-column:1/-1}.overtime-validation-list{display:grid;gap:14px}.overtime-validation-card{border:1px solid #dfe8e5;border-radius:20px;background:#fff;overflow:hidden}.overtime-validation-card-main{display:grid;grid-template-columns:minmax(230px,.9fr) minmax(0,2.1fr);gap:18px;padding:18px}.overtime-validation-identity{display:flex;flex-direction:column;gap:4px;min-width:0}.overtime-validation-identity>span{font-size:.8rem;color:#667085}.overtime-validation-identity>strong{font-size:1.05rem;color:#17233a}.overtime-validation-identity>small{color:#75817f}.overtime-validation-identity>a{margin-top:5px;color:#176b5b;font-weight:800}.overtime-validation-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.overtime-validation-metrics>div{padding:12px 14px;border-radius:14px;background:#f7faf9;min-width:0}.overtime-validation-metrics span,.overtime-validation-metrics small{display:block}.overtime-validation-metrics>div>span{font-size:.72rem;color:#667085;text-transform:uppercase;font-weight:800}.overtime-validation-metrics strong{display:block;margin:6px 0;color:#153d37}.overtime-validation-metrics small{color:#7b8583;overflow-wrap:anywhere}.overtime-validation-action{border-top:1px solid #e5ece9;background:#fbfdfc}.overtime-validation-action summary{cursor:pointer;padding:12px 18px;font-weight:800;color:#176b5b}.overtime-validation-action form{display:grid;grid-template-columns:minmax(250px,.7fr) minmax(320px,1.5fr);gap:14px;padding:0 18px 18px;align-items:end}.overtime-payable-input{display:flex;align-items:end;gap:8px}.overtime-payable-input label{min-width:110px}.overtime-payable-input input{width:100%}.overtime-minute-field{display:flex;align-items:center;gap:7px;white-space:nowrap}.overtime-minute-field input{width:82px}.overtime-validation-buttons{display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1}.overtime-validator-note{display:block;padding:0 18px 16px;color:#667085}.overtime-validation-card .alert{margin:0;padding:10px 12px}.status-pill.neutral{background:#eef2f3;color:#54615f}.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:18px}.pagination a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border:1px solid #d8e2df;border-radius:10px;background:#fff;color:#29423d;font-weight:700}.pagination a.is-active{background:#176b5b;border-color:#176b5b;color:#fff}
@media(max-width:1180px){.overtime-validation-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.overtime-validation-filter{grid-template-columns:repeat(3,minmax(0,1fr))}.overtime-validation-card-main{grid-template-columns:1fr}.overtime-validation-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.overtime-validation-hero{align-items:flex-start;flex-direction:column}.overtime-validation-kpis,.overtime-validation-filter,.overtime-validation-metrics{grid-template-columns:1fr}.overtime-validation-action form{grid-template-columns:1fr}.overtime-validation-filter .form-actions,.overtime-validation-buttons{grid-column:auto}.overtime-payable-input{align-items:center}.overtime-validation-buttons>*{width:100%;justify-content:center}}
.overtime-validation-audit{margin-top:20px;padding-top:18px;border-top:1px solid #e4ece9}.overtime-validation-audit h3{margin:0 0 12px;color:#173c36}

/* v0.1.42 - Laporan realisasi overtime karyawan dan approval Manager */
.overtime-report-page,
.overtime-report-approval-page {
    display: grid;
    gap: 20px;
    min-width: 0;
}
.overtime-report-hero,
.overtime-report-approval-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, #155a4f 0%, #267f70 100%);
    color: #fff;
}
.overtime-report-hero .eyebrow,
.overtime-report-approval-hero .eyebrow,
.overtime-report-hero p,
.overtime-report-approval-hero p { color: rgba(255,255,255,.86); }
.overtime-report-hero h2,
.overtime-report-approval-hero h2 { color: #fff; margin-bottom: 6px; }
.overtime-report-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.overtime-report-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.overtime-report-summary-grid article {
    background: #fff;
    border: 1px solid #dce9e5;
    border-radius: 18px;
    padding: 18px;
    min-width: 0;
    box-shadow: 0 12px 28px rgba(18,68,59,.06);
}
.overtime-report-summary-grid article span,
.overtime-report-content-grid > div > span {
    display: block;
    color: #6d7d79;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.overtime-report-summary-grid article strong { display: block; color: #12392f; font-size: 21px; line-height: 1.25; }
.overtime-report-summary-grid article small { display: block; color: #7a8985; margin-top: 5px; line-height: 1.45; }
.overtime-report-content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.overtime-report-content-grid > div {
    border: 1px solid #e0eae7;
    background: #f8fbfa;
    border-radius: 14px;
    padding: 15px;
    min-width: 0;
}
.overtime-report-content-grid p { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.overtime-report-files { margin-top: 18px; }
.overtime-report-file-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.overtime-report-file {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid #d7e5e1;
    border-radius: 14px;
    background: #f7fbfa;
    color: #153d34;
    text-decoration: none;
    min-width: 0;
}
.overtime-report-file:hover { border-color: #2a7a69; box-shadow: 0 8px 20px rgba(26,105,90,.1); }
.overtime-report-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overtime-report-file small { color: #798984; }
.overtime-report-form { display: grid; gap: 16px; }
.overtime-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.overtime-upload-option {
    display: grid;
    gap: 7px;
    border: 1px dashed #80aa9f;
    background: #f2faf7;
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
}
.overtime-upload-option strong { color: #155a4f; font-size: 16px; }
.overtime-upload-option span { color: #73837e; font-size: 13px; line-height: 1.45; }
.overtime-upload-option input { width: 100%; }
.overtime-upload-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.overtime-upload-preview > span {
    display: flex;
    flex-direction: column;
    max-width: 260px;
    background: #eef5f3;
    border-radius: 10px;
    padding: 9px 12px;
}
.overtime-upload-preview strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overtime-upload-preview small { color: #6f817c; }
.overtime-existing-files {
    border: 1px solid #dfeae7;
    border-radius: 14px;
    padding: 12px 15px;
    display: grid;
    gap: 8px;
}
.overtime-existing-files legend { font-weight: 800; color: #183d34; padding: 0 6px; }
.overtime-existing-files label,
.checkbox-line { display: flex; align-items: flex-start; gap: 8px; }
.overtime-manager-approved-strip {
    margin: 0 18px 14px;
    padding: 10px 13px;
    border-radius: 11px;
    background: #eaf7f2;
    color: #245b4f;
    font-size: 13px;
}
.overtime-report-approval-list { display: grid; gap: 12px; }
.overtime-report-approval-card {
    display: grid;
    grid-template-columns: 1.1fr 1.25fr .85fr auto;
    align-items: center;
    gap: 16px;
    border: 1px solid #dfe9e6;
    border-radius: 16px;
    padding: 15px 17px;
    background: #fff;
}
.overtime-report-approval-card > div { min-width: 0; display: grid; gap: 3px; }
.overtime-report-approval-card > div:last-child { justify-items: end; gap: 8px; }
.overtime-report-approval-card span:not(.status-pill) { color: #71817d; font-size: 12px; }
.overtime-report-approval-card strong { color: #173a32; overflow-wrap: anywhere; }
.overtime-report-approval-card small { color: #788884; overflow-wrap: anywhere; }
.overtime-manager-action-form { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #e0e9e7; }
.overtime-report-audit { margin-top: 16px; }
.overtime-report-audit summary { cursor: pointer; font-weight: 800; color: #155a4f; }
.table-action-stack { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 1100px) {
    .overtime-report-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overtime-report-approval-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overtime-report-approval-card > div:last-child { justify-items: start; }
}
@media (max-width: 720px) {
    .overtime-report-hero,
    .overtime-report-approval-hero { align-items: flex-start; flex-direction: column; }
    .overtime-report-hero-actions { justify-content: flex-start; }
    .overtime-report-summary-grid,
    .overtime-report-content-grid,
    .overtime-upload-grid,
    .overtime-report-file-grid,
    .overtime-report-approval-card { grid-template-columns: 1fr; }
}

/* HRAC v0.1.44 - Kehadiran Tim Manager */
.team-attendance-page{display:grid;gap:24px;min-width:0}
.team-attendance-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:28px;align-items:center;padding:34px 38px;border-radius:30px;background:linear-gradient(125deg,#155a4f 0%,#1d6b5d 52%,#3b9b8c 100%);color:#fff;box-shadow:0 18px 42px rgba(23,82,73,.16);overflow:hidden;position:relative}
.team-attendance-hero:after{content:"";position:absolute;width:280px;height:280px;border:48px solid rgba(255,255,255,.07);border-radius:50%;right:-90px;top:-125px;pointer-events:none}
.team-attendance-hero h2{font-size:clamp(30px,3vw,44px);line-height:1.08;margin:8px 0 14px;color:#fff}
.team-attendance-hero p{max-width:760px;color:rgba(255,255,255,.86);font-size:16px;line-height:1.65;margin:0}
.team-attendance-hero .eyebrow{color:#c7fff1;letter-spacing:.13em;font-weight:900;text-transform:uppercase;font-size:13px}
.team-attendance-scope-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.team-attendance-scope-list span{display:inline-flex;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.25);font-weight:800;font-size:13px}
.team-attendance-month-form{position:relative;z-index:1;display:grid;gap:13px;padding:22px;border-radius:24px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.team-attendance-month-form label{color:#fff;font-weight:900;display:grid;gap:8px}
.team-attendance-month-form input{background:#fff;border:0;min-height:54px;border-radius:14px;padding:0 16px;font-weight:800;color:#152238}
.team-attendance-month-form button{min-height:52px;border-radius:14px;background:#fff;color:#155a4f;font-weight:900}
.team-attendance-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.team-attendance-kpis article{position:relative;overflow:hidden;min-width:0;padding:22px 22px 20px;border:1px solid #dbe6e5;border-radius:24px;background:#fff;box-shadow:0 10px 28px rgba(31,62,68,.07)}
.team-attendance-kpis article:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#8fa6a2}
.team-attendance-kpis article.tone-success:before{background:#2dbb82}.team-attendance-kpis article.tone-leave:before{background:#8b69dc}.team-attendance-kpis article.tone-permission:before{background:#5d88e5}.team-attendance-kpis article.tone-sick:before{background:#39a7b8}.team-attendance-kpis article.tone-business:before{background:#2f99c9}.team-attendance-kpis article.tone-warning:before{background:#e3a532}.team-attendance-kpis article.tone-danger:before{background:#d9534f}
.team-attendance-kpis span{display:block;color:#657875;font-size:13px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.team-attendance-kpis strong{display:block;margin-top:8px;color:#143f37;font-size:34px;line-height:1.05}
.team-attendance-kpis small{display:block;margin-top:7px;color:#84938f;font-size:13px}
.team-attendance-filter-form{display:grid;grid-template-columns:minmax(300px,1.6fr) minmax(180px,.7fr) minmax(190px,.8fr) minmax(130px,.45fr);gap:14px;padding:20px;border-radius:22px;background:#f2f7f7;margin-top:18px;align-items:end}
.team-attendance-filter-form label{display:grid;gap:7px;font-weight:900;color:#233e4d}
.team-attendance-filter-form input,.team-attendance-filter-form select{min-height:52px;border-radius:14px;border:1px solid #cedadb;background:#fff;padding:0 15px;font-weight:700;color:#172638;min-width:0}
.team-attendance-filter-actions{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap}
.team-attendance-filter-actions button,.team-attendance-filter-actions .button{min-height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px}
.team-attendance-result-copy{margin:18px 0 10px}
.team-attendance-table-wrap{max-width:100%;overflow:auto;border:1px solid #d9e3e4;border-radius:20px}
.team-attendance-table{width:100%;min-width:1180px;border-collapse:separate;border-spacing:0}
.team-attendance-table thead th{position:sticky;top:0;z-index:2;background:#edf5f7;color:#38536a;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:16px 13px;border-bottom:1px solid #d5e0e2;white-space:nowrap}
.team-attendance-table tbody td{padding:15px 13px;border-bottom:1px solid #e1e8e9;vertical-align:middle;color:#20394c;text-align:center}
.team-attendance-table tbody td:first-child,.team-attendance-table tbody td:nth-child(2){text-align:left}
.team-attendance-table tbody tr:last-child td{border-bottom:0}
.team-attendance-table tbody tr:hover td{background:#f8fbfb}
.team-attendance-table td strong{display:block;font-size:14px}.team-attendance-table td small{display:block;color:#7e8f9e;margin-top:4px;font-size:12px;line-height:1.35}
.team-attendance-count{display:inline-flex;min-width:34px;height:34px;align-items:center;justify-content:center;border-radius:999px;background:#e8f5f1;color:#176453;font-weight:900}
.team-attendance-count.is-danger{background:#ffe6e5;color:#b42318}
.team-attendance-detail{scroll-margin-top:120px}
.team-attendance-detail-kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin:18px 0}
.team-attendance-detail-kpis article{padding:16px;border-radius:18px;background:#f3f7f7;border:1px solid #dce7e6;min-width:0}
.team-attendance-detail-kpis span{display:block;font-size:12px;font-weight:900;color:#6b7d7a;text-transform:uppercase;letter-spacing:.04em}.team-attendance-detail-kpis strong{display:block;font-size:26px;color:#155a4f;margin-top:6px}.team-attendance-detail-kpis small{display:block;color:#81908d;margin-top:5px}
@media (max-width:1180px){.team-attendance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.team-attendance-filter-form{grid-template-columns:1fr 1fr}.team-attendance-search{grid-column:1/-1}.team-attendance-detail-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.team-attendance-hero{grid-template-columns:1fr;padding:26px 22px;border-radius:24px}.team-attendance-kpis{grid-template-columns:1fr 1fr}.team-attendance-filter-form{grid-template-columns:1fr;padding:15px}.team-attendance-search,.team-attendance-filter-actions{grid-column:auto}.team-attendance-filter-actions{display:grid;grid-template-columns:1fr 1fr}.team-attendance-detail-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.team-attendance-kpis strong{font-size:28px}}
@media (max-width:460px){.team-attendance-kpis{grid-template-columns:1fr}.team-attendance-detail-kpis{grid-template-columns:1fr 1fr}}

/* =========================================================
   HRAC v0.1.44a - Kehadiran Tim responsive width hotfix
   Keeps wide tables scrollable inside their own panel without
   forcing the whole application page beyond the viewport.
   ========================================================= */
.team-attendance-page{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    container-type:inline-size;
}
.team-attendance-page > *,
.team-attendance-page .panel,
.team-attendance-page .panel-header,
.team-attendance-page form,
.team-attendance-page .table-wrap{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
}
.team-attendance-hero{
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:minmax(0,1fr) minmax(250px,320px);
    box-sizing:border-box;
}
.team-attendance-hero > *{
    min-width:0;
    max-width:100%;
}
.team-attendance-hero h2,
.team-attendance-hero p{
    overflow-wrap:anywhere;
}
.team-attendance-month-form{
    width:100%;
    max-width:320px;
    justify-self:end;
    box-sizing:border-box;
}
.team-attendance-month-form label,
.team-attendance-month-form input,
.team-attendance-month-form button{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}
.team-attendance-kpis{
    width:100%;
    max-width:100%;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.team-attendance-kpis article{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}
.team-attendance-filter-form{
    width:100%;
    max-width:100%;
    grid-template-columns:minmax(240px,1.5fr) minmax(165px,.7fr) minmax(180px,.8fr) minmax(120px,.45fr);
}
.team-attendance-filter-form > *,
.team-attendance-filter-form label,
.team-attendance-filter-form input,
.team-attendance-filter-form select{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
}
.team-attendance-table-wrap,
.my-attendance-table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
}
.team-attendance-detail-kpis{
    width:100%;
    max-width:100%;
    grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
}

/* Respond to the actual content width after the sidebar, not only viewport width. */
@container (max-width:1100px){
    .team-attendance-hero{
        grid-template-columns:minmax(0,1fr) minmax(230px,280px);
        gap:20px;
        padding:30px;
    }
    .team-attendance-hero h2{font-size:clamp(28px,4cqi,40px)}
    .team-attendance-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
    .team-attendance-filter-form{grid-template-columns:1fr 1fr}
    .team-attendance-search{grid-column:1/-1}
}
@container (max-width:820px){
    .team-attendance-hero{
        grid-template-columns:1fr;
        align-items:stretch;
    }
    .team-attendance-month-form{
        max-width:none;
        justify-self:stretch;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:end;
    }
    .team-attendance-month-form label{min-width:0}
    .team-attendance-month-form button{width:auto;min-width:150px}
    .team-attendance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:560px){
    .team-attendance-hero{padding:24px 20px;border-radius:24px}
    .team-attendance-month-form{grid-template-columns:1fr;padding:17px}
    .team-attendance-month-form button{width:100%;min-width:0}
    .team-attendance-kpis{grid-template-columns:1fr}
    .team-attendance-filter-form{grid-template-columns:1fr;padding:15px}
    .team-attendance-search,.team-attendance-filter-actions{grid-column:auto}
    .team-attendance-filter-actions{display:grid;grid-template-columns:1fr}
}

/* =========================================================
   v0.1.44d - Pencarian karyawan pada laporan detail kehadiran
   ========================================================= */
.attendance-report-filter-form {
    grid-template-columns: minmax(260px, 1.15fr) minmax(300px, 1.45fr) minmax(180px, .7fr) auto;
}

.attendance-report-search-field {
    position: relative;
}

.attendance-report-search-field input[type="search"] {
    padding-right: 42px;
}

.attendance-report-search-field small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 1180px) {
    .attendance-report-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attendance-report-filter-form .filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .attendance-report-filter-form {
        grid-template-columns: 1fr;
    }

    .attendance-report-filter-form .filter-actions {
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
    }

    .attendance-report-filter-form .filter-actions button {
        width: 100%;
    }
}

/* =========================================================
   v0.1.45 - Company / Outsourcing workforce scope
   ========================================================= */
.workforce-scope-bar{
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    gap:14px;
    margin:0 0 16px;
    padding:14px 16px;
    border:1px solid #dce8e4;
    border-radius:18px;
    background:linear-gradient(135deg,#f8fbfa 0%,#eef7f4 100%);
    box-shadow:0 8px 24px rgba(17,64,55,.06);
}
.workforce-scope-bar label{min-width:210px;margin:0}
.workforce-scope-bar select{background:#fff}
.workforce-scope-note{
    flex:1 1 280px;
    align-self:center;
    color:#47635d;
    font-size:12px;
    font-weight:700;
    line-height:1.45;
}
.workforce-period-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:0 0 16px;
    padding:11px 16px;
    border-left:4px solid #19806d;
    border-radius:12px;
    background:#eef8f5;
    color:#31544d;
}
.workforce-period-banner strong{color:#0d5b4e}
.workforce-period-banner span{font-size:13px;font-weight:700;text-align:right}
.badge-os{
    background:#fff1db!important;
    color:#a35408!important;
    border-color:#f3c77f!important;
}
.badge-company{
    background:#e7f5f1!important;
    color:#176b5b!important;
    border-color:#a9d7cd!important;
}
.os-only-field[hidden],.company-only-field[hidden]{display:none!important}
.employee-data-table td small{line-height:1.4}

@media (max-width:760px){
    .workforce-scope-bar{display:grid;grid-template-columns:1fr;padding:13px}
    .workforce-scope-bar label{min-width:0;width:100%}
    .workforce-scope-note{width:100%}
    .workforce-period-banner{align-items:flex-start;flex-direction:column}
    .workforce-period-banner span{text-align:left}
}

/* Modern futuristic login v0.1.45a --------------------------------------- */
.hracc-login-placeholder { display: none; }
.hracc-login-placeholder + * { display: initial; }

.hracc-login-placeholder,
.hrac-login-page,
.hrac-login-page * { box-sizing: border-box; }

.hracc-login-placeholder,
.hrac-login-page {
    --login-bg: #031b20;
    --login-bg-deep: #021318;
    --login-panel: rgba(8, 49, 55, .78);
    --login-panel-border: rgba(120, 255, 230, .32);
    --login-bright: #19e7c1;
    --login-bright-2: #1bcba9;
    --login-text: #f4fbfa;
    --login-muted: #a7c2c1;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: clamp(14px, 2vw, 28px);
    color: var(--login-text);
    background:
        radial-gradient(circle at 10% 8%, rgba(27, 203, 169, .16), transparent 24%),
        radial-gradient(circle at 88% 90%, rgba(25, 231, 193, .10), transparent 30%),
        linear-gradient(135deg, var(--login-bg-deep), #052d33 50%, #03191e);
    isolation: isolate;
}

.hrac-login-page::before,
.hrac-login-page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.hrac-login-page::before {
    opacity: .32;
    background-image:
        linear-gradient(rgba(57, 238, 207, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 238, 207, .06) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom right, #000, transparent 62%);
}

.hrac-login-page::after {
    background:
        radial-gradient(circle at 22% 72%, rgba(30, 241, 203, .10) 0 2px, transparent 3px) 0 0 / 34px 34px,
        linear-gradient(116deg, transparent 0 49.8%, rgba(31, 241, 204, .12) 50%, transparent 50.2%) 0 0 / 240px 240px;
    opacity: .65;
}

.hrac-login-orb {
    position: absolute;
    border: 1px solid rgba(36, 241, 207, .26);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.hrac-login-orb-one {
    width: min(54vw, 760px);
    aspect-ratio: 1;
    top: -31vw;
    right: 18vw;
    box-shadow: 0 0 90px rgba(23, 232, 194, .07) inset;
}

.hrac-login-orb-two {
    width: min(42vw, 580px);
    aspect-ratio: 1;
    left: -23vw;
    bottom: -26vw;
}

.hrac-login-shell {
    width: min(1480px, 100%);
    min-height: calc(100vh - clamp(28px, 4vw, 56px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
    border: 1px solid rgba(141, 255, 237, .18);
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(3, 31, 36, .84), rgba(3, 24, 29, .92));
    box-shadow: 0 34px 90px rgba(0, 10, 14, .45);
    backdrop-filter: blur(18px);
}

.hrac-login-showcase {
    position: relative;
    min-height: 740px;
    padding: clamp(28px, 4vw, 58px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 80%, rgba(12, 212, 180, .15), transparent 34%),
        linear-gradient(145deg, rgba(2, 38, 43, .96), rgba(2, 25, 30, .88));
}

.hrac-login-showcase::after {
    content: "";
    position: absolute;
    width: 64%;
    aspect-ratio: 1;
    right: -22%;
    top: -15%;
    border: 1px solid rgba(33, 237, 203, .24);
    border-radius: 46% 54% 62% 38% / 37% 42% 58% 63%;
    transform: rotate(24deg);
    box-shadow: 0 0 70px rgba(18, 225, 190, .08) inset;
}

.hrac-login-company {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
}

.hrac-login-company-logo {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    padding: 8px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18), 0 0 0 1px rgba(255, 255, 255, .08);
}

.hrac-login-company-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hrac-login-company strong,
.hrac-login-company small {
    display: block;
    line-height: 1.08;
    letter-spacing: .02em;
}

.hrac-login-company strong { font-size: 16px; }
.hrac-login-company small { margin-top: 4px; font-size: 13px; color: #c8dddc; letter-spacing: .08em; }

.hrac-login-intro {
    position: relative;
    z-index: 2;
    width: min(510px, 86%);
    margin-top: clamp(72px, 11vh, 130px);
}

.hrac-login-kicker,
.hrac-login-panel-heading > p {
    margin: 0 0 14px;
    color: var(--login-bright);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .18em;
}

.hrac-login-intro h1 {
    margin: 0;
    font-size: clamp(40px, 4.2vw, 68px);
    line-height: 1.06;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.hrac-login-accent-line {
    display: block;
    width: 58px;
    height: 3px;
    margin: 25px 0 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--login-bright), transparent);
    box-shadow: 0 0 20px rgba(25, 231, 193, .75);
}

.hrac-login-description {
    max-width: 440px;
    margin: 0;
    color: #bdd0cf;
    font-size: 17px;
    line-height: 1.75;
}

.hrac-login-visual {
    position: relative;
    z-index: 1;
    width: min(460px, 72%);
    height: 260px;
    margin: auto auto 18px;
    perspective: 850px;
}

.hrac-login-ring,
.hrac-login-platform {
    position: absolute;
    left: 50%;
    border-radius: 50%;
    transform: translateX(-50%);
}

.hrac-login-ring {
    bottom: 14px;
    border: 2px solid rgba(31, 255, 217, .85);
    box-shadow: 0 0 22px rgba(23, 243, 207, .6), inset 0 0 20px rgba(22, 235, 201, .22);
}

.hrac-login-ring.ring-one { width: 280px; height: 78px; }
.hrac-login-ring.ring-two { width: 206px; height: 55px; bottom: 25px; opacity: .55; }

.hrac-login-platform {
    bottom: 0;
    width: 320px;
    height: 88px;
    border: 1px solid rgba(44, 232, 203, .34);
    background: radial-gradient(ellipse at center, rgba(18, 225, 190, .28), rgba(5, 61, 67, .18) 45%, transparent 68%);
    filter: blur(.2px);
}

.hrac-login-holo-card {
    position: absolute;
    display: grid;
    place-items: center;
    width: 126px;
    height: 145px;
    border: 1px solid rgba(122, 255, 234, .48);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(45, 231, 203, .22), rgba(5, 54, 61, .34));
    box-shadow: inset 0 0 30px rgba(32, 225, 195, .12), 0 24px 45px rgba(0, 0, 0, .28), 0 0 22px rgba(19, 229, 194, .12);
    backdrop-filter: blur(10px);
    transform-style: preserve-3d;
}

.hrac-login-holo-card svg {
    width: 62px;
    stroke: #a7fff1;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px rgba(25, 231, 193, .72));
}

.hrac-login-holo-card.holo-user { left: 22%; bottom: 54px; transform: rotateY(18deg) rotateZ(-3deg); }
.hrac-login-holo-card.holo-calendar { right: 21%; bottom: 62px; transform: rotateY(-18deg) rotateZ(3deg); }
.hrac-login-holo-card.holo-check {
    width: 92px;
    height: 86px;
    left: calc(50% - 46px);
    bottom: 35px;
    z-index: 3;
    transform: translateZ(50px);
    background: linear-gradient(145deg, rgba(39, 246, 211, .44), rgba(6, 96, 99, .5));
}

.hrac-login-benefits {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.hrac-login-benefits > div {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 13px 8px;
    border: 1px solid rgba(120, 255, 232, .10);
    border-radius: 16px;
    background: rgba(7, 48, 54, .42);
    text-align: center;
}

.hrac-login-benefits span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--login-bright);
    background: rgba(25, 231, 193, .07);
}

.hrac-login-benefits svg,
.hrac-login-secure-note svg {
    width: 24px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hrac-login-benefits strong { font-size: 12px; line-height: 1.3; }

.hrac-login-footer {
    position: relative;
    z-index: 2;
    margin-top: 22px;
    color: #769695;
    font-size: 12px;
}

.hrac-login-access {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(30px, 5vw, 74px);
    background:
        radial-gradient(circle at 50% 38%, rgba(20, 227, 192, .12), transparent 28%),
        linear-gradient(155deg, rgba(4, 39, 45, .70), rgba(2, 21, 26, .96));
}

.hrac-login-panel {
    position: relative;
    width: min(520px, 100%);
    padding: clamp(30px, 4vw, 54px);
    border: 1px solid var(--login-panel-border);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(20, 70, 75, .62), rgba(3, 34, 40, .82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 28px 70px rgba(0, 0, 0, .34);
    backdrop-filter: blur(24px);
}

.hrac-login-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255,255,255,.055), transparent 30%, transparent 70%, rgba(24, 231, 195, .035));
}

.hrac-login-panel-logo {
    position: relative;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
}

.hrac-login-panel-logo::before,
.hrac-login-panel-logo::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(25, 231, 193, .42);
    border-radius: 50%;
}

.hrac-login-panel-logo::before { width: 112px; height: 112px; box-shadow: 0 0 30px rgba(25, 231, 193, .14); }
.hrac-login-panel-logo::after { width: 136px; height: 136px; opacity: .25; }

.hrac-login-panel-logo > span {
    position: relative;
    z-index: 1;
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    padding: 12px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 26px rgba(25, 231, 193, .3);
}

.hrac-login-panel-logo img { width: 100%; height: 100%; object-fit: contain; }

.hrac-login-panel-heading {
    position: relative;
    text-align: center;
    margin-bottom: 28px;
}

.hrac-login-panel-heading > p { display: none; }

.hrac-login-panel-heading h2 {
    margin: 0 0 7px;
    color: #fff;
    font-size: clamp(27px, 2.4vw, 35px);
    letter-spacing: -.025em;
}

.hrac-login-panel-heading > span { color: var(--login-muted); font-size: 14px; }

.hrac-login-error {
    position: relative;
    margin: 0 0 20px;
    border: 1px solid rgba(255, 121, 121, .34);
    background: rgba(153, 27, 27, .28);
    color: #ffe3e3;
}

.hrac-login-form {
    position: relative;
    display: grid;
    gap: 11px;
}

.hrac-login-form > label {
    margin-top: 4px;
    color: #e8f4f2;
    font-size: 12px;
    font-weight: 750;
}

.hrac-login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.hrac-login-input-wrap > svg {
    position: absolute;
    left: 17px;
    width: 23px;
    pointer-events: none;
    stroke: #d5e9e6;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hrac-login-input-wrap input {
    width: 100%;
    min-height: 58px;
    padding: 14px 54px 14px 52px;
    border: 1px solid rgba(183, 228, 222, .22);
    border-radius: 14px;
    outline: none;
    background: rgba(255, 255, 255, .065);
    color: #fff;
    font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.hrac-login-input-wrap input::placeholder { color: #91aaa8; }

.hrac-login-input-wrap input:focus {
    border-color: rgba(25, 231, 193, .86);
    background: rgba(255, 255, 255, .085);
    box-shadow: 0 0 0 4px rgba(25, 231, 193, .08), 0 0 28px rgba(25, 231, 193, .11);
}

.hrac-login-password-toggle {
    position: absolute;
    right: 10px;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 10px;
    background: transparent;
    color: #d8e9e7;
}

.hrac-login-password-toggle:hover,
.hrac-login-password-toggle:focus-visible { background: rgba(255, 255, 255, .08); }
.hrac-login-password-toggle svg { width: 22px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hrac-login-password-toggle .icon-eye-off { display: none; }
.hrac-login-password-toggle[aria-pressed="true"] .icon-eye { display: none; }
.hrac-login-password-toggle[aria-pressed="true"] .icon-eye-off { display: block; }

.hrac-login-submit {
    min-height: 58px;
    margin-top: 14px;
    padding: 13px 18px;
    border: 0;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    color: #fff;
    background: linear-gradient(100deg, #13aa7e, #11d8c2);
    box-shadow: 0 12px 30px rgba(12, 199, 165, .20), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.hrac-login-submit span { justify-self: center; padding-left: 22px; font-size: 16px; font-weight: 850; }
.hrac-login-submit svg { width: 23px; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hrac-login-submit:hover { background: linear-gradient(100deg, #15ba8a, #18e2cb); filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 15px 36px rgba(12, 199, 165, .27); }
.hrac-login-submit:active { transform: translateY(0); }

.hrac-login-secure-note {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(198, 235, 230, .12);
    color: #91acab;
    font-size: 12px;
    text-align: center;
}

.hrac-login-secure-note svg { flex: 0 0 auto; width: 20px; color: var(--login-bright); }
.hrac-login-mobile-company,
.hrac-login-mobile-benefits { display: none; }

@media (max-width: 1120px) {
    .hrac-login-shell { grid-template-columns: minmax(0, .95fr) minmax(400px, 1.05fr); }
    .hrac-login-showcase { padding: 34px; }
    .hrac-login-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hrac-login-visual { width: 92%; }
}

@media (max-width: 860px) {
    .hrac-login-page { padding: 0; overflow: auto; }
    .hrac-login-orb-one { width: 130vw; top: -72vw; right: -52vw; }
    .hrac-login-shell {
        min-height: 100vh;
        display: block;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .hrac-login-showcase { display: none; }
    .hrac-login-access {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 30px 18px 24px;
        background:
            radial-gradient(circle at 50% 8%, rgba(23, 231, 195, .17), transparent 27%),
            linear-gradient(160deg, rgba(3, 40, 46, .34), rgba(2, 19, 23, .72));
    }
    .hrac-login-mobile-company {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 28px;
        color: #e9f8f5;
        font-size: 12px;
        letter-spacing: .10em;
        text-align: center;
    }
    .hrac-login-mobile-company .hrac-login-company-logo { width: 70px; height: 70px; border-radius: 20px; }
    .hrac-login-panel { width: min(520px, 100%); padding: 30px 22px; border-radius: 24px; }
    .hrac-login-panel-logo { display: none; }
    .hrac-login-panel-heading > p { display: block; margin-bottom: 12px; }
    .hrac-login-panel-heading h2 { font-size: 28px; }
    .hrac-login-mobile-benefits {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        margin-top: 22px;
        color: #87a7a5;
        font-size: 11px;
    }
    .hrac-login-mobile-benefits i { width: 3px; height: 3px; border-radius: 50%; background: var(--login-bright); }
}

@media (max-width: 420px) {
    .hrac-login-access { justify-content: flex-start; padding-top: 24px; }
    .hrac-login-mobile-company { margin-bottom: 20px; }
    .hrac-login-mobile-company .hrac-login-company-logo { width: 62px; height: 62px; }
    .hrac-login-panel { padding: 25px 17px 22px; border-radius: 21px; }
    .hrac-login-panel-heading { margin-bottom: 22px; }
    .hrac-login-panel-heading h2 { font-size: 25px; }
    .hrac-login-panel-heading > span { font-size: 13px; }
    .hrac-login-input-wrap input { min-height: 54px; font-size: 14px; }
    .hrac-login-submit { min-height: 54px; }
    .hrac-login-secure-note { line-height: 1.45; }
}

@media (prefers-reduced-motion: no-preference) {
    .hrac-login-holo-card.holo-user { animation: hrac-login-float-one 5.5s ease-in-out infinite; }
    .hrac-login-holo-card.holo-calendar { animation: hrac-login-float-two 6s ease-in-out infinite; }
    .hrac-login-holo-card.holo-check { animation: hrac-login-float-check 4.8s ease-in-out infinite; }
    .hrac-login-panel-logo::after { animation: hrac-login-pulse 3s ease-in-out infinite; }
}

@keyframes hrac-login-float-one {
    0%, 100% { transform: rotateY(18deg) rotateZ(-3deg) translateY(0); }
    50% { transform: rotateY(18deg) rotateZ(-3deg) translateY(-9px); }
}
@keyframes hrac-login-float-two {
    0%, 100% { transform: rotateY(-18deg) rotateZ(3deg) translateY(0); }
    50% { transform: rotateY(-18deg) rotateZ(3deg) translateY(-12px); }
}
@keyframes hrac-login-float-check {
    0%, 100% { transform: translateZ(50px) translateY(0); }
    50% { transform: translateZ(50px) translateY(-8px); }
}
@keyframes hrac-login-pulse {
    0%, 100% { transform: scale(.94); opacity: .18; }
    50% { transform: scale(1.06); opacity: .38; }
}

/* Compact single-screen login v0.1.45b ----------------------------------- */
.hrac-login-page {
    height: 100vh;
    height: 100dvh;
    min-height: 560px;
    padding: clamp(10px, 1.45vw, 22px);
}

.hrac-login-shell {
    height: calc(100vh - clamp(20px, 2.9vw, 44px));
    height: calc(100dvh - clamp(20px, 2.9vw, 44px));
    min-height: 0;
    max-height: 920px;
}

.hrac-login-showcase {
    min-height: 0;
    height: 100%;
    padding: clamp(24px, 3vw, 46px);
}

.hrac-login-company-logo {
    width: clamp(46px, 3.5vw, 56px);
    height: clamp(46px, 3.5vw, 56px);
}

.hrac-login-intro {
    margin-top: clamp(28px, 6.5vh, 72px);
}

.hrac-login-intro h1 {
    font-size: clamp(36px, 3.55vw, 58px);
}

.hrac-login-accent-line {
    margin: 18px 0 16px;
}

.hrac-login-description {
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.62;
}

.hrac-login-visual {
    width: min(410px, 72%);
    height: clamp(190px, 29vh, 245px);
    margin: auto auto 4px;
    transform: scale(.9);
    transform-origin: center bottom;
}

.hrac-login-footer {
    margin-top: 8px;
}

.hrac-login-access {
    min-height: 0;
    height: 100%;
    padding: clamp(20px, 3.6vw, 52px);
}

.hrac-login-panel {
    width: min(500px, 100%);
    max-height: calc(100% - 8px);
    padding: clamp(24px, 3.2vw, 42px);
    overflow: hidden;
}

.hrac-login-panel-logo {
    margin-bottom: clamp(14px, 2vh, 20px);
}

.hrac-login-panel-logo::before { width: 94px; height: 94px; }
.hrac-login-panel-logo::after { width: 116px; height: 116px; }
.hrac-login-panel-logo > span {
    width: 70px;
    height: 70px;
    padding: 10px;
    border-radius: 21px;
}

.hrac-login-panel-heading {
    margin-bottom: clamp(18px, 2.7vh, 24px);
}

.hrac-login-panel-heading h2 {
    font-size: clamp(25px, 2.15vw, 32px);
}

.hrac-login-input-wrap input,
.hrac-login-submit {
    min-height: 54px;
}

.hrac-login-version {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(198, 235, 230, .12);
    color: #8da9a7;
    text-align: center;
}

.hrac-login-version > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 11px;
}

.hrac-login-version i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--login-bright);
    box-shadow: 0 0 8px rgba(25, 231, 193, .55);
}

.hrac-login-version strong {
    color: #d5e8e6;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hrac-login-benefits,
.hrac-login-mobile-benefits,
.hrac-login-secure-note {
    display: none !important;
}

@media (max-height: 760px) and (min-width: 861px) {
    .hrac-login-page { min-height: 520px; }
    .hrac-login-showcase { padding: 22px 34px; }
    .hrac-login-company-logo { width: 46px; height: 46px; border-radius: 14px; }
    .hrac-login-company strong { font-size: 14px; }
    .hrac-login-company small { font-size: 11px; }
    .hrac-login-intro { margin-top: 24px; }
    .hrac-login-intro h1 { font-size: clamp(34px, 3.6vw, 48px); }
    .hrac-login-description { font-size: 14px; line-height: 1.5; }
    .hrac-login-visual { height: 190px; transform: scale(.75); }
    .hrac-login-access { padding: 18px 34px; }
    .hrac-login-panel { padding: 22px 32px; }
    .hrac-login-panel-logo { margin-bottom: 10px; }
    .hrac-login-panel-logo::before { width: 76px; height: 76px; }
    .hrac-login-panel-logo::after { width: 94px; height: 94px; }
    .hrac-login-panel-logo > span { width: 58px; height: 58px; border-radius: 18px; }
    .hrac-login-panel-heading { margin-bottom: 14px; }
    .hrac-login-panel-heading h2 { font-size: 26px; }
    .hrac-login-form { gap: 7px; }
    .hrac-login-input-wrap input,
    .hrac-login-submit { min-height: 48px; }
    .hrac-login-submit { margin-top: 8px; }
    .hrac-login-version { margin-top: 14px; padding-top: 13px; gap: 5px; }
}

@media (max-width: 860px) {
    .hrac-login-page {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: auto;
    }

    .hrac-login-shell {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: none;
    }

    .hrac-login-access {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        padding: clamp(18px, 5vh, 34px) 18px;
    }

    .hrac-login-mobile-company {
        margin-bottom: clamp(14px, 3vh, 24px);
    }

    .hrac-login-panel {
        max-height: none;
        overflow: visible;
        padding: clamp(22px, 4vh, 30px) 22px;
    }

    .hrac-login-panel-heading {
        margin-bottom: clamp(18px, 3vh, 24px);
    }

    .hrac-login-version {
        margin-top: 18px;
        padding-top: 16px;
    }
}

@media (max-width: 420px) {
    .hrac-login-access {
        justify-content: center;
        padding-top: 18px;
        padding-bottom: 18px;
    }
    .hrac-login-mobile-company { margin-bottom: 14px; }
    .hrac-login-mobile-company .hrac-login-company-logo { width: 56px; height: 56px; }
    .hrac-login-panel { padding: 21px 16px 18px; }
    .hrac-login-panel-heading { margin-bottom: 18px; }
    .hrac-login-panel-heading h2 { font-size: 24px; }
    .hrac-login-input-wrap input,
    .hrac-login-submit { min-height: 50px; }
    .hrac-login-version > div { gap: 7px; font-size: 10px; }
    .hrac-login-version strong { font-size: 10px; }
}

/* Precision-balanced login layout v0.1.45c ------------------------------- */
/* Visual-only refinement. Authentication and application logic unchanged. */
.hrac-login-panel-logo {
    display: none !important;
}

@media (min-width: 861px) {
    .hrac-login-shell {
        grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
    }

    .hrac-login-showcase {
        padding: clamp(28px, 3vw, 48px) clamp(34px, 4vw, 60px);
    }

    .hrac-login-intro {
        width: min(500px, 92%);
        margin-top: clamp(42px, 7vh, 74px);
    }

    .hrac-login-intro h1 {
        max-width: 500px;
        font-size: clamp(38px, 3.35vw, 54px);
        line-height: 1.04;
        letter-spacing: -.04em;
    }

    .hrac-login-accent-line {
        margin: 18px 0 16px;
    }

    .hrac-login-description {
        max-width: 470px;
        font-size: clamp(14px, 1vw, 16px);
        line-height: 1.6;
    }

    .hrac-login-visual {
        width: min(500px, 88%);
        height: clamp(220px, 31vh, 285px);
        margin: clamp(18px, 3vh, 34px) auto 0;
        transform: scale(.98);
        transform-origin: center center;
    }

    .hrac-login-footer {
        margin-top: auto;
        padding-top: 14px;
    }

    .hrac-login-access {
        padding: clamp(28px, 4vw, 56px) clamp(30px, 4vw, 56px);
    }

    .hrac-login-panel {
        width: min(470px, 100%);
        padding: clamp(34px, 3vw, 46px);
        border-radius: 26px;
    }

    .hrac-login-panel-heading {
        margin-bottom: 26px;
    }

    .hrac-login-panel-heading > p {
        display: none;
    }

    .hrac-login-panel-heading h2 {
        font-size: clamp(27px, 2vw, 31px);
        line-height: 1.16;
    }

    .hrac-login-panel-heading > span {
        display: block;
        margin-top: 8px;
    }

    .hrac-login-input-wrap input,
    .hrac-login-submit {
        min-height: 56px;
    }

    .hrac-login-version {
        margin-top: 18px;
        padding-top: 16px;
        gap: 7px;
    }
}

@media (max-height: 760px) and (min-width: 861px) {
    .hrac-login-shell {
        grid-template-columns: minmax(0, 1.03fr) minmax(410px, .97fr);
    }

    .hrac-login-showcase {
        padding: 22px 36px;
    }

    .hrac-login-intro {
        margin-top: 24px;
    }

    .hrac-login-intro h1 {
        font-size: clamp(34px, 3.15vw, 44px);
    }

    .hrac-login-description {
        font-size: 13px;
        line-height: 1.48;
    }

    .hrac-login-visual {
        width: min(430px, 82%);
        height: 184px;
        margin-top: 12px;
        transform: scale(.82);
    }

    .hrac-login-footer {
        padding-top: 6px;
    }

    .hrac-login-access {
        padding: 18px 34px;
    }

    .hrac-login-panel {
        width: min(440px, 100%);
        padding: 28px 32px;
    }

    .hrac-login-panel-heading {
        margin-bottom: 16px;
    }

    .hrac-login-panel-heading h2 {
        font-size: 26px;
    }

    .hrac-login-input-wrap input,
    .hrac-login-submit {
        min-height: 50px;
    }

    .hrac-login-version {
        margin-top: 13px;
        padding-top: 12px;
        gap: 5px;
    }
}

@media (max-width: 860px) {
    .hrac-login-access {
        padding-inline: 18px;
    }

    .hrac-login-panel {
        width: min(480px, 100%);
    }

    .hrac-login-panel-heading > p {
        display: none;
    }

    .hrac-login-version > div {
        line-height: 1.45;
    }
}

@media (max-width: 420px) {
    .hrac-login-mobile-company {
        gap: 9px;
    }

    .hrac-login-panel {
        padding: 22px 17px 19px;
    }

    .hrac-login-panel-heading h2 {
        font-size: 23px;
    }

    .hrac-login-version {
        margin-top: 15px;
        padding-top: 13px;
    }
}

/* =========================================================
   v0.1.45h - Factory photo background hotfix
   Foto wajib berada di: assets/images/login-factory-bg.jpg
   ========================================================= */
.hrac-login-page {
    background-image:
        linear-gradient(90deg, rgba(1, 23, 28, .76) 0%, rgba(1, 29, 34, .69) 46%, rgba(1, 20, 25, .82) 100%),
        url("./images/login-factory-bg.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

.hrac-login-shell {
    background: rgba(2, 27, 32, .30) !important;
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

.hrac-login-showcase {
    background: linear-gradient(90deg, rgba(2, 28, 33, .48), rgba(2, 28, 33, .18)) !important;
}

.hrac-login-access {
    background:
        radial-gradient(circle at 50% 38%, rgba(20, 227, 192, .10), transparent 30%),
        linear-gradient(155deg, rgba(3, 39, 45, .48), rgba(2, 21, 26, .72)) !important;
}

.hrac-login-panel {
    background: linear-gradient(160deg, rgba(11, 63, 69, .82), rgba(3, 34, 40, .90)) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
}

@media (max-width: 860px) {
    .hrac-login-page {
        background-position: 50% center !important;
        background-attachment: scroll !important;
    }

    .hrac-login-access {
        background:
            linear-gradient(180deg, rgba(2, 25, 30, .68), rgba(2, 18, 23, .84)) !important;
    }
}

/* =========================================================
   v0.1.45i - Factory photo visibility correction
   Foto: assets/images/login-factory-bg.jpg
   ========================================================= */
.hrac-login-page {
    background: #031a1f !important;
}

.hrac-login-shell {
    background-image:
        linear-gradient(90deg,
            rgba(1, 21, 26, .30) 0%,
            rgba(1, 24, 29, .38) 48%,
            rgba(1, 19, 24, .68) 100%),
        url("./images/login-factory-bg.jpg") !important;
    background-position: center 52% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-color: #032027 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.hrac-login-showcase {
    background:
        radial-gradient(circle at 42% 78%, rgba(13, 224, 188, .13), transparent 34%),
        linear-gradient(180deg, rgba(2, 29, 34, .12), rgba(2, 24, 29, .28)) !important;
}

.hrac-login-access {
    background:
        radial-gradient(circle at 50% 38%, rgba(20, 227, 192, .08), transparent 30%),
        linear-gradient(155deg, rgba(3, 39, 45, .38), rgba(2, 21, 26, .62)) !important;
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

.hrac-login-panel {
    background: linear-gradient(160deg, rgba(9, 58, 64, .86), rgba(3, 31, 37, .92)) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
}

@media (max-width: 860px) {
    .hrac-login-shell {
        background-position: 48% center !important;
    }

    .hrac-login-access {
        background: linear-gradient(180deg, rgba(2, 25, 30, .48), rgba(2, 18, 23, .72)) !important;
    }
}

/* v0.1.45o - Template import karyawan berbasis master aktif */
.import-template-card-featured {
    border-color: rgba(31, 109, 96, .28);
    background: linear-gradient(145deg, #f2fbf8, #ffffff);
    box-shadow: 0 12px 30px rgba(31, 93, 80, .08);
}
.import-template-card-featured .import-step {
    background: linear-gradient(135deg, #176b59, #24a487);
}
.import-template-card-featured .template-actions .button {
    background: linear-gradient(135deg, #176b59, #20a286);
}
@media (max-width: 760px) {
    .import-template-card-featured .template-actions,
    .import-template-card-featured .template-actions .button {
        width: 100%;
    }
}


/* v0.1.54k - IEI HRMS login branding readability */
.hrac-login-intro {
    width: min(600px, 90%);
}
.hrac-login-kicker {
    color: #54f4d8;
    text-shadow: 0 2px 12px rgba(0,0,0,.68);
}
.hrac-login-intro h1 {
    color: #ffffff;
    letter-spacing: -.035em;
    text-shadow: 0 4px 24px rgba(0,0,0,.72);
}
.hrac-login-description {
    max-width: 560px;
    color: #f2fbfa;
    font-weight: 600;
    text-shadow: 0 2px 12px rgba(0,0,0,.78);
}
.hrac-login-panel-heading > span {
    color: #c9dfdd;
}
@media (max-width: 860px) {
    .hrac-login-panel-heading > p {
        color: #54f4d8;
    }
}