/* ======================================================================================
   APOLLO KATEGORI KARTU & DASHBOARD (apollo-cards.css)
   Description: Landing Page Canvas, Hero, Bento Grid, Tech Marquee, Modules, KPI Cards, Portal & Footer
   ====================================================================================== */

/* ==========================================================================
   1. GLOBAL CANVAS & AURORA GLOW
   ========================================================================== */
.apollo-landing-canvas {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 32px 60px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
}

html.dark-mode .apollo-landing-canvas,
body.dark-mode .apollo-landing-canvas,
.dark-mode .apollo-landing-canvas {
    background-color: #0b1329 !important;
}

@media (max-width: 768px) {
    .apollo-landing-canvas {
        padding: 16px 14px 40px !important;
    }
}

/* Ambient Floating Aurora Mesh */
.apollo-aurora-orb-1 {
    position: absolute !important;
    width: 550px !important;
    height: 550px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, rgba(59, 130, 246, 0) 70%) !important;
    top: -100px !important;
    left: -100px !important;
    filter: blur(60px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: apolloOrbFloat 14s ease-in-out infinite alternate !important;
}

.apollo-aurora-orb-2 {
    position: absolute !important;
    width: 500px !important;
    height: 500px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.16) 0%, rgba(124, 58, 237, 0) 70%) !important;
    top: 20% !important;
    right: -100px !important;
    filter: blur(70px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: apolloOrbFloat2 18s ease-in-out infinite alternate !important;
}

@keyframes apolloOrbFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(80px, 60px) scale(1.15); }
}

@keyframes apolloOrbFloat2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-70px, -50px) scale(1.1); }
}

/* ==========================================================================
   2. HERO SECTION: IMMERSIVE FLUID CONTAINER
   ========================================================================== */
.apollo-fluid-hero {
    position: relative !important;
    background: linear-gradient(135deg, #0b1329 0%, #0f172a 45%, #172554 100%) !important;
    border-radius: 28px !important;
    padding: 48px 42px !important;
    color: #ffffff !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    margin-bottom: 32px !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .apollo-fluid-hero {
        padding: 32px 20px !important;
        border-radius: 20px !important;
    }
}

/* Hero Badge */
.apollo-pill-tag {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 18px !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px) !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.apollo-pulse-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7) !important;
    animation: apolloPulse 2s infinite !important;
    display: inline-block !important;
    margin-right: 8px !important;
}

@keyframes apolloPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.apollo-fluid-title {
    font-size: 2.55rem !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.025em !important;
    color: #ffffff !important;
    margin-bottom: 18px !important;
}

@media (max-width: 768px) {
    .apollo-fluid-title {
        font-size: 1.85rem !important;
    }
}

.apollo-gradient-typewriter {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #38bdf8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    border-right: 3px solid #60a5fa !important;
    padding-right: 4px !important;
    animation: apolloCaretBlink 0.8s infinite !important;
    display: inline-block !important;
}

@keyframes apolloCaretBlink {
    0%, 100% { border-color: transparent; }
    50% { border-color: #60a5fa; }
}

.apollo-fluid-desc {
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    color: #94a3b8 !important;
    margin-bottom: 28px !important;
    max-width: 540px !important;
}

/* Spotlight Quick Search Bar */
.apollo-hero-spotlight-box {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    margin-bottom: 28px !important;
    max-width: 480px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(8px) !important;
}
.apollo-hero-spotlight-box:hover {
    background: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   3. HERO DEMO WINDOW (INTERACTIVE TABBED SHOWCASE)
   ========================================================================== */
.apollo-demo-window {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.apollo-demo-tabs {
    display: flex !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 14px !important;
    margin-bottom: 18px !important;
    overflow-x: auto !important;
}

.apollo-demo-tab-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #94a3b8 !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}
.apollo-demo-tab-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.apollo-demo-tab-btn.active {
    color: #ffffff !important;
    background: rgba(37, 99, 235, 0.35) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

.apollo-demo-pane {
    display: none !important;
}
.apollo-demo-pane.active {
    display: block !important;
    animation: apolloFadeIn 0.3s ease !important;
}

@keyframes apolloFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   4. LIVE STATS & ENTERPRISE METRICS RIBBON (4 FLOATING PODS)
   ========================================================================== */
.apollo-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 36px !important;
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 992px) {
    .apollo-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 576px) {
    .apollo-stats-grid {
        grid-template-columns: 1fr !important;
    }
}

.apollo-stat-pod {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 20px 22px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.apollo-stat-pod:hover {
    transform: translateY(-4px) !important;
    border-color: #2563eb !important;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.1) !important;
}

.apollo-stat-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    flex-shrink: 0 !important;
}

html.dark-mode .apollo-stat-pod,
body.dark-mode .apollo-stat-pod,
.dark-mode .apollo-stat-pod {
    background: #121927 !important;
    border-color: #1f2a3e !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
html.dark-mode .apollo-stat-pod:hover,
body.dark-mode .apollo-stat-pod:hover,
.dark-mode .apollo-stat-pod:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}
html.dark-mode .apollo-stat-pod h4,
body.dark-mode .apollo-stat-pod h4,
.dark-mode .apollo-stat-pod h4 {
    color: #f1f5f9 !important;
}
html.dark-mode .apollo-stat-pod small,
body.dark-mode .apollo-stat-pod small,
.dark-mode .apollo-stat-pod small {
    color: #94a3b8 !important;
}

/* ==========================================================================
   5. ASYMMETRICAL MODERN BENTO GRID
   ========================================================================== */
.apollo-bento-grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
    position: relative !important;
    z-index: 1 !important;
}

.apollo-bento-span-7 { grid-column: span 7 !important; }
.apollo-bento-span-5 { grid-column: span 5 !important; }
.apollo-bento-span-4 { grid-column: span 4 !important; }
.apollo-bento-span-8 { grid-column: span 8 !important; }

@media (max-width: 992px) {
    .apollo-bento-span-7,
    .apollo-bento-span-5,
    .apollo-bento-span-4,
    .apollo-bento-span-8 {
        grid-column: span 12 !important;
    }
}

.apollo-bento-box-modern {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 22px !important;
    padding: 30px 28px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s ease, box-shadow 0.28s ease !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}
.apollo-bento-box-modern:hover {
    transform: translateY(-5px) !important;
    border-color: #2563eb !important;
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.1) !important;
}

.apollo-bento-glow-spot {
    position: absolute !important;
    width: 200px !important;
    height: 200px !important;
    border-radius: 50% !important;
    top: -50px !important;
    right: -50px !important;
    opacity: 0.12 !important;
    pointer-events: none !important;
    filter: blur(40px) !important;
}

html.dark-mode .apollo-bento-box-modern,
body.dark-mode .apollo-bento-box-modern,
.dark-mode .apollo-bento-box-modern {
    background: #121927 !important;
    border-color: #1f2a3e !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
html.dark-mode .apollo-bento-box-modern:hover,
body.dark-mode .apollo-bento-box-modern:hover,
.dark-mode .apollo-bento-box-modern:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
}
html.dark-mode .apollo-bento-box-modern h4,
body.dark-mode .apollo-bento-box-modern h4 {
    color: #f1f5f9 !important;
}
html.dark-mode .apollo-bento-box-modern p,
body.dark-mode .apollo-bento-box-modern p {
    color: #94a3b8 !important;
}
html.dark-mode .apollo-bento-box-modern small,
body.dark-mode .apollo-bento-box-modern small {
    color: #94a3b8 !important;
}
html.dark-mode .apollo-bento-box-modern span,
body.dark-mode .apollo-bento-box-modern span {
    color: #cbd5e1 !important;
}
html.dark-mode .apollo-bento-box-modern .border-top,
body.dark-mode .apollo-bento-box-modern .border-top {
    border-color: #1e293b !important;
}

/* ==========================================================================
   6. TECH SLIDER: SILKY SMOOTH RIGHT-TO-LEFT MARQUEE
   ========================================================================== */
.apollo-tech-section-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 22px !important;
    padding: 26px 28px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
    margin-bottom: 40px !important;
    position: relative !important;
    z-index: 1 !important;
}

html.dark-mode .apollo-tech-section-card,
body.dark-mode .apollo-tech-section-card,
.dark-mode .apollo-tech-section-card {
    background: #121927 !important;
    border-color: #1f2a3e !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
html.dark-mode .apollo-tech-section-card h4,
body.dark-mode .apollo-tech-section-card h4 {
    color: #f1f5f9 !important;
}

.apollo-marquee-outer {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 8px 0 !important;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important;
}

.apollo-marquee-slider {
    display: flex !important;
    width: max-content !important;
    gap: 16px !important;
    align-items: center !important;
    will-change: transform !important;
    user-select: none !important;
}

.apollo-tech-pill {
    flex: 0 0 240px !important;
    width: 240px !important;
    height: 86px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 14px 18px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
    user-select: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}
.apollo-tech-pill:hover {
    transform: translateY(-4px) !important;
    background: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.12) !important;
}

.apollo-tech-pill .pill-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
}
.apollo-tech-pill .pill-icon-wrap i {
    font-size: 1.35rem !important;
    line-height: 1 !important;
}

.apollo-tech-pill .pill-text-wrap {
    overflow: hidden !important;
    text-align: left !important;
    flex: 1 !important;
}

.apollo-tech-pill .tech-name {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    display: block !important;
    margin-bottom: 2px !important;
}
.apollo-tech-pill .tech-desc {
    font-size: 0.72rem !important;
    color: #64748b !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: block !important;
}

html.dark-mode .apollo-tech-pill,
body.dark-mode .apollo-tech-pill,
.dark-mode .apollo-tech-pill {
    background: #151d2d !important;
    border-color: #232f45 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}
html.dark-mode .apollo-tech-pill:hover,
body.dark-mode .apollo-tech-pill:hover,
.dark-mode .apollo-tech-pill:hover {
    background: #182337 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
}
html.dark-mode .apollo-tech-pill .tech-name,
body.dark-mode .apollo-tech-pill .tech-name,
.dark-mode .apollo-tech-pill .tech-name {
    color: #f1f5f9 !important;
}
html.dark-mode .apollo-tech-pill .tech-desc,
body.dark-mode .apollo-tech-pill .tech-desc,
.dark-mode .apollo-tech-pill .tech-desc {
    color: #8899ac !important;
}

/* ==========================================================================
   7. 8-MODULE LAUNCHPAD CARDS (3D SQUIRCLE WITH FLARE HOVER)
   ========================================================================== */
.apollo-module-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
    margin-bottom: 40px !important;
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 992px) {
    .apollo-module-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 576px) {
    .apollo-module-grid {
        grid-template-columns: 1fr !important;
    }
}

.apollo-app-launch-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 22px 20px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
}
.apollo-app-launch-card:hover {
    transform: translateY(-5px) scale(1.01) !important;
    border-color: #2563eb !important;
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.12) !important;
    text-decoration: none !important;
    color: inherit !important;
}

.apollo-app-squircle-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.25s ease !important;
}
.apollo-app-launch-card:hover .apollo-app-squircle-icon {
    transform: scale(1.08) rotate(3deg) !important;
}

html.dark-mode .apollo-app-launch-card,
body.dark-mode .apollo-app-launch-card,
.dark-mode .apollo-app-launch-card {
    background: #121927 !important;
    border-color: #1f2a3e !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
html.dark-mode .apollo-app-launch-card:hover,
body.dark-mode .apollo-app-launch-card:hover,
.dark-mode .apollo-app-launch-card:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   8. MODERN CTA GLASS BANNER & PORTAL DASHBOARD CARDS
   ========================================================================== */
.apollo-fluid-cta-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #2563eb 100%) !important;
    border-radius: 24px !important;
    color: #ffffff !important;
    padding: 42px 38px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(37, 99, 235, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    z-index: 1 !important;
}

/* Portal Separated 2-Card Layout */
.portal-cards-container {
    width: 100% !important;
    padding: 20px 24px 60px !important;
    box-sizing: border-box !important;
}

.portal-main-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 24px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.portal-sidebar-card {
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 16px 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    align-self: flex-start !important;
    box-sizing: border-box !important;
}

/* Sidebar Top Header Box Pill (as in reference image) */
.portal-sidebar-header-box {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.portal-sidebar-header-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: 0.2px !important;
}
.portal-sidebar-collapse-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    cursor: pointer !important;
    font-size: 0.78rem !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
}
.portal-sidebar-collapse-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Deep Navy User ID Card (as in reference image) */
.portal-user-box {
    background: #1e2952 !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
    color: #ffffff !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
    border: none !important;
}
.portal-user-box.rounded-all {
    border-radius: 10px !important;
    margin-bottom: 16px !important;
}
.portal-user-box .portal-user-npwp {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
    line-height: 1.25 !important;
    margin-bottom: 3px !important;
    word-break: break-all !important;
}
.portal-user-box .portal-user-name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #cbd5e1 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}
.portal-user-box .portal-user-mail {
    font-size: 0.74rem !important;
    color: #fbbf24 !important;
    margin-top: 3px !important;
}

/* Sidebar Menu Navigation List */
.portal-menu-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    width: 100% !important;
}

.portal-menu-group-title {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #94a3b8 !important;
    padding: 8px 8px 4px !important;
    margin-top: 6px !important;
    display: block !important;
}

.portal-menu-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 8px 12px 8px 14px !important;
    border-radius: 8px !important;
    color: #475569 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-bottom: 3px !important;
    border: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    gap: 10px !important;
    overflow: hidden !important;
}
.portal-menu-item:hover {
    background: #f1f5f9 !important;
    color: #1e3a8a !important;
    text-decoration: none !important;
    padding-left: 16px !important;
}
.portal-menu-item.active {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.08) !important;
}

/* Left Indicator Badge for Active & Hover State */
.portal-menu-item::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) scaleY(0) !important;
    width: 4px !important;
    height: 60% !important;
    background: #2563eb !important;
    border-radius: 0 4px 4px 0 !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.portal-menu-item.active::before {
    transform: translateY(-50%) scaleY(1) !important;
}
.portal-menu-item:hover::before {
    transform: translateY(-50%) scaleY(0.7) !important;
}

.portal-menu-item i {
    width: 20px !important;
    font-size: 0.95rem !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transition: transform 0.15s ease !important;
}
.portal-menu-item.active i {
    color: #2563eb !important;
    transform: scale(1.08) !important;
}
.portal-menu-item span,
.portal-menu-item .portal-menu-text {
    flex: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.portal-sidebar-footer {
    padding-top: 14px !important;
    margin-top: 16px !important;
    border-top: 1px solid #f1f5f9 !important;
}

/* Yellow / Amber Toggle Switch */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #eab308 !important;
    border-color: #ca8a04 !important;
}

.portal-hero-banner {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%) !important;
    border-radius: 16px !important;
    padding: 28px 32px !important;
    color: #ffffff !important;
    margin-bottom: 24px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.25) !important;
}

.portal-hero-banner::after {
    content: '' !important;
    position: absolute !important;
    right: -40px !important;
    bottom: -40px !important;
    width: 220px !important;
    height: 220px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.home-stat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    height: 100% !important;
}

.home-stat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.08) !important;
    border-color: #cbd5e1 !important;
}

.home-stat-icon-wrapper {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    flex-shrink: 0 !important;
}

.app-launcher-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 22px 16px 20px !important;
    text-align: center !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    position: relative !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.app-launcher-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.1) !important;
    border-color: #94a3b8 !important;
    text-decoration: none !important;
}

.app-launcher-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-launcher-card:hover .app-launcher-icon {
    transform: scale(1.1) !important;
}

.app-launcher-title {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
}

.app-launcher-desc {
    font-size: 0.76rem !important;
    color: #64748b !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

/* System Overview Card */
.home-system-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 22px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 20px !important;
    height: 100% !important;
}

.home-system-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.home-system-card-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Floating Vertical Collapsed Tab (Golden Amber as in Reference Image 2) */
.portal-collapsed-tab {
    position: fixed !important;
    left: 0 !important;
    top: 160px !important;
    background: #fef08a !important;
    background: linear-gradient(135deg, #fef08a 0%, #fde047 100%) !important;
    color: #713f12 !important;
    border: 1px solid #facc15 !important;
    border-left: none !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 12px 6px 10px !important;
    box-shadow: 2px 4px 14px rgba(234, 179, 8, 0.25) !important;
    cursor: pointer !important;
    z-index: 1040 !important;
    display: none;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}
.portal-collapsed-tab:hover {
    background: #fde047 !important;
    padding-left: 8px !important;
    box-shadow: 2px 6px 18px rgba(234, 179, 8, 0.4) !important;
}
.portal-collapsed-tab .portal-tab-badge {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 6px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.portal-collapsed-tab .portal-tab-text {
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: #713f12 !important;
}
.portal-collapsed-tab .portal-tab-chevron {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: #713f12 !important;
}

/* Dark Mode Overrides for Portal Components */
html.dark-mode .portal-main-card,
body.dark-mode .portal-main-card,
.dark-mode .portal-main-card {
    background: #121927 !important;
    border-color: #1f2a3e !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .portal-sidebar-card,
body.dark-mode .portal-sidebar-card,
.dark-mode .portal-sidebar-card {
    background: #121927 !important;
    border-color: #1f2a3e !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .portal-sidebar-header-box,
body.dark-mode .portal-sidebar-header-box,
.dark-mode .portal-sidebar-header-box {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .portal-sidebar-header-title,
body.dark-mode .portal-sidebar-header-title,
.dark-mode .portal-sidebar-header-title {
    color: #f8fafc !important;
}

html.dark-mode .portal-sidebar-collapse-btn,
body.dark-mode .portal-sidebar-collapse-btn,
.dark-mode .portal-sidebar-collapse-btn {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
html.dark-mode .portal-sidebar-collapse-btn:hover,
body.dark-mode .portal-sidebar-collapse-btn:hover,
.dark-mode .portal-sidebar-collapse-btn:hover {
    background: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .portal-menu-item,
body.dark-mode .portal-menu-item,
.dark-mode .portal-menu-item {
    color: #cbd5e1 !important;
}
html.dark-mode .portal-menu-item:hover,
body.dark-mode .portal-menu-item:hover,
.dark-mode .portal-menu-item:hover {
    background: #1e293b !important;
    color: #818cf8 !important;
}
html.dark-mode .portal-menu-item.active,
body.dark-mode .portal-menu-item.active,
.dark-mode .portal-menu-item.active {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #818cf8 !important;
}

html.dark-mode .home-stat-card,
body.dark-mode .home-stat-card,
.dark-mode .home-stat-card {
    background: #121927 !important;
    border-color: #1f2a3e !important;
}

html.dark-mode .app-launcher-card,
body.dark-mode .app-launcher-card,
.dark-mode .app-launcher-card {
    background: #121927 !important;
    border-color: #1f2a3e !important;
}

html.dark-mode .portal-hero-banner,
body.dark-mode .portal-hero-banner,
.dark-mode .portal-hero-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%) !important;
    border: 1px solid #1e293b !important;
}

html.dark-mode .app-launcher-title,
body.dark-mode .app-launcher-title,
.dark-mode .app-launcher-title,
html.dark-mode .home-system-card-title,
body.dark-mode .home-system-card-title,
.dark-mode .home-system-card-title {
    color: #f1f5f9 !important;
}

html.dark-mode .app-launcher-desc,
body.dark-mode .app-launcher-desc,
.dark-mode .app-launcher-desc {
    color: #94a3b8 !important;
}

html.dark-mode .home-system-card,
body.dark-mode .home-system-card,
.dark-mode .home-system-card {
    background: #121927 !important;
    border-color: #1f2a3e !important;
}

html.dark-mode .home-system-card-header,
body.dark-mode .home-system-card-header,
.dark-mode .home-system-card-header {
    border-bottom-color: #1f2a3e !important;
}

/* ==========================================================================
   8B. APOLLO ENTERPRISE 2-PANE WEBMAIL SPLIT VIEW & MESSAGE LIST
   (Centralized in skins/apollo/assets/styles/apollo-mail.css)
   ========================================================================== */

/* Sidebar Menu Dark Mode */
html.dark-mode .portal-menu-group-title,
body.dark-mode .portal-menu-group-title,
.dark-mode .portal-menu-group-title {
    color: #64748b !important;
}

html.dark-mode .portal-menu-item,
body.dark-mode .portal-menu-item,
.dark-mode .portal-menu-item {
    color: #cbd5e1 !important;
}
html.dark-mode .portal-menu-item:hover,
body.dark-mode .portal-menu-item:hover,
.dark-mode .portal-menu-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}
html.dark-mode .portal-menu-item.active,
body.dark-mode .portal-menu-item.active,
.dark-mode .portal-menu-item.active {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.22), rgba(59, 130, 246, 0.06)) !important;
    color: #60a5fa !important;
    border-left: 3px solid #3b82f6 !important;
}
html.dark-mode .portal-menu-item.active i,
body.dark-mode .portal-menu-item.active i,
.dark-mode .portal-menu-item.active i {
    color: #60a5fa !important;
}

html.dark-mode .portal-sidebar-footer,
body.dark-mode .portal-sidebar-footer,
.dark-mode .portal-sidebar-footer {
    border-top-color: #1f2a3e !important;
}

/* Hide overlapping raw thead in card-style messagelist */
.messagelist > thead,
#messagelist > thead,
table.messagelist > thead {
    display: none !important;
}

.messagelist,
#messagelist {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.messagelist tbody tr,
#messagelist tbody tr {
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.messagelist tbody tr td,
#messagelist tbody tr td {
    padding: 10px 12px !important;
    border-top: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

html.dark-mode .messagelist tbody tr td,
html.dark-mode #messagelist tbody tr td,
body.dark-mode .messagelist tbody tr td,
body.dark-mode #messagelist tbody tr td {
    border-bottom-color: #1f2a3e !important;
    color: #cbd5e1 !important;
}

html.dark-mode .table-hover tbody tr:hover,
body.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

/* ==========================================================================
   9. FOOTER STYLING
   ========================================================================== */
.apollo-landing-footer,
.apollo-app-footer {
    width: 100% !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 40px 32px 24px !important;
    box-sizing: border-box !important;
    margin-top: auto !important;
    color: #475569 !important;
    position: relative !important;
    z-index: 10 !important;
    clear: both !important;
}

.footer-logo-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #1a237e !important;
    letter-spacing: 0.5px !important;
}

.footer-section-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 14px !important;
}

.footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.82rem !important;
}
.footer-links li {
    margin-bottom: 8px !important;
}
.footer-links a {
    color: #64748b !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
.footer-links a:hover {
    color: #1a237e !important;
    text-decoration: none !important;
}

.social-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 0.85rem !important;
    margin-right: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.social-icon-btn:hover {
    background: #1a237e !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

.footer-divider {
    border: none !important;
    border-top: 1px solid #e2e8f0 !important;
    margin: 24px 0 16px !important;
}

.footer-bottom-text {
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
}

html.dark-mode .apollo-landing-footer,
html.dark-mode .apollo-app-footer,
body.dark-mode .apollo-landing-footer,
body.dark-mode .apollo-app-footer,
.dark-mode .apollo-landing-footer,
.dark-mode .apollo-app-footer {
    background: #0b1120 !important;
    border-top-color: #1e293b !important;
    color: #94a3b8 !important;
}
html.dark-mode .footer-logo-title,
body.dark-mode .footer-logo-title,
.dark-mode .footer-logo-title {
    color: #f8fafc !important;
}
html.dark-mode .footer-section-title,
body.dark-mode .footer-section-title,
.dark-mode .footer-section-title {
    color: #f8fafc !important;
}
html.dark-mode .footer-links a,
body.dark-mode .footer-links a,
.dark-mode .footer-links a {
    color: #94a3b8 !important;
}
html.dark-mode .footer-links a:hover,
body.dark-mode .footer-links a:hover,
.dark-mode .footer-links a:hover {
    color: #60a5fa !important;
}
html.dark-mode .social-icon-btn,
body.dark-mode .social-icon-btn,
.dark-mode .social-icon-btn {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}
html.dark-mode .social-icon-btn:hover,
body.dark-mode .social-icon-btn:hover,
.dark-mode .social-icon-btn:hover {
    background: #3b82f6 !important;
    color: #ffffff !important;
}
html.dark-mode .footer-divider,
body.dark-mode .footer-divider,
.dark-mode .footer-divider {
    border-top-color: #1e293b !important;
}
html.dark-mode .footer-bottom-text,
body.dark-mode .footer-bottom-text,
.dark-mode .footer-bottom-text {
    color: #64748b !important;
}

/* =====================================================================
   10. DARK MODE GLOBAL TEXT & BADGE COMPATIBILITY
   ===================================================================== */
html.dark-mode .text-dark,
body.dark-mode .text-dark,
.dark-mode .text-dark {
    color: #f1f5f9 !important;
}
html.dark-mode .text-muted,
body.dark-mode .text-muted,
.dark-mode .text-muted {
    color: #94a3b8 !important;
}

/* =====================================================================
   11. KPI SUMMARY CARDS & FILTER TOOLBAR
   ===================================================================== */
.kpi-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    min-height: 82px !important;
}

.kpi-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

.kpi-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

.kpi-blue   { background: #eff6ff !important; color: #2563eb !important; }
.kpi-amber  { background: #fffbeb !important; color: #d97706 !important; }
.kpi-green  { background: #f0fdf4 !important; color: #16a34a !important; }
.kpi-red    { background: #fef2f2 !important; color: #dc2626 !important; }
.kpi-purple { background: #f5f3ff !important; color: #7c3aed !important; }
.kpi-cyan   { background: #ecfeff !important; color: #0891b2 !important; }
.kpi-emerald{ background: #ecfdf5 !important; color: #059669 !important; }
.kpi-violet { background: #f5f3ff !important; color: #8b5cf6 !important; }

/* CRM & POS & Project Specialized Stat Cards */
.crm-kpi-card,
.pos-stat-card,
.project-kpi-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    min-height: 82px !important;
}

.crm-kpi-card:hover,
.pos-stat-card:hover,
.project-kpi-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

.crm-kpi-icon,
.pos-icon-box,
.project-kpi-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

.project-kpi-val {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #1e293b !important;
}

.project-kpi-lbl {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 2px !important;
}

/* Filter Toolbar */
.filter-toolbar {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin-bottom: 18px !important;
}

.filter-input {
    height: 36px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 0.875rem !important;
}

/* Dark Mode Overrides for KPI */
html.dark-mode .kpi-card,
body.dark-mode .kpi-card,
.dark-mode .kpi-card,
html.dark-mode .crm-kpi-card,
body.dark-mode .crm-kpi-card,
.dark-mode .crm-kpi-card,
html.dark-mode .pos-stat-card,
body.dark-mode .pos-stat-card,
.dark-mode .pos-stat-card,
html.dark-mode .project-kpi-card,
body.dark-mode .project-kpi-card,
.dark-mode .project-kpi-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode .kpi-card .text-dark,
body.dark-mode .kpi-card .text-dark,
.dark-mode .kpi-card .text-dark,
html.dark-mode .kpi-card h4,
body.dark-mode .kpi-card h4,
.dark-mode .kpi-card h4,
html.dark-mode .crm-kpi-card h5,
body.dark-mode .crm-kpi-card h5,
.dark-mode .crm-kpi-card h5,
html.dark-mode .pos-stat-card h5,
body.dark-mode .pos-stat-card h5,
.dark-mode .pos-stat-card h5,
html.dark-mode .project-kpi-val,
body.dark-mode .project-kpi-val,
.dark-mode .project-kpi-val {
    color: #f1f5f9 !important;
}

html.dark-mode .kpi-blue   { background: rgba(37, 99, 235, 0.2) !important; color: #60a5fa !important; }
html.dark-mode .kpi-amber  { background: rgba(217, 119, 6, 0.2) !important; color: #fbbf24 !important; }
html.dark-mode .kpi-green  { background: rgba(22, 163, 74, 0.2) !important; color: #4ade80 !important; }
html.dark-mode .kpi-red    { background: rgba(220, 38, 38, 0.2) !important; color: #f87171 !important; }
html.dark-mode .kpi-purple { background: rgba(124, 58, 237, 0.2) !important; color: #c084fc !important; }
html.dark-mode .kpi-cyan   { background: rgba(8, 145, 178, 0.2) !important; color: #38bdf8 !important; }
html.dark-mode .kpi-emerald{ background: rgba(5, 150, 105, 0.2) !important; color: #34d399 !important; }
html.dark-mode .kpi-violet { background: rgba(139, 92, 246, 0.2) !important; color: #a78bfa !important; }

html.dark-mode .filter-toolbar,
body.dark-mode .filter-toolbar,
.dark-mode .filter-toolbar {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .filter-input,
body.dark-mode .filter-input,
.dark-mode .filter-input {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Mobile Responsive Adjustments for Portal Form Headers & Action Bars */
@media (max-width: 767.98px) {
    .portal-main-card .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .portal-main-card .d-flex.justify-content-between.align-items-center > div:first-child {
        width: 100% !important;
    }
    .portal-main-card .d-flex.justify-content-between.align-items-center > a,
    .portal-main-card .d-flex.justify-content-between.align-items-center > button {
        margin-left: auto !important;
    }
}

/* ==========================================================================
   APOLLO PORTAL WRAPPER & SEAMLESS BREADCRUMB (CENTRALIZED)
   ========================================================================== */
@media (min-width: 992px) {
    .apollo-portal-wrapper {
        margin-top: 80px !important;
        padding-bottom: 50px;
    }
}
@media (max-width: 991px) {
    body, #layout, #layout-content, #mainscreen {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    .apollo-portal-wrapper {
        margin-top: 4px !important;
        padding-top: 0 !important;
        padding-bottom: 75px !important;
    }
}

.portal-breadcrumb-bar,
.portal-breadcrumb-bar *,
nav[aria-label="breadcrumb"],
ol.breadcrumb,
.breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* ==========================================================================
   APOLLO UNIFIED KPI CARDS & STATUS BADGES (CENTRALIZED)
   ========================================================================== */
.apollo-kpi-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    width: 100%;
}
.apollo-kpi-col {
    flex: 1;
    min-width: 0;
}
.kpi-card-unified {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: all 0.2s ease;
    height: 100%;
}
.kpi-card-unified:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.kpi-card-unified .kpi-icon-box {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.kpi-card-unified .kpi-content-box {
    min-width: 0;
    flex: 1;
}
.kpi-card-unified .kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-card-unified .kpi-val {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 2px 0 0 0;
}

@media (max-width: 767.98px) {
    .apollo-kpi-row {
        gap: 6px;
        margin-bottom: 12px;
    }
    .kpi-card-unified {
        padding: 8px 4px !important;
        flex-direction: column !important;
        text-align: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border-radius: 10px !important;
    }
    .kpi-card-unified .kpi-icon-box {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 13px !important;
        border-radius: 6px !important;
        margin-bottom: 2px !important;
    }
    .kpi-card-unified .kpi-val {
        font-size: 1.15rem !important;
        margin: 0 !important;
    }
    .kpi-card-unified .kpi-label {
        font-size: 0.62rem !important;
        letter-spacing: 0 !important;
    }
}

html.dark-mode .kpi-card-unified,
body.dark-mode .kpi-card-unified {
    background: #121927 !important;
    border-color: #1f2a3e !important;
    color: #f8fafc !important;
}
html.dark-mode .kpi-card-unified .kpi-label,
body.dark-mode .kpi-card-unified .kpi-label {
    color: #94a3b8 !important;
}
html.dark-mode .kpi-card-unified .kpi-val,
body.dark-mode .kpi-card-unified .kpi-val {
    color: #f8fafc !important;
}

/* User Avatar & Link Components in Tables */
.tahun-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tahun-avatar-box {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}
.tahun-info-box {
    min-width: 0;
    flex: 1;
}
.tahun-title-link {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    display: block;
}
.tahun-title-link:hover {
    color: #2563eb !important;
}
html.dark-mode .tahun-title-link,
body.dark-mode .tahun-title-link {
    color: #f8fafc !important;
}
html.dark-mode .tahun-title-link:hover,
body.dark-mode .tahun-title-link:hover {
    color: #60a5fa !important;
}

/* Status Badges with Glow Dot Indicator */
.apollo-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}
.apollo-status-badge .dot-glow,
.apollo-status-badge .apollo-status-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}
.apollo-status-active {
    background: #ecfdf5 !important;
    color: #16a34a !important;
    border: 1px solid #a7f3d0 !important;
}
.apollo-status-active .dot-glow,
.apollo-status-active .apollo-status-dot {
    background: #16a34a !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2) !important;
}
.apollo-status-nonaktif {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecdd3 !important;
}
.apollo-status-nonaktif .dot-glow,
.apollo-status-nonaktif .apollo-status-dot {
    background: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}

html.dark-mode .apollo-status-active {
    background: rgba(22, 163, 74, 0.15) !important;
    color: #4ade80 !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}
html.dark-mode .apollo-status-nonaktif {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

/* 5. Mobile 3-Dots Action Popover Menu */
.apollo-action-wrap {
    position: relative;
    display: inline-block;
    text-align: center;
}
.apollo-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}
.apollo-action-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}
.apollo-action-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 99999 !important;
    min-width: 140px;
    background: #ffffff !important;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 6px 0;
    text-align: left;
}
.table-responsive {
    overflow: visible !important;
}
.apollo-action-menu.show {
    display: block !important;
}
.apollo-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #334155;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s ease;
}
.apollo-action-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.apollo-action-item i {
    width: 16px;
    font-size: 0.85rem;
}
.apollo-action-item.text-danger {
    color: #dc2626 !important;
}
.apollo-action-item.text-danger:hover {
    background: #fef2f2;
}

html.dark-mode .apollo-action-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
html.dark-mode .apollo-action-btn:hover {
    background: #334155;
    color: #f8fafc;
}
html.dark-mode .apollo-action-menu {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
html.dark-mode .apollo-action-item {
    color: #cbd5e1;
}
html.dark-mode .apollo-action-item:hover {
    background: #334155;
    color: #f8fafc;
}

/* Compact Table on Mobile */
@media (max-width: 767.98px) {
    .btn-action-group .btn {
        padding: 3px 6px !important;
        font-size: 11px !important;
    }
    #tahunTable th,
    #tahunTable td,
    .apollo-table th,
    .apollo-table td {
        padding: 8px 4px !important;
        vertical-align: middle !important;
    }
    .apollo-status-badge {
        padding: 3px 8px !important;
        font-size: 0.7rem !important;
    }
    .tahun-avatar-box {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 12px !important;
    }
}