/**
 * app.css
 * Project: Keystone Accounting Lite
 * Global Structure & Theme Hardcoding (Exact Hex Specs)
 */

/* ========================================================================= */
/* --- 1. GLOBAL LAYOUT & HIDE SCROLLBAR ---                                 */
/* ========================================================================= */
::-webkit-scrollbar { display: none; }
html, body { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    overflow-x: hidden; 
}

/* ========================================================================= */
/* --- 2. LIGHT MODE (DEFAULT & EXPLICIT) ---                                */
/* ========================================================================= */

/* Page Background */
html, body, 
[data-bs-theme="light"] html, [data-bs-theme="light"] body { 
    background-color: #dedfe0 !important; 
    color: #212529 !important;
}

/* Containers: Cards, Sidebar, Header (Navbar), and Footer */
.card, .modal-content, 
#sidebar, #content .navbar, footer,
[data-bs-theme="light"] .card, [data-bs-theme="light"] .modal-content,
[data-bs-theme="light"] #sidebar, [data-bs-theme="light"] #content .navbar, [data-bs-theme="light"] footer {
    background-color: #ffffff !important; 
    border-color: #e2e3e5 !important;
}

/* Fields & Dropdowns */
.form-control, .form-select, .input-group-text, .dropdown-menu,
[data-bs-theme="light"] .form-control, [data-bs-theme="light"] .form-select, [data-bs-theme="light"] .input-group-text, [data-bs-theme="light"] .dropdown-menu {
    background-color: #f3f5f8 !important;
    border: 1px solid #e2e3e5 !important;
    color: #212529 !important;
}

/* Table Headers & Hovers */
.table thead th, .theme-thead th,
[data-bs-theme="light"] .table thead th, [data-bs-theme="light"] .theme-thead th {
    background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
}
.table-hover tbody tr:hover > *,
[data-bs-theme="light"] .table-hover tbody tr:hover > * {
    background-color: #f3f5f8 !important;
}

/* ========================================================================= */
/* --- 3. DARK MODE (EXPLICIT) ---                                           */
/* ========================================================================= */

/* Page Background */
[data-bs-theme="dark"] html, [data-bs-theme="dark"] body { 
    background-color: #121416 !important; 
    color: #dee2e6 !important;
}

/* Containers: Cards, Sidebar, Header (Navbar), and Footer */
[data-bs-theme="dark"] .card, [data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] #sidebar, [data-bs-theme="dark"] #content .navbar, [data-bs-theme="dark"] footer {
    background-color: #212529 !important; 
    border-color: #343a40 !important;
}

/* Fields & Dropdowns */
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .input-group-text, [data-bs-theme="dark"] .dropdown-menu {
    background-color: #2b3035 !important;
    border-color: #495057 !important;
    color: #dee2e6 !important;
}

/* Table Headers & Hovers */
[data-bs-theme="dark"] .table thead th, [data-bs-theme="dark"] .theme-thead th {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}
[data-bs-theme="dark"] .table-hover tbody tr:hover > * {
    background-color: #2b3035 !important;
}

/* ========================================================================= */
/* --- 4. AUTO MODE (SYSTEM PREFERENCE = DARK) ---                           */
/* ========================================================================= */
@media (prefers-color-scheme: dark) {
    [data-bs-theme="auto"] html, [data-bs-theme="auto"] body { 
        background-color: #121416 !important; 
        color: #dee2e6 !important;
    }
    [data-bs-theme="auto"] .card, [data-bs-theme="auto"] .modal-content,
    [data-bs-theme="auto"] #sidebar, [data-bs-theme="auto"] #content .navbar, [data-bs-theme="auto"] footer {
        background-color: #212529 !important; 
        border-color: #343a40 !important;
    }
    [data-bs-theme="auto"] .form-control, [data-bs-theme="auto"] .form-select, [data-bs-theme="auto"] .input-group-text, [data-bs-theme="auto"] .dropdown-menu {
        background-color: #2b3035 !important;
        border-color: #495057 !important;
        color: #dee2e6 !important;
    }
    [data-bs-theme="auto"] .table thead th, [data-bs-theme="auto"] .theme-thead th {
        background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    }
    [data-bs-theme="auto"] .table-hover tbody tr:hover > * {
        background-color: #2b3035 !important;
    }
}

/* ========================================================================= */
/* --- 5. COMPONENT SHAPING & PADDING ---                                    */
/* ========================================================================= */

.card {
    border-radius: 1rem !important; 
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; 
    margin-bottom: 1.5rem;
}
.card-header, .modal-header {
    background-color: transparent !important;
    border-bottom: inherit !important; 
    padding: 1.25rem 1.5rem !important;
}
.card-body, .modal-body {
    padding: 1.5rem !important; 
}
.card-body.p-0 { padding: 0 !important; }

.card-footer, .modal-footer {
    background-color: transparent !important;
    border-top: inherit !important;
    padding: 1.25rem 1.5rem !important;
}

.form-control, .form-select {
    border-radius: 0.5rem !important; 
    box-shadow: none !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15) !important;
}
.dataTables_wrapper .form-control, .dataTables_wrapper .form-select {
    border-radius: 50rem !important;
}

label:not(.form-check-label):not(.btn), .form-label, .col-form-label {
    font-weight: 700 !important;
    font-size: 0.75rem !important; 
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 0.5rem !important;
    display: inline-block;
}

.btn {
    border-radius: 50rem !important; 
    font-weight: 600 !important;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.btn:hover {
    transform: translateY(-1px);
}

.table > :not(caption) > * > * {
    background-color: transparent !important;
    border-bottom-color: inherit !important;
    padding: 0.75rem 0.75rem !important;
    vertical-align: middle !important;
}
.table > tbody > tr:last-child > * {
    border-bottom: 0 !important; 
}

/* ========================================================================= */
/* --- 6. DYNAMIC PRIMARY COLOR MAPPINGS ---                                 */
/* ========================================================================= */

.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .modal-title,
h1, h2, h3, h4, h5, h6 { 
    color: var(--bs-primary) !important; 
    font-weight: 700 !important; 
    margin-bottom: 0 !important;
}

#content main a:not(.btn):not(.dropdown-item):not(.list-group-item):not(.nav-link) { 
    color: var(--bs-primary); 
    text-decoration: none; 
}
#content main a:not(.btn):not(.dropdown-item):not(.list-group-item):not(.nav-link):hover { 
    color: var(--bs-primary); 
    filter: brightness(90%); 
    text-decoration: underline; 
}

.list-group-item-action:hover, .list-group-item-action:focus { 
    background-color: rgba(var(--bs-primary-rgb), 0.05) !important; 
    color: var(--bs-primary) !important; 
}
.list-group-item-action.active { 
    background-color: var(--bs-primary) !important; 
    border-color: var(--bs-primary) !important; 
    color: #ffffff !important; 
}

.btn-primary { 
    background-color: var(--bs-primary) !important; 
    border-color: var(--bs-primary) !important; 
    color: #fff !important; 
}
.btn-primary:hover, .btn-primary:active { 
    filter: brightness(90%); 
}

.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: var(--bs-primary); }
.nav-tabs .nav-link.active { color: #ffffff !important; background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }

.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.form-check-input:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* ========================================================================= */
/* --- 7. SIDEBAR & NAVBAR UTILITIES ---                                     */
/* ========================================================================= */

.wrapper { display: flex; width: 100%; flex: 1; }

#sidebar {
    min-width: 250px;
    max-width: 250px;
    transition: all 0.3s;
    min-height: 100vh;
    border-right: 1px solid rgba(0,0,0,0.08);
}
[data-bs-theme="dark"] #sidebar { border-right: 1px solid rgba(255,255,255,0.1); }
@media (prefers-color-scheme: dark) {
    [data-bs-theme="auto"] #sidebar { border-right: 1px solid rgba(255,255,255,0.1); }
}

#sidebar .sidebar-header { padding: 20px; text-align: center; }
#sidebar .sidebar-header img { max-width: 100%; max-height: 60px; }
#sidebar .sidebar-header h4 { color: inherit; }
#sidebar .nav-link { color: inherit; }
#sidebar .nav-link:hover { background: rgba(var(--bs-primary-rgb), 0.05); color: var(--bs-primary); }
#sidebar .nav-link .bi { color: inherit; }
#sidebar .nav-link:hover .bi { color: var(--bs-primary); }

.nav-link.active-link {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
    border-radius: 0.375rem;
    font-weight: 600;
}
.nav-link.active-link .bi { color: #ffffff !important; }

#content { width: 100%; padding: 0; transition: all 0.3s; }
#content .navbar { 
    border-bottom: 1px solid rgba(0,0,0,0.08); 
    padding: 1rem; 
}
[data-bs-theme="dark"] #content .navbar { border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (prefers-color-scheme: dark) {
    [data-bs-theme="auto"] #content .navbar { border-bottom: 1px solid rgba(255,255,255,0.1); }
}

/* ========================================================================= */
/* --- 8. AUTH PAGES & UTILITIES ---                                         */
/* ========================================================================= */

body.auth-body {
    align-items: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
}
.auth-wrapper { width: 100%; max-width: 550px; margin: auto; }
.auth-logo { max-width: 200px; max-height: 70px; margin-bottom: 1rem; }

.toast-container { position: fixed; top: 75px; right: 1.25rem; z-index: 1100; }
body:has(.impersonation-bar) .toast-container { top: 115px; }
.impersonation-bar { position: sticky; top: 0; z-index: 2000; border-radius: 0; }

/* ** DataTables Search & Filter Overrides ** */
.dataTables_wrapper .dataTables_filter { float: right; margin-bottom: 1rem; }
.dataTables_wrapper .dataTables_length { margin-bottom: 1rem; }

/* ** DataTables Pagination Block Overrides ** */
.dataTables_wrapper .dataTables_paginate .pagination { 
    justify-content: flex-end; 
}
.pagination .page-link { 
    color: var(--bs-primary); 
    padding: 0.375rem 0.75rem;
    border-color: var(--bs-secondary-border-subtle);
    transition: all 0.2s ease-in-out;
}
.pagination .page-item.active .page-link { 
    background-color: var(--bs-primary) !important; 
    border-color: var(--bs-primary) !important; 
    color: #fff !important; 
    font-weight: bold;
}
.pagination .page-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

/* Dark Mode Pagination Overrides */
[data-bs-theme="dark"] .pagination .page-link { 
    background-color: var(--bs-card-bg); 
    border-color: var(--bs-secondary-border-subtle); 
}
[data-bs-theme="dark"] .pagination .page-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
}
[data-bs-theme="dark"] .pagination .page-item.disabled .page-link { 
    background-color: var(--bs-card-bg); 
    border-color: var(--bs-secondary-border-subtle); 
    color: #6c757d; 
}

/* ** Scroll Progress Button ** */
.scroll-progress-container { position: fixed; bottom: 80px; right: 20px; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1050; opacity: 0; pointer-events: none; transform: translateY(20px); }
.scroll-progress-container.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-progress-inner { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--bs-primary); font-size: 1.5rem; background-color: var(--bs-body-bg) !important; transition: background-color 0.2s, color 0.2s; }
.scroll-progress-container:hover .scroll-progress-inner { background-color: var(--bs-primary) !important; color: #fff; }

@media (max-width: 768px) {
    #sidebar { margin-left: -250px; position: fixed; z-index: 1050; height: 100vh; overflow-y: auto; }
    #sidebar.show { margin-left: 0; }
    #content { width: 100%; }
    main.container-fluid { padding: 15px; }
    .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { float: none !important; text-align: left !important; }
    .dataTables_wrapper .dataTables_paginate .pagination { justify-content: center !important; margin-top: 10px; }
}

/* ========================================================================= */
/* --- INTEGRATED SEARCH BAR ---                                             */
/* ========================================================================= */

/* 1. Force standard field corners, kill the theme's pill shape */
.custom-search-group .form-control,
.custom-search-group .btn {
    border-radius: 0.375rem !important; 
}

/* 2. Flatten the inner touching edges perfectly */
.custom-search-group .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important; 
}
.custom-search-group .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    z-index: 0 !important;
}

/* 3. Kill the blue focus ring */
.custom-search-group .form-control:focus {
    box-shadow: none !important;
    border-color: var(--bs-secondary-border-subtle) !important;
}