/* Modern Redesign for FinacctRKSDualAuth */
/* Inspired by Dribbble Financial Dashboards */
/* Supports Light and Dark Mode */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --primary-accent: #6366f1; /* Indigo */
    --secondary-accent: #a855f7; /* Violet */
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --border-radius-lg: 16px;
    --border-radius-md: 12px;
    --glass-blur: blur(12px);
    --transition-speed: 0.3s;
}

/* Dark Mode Tokens */
[data-bs-theme="dark"], :root:not([data-bs-theme="light"]) {
    --bg-main: #0f172a;
    --card-bg: rgba(30, 41, 59, 0.7);
    --card-border: rgba(255, 255, 255, 0.1);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --sidebar-bg: rgba(15, 23, 42, 0.95);
    --topbar-bg: rgba(15, 23, 42, 0.8);
    --input-bg: rgba(255, 255, 255, 0.05);
    --blob-opacity: 0.15;
}

/* Light Mode Tokens */
[data-bs-theme="light"] {
    --bg-main: #f1f5f9;
    --card-bg: rgba(255, 255, 255, 0.8);
    --card-border: rgba(0, 0, 0, 0.05);
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --sidebar-bg: rgba(255, 255, 255, 0.95);
    --topbar-bg: rgba(255, 255, 255, 0.8);
    --input-bg: rgba(255, 255, 255, 0.5);
    --blob-opacity: 0.1;
}

/* Global Styles */
body {
    font-family: 'Outfit', sans-serif !important;
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
    transition: background-color var(--transition-speed), color var(--transition-speed);
    -webkit-font-smoothing: antialiased;
}

/* App Wrapper & Layout */
#wrapper {
    background-color: var(--bg-main);
}

.content-page {
    background-color: var(--bg-main);
    padding: 24px 24px 10px 24px !important;
}

/* Left Sidebar Redesign */
.app-menu {
    background: var(--sidebar-bg) !important;
    backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--card-border) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.05) !important;
}

.app-menu .logo-box {
    background: transparent !important;
    height: 80px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo Visibility Logic */
.logo-lg {
    display: block !important;
}

.logo-sm {
    display: none !important;
}

/* Theme-based Logo Switching */
[data-bs-theme="light"] .logo-dark,
[data-bs-theme="dark"] .logo-light {
    display: none !important;
}

[data-bs-theme="dark"] .logo-dark,
[data-bs-theme="light"] .logo-light {
    display: block !important;
}

/* Condensed mode overrides */
[data-sidenav-size="condensed"] .logo-lg,
[data-sidenav-size="compact"] .logo-lg {
    display: none !important;
}

[data-sidenav-size="condensed"] .logo-sm,
[data-sidenav-size="compact"] .logo-sm {
    display: block !important;
    max-width: 30px !important;
    height: auto !important;
    margin: 0 auto !important;
}

[data-sidenav-size="condensed"] .logo-box a,
[data-sidenav-size="compact"] .logo-box a {
    width: 60px !important;
    display: block !important;
    text-align: center !important;
}

.app-menu .menu-link {
    border-radius: var(--border-radius-md) !important;
    margin: 4px 12px !important;
    transition: all 0.3s ease !important;
    color: var(--text-secondary) !important;
}

.app-menu .menu-link:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: var(--primary-accent) !important;
}

.app-menu .menu-item.active > .menu-link {
    background: var(--accent-gradient) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

/* Maintain Menu Color Settings */
[data-menu-color="dark"] .app-menu {
    background: #1e293b !important;
}

[data-menu-color="brand"] .app-menu {
    background: var(--accent-gradient) !important;
}

[data-menu-color="brand"] .app-menu .menu-link,
[data-menu-color="brand"] .app-menu .menu-text {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Topbar Redesign - Main Colors */
.navbar-custom, .navbar {
    background: var(--topbar-bg) !important;
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--card-border) !important;
}

/* Maintain Topbar Color Settings */
[data-topbar-color="brand"] .navbar-custom {
    background: var(--accent-gradient) !important;
    backdrop-filter: none;
}

[data-topbar-color="brand"] .navbar-custom i,
[data-topbar-color="brand"] .navbar-custom .nav-link {
    color: #fff !important;
}

[data-topbar-color="dark"] .navbar-custom {
    background: #1e293b !important;
    backdrop-filter: none;
}

[data-topbar-color="dark"] .navbar-custom i,
[data-topbar-color="dark"] .navbar-custom .nav-link {
    color: #f8fafc !important;
}

.navbar-custom .nav-link, 
.navbar-custom .button-toggle-menu,
.navbar-custom .topbar-menu i,
.navbar .nav-link,
.navbar .sidebar-toggler i,
.navbar .navbar-nav i {
    color: var(--text-primary) !important;
}

.navbar-custom .dropdown-item, .navbar .dropdown-item {
    color: var(--text-primary) !important;
}

.navbar-custom .indicator .circle, .navbar .indicator .circle {
    border: 2px solid var(--topbar-bg) !important;
}

.navbar-content .search-form .input-group .input-group-text i {
    color: var(--text-secondary) !important;
}

/* Card Redesign */
.card {
    background: var(--card-bg) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--card-border) !important;
    padding: 20px !important;
}

.card-title {
    font-weight: 600 !important;
    letter-spacing: -0.025em;
    color: var(--text-primary) !important;
}

/* Table Redesign */
.table {
    color: var(--text-primary) !important;
}

.table thead th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 2px solid var(--card-border) !important;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-secondary) !important;
    padding: 16px !important;
}

.table tbody td {
    padding: 16px !important;
    border-bottom: 1px solid var(--card-border) !important;
}

/* Form Controls Redesign */
.form-control, .form-select {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--border-radius-md) !important;
    color: var(--text-primary) !important;
    padding: 10px 16px !important;
    transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
    background-color: var(--card-bg) !important;
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2) !important;
}

/* Navbar Search */
.modern-search-group {
    background: var(--input-bg) !important;
    border-radius: 50px !important;
    padding: 2px 15px !important;
    border: 1px solid var(--card-border) !important;
    transition: all 0.3s ease;
    margin: 5px 0;
}

.modern-search-group:focus-within {
    background: var(--card-bg) !important;
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
}

.modern-search-group .form-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.modern-search-group .input-group-text {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
}

/* Button Redesign */
.btn {
    border-radius: var(--border-radius-md) !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}

.btn-primary {
    background: var(--accent-gradient) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

/* Decorative Blobs */
.decorative-blob {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    opacity: var(--blob-opacity);
    transition: opacity var(--transition-speed);
    pointer-events: none;
}

.blob-1 {
    background: var(--primary-accent);
    top: -200px;
    right: -200px;
}

.blob-2 {
    background: var(--secondary-accent);
    bottom: -200px;
    left: -200px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.content-page > div {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .content-page {
        margin-left: 0 !important;
        padding: 15px 15px 10px 15px !important;
        width: 100% !important;
    }
    
    /* In mobile: sidebar is hidden by default (data-sidenav-size="full") */
    [data-sidenav-size="full"] .app-menu {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 260px !important;
        height: 100vh !important;
        z-index: 1050 !important;
        transform: translateX(-260px);
        transition: transform 0.3s ease;
        overflow-y: auto;
    }

    /* JS adds sidebar-enable to <html> when toggle is clicked */
    html.sidebar-enable .app-menu {
        transform: translateX(0) !important;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.2) !important;
    }

    /* Let the theme's native #custom-backdrop handle dismiss on outside click */
    /* We just style it to look premium */
    #custom-backdrop {
        backdrop-filter: blur(2px) !important;
        background-color: rgba(0, 0, 0, 0.35) !important;
    }

    .decorative-blob {
        display: none !important;
    }
    
    .card {
        margin-bottom: 15px !important;
    }
}

@media (max-width: 768px) {
    .content-page {
        padding: 10px !important;
    }
    
    .card-header, .card-body {
        padding: 12px !important;
    }

    .navbar-custom, .navbar {
        padding: 0 5px !important;
    }

    .modern-search-group {
        display: none !important;
    }
    
    .table thead th, .table tbody td {
        padding: 8px 5px !important;
        font-size: 11px;
    }
    
    /* Font resizing for mobile */
    h4, .card-title {
        font-size: 16px !important;
    }

    /* Fix for page-title-right missing on mobile */
    .page-title-box {
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
        margin-bottom: 5px !important;
        padding: 0 15px !important;
    }

    .page-title-right {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin-bottom: 5px !important;
    }

    .page-title-right .d-flex {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .page-title-box .page-title {
        margin-bottom: 2px !important;
        margin-top: 5px !important;
        font-size: 1.1rem !important;
    }
}

/* Fix for sidebar toggle button color in light mode */
[data-bs-theme="light"] i {
    color: inherit;
}

[data-bs-theme="light"] .button-toggle-menu i, 
[data-bs-theme="light"] .sidebar-toggler i {
    color: #1e293b !important;
}

/* Custom Table Response Fix */
.table-responsive {
    border: none !important;
}

/* Global Modal & Backdrop Optimization */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1055 !important;
}

/* Critical Fix: Prevents multiple backdrops from stacking and darkening the screen */
.modal-backdrop ~ .modal-backdrop {
    display: none !important;
}

.modal-backdrop.show {
    opacity: 0.5 !important;
    backdrop-filter: blur(2px);
}

/* Ensure body doesn't shift when modal opens */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* --- Global Premium Modal Styling (Blueprint) --- */
.glass-modal { 
    background: var(--card-bg) !important; 
    backdrop-filter: blur(20px); 
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.modal-content {
    color: var(--text-primary);
    border: none;
    background: var(--card-bg); /* Default to card-bg if no glass-modal */
}

.modal-content.glass-modal {
    background: var(--card-bg) !important;
}

.modal-header {
    border-bottom: 1px solid var(--card-border);
}

.modal-footer {
    border-top: 1px solid var(--card-border);
}

/* Global Branding Gradients */
.bg-gradient-primary { background: linear-gradient(135deg, #6366f1 0%, #4f46e9 100%) !important; }
.bg-gradient-indigo { background: linear-gradient(135deg, #4f46e9 0%, #a855f7 100%) !important; }
.bg-gradient-purple { background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%) !important; }

/* --- Global Custom DataTable Component --- */
.custom-datatable thead th { 
    border: none !important;
    font-weight: 700 !important; 
    text-transform: uppercase !important; 
    font-size: 0.7rem !important; 
    letter-spacing: 0.03rem !important;
    color: var(--text-secondary) !important;
    background-color: rgba(0,0,0,0.02) !important;
}

[data-bs-theme="dark"] .custom-datatable thead th {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.custom-datatable tbody td {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--card-border) !important;
    padding: 1rem 1.5rem !important;
}

/* Modal Padding Fixes for DataTables */
.modal .dataTables_wrapper {
    padding: 1rem 0;
}

.modal .dataTables_filter, 
.modal .dataTables_length,
.modal .dataTables_info,
.modal .dataTables_paginate {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    margin-bottom: 1rem;
}

.modal table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Modern Input Groups (Global) */
.modern-input-group { 
    border-radius: var(--border-radius-md) !important; 
    overflow: hidden !important; 
    border: 1px solid var(--card-border) !important; 
    transition: all 0.2s ease !important; 
}

.modern-input-group:focus-within { 
    border-color: var(--primary-accent) !important; 
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; 
}

.modern-input-group .input-group-text { 
    border: none !important; 
    padding-left: 1rem !important; 
    background-color: transparent !important;
}

.modern-input-group .form-control, 
.modern-input-group .form-select { 
    border: none !important; 
    padding: 0.6rem 0.75rem !important; 
}

.modern-input-group .form-control:focus, 
.modern-input-group .form-select:focus { 
    box-shadow: none !important; 
}

/* Utility Classes */
.bg-rgba-primary { background: rgba(99, 102, 241, 0.05) !important; }
.bg-rgba-indigo { background: rgba(79, 70, 229, 0.05) !important; }
.bg-rgba-light { background: rgba(0,0,0,0.015) !important; }

.x-small { font-size: 0.65rem !important; letter-spacing: 0.08rem !important; }
.fw-800 { font-weight: 800 !important; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }

/* Selectize Global Theme */
.selectize-dropdown {
    background-color: var(--card-bg) !important;
    backdrop-filter: blur(20px) !important;
    z-index: 1051 !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    color: var(--text-primary) !important;
}
.selectize-dropdown .active {
    background-color: var(--primary-accent) !important;
    color: #ffffff !important;
}
.selectize-dropdown .option {
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--card-border);
}
.selectize-dropdown-content {
    max-height: 300px !important;
}
.selectize-input {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: none !important;
    padding: 10px 16px !important;
}
.selectize-input.focus {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}
.selectize-control.multi .selectize-input > div {
    background: var(--primary-accent) !important;
    color: #fff !important;
    border-radius: 4px !important;
}