/* 
 * admin-modern.css
 * Premium Enterprise-Grade Modern SaaS Styling Refactor
 * Design Stack inspired by Linear, Stripe, and Notion
 */

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

:root {
    /* Font family and scale */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Light Mode Palette */
    --bg-app: #f8fafc;
    --bg-card: #ffffff;
    --bg-navbar: #ffffff;
    --bg-sidebar: #f5f5f9;
    /* Pleasant soft sage off-white */

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-on-primary: #ffffff;

    --border-light: #e2e8f0;
    --border-hover: #cbd5e1;
    --border-accent: rgba(197, 160, 89, 0.25);

    --primary-rgb: 27, 94, 32;
    /* Spiritual Green */
    --primary-color: #1b5e20;
    --primary-hover: #123e15;

    --accent-color: #c5a059;
    /* Gold */
    --accent-hover: #a37c3f;

    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;

    /* Design Tokens */
    --radius-lg: 1rem;
    /* Card radius */
    --radius-md: 0.5rem;
    /* Button / Input radius */
    --radius-sm: 0.375rem;
    /* Small indicators */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -4px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
    --shadow-toast: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Reset & Base Typography */
html,
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
button,
input,
select,
textarea,
label,
td,
th,
div {
    font-family: var(--font-sans) !important;
}

/* Scoped font-family resets for icon libraries to prevent conflicts */
.bx,
[class^="bx-"],
[class*=" bx-"] {
    font-family: 'boxicons' !important;
}

.fa-brands {
    font-family: 'Font Awesome 6 Brands' !important;
}

.fa,
.fa-solid,
.fa-regular,
.fa-light,
.fa-thin,
.fa-duotone,
[class^="fa-"]:not(.fa-brands),
[class*=" fa-"]:not(.fa-brands) {
    font-family: 'Font Awesome 6 Free' !important;
}

html,
body {
    font-size: 15px !important;
    line-height: 1.6 !important;
    background-color: var(--bg-app) !important;
    color: var(--text-secondary) !important;
    letter-spacing: 0.01em !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Base Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-sans) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}

h1,
.h1 {
    font-size: 22px !important;
}

/* Page titles */
h2,
.h2 {
    font-size: 18px !important;
}

/* Section titles */
h3,
.h3 {
    font-size: 16px !important;
}

/* Card titles */
h4,
.h4 {
    font-size: 18px !important;
}

/* Section titles */
h5,
.h5 {
    font-size: 16px !important;
}

/* Card titles */
h6,
.h6 {
    font-size: 15px !important;
}

/* Small headings */

/* 2. Premium Card Styles */
.card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    margin-bottom: 1.5rem !important;
    overflow: hidden;
    transition: var(--transition);
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding: 1.25rem 1.5rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.card-body {
    padding: 1.25rem 1.5rem !important;
}

.card-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--border-light) !important;
    padding: 1rem 1.5rem !important;
}

/* 3. Modern Accessible Tables */
.table-responsive {
    overflow-x: auto !important;
    border-radius: var(--radius-sm) !important;
    padding: 0 1.25rem 1.25rem 1.25rem !important;
    background-color: transparent !important;
}

/* Ensure pagination and search controls don't overlay the responsive table wrapper */
.dataTables_wrapper .table-responsive {
    padding: 0 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

table.dataTable,
table.table {
    width: 100% !important;
    margin: 0.5rem 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
}

table.dataTable thead th,
table.table thead th {
    background-color: rgba(var(--primary-rgb), 0.03) !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-transform: capitalize !important;
    letter-spacing: 0.01em !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 2px solid rgba(var(--primary-rgb), 0.08) !important;
    border-top: none !important;
    vertical-align: middle !important;
}

table.dataTable tbody td,
table.table tbody td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-secondary) !important;
    font-size: 14px !important;
    transition: var(--transition);
}

table.dataTable tbody tr:last-child td,
table.table tbody tr:last-child td {
    border-bottom: none !important;
}

table.dataTable.table-hover tbody tr:hover,
table.table.table-hover tbody tr:hover {
    background-color: rgba(var(--primary-rgb), 0.015) !important;
}

/* Sizing for inputs and selects inside tables */
table input.form-control,
table select.form-select {
    min-width: 80px !important;
    max-width: 140px !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 15px !important;
}

table.dataTable td,
table.dataTable th,
table.table td,
table.table th {
    white-space: normal !important;
    word-wrap: break-word;
    max-width: 250px;
}

table.dataTable td:last-child,
table.dataTable th:last-child,
table.table td:last-child,
table.table th:last-child,
.text-nowrap-cell {
    white-space: nowrap !important;
}

/* 4. Elegant Form Controls */
.form-label,
.col-form-label {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    margin-bottom: 0.375rem !important;
    display: inline-block;
    letter-spacing: 0.01em !important;
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--text-primary) !important;
    background-color: var(--bg-card) !important;
    background-clip: padding-box;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition) !important;
    height: auto !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12) !important;
    background-color: var(--bg-card) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
    background-color: rgba(var(--border-light), 0.3) !important;
    border-color: var(--border-light) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

.invalid-feedback {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--danger-color) !important;
    margin-top: 0.25rem !important;
}

/* 5. Modern Button Tokens */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition) !important;
    box-shadow: var(--shadow-sm) !important;
    letter-spacing: 0.01em !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2) !important;
}

.btn-secondary {
    background-color: var(--bg-card) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

.btn-secondary:hover {
    background-color: var(--bg-app) !important;
    border-color: var(--border-hover) !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

/* 6. High-End DataTables & Numerical Pagination Styling */
.dataTables_wrapper {
    width: 100% !important;
    padding-top: 1.25rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-bottom: 1.25rem !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: 15px !important;
    color: var(--text-secondary) !important;
    margin-bottom: 1rem !important;
}

.dataTables_wrapper .dataTables_length select {
    padding: 0.375rem 1.75rem 0.375rem 0.75rem !important;
    font-size: 15px !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-light) !important;
    background-color: var(--bg-card) !important;
    margin: 0 0.25rem;
    display: inline-block !important;
    width: auto !important;
}

.dataTables_wrapper .dataTables_filter input {
    padding: 0.375rem 0.75rem !important;
    font-size: 15px !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-light) !important;
    background-color: var(--bg-card) !important;
    margin-left: 0.5rem;
    display: inline-block !important;
    width: auto !important;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12) !important;
    outline: 0;
}

.dataTables_wrapper .dataTables_info {
    font-size: 15px !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    padding-top: 1rem !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 1rem !important;
}

/* Beautiful Numerical Pagination Buttons */
.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0 !important;
    justify-content: flex-end !important;
    gap: 4px !important;
}

.dataTables_wrapper .dataTables_paginate .page-link {
    padding: 0.375rem 0.75rem !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition) !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    z-index: 3;
    color: var(--text-on-primary) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

.dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    color: var(--primary-color) !important;
    background-color: rgba(var(--primary-rgb), 0.05) !important;
    border-color: rgba(var(--primary-rgb), 0.15) !important;
}

@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: center !important;
        margin-top: 1rem !important;
    }

    .dataTables_wrapper .dataTables_info {
        text-align: center !important;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: center !important;
    }
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    color: var(--text-muted) !important;
    pointer-events: none;
    background-color: rgba(var(--bg-app), 0.5) !important;
    border-color: var(--border-light) !important;
}

/* 7. Toast Notifications */
.toast-container {
    z-index: 10000 !important;
}

.toast {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-toast) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.5rem !important;
    backdrop-filter: blur(8px);
    transition: var(--transition);
}

.toast.bg-success {
    border-left: 4px solid var(--success-color) !important;
}

.toast.bg-danger {
    border-left: 4px solid var(--danger-color) !important;
}

.toast.bg-warning {
    border-left: 4px solid var(--warning-color) !important;
}

.toast.bg-info,
.toast.bg-primary {
    border-left: 4px solid var(--info-color) !important;
}

.toast-body {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}

.toast-body .text-white {
    color: var(--text-primary) !important;
}

.toast.bg-success .toast-body i {
    color: var(--success-color) !important;
}

.toast.bg-danger .toast-body i,
.toast.bg-error .toast-body i {
    color: var(--danger-color) !important;
}

.toast.bg-warning .toast-body i {
    color: var(--warning-color) !important;
}

.toast.bg-info .toast-body i,
.toast.bg-primary .toast-body i {
    color: var(--info-color) !important;
}

.toast .btn-close {
    background-color: transparent !important;
    opacity: 0.6;
    transition: var(--transition);
    filter: none !important;
}

body.dark-mode .toast .btn-close {
    filter: invert(1) grayscale(1) brightness(2) !important;
}

.toast .btn-close:hover {
    opacity: 1;
}

/* 8. Sidebar Customizations */
#layout-menu {
    background-color: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-light) !important;
}

.menu-inner-shadow {
    background: linear-gradient(var(--bg-sidebar) 40%, transparent 95%) !important;
}

.menu-inner .menu-item .menu-link {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    margin: 0.125rem 0.75rem !important;
    padding: 0.5rem 0.875rem !important;
    transition: var(--transition) !important;
    letter-spacing: 0.01em !important;
}

.menu-inner .menu-item .menu-link i,
.menu-inner .menu-item .menu-link div {
    color: inherit !important;
    transition: var(--transition) !important;
}

.menu-inner .menu-item .menu-link:hover,
.menu-inner .menu-item .menu-link:focus,
.menu-inner .menu-item:hover>.menu-link,
.menu-inner .menu-item.open>.menu-link {
    color: var(--primary-color) !important;
    background-color: rgba(var(--primary-rgb), 0.06) !important;
}

.menu-inner .menu-item.active>.menu-link {
    background: linear-gradient(72.47deg, var(--primary-color) 22.16%, rgba(var(--primary-rgb), 0.75) 76.47%) !important;
    color: #ffffff !important;
    box-shadow: 0px 2px 6px 0px rgba(var(--primary-rgb), 0.3) !important;
    font-weight: 600 !important;
}

/* Remove Active Left Line Indicator & Separators */
.menu-inner .menu-item.active:before,
.menu-inner .menu-item.active::before,
.menu-vertical .menu-inner>.menu-item.active::before,
.menu-vertical .menu-header::before,
.menu-header::before,
.menu-header-text::before {
    display: none !important;
    content: none !important;
}

.menu-header-text {
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--accent-color) !important;
    opacity: 0.8;
}

/* Ensure the branding container allows absolute positioned elements (like toggle button) to float outside */
.app-brand {
    overflow: visible !important;
    margin-bottom: 0px !important;
}

/* Floating Premium Sidebar Collapse Button */
.app-brand .layout-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: absolute !important;
    right: -13px !important;
    top: 24px !important;
    z-index: 1050 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.app-brand .layout-menu-toggle i {
    color: var(--primary-color) !important;
    font-size: 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.app-brand .layout-menu-toggle:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.25) !important;
}

.app-brand .layout-menu-toggle:hover i {
    color: #ffffff !important;
}

/* Chevron flipping when collapsed */
html.layout-menu-collapsed .app-brand .layout-menu-toggle i {
    transform: rotate(180deg) !important;
}

/* Dark Mode Overrides for Sidebar Collapse Button */
body.dark-mode .app-brand .layout-menu-toggle {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .app-brand .layout-menu-toggle i {
    color: var(--accent-color) !important;
}

body.dark-mode .app-brand .layout-menu-toggle:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3) !important;
}

body.dark-mode .app-brand .layout-menu-toggle:hover i {
    color: #111827 !important;
}

/* 8.1 Dropdown Subnav overrides */
.menu-sub {
    background-color: transparent !important;
    padding-left: 1rem !important;
    margin: 0 !important;
}

.menu-sub .menu-item {
    margin: 0 !important;
}

.menu-sub .menu-item .menu-link {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    padding: 0.375rem 0.875rem !important;
    margin: 0.125rem 0.75rem !important;
    background-color: transparent !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition) !important;
}

/* Subnav Hover & Active in Light Mode */
.menu-sub .menu-item .menu-link:hover,
.menu-sub .menu-item .menu-link:focus,
.menu-sub .menu-item:hover>.menu-link {
    color: var(--primary-color) !important;
    background-color: rgba(var(--primary-rgb), 0.04) !important;
    transform: translateX(3px);
}

.menu-sub .menu-item.active>.menu-link {
    color: var(--text-on-primary) !important;
    background-color: rgba(var(--primary-rgb), 0.08) !important;
    font-weight: 600 !important;
}

/* Hide default circle bullets */
.menu-sub>.menu-item>.menu-link::before {
    display: none !important;
    content: none !important;
}

/* 9. Layout & Navbar styling */
.layout-navbar {
    background-color: var(--bg-navbar) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: blur(8px);
}

.layout-navbar input::placeholder {
    color: var(--text-muted) !important;
}

/* Ensure Navbar Links & Icons are Perfectly Visible with Proper Contrast */
.layout-navbar .nav-link {
    color: var(--text-secondary) !important;
    transition: var(--transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.layout-navbar .nav-link:hover,
.layout-navbar .nav-link:focus {
    color: var(--primary-color) !important;
}

body.dark-mode .layout-navbar .nav-link:hover,
body.dark-mode .layout-navbar .nav-link:focus {
    color: var(--accent-color) !important;
}

.layout-navbar .nav-link i {
    color: inherit !important;
}

/* Premium Round Buttons for Theme Toggle & Notifications */
#themeSwitcher,
#notificationsDropdown {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background-color: rgba(27, 94, 32, 0.05) !important;
    color: var(--primary-color) !important;
    border: 1px solid rgba(27, 94, 32, 0.12) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important;
}

#themeSwitcher:hover,
#notificationsDropdown:hover {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-1px) scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.25) !important;
}

/* Specific Micro-animations on Hover */
#themeSwitcher:hover i {
    transform: rotate(15deg) !important;
}

#notificationsDropdown:hover i {
    transform: rotate(10deg) !important;
}

#themeSwitcher i,
#notificationsDropdown i {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 1.15rem !important;
}

.dropdown-menu {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-toast) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.5rem 0 !important;
}

.dropdown-item {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    padding: 0.5rem 1rem !important;
    transition: var(--transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(var(--primary-rgb), 0.05) !important;
    color: var(--primary-color) !important;
}

.dropdown-divider {
    border-top: 1px solid var(--border-light) !important;
    margin: 0.5rem 0 !important;
}

/* 10. Modern Modals */
.modal-content {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-toast) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-light) !important;
    padding: 1.25rem 1.5rem !important;
}

.modal-title {
    font-size: 18px !important;
    font-weight: 600 !important;
}

.modal-body {
    padding: 1.5rem !important;
    font-size: 15px !important;
}

.modal-footer {
    border-top: 1px solid var(--border-light) !important;
    padding: 1rem 1.5rem !important;
}

/* 11. Custom Helpers, Badges, and Alerts */
.badge {
    font-weight: 600 !important;
    padding: 0.35em 0.65em !important;
    font-size: 15px !important;
    border-radius: var(--radius-sm) !important;
    letter-spacing: 0.01em !important;
}

.bg-label-primary {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary-color) !important;
}

.bg-label-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: var(--success-color) !important;
}

.bg-label-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: var(--danger-color) !important;
}

.bg-label-info {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: var(--info-color) !important;
}

.bg-label-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: var(--warning-color) !important;
}

.alert {
    border-radius: var(--radius-md) !important;
    padding: 1rem 1.25rem !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

.alert-success {
    background-color: #f0fdf4 !important;
    border: 1px solid #dcfce7 !important;
    border-left: 4px solid #10b981 !important;
    color: #166534 !important;
}

.alert-danger {
    background-color: #fef2f2 !important;
    border: 1px solid #fee2e2 !important;
    border-left: 4px solid #ef4444 !important;
    color: #991b1b !important;
}

.alert-warning {
    background-color: #fffbeb !important;
    border: 1px solid #fef3c7 !important;
    border-left: 4px solid #f59e0b !important;
    color: #92400e !important;
}

.alert-info {
    background-color: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    border-left: 4px solid #3b82f6 !important;
    color: #1e40af !important;
}

.alert div,
.alert span,
.alert p,
.alert li,
.alert strong {
    color: inherit !important;
}

/* Sidebar Spacing & Icon alignment */
.menu-inner .menu-item .menu-link i {
    margin-right: 0.75rem !important;
    font-size: 1.15rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
}

/* Search Input Icon Alignment */
.layout-navbar .nav-item .fa-magnifying-glass {
    margin-right: 0.75rem !important;
    color: var(--text-secondary) !important;
}

/* Premium welcome card styling */
.card.bg-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.8) 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px -5px rgba(var(--primary-rgb), 0.3) !important;
}

.card.bg-primary .card-title,
.card.bg-primary p,
.card.bg-primary span,
.card.bg-primary div {
    color: #ffffff !important;
}

/* Font utilities adjustments */
.fs-7 {
    font-size: 15px !important;
}

.fs-8 {
    font-size: 14px !important;
}

.fs-9 {
    font-size: 13px !important;
}


/* ==========================================
   DARK MODE CONTRAST OVERRIDES
   ========================================== */
body.dark-mode {
    /* Color Palette */
    --bg-app: #090d16 !important;
    --bg-card: #111827 !important;
    --bg-navbar: #111827 !important;
    --bg-sidebar: #0b0f19 !important;

    --text-primary: #f8fafc !important;
    --text-secondary: #cbd5e1 !important;
    --text-muted: #64748b !important;

    --border-light: rgba(255, 255, 255, 0.08) !important;
    --border-hover: rgba(255, 255, 255, 0.15) !important;
    --border-accent: rgba(197, 160, 89, 0.3) !important;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5) !important;
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
}

/* Dark Mode specific overrides to ensure perfect contrast and visibility */
body.dark-mode .layout-wrapper,
body.dark-mode .layout-container {
    background-color: var(--bg-app) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode label,
body.dark-mode .form-label,
body.dark-mode .col-form-label,
body.dark-mode .form-check-label,
body.dark-mode strong,
body.dark-mode .card-header,
body.dark-mode .card-title,
body.dark-mode .menu-header-text,
body.dark-mode .text-heading {
    color: var(--text-primary) !important;
}

body.dark-mode .text-body,
body.dark-mode p:not(.alert *):not(.toast *),
body.dark-mode span:not(.badge):not(.tf-icons):not(.alert *):not(.toast *):not([class*="text-"]),
body.dark-mode small:not(.alert *):not(.toast *),
body.dark-mode div:not(.badge):not(.alert):not(.toast):not(.toast-body):not(.alert *):not(.toast *):not([class*="text-"]),
body.dark-mode li:not(.menu-item):not(.alert *):not(.toast *),
body.dark-mode td,
body.dark-mode th {
    color: var(--text-secondary) !important;
}

body.dark-mode .text-muted {
    color: var(--text-muted) !important;
}

body.dark-mode .layout-navbar {
    background-color: var(--bg-navbar) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

/* Dark Mode Premium Buttons for Theme Toggle & Notifications */
body.dark-mode #themeSwitcher,
body.dark-mode #notificationsDropdown {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--accent-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode #themeSwitcher:hover,
body.dark-mode #notificationsDropdown:hover {
    background-color: var(--accent-color) !important;
    color: #111827 !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 4px 12px rgba(197, 160, 89, 0.35) !important;
}

body.dark-mode #themeSwitcher:hover i {
    transform: rotate(-15deg) !important;
}

body.dark-mode #notificationsDropdown:hover i {
    transform: rotate(-10deg) !important;
}

body.dark-mode #layout-menu {
    background-color: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-light) !important;
}

body.dark-mode .menu-inner-shadow {
    background: linear-gradient(var(--bg-sidebar) 40%, transparent 95%) !important;
}

/* Left Menu Link Visibility in Dark Mode */
body.dark-mode .menu-inner .menu-link {
    color: #94a3b8 !important;
}

body.dark-mode .menu-inner .menu-link div,
body.dark-mode .menu-inner .menu-link i {
    color: inherit !important;
}

body.dark-mode .menu-inner .menu-link:hover,
body.dark-mode .menu-inner .menu-link:focus,
body.dark-mode .menu-inner .menu-item:hover>.menu-link,
body.dark-mode .menu-inner .menu-item.open>.menu-link {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .menu-inner .menu-item.active>.menu-link {
    background: linear-gradient(72.47deg, var(--primary-color) 22.16%, rgba(var(--primary-rgb), 0.75) 76.47%) !important;
    color: #ffffff !important;
    box-shadow: 0px 2px 6px 0px rgba(var(--primary-rgb), 0.4) !important;
}

body.dark-mode .menu-header-text {
    color: var(--accent-color) !important;
}

/* Dark Mode Subnav overrides */
body.dark-mode .menu-sub .menu-item .menu-link {
    color: var(--text-secondary) !important;
}

body.dark-mode .menu-sub .menu-item .menu-link:hover,
body.dark-mode .menu-sub .menu-item .menu-link:focus,
body.dark-mode .menu-sub .menu-item:hover>.menu-link {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    transform: translateX(3px);
}

body.dark-mode .menu-sub .menu-item.active>.menu-link {
    color: var(--accent-color) !important;
    background-color: rgba(197, 160, 89, 0.1) !important;
    font-weight: 600 !important;
}

/* Dark Mode Dropdowns */
body.dark-mode .dropdown-menu {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
}

body.dark-mode .dropdown-item {
    color: var(--text-secondary) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

body.dark-mode .dropdown-divider {
    border-color: var(--border-light) !important;
}

/* Dark Mode Forms */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

body.dark-mode input::placeholder {
    color: var(--text-muted) !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2) !important;
}

body.dark-mode input:disabled,
body.dark-mode select:disabled,
body.dark-mode textarea:disabled {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-light) !important;
}

/* Dark Mode List Groups */
body.dark-mode .list-group-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-light) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .list-group-item-action:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-primary) !important;
}

/* Dark Mode Tables styling */
body.dark-mode table.dataTable,
body.dark-mode table.table {
    border-color: var(--border-light) !important;
}

body.dark-mode table.dataTable thead th,
body.dark-mode table.table thead th {
    background-color: #1a2333 !important;
    color: var(--accent-color) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode table.dataTable tbody td,
body.dark-mode table.table tbody td {
    border-bottom-color: var(--border-light) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode table.dataTable.table-hover tbody tr:hover,
body.dark-mode table.table.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.015) !important;
}

body.dark-mode .table-responsive {
    border-color: var(--border-light) !important;
}

/* Dark Mode DataTables styling */
body.dark-mode .dataTables_wrapper .dataTables_length select,
body.dark-mode .dataTables_wrapper .dataTables_filter input {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length select:focus,
body.dark-mode .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .page-link {
    background-color: var(--bg-card) !important;
    border-color: var(--border-light) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--border-light) !important;
    color: var(--text-muted) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border-color: var(--border-hover) !important;
}

/* Dark Mode Toast notifications style */
body.dark-mode .toast {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .toast-body {
    color: var(--text-primary) !important;
}

/* Dark Mode Alert overrides */
body.dark-mode .alert-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-left: 4px solid #10b981 !important;
    color: #a7f3d0 !important;
}

body.dark-mode .alert-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-left: 4px solid #ef4444 !important;
    color: #fca5a5 !important;
}

body.dark-mode .alert-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-left: 4px solid #f59e0b !important;
    color: #fde68a !important;
}

body.dark-mode .alert-info {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-left: 4px solid #3b82f6 !important;
    color: #bfdbfe !important;
}

/* Dark Mode Badges & General Helpers */
body.dark-mode .badge.bg-label-primary {
    background-color: rgba(var(--primary-rgb), 0.2) !important;
    color: #72e276 !important;
}

body.dark-mode .badge.bg-label-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

body.dark-mode .badge.bg-label-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

body.dark-mode .badge.bg-label-info {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

body.dark-mode .badge.bg-label-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

body.dark-mode .avatar-initial.bg-label-primary {
    background-color: rgba(var(--primary-rgb), 0.2) !important;
    color: #72e276 !important;
}

body.dark-mode .avatar-initial.bg-label-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

body.dark-mode .avatar-initial.bg-label-info {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

body.dark-mode .footer,
body.dark-mode .content-footer {
    background-color: var(--bg-app) !important;
    color: var(--text-muted) !important;
    border-top: 1px solid var(--border-light) !important;
}

/* Bulletproof desktop sidebar toggle button visibility rules */
@media (min-width: 1200px) {

    html .layout-menu .app-brand .layout-menu-toggle,
    html.layout-menu-fixed .layout-menu .app-brand .layout-menu-toggle,
    html.layout-menu-collapsed .layout-menu .app-brand .layout-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* ==========================================
   12. CUSTOM BRAND LOGO & PASSWORD INPUT POLISH
   ========================================== */

/* Login Logo Sizing */
.login-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 0.5rem;
    transition: var(--transition);
}

/* Sidebar Logo Sizing & Responsive Shrinking */
.sidebar-brand-container {
    height: auto !important;
    min-height: 84px !important;
    padding: 12px 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    transition: var(--transition) !important;
}

.sidebar-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.sidebar-logo {
    width: 60px !important;
    height: auto !important;
    /* max-height: 60px !important; */
    object-fit: contain !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* When the sidebar is collapsed */
html.layout-menu-collapsed .sidebar-brand-container {
    padding: 12px 0.75rem !important;
    justify-content: center !important;
}

html.layout-menu-collapsed .sidebar-logo {
    width: 38px !important;
    max-height: 38px !important;
}

html.layout-menu-collapsed .app-brand-text {
    opacity: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    display: none !important;
}

/* Password Visibility Component */
.password-input-wrapper {
    position: relative;
    width: 100%;
}

.password-input-wrapper .form-control {
    padding-right: 42px !important;
}

.password-toggle-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 5;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.password-toggle-icon:hover {
    color: var(--primary-color);
}

body.dark-mode .password-toggle-icon:hover {
    color: var(--accent-color);
}

/* Custom Global Link and Breadcrumb Color Overrides */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-hover);
}

/* Specific override to keep breadcrumbs green */
h4.fw-bold a,
.fw-light a,
.breadcrumb a {
    color: var(--primary-color) !important;
}

h4.fw-bold a:hover,
.fw-light a:hover,
.breadcrumb a:hover {
    color: var(--primary-hover) !important;
}