/* =========================================
    0: Layout styles
   ========================================= */
:root {
    --navbar-bg: #ffffff;
    --navbar-text: #212529;
    --navbar-border: #dee2e6;
    --navbar-hover: rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
    :root {
        --navbar-bg: #212529;
        --navbar-text: #f8f9fa;
        --navbar-border: #373b3e;
        --navbar-hover: rgba(255, 255, 255, 0.1);
    }
}

body {
    min-width: 320px;
}

.navbar {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--navbar-border) !important;
    height: 56px;
    padding: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .navbar .nav-link, .navbar .navbar-brand, .navbar .btn-link {
        color: var(--navbar-text) !important;
    }

        .navbar .nav-link:hover, .navbar .navbar-brand:hover {
            background-color: var(--navbar-hover);
            border-radius: 4px;
        }

.navbar-brand {
    font-weight: bold;
    min-width: 120px;
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
    padding-inline: 0.5rem;
}

/* Squeeze elements on micro-screens so they fit inside 320px */
@media (max-width: 359.98px) {
    /* 1. Squeeze the container edges */
    .navbar .container-fluid {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* 2. Shrink the Brand text and margins */
    .navbar-brand {
        min-width: auto !important;
        font-size: 0.95rem; /* Slightly smaller text */
        margin-right: 0 !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* 3. Aggressively shrink ALL nav links (User, Logout, Theme, and "...") */
    .navbar-nav .nav-link {
        min-width: 32px !important; /* Down from 45px */
        padding-left: 4px !important; /* Extremely tight padding */
        padding-right: 4px !important;
    }

        /* 4. Scale the icons down just a touch so they fit the 32px width */
        .navbar-nav .nav-link i {
            font-size: 1.05rem !important;
        }
}

.nav-link {
    font-weight: 500;
}

.all-modules-btn {
    font-size: 1.3rem;
    padding-right: 1rem;
}

.navbar-collapse {
    overflow: visible !important;
}

/* Restored Navbar Alignment */
.navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    min-width: 45px;
    justify-content: center;
}

#siteDropdown + .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    /*    margin-left: 10px;*/
}

@media (min-width: 768px) {
    #siteDropdown + .dropdown-menu {
        margin-left: 10px;
    }
}

@media (min-width: 992px) {
    .hover-dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
        right: 0 !important;
        left: auto !important;
    }
}

/* =========================================
    0.1: Module view themeing (Subtle Backgrounds & Text)
   ========================================= */
:root {
    --mod-bg-subtle: color-mix(in srgb, var(--mod-base, #6c757d) 12%, white);
    --mod-text: color-mix(in srgb, var(--mod-base, #6c757d) 90%, black);
}

[data-bs-theme="dark"] {
    --mod-bg-subtle: color-mix(in srgb, var(--mod-base, #6c757d) 15%, #212529);
    --mod-text: color-mix(in srgb, var(--mod-base, #6c757d) 80%, white);
}

/* 1. THEME BACKGROUNDS: Reach into the 'th' cells specifically */
.bg-module-subtle,
.bg-module-subtle th,
.table thead.bg-module-subtle th {
    background-color: var(--mod-bg-subtle) !important;
}

/* 2. THEME TEXT: Reach into the 'th' cells specifically */
.text-module,
.text-module th,
.table thead.text-module th,
.table thead th.text-module {
    color: var(--mod-text) !important;
}

/* 3. BORDER CLEANUP: Ensure the header doesn't have a thick dark line */
.table thead.bg-module-subtle th {
    border-bottom-width: 1px !important; /* Optional: matches your other subtle cards */
}

/* =========================================
   1. CORE LAYOUT & TYPOGRAPHY
   ========================================= */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    height: 100%;
    margin-bottom: 60px;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

h1, .h1, h2, h3, h4, h5 {
    font-weight: 800 !important;
    text-shadow: none !important;
}

h1 {
    margin-top: 0.5rem;
    font-size: calc(1.4rem + 1.2vw) !important;
}

h2 {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

/* FIX: Force white headers in dark containers */
.text-white h1, .text-white h2, .text-white h3 {
    color: #fff !important;
}

/* --- MODULE ICON VISIBILITY (Theme Adaptive) --- */
.transparent-logo {
    max-height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    transition: filter 0.2s ease, mix-blend-mode 0.2s ease;
}

/* LIGHT THEME: Traditional Multiply */
[data-bs-theme="light"] .transparent-logo,
html:not([data-bs-theme="dark"]) .transparent-logo {
    mix-blend-mode: multiply;
    filter: contrast(120%);
}

/* DARK THEME: The Transparency Trick (Restored) */
[data-bs-theme="dark"] .transparent-logo {
    mix-blend-mode: screen;
    filter: invert(1) hue-rotate(180deg) brightness(1.2) contrast(110%);
}

[data-bs-theme="dark"] .text-primary {
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .text-info {
    color: #3dd5f3 !important;
}

/* Grounded "Pop" for dark Module Cards */
[data-bs-theme="dark"] .card.module-card {
    background-color: #1a1a1a !important; /* Slightly off-black */
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Extremely faint border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; /* Light, tight shadow */
    transition: background-color 0.2s ease;
}

    /* Subtle Hover (No Lift) */
    [data-bs-theme="dark"] .card.module-card:hover {
        background-color: #121212 !important; /* Subtle highlight on hover */
        border-color: rgba(255, 255, 255, 0.15) !important; /* Border becomes slightly clearer */
    }

[data-bs-theme="dark"] .module-links-box {
    /* Ensures the inner box doesn't create a secondary 'black' layer */
    background-color: transparent !important;
    `
}

/* =========================================
   2. THEME OVERRIDES (SLATE & DARKLY)
   ========================================= */
/* SLATE */
[data-skin="slate"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.badge) {
    color: #58a6ff !important;
}

[data-skin="slate"] a:hover {
    color: #85c0ff !important;
    text-decoration: underline;
}

[data-skin="slate"] .card-header {
    border-bottom-color: #444;
}

/* DARKLY */
[data-skin="darkly"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.badge) {
    /*    color: #00bc8c !important;*/
}

[data-skin="darkly"] a:hover {
    color: #3fe2c5 !important;
    text-shadow: 0 0 5px rgba(26, 188, 156, 0.3);
}

[data-skin="darkly"] .card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* CYBORG */
[data-skin="cyborg"] .form-control, [data-skin="cyborg"] .form-select, [data-skin="cyborg"] .input-group-text {
    background-color: #1a1a1a !important;
    border: 1px solid #555 !important;
    color: #fff !important;
}

[data-skin="cyborg"] .card-header {
    border-bottom: 1px solid #444;
}

/* --- FIX DARKLY/SLATE LINK BUTTON HOVER OVERRIDES --- */

/* Force WHITE text on hover for dark/colored buttons */
a.btn-primary:hover, a.btn-outline-primary:hover,
a.btn-success:hover, a.btn-outline-success:hover,
a.btn-danger:hover, a.btn-outline-danger:hover,
a.btn-info:hover, a.btn-outline-info:hover,
a.btn-secondary:hover, a.btn-outline-secondary:hover,
a.btn-dark:hover, a.btn-outline-dark:hover {
    color: #ffffff !important;
}

/* Force DARK text on hover for light/warning buttons */
a.btn-warning:hover, a.btn-outline-warning:hover,
a.btn-light:hover, a.btn-outline-light:hover {
    color: #212529 !important;
}


/* =========================================
   3A. FORMS & INPUTS (GLOBAL CORE)
   ========================================= */

/* --- Light Mode Standard --- */
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
    background-color: #ffffff;
    color: #212529;
    border-color: #dee2e6;
}

/* --- Dark Mode Standard --- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

    /* Global Focus Glow (Dark Mode) */
    [data-bs-theme="dark"] .form-control:focus,
    [data-bs-theme="dark"] .form-select:focus {
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    }

/* --- UI Component Fixes --- */
.rich-text-editor-container, .note-editable {
    background-color: #fff !important;
    color: #000 !important;
}

/* Fix Blue Selection in Dark Mode Dropdowns */
[data-bs-theme="dark"] .form-select option:checked {
    color: #ffffff !important;
    background-color: #0d6efd !important;
    box-shadow: 0 0 10px 100px #0d6efd inset !important;
}

/* --- Legacy/Specific Overrides (Keep if needed for older inputs) --- */
[data-bs-theme="dark"] #bannerFilter,
[data-bs-theme="dark"] .input-group-text.border-info {
    border-color: #6ea8fe !important;
    color: #ffffff !important;
    box-shadow: none;
}

    [data-bs-theme="dark"] #bannerFilter::placeholder {
        color: rgba(255, 255, 255, 0.6) !important;
    }

/* --- HIGH-VISIBILITY DARK MODE TOGGLES --- */
[data-bs-theme="dark"] .form-switch .form-check-input {
    /* 1. Light track for the 'off' state */
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

    [data-bs-theme="dark"] .form-switch .form-check-input:checked {
        /* 3. Revert to module primary color for the 'on' state track */
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        /* 4. Pure white knob for the 'on' state */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    }

/* Optional: Slight glow on hover to help with visibility */
[data-bs-theme="dark"] .form-check-input:hover {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.15) !important;
    cursor: pointer;
}

/* =========================================
   3B. JUMP GROUPS & SMART FILTERS (COLOURED)
   ========================================= */

/* --- 1. STRICT SQUARE SHAPE (Structure) --- */
.jump-group .input-group-text,
.jump-group .form-control,
.jump-group .btn {
    border-radius: 0 !important;
}

.jump-group .input-group-text {
    border-right-width: 0 !important;
}

.jump-group .form-control {
    border-left-width: 0 !important;
}

    /* --- 2. REMOVE WIDE FOCUS GLOW --- */
    .jump-group .form-control:focus {
        box-shadow: none !important;
    }

/* --- 3. FILTER INPUTS (The Cyan "Info" Group) --- */
/* Applies to Light AND Dark mode to keep them coloured */

/* Target the Icon (.border-info) AND the Input next to it */
.jump-group .border-info,
.jump-group .border-info + .form-control {
    border-color: #0dcaf0 !important; /* Bootstrap Cyan */
}

/* Focus State for Filters */
.jump-group:focus-within .border-info,
.jump-group:focus-within .border-info + .form-control {
    border-color: #3dd5f3 !important; /* Brighter Cyan on focus */
}

/* --- 4. JUMP INPUTS (The "Slate Black" Group) --- */
/* These are the specific overrides for the "Jump to Transaction" box */

/* SLATE SKIN: Stealth Black for JUMP boxes only */
[data-skin="slate"] .jump-group .border-slate-black,
[data-skin="slate"] .jump-group .border-slate-black + .form-control,
[data-skin="slate"] .jump-group .border-slate-black ~ .btn {
    border-color: #1a1a1a !important;
    color: var(--bs-body-color);
}

/* SLATE FOCUS: Blue for Jump Boxes */
[data-skin="slate"] .jump-group:focus-within .border-slate-black,
[data-skin="slate"] .jump-group:focus-within .border-slate-black + .form-control {
    border-color: #58a6ff !important;
}

/* CYBORG SKIN: Electric Blue for Everything */
[data-skin="cyborg"] .jump-group .input-group-text,
[data-skin="cyborg"] .jump-group .form-control,
[data-skin="cyborg"] .jump-group .btn {
    border-color: var(--bs-primary) !important;
}

    [data-skin="cyborg"] .jump-group .input-group-text i {
        color: var(--bs-primary) !important;
    }

/* --- 5. DARK MODE CLEANUP --- */
/* Prevent ghost lines, but DO NOT change colors here */
[data-bs-theme="dark"] .jump-group .input-group-text {
    border-right: 0px solid transparent !important;
}

[data-bs-theme="dark"] .jump-group .form-control {
    border-left: 0px solid transparent !important;
}

/* GENERIC DARK MODE CLEANUP */
[data-bs-theme="dark"] .jump-group .input-group-text {
    border-right: 0px solid transparent !important;
}

[data-bs-theme="dark"] .jump-group .form-control {
    border-left: 0px solid transparent !important;
}

/* =========================================
   4. TABLES & GRIDS (UPDATED)
   ========================================= */
.table thead th {
    /* REMOVED !important from these two so Module colors can win */
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
    /* KEEP these structural styles */
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.8px;
    font-weight: 800;
    border-bottom: 2px solid var(--bs-border-color) !important;
}

/* REMOVED !important from here too */
[data-bs-theme="dark"] .table thead th {
    background-color: #141619;
}

.grid-link-name {
    color: var(--bs-link-color) !important;
    font-weight: 700;
    text-decoration: underline;
}

.table-responsive::-webkit-scrollbar {
    width: 12px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* DARK MODE BUTTON CONTRAST FIXES (Restored) */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #e9ecef;
    --bs-btn-border-color: #adb5bd;
    --bs-btn-hover-bg: #e9ecef;
    --bs-btn-hover-color: #000;
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #6ea8fe;
    --bs-btn-border-color: #6ea8fe;
    --bs-btn-hover-bg: #6ea8fe;
    --bs-btn-hover-color: #000;
}

[data-bs-theme="dark"] .btn-outline-info {
    color: #6ea8fe !important;
    border-color: #6ea8fe !important;
    background-color: transparent !important;
}

    [data-bs-theme="dark"] .btn-outline-info:hover {
        background-color: #6ea8fe !important;
        border-color: #6ea8fe !important;
        color: #000 !important;
    }


/* Ensure all shop grid cards have a unified background in dark themes */
@media (max-width: 991.98px) {
    .shop-card-table tr {
        background-color: var(--bs-table-bg) !important;
    }

    .shop-card-table td {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .shop-card-table tr:hover {
        background-color: var(--bs-table-hover-bg) !important;
    }
}


/* =========================================
   5. PAGER THEMING (Bulletproof against Bootswatch)
   ========================================= */
#logPagerContainer .card-footer {
    background-color: var(--bs-tertiary-bg) !important;
    border-top: 2px solid var(--bs-border-color) !important;
}

[data-bs-theme="dark"] #logPagerContainer .card-footer {
    background-color: #141619 !important;
}

/* Dark Mode Pager Labels */
[data-bs-theme="dark"] #logPagerContainer .small,
[data-bs-theme="dark"] #logPagerContainer .text-muted,
[data-bs-theme="dark"] #logPagerContainer .input-group-text {
    color: #e9ecef !important;
    opacity: 1 !important;
}

[data-bs-theme="dark"] #logPagerContainer .fw-bold {
    color: #ffffff !important;
}

/* --- 1. OVERRIDE FLATLY'S PAGINATION VARIABLES --- */
.pagination {
    --bs-pagination-color: var(--mod-base, #0d6efd) !important;
    --bs-pagination-bg: var(--bs-body-bg) !important;
    --bs-pagination-border-color: var(--bs-border-color-translucent, #dee2e6) !important;
    --bs-pagination-hover-color: var(--mod-base, #0a58ca) !important;
    --bs-pagination-hover-bg: var(--bs-tertiary-bg) !important;
    --bs-pagination-hover-border-color: var(--bs-border-color-translucent, #dee2e6) !important;
    --bs-pagination-active-color: #ffffff !important;
    --bs-pagination-active-bg: var(--mod-base, #0d6efd) !important;
    --bs-pagination-active-border-color: var(--mod-base, #0d6efd) !important;
    --bs-pagination-disabled-color: var(--bs-secondary-color) !important;
    --bs-pagination-disabled-bg: var(--bs-secondary-bg) !important;
    --bs-pagination-disabled-border-color: var(--bs-border-color-translucent, #dee2e6) !important;
}

/* Dark mode variable adjustments */
[data-bs-theme="dark"] .pagination {
    --bs-pagination-color: var(--mod-text, #fff) !important;
    --bs-pagination-hover-bg: var(--mod-bg-subtle, #2b3035) !important;
    --bs-pagination-hover-color: #ffffff !important;
}

/* --- 2. FORCE LINKS TO OBEY OUR VARIABLES --- */
/* This cuts through any high-specificity Bootswatch selectors */
.pagination .page-link {
    color: var(--bs-pagination-color) !important;
    background-color: var(--bs-pagination-bg) !important;
    border-color: var(--bs-pagination-border-color) !important;
}

    .pagination .page-link:hover,
    .pagination .page-link:focus {
        color: var(--bs-pagination-hover-color) !important;
        background-color: var(--bs-pagination-hover-bg) !important;
    }

.pagination .page-item.active .page-link {
    color: var(--bs-pagination-active-color) !important;
    background-color: var(--bs-pagination-active-bg) !important;
    border-color: var(--bs-pagination-active-border-color) !important;
}

.pagination .page-item.disabled .page-link {
    color: var(--bs-pagination-disabled-color) !important;
    background-color: var(--bs-pagination-disabled-bg) !important;
    border-color: var(--bs-pagination-disabled-border-color) !important;
}

/* =========================================
   6. OVERFLOW SPLIT-TAB SYSTEM
   ========================================= */
.tabs-wrapper {
    display: flex;
    align-items: flex-end;
    background-color: var(--bs-body-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    height: 42px;
}

.static-tabs {
    flex-shrink: 0;
    z-index: 10;
    background-color: var(--bs-body-tertiary-bg);
    border-bottom: none !important;
}

.dynamic-tabs-container {
    flex-grow: 1;
    min-width: 0; /* FIX: Prevents flex horizontal blowout WITHOUT hiding the dropdown */
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.dynamic-tab-item {
    cursor: grab;
}

    .dynamic-tab-item:active {
        cursor: grabbing;
    }

/* Optional: Slight opacity when dragging */
.ui-sortable-helper {
    opacity: 0.9;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.nav-tabs-scrollable {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden; /* Changed from auto to strictly hide */
    height: 100%;
    align-items: flex-end;
    border-bottom: none !important;
}

.tabs-wrapper .nav-link {
    margin-bottom: 0;
    border-bottom: none;
    white-space: nowrap;
    border-radius: 0;
}

    .tabs-wrapper .nav-link.active {
        position: relative;
        background-color: var(--bs-body-bg);
        border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
        z-index: 12;
    }

        .tabs-wrapper .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: var(--bs-body-bg);
        }

.tabs-divider {
    width: 1px;
    height: 24px;
    background-color: var(--bs-border-color);
    opacity: 0.5;
    margin: 0 4px;
    align-self: center;
}

/* Dropdown Toggle Tweaks */
.hidden-tabs-btn {
    background-color: var(--bs-body-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color) !important;
}

    .hidden-tabs-btn:hover, .hidden-tabs-btn[aria-expanded="true"] {
        background-color: var(--bs-secondary-bg) !important;
    }

    .hidden-tabs-btn::after {
        display: none; /* Hide default bootstrap caret */
    }

/* =========================================
   7. SUMMERNOTE & MAILER EDITOR FIXES
   ========================================= */
.note-editor.note-frame {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    min-height: 600px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

    .note-editor.note-frame:not(.fullscreen) {
        max-width: 950px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1.5rem !important;
    }

.note-editing-area {
    flex: 1 0 auto !important;
}

.note-toolbar {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.note-btn {
    color: #333 !important;
    background-color: #fff !important;
    border-color: #dae0e5 !important;
}

.editor-expand-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    transition: transform 0.2s;
}

/* TRUE FULLSCREEN RESTORATION */
.note-editor.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    z-index: 3000 !important;
    border: 25px solid rgba(0, 0, 0, 0.6) !important;
    box-sizing: border-box !important;
    background-clip: padding-box !important;
}

    .note-editor.fullscreen .editor-expand-btn {
        position: fixed !important;
        z-index: 3100 !important;
        right: 65px !important;
        bottom: 35px !important;
    }

    .note-editor.fullscreen .note-editable {
        height: calc(100vh - 150px) !important;
    }

/* =========================================
   8. MODULE SPECIFIC STYLES
   ========================================= */

/* --- MULTIMAILER --- */
#listFilters, #listTemplates {
    height: 305px !important;
    min-height: 305px;
}

.multimailer-wrapper .form-select {
    padding-inline: 8px;
}

    .multimailer-wrapper .form-select option {
        padding: 6px 12px;
        border-bottom: 1px solid var(--bs-border-color);
    }

#tagEditorModal .modal-dialog {
    max-width: 700px; /* Adjust this value to whatever width you need */
}

/* --- BANNER CARDS --- */
.banner-hover-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid var(--bs-border-color);
}

    .banner-hover-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 .5rem 1.5rem rgba(0,0,0,0.15) !important;
        cursor: pointer;
    }

[data-bs-theme="dark"] .banner-hover-card {
    background-color: #1a1d20 !important;
    border: 1px solid #32383e !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    [data-bs-theme="dark"] .banner-hover-card:hover {
        border-color: #6ea8fe !important;
        box-shadow: 0 0 20px rgba(110, 168, 254, 0.15) !important;
    }

.banner-example-container {
    height: 120px;
    overflow: hidden;
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .banner-example-container {
    background-color: #000000 !important;
    border-color: #444 !important;
}


/* --- FOLDER BROWSER FIX (Mobile First - 3 Across) --- */
.folder-item {
    transition: background-color 0.15s ease-in-out;
    border-radius: 8px;
    /* MOBILE FIRST: Exactly 3 per row. 
       calc((100% - 1rem) / 3) accounts for TWO Bootstrap 'gap-2' (0.5rem) spaces */
    width: calc((100% - 1rem) / 3);
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 4px; /* Tighter padding for mobile */
    text-align: center;
}

    .folder-item a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-decoration: none;
        color: inherit;
        width: 100%;
    }

    .folder-item:hover {
        background-color: rgba(var(--bs-emphasis-color-rgb), 0.07);
        cursor: pointer;
    }

    /* Base (Mobile) Image Size - Shrunk from 48px to 36px */
    .folder-item img.transparent-logo,
    .folder-item img {
        width: 36px;
        height: 36px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 6px;
        object-fit: contain;
    }

    /* Base (Mobile) Text Size - Shrunk slightly to prevent wrapping */
    .folder-item span,
    .folder-item strong {
        font-size: 0.75rem;
        line-height: 1.2;
        display: block;
        width: 100%;
        word-wrap: break-word;
    }

/* DESKTOP/TABLET OVERRIDE: Snap back to standard size */
@media (min-width: 576px) {
    .folder-item {
        width: 120px;
        min-width: 120px;
        padding: 10px 5px;
    }

        /* Restore 48px icons on larger screens */
        .folder-item img.transparent-logo,
        .folder-item img {
            width: 48px;
            height: 48px;
            margin-bottom: 8px;
        }

        /* Restore larger text on larger screens */
        .folder-item span,
        .folder-item strong {
            font-size: 0.85rem;
        }
}


/* --- DYNAMIC OBJECT TAGS --- */
.ms-tag-block {
    border: 2px solid #dee2e6;
    border-radius: 6px;
    margin: 10px 0;
    background: #fff;
    position: relative;
}

.ms-tag-header {
    background-color: #f8f9fa;
    padding: 8px 12px;
    border-bottom: 1px solid #dee2e6;
    font-family: monospace;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.ms-tag-preview {
    padding: 10px;
    min-height: 50px;
    pointer-events: none;
    opacity: 0.9;
}

/* =========================================
   9. EMAIL PREVIEW & RESET
   ========================================= */
.preview-backdrop {
    background-color: #343a40;
    border: 1px solid #212529;
    padding: 60px 20px;
    border-radius: 8px;
    overflow-x: auto;
    display: flex;
    justify-content: center;
    min-height: 400px;
    position: relative;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
}

[data-bs-theme="dark"] .preview-backdrop {
    background-color: #121416;
}

.preview-paper {
    background-color: #ffffff;
    color: #000000;
    width: 100%;
    max-width: 800px;
    min-height: 600px;
    margin: 0 auto;
    border-radius: 2px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

    /* EMAIL RESET */
    .note-editor .note-editable a, .ms-tag-preview a, .preview-paper a {
        color: inherit;
        text-decoration: none;
    }

.note-editor .note-editable, .ms-tag-preview, .preview-paper {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* =========================================
   10. PRINT STYLES
   ========================================= */
@media print {
    body * {
        visibility: hidden;
    }

    #transactionTabsContent .tab-pane.active, #transactionTabsContent .tab-pane.active * {
        visibility: visible;
    }

    #transactionTabsContent .tab-pane.active {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background-color: white !important;
    }

    .btn, .no-print, .nav-tabs {
        display: none !important;
    }
}

/* =========================================
   11. ANIMATIONS & LOG GRID
   ========================================= */
@keyframes flash-flood {
    0% {
        box-shadow: inset 0 0 0 100px #ffc107 !important;
        color: #000 !important;
        border-color: #ffc107 !important;
    }

    100% {
        box-shadow: inset 0 0 0 0 transparent !important;
        border-color: var(--bs-border-color);
    }
}

.form-control.input-updated-anim {
    animation: flash-flood 1.5s ease-out;
}

/* Restored: Log Grid Specifics */
#clearUserSearch {
    color: #ff6b6b !important;
    transition: transform 0.1s ease, opacity 0.2s;
}

    #clearUserSearch:hover {
        transform: translateY(-50%) scale(1.2);
        opacity: 1;
        color: #ff5252 !important;
    }

.sticky-header th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--bs-body-bg);
    box-shadow: 0 1px 0 var(--bs-border-color);
}

.log-cell .filter-icon {
    visibility: hidden;
    cursor: pointer;
    color: var(--bs-info);
    margin-left: 5px;
}

.log-cell:hover .filter-icon {
    visibility: visible;
}

#logTableContainer.table-responsive {
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    padding-left: 0 !important;
}

/* =========================================
   12. PROMINENT ACTION HEADERS (FINAL FIX)
   ========================================= */
.dropdown-action-header {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 0.5rem;
    background-color: transparent;
    color: var(--bs-info) !important;
    text-shadow: none !important;
    transition: all 0.2s ease-in-out;
}

    /* HOVER STATE (Shared) */
    .dropdown-action-header:hover,
    .dropdown-action-header:focus {
        text-decoration: none;
        cursor: pointer;
        color: #ffffff !important;
        text-shadow: none !important;
    }

/* LIGHT MODE */
[data-bs-theme="light"] .dropdown-action-header:hover {
    background-color: var(--bs-info) !important;
}

/* DARK MODE (Slate Fix) - Uses Deep Teal mix instead of brightness */
[data-bs-theme="dark"] .dropdown-action-header:hover {
    background-color: color-mix(in srgb, var(--bs-info), black 60%) !important;
    border-left: 3px solid var(--bs-info);
}

/* =========================================
   13. EXTRAS (Crop, Scrollbars)
   ========================================= */
.imgareaselect-selection {
    z-index: 9999 !important;
}

.imgareaselect-outer {
    z-index: 9998 !important;
}

.imgareaselect-border1, .imgareaselect-border2, .imgareaselect-border3, .imgareaselect-border4 {
    z-index: 9999 !important;
    border: 2px dashed #fff !important;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.scroller::-webkit-scrollbar {
    width: 6px;
}

.scroller::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.cursor-pointer {
    cursor: pointer;
}

.gap-y-1 {
    row-gap: 0.25rem;
}

/* --- Standard Dynamic Border with Overlay Fix --- */
.standard-border-left {
    position: relative;
    border-left: 0 !important;
    padding-left: 5px;
    overflow: hidden;
}

    .standard-border-left::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 5px;
        background-color: var(--module-color);
        z-index: 1;
    }

    /* The Glow Layer: Fixes saturation clipping on bright colors like red/pink */
    .standard-border-left::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 5px;
        background-color: white;
        z-index: 2;
        opacity: 0;
        mix-blend-mode: overlay; /* The secret to vibrant pulses */
        transition: opacity 0.5s ease-out;
    }

    .standard-border-left:hover::after {
        animation: glowAndSettle 1.5s ease-out forwards;
    }

@keyframes glowAndSettle {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0.8;
    }
    /* Peak glow */
    100% {
        opacity: 0.4;
    }
    /* Settled state */
}

/* --- Dark Mode Icon Brightness --- */
/* Assuming you use Bootstrap's standard data-bs-theme="dark" attribute */
/* (If you use a custom class like .theme-dark on the body, just swap it out here) */
[data-bs-theme="dark"] .module-icon,
.theme-dark .module-icon {
    filter: brightness(1.5);
}

[data-bs-theme="dark"] .rainbow-border-left .module-icon {
    filter: brightness(1);
}
/* 1. Base Border Setup */
.rainbow-border-left {
    position: relative;
    border-left: 0 !important;
    padding-left: 5px;
    overflow: hidden;
}

    /* 2. The Gradient Element */
    .rainbow-border-left::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 5px;
        z-index: 1;
        /* Just one full cycle is needed here */
        background: linear-gradient(to bottom, #ff2400, #e8b71d, #1de840, #1ddde8, #2b1de8, #dd00f3, #ff2400);
        /* 120% stretches the gradient so Purple lands exactly at the bottom of the card */
        background-size: 100% 120%;
    }

    /* 3. The Hover Trigger */
    .rainbow-border-left:hover::before {
        animation: rainbowBorderSlide 1.5s linear infinite;
    }

/* 4. The Animation Logic */
@keyframes rainbowBorderSlide {
    0% {
        background-position: 0% 0%;
    }

    100% {
        /* To slide exactly 1 full gradient tile (120%), the math requires 600% */
        background-position: 0% 600%;
    }
}

/*multipicture*/

/* Make large file warnings punchier in dark mode */
[data-bs-theme="dark"] .text-danger.fw-bold {
    color: #ff6b6b !important;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.2);
}

[data-bs-theme="dark"] .text-warning.fw-bold {
    color: #ffd93d !important;
}

/* --- THEME DROPDOWN: ACTIVE ITEM STYLING --- */
.theme-item-active {
    font-weight: 700 !important;
    /* Force high-contrast text for Slate/Dark themes */
    color: #ffffff !important;
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    position: relative;
    z-index: 1;
}

    /* The Underline - Made thicker and "Glowier" for Slate */
    .theme-item-active::after {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        height: 4px; /* Thicker for dark backgrounds */
        background-color: var(--bs-primary);
        /* Add a subtle glow so the color doesn't look 'flat' on Slate */
        box-shadow: 0 -2px 10px rgba(var(--bs-primary-rgb), 0.5);
        z-index: 2;
    }

/* --- NAVBAR TOGGLE: ICON INDICATOR --- */
#themeDropdown.active-indicator {
    border-bottom: 3px solid var(--bs-primary);
    padding-bottom: 1px !important;
    transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

/* --- SLATE SPECIFIC OVERRIDES --- */
[data-skin="slate"] .theme-item-active {
    color: #ffffff !important;
    /* Slate's primary blue is a bit dull; we'll brighten it for the UI */
    background-color: #3e444c !important;
}

    [data-skin="slate"] .theme-item-active::after {
        background-color: #0d6efd !important;
        box-shadow: 0 0 12px rgba(13, 110, 253, 0.8);
    }

[data-skin="slate"] #themeDropdown.active-indicator {
    border-bottom-color: #0d6efd !important;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.5);
}

/* =========================================
   14. MOBILE CARDS GRID (Global Table Override)
   ========================================= */
/* Strip table wrappers on mobile */
.mobile-card-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

.table-mobile-cards thead {
    display: none;
}

.table-mobile-cards,
.table-mobile-cards tbody {
    display: block;
    width: 100%;
}

    /* Each Row becomes a distinct Card on Mobile */
    .table-mobile-cards tr {
        display: flex !important;
        flex-wrap: wrap;
        margin-bottom: 1rem !important;
        background-color: var(--bs-body-bg) !important;
        border: 1px solid var(--bs-border-color) !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
        padding: 0 !important;
        overflow: hidden;
    }

    .table-mobile-cards td {
        border: none !important;
        padding: 0.5rem 1rem !important;
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }

        /* 1. ROW 1: ID Row */
        .table-mobile-cards td.cell-id {
            width: 100% !important;
            padding-top: 0.75rem !important;
            padding-bottom: 0 !important;
        }

        /* 2. ROW 2: Title Row */
        .table-mobile-cards td.cell-title {
            width: 100% !important;
            /*border-bottom: 1px solid var(--bs-border-color) !important;*/ /* Divider line */
            /*margin-bottom: 0.5rem;*/
            padding-bottom: 0.75rem !important;
        }

        /* 3. ROW 3: Stat Columns (3 across) */
        .table-mobile-cards td.cell-stat {
            width: 33.33% !important;
            padding-top: 0.25rem !important;
            padding-bottom: 0.75rem !important;
        }

        /* Mobile Data Labels */
        .table-mobile-cards td[data-label]::before {
            content: attr(data-label);
            font-weight: 700;
            color: var(--bs-secondary-color);
            font-size: 0.65rem;
            text-transform: uppercase;
            margin-bottom: 0.35rem;
            letter-spacing: 0.5px;
        }

        /* 4. ROW 4: Footer / Status Row */
        .table-mobile-cards td.cell-status {
            width: 100% !important;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            background-color: var(--bs-tertiary-bg);
            border-top: 1px solid var(--bs-border-color) !important;
            padding: 0.5rem 1rem !important;
            /* ADD THIS LINE to perfectly space the icons */
            gap: 0.5rem;
        }

/* --- MOBILE OPTIMIZED SHOP TABLES --- */
@media (max-width: 991.98px) {
    .shop-card-table thead {
        display: none;
    }

    .shop-card-table, .shop-card-table tbody {
        display: block;
        width: 100%;
    }

        .shop-card-table tr {
            display: grid;
            gap: 0.25rem 0.75rem;
            padding: 0.85rem 0.75rem;
            border-bottom: 1px solid var(--bs-border-color-translucent);
            align-items: center;
            /* Fix: Apply background to the row to prevent patchy banding */
            background-color: var(--bs-table-bg) !important;
        }

        .shop-card-table td {
            display: block;
            padding: 0 !important;
            border: none !important;
            min-width: 0;
            /* Fix: Strip cell-level backgrounds/shadows */
            background-color: transparent !important;
            box-shadow: none !important;
        }

    /* A. PRODUCTS GRID */
    .product-card-table tr {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "code action"
            "name action"
            "fmt  action"
            "price action"
            "stat  action";
    }

    .product-card-table td:nth-child(1) {
        grid-area: code;
        font-weight: bold;
        font-size: 0.8rem;
        color: var(--bs-secondary);
    }

    .product-card-table td:nth-child(2) {
        grid-area: name;
        font-weight: bold;
        font-size: 1.05rem;
        margin-bottom: 2px;
    }

    .product-card-table td:nth-child(3) {
        grid-area: fmt;
    }

    .product-card-table td:nth-child(4) {
        grid-area: price;
        font-weight: bold;
    }

    .product-card-table td:nth-child(5) {
        grid-area: stat;
        margin-top: 4px;
    }

    .product-card-table td:nth-child(6) {
        grid-area: action;
        justify-self: end;
        align-self: center;
    }

    /* B. TRANSACTIONS GRID */
    .transaction-card-table tr {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "tid  action"
            "date action"
            "cust action"
            "stat action"
            "total action";
    }

    .transaction-card-table td:nth-child(1) {
        grid-area: tid;
        font-weight: bold;
        color: var(--bs-primary);
    }

    .transaction-card-table td:nth-child(2) {
        grid-area: date;
        font-size: 0.85rem;
        color: var(--bs-secondary);
    }

    .transaction-card-table td:nth-child(3) {
        grid-area: cust;
        margin: 4px 0;
    }

    .transaction-card-table td:nth-child(4) {
        grid-area: stat;
    }

    .transaction-card-table td:nth-child(5) {
        grid-area: total;
        font-weight: bold;
        margin-top: 2px;
    }

    .transaction-card-table td:nth-child(6) {
        display: none;
    }
    /* Hide Items count on mobile */
    .transaction-card-table td:nth-child(7) {
        grid-area: action;
        justify-self: end;
        align-self: center;
    }

    /* C. VOUCHERS GRID */
    .voucher-card-table tr {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "code action"
            "name action"
            "val  action"
            "date action"
            "stat action";
    }

    .voucher-card-table td:nth-child(1) {
        grid-area: code;
        font-family: monospace;
        font-weight: bold;
        color: var(--bs-warning);
    }

    .voucher-card-table td:nth-child(2) {
        grid-area: name;
        font-weight: bold;
        font-size: 1.05rem;
    }

    .voucher-card-table td:nth-child(3) {
        grid-area: val;
        font-weight: bold;
    }

    .voucher-card-table td:nth-child(4) {
        grid-area: date;
        font-size: 0.85rem;
        color: var(--bs-secondary);
    }

    .voucher-card-table td:nth-child(5) {
        grid-area: stat;
        margin-top: 4px;
    }

    .voucher-card-table td:nth-child(6) {
        grid-area: action;
        justify-self: end;
        align-self: center;
    }
}




/* =========================================
   DESKTOP OVERRIDE (min-width: 992px)
   ========================================= */
@media (min-width: 992px) {
    .mobile-card-wrapper {
        background: var(--bs-body-bg) !important;
        box-shadow: var(--bs-box-shadow-sm) !important;
        border: var(--bs-border-width) solid var(--bs-border-color) !important;
        border-radius: var(--bs-border-radius) !important;
    }

    .table-mobile-cards {
        display: table !important;
    }

        .table-mobile-cards thead {
            display: table-header-group !important;
        }

        /* FIX: Reconnects the rows to the header columns */
        .table-mobile-cards tbody {
            display: table-row-group !important;
        }

        /* Snap back to standard rows */
        .table-mobile-cards tr {
            display: table-row !important;
            margin-bottom: 0 !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            background-color: transparent !important;
        }

        /* Snap back to standard columns */
        .table-mobile-cards td {
            display: table-cell;
            width: auto !important;
            padding: 0.75rem !important;
            border-bottom: 1px solid var(--bs-border-color) !important;
        }

            /* Hide the mobile data labels on desktop */
            .table-mobile-cards td[data-label]::before {
                display: none !important;
            }

            /* Remove mobile-specific status background */
            .table-mobile-cards td.cell-status {
                background-color: transparent !important;
                border-top: none !important;
                padding: 0.75rem 1.5rem !important;
            }
}