/* ============================================================
   SIP RSUD GIRI EMAS — Theme v3 (Premium · Clean · Accessible)
   ------------------------------------------------------------
   Refinements over v2:
   - Color contrast safety net (WCAG AA minimum 4.5:1 untuk teks)
   - Typography: Inter sebagai primary (tabular numerals optimal)
   - Animations: lebih halus, kurangi stagger berlebihan
   - Palet semantic 3-level: solid / soft / border untuk tiap status
   - Bootstrap utility class overrides yang aman (tidak breaking)
   - Micro-interactions: spring easing yang konsisten
   ============================================================ */

/* ============================================================
   0. FONTS — self-loaded, jadi self-contained
   ------------------------------------------------------------
   Inter         : primary UI font (clean, tabular nums optimal)
   Plus Jakarta  : fallback compatibility dengan v2
   JetBrains Mono: code blocks
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   1. FOUNDATION — Custom properties (design tokens)
   ============================================================ */
:root {
    /* === BRAND PALETTE — Teal (healthcare-friendly, premium) === */
    --brand-50:  #f0fdfa;
    --brand-100: #ccfbf1;
    --brand-200: #99f6e4;
    --brand-300: #5eead4;
    --brand-400: #2dd4bf;
    --brand-500: #14b8a6;
    --brand-600: #0d9488;  /* primary */
    --brand-700: #0f766e;
    --brand-800: #115e59;
    --brand-900: #134e4a;

    /* === NEUTRAL — Slate, soft & professional === */
    --slate-25:  #fcfcfd;
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-150: #e8edf3;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* === SEMANTIC — 3 level per status (solid / soft / border / text) === */
    /* SUCCESS (emerald) */
    --success:        #059669;
    --success-soft:   #ecfdf5;
    --success-border: #a7f3d0;
    --success-text:   #065f46;  /* untuk teks di soft background */

    /* WARNING (amber) — chosen dark enough for white text contrast */
    --warning:        #d97706;
    --warning-soft:   #fffbeb;
    --warning-border: #fde68a;
    --warning-text:   #92400e;

    /* DANGER (red) */
    --danger:         #dc2626;
    --danger-soft:    #fef2f2;
    --danger-border:  #fecaca;
    --danger-text:    #991b1b;

    /* INFO (cyan) */
    --info:           #0891b2;
    --info-soft:      #ecfeff;
    --info-border:    #a5f3fc;
    --info-text:      #155e75;

    /* === SURFACES === */
    --bg-app:         #f6f8fb;
    --bg-card:        #ffffff;
    --bg-sidebar:     #0f172a;
    --bg-sidebar-2:   #1e293b;
    --bg-hover:       #f1f5f9;
    --bg-active:      #e8edf3;

    /* === BORDERS === */
    --border:        #e5e9ef;
    --border-strong: #cbd5e1;
    --border-focus:  var(--brand-500);

    /* === RADIUS === */
    --r-xs: 4px;
    --r-sm: 6px;
    --r:    8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-full: 9999px;

    /* === SHADOWS — multi-layer, very subtle === */
    --shadow-xs:  0 1px 1px rgba(15,23,42,.04);
    --shadow-sm:  0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.05);
    --shadow:     0 1px 3px rgba(15,23,42,.05), 0 4px 8px rgba(15,23,42,.04);
    --shadow-md:  0 4px 8px rgba(15,23,42,.05), 0 8px 16px rgba(15,23,42,.06);
    --shadow-lg:  0 8px 16px rgba(15,23,42,.06), 0 16px 32px rgba(15,23,42,.08);
    --shadow-xl:  0 16px 32px rgba(15,23,42,.08), 0 24px 48px rgba(15,23,42,.10);

    --shadow-brand:    0 4px 14px rgba(13,148,136,.20);
    --shadow-brand-lg: 0 8px 24px rgba(13,148,136,.25);

    --shadow-focus:        0 0 0 4px rgba(20, 184, 166, .15);
    --shadow-focus-danger: 0 0 0 4px rgba(220, 38, 38, .12);

    /* === TYPOGRAPHY === */
    --font: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace;

    --fs-xs:   11.5px;
    --fs-sm:   12.5px;
    --fs-base: 14px;
    --fs-md:   15px;
    --fs-lg:   16px;
    --fs-xl:   18px;
    --fs-2xl:  22px;
    --fs-3xl:  28px;

    /* === MOTION — consistent timing === */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 120ms;
    --duration:      200ms;
    --duration-slow: 320ms;

    --transition-base:   all var(--duration) var(--ease);
    --transition-smooth: all var(--duration-slow) var(--ease-out);
    --transition-spring: all var(--duration) var(--ease-spring);

    /* ====================================================
       LEGACY COMPAT — alias dari theme v1/v2
       --------------------------------------------------
       Banyak template HTML existing pakai inline
       style="background:var(--pbj-navy)" dll. Variable ini
       JANGAN dihapus — kalau hilang, background jadi
       transparent dan text putih di atasnya jadi invisible.
       ==================================================== */
    --pbj-navy:       #0f172a;             /* slate-900, dark navy untuk stat card */
    --pbj-navy-dark:  #1e3a8a;             /* royal blue, untuk card-header */
    --pbj-navy-2:     #1e293b;             /* slate-800 */
    --pbj-teal:       var(--brand-600);    /* teal-600 */
    --pbj-teal-dark:  var(--brand-700);
    --pbj-teal-light: var(--brand-50);
    --pbj-gold:       #fbbf24;             /* amber-400 untuk icon */
    --pbj-amber:      var(--warning);
    --pbj-cream:      var(--slate-50);
    --pbj-bg:         var(--bg-app);
    --pbj-text:       var(--slate-800);
    --pbj-muted:      var(--slate-500);
    --pbj-border:     var(--border);
    --pbj-primary:    var(--brand-600);
    --pbj-success:    var(--success);
    --pbj-danger:     var(--danger);
    --pbj-warning:    var(--warning);
    --pbj-info:       var(--info);
}

/* ============================================================
   2. RESET & GLOBAL
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font) !important;
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--slate-800);
    background: var(--bg-app);
    /* Font feature settings — tabular numerals untuk uang/angka, stylistic set */
    font-feature-settings: 'tnum' on, 'ss01' on, 'cv11' on;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font);
    font-weight: 700;
    color: var(--slate-900);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

h1, .h1 { font-size: var(--fs-3xl); }
h2, .h2 { font-size: var(--fs-2xl); }
h3, .h3 { font-size: var(--fs-xl); }
h4, .h4 { font-size: var(--fs-lg); }
h5, .h5 { font-size: var(--fs-md); }
h6, .h6 { font-size: var(--fs-base); font-weight: 600; }

code, pre {
    font-family: var(--font-mono);
    font-size: .85em;
    font-feature-settings: normal;
}
code {
    background: var(--slate-100);
    color: var(--brand-700);
    padding: 2px 6px;
    border-radius: var(--r-xs);
    border: 1px solid var(--slate-200);
    font-weight: 500;
}

small, .small { font-size: .82rem; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

a {
    color: var(--brand-700);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease);
}
a:hover { color: var(--brand-800); }

hr {
    background-color: var(--border);
    opacity: 1;
    margin: 16px 0;
    border: none;
    height: 1px;
}

::selection {
    background: var(--brand-100);
    color: var(--brand-900);
}

/* ============================================================
   4. CONTRAST SAFETY NET — Anti "tulisan hilang"
   ------------------------------------------------------------
   Aturan: kalau ada kombinasi class Bootstrap yang menyebabkan
   tulisan & background warna sama, override otomatis.
   ============================================================ */

/* Background TERANG + .text-white → paksa jadi dark text */
.bg-white .text-white,
.bg-light .text-white,
.bg-warning-soft .text-white,
.bg-success-soft .text-white,
.bg-info-soft .text-white,
.bg-danger-soft .text-white,
.alert-warning .text-white,
.alert-light   .text-white,
.alert-info    .text-white,
.alert-success .text-white,
.alert-danger  .text-white {
    color: var(--slate-900) !important;
}

/* Background GELAP + .text-dark → paksa jadi light text */
.bg-primary  .text-dark,
.bg-success  .text-dark,
.bg-danger   .text-dark,
.bg-info     .text-dark,
.bg-dark     .text-dark,
.bg-secondary .text-dark,
[class*="bg-"][class*="-700"] .text-dark,
[class*="bg-"][class*="-800"] .text-dark,
[class*="bg-"][class*="-900"] .text-dark {
    color: rgba(255,255,255,.95) !important;
}

/* Khusus: tabel dengan thead .table-dark — semua descendant text putih */
.table-dark, .table-dark th, .table-dark td,
.table thead.table-dark th,
.table thead.table-dark td {
    color: rgba(255,255,255,.92) !important;
}
.table-dark .text-muted,
.table thead.table-dark .text-muted {
    color: rgba(255,255,255,.65) !important;
}

/* Auto-readability: muted text di context terang stay slate-500,
   di context gelap (sidebar, header colored) jadi rgba putih */
.bg-sidebar .text-muted,
[class*="bg-"][class*="-800"] .text-muted,
[class*="bg-"][class*="-900"] .text-muted,
.bg-dark .text-muted {
    color: rgba(255,255,255,.65) !important;
}

/* Common foot-gun: card-header berwarna gelap dengan <small class="text-muted"> */
.card-header.bg-primary .text-muted,
.card-header.bg-success .text-muted,
.card-header.bg-danger  .text-muted,
.card-header.bg-info    .text-muted,
.card-header.bg-dark    .text-muted {
    color: rgba(255,255,255,.75) !important;
}

/* ============================================================
   5. LAYOUT — SIDEBAR
   ============================================================ */
#sidebar, .sidebar {
    background: linear-gradient(180deg, var(--bg-sidebar) 0%, var(--bg-sidebar-2) 100%) !important;
    border-right: 1px solid rgba(255,255,255,.04);
    box-shadow: 4px 0 24px -12px rgba(0,0,0,.18);
    position: relative;
}

/* Subtle top highlight */
#sidebar::before, .sidebar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(94,234,212,.3), transparent);
    z-index: 1;
}

.nav-section-label {
    color: rgba(148, 163, 184, .55) !important;
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 18px 24px 8px !important;
    user-select: none;
}

.sidebar .nav-link,
#sidebar .nav-link {
    color: rgba(226, 232, 240, .75) !important;
    padding: 9px 16px !important;
    margin: 2px 12px !important;
    border-radius: var(--r) !important;
    font-size: 13.5px;
    font-weight: 500;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
    border-left: 2px solid transparent;
}

/* Shimmer slide-in saat hover */
.sidebar .nav-link::before,
#sidebar .nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(94,234,212,.06) 50%,
        transparent 100%);
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease);
    pointer-events: none;
}

.sidebar .nav-link:hover,
#sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .05) !important;
    color: #fff !important;
    transform: translateX(2px);
}

.sidebar .nav-link:hover::before,
#sidebar .nav-link:hover::before { transform: translateX(100%); }

.sidebar .nav-link.active,
#sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(13,148,136,.22), rgba(20,184,166,.12)) !important;
    color: var(--brand-300) !important;
    border-left-color: var(--brand-400);
    font-weight: 600;
    box-shadow: inset 0 0 24px rgba(13,148,136,.06);
}

.sidebar .nav-link.active i,
#sidebar .nav-link.active i {
    color: var(--brand-400);
    filter: drop-shadow(0 0 6px rgba(94,234,212,.4));
}

.sidebar .nav-link i,
#sidebar .nav-link i {
    width: 20px;
    text-align: center;
    margin-right: 8px;
    opacity: .85;
    transition: var(--transition-base);
}

/* === BRAND CONTAINER — vertical stack, anti truncation === */
#sidebar .brand {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 10px !important;
    padding: 22px 14px 18px !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg,
        rgba(13,148,136,.08) 0%,
        transparent 100%);
}

.brand-logo,
#sidebar .brand-logo {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700)) !important;
    box-shadow: var(--shadow-brand),
                inset 0 1px 0 rgba(255,255,255,.15);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-spring);
}
.brand-logo:hover,
#sidebar .brand-logo:hover {
    transform: scale(1.05) rotate(-2deg);
    box-shadow: var(--shadow-brand-lg);
}
#sidebar .brand-logo img {
    max-height: 36px;
    max-width: 36px;
    object-fit: contain;
}
#sidebar .brand-logo i { font-size: 1.4rem; color: #fff; }

#sidebar .brand > div:last-child {
    width: 100%;
    min-width: 0;
    flex: none !important;
}

#sidebar .brand-text {
    font-size: .9rem !important;
    font-weight: 700;
    color: #fff;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -.01em;
}

#sidebar .brand-sub {
    font-size: .65rem !important;
    color: rgba(255,255,255,.55) !important;
    line-height: 1.4 !important;
    margin-top: 3px;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: .02em;
    text-transform: none;
}

/* User badge — smart truncation */
.sidebar-user, #sidebar-user, #sidebar .user-badge {
    background: rgba(255,255,255,.03);
    border-top: 1px solid rgba(255,255,255,.06);
    transition: var(--transition-base);
}
.sidebar-user:hover, #sidebar-user:hover {
    background: rgba(255,255,255,.05);
}

#sidebar .user-name {
    color: #fff;
    font-size: .82rem !important;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

#sidebar .user-role {
    color: rgba(255,255,255,.55);
    font-size: .68rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* ============================================================
   6. LAYOUT — TOP HEADER
   ============================================================ */
.top-header, header.bg-white, .header-bar {
    background: rgba(255,255,255,.85) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* ============================================================
   7. CARDS — refined depth
   ============================================================ */
.card {
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    background: var(--bg-card);
    overflow: hidden;
    position: relative;
}

.card:hover {
    box-shadow: var(--shadow);
    border-color: var(--slate-200) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 18px !important;
    font-weight: 600;
    color: var(--slate-900);
}

/* Headers berwarna — auto fix kontras */
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-info,
.card-header.bg-dark {
    border-bottom: none !important;
    border-top-left-radius: var(--r-md) !important;
    border-top-right-radius: var(--r-md) !important;
    color: #fff !important;
    letter-spacing: .01em;
}

/* Warning header pakai background warning solid + text putih (kontras 5.6:1 OK) */
.card-header.bg-warning {
    background: var(--warning) !important;
    color: #fff !important;
    border-bottom: none !important;
    border-top-left-radius: var(--r-md) !important;
    border-top-right-radius: var(--r-md) !important;
}

/* Tapi kalau template pakai `bg-warning text-dark` → respect text-dark */
.card-header.bg-warning.text-dark,
.card-header.bg-warning .text-dark {
    color: var(--slate-900) !important;
}

.card-body { padding: 18px; }
.card.text-center .card-body { padding: 18px 14px; }

/* ============================================================
   8. BUTTONS — premium, smooth
   ============================================================ */
.btn {
    border-radius: var(--r-sm) !important;
    font-weight: 500;
    font-size: 13.5px;
    padding: 7px 14px;
    transition: var(--transition-base);
    border-width: 1px;
    border-style: solid;
    letter-spacing: .005em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
}

/* Ripple on click */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,.4), transparent 60%);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease);
    pointer-events: none;
}
.btn:active::after { opacity: 1; }

.btn-lg { padding: 11px 22px; font-size: 15px; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.btn-xs { padding: 2px 8px;  font-size: 11px; border-radius: var(--r-xs) !important; }

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.btn:active:not(:disabled) {
    transform: translateY(0);
    transition-duration: var(--duration-fast);
}
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Solid variants */
.btn-primary {
    background: var(--brand-600); border-color: var(--brand-600); color: #fff;
}
.btn-primary:hover:not(:disabled) {
    background: var(--brand-700); border-color: var(--brand-700);
    box-shadow: var(--shadow-brand); color: #fff;
}

.btn-success {
    background: var(--success); border-color: var(--success); color: #fff;
}
.btn-success:hover:not(:disabled) {
    background: #047857; border-color: #047857; color: #fff;
}

.btn-warning {
    background: var(--warning); border-color: var(--warning); color: #fff;
}
.btn-warning:hover:not(:disabled) {
    background: #b45309; border-color: #b45309; color: #fff;
}

.btn-danger {
    background: var(--danger); border-color: var(--danger); color: #fff;
}
.btn-danger:hover:not(:disabled) {
    background: #b91c1c; border-color: #b91c1c; color: #fff;
}

.btn-info {
    background: var(--info); border-color: var(--info); color: #fff;
}
.btn-info:hover:not(:disabled) {
    background: #0e7490; border-color: #0e7490; color: #fff;
}

.btn-dark {
    background: var(--slate-800); border-color: var(--slate-800); color: #fff;
}
.btn-dark:hover:not(:disabled) {
    background: var(--slate-900); border-color: var(--slate-900); color: #fff;
}

.btn-light {
    background: var(--slate-100); border-color: var(--slate-200); color: var(--slate-700);
}
.btn-light:hover:not(:disabled) {
    background: var(--slate-200); border-color: var(--slate-300); color: var(--slate-900);
}

.btn-secondary {
    background: var(--slate-500); border-color: var(--slate-500); color: #fff;
}
.btn-secondary:hover:not(:disabled) {
    background: var(--slate-600); border-color: var(--slate-600); color: #fff;
}

/* Outline variants */
.btn-outline-primary {
    background: transparent; border-color: var(--brand-600); color: var(--brand-700);
}
.btn-outline-primary:hover:not(:disabled) {
    background: var(--brand-600); border-color: var(--brand-600); color: #fff;
}

.btn-outline-secondary {
    background: transparent; border-color: var(--border-strong); color: var(--slate-700);
}
.btn-outline-secondary:hover:not(:disabled) {
    background: var(--bg-hover); border-color: var(--slate-400); color: var(--slate-900);
}

.btn-outline-success {
    background: transparent; border-color: var(--success); color: var(--success);
}
.btn-outline-success:hover:not(:disabled) {
    background: var(--success); color: #fff;
}

.btn-outline-warning {
    background: transparent; border-color: var(--warning); color: var(--warning);
}
.btn-outline-warning:hover:not(:disabled) {
    background: var(--warning); color: #fff;
}

.btn-outline-danger {
    background: transparent; border-color: var(--danger); color: var(--danger);
}
.btn-outline-danger:hover:not(:disabled) {
    background: var(--danger); color: #fff;
}

.btn-outline-info {
    background: transparent; border-color: var(--info); color: var(--info);
}
.btn-outline-info:hover:not(:disabled) {
    background: var(--info); color: #fff;
}

.btn-outline-light {
    background: transparent; border-color: rgba(255,255,255,.4); color: #fff;
}
.btn-outline-light:hover:not(:disabled) {
    background: rgba(255,255,255,.1); color: #fff;
}

/* Focus ring (accessibility) */
.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.btn-danger:focus-visible,
.btn-outline-danger:focus-visible {
    box-shadow: var(--shadow-focus-danger);
}

/* ============================================================
   9. TABLES — clean, scannable
   ============================================================ */
.table {
    color: var(--slate-700);
    border-color: var(--border);
    margin-bottom: 0;
    --bs-table-bg: transparent;
}

.table > :not(caption) > * > * {
    padding: 11px 12px;
    border-bottom-color: var(--border);
    background-color: transparent;
}

.table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--slate-600);
    background: var(--slate-50) !important;
    border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
}

/* Dark thead — pastikan teks tetap kebaca */
.table-dark, .table-dark > :not(caption) > * > *,
.table thead.table-dark th,
.table > :not(caption) > thead.table-dark > tr > th {
    background: var(--slate-800) !important;
    color: rgba(255,255,255,.92) !important;
    border-bottom-color: var(--slate-700) !important;
}

.table-hover tbody tr {
    transition: background-color var(--duration-fast) var(--ease);
}
.table-hover tbody tr:hover {
    background-color: var(--slate-50) !important;
}
.table tbody tr:hover code {
    background: #fff;
    border-color: var(--brand-300);
}

.table-light, .table > :not(caption) > * > th.table-light {
    background: var(--slate-50) !important;
}

/* Row variants soft — tetap kebaca */
.table-success {
    background-color: var(--success-soft) !important;
    border-left: 3px solid var(--success);
    color: var(--success-text);
}
.table-warning {
    background-color: var(--warning-soft) !important;
    border-left: 3px solid var(--warning);
    color: var(--warning-text);
}
.table-danger {
    background-color: var(--danger-soft) !important;
    border-left: 3px solid var(--danger);
    color: var(--danger-text);
}
.table-info {
    background-color: var(--info-soft) !important;
    border-left: 3px solid var(--info);
    color: var(--info-text);
}

/* Tabular numbers untuk angka uang */
.text-currency, td.text-end.fw-bold, td.num,
.text-end.fw-bold, td.text-end {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ============================================================
   10. FORMS — modern, smooth focus
   ============================================================ */
.form-control, .form-select {
    border-radius: var(--r-sm) !important;
    border: 1.5px solid var(--border-strong);
    font-size: var(--fs-base);
    padding: 8px 12px;
    transition: var(--transition-base);
    background: var(--bg-card);
    color: var(--slate-900);
}

.form-control::placeholder { color: var(--slate-400); }

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
    border-color: var(--slate-400);
}

.form-control:focus, .form-select:focus {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus);
    outline: none;
}

.form-control:disabled, .form-select:disabled,
.form-control[readonly] {
    background: var(--slate-50);
    color: var(--slate-600);
    cursor: not-allowed;
}

.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--danger);
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
    box-shadow: var(--shadow-focus-danger);
}

.form-control.is-valid, .form-select.is-valid {
    border-color: var(--success);
}

.form-control-lg, .form-select-lg {
    font-size: var(--fs-md);
    padding: 10px 14px;
}
.form-control-sm, .form-select-sm {
    font-size: var(--fs-sm);
    padding: 5px 10px;
}

.form-label {
    color: var(--slate-700);
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 5px;
}

.form-label.small {
    font-size: var(--fs-xs);
    color: var(--slate-600);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

textarea.form-control { line-height: 1.5; resize: vertical; }

.input-group > .btn {
    border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
}
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.input-group-text {
    background: var(--slate-50);
    border: 1.5px solid var(--border-strong);
    color: var(--slate-700);
    font-size: var(--fs-sm);
}

/* Form switch (toggle) */
.form-check-input {
    transition: var(--transition-base);
    border-color: var(--border-strong);
}
.form-check-input:checked {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}
.form-check-input:focus {
    box-shadow: var(--shadow-focus);
    border-color: var(--brand-500);
}

/* Form text helper */
.form-text {
    color: var(--slate-500);
    font-size: 12px;
    margin-top: 4px;
}

/* ============================================================
   11. BADGES — refined, kontras dijaga
   ============================================================ */
.badge {
    font-weight: 600;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: var(--r-xs);
    letter-spacing: .015em;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge.bg-primary   { background: var(--brand-600) !important; color: #fff !important; }
.badge.bg-success   { background: var(--success)   !important; color: #fff !important; }
.badge.bg-danger    { background: var(--danger)    !important; color: #fff !important; }
.badge.bg-info      { background: var(--info)      !important; color: #fff !important; }
.badge.bg-dark      { background: var(--slate-800) !important; color: #fff !important; }
.badge.bg-secondary { background: var(--slate-500) !important; color: #fff !important; }

/* WARNING — default putih (amber-600 + putih kontras 5.6:1 — AA ✓) */
.badge.bg-warning   { background: var(--warning)   !important; color: #fff !important; }
/* TAPI kalau template eksplisit pakai `text-dark` → respect itu */
.badge.bg-warning.text-dark {
    color: var(--slate-900) !important;
}

/* LIGHT — pastikan text dark */
.badge.bg-light     {
    background: var(--slate-100) !important;
    color: var(--slate-700) !important;
    border: 1px solid var(--slate-200);
}

/* ─────────────────────────────────────────────────────────
   "bg-X text-dark" pattern fix — auto-switch ke soft variant
   ─────────────────────────────────────────────────────────
   Pola seperti <span class="badge bg-success text-dark">…</span>
   di template lama: bg-success → emerald gelap, text-dark →
   abu-abu gelap → kontras lemah (2.8:1) atau hilang sama sekali.
   Auto-translate jadi soft variant: bg muda + text gelap dari
   family yang sama → kontras 7:1+ dan visually lebih lembut.
*/
.badge.bg-success.text-dark {
    background: var(--success-soft) !important;
    color: var(--success-text) !important;
    border: 1px solid var(--success-border);
}
.badge.bg-info.text-dark {
    background: var(--info-soft) !important;
    color: var(--info-text) !important;
    border: 1px solid var(--info-border);
}
.badge.bg-danger.text-dark {
    background: var(--danger-soft) !important;
    color: var(--danger-text) !important;
    border: 1px solid var(--danger-border);
}
.badge.bg-primary.text-dark {
    background: var(--brand-50) !important;
    color: var(--brand-900) !important;
    border: 1px solid var(--brand-200);
}
.badge.bg-secondary.text-dark {
    background: var(--slate-100) !important;
    color: var(--slate-700) !important;
    border: 1px solid var(--slate-200);
}
.badge.bg-dark.text-dark {
    background: var(--slate-200) !important;
    color: var(--slate-800) !important;
    border: 1px solid var(--slate-300);
}

/* ============================================================
   12. ALERTS — soft, nyaman dibaca
   ============================================================ */
.alert {
    border-radius: var(--r-md);
    border: 1px solid;
    padding: 12px 16px;
    font-size: 13.5px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: slideInDown var(--duration-slow) var(--ease-out);
}

.alert > i:first-child { font-size: 16px; flex-shrink: 0; line-height: 1.5; }

.alert-success {
    background: var(--success-soft);
    border-color: var(--success-border);
    color: var(--success-text);
}
.alert-warning {
    background: var(--warning-soft);
    border-color: var(--warning-border);
    color: var(--warning-text);
}
.alert-danger {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: var(--danger-text);
}
.alert-info {
    background: var(--info-soft);
    border-color: var(--info-border);
    color: var(--info-text);
}
.alert-primary {
    background: var(--brand-50);
    border-color: var(--brand-200);
    color: var(--brand-900);
}
.alert-light {
    background: var(--slate-50);
    border-color: var(--border);
    color: var(--slate-700);
}
.alert-secondary {
    background: var(--slate-100);
    border-color: var(--slate-200);
    color: var(--slate-700);
}

/* Penting: link & strong di dalam alert pakai warna text-nya, BUKAN brand */
.alert strong, .alert b { color: inherit; font-weight: 700; }
.alert a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.btn-close { transition: var(--transition-base); }
.btn-close:hover { transform: scale(1.15); }

/* ============================================================
   13. MODALS — polished
   ============================================================ */
.modal-backdrop.show { opacity: .55; backdrop-filter: blur(4px); }

.modal-content {
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.modal.fade .modal-dialog {
    transition: transform var(--duration-slow) var(--ease-spring),
                opacity var(--duration) var(--ease);
    transform: scale(.95) translateY(-12px);
    opacity: 0;
}
.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
    border-top-left-radius: var(--r-lg);
    border-top-right-radius: var(--r-lg);
}

.modal-header.bg-primary,
.modal-header.bg-success,
.modal-header.bg-warning,
.modal-header.bg-danger,
.modal-header.bg-info,
.modal-header.bg-dark {
    border-bottom: none;
    color: #fff;
}

.modal-header.bg-warning { background: var(--warning) !important; }

.modal-body { padding: 20px; }
.modal-footer {
    border-top: 1px solid var(--border);
    padding: 14px 20px;
    gap: 8px;
}

/* ============================================================
   14. NAV — tabs, pills
   ============================================================ */
.nav-tabs {
    border-bottom: 1px solid var(--border);
}

.nav-tabs .nav-link {
    color: var(--slate-600);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    font-weight: 500;
    font-size: var(--fs-base);
    transition: var(--transition-base);
    border-radius: 0;
    margin-bottom: -1px;
    background: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--slate-900);
    border-bottom-color: var(--slate-300);
}
.nav-tabs .nav-link.active {
    color: var(--brand-700);
    border-bottom-color: var(--brand-500);
    background: transparent;
    font-weight: 600;
}

.nav-pills .nav-link {
    color: var(--slate-700);
    border-radius: var(--r-sm);
    padding: 7px 14px;
    font-weight: 500;
    transition: var(--transition-base);
}
.nav-pills .nav-link:hover {
    background: var(--bg-hover);
}
.nav-pills .nav-link.active {
    background: var(--brand-600);
    color: #fff;
}

/* ============================================================
   15. PAGINATION
   ============================================================ */
.pagination .page-link {
    color: var(--slate-700);
    border-color: var(--border);
    border-radius: var(--r-sm);
    margin: 0 2px;
    min-width: 36px;
    text-align: center;
    transition: var(--transition-base);
    font-size: 13.5px;
}

.pagination .page-link:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--slate-900);
}

.pagination .page-item.active .page-link {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
    box-shadow: var(--shadow-brand);
}

.pagination .page-item.disabled .page-link {
    background: var(--slate-50);
    color: var(--slate-400);
}

/* ============================================================
   16. LIST GROUP
   ============================================================ */
.list-group-item {
    border-color: var(--border);
    transition: var(--transition-base);
    padding: 10px 14px;
    color: var(--slate-700);
}
.list-group-item:hover:not(.active) {
    background: var(--bg-hover);
    color: var(--slate-900);
}
.list-group-item.active {
    background: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #fff !important;
}

/* ============================================================
   17. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--slate-50); }
::-webkit-scrollbar-thumb {
    background: var(--slate-300);
    border-radius: var(--r-full);
    border: 2px solid var(--slate-50);
}
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--slate-300) var(--slate-50); }

/* ============================================================
   18. PROGRESS BAR
   ============================================================ */
.progress {
    background: var(--slate-100);
    border-radius: var(--r-full);
    height: 8px;
    overflow: hidden;
}
.progress-bar {
    background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
    border-radius: var(--r-full);
    transition: width var(--duration-slow) var(--ease);
}
.progress-bar.bg-success { background: linear-gradient(90deg, #10b981, var(--success)) !important; }
.progress-bar.bg-warning { background: linear-gradient(90deg, #f59e0b, var(--warning)) !important; }
.progress-bar.bg-danger  { background: linear-gradient(90deg, #ef4444, var(--danger))  !important; }

/* ============================================================
   19. DROPDOWN
   ============================================================ */
.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    margin-top: 4px !important;
    animation: dropdownIn var(--duration) var(--ease-out);
}

.dropdown-item {
    border-radius: var(--r-sm);
    padding: 7px 12px;
    font-size: 13.5px;
    transition: var(--transition-base);
    color: var(--slate-700);
}

.dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--slate-900);
}

.dropdown-item:active, .dropdown-item.active {
    background: var(--brand-600);
    color: #fff;
}

.dropdown-divider {
    border-color: var(--border);
    margin: 4px 0;
}

/* ============================================================
   20. TOOLTIPS
   ============================================================ */
.tooltip-inner {
    background: var(--slate-900);
    border-radius: var(--r-sm);
    font-size: 12px;
    padding: 6px 10px;
    color: #fff;
}
.tooltip .tooltip-arrow::before { color: var(--slate-900); }

/* ============================================================
   21. ACCESSIBILITY
   ============================================================ */
*:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   22. ANIMATIONS — gentle, professional
   ============================================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}
@keyframes skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Page load: HANYA satu kali fade-in untuk main-content, bukan stagger per card
   (stagger berlebihan bikin halaman terasa "patah-patah") */
.main-content, main.main-content, .container, .container-fluid {
    animation: fadeIn var(--duration-slow) var(--ease-out);
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg,
        var(--slate-100) 0%,
        var(--slate-50) 50%,
        var(--slate-100) 100%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s var(--ease) infinite;
    border-radius: var(--r-xs);
}

/* ============================================================
   23. PRINT
   ============================================================ */
@media print {
    .sidebar, #sidebar, .top-header, .no-print, .btn { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
    body { background: #fff !important; color: #000 !important; }
    * { animation: none !important; transition: none !important; }
}

/* ============================================================
   24. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    body { font-size: 13.5px; }
    .card { border-radius: var(--r) !important; }
    .btn { font-size: 13px; padding: 6px 12px; }
    .table > :not(caption) > * > * { padding: 8px 6px; font-size: 12.5px; }
    .modal-dialog { margin: 8px; }
    .modal-content { border-radius: var(--r-md); }
    h1, .h1 { font-size: var(--fs-2xl); }
    h2, .h2 { font-size: var(--fs-xl); }
    h3, .h3 { font-size: var(--fs-lg); }
}

/* ============================================================
   25. APP-SPECIFIC TOUCHES
   ============================================================ */

/* Stat cards: subtle lift on hover */
.row.g-2 > [class*="col-"] > .card.text-center,
.row.g-3 > [class*="col-"] > .card.text-center,
.row > [class*="col-"] > .card.text-center {
    transition: var(--transition-smooth);
}
.row.g-2 > [class*="col-"] > .card.text-center:hover,
.row.g-3 > [class*="col-"] > .card.text-center:hover,
.row > [class*="col-"] > .card.text-center:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--brand-300) !important;
}

/* Stat cards berwarna (bg-warning, bg-primary dll) — auto white text */
.card.text-center.bg-primary,
.card.text-center.bg-success,
.card.text-center.bg-danger,
.card.text-center.bg-info,
.card.text-center.bg-dark {
    color: #fff !important;
}
.card.text-center.bg-warning {
    background: var(--warning) !important;
    color: #fff !important;
}
.card.text-center[style*="background"] { color: inherit; }

/* Status pills (untuk usulan/paket/dll) */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--slate-500);
}
.empty-state i { font-size: 48px; opacity: .35; display: block; margin-bottom: 12px; }
.empty-state h6 { color: var(--slate-700); }

/* Detail/summary disclosure */
details > summary {
    cursor: pointer;
    user-select: none;
    transition: var(--transition-base);
}
details > summary:hover { color: var(--brand-700); }

/* Code blocks in description */
.text-monospace, .font-monospace { font-family: var(--font-mono) !important; }

/* Soft background utilities — NEW (safer than .bg-light + custom color) */
.bg-success-soft { background: var(--success-soft) !important; color: var(--success-text) !important; }
.bg-warning-soft { background: var(--warning-soft) !important; color: var(--warning-text) !important; }
.bg-danger-soft  { background: var(--danger-soft)  !important; color: var(--danger-text)  !important; }
.bg-info-soft    { background: var(--info-soft)    !important; color: var(--info-text)    !important; }
.bg-brand-soft   { background: var(--brand-50)     !important; color: var(--brand-900)    !important; }

/* Border utilities matching the soft palette */
.border-success-soft { border-color: var(--success-border) !important; }
.border-warning-soft { border-color: var(--warning-border) !important; }
.border-danger-soft  { border-color: var(--danger-border)  !important; }
.border-info-soft    { border-color: var(--info-border)    !important; }

/* Currency / rupiah cell — emphasize tabular alignment */
.text-rupiah, .col-rupiah {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    letter-spacing: -.01em;
}

/* Final guard: kalau ada inline style atau Bootstrap utility yang bikin
   text putih jatuh ke background super terang, force readable */
body :is(.text-white, .text-light):is(
    [class*="bg-white"],
    [class*="bg-light"],
    [style*="background:#fff"],
    [style*="background:#ffffff"],
    [style*="background:white"]
) {
    color: var(--slate-900) !important;
}

/* ============================================================
   26. LEGACY INLINE-STYLE GUARANTEE
   ------------------------------------------------------------
   Template HTML existing banyak yang pakai pattern:
     <div style="background:var(--pbj-navy);"><span class="text-white">…</span></div>
   Saat browser render: variable resolve ke #0f172a (slate-900),
   text putih kontras 17:1 — aman. Tapi kalau ada template yang
   pakai literal background, kita pastikan child text-white tetap aman.

   Selector list (semua inline style yang biasanya gelap):
   ============================================================ */
[style*="background:var(--pbj-navy)"],
[style*="background: var(--pbj-navy)"],
[style*="background:var(--pbj-navy-dark)"],
[style*="background: var(--pbj-navy-dark)"],
[style*="background:#0f172a"],
[style*="background:#1e293b"],
[style*="background:#1e3a8a"],
[style*="background:#1d4ed8"],
[style*="background:#0d9488"],
[style*="background:#115e59"],
[style*="background:#0f766e"] {
    color: #fff;
}
[style*="background:var(--pbj-navy)"] *:not(.text-warning):not(.text-success):not(.text-info):not(.text-danger):not(.text-primary):not(.badge):not(i):not(.text-muted),
[style*="background:#1e3a8a"] *:not(.text-warning):not(.text-success):not(.text-info):not(.text-danger):not(.text-primary):not(.badge):not(i):not(.text-muted) {
    color: inherit;
}

/* Stat card "Total Nilai" dashboard PPK (pattern lama) */
.card.stat-card[style*="background:var(--pbj"] .text-white,
.card.stat-card[style*="background:#0f172a"] .text-white,
.card.stat-card[style*="background:#1e293b"] .text-white,
.card[style*="background:var(--pbj"] .fw-bold,
.card[style*="background:var(--pbj"] .small {
    color: #fff !important;
}

/* Utility class baru — pakai ini di template BARU, lebih aman dari inline style */
.bg-pbj-navy       { background: var(--pbj-navy) !important;       color: #fff !important; }
.bg-pbj-navy-dark  { background: var(--pbj-navy-dark) !important;  color: #fff !important; }
.bg-pbj-teal       { background: var(--pbj-teal) !important;       color: #fff !important; }
.bg-pbj-teal-light { background: var(--pbj-teal-light) !important; color: var(--brand-900) !important; }

/* ============================================================
   27. ADDITIONAL READABILITY FIXES
   ------------------------------------------------------------
   Form elements yang sering "samar":
   ============================================================ */

/* Input number — biar value-nya kebaca jelas, bukan tipis */
input[type="number"].form-control,
input.form-control {
    font-weight: 500;
    color: var(--slate-900);
}
input[type="number"].form-control:not(:placeholder-shown) { font-weight: 600; }

/* Form text helper yang sebelumnya pakai text-muted — pastikan readable */
.form-text, small.form-text {
    color: var(--slate-600) !important;
    font-size: 12.5px;
}

/* text-muted di dalam tombol — sering jatuh terlalu pucat */
.btn .text-muted, .btn small {
    color: inherit !important;
    opacity: .85;
}

/* Card footer (bottom action bar) — tighten text */
.card-footer, footer.card-footer {
    background: var(--slate-50) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--slate-700);
}
.card-footer .text-muted,
.card-footer small.text-muted {
    color: var(--slate-600) !important;
}

/* Bottom action bar sticky (sering dipakai untuk Total Estimasi di form paket) */
.action-bar, .bottom-bar, .form-action-bar,
[class*="bottom-action"] {
    background: #fff !important;
    border-top: 2px solid var(--border) !important;
    box-shadow: 0 -4px 12px rgba(15,23,42,.05);
    color: var(--slate-800);
}
.action-bar .text-muted,
.action-bar small,
.bottom-bar .text-muted,
.bottom-bar small {
    color: var(--slate-600) !important;
}

/* Input group text — pastikan readable */
.input-group-text {
    color: var(--slate-700) !important;
    background: var(--slate-50) !important;
    font-weight: 500;
}

/* Badge tanpa background class (sering muncul karena custom badge) */
.badge:not([class*="bg-"]) {
    background: var(--slate-100);
    color: var(--slate-700);
    border: 1px solid var(--slate-200);
}

/* ============================================================
   28. PREMIUM UI UPGRADE (SaaS Level)
   ------------------------------------------------------------
   - Choreographed Page Load (Efek elemen masuk berurutan)
   - Glassmorphism murni untuk Dropdown, Modal, dan Bottom Bar
   - Soft-glow Focus Rings & Spring Hover
   ============================================================ */

/* 1. CHOREOGRAPHED PAGE LOAD (Pergerakan Pindah Halaman) 
   Alih-alih cuma fade-in barengan, elemen akan masuk berurutan dari bawah ke atas 
   dengan kurva easing yang sangat halus (spring-like) */
@keyframes premiumSlideUp {
    0% { opacity: 0; transform: translateY(20px) scale(0.995); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Terapkan ke elemen anak langsung dari main-content atau row */
.main-content > *, .row > [class*="col-"] {
    animation: premiumSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Delay berurutan (Stagger) agar elemen tidak masuk bersamaan */
.main-content > *:nth-child(1), .row > *:nth-child(1) { animation-delay: 0.05s; }
.main-content > *:nth-child(2), .row > *:nth-child(2) { animation-delay: 0.10s; }
.main-content > *:nth-child(3), .row > *:nth-child(3) { animation-delay: 0.15s; }
.main-content > *:nth-child(4), .row > *:nth-child(4) { animation-delay: 0.20s; }
.main-content > *:nth-child(5), .row > *:nth-child(5) { animation-delay: 0.25s; }
.main-content > *:nth-child(n+6), .row > *:nth-child(n+6) { animation-delay: 0.30s; }


/* 2. PREMIUM GLASSMORPHISM
   Terapkan efek kaca tembus pandang bergaya iOS/macOS pada elemen yang mengambang */
.dropdown-menu, 
.modal-content, 
.action-bar, 
.bottom-bar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.12), 
                0 4px 12px -4px rgba(15, 23, 42, 0.06);
}


/* 3. MAGNETIC CARD INTERACTION
   Card akan terasa sedikit melayang dengan bayangan glow berwarna brand (teal) saat di-hover */
.card {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.4s ease-out, 
                border-color 0.4s ease;
}
.card:hover {
    transform: translateY(-4px) scale(1.002);
    box-shadow: 0 16px 32px -12px rgba(13, 148, 136, 0.12), 
                0 4px 12px -4px rgba(15, 23, 42, 0.06);
    border-color: rgba(20, 184, 166, 0.3) !important;
}


/* 4. LIQUID INPUT FOCUS
   Membuang garis kaku, menggantinya dengan "Aura / Soft Glow" saat input aktif */
.form-control:focus, .form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.15), 
                inset 0 1px 2px rgba(0,0,0,0.02) !important;
    background: #fff;
    transform: translateY(-1px);
}


/* 5. SMOOTH ROW HIGHLIGHT
   Table row hover yang lebih organik, tidak sekadar berubah warna, tapi sedikit membesar */
.table-hover tbody tr {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.table-hover tbody tr:hover {
    background-color: var(--brand-50) !important;
    transform: scale(1.001);
    box-shadow: inset 2px 0 0 var(--brand-500);
}


/* 6. PILL BADGE PULSE (Opsional untuk status penting seperti "Proses" / "Selesai") */
.badge.bg-success, .badge.bg-warning, .badge.bg-brand-soft {
    position: relative;
    overflow: visible;
}
.badge.bg-success::after {
    content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
    border: 1px solid var(--success); border-radius: var(--r-xs);
    animation: pulseGlow 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    opacity: 0; pointer-events: none;
}
@keyframes pulseGlow {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.2); opacity: 0; }
}