/* ==========================================================================
   JO Operasional — V6 THEME OVERRIDE
   Hijau-Emas-Jingga palette · loaded AFTER site.css (cascade override)
   Target: swap palette tanpa rewrite Blade. Auto-apply ke semua halaman
   yang pakai --jo-* variables.
   ========================================================================== */

/* ============================================
   V6 PALETTE TOKENS — Light Mode
   ============================================ */
:root,
[data-bs-theme="light"] {
    /* === V6 Palette base (referensi dari mockup public/design/*-v6.html) === */
    --v6-green: #047857;
    --v6-green-mid: #10B981;
    --v6-green-soft: #ECFDF5;
    --v6-green-deep: #064E3B;
    --v6-green-darker: #022C22;

    --v6-gold: #D97706;
    --v6-gold-bright: #F59E0B;
    --v6-gold-soft: #FEF3C7;
    --v6-gold-deep: #92400E;

    --v6-orange: #EA580C;
    --v6-orange-bright: #F97316;
    --v6-orange-soft: #FFEDD5;

    --v6-mint: #14B8A6;
    --v6-mint-soft: #CCFBF1;

    --v6-purple: #A855F7;
    --v6-purple-soft: #F3E8FF;

    --v6-rose: #F43F5E;
    --v6-rose-soft: #FFE4E6;

    --v6-cream: #FFFBF5;
    --v6-cream-2: #FFF7ED;
    --v6-paper: #FFFFFF;

    --v6-ink: #1C1917;
    --v6-ink-soft: #57534E;
    --v6-ink-mute: #A8A29E;

    --v6-line: #FED7AA;
    --v6-line-2: #FCE7C8;
    --v6-line-3: #F5F5F4;

    /* === OVERRIDE existing --jo-* tokens ke v6 === */
    --jo-primary: var(--v6-green);
    --jo-primary-bright: var(--v6-green-mid);
    --jo-primary-soft: var(--v6-green-soft);
    --jo-primary-soft-hover: #D1FAE5;
    --jo-primary-strong: var(--v6-green-deep);

    /* Surfaces — warm cream background instead of cold gray */
    --jo-bg: var(--v6-cream);
    --jo-surface: var(--v6-paper);
    --jo-surface-2: var(--v6-cream-2);
    --jo-surface-hover: #FFF7ED;
    --jo-border: var(--v6-line-3);
    --jo-border-strong: var(--v6-line-2);

    /* Text — warmer ink tones */
    --jo-text: var(--v6-ink);
    --jo-text-muted: var(--v6-ink-soft);
    --jo-text-subtle: var(--v6-ink-mute);
    --jo-text-on-primary: #FFFFFF;

    /* Status — v6 mapping */
    --jo-success: var(--v6-green-mid);
    --jo-warning: var(--v6-gold-bright);
    --jo-danger: var(--v6-rose);
    --jo-info: var(--v6-mint);

    /* Glass — warmer */
    --jo-glass-bg: rgba(255, 251, 245, 0.92);
    --jo-glass-border: rgba(28, 25, 23, 0.08);

    /* Bootstrap RGB override (untuk rgba() di Bootstrap utility) */
    --bs-primary: var(--v6-green);
    --bs-primary-rgb: 4, 120, 87;
    --bs-success-rgb: 16, 185, 129;
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger-rgb: 244, 63, 94;
    --bs-info-rgb: 20, 184, 166;
}

/* ============================================
   V6 PALETTE TOKENS — Dark Mode (subtle adjust)
   ============================================ */
[data-bs-theme="dark"] {
    --jo-primary: #10B981;
    --jo-primary-bright: #34D399;
    --jo-primary-soft: rgba(16, 185, 129, 0.14);
    --jo-primary-soft-hover: rgba(16, 185, 129, 0.22);
    --jo-primary-strong: #6EE7B7;

    /* Keep existing dark background but tint slightly green */
    --jo-bg: #0F1612;
    --jo-surface: #1A2420;
    --jo-surface-2: #233028;
    --jo-surface-hover: #2A3830;
    --jo-border: #2D3C34;
    --jo-border-strong: #405048;

    --jo-text: #E8EFE9;
    --jo-text-muted: #98A8A0;
    --jo-text-subtle: #6C807A;
    --jo-text-on-primary: #052E1F;

    --jo-success: #34D399;
    --jo-warning: #FBBF24;
    --jo-danger: #FB7185;
    --jo-info: #2DD4BF;

    --bs-primary: #10B981;
    --bs-primary-rgb: 16, 185, 129;
}

/* ============================================
   V6 UTILITY CLASSES — Mascot, gradient, pills
   Untuk halaman yang mau adopt v6 design eksplisit
   ============================================ */

/* Mascot float animation — universal */
@keyframes v6-float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes v6-float-2 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes v6-pulse-glow { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes v6-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
    70% { box-shadow: 0 0 0 12px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
@keyframes v6-wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(12deg); } 75% { transform: rotate(-10deg); } }
@keyframes v6-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.v6-float { animation: v6-float-soft 4s ease-in-out infinite; }
.v6-float-2 { animation: v6-float-2 5s ease-in-out infinite; }
.v6-pulse-ring { animation: v6-pulse-ring 2s infinite; }

/* Gradient backgrounds */
.v6-bg-green-gradient {
    background: linear-gradient(135deg, var(--v6-green-deep) 0%, var(--v6-green) 100%);
    color: white;
}
.v6-bg-hero-gradient {
    background: linear-gradient(135deg, var(--v6-green-deep) 0%, var(--v6-green) 50%, var(--v6-gold) 100%);
    color: white;
}
.v6-bg-cream { background: var(--v6-cream); }
.v6-bg-gold-soft { background: var(--v6-gold-soft); }
.v6-bg-orange-soft { background: var(--v6-orange-soft); }

/* Pills */
.v6-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 11px; border-radius: 99px;
    font-size: 10.5px; font-weight: 900;
    letter-spacing: 0.05em; text-transform: uppercase;
}
.v6-pill-green { background: var(--v6-green-soft); color: var(--v6-green); }
.v6-pill-gold { background: var(--v6-gold-soft); color: var(--v6-gold-deep); }
.v6-pill-orange { background: var(--v6-orange-soft); color: var(--v6-orange); }
.v6-pill-mint { background: var(--v6-mint-soft); color: var(--v6-mint); }
.v6-pill-purple { background: var(--v6-purple-soft); color: var(--v6-purple); }
.v6-pill-rose { background: var(--v6-rose-soft); color: var(--v6-rose); }

/* Mascot wrapper */
.v6-mascot {
    display: inline-block; position: relative;
    animation: v6-float-soft 4s ease-in-out infinite;
}
.v6-mascot img, .v6-mascot svg { width: 100%; height: 100%; display: block; }
.v6-mascot-sm { width: 48px; height: 48px; }
.v6-mascot-md { width: 88px; height: 88px; }
.v6-mascot-lg { width: 140px; height: 140px; }
.v6-mascot-xl { width: 220px; height: 220px; }

.v6-mascot-glow::before {
    content: ''; position: absolute; inset: -20px;
    background: radial-gradient(circle, rgba(245,158,11,0.25) 0%, transparent 60%);
    border-radius: 50%; z-index: -1;
    animation: v6-pulse-glow 3s ease-in-out infinite;
}
.v6-mascot-glow-green::before { background: radial-gradient(circle, rgba(16,185,129,0.25) 0%, transparent 60%); }
.v6-mascot-glow-purple::before { background: radial-gradient(circle, rgba(168,85,247,0.25) 0%, transparent 60%); }

/* Greeting card pattern (untuk dashboard) */
.v6-greeting-card {
    background: linear-gradient(135deg, var(--v6-green-deep) 0%, var(--v6-green) 100%);
    border-radius: 18px; padding: 22px 26px;
    display: flex; align-items: center; gap: 20px;
    color: white; position: relative; overflow: hidden;
}
.v6-greeting-card::after {
    content: ''; position: absolute; bottom: -80px; right: -50px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(251,191,36,0.18) 0%, transparent 65%);
    border-radius: 50%;
}

/* Section title with green-gold accent bar */
.v6-section-title {
    font-size: 16px; font-weight: 900; letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 12px;
}
.v6-section-title::before {
    content: ''; width: 24px; height: 3px;
    background: linear-gradient(90deg, var(--v6-green), var(--v6-gold));
    border-radius: 99px;
}

/* Primary v6 button (gradient + hover lift + shimmer) */
.v6-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; border-radius: 99px;
    background: linear-gradient(135deg, var(--v6-green), var(--v6-green-mid));
    color: white !important; border: none;
    font-weight: 900; font-size: 12.5px; cursor: pointer;
    box-shadow: 0 8px 18px rgba(4,120,87,0.3);
    transition: all .2s;
    text-decoration: none;
    position: relative; overflow: hidden;
}
.v6-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(4,120,87,0.45); color: white !important; }
.v6-btn:active { transform: translateY(0) scale(0.98); }

.v6-btn-gold {
    background: linear-gradient(135deg, var(--v6-gold), var(--v6-gold-bright));
    box-shadow: 0 8px 18px rgba(217,119,6,0.3);
}
.v6-btn-gold:hover { box-shadow: 0 12px 26px rgba(217,119,6,0.45); }

.v6-btn-orange {
    background: linear-gradient(135deg, var(--v6-orange), var(--v6-orange-bright));
    box-shadow: 0 8px 18px rgba(234,88,12,0.3);
}

.v6-btn-outline {
    background: white;
    color: var(--v6-green) !important;
    border: 1.5px solid var(--v6-green);
    box-shadow: none;
}
.v6-btn-outline:hover { background: var(--v6-green-soft); }

/* Card with warm cream border (v6 signature) */
.v6-card {
    background: var(--v6-paper);
    border: 1px solid var(--v6-line-3);
    border-radius: 14px;
    overflow: hidden;
}
.v6-card-warm {
    border-color: var(--v6-line-2);
}

/* ============================================
   COMPONENT TOUCH-UPS — fix kontras specific
   ============================================ */

/* Bootstrap btn-primary tetap konsisten v6 */
.btn-primary {
    background: linear-gradient(135deg, var(--v6-green), var(--v6-green-mid)) !important;
    border: none !important;
    color: white !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--v6-green-deep), var(--v6-green)) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(4,120,87,0.35);
}

/* Bootstrap btn-success ke green-mid (highlight) */
.btn-success {
    background: var(--v6-green-mid) !important;
    border-color: var(--v6-green-mid) !important;
    color: white !important;
}
.btn-success:hover, .btn-success:focus {
    background: var(--v6-green) !important;
    border-color: var(--v6-green) !important;
}

/* Bootstrap btn-warning ke gold */
.btn-warning {
    background: var(--v6-gold-bright) !important;
    border-color: var(--v6-gold-bright) !important;
    color: white !important;
}
.btn-warning:hover {
    background: var(--v6-gold) !important;
    border-color: var(--v6-gold) !important;
    color: white !important;
}

/* Badge palette */
.badge.bg-primary, .badge-primary { background: var(--v6-green) !important; color: white !important; }
.badge.bg-success, .badge-success { background: var(--v6-green-mid) !important; color: white !important; }
.badge.bg-warning, .badge-warning { background: var(--v6-gold-bright) !important; color: var(--v6-gold-deep) !important; }
.badge.bg-danger, .badge-danger { background: var(--v6-rose) !important; color: white !important; }
.badge.bg-info, .badge-info { background: var(--v6-mint) !important; color: white !important; }

/* Light variants (Metronic) */
.badge-light-primary { background: var(--v6-green-soft) !important; color: var(--v6-green) !important; }
.badge-light-success { background: var(--v6-green-soft) !important; color: var(--v6-green) !important; }
.badge-light-warning { background: var(--v6-gold-soft) !important; color: var(--v6-gold-deep) !important; }
.badge-light-danger { background: var(--v6-rose-soft) !important; color: var(--v6-rose) !important; }
.badge-light-info { background: var(--v6-mint-soft) !important; color: var(--v6-mint) !important; }

/* btn-light-* (Metronic) */
.btn-light-primary { background: var(--v6-green-soft) !important; color: var(--v6-green) !important; border-color: transparent !important; }
.btn-light-primary:hover { background: var(--v6-green) !important; color: white !important; }
.btn-light-success { background: var(--v6-green-soft) !important; color: var(--v6-green) !important; }
.btn-light-success:hover { background: var(--v6-green-mid) !important; color: white !important; }
.btn-light-warning { background: var(--v6-gold-soft) !important; color: var(--v6-gold-deep) !important; }
.btn-light-warning:hover { background: var(--v6-gold-bright) !important; color: white !important; }
.btn-light-danger { background: var(--v6-rose-soft) !important; color: var(--v6-rose) !important; }
.btn-light-danger:hover { background: var(--v6-rose) !important; color: white !important; }
.btn-light-info { background: var(--v6-mint-soft) !important; color: var(--v6-mint) !important; }

/* text-* color palette */
.text-primary { color: var(--v6-green) !important; }
.text-success { color: var(--v6-green-mid) !important; }
.text-warning { color: var(--v6-gold) !important; }
.text-danger { color: var(--v6-rose) !important; }
.text-info { color: var(--v6-mint) !important; }

/* bg-* palette */
.bg-primary { background-color: var(--v6-green) !important; }
.bg-success { background-color: var(--v6-green-mid) !important; }
.bg-warning { background-color: var(--v6-gold-bright) !important; }
.bg-danger { background-color: var(--v6-rose) !important; }
.bg-info { background-color: var(--v6-mint) !important; }
.bg-light-primary { background-color: var(--v6-green-soft) !important; }
.bg-light-success { background-color: var(--v6-green-soft) !important; }
.bg-light-warning { background-color: var(--v6-gold-soft) !important; }
.bg-light-danger { background-color: var(--v6-rose-soft) !important; }
.bg-light-info { background-color: var(--v6-mint-soft) !important; }

/* Link color in body */
a { color: var(--v6-green); }
a:hover { color: var(--v6-green-deep); }

/* Form focus ring */
.form-control:focus, .form-select:focus {
    border-color: var(--v6-green-mid) !important;
    box-shadow: 0 0 0 0.2rem rgba(16,185,129,0.15) !important;
}

/* Checkbox/radio accent */
.form-check-input:checked {
    background-color: var(--v6-green) !important;
    border-color: var(--v6-green) !important;
}

/* Pagination active */
.page-item.active .page-link {
    background: var(--v6-green) !important;
    border-color: var(--v6-green) !important;
}
.page-link { color: var(--v6-green); }
.page-link:hover { color: var(--v6-green-deep); background: var(--v6-green-soft); }

/* Table hover - subtle cream */
.table-hover tbody tr:hover { background-color: var(--v6-cream-2); }

/* Alert palette */
.alert-primary { background: var(--v6-green-soft); border-color: var(--v6-green-mid); color: var(--v6-green-deep); }
.alert-success { background: var(--v6-green-soft); border-color: var(--v6-green-mid); color: var(--v6-green-deep); }
.alert-warning { background: var(--v6-gold-soft); border-color: var(--v6-gold-bright); color: var(--v6-gold-deep); }
.alert-danger { background: var(--v6-rose-soft); border-color: var(--v6-rose); color: #881337; }
.alert-info { background: var(--v6-mint-soft); border-color: var(--v6-mint); color: #134E4A; }

/* Modal header bottom border = warm */
.modal-content { border: 1px solid var(--v6-line-2); border-radius: 14px; }

/* Dropdown menu border softening */
.dropdown-menu { border: 1px solid var(--v6-line-2); border-radius: 12px; box-shadow: 0 12px 32px rgba(28,25,23,0.10); }
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--v6-cream-2);
    color: var(--v6-green-deep);
}
.dropdown-item.active, .dropdown-item:active {
    background: var(--v6-green) !important;
    color: white !important;
}

/* ============================================
   SIDEBAR ACCENT — v6 touch
   (sidebar struktur dijaga, hanya warna swap)
   ============================================ */

/* ─── jo-sidebar — NAVY brand (#1E40AF + gold), scoped ke sidebar saja.
       Konten halaman tetap pakai token v6; navy sidebar + konten terang =
       pola brand (Livin'/Mandiri). ─── */

/* Active LEAF link (di dalam dropdown) + direct active = navy solid */
.jo-sidebar .menu-item .menu-link.active,
.jo-sidebar .menu-link.active,
.jo-sidebar a.active {
    background: linear-gradient(135deg, #1E40AF 0%, #14306E 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -4px rgba(30,64,175,0.4);
}
.jo-sidebar .menu-link.active .menu-icon i,
.jo-sidebar .menu-link.active .menu-icon svg,
.jo-sidebar .menu-link.active .jo-menu-icon {
    color: #fff !important;
}

/* TOP-LEVEL pills: NETRAL by default. Sebelumnya tiap grup di-hardcode
   `here show` → semua tampil 'aktif' hijau (hilang hierarki). Paksa netral
   supaya cuma halaman aktif yang menonjol. */
.jo-sidebar-body > .menu > .menu-item > .menu-link,
.jo-sidebar-body > .menu > .menu-item.here > .menu-link,
.jo-sidebar-body > .menu > .menu-item.show > .menu-link {
    background: transparent !important;
    color: var(--jo-text) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
/* Icon top-level SERAGAM (slate) — bukan rainbow */
.jo-sidebar-body > .menu > .menu-item > .menu-link .jo-menu-icon,
.jo-sidebar-body > .menu > .menu-item.here > .menu-link .jo-menu-icon,
.jo-sidebar-body > .menu > .menu-item.show > .menu-link .jo-menu-icon {
    color: #64748B !important;
}
/* Hover = tint navy lembut */
.jo-sidebar-body > .menu > .menu-item > .menu-link:hover {
    background: rgba(30,64,175,0.06) !important;
}
.jo-sidebar-body > .menu > .menu-item > .menu-link:hover .jo-menu-icon {
    color: #1E40AF !important;
}

/* HANYA grup yang memuat halaman aktif yang ter-highlight (navy + aksen kiri) */
.jo-sidebar-body > .menu > .menu-item:has(.menu-link.active) > .menu-link,
.jo-sidebar-body > .menu > .menu-item > .menu-link.active {
    background: rgba(30,64,175,0.10) !important;
    color: #1E40AF !important;
    font-weight: 700 !important;
    box-shadow: inset 3px 0 0 #1E40AF !important;
}
.jo-sidebar-body > .menu > .menu-item:has(.menu-link.active) > .menu-link .jo-menu-icon,
.jo-sidebar-body > .menu > .menu-item > .menu-link.active .jo-menu-icon {
    color: #1E40AF !important;
}

/* Context indicator — navy tint (was green) */
.jo-sidebar-context {
    background: #EEF2FB;
    border: 1px solid transparent;
    transition: all .15s;
}
.jo-sidebar-context:hover {
    background: #fff;
    border-color: rgba(30,64,175,0.25);
}
.jo-ctx-icon {
    background: #1E40AF !important;
    color: #fff;
}

/* Status dot online tetap hijau (konvensi online) */
.jo-sidebar-status span:first-child {
    background: #10B981 !important;
}

/* ============================================
   FLOATING ACTIONS HEADER — v6 accent
   ============================================ */

/* Bell badge — v6 orange */
.jo-float-actions .badge-count {
    background: var(--v6-orange-bright) !important;
    color: white !important;
    border: 2px solid var(--v6-paper);
}

/* Floating action trigger button — v6 deep green */
.jo-float-actions .jo-float-btn {
    transition: all .15s;
}
.jo-float-actions .jo-float-btn:hover {
    background: var(--v6-green-soft) !important;
    color: var(--v6-green-deep) !important;
}

/* Alerts panel header — warm */
.jo-alerts-panel .jo-alerts-header {
    background: var(--v6-cream-2);
    border-bottom: 1px solid var(--v6-line-3);
}
.jo-alerts-title { color: var(--v6-green-deep) !important; font-weight: 900; }

/* Unread item indicator */
.jo-alerts-item.is-unread::before {
    background: var(--v6-gold-bright) !important;
}

/* ============================================
   SIDEBAR PENDING PILL — compact clickable badge (angka saja)
   Pakai di menu sidebar untuk pending counter (Lapor Alasan, dll).
   Sengaja kecil + bulat supaya kalau ada multiple notif tidak numpuk.
   Tooltip hover untuk konteks.
   ============================================ */
.jo-pending-pill {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--v6-orange-bright), var(--v6-orange));
    color: white !important; text-decoration: none;
    min-width: 20px; height: 20px;
    padding: 0 6px; border-radius: 99px;
    font-size: 10.5px; font-weight: 900;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(234, 88, 12, 0.4);
    transition: all .15s;
    margin-left: auto;
    animation: v6-pending-pulse 2.5s ease-in-out infinite;
}
.jo-pending-pill:hover {
    transform: scale(1.15);
    box-shadow: 0 5px 12px rgba(234, 88, 12, 0.6);
    color: white !important;
}

@keyframes v6-pending-pulse {
    0%, 100% { box-shadow: 0 3px 8px rgba(234, 88, 12, 0.4); }
    50% { box-shadow: 0 3px 12px rgba(234, 88, 12, 0.7), 0 0 0 4px rgba(234, 88, 12, 0.15); }
}

/* ============================================
   TOOLBAR — restyle page-heading
   ============================================ */
.page-heading {
    color: var(--v6-green-deep);
    font-weight: 900;
    letter-spacing: -0.01em;
}

/* ============================================
   SCROLLBAR — green-tinted
   ============================================ */
*::-webkit-scrollbar-thumb {
    background: var(--v6-line-2) !important;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--v6-green-mid) !important;
}

/* ============================================
   LOADING UI — v6 colored
   ============================================ */
.spinner-border.text-primary { color: var(--v6-green) !important; border-right-color: transparent; }
.progress-bar { background: linear-gradient(135deg, var(--v6-green), var(--v6-green-mid)); }

/* ============================================
   DARK MODE: SIDEBAR + FLOAT
   ============================================ */
[data-bs-theme="dark"] .jo-sidebar-context {
    background: rgba(16,185,129,0.10);
}
[data-bs-theme="dark"] .jo-sidebar-context:hover {
    background: rgba(16,185,129,0.18);
}
[data-bs-theme="dark"] .jo-alerts-panel .jo-alerts-header {
    background: rgba(16,185,129,0.06);
}