/**
 * Presensia design foundation — shared tokens & components (employee + admin surfaces)
 */
:root {
    --ui-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --ui-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1);
    --ui-radius: 12px;
    --ui-radius-lg: 16px;
    --ui-radius-xl: 18px;
    --ui-border: #e2e8f0;
    --ui-text: #0f172a;
    --ui-muted: #64748b;
    --ui-primary: #2563eb;
    --ui-body: #475569;
    --ui-navy: #1e3a5f;
    --ui-navy-mid: #2a4a73;
    --ui-navy-light: #3b6ea8;
    --ui-surface: #f5f7fb;
    --ui-surface-alt: #eff4fa;
    --ui-surface-card: #f8fafc;
    --employee-shell-max: 480px;
    --employee-gutter: 20px;
    --ep-gradient-hub: linear-gradient(180deg, #1e3a5f 0%, #2a4a73 20%, #eff4fa 20%, #f8fafc 100%);
    --ep-gradient-profile: linear-gradient(180deg, #1e3a5f 0%, #1e3a5f 18%, #f5f7fb 18%, #f5f7fb 100%);
}

/* KPI & hero — mobile-first default */
.ui-kpi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    min-width: 0;
}
.ui-kpi-card {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 14px;
    box-shadow: var(--ui-shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}
.ui-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ui-kpi-body { min-width: 0; }
.ui-kpi-value { font-size: 1rem; font-weight: 800; color: var(--ui-text); line-height: 1.25; }
.ui-kpi-label { font-size: 0.75rem; color: var(--ui-muted); margin-top: 2px; }
.ui-hero-meta-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--ui-radius);
    padding: 10px 12px;
    min-width: 120px;
}
.ui-eyebrow {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}
.ui-hero-meta-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    margin-top: 2px;
}
.ui-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--ui-muted);
    font-size: 0.875rem;
}
.ui-empty-state-icon {
    display: inline-flex;
    margin-bottom: 10px;
    color: #94a3b8;
}
.ui-inline-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}
.ui-control {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    font-size: 0.875rem;
    font-family: inherit;
    background: #fff;
    color: var(--ui-text);
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
.ui-toolbar-field { min-width: 0; width: 100%; }
.ui-toolbar-field--wide { flex: 1; min-width: 0; width: 100%; }

/* Sidebar badge (Approval Center pending count) */
.sidebar-link { position: relative; }
.sidebar-link-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Document preview modal (shared) */
.doc-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 11000;
}
.doc-modal.open { display: flex; }
.doc-modal-card {
    background: #fff;
    border-radius: 16px;
    width: min(960px, 100%);
    height: min(85vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.doc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.doc-modal-title { font-weight: 700; color: #0f172a; font-size: 0.875rem; }
.doc-modal-close {
    border: none;
    background: #f1f5f9;
    color: #334155;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}
.doc-modal-body { flex: 1; min-height: 0; }
.doc-modal-frame { width: 100%; height: 100%; border: none; }

/* Trial status banner (admin + employee layouts) */
.trial-banner {
    padding: 10px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.trial-banner--normal {
    background: linear-gradient(90deg, #eff6ff, #dbeafe);
    color: #1e40af;
    border-bottom: 1px solid #bfdbfe;
}
.trial-banner--urgent {
    background: linear-gradient(90deg, #fef3c7, #fde68a);
    color: #92400e;
    border-bottom: 1px solid #fcd34d;
}
.trial-banner__icon {
    display: inline;
    vertical-align: -2px;
    margin-right: 4px;
}
.trial-banner__link {
    color: inherit;
    text-decoration: underline;
    margin-left: 4px;
}
.trial-banner__link:hover {
    text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Approval Center (Wave 2 — cuti & lembur)                            */
/* ------------------------------------------------------------------ */
.ac-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.ac-stat {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 16px;
    box-shadow: var(--ui-shadow-sm);
}
.ac-stat--highlight {
    border-color: #93c5fd;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}
.ac-stat--warn {
    border-color: rgba(239, 68, 68, 0.35);
    background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ac-stat--warn:hover { border-color: rgba(239, 68, 68, 0.55); }
.ac-stat--warn.ac-stat--active { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.22); }
.ac-stat__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}
.ac-stat__label {
    display: block;
    font-size: 0.8125rem;
    color: var(--ui-muted);
    margin-top: 4px;
}
.ac-toolbar { padding: 14px 16px; margin-bottom: 16px; }
.ac-filters { display: flex; flex-direction: column; gap: 12px; }
.ac-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-filter-tab {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--ui-border);
    background: #f8fafc;
    color: #334155;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}
.ac-filter-tab--active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.ac-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ac-select, .ac-search {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    font-size: 0.875rem;
    font-family: inherit;
}
.ac-search { flex: 1; min-width: 180px; }
.ac-queue {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.ac-card {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 16px;
    box-shadow: var(--ui-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ac-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ac-kind {
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 6px;
}
.ac-kind--cuti { background: #eff6ff; color: #2563eb; }
.ac-kind--lembur { background: #f5f3ff; color: #7c3aed; }
.ac-status {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
}
.ac-status--pending { background: #fef3c7; color: #b45309; }
.ac-status--approved { background: #d1fae5; color: #047857; }
.ac-status--rejected { background: #fee2e2; color: #b91c1c; }
.ac-card__employee { font-size: 1rem; font-weight: 800; color: #0f172a; margin: 0; }
.ac-card__title { font-size: 0.875rem; font-weight: 600; color: #334155; margin: 0; }
.ac-card__sub { font-size: 0.8125rem; color: var(--ui-muted); margin: 0; }
.ac-card__note { font-size: 0.8125rem; color: #475569; margin: 0; line-height: 1.45; }
.ac-card__warn {
    font-size: 0.75rem;
    color: #b45309;
    background: #fffbeb;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 0;
}
.ac-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.75rem;
    color: #94a3b8;
}
.ac-meta-chip { color: #2563eb; font-weight: 600; }
.ac-meta-chip--warn { color: #b91c1c; background: #fee2e2; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; }
.ac-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}
.ac-inline-form { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.ac-reject-form { flex: 1; min-width: 200px; }
.ac-note-input {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-family: inherit;
    min-width: 140px;
}
.ac-note-input--wide { width: 100%; max-width: 360px; }
.ac-empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--ui-muted); }
.ac-empty__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f1f5f9;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 10px;
}
.ac-pager { margin-top: 16px; }
.ac-view-toggle { display: inline-flex; gap: 6px; }
.ac-table-card { padding: 0; overflow: hidden; }
.ac-table-card .table-wrap { margin: 0; }
.ac-table-empty { color: #6b7280; text-align: center; padding: 24px; }
.ac-table-sub { font-size: 12px; color: #6b7280; margin-top: 4px; }
.ac-table-absensi { font-size: 12px; line-height: 1.4; }
.ac-table-shift { font-weight: 600; color: #1e3a5f; }
.ac-table-muted { color: #9ca3af; font-size: 12px; }
.ac-table-hint { font-size: 11px; color: #9ca3af; margin-top: 4px; }
.ac-table-status { font-weight: 600; }
.ac-table-status--approved { color: #059669; }
.ac-table-status--rejected { color: #dc2626; }
.ac-table-status--pending { color: #d97706; }
.ac-btn-disabled { background: #e5e7eb; color: #6b7280; cursor: not-allowed; }
.ac-detail-top { margin-bottom: 14px; }
.ac-detail-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
    align-items: start;
}
.ac-detail-main { padding: 20px; }
.ac-detail-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ac-detail-name { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 0 0 14px; }
.ac-dl { display: grid; gap: 10px; margin: 0; }
.ac-dl div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: 0.875rem; }
.ac-dl dt { color: var(--ui-muted); font-weight: 600; margin: 0; }
.ac-dl dd { color: #334155; margin: 0; line-height: 1.45; }
.ac-warn-text { color: #b45309; }
.ac-detail-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #f1f5f9; }
.ac-action-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ac-label { font-size: 0.75rem; font-weight: 700; color: var(--ui-muted); }
.ac-timeline-card { padding: 18px 20px; }
.ac-timeline-title { font-size: 0.9375rem; font-weight: 800; margin: 0 0 14px; color: #0f172a; }
.ac-timeline { list-style: none; margin: 0; padding: 0; }
.ac-timeline__item { position: relative; padding-left: 22px; padding-bottom: 16px; }
.ac-timeline__item:last-child { padding-bottom: 0; }
.ac-timeline__item::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 14px;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}
.ac-timeline__item:last-child::before { display: none; }
.ac-timeline__dot {
    position: absolute;
    left: 0;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #94a3b8;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #e2e8f0;
}
.ac-timeline__item--blue .ac-timeline__dot { background: #2563eb; }
.ac-timeline__item--green .ac-timeline__dot { background: #059669; }
.ac-timeline__item--red .ac-timeline__dot { background: #dc2626; }
.ac-timeline__label { font-size: 0.8125rem; font-weight: 700; color: #0f172a; }
.ac-timeline__detail { font-size: 0.8125rem; color: #475569; margin-top: 2px; line-height: 1.45; }
.ac-timeline__time { font-size: 0.6875rem; color: #94a3b8; margin-top: 4px; display: block; }

@media (max-width: 900px) {
    .ac-detail-grid { grid-template-columns: 1fr; }
    .ac-stats { grid-template-columns: 1fr; }
    .ac-queue { grid-template-columns: 1fr; }
    .ac-dl div { grid-template-columns: 1fr; gap: 2px; }
}

/* ------------------------------------------------------------------ */
/* Attendance Anomaly Center (Wave 2)                                  */
/* ------------------------------------------------------------------ */
.aa-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.aa-filter-tabs--secondary { margin-top: 4px; }
.aa-filter-tab--compact { font-size: 0.8125rem; padding: 6px 10px; }
.aa-alert-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    border-radius: var(--ui-radius-lg);
    border: 1px solid #fcd34d;
    background: linear-gradient(90deg, #fffbeb 0%, #fff 100%);
    color: #92400e;
    font-size: 0.875rem;
}
.aa-alert-banner strong { color: #78350f; }
.aa-stat {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 16px;
    box-shadow: var(--ui-shadow-sm);
}
.aa-stat--highlight {
    border-color: #fca5a5;
    background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
}
.aa-stat__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}
.aa-stat__label {
    display: block;
    font-size: 0.8125rem;
    color: var(--ui-muted);
    margin-top: 4px;
}
.aa-toolbar { padding: 14px 16px; margin-bottom: 16px; }
.aa-filters { display: flex; flex-direction: column; gap: 12px; }
.aa-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.aa-filter-tab {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--ui-border);
    background: #f8fafc;
    color: #334155;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}
.aa-filter-tab--active {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.aa-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aa-select, .aa-search {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    font-size: 0.875rem;
    font-family: inherit;
}
.aa-search { flex: 1; min-width: 180px; }
.aa-queue {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.aa-card {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 16px;
    box-shadow: var(--ui-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aa-card--high { border-left: 3px solid #dc2626; }
.aa-card--medium { border-left: 3px solid #f59e0b; }
.aa-card--low { border-left: 3px solid #94a3b8; }
.aa-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.aa-kind {
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 6px;
}
.aa-kind--absent { background: #fee2e2; color: #b91c1c; }
.aa-kind--incomplete { background: #ffedd5; color: #c2410c; }
.aa-kind--late { background: #fef3c7; color: #b45309; }
.aa-kind--early_leave { background: #fef3c7; color: #b45309; }
.aa-kind--auto_clock_out { background: #f1f5f9; color: #475569; }
.aa-kind--lembur_mismatch { background: #f5f3ff; color: #7c3aed; }
.aa-severity {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
}
.aa-severity--high { background: #fee2e2; color: #b91c1c; }
.aa-severity--medium { background: #fef3c7; color: #b45309; }
.aa-severity--low { background: #f1f5f9; color: #64748b; }
.aa-card__employee { font-size: 1rem; font-weight: 800; color: #0f172a; margin: 0; }
.aa-card__title { font-size: 0.875rem; font-weight: 600; color: #334155; margin: 0; }
.aa-card__sub { font-size: 0.8125rem; color: var(--ui-muted); margin: 0; }
.aa-card__note { font-size: 0.8125rem; color: #475569; margin: 0; line-height: 1.45; }
.aa-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}
.aa-empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--ui-muted); }
.aa-empty__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #ecfdf5;
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 10px;
}
.aa-pager { margin-top: 16px; }
.aa-detail-top { margin-bottom: 14px; }
.aa-detail-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
    align-items: start;
}
.aa-detail-main { padding: 20px; }
.aa-detail-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.aa-detail-name { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 0 0 14px; }
.aa-dl { display: grid; gap: 10px; margin: 0; }
.aa-dl div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: 0.875rem; }
.aa-dl dt { color: var(--ui-muted); font-weight: 600; margin: 0; }
.aa-dl dd { color: #334155; margin: 0; line-height: 1.45; }
.aa-warn-text { color: #b45309; }
.aa-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #f1f5f9; }
.aa-detail-side-stack { display: flex; flex-direction: column; gap: 14px; }
.aa-detail-side { padding: 18px 20px; }
.aa-correction-card { padding: 18px 20px; }
.aa-correction-hint { font-size: 0.8125rem; color: var(--ui-muted); margin: 0 0 14px; line-height: 1.45; }
.aa-correction-form { margin: 0; }
.aa-correction-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.aa-correction-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; font-weight: 600; color: #475569; }
.aa-correction-field .edit-input { width: 100%; }
.aa-correction-actions { margin-top: 12px; }
.aa-correction-delete { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
.aa-side-title { font-size: 0.9375rem; font-weight: 800; margin: 0 0 14px; color: #0f172a; }
.aa-photo-block + .aa-photo-block { margin-top: 14px; }
.aa-photo-label { font-size: 0.75rem; font-weight: 700; color: var(--ui-muted); margin-bottom: 6px; }
.aa-photo {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--ui-border);
    display: block;
}

@media (max-width: 900px) {
    .aa-detail-grid { grid-template-columns: 1fr; }
    .aa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aa-alert-banner { flex-direction: column; align-items: flex-start; }
    .aa-queue { grid-template-columns: 1fr; }
    .aa-dl div { grid-template-columns: 1fr; gap: 2px; }
    .aa-correction-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .aa-stats { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Onboarding / CRM funnel (Wave 3)                                    */
/* ------------------------------------------------------------------ */
.ob-funnel-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.ob-stat {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 16px;
    box-shadow: var(--ui-shadow-sm);
}
.ob-stat--highlight {
    border-color: #93c5fd;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}
.ob-stat__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}
.ob-stat__label {
    display: block;
    font-size: 0.8125rem;
    color: var(--ui-muted);
    margin-top: 4px;
}
.ob-toolbar { padding: 14px 16px; margin-bottom: 16px; }
.ob-filters { display: flex; flex-direction: column; gap: 12px; }
.ob-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-filter-tab {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--ui-border);
    background: #f8fafc;
    color: #334155;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}
.ob-filter-tab--active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}
.ob-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ob-search {
    flex: 1;
    min-width: 180px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    font-size: 0.875rem;
    font-family: inherit;
}
.ob-queue {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.ob-card {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 16px;
    box-shadow: var(--ui-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ob-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ob-card__title,
.ob-card__company { font-size: 1rem; font-weight: 800; color: #0f172a; margin: 0; }
.ob-card__contact,
.ob-card__meta { font-size: 0.8125rem; color: var(--ui-muted); margin: 0; line-height: 1.45; }
.ob-card__action { font-size: 0.8125rem; color: #334155; margin: 0; }
.ob-card__action--muted { color: var(--ui-muted); font-style: italic; }
.ob-card__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: 4px; }
.ob-pager { margin-top: 16px; }
.ob-detail-top { margin-bottom: 14px; }
.ob-detail-main { padding: 20px; }
.ob-detail-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ob-detail-name { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 0 0 14px; }
.ob-owner { font-size: 0.8125rem; color: var(--ui-muted); }
.ob-dl { display: grid; gap: 10px; margin: 0 0 16px; }
.ob-dl div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: 0.875rem; }
.ob-dl dt { color: var(--ui-muted); font-weight: 600; margin: 0; }
.ob-dl dd { color: #334155; margin: 0; line-height: 1.45; }
.ob-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.ob-form-full { grid-column: 1 / -1; }
.ob-input {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    font-size: 0.875rem;
    font-family: inherit;
}
textarea.ob-input { min-height: 72px; resize: vertical; }
.ob-command-box {
    margin-top: 8px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid var(--ui-border);
    font-size: 0.8125rem;
}
.ob-command-box code { word-break: break-all; }
.ob-checklist-card { padding: 18px 20px; }
.ob-checklist__item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 10px;
    font-size: 0.875rem;
}
.ob-checklist__item--done { background: #ecfdf5; }
.ob-checklist__icon { font-weight: 800; color: #059669; flex-shrink: 0; }
.ob-checklist__label { font-weight: 700; color: #0f172a; }
.ob-checklist__detail { font-size: 0.8125rem; color: var(--ui-muted); margin-top: 2px; }
.ob-related { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f1f5f9; font-size: 0.875rem; }
.ob-status {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 6px;
}
.ob-status--new { background: #dbeafe; color: #1d4ed8; }
.ob-status--contacted { background: #fef3c7; color: #b45309; }
.ob-status--provisioned { background: #d1fae5; color: #047857; }
.ob-status--rejected { background: #f1f5f9; color: #64748b; }
.ob-progress { font-size: 0.75rem; font-weight: 700; color: #64748b; }
.ob-progress-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    width: 100%;
}
.ob-progress-bar span {
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 999px;
}
.ob-empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--ui-muted); }
.ob-empty__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 10px;
}
.ob-detail-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
    align-items: start;
}
.ob-update-form { display: flex; flex-direction: column; gap: 12px; }
.ob-label { font-size: 0.8125rem; font-weight: 700; color: #334155; margin-bottom: 4px; display: block; }
.ob-checklist-title { font-size: 1rem; font-weight: 800; margin: 0 0 12px; }
.ob-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ob-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 10px;
    font-size: 0.875rem;
}
.ob-checklist input { margin-top: 3px; }

@media (max-width: 900px) {
    .ob-funnel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ob-detail-grid { grid-template-columns: 1fr; }
    .ob-queue { grid-template-columns: 1fr; }
    .ob-dl div { grid-template-columns: 1fr; gap: 2px; }
    .ob-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .ob-funnel-stats { grid-template-columns: 1fr; }
}

/* Demo mode banner (Wave 3) */
.demo-mode-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #fcd34d;
    background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
    color: #92400e;
    font-size: 0.875rem;
    line-height: 1.45;
}
.demo-mode-banner__icon { flex-shrink: 0; font-size: 1.125rem; line-height: 1; }
body.theme-employee .demo-mode-banner {
    margin: 0 var(--employee-gutter, 16px) 12px;
    max-width: calc(var(--employee-shell-max, 480px) - var(--employee-gutter, 16px) * 2);
}

/* ------------------------------------------------------------------ */
/* In-app notifications (bell)                                         */
/* ------------------------------------------------------------------ */
.pres-notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.pres-notif-bell__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pres-notif-bell__trigger:active {
    transform: scale(0.96);
}

.pres-notif-bell__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 1.125rem;
}

.pres-notif-bell__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    border: 2px solid #fff;
    font-size: 0.625rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

body.theme-employee .pres-notif-bell__trigger,
.gh-notif-wrap .pres-notif-bell__trigger {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.pres-notif-bell__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10990;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.pres-notif-bell__backdrop:not([hidden]) {
    display: block;
    animation: presNotifFadeIn 0.22s ease;
}

.pres-notif-bell__panel {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(380px, calc(100vw - 24px));
    max-height: min(480px, calc(100vh - 120px));
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 50px -16px rgba(15, 23, 42, 0.35);
    z-index: 11000;
    overflow: hidden;
    flex-direction: column;
}

.pres-notif-bell__panel[hidden] {
    display: none !important;
}

.pres-notif-bell__panel:not([hidden]) {
    display: flex;
}

.pres-notif-bell__sheet-handle {
    display: none;
}

.pres-notif-bell__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    flex-shrink: 0;
}

.pres-notif-bell__head-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.pres-notif-bell__head-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.pres-notif-bell__head-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

.pres-notif-bell__head-sub {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.35;
}

.pres-notif-bell__head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pres-notif-bell__mark-form {
    margin: 0;
}

.pres-notif-bell__mark-all {
    border: none;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 7px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.pres-notif-bell__mark-all:active {
    background: #dbeafe;
}

.pres-notif-bell__close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.875rem;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.pres-notif-bell__close:active {
    background: #e2e8f0;
    color: #0f172a;
}

.pres-notif-bell__list {
    flex: 1;
    min-height: 0;
    max-height: min(360px, 55vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.pres-notif-bell__item-form {
    margin: 0;
    width: 100%;
}

.pres-notif-bell__item {
    width: 100%;
    display: flex;
    gap: 12px;
    text-align: left;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    padding: 14px 16px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.pres-notif-bell__item:active {
    background: #f8fafc;
}

.pres-notif-bell__item-body {
    flex: 1;
    min-width: 0;
}

.pres-notif-bell__item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.pres-notif-bell__item-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pres-notif-bell__item-time {
    font-size: 0.6875rem;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

.pres-notif-bell__item-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.pres-notif-bell__item-icon--blue { background: #eff6ff; color: #2563eb; }
.pres-notif-bell__item-icon--green { background: #ecfdf5; color: #059669; }
.pres-notif-bell__item-icon--red { background: #fef2f2; color: #dc2626; }
.pres-notif-bell__item-icon--purple { background: #f5f3ff; color: #7c3aed; }
.pres-notif-bell__item-icon--amber { background: #fffbeb; color: #d97706; }
.pres-notif-bell__item-icon--slate { background: #f1f5f9; color: #475569; }

.pres-notif-bell__item-title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.pres-notif-bell__item-msg {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pres-notif-bell__empty {
    text-align: center;
    padding: 36px 24px 40px;
    color: #64748b;
}

.pres-notif-bell__empty-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f1f5f9;
    color: #94a3b8;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.pres-notif-bell__empty p {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #334155;
}

.pres-notif-bell__empty span {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #94a3b8;
}

.pres-notif-bell__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 16px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
    border-top: 1px solid #f1f5f9;
    background: #fff;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.pres-notif-bell__footer:active {
    background: #f8fafc;
}

/* Notifications full page */
.pres-notif-page {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ui-border, #e2e8f0);
}

.pres-notif-page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #f1f5f9;
}

.pres-notif-page__title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.pres-notif-page__sub {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 4px;
}

.pres-notif-page__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pres-notif-page__list form {
    margin: 0;
}

.pres-notif-page__item {
    width: 100%;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    padding: 14px 18px;
    cursor: pointer;
    font-family: inherit;
}

.pres-notif-page__item--unread {
    background: #f8fbff;
}

.pres-notif-page__item-body {
    flex: 1;
    min-width: 0;
}

.pres-notif-page__item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.pres-notif-page__item-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
}

.pres-notif-page__item-msg {
    display: block;
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.45;
}

.pres-notif-page__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2563eb;
    flex-shrink: 0;
    margin-top: 6px;
}

.pres-notif-page__empty {
    text-align: center;
    padding: 48px 24px;
    color: #64748b;
}

.pres-notif-page__empty-icon {
    display: inline-flex;
    font-size: 2rem;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.pres-notif-page__pager {
    padding: 12px 18px;
    border-top: 1px solid #f1f5f9;
}

@keyframes presNotifFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes presNotifSheetIn {
    from {
        transform: translateX(-50%) translateY(100%);
        opacity: 0.85;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Mobile bottom sheet */
@media (max-width: 768px) {
    .pres-notif-bell__sheet-handle {
        display: block;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: #cbd5e1;
        margin: 10px auto 2px;
        flex-shrink: 0;
    }

    .pres-notif-bell__panel:not([hidden]) {
        position: fixed;
        left: 50%;
        right: auto;
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
        width: min(100%, var(--employee-shell-max, 480px));
        max-height: min(82vh, 620px);
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        box-shadow: 0 -16px 48px rgba(15, 23, 42, 0.18);
        animation: presNotifSheetIn 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .pres-notif-bell__head {
        padding: 8px 16px 14px;
    }

    .pres-notif-bell__list {
        max-height: none;
    }

    .pres-notif-bell__footer {
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .pres-notif-bell__mark-all {
        font-size: 0.75rem;
        padding: 8px 12px;
    }
}

body.pres-notif-sheet-open {
    overflow: hidden;
}

body.pres-notif-sheet-open .bottom-nav {
    z-index: 50;
}

/* ------------------------------------------------------------------ */
/* Employee portal — mobile-first shell & layout                       */
/* ------------------------------------------------------------------ */
body.theme-employee {
    padding: 0;
    overflow-x: hidden;
}

body.theme-employee .app-header,
body.theme-employee .app-main {
    width: 100%;
    max-width: var(--employee-shell-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--employee-gutter);
    padding-right: var(--employee-gutter);
    min-width: 0;
}

body.theme-employee .app-header {
    padding-top: 14px;
    padding-bottom: 14px;
}

body.theme-employee .app-main {
    padding-top: 0;
    padding-bottom: var(--employee-bottom-nav-space, calc(112px + env(safe-area-inset-bottom, 0px)));
}

/* Bottom nav selaras dengan lebar shell portal karyawan */
body.theme-employee .bottom-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100%, var(--employee-shell-max));
    max-width: var(--employee-shell-max);
}

body.theme-employee .app-header-custom,
body.theme-employee .app-header-custom > * {
    max-width: 100%;
    min-width: 0;
}

/* KPI: satu kolom di HP; dua kolom hanya untuk grid statistik kecil */
body.theme-employee .ui-kpi-grid {
    grid-template-columns: 1fr;
}

body.theme-employee .ui-kpi-grid.ui-kpi-grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.theme-employee .ui-kpi-value {
    font-size: clamp(0.9375rem, 4vw, 1.125rem);
    word-break: break-word;
    overflow-wrap: anywhere;
}

body.theme-employee .ui-inline-toolbar {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

body.theme-employee .ui-hero-meta-card {
    max-width: 100%;
    min-width: 0;
}

body.theme-employee .ci-submit .btn-primary,
body.theme-employee .ci-form .btn-primary {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
}

body.theme-employee .ci-back-link {
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
}

/* Header halaman karyawan */
body.theme-employee .kh-header,
body.theme-employee .gj-header,
body.theme-employee .rs-header,
body.theme-employee .pr-header {
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}

body.theme-employee .kh-header-left,
body.theme-employee .gj-header-left,
body.theme-employee .rs-header-left,
body.theme-employee .pr-header-main {
    flex: 1;
    min-width: 0;
}

body.theme-employee .kh-meta-card,
body.theme-employee .gj-meta-card {
    width: 100%;
    min-width: 0;
}

/* Kartu konten */
body.theme-employee .kh-intro-card,
body.theme-employee .kh-tip-card,
body.theme-employee .gj-card,
body.theme-employee .gj-panel,
body.theme-employee .ep-period-card,
body.theme-employee .rk-intro,
body.theme-employee .rs-list,
body.theme-employee .rs-empty,
body.theme-employee .ci-card,
body.theme-employee .ci-form,
body.theme-employee .ci-panel {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Form cuti/lembur — input penuh lebar, kontras jelas */
body.theme-employee .ci-form .form-group input,
body.theme-employee .ci-form .form-group select,
body.theme-employee .ci-form .form-group textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.theme-employee .ci-value {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
    line-height: 1.15;
}

body.theme-employee .ci-kpi-grid .ui-kpi-card {
    padding: 14px;
}

/* Slip gaji — baris rincian stack di layar sempit */
body.theme-employee .gj-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

body.theme-employee .gj-value {
    text-align: left;
    max-width: 100%;
    word-break: break-word;
}

body.theme-employee .gj-period-val {
    font-size: clamp(1.125rem, 5vw, 1.375rem);
    word-break: break-word;
}

/* List kehadiran — kartu penuh lebar */
body.theme-employee .kh-item {
    width: 100%;
}

body.theme-employee .ep-hub-grid .ui-kpi-card {
    width: 100%;
}

body.theme-employee .kh-item-body {
    padding-right: 28px;
}

/* Grid lain di portal karyawan */
body.theme-employee .tm-grid,
body.theme-employee .cl-grid {
    grid-template-columns: 1fr;
}

body.theme-employee .rs-grid {
    grid-template-columns: 1fr;
}

body.theme-employee .rs-summary-grid,
body.theme-employee .rk-summary-grid {
    grid-template-columns: 1fr;
}

/* Admin tenant KPI grid (bukan theme-employee) — multi kolom di tablet+ */
@media (min-width: 640px) {
    body:not(.theme-employee) .ui-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (min-width: 400px) {
    body.theme-employee .ui-kpi-grid.ui-kpi-grid--duo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.theme-employee .rs-grid,
    body.theme-employee .rs-summary-grid,
    body.theme-employee .rk-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 399px) {
    body.theme-employee .ui-kpi-grid.ui-kpi-grid--duo {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 359px) {
    body.theme-employee {
        --employee-gutter: 16px;
    }

    body.theme-employee .ui-kpi-card {
        padding: 12px;
    }
}

/* ------------------------------------------------------------------ */
/* Shift planner insights (Wave 4)                                     */
/* ------------------------------------------------------------------ */
.ss-planner-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.ss-stat {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 14px 16px;
    box-shadow: var(--ui-shadow-sm);
}
.ss-stat--warn {
    border-color: #fdba74;
    background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
}
.ss-stat--danger {
    border-color: #fca5a5;
    background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
}
.ss-stat__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}
.ss-stat__label {
    display: block;
    font-size: 0.75rem;
    color: var(--ui-muted);
    margin-top: 4px;
}
.ss-planner-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
}
.ss-filter-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}
.ss-filter-label select {
    min-width: 180px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    font-size: 0.875rem;
    font-family: inherit;
}
.ss-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #334155;
    cursor: pointer;
    margin-bottom: 6px;
}

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

@media (max-width: 520px) {
    .ss-planner-stats { grid-template-columns: 1fr; }
}

.ss-daily-panel {
    margin-bottom: 16px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
}
.ss-daily-panel__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.ss-daily-panel__title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}
.ss-daily-panel__hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ui-muted);
    line-height: 1.5;
    max-width: 52rem;
}
.ss-daily-panel__summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.ss-daily-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.ss-daily-chip--warn { background: #ffedd5; color: #c2410c; }
.ss-daily-chip--danger { background: #fee2e2; color: #b91c1c; }
.ss-daily-chip--ok { background: #dcfce7; color: #15803d; }
.ss-daily-toolbar { margin-bottom: 10px; }
.ss-daily-list { display: flex; flex-direction: column; gap: 8px; }
.ss-daily-day {
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: #fafafa;
    overflow: hidden;
}
.ss-daily-day--hidden { display: none; }
.ss-daily-day--warn { border-color: #fdba74; background: #fffbf5; }
.ss-daily-day--danger { border-color: #fca5a5; background: #fef2f2; }
.ss-daily-day__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}
.ss-daily-day__summary::-webkit-details-marker { display: none; }
.ss-daily-day__date { font-weight: 700; color: #0f172a; min-width: 7rem; }
.ss-daily-day__tag { font-size: 0.75rem; color: #b91c1c; }
.ss-daily-day__metrics { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.ss-daily-metric {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
}
.ss-daily-metric--warn { background: #ffedd5; color: #c2410c; }
.ss-daily-metric--danger { background: #fee2e2; color: #b91c1c; }
.ss-daily-focus { margin-left: auto; }
.ss-daily-day__body { padding: 0 12px 12px; }
.ss-daily-shift-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.ss-daily-shift-table th,
.ss-daily-shift-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}
.ss-daily-shift-table th { color: #64748b; font-weight: 700; }
.ss-daily-shift-row--warn td { background: #fff7ed; }
.ss-daily-shift-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--shift-color, #3b82f6);
    margin-right: 6px;
    vertical-align: middle;
}
.ss-daily-shortage { color: #c2410c; }
.ss-daily-empty,
.ss-daily-empty-inline {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ui-muted);
}
@media (max-width: 640px) {
    .ss-daily-day__summary { flex-direction: column; align-items: flex-start; }
    .ss-daily-focus { margin-left: 0; }
}

/* ------------------------------------------------------------------ */
/* Kasbon ledger (Wave 4)                                              */
/* ------------------------------------------------------------------ */
.kb-ledger-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.kb-stat {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 14px 16px;
    box-shadow: var(--ui-shadow-sm);
}
.kb-stat--highlight {
    border-color: #93c5fd;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}
.kb-stat--warn {
    border-color: #fca5a5;
    background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
}
.kb-stat__value {
    display: block;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    word-break: break-word;
}
.kb-stat__label {
    display: block;
    font-size: 0.75rem;
    color: var(--ui-muted);
    margin-top: 4px;
}
.kb-aging {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.kb-aging--lunas { background: #d1fae5; color: #047857; }
.kb-aging--current { background: #dbeafe; color: #1d4ed8; }
.kb-aging--due_soon { background: #fef3c7; color: #b45309; }
.kb-aging--overdue { background: #fee2e2; color: #b91c1c; }
.kb-aging--pending { background: #fef3c7; color: #b45309; }
.kb-aging--rejected { background: #f1f5f9; color: #64748b; }
.kb-detail-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
    align-items: start;
}
.kb-detail-main { padding: 20px; }
.kb-detail-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.kb-meta { font-size: 0.8125rem; color: var(--ui-muted); }
.kb-dl { display: grid; gap: 10px; margin: 0 0 16px; }
.kb-dl div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; font-size: 0.875rem; }
.kb-dl dt { color: var(--ui-muted); font-weight: 600; margin: 0; }
.kb-dl dd { color: #334155; margin: 0; }
.kb-lunas { color: #059669; font-weight: 700; margin-left: 6px; }
.kb-section-title { font-size: 0.9375rem; font-weight: 800; margin: 0 0 12px; color: #0f172a; }
.kb-admin-pay { padding-top: 14px; border-top: 1px solid #f1f5f9; }
.kb-pay-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kb-input {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    font-size: 0.875rem;
    font-family: inherit;
    flex: 1;
    min-width: 120px;
}
.kb-hint { font-size: 0.75rem; color: var(--ui-muted); margin: 8px 0 0; }
.kb-trail-card { padding: 18px 20px; }
.kb-trail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kb-trail-item {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.kb-trail-item--approved { border-color: #bbf7d0; background: #f0fdf4; }
.kb-trail-item--rejected { border-color: #fecaca; background: #fef2f2; }
.kb-trail-item--pending { border-color: #fde68a; background: #fffbeb; }
.kb-trail-item__head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8125rem;
    margin-bottom: 6px;
}
.kb-trail-item__head span { color: var(--ui-muted); }
.kb-trail-item__body { font-size: 0.875rem; color: #334155; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kb-trail-note { font-size: 0.75rem; color: var(--ui-muted); }
.kb-empty { color: var(--ui-muted); font-size: 0.875rem; margin: 0; }

@media (max-width: 900px) {
    .kb-ledger-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kb-detail-grid { grid-template-columns: 1fr; }
    .kb-dl div { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 520px) {
    .kb-ledger-stats { grid-template-columns: 1fr; }
}

/* Audit log (admin) */
.al-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 20px; }
.al-stat {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    border: 2px solid transparent;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.al-stat:hover { border-color: #2563eb; }
.al-stat.active { border-color: #2563eb; background: #eff6ff; }
.al-stat .num { font-size: 1.35rem; font-weight: 800; color: #0f2744; }
.al-stat .lbl { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; margin-top: 2px; }
.al-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #e8eef5;
    color: #0f2744;
}
.al-badge--attendance { background: #dbeafe; color: #1e40af; }
.al-badge--leave { background: #ecfdf5; color: #065f46; }
.al-badge--payroll { background: #fef3c7; color: #b45309; }
.al-badge--kasbon { background: #f3e8ff; color: #6b21a8; }
.al-badge--employee { background: #e0e7ff; color: #3730a3; }
.al-badge--tenant { background: #fce7f3; color: #9d174d; }
.al-badge--other { background: #f1f5f9; color: #475569; }
.al-detail { font-size: 0.8125rem; color: #475569; line-height: 1.45; max-width: 520px; }
.al-ip { font-size: 0.75rem; color: #94a3b8; margin-top: 4px; }
.al-diff { margin-top: 8px; font-size: 0.75rem; }
.al-diff summary { cursor: pointer; color: #2563eb; font-weight: 600; }
.al-diff pre {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.7rem;
    line-height: 1.45;
    color: #334155;
}

/* Payroll scope banner (admin) */
.psb-banner {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #fde68a;
    background: #fffbeb;
}
.psb-banner--full {
    border-color: #bbf7d0;
    background: #f0fdf4;
}
.psb-banner__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.psb-banner__main { flex: 1; min-width: 220px; }
.psb-banner__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b45309;
}
.psb-banner--full .psb-banner__eyebrow { color: #166534; }
.psb-banner__title { font-weight: 700; color: #0f172a; margin-top: 4px; }
.psb-banner__desc { font-size: 0.8125rem; color: #475569; margin-top: 6px; line-height: 1.5; }
.psb-banner__avoid { font-size: 0.75rem; color: #92400e; margin-top: 8px; }
.psb-banner__side { font-size: 0.75rem; color: #64748b; max-width: 300px; line-height: 1.55; }
.psb-banner__side ul { margin: 4px 0 0; padding-left: 1.1rem; }
.psb-banner__side li { margin-bottom: 2px; }
.psb-banner__list-title { display: block; margin-top: 10px; font-size: inherit; color: inherit; }
.psb-banner__list-title:first-child { margin-top: 0; }

/* Payroll lite note (karyawan slip) */
.psb-employee-note {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.5;
}

/* Employee lifecycle (admin) */
.el-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.el-stat {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    border: 2px solid transparent;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    text-align: center;
}
.el-stat:hover { border-color: #2563eb; }
.el-stat.active { border-color: #2563eb; background: #eff6ff; }
.el-stat .num { font-size: 1.35rem; font-weight: 800; color: #0f2744; }
.el-stat .lbl { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; margin-top: 2px; }
.el-list-hint { font-size: 0.8125rem; color: #64748b; margin-bottom: 16px; line-height: 1.5; }
.el-name-link { font-weight: 700; color: #1e3a5f; text-decoration: none; }
.el-name-link:hover { text-decoration: underline; }
.el-sub { font-size: 0.75rem; color: #94a3b8; margin-top: 2px; }
.el-status-badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.el-status-badge--active { background: #dcfce7; color: #166534; }
.el-status-badge--probation { background: #fef3c7; color: #b45309; }
.el-status-badge--resigned { background: #e2e8f0; color: #475569; }
.el-status-badge--terminated { background: #fee2e2; color: #b91c1c; }
.el-role-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    background: #e8f5e9;
    color: #388e3c;
}
.el-role-pill--admin { background: #e8eef5; color: #0f2744; }
.el-device { font-size: 11px; background: #f3f4f6; padding: 2px 6px; border-radius: 4px; }
.el-muted { color: #9ca3af; font-size: 12px; }
.el-actions { white-space: nowrap; }
.el-inline-form { display: inline; margin-right: 4px; }
.el-section-title { margin: 18px 0 6px; font-size: 1rem; }
.el-section-hint { font-size: 0.8125rem; color: #64748b; margin-bottom: 12px; line-height: 1.5; }
.el-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 16px;
}
.el-dl { display: grid; gap: 10px; margin: 0; }
.el-dl div { display: grid; grid-template-columns: 140px 1fr; gap: 8px; font-size: 0.875rem; }
.el-dl dt { color: #64748b; font-weight: 600; margin: 0; }
.el-dl dd { margin: 0; color: #0f172a; }
.el-note {
    margin-top: 14px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.5;
}
.el-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.el-history-item {
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}
.el-history-item__head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.875rem; }
.el-history-item__head span { color: #94a3b8; font-size: 0.75rem; }
.el-history-item__actor { font-size: 0.75rem; color: #64748b; margin-top: 4px; }
.el-history-item__detail { font-size: 0.8125rem; color: #334155; margin-top: 6px; line-height: 1.45; }
@media (max-width: 900px) {
    .el-profile-grid { grid-template-columns: 1fr; }
    .el-dl div { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Employee self-service: cuti, profil, status pengajuan (ess-*)         */
/* ------------------------------------------------------------------ */
.ess-card,
.ess-list,
.ess-empty,
.ess-panel,
.ess-form {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    box-shadow: var(--ui-shadow-sm);
}
.ess-card,
.ess-panel,
.ess-form { padding: 20px; margin-bottom: 18px; }
.ess-eyebrow {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ess-value {
    margin-top: 8px;
    font-size: clamp(1.35rem, 6vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
    line-height: 1.15;
}
.ess-intro { margin-top: 10px; color: #475569; font-size: 14px; line-height: 1.6; }
.ess-cta { margin-top: 16px; }
.ess-cta .btn-secondary {
    width: 100%;
    text-align: center;
    background: #1e3a5f;
    color: #fff;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    font-weight: 700;
}
.ess-cta .btn-secondary.ess-cta--alt {
    background: #059669;
    border-color: #059669;
}
.ess-status-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.ess-status-chip {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    color: #475569;
    background: #fff;
    border: 2px solid #e2e8f0;
}
.ess-status-chip:hover { border-color: #93c5fd; color: #1e40af; }
.ess-status-chip.active { background: #eff6ff; border-color: #2563eb; color: #1e40af; }
.ess-status-chip .ess-status-chip__count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #e2e8f0;
    font-size: 0.6875rem;
}
.ess-status-chip.active .ess-status-chip__count { background: #dbeafe; }
.ess-pending-banner {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    font-size: 0.875rem;
    color: #92400e;
    line-height: 1.5;
}
.ess-pending-banner strong { color: #b45309; }
.ess-section-title { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; }
.ess-section-note { margin-top: 6px; color: #64748b; font-size: 13px; line-height: 1.55; }
.ess-list { padding: 12px; }
.ess-list-spaced { margin-top: 14px; }
.ess-item + .ess-item { margin-top: 12px; }
.ess-item {
    display: block;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #e8eef5;
    background: #f8fafc;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ess-item:hover { box-shadow: 0 14px 28px -22px rgba(15, 23, 42, 0.22); border-color: #dbeafe; }
.ess-item-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.ess-item-title { font-weight: 800; font-size: 15px; color: #0f172a; letter-spacing: -0.02em; }
.ess-item-time { font-weight: 500; color: #64748b; }
.ess-item-days { color: #64748b; font-size: 12px; margin-top: 4px; }
.ess-item-meta { font-size: 12px; color: #94a3b8; margin-top: 8px; }
.ess-item-link { font-size: 12px; font-weight: 700; color: #2563eb; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; }
.ess-status {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.ess-status.approved { background: rgba(34,197,94,0.15); color: #16a34a; }
.ess-status.rejected { background: rgba(239,68,68,0.15); color: #dc2626; }
.ess-status.pending { background: rgba(251,191,36,0.18); color: #ca8a04; }
.ess-meta { font-size: 13px; font-weight: 700; color: #334155; margin-top: 10px; }
.ess-note { font-size: 13px; color: #64748b; margin-top: 6px; line-height: 1.55; }
.ess-doc-btn {
    font-size: 12px;
    color: #2563eb;
    margin-top: 10px;
    display: inline-flex;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-weight: 700;
}
.ess-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}
.ess-mode-tab {
    text-align: center;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #475569;
}
.ess-mode-tab.active {
    border-color: #1e3a5f;
    background: #1e3a5f;
    color: #fff;
}
.ess-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.ess-step {
    flex: 1;
    min-width: 72px;
    padding: 10px 8px;
    border-radius: 12px;
    background: #f1f5f9;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ess-step span { display: block; font-size: 1rem; margin-bottom: 4px; color: #94a3b8; }
.ess-day-preview {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    font-size: 0.875rem;
    color: #1e40af;
    display: none;
}
.ess-day-preview.is-visible { display: block; }
.ess-day-preview.ess-day-preview--warn {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}
.ess-form-title { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; margin-bottom: 4px; }
.ess-form-note { color: #64748b; font-size: 13px; line-height: 1.55; margin-bottom: 16px; }
.ess-form .form-group label { color: #374151; }
.ess-form .form-group input,
.ess-form .form-group select,
.ess-form .form-group textarea {
    background: #fff;
    color: #111827;
    border: 1px solid #dbe1ea;
}
.ess-form .form-group input:focus,
.ess-form .form-group select:focus,
.ess-form .form-group textarea:focus {
    border-color: #1e3a5f;
    box-shadow: 0 0 0 3px rgba(30,58,95,0.12);
}
.ess-hint { font-size: 12px; color: #6b7280; margin-top: 6px; }
.ess-required { color: #dc2626; }
.ess-submit { margin-top: 8px; }
.ess-submit .btn-primary { background: #1e3a5f; border-radius: 12px; font-weight: 700; }
.ess-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
}
.ess-detail-top { margin-bottom: 16px; }
.ess-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}
.ess-detail-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.ess-kind {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #e0e7ff;
    color: #3730a3;
}
.ess-kind--lembur { background: #ffedd5; color: #c2410c; }
.ess-detail-name { font-size: 1.25rem; font-weight: 800; margin: 0 0 14px; color: #0f172a; }
.ess-dl { display: grid; gap: 10px; margin: 0; font-size: 0.875rem; }
.ess-dl div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.ess-dl dt { color: #64748b; font-weight: 600; margin: 0; }
.ess-dl dd { margin: 0; color: #0f172a; }
.ess-kpi-grid.ui-kpi-grid { margin-bottom: 18px; }
.ess-kpi-grid .ui-kpi-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-color: #dbe5f0;
}
.ess-kpi-icon {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    color: #1d4ed8;
}
.ess-kpi-icon--success {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    color: #166534;
}
.ess-kpi-icon--warning {
    background: linear-gradient(135deg, #ffedd5 0%, #fff7ed 100%);
    color: #c2410c;
}
.doc-modal.ess-doc-modal { z-index: 1000; }
@media (max-width: 900px) {
    .ess-detail-grid { grid-template-columns: 1fr; }
    .ess-dl div { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ess-item-header { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------ */
/* Employee portal page shell (ep-*) — shared headers, cards, hubs     */
/* ------------------------------------------------------------------ */
body.theme-employee.ep-shell--hub { background: var(--ep-gradient-hub) !important; }
body.theme-employee.ep-shell--profile { background: var(--ep-gradient-profile) !important; }
body.theme-employee.ep-shell--home {
    background: linear-gradient(180deg, #1e3a5f 0%, #1e3a5f 28%, #f5f7fb 28%, #f5f7fb 100%) !important;
    color: #111827;
}

body.theme-employee.ep-page .page-subtitle,
body.theme-employee.ep-page .app-header-links { display: none; }
body.theme-employee.ep-page .app-header {
    padding-top: 18px;
    padding-bottom: 16px;
    padding-left: var(--employee-gutter);
    padding-right: var(--employee-gutter);
}
body.theme-employee.ep-page .app-main {
    padding-left: var(--employee-gutter) !important;
    padding-right: var(--employee-gutter) !important;
}

.ep-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #fff;
    width: 100%;
}
.ep-header--with-meta {
    justify-content: space-between;
    gap: 14px;
}
.ep-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.ep-back {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.ep-back:active { transform: scale(0.96); }
.ep-back svg { width: 18px; height: 18px; }
.ep-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.ep-subtitle {
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    margin-top: 4px;
    line-height: 1.5;
}
.ep-meta-card { min-width: 156px; }

.ep-header--action {
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.ep-header--action .ep-header__left { align-items: center; }
.ep-header__btn {
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
}
.ep-header__btn--primary { background: #3b82f6; color: #fff; }
.ep-header__btn--primary:hover { background: #2563eb; }
.ep-header__btn--success { background: #059669; color: #fff; }
.ep-header__btn--success:hover { background: #047857; }
.ep-header__btn:disabled { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 640px) {
    .ep-header--action { flex-direction: column; align-items: stretch; }
    .ep-header--action .ep-header__btn { width: 100%; margin-left: 0; }
}

.ep-card {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--ui-shadow-sm);
}
.ep-card__label {
    font-size: 12px;
    font-weight: 800;
    color: var(--ui-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ep-card__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--ui-text);
    letter-spacing: -0.02em;
    margin-top: 6px;
}
.ep-card__text {
    margin-top: 8px;
    color: var(--ui-body);
    font-size: 14px;
    line-height: 1.65;
}
.ep-card--compact { padding: 14px 16px; }
.ep-card__text--spaced { margin-top: 6px; }

.ep-intro,
.ep-tip {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    padding: 20px;
    box-shadow: var(--ui-shadow-sm);
}
.ep-intro { margin-bottom: 18px; }
.ep-intro__title {
    margin-top: 10px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ui-text);
}
.ep-tip__text,
.ep-intro__text {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ui-body);
}

.ep-hub-grid.ui-kpi-grid { margin-bottom: 18px; }
.ep-hub-grid .ui-kpi-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-color: #dbe5f0;
    align-items: flex-start;
    gap: 14px;
    min-height: 100%;
    position: relative;
}
.ep-hub-grid .ui-kpi-card:active { transform: scale(0.99); }
.ep-hub-grid .ui-kpi-body { padding-right: 18px; }
.ep-hub-grid__title { font-size: 15px; font-weight: 700; color: var(--ui-text); }
.ep-hub-grid__desc { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ui-body); }
.ep-hub-grid__meta {
    margin-top: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ui-muted);
}
.ep-hub-grid__arrow {
    color: #94a3b8;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    position: absolute;
    right: 18px;
    top: 18px;
}
.ep-hub-grid__arrow svg { width: 22px; height: 22px; }

.ep-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.ep-icon--lg { width: 48px; height: 48px; border-radius: 16px; }
.ep-icon svg { width: 20px; height: 20px; }
.ep-icon--lg svg { width: 22px; height: 22px; }
.ep-icon--blue { background: linear-gradient(145deg, #2563eb 0%, #60a5fa 100%); }
.ep-icon--green { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }
.ep-icon--orange { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.ep-icon--navy { background: linear-gradient(145deg, #1e3a5f 0%, #3b6ea8 100%); }
.ep-icon--red { background: linear-gradient(145deg, #dc2626 0%, #f87171 100%); }

.ep-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ep-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 14px;
    box-shadow: var(--ui-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
a.ep-list-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.28);
}
a.ep-list-item:active { transform: scale(0.99); }
.ep-list-item__title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--ui-text); }
.ep-list-item__desc { margin-top: 6px; font-size: 13px; color: var(--ui-body); line-height: 1.55; }
.ep-list-item__meta { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--ui-muted); }
.ep-list-item__body { flex: 1; min-width: 0; }

.ep-action-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ep-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--ui-radius-lg);
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--ui-border);
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.ep-action:hover {
    border-color: #cbd5e1;
    box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.28);
}
.ep-action:active { transform: scale(0.99); }
.ep-action__body { flex: 1; min-width: 0; }
.ep-action__title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--ui-text); }
.ep-action__desc { margin-top: 6px; font-size: 13px; color: var(--ui-body); line-height: 1.55; }
.ep-action--danger { border-color: #fecaca; }
.ep-action--danger .ep-action__title { color: #b91c1c; }
.ep-action--danger .ep-action__desc { color: #7f1d1d; }
.ep-action-btn {
    width: 100%;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.ep-action--muted {
    border-color: #e8eef5;
    background: var(--ui-surface-card);
}
.ep-action--muted .ep-action__title { font-weight: 700; }

.ep-chev {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ui-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.ep-chev svg { width: 16px; height: 16px; }

.ep-form-card,
.ep-form-tip {
    background: #fff;
    border-radius: var(--ui-radius-xl);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-sm);
}
.ep-form-card { padding: 18px; }
.ep-form-tip { padding: 16px; margin-bottom: 14px; }
.ep-form .form-group { margin-bottom: 16px; }
.ep-form .form-group label {
    color: #374151;
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
}
.ep-form .form-group input,
.ep-form .form-group select,
.ep-form .form-group textarea {
    background: #fff;
    color: #111827;
    border: 1px solid #e5e7eb;
    width: 100%;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    box-sizing: border-box;
}
.ep-form .form-group input:focus,
.ep-form .form-group select:focus,
.ep-form .form-group textarea:focus {
    outline: none;
    border-color: var(--ui-navy);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}
.ep-form .btn-primary {
    background: var(--ui-navy);
    width: 100%;
    justify-content: center;
}
.ep-field-error,
.text-error { font-size: 12px; color: #dc2626; margin-top: 4px; display: block; }

/* Profile page (pr-*) */
.pr-header { display: flex; align-items: flex-start; gap: 14px; color: #fff; width: 100%; }
.pr-header-main { flex: 1; min-width: 0; }
.pr-back { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: all 0.2s ease; flex-shrink: 0; }
.pr-back:active { transform: scale(0.96); }
.pr-back svg { width: 20px; height: 20px; }
.pr-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.pr-subtitle { color: rgba(255,255,255,0.86); font-size: 13px; margin-top: 4px; line-height: 1.45; }
.pr-card { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); margin-bottom: 16px; transition: all 0.2s ease; border: 1px solid #e2e8f0; }
.pr-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.1); }
.pr-header-card { display: flex; align-items: center; gap: 16px; }
.pr-photo-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; border-radius: 16px; overflow: hidden; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.pr-photo-wrap:hover .pr-photo-overlay { opacity: 1; }
.pr-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-photo-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.pr-photo-overlay svg { width: 28px; height: 28px; color: #fff; }
.pr-photo-add { width: 80px; height: 80px; border-radius: 16px; cursor: pointer; border: 2px dashed #E5E7EB; background: #F5F7FB; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: all 0.2s ease; }
.pr-photo-add:hover { background: #e5e7eb; border-color: #6b7280; }
.pr-photo-add svg { width: 24px; height: 24px; color: #6b7280; }
.pr-photo-add span { font-size: 10px; color: #6b7280; font-weight: 600; }
.pr-photo-modal { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; padding: 20px; }
.pr-photo-modal.open { display: flex; }
.pr-photo-modal-card { background: #fff; border-radius: 16px; width: min(340px, 100%); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.pr-photo-modal-header { padding: 14px 16px; border-bottom: 1px solid #eef2f7; font-weight: 700; font-size: 15px; color: #111827; }
.pr-photo-modal-body { padding: 16px; }
.pr-cropper-wrap { width: 100%; height: 260px; background: #000; border-radius: 12px; overflow: hidden; }
.pr-zoom-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; padding: 8px 0; }
.pr-zoom-btn { width: 40px; height: 40px; border-radius: 50%; background: #1e3a5f; color: #fff; border: none; font-size: 20px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; }
.pr-zoom-btn:hover { background: #2d5a87; }
.pr-zoom-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pr-zoom-label { font-size: 12px; color: #6b7280; min-width: 60px; text-align: center; }
.pr-photo-modal-actions { display: flex; gap: 10px; margin-top: 12px; }
.pr-photo-modal-actions button { flex: 1; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; }
.pr-photo-btn-save { background: #1e3a5f; color: #fff; }
.pr-photo-btn-save:hover { background: #2d5a87; }
.pr-photo-btn-save:disabled { opacity: 0.6; cursor: not-allowed; }
.pr-photo-btn-cancel { background: #e5e7eb; color: #374151; }
.pr-photo-btn-cancel:hover { background: #d1d5db; }
.pr-name { font-size: 18px; font-weight: 700; color: #111827; letter-spacing: -0.01em; }
.pr-sub { font-size: 13px; color: #6b7280; margin-top: 4px; }
.pr-section-title { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 12px; margin-top: 20px; letter-spacing: -0.01em; }
.pr-section-title.pr-section-title--dark { color: #60a5fa; }
.pr-list { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.08); margin-bottom: 16px; transition: all 0.2s ease; }
.pr-list:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.1); }
.pr-row { display: block; padding: 16px 18px; border-bottom: 1px solid #F5F7FB; font-size: 14px; transition: all 0.2s ease; }
.pr-row:last-child { border-bottom: none; }
.pr-label { color: #6b7280; font-weight: 600; font-size: 13px; }
.pr-value { font-weight: 600; color: #111827; margin-top: 6px; font-size: 15px; overflow-wrap: anywhere; }
.pr-shortcuts-card { background: #fff; border-radius: 16px; padding: 18px 16px 12px; margin-bottom: 16px; border: 1px solid #e2e8f0; box-shadow: 0 10px 25px rgba(0,0,0,0.06); }
.pr-shortcuts-head { margin-bottom: 14px; padding: 0 4px; }
.pr-shortcuts-title { font-size: 15px; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; }
.pr-shortcuts-hint { font-size: 12px; color: #64748b; margin-top: 4px; line-height: 1.45; }
.pr-shortcuts-list { display: flex; flex-direction: column; gap: 10px; }
.pr-shortcut { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 12px; border-radius: 14px; text-decoration: none; color: inherit; border: 1px solid #e8eef5; background: #f8fafc; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; }
.pr-shortcut:hover { border-color: #cbd5e1; box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.28); }
.pr-shortcut:active { transform: scale(0.99); }
.pr-shortcut__icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.pr-shortcut__icon svg { width: 22px; height: 22px; stroke-width: 2.1; }
.pr-shortcut--leave .pr-shortcut__icon { background: linear-gradient(145deg, #2563eb 0%, #60a5fa 100%); }
.pr-shortcut--policy .pr-shortcut__icon { background: linear-gradient(145deg, #ea580c 0%, #fb923c 100%); }
.pr-shortcut--payroll .pr-shortcut__icon { background: linear-gradient(145deg, #059669 0%, #34d399 100%); }
.pr-shortcut--settings .pr-shortcut__icon { background: linear-gradient(145deg, #1e3a5f 0%, #3b6ea8 100%); }
.pr-shortcut__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pr-shortcut__title { font-size: 15px; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; line-height: 1.25; }
.pr-shortcut__desc { font-size: 12px; color: #64748b; line-height: 1.4; }
.pr-shortcut__badge { flex-shrink: 0; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #fef3c7; color: #b45309; border: 1px solid #fde68a; white-space: nowrap; }
.pr-shortcut__chev { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.pr-shortcut__chev svg { width: 16px; height: 16px; }
.pr-employment-badge { display: inline-flex; margin-top: 10px; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.pr-employment-badge--active { background: #dcfce7; color: #166534; }
.pr-employment-badge--probation { background: #fef3c7; color: #b45309; }
.pr-employment-badge--resigned { background: #e2e8f0; color: #475569; }
.pr-employment-badge--terminated { background: #fee2e2; color: #b91c1c; }

/* ------------------------------------------------------------------ */
/* Shared period + stat KPI (gaji, riwayat, ringkasan)                 */
/* ------------------------------------------------------------------ */
.ep-period-card {
    background: #fff;
    border-radius: var(--ui-radius-xl);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-sm);
    padding: 20px;
    margin-bottom: 18px;
}
.ep-period-label {
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ep-period-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ui-text);
    margin-top: 6px;
}
.ep-select { margin-top: 14px; }
.ep-select .ui-control {
    width: 100%;
    border: 1px solid #dbe1ea;
    background: #fff;
    color: var(--ui-text);
    font-weight: 600;
}
.ep-select .ui-control:focus {
    outline: none;
    border-color: var(--ui-navy);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

.ep-stat-kpi.ui-kpi-grid { margin-bottom: 18px; }
.ep-stat-kpi .ui-kpi-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-color: #dbe5f0;
}
.ep-stat-kpi .ui-kpi-value {
    color: var(--ui-text);
    word-break: break-word;
}
.ep-stat-kpi .ui-kpi-label { color: var(--ui-muted); }
.ep-stat-kpi-icon {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    color: #1d4ed8;
}
.ep-stat-kpi-icon--success {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    color: #166534;
}
.ep-stat-kpi-icon--warning {
    background: linear-gradient(135deg, #ffedd5 0%, #fff7ed 100%);
    color: #c2410c;
}
.ep-stat-kpi-value {
    font-size: 1.22rem;
    line-height: 1.2;
    word-break: break-word;
    color: var(--ui-text);
}
.ep-stat-kpi .ui-kpi-card:nth-child(2) {
    background: linear-gradient(180deg, #ffffff 0%, #f7fdf9 100%);
}
.ep-stat-kpi .ui-kpi-card:nth-child(3) {
    background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%);
}

/* Payroll slip (gj-*) */
.gj-panel {
    background: #fff;
    border-radius: var(--ui-radius-xl);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-sm);
    padding: 20px;
    margin-bottom: 18px;
}
.gj-pdf-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 12px;
}
.gj-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-top: 10px;
}
.gj-badge-est { background: #fef3c7; color: #92400e; }
.gj-badge-final { background: #dcfce7; color: #166534; }
.gj-finalized-at {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ui-muted);
}
.gj-empty-hint {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 13px;
    line-height: 1.5;
}
.gj-intro-text { margin-top: 10px; color: var(--ui-body); font-size: 14px; line-height: 1.6; }
.gj-panel-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ui-text);
}
.gj-panel-note {
    margin-top: 6px;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.55;
}
.gj-section { margin-top: 16px; }
.gj-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.gj-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}
.gj-row:last-child { border-bottom: none; }
.gj-label { color: #6b7280; font-size: 13px; }
.gj-value { font-weight: 700; font-size: 14px; color: #111827; text-align: right; }
.gj-value.positive { color: #16a34a; }
.gj-value.negative { color: #dc2626; }
.gj-total {
    font-size: 18px;
    font-weight: 800;
    color: var(--ui-navy);
    margin-top: 14px;
    padding-top: 14px;
    border-top: 2px solid #e5e7eb;
}

/* Attendance history (rs-*) */
.rs-list,
.rs-empty {
    background: #fff;
    border-radius: var(--ui-radius-xl);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-sm);
}
.rs-list { padding: 12px; margin-bottom: 18px; }
.rs-item + .rs-item { margin-top: 12px; }
.rs-item {
    padding: 18px 18px 16px;
    border-radius: var(--ui-radius-lg);
    border: 1px solid #eef2f7;
    background: var(--ui-surface-card);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.rs-item:hover {
    box-shadow: 0 14px 28px -22px rgba(15, 23, 42, 0.24);
    border-color: #dbeafe;
}
.rs-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e9eef5;
}
.rs-item-date { font-weight: 800; font-size: 15px; color: var(--ui-text); letter-spacing: -0.02em; }
.rs-item-subtitle { margin-top: 4px; font-size: 12px; color: var(--ui-muted); }
.rs-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.rs-grid-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #9ca3af;
    font-weight: 600;
}
.rs-grid-value { font-size: 18px; font-weight: 800; color: var(--ui-text); margin-top: 4px; }
.rs-photo-btn { background: none; border: none; padding: 0; cursor: pointer; text-align: left; font: inherit; }
.rs-photo-btn:hover .rs-grid-value { color: #1d4ed8; }
.rs-photo-link {
    display: inline-flex;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ui-primary);
}
.rs-badge {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
}
.rs-badge.on-time { background: rgba(16, 185, 129, 0.15); color: #047857; }
.rs-badge.late { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.rs-badge.early-leave { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.rs-badge.absent { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.rs-empty { text-align: center; padding: 40px 24px; color: #6b7280; font-size: 15px; margin-bottom: 18px; }
.rs-empty-icon svg { width: 34px; height: 34px; stroke-width: 1.8; }
.rs-photo-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
}
.rs-photo-modal.open { display: flex; }
.rs-photo-card {
    background: #fff;
    border-radius: var(--ui-radius-xl);
    width: min(420px, 100%);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.rs-photo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #eef2f7;
}
.rs-photo-title { font-weight: 700; color: #111827; font-size: 14px; }
.rs-photo-close {
    background: #e2e8f0;
    color: #334155;
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.rs-photo-close:hover { background: #cbd5e1; }
.rs-photo-body { padding: 12px; }
.rs-photo-img { width: 100%; height: auto; border-radius: 10px; display: block; }

/* Attendance summary / ringkasan (rk-*) */
.rk-intro {
    background: #fff;
    border-radius: var(--ui-radius-xl);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-sm);
    padding: 20px;
    margin-bottom: 18px;
}
.rk-user { display: flex; align-items: center; gap: 14px; }
.rk-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.rk-avatar-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e2e8f0 0%, #f8fafc 100%);
    color: #334155;
    font-weight: 800;
}
.rk-user-name { font-weight: 800; font-size: 16px; color: var(--ui-text); }
.rk-user-status {
    display: inline-flex;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rk-intro .ep-period-label { margin-top: 16px; }
.rk-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.rk-summary-item {
    padding: 18px;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-card);
    border: 1px solid #e8eef5;
    min-height: 100%;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.rk-summary-item:hover {
    box-shadow: 0 14px 28px -22px rgba(15, 23, 42, 0.22);
    border-color: #dbeafe;
}
.rk-stat-label {
    color: var(--ui-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rk-stat-value {
    margin-top: 10px;
    font-weight: 800;
    font-size: 1.8rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ui-text);
    word-break: break-word;
}

@media (max-width: 640px) {
    .ep-header--with-meta { flex-direction: column; align-items: stretch; }
    .ep-meta-card { width: 100%; min-width: 0; }
    .pr-header { align-items: flex-start; }
    .pr-header-card { flex-direction: column; align-items: flex-start; }
    .pr-photo-modal { padding: 14px; }
    .pr-photo-modal-actions { flex-direction: column-reverse; }
    .pr-photo-modal-actions button { width: 100%; }
    .rs-item-top { flex-direction: column; }
    .rk-stat-value { font-size: 1.45rem; }
    .rk-user { align-items: flex-start; }
}
@media (max-width: 420px) {
    .ep-meta-card { display: none; }
    .ep-list-item { padding: 12px; }
    .ep-form-card,
    .ep-form-tip { padding: 14px; }
    .pr-card { padding: 16px; }
    .pr-row { padding: 14px 16px; }
    .pr-cropper-wrap { height: 220px; }
    .rk-intro { padding: 16px; }
    .rk-summary-item { padding: 16px; }
    .rk-user { flex-direction: column; }
}
@media (max-width: 400px) {
    .pr-shortcut { flex-wrap: wrap; align-items: flex-start; padding: 12px; }
    .pr-shortcut__icon { width: 44px; height: 44px; }
    .pr-shortcut__chev { margin-left: auto; }
    .pr-shortcut__badge { order: 4; width: calc(100% - 58px); margin: 2px 0 0 58px; text-align: center; }
}

/* ------------------------------------------------------------------ */
/* Wave D — shared utilities (layouts, ESS, progress vars)             */
/* ------------------------------------------------------------------ */
.is-hidden { display: none !important; }
.ess-note--danger { color: #b91c1c; }
.ess-pager-mt { margin-top: 1rem; }
.ess-section-mt { margin-top: 12px; }
.ess-doc-btn-mt { margin-top: 12px; }
.ui-icon-lock { width: 13px; height: 13px; }
.form-logout-inline { display: inline; margin: 0; }
.sidebar-logout-form { margin: 0; }
.pr-file-input-hidden { display: none; }
.demo-readonly-badge .ui-icon-lock,
.demo-readonly-badge [data-lucide="lock"] { width: 13px; height: 13px; }