/*
 * ==========================================
 * Premium Minimalist Corporate Theme
 * Palette: Deep Slate & Champagne Gold
 * Typography: Roboto (Headings) & Open Sans (Body)
 * ==========================================
 */

/* 1. Typography & Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    --accent-gold: #c5a880; /* Elegant bronze/champagne gold */
    --accent-gold-hover: #b39266;
    --accent-glow: rgba(197, 168, 128, 0.15);

    --card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.03);
    --card-shadow-hover: 0 12px 30px -4px rgba(15, 23, 42, 0.08);
}

/* Base Body Styles & Typography Override */
body, p, span, table, input, button, select, textarea, .form-control, .btn {
    font-family: 'Open Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .logo-txt, .logo-txt-lg, .card-title, .page-title {
    font-family: 'Roboto', sans-serif !important;
    letter-spacing: -0.02em !important;
}

/* 2. Premium Sidebar Navigation Redesign */
.vertical-menu {
    background: linear-gradient(180deg, var(--slate-900) 0%, var(--slate-950) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15) !important;
}

.navbar-brand-box {
    background: var(--slate-900) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#vertical-menu-btn {
    color: #ffffff !important;
    transition: color 0.2s ease;
}
#vertical-menu-btn:hover {
    color: var(--accent-gold) !important;
}

#sidebar-menu {
    padding-top: 24px !important;
}

#sidebar-menu .menu-title {
    color: #64748b !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 11px !important;
    padding: 12px 20px !important;
}

#sidebar-menu ul li a {
    color: #e2e8f0 !important;
    margin: 1px 14px !important;
    padding: 7px 16px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#sidebar-menu ul li a i,
#sidebar-menu ul li a svg {
    font-size: 1.05rem !important;
    margin-right: 10px !important;
    color: #64748b !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Sidebar Hover State */
#sidebar-menu ul li a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

#sidebar-menu ul li a:hover i,
#sidebar-menu ul li a:hover svg {
    transform: scale(1.18) !important;
    filter: drop-shadow(0 0 6px currentColor) !important;
}

/* Sidebar Active State (Slate-Gold Highlight) */
#sidebar-menu ul li.mm-active>a {
    color: #ffffff !important;
    background-color: rgba(197, 168, 128, 0.08) !important;
    border-left: 3px solid var(--accent-gold) !important;
    font-weight: 600 !important;
}

#sidebar-menu ul li.mm-active>a i,
#sidebar-menu ul li.mm-active>a svg {
    filter: drop-shadow(0 0 6px currentColor) !important;
    transform: scale(1.1) !important;
}

/* Specific Sidebar Icon Colorful Palette */
#sidebar-menu ul li a i.text-dashboard { color: #38bdf8 !important; } /* Sky Blue */
#sidebar-menu ul li a i.text-masters { color: #c084fc !important; } /* Soft Purple */
#sidebar-menu ul li a i.text-leads { color: #34d399 !important; } /* Emerald */
#sidebar-menu ul li a i.text-stocks { color: #6366f1 !important; } /* Indigo */
#sidebar-menu ul li a i.text-purchase { color: #fbbf24 !important; } /* Amber */
#sidebar-menu ul li a i.text-sales { color: #f472b6 !important; } /* Pink */
#sidebar-menu ul li a i.text-ledger { color: #22d3ee !important; } /* Cyan */
#sidebar-menu ul li a i.text-hrm { color: #2dd4bf !important; } /* Teal */
#sidebar-menu ul li a i.text-confirm { color: #a3e635 !important; } /* Lime */
#sidebar-menu ul li a i.text-submission { color: #fb7185 !important; } /* Rose */
#sidebar-menu ul li a i.text-old-leads { color: #94a3b8 !important; } /* Slate */
#sidebar-menu ul li a i.text-category { color: #fbbf24 !important; } /* Golden Amber */
#sidebar-menu ul li a i.text-jobs { color: #f43f5e !important; } /* Crimson Rose */

/* Active overrides for icon state to preserve unique color identity */
#sidebar-menu ul li.mm-active>a i {
    color: inherit !important;
}

/* Explicitly remove browser-default list styles and bullets */
#sidebar-menu,
#sidebar-menu ul,
#sidebar-menu ul li,
#sidebar-menu ul li ul.sub-menu,
#sidebar-menu ul li ul.sub-menu li {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
}

/* Nested Submenu Adjustments with Animated Glowing Bullet Dots (Standard Sidebar) */
#sidebar-menu ul li ul.sub-menu {
    background-color: transparent !important;
    padding-left: 8px !important;
}

#sidebar-menu ul li ul.sub-menu li a {
    position: relative !important;
    padding: 4px 16px 4px 42px !important;
    color: #cbd5e1 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#sidebar-menu ul li ul.sub-menu li a::before {
    content: "" !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: #334155 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#sidebar-menu ul li ul.sub-menu li a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
}

#sidebar-menu ul li ul.sub-menu li a:hover::before {
    background-color: var(--accent-gold) !important;
    box-shadow: 0 0 8px var(--accent-gold) !important;
    transform: translateY(-50%) scale(1.3) !important;
}

#sidebar-menu ul li ul.sub-menu li a.active {
    color: var(--accent-gold) !important;
    background-color: rgba(197, 168, 128, 0.06) !important;
    font-weight: 600 !important;
}

#sidebar-menu ul li ul.sub-menu li a.active::before {
    background-color: var(--accent-gold) !important;
    box-shadow: 0 0 8px var(--accent-gold) !important;
    transform: translateY(-50%) scale(1.3) !important;
}

/* Floating Submenu Dropdown Panel in Collapsed Sidebar State (body[data-sidebar-size=sm]) */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul {
    background: var(--slate-950) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    border-radius: 10px !important;
    padding: 8px 0 !important;
    left: 70px !important;
    width: 260px !important; /* Increased width to prevent text from coming out of the box */
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul li a {
    padding: 8px 16px 8px 36px !important;
    color: #cbd5e1 !important;
    width: 260px !important; /* Force nested links to match container width */
    white-space: nowrap !important; /* Prevent text wrapping and overflow */
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul li a::before {
    left: 16px !important;
}

/* Styled the floated header to match the deep-slate menu and glow in gold */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a,
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a.has-arrow,
body[data-sidebar-size=sm][data-sidebar=dark] .vertical-menu #sidebar-menu > ul > li:hover > a,
body[data-sidebar-size=sm][data-sidebar=brand] .vertical-menu #sidebar-menu > ul > li:hover > a,
body[data-sidebar-size=sm][data-sidebar=light] .vertical-menu #sidebar-menu > ul > li:hover > a,
body[data-sidebar-size=sm][data-layout-mode=dark] .vertical-menu #sidebar-menu > ul > li:hover > a {
    background: var(--slate-950) !important;
    color: var(--accent-gold) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: none !important;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2) !important;
    width: 260px !important;
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a span,
body[data-sidebar-size=sm][data-sidebar=dark] .vertical-menu #sidebar-menu > ul > li:hover > a span,
body[data-sidebar-size=sm][data-sidebar=brand] .vertical-menu #sidebar-menu > ul > li:hover > a span,
body[data-sidebar-size=sm][data-sidebar=light] .vertical-menu #sidebar-menu > ul > li:hover > a span,
body[data-sidebar-size=sm][data-layout-mode=dark] .vertical-menu #sidebar-menu > ul > li:hover > a span {
    color: var(--accent-gold) !important;
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a i,
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a svg {
    color: var(--accent-gold) !important;
}

#sidebar-menu .has-arrow:after {
    color: #475569 !important;
}

/* 3. Sleek Vibrant Royal Blue Topbar Redesign */
#page-topbar {
    background: #1a56db !important; /* Elegant Vibrant Royal Blue */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    left: 0 !important;
}

.navbar-header {
    background-color: transparent !important;
    padding-right: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Force elegant white contrast for header icons & items on dull royal blue topbar background */
#page-topbar .header-item {
    color: #ffffff !important;
    transition: all 0.25s ease !important;
}

#page-topbar .header-item:hover {
    color: var(--accent-gold) !important;
}

#page-topbar .header-item i,
#page-topbar .header-item svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
    transition: all 0.25s ease !important;
}

#page-topbar .header-item:hover i,
#page-topbar .header-item:hover svg {
    color: var(--accent-gold) !important;
    stroke: var(--accent-gold) !important;
}

/* Force logo box alignment and beautiful display */
.navbar-brand-box {
    background: transparent !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: none !important;
    width: 250px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 20px !important;
}

/* Display beautiful light logo and style text as white */
.logo-dark {
    display: none !important;
}

.logo-light {
    display: flex !important;
    align-items: center !important;
}

/* Logo brand text styling */
.logo-txt {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    color: #000000 !important;
    letter-spacing: -0.03em !important;
    margin-left: 8px !important;
    vertical-align: middle;
    text-transform: none !important;
}

/* Reposition menu button right after brand box, clear negative margins */
body:not([data-sidebar-size=sm]) #vertical-menu-btn {
    margin-left: 15px !important;
    margin-right: 15px !important;
}

/* 4. Elegant Cards & Layout Components */
.card {
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    box-shadow: var(--card-shadow) !important;
    background: #ffffff !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover) !important;
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    padding: 18px 24px !important;
}

.card-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--slate-900) !important;
}

/* 5. Modern Slate & Gold Typography Enhancements */
.page-title {
    font-weight: 700 !important;
    color: var(--slate-900) !important;
}

.breadcrumb-item a {
    color: #64748b !important;
    font-weight: 500;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--accent-gold) !important;
}

.breadcrumb-item.active {
    color: var(--slate-900) !important;
    font-weight: 600;
}

/* 6. Premium Form Controls & Buttons */
.form-control, .form-select {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    background-color: #ffffff !important;
    color: var(--slate-900) !important;
    transition: all 0.2s ease-in-out !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none !important;
}

/* Custom Slate & Gold Buttons */
.btn-primary {
    background: var(--slate-900) !important;
    border-color: var(--slate-900) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--accent-gold) !important;
    border-color: var(--accent-gold) !important;
    color: var(--slate-950) !important;
    box-shadow: 0 4px 12px var(--accent-glow) !important;
}

/* 7. Beautiful Tables Redesign */
.table {
    border-color: rgba(15, 23, 42, 0.04) !important;
    vertical-align: middle !important;
}

.table thead th {
    background-color: var(--slate-100) !important; /* Premium light slate-blue background */
    color: var(--slate-900) !important; /* Crisp high contrast dark slate text */
    font-weight: 700 !important;
    text-transform: none !important; /* Remove uppercase as requested */
    font-size: 11.5px !important;
    letter-spacing: 0.04em !important;
    font-family: 'Roboto', sans-serif !important;

    /* Horizontal properties are safe to enforce with !important to align perfectly */
    border-left: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-right: 1px solid rgba(15, 23, 42, 0.06) !important;

    /* Do NOT use !important on padding, border-top, or border-bottom.
       This allows DataTables' built-in scrollBody resets to override them and collapse the cloned header cells. */
    padding: 14px 16px;
    border-bottom: 2px solid rgba(15, 23, 42, 0.08);
    border-top: none;
}

/* Force dark slate color for any nested anchors, icons, or text inside global table headers */
.table thead th a,
.table thead th span,
.table thead th i {
    color: var(--slate-900) !important;
}

/* Force high-visibility dark sorting arrows on light headers */
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    color: rgba(15, 23, 42, 0.3) !important;
    opacity: 0.8 !important;
}

table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    color: var(--slate-900) !important;
    opacity: 1 !important;
}

.table tbody td {
    padding: 14px 16px !important;
    color: var(--slate-800) !important;
    font-size: 14px !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(248, 250, 252, 0.5) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(197, 168, 128, 0.03) !important;
}

/* 8. Modern Scrollbar Override */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-gold);
}

/* 9. Premium Lead Groups Page Overrides (Zero PHP Changes) */
.pc-container {
    padding-top: 24px !important;
}

/* Card Titles and Headers */
.card-header h5 {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--slate-900) !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

/* Form Styling - Labels and Inputs */
.form-label {
    font-weight: 600 !important;
    color: var(--slate-800) !important;
    font-size: 13px !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 8px !important;
}

.form-control {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    background-color: #ffffff !important;
    color: var(--slate-900) !important;
    transition: all 0.2s ease-in-out !important;
}

.form-control:focus {
    border-color: #1a56db !important;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15) !important;
}

/* Modernized Radio Buttons and Labels */
.form-check-input[type="radio"] {
    border: 2px solid #cbd5e1 !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form-check-input[type="radio"]:checked {
    background-color: #1a56db !important;
    border-color: #1a56db !important;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15) !important;
}

.form-check-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--slate-700) !important;
    cursor: pointer !important;
    padding-left: 6px !important;
    vertical-align: middle !important;
    transition: color 0.2s ease !important;
}

.form-check-input[type="radio"]:hover + .form-check-label {
    color: var(--slate-900) !important;
}

/* Elegant Table Header with td overrides (for template td compatibility) */
.table thead th,
.table thead td,
.table thead tr.bg-light-amazon td {
    background-color: var(--slate-100) !important; /* Premium light slate-blue background */
    color: var(--slate-900) !important; /* Crisp high contrast dark slate text */
    font-weight: 700 !important;
    text-transform: none !important; /* Remove uppercase as requested */
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    font-family: 'Roboto', sans-serif !important;

    /* Horizontal properties are safe to enforce with !important to align perfectly */
    border-left: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-right: 1px solid rgba(15, 23, 42, 0.06) !important;

    /* Do NOT use !important on padding, border-top, or border-bottom.
       This allows DataTables' built-in scrollBody resets to override them and collapse the cloned header cells. */
    padding: 14px 16px;
    border-bottom: 2px solid rgba(15, 23, 42, 0.08);
    border-top: none;
}

/* Force dark slate color for any nested anchors, icons, or text inside page-specific table headers */
.table thead th a,
.table thead th span,
.table thead th i,
.table thead td a,
.table thead td span,
.table thead td i {
    color: var(--slate-900) !important;
}

/* Table body items and custom action buttons */
.table tbody tr td {
    padding: 14px 16px !important;
    color: var(--slate-800) !important;
    font-size: 14px !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
    vertical-align: middle !important;
}

.table tbody tr td a i.fa-edit {
    color: #1a56db !important;
    transition: all 0.25s ease !important;
    font-size: 1.1rem !important;
}

.table tbody tr td a i.fa-edit:hover {
    color: #1e429f !important;
    transform: scale(1.18) !important;
    filter: drop-shadow(0 0 6px rgba(26, 86, 219, 0.25)) !important;
}

/* Submit Button Overrides (styled specifically for the group forms) */
.card-body form button[type="submit"],
.card-body form .btn-danger {
    background: #1a56db !important; /* Premium Royal Blue */
    border-color: #1a56db !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 14px rgba(26, 86, 219, 0.15) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card-body form button[type="submit"]:hover,
.card-body form .btn-danger:hover {
    background: #1e429f !important;
    border-color: #1e429f !important;
    box-shadow: 0 6px 20px rgba(30, 66, 159, 0.3) !important;
    transform: translateY(-1.5px) !important;
}

/* 10. Premium Project Categories Page Overrides (Zero PHP Changes) */
/* Table body font size decreased and compact high-density layout */
#datatable-buttons tbody tr td {
    font-size: 11.5px !important;
    padding: 10px 12px !important;
    font-weight: 500 !important;
    color: var(--slate-800) !important;
    line-height: 1.5 !important;
}

/* Elegant micro-button for Edit actions inside the table */
#datatable-buttons tbody tr td .btn-primary {
    background: rgba(26, 86, 219, 0.08) !important;
    border: 1px solid rgba(26, 86, 219, 0.15) !important;
    color: #1a56db !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#datatable-buttons tbody tr td .btn-primary:hover {
    background: #1a56db !important;
    border-color: #1a56db !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(26, 86, 219, 0.2) !important;
}

/* Redesigned "Add Project Category" Success Button */
.btn-success {
    background: #1a56db !important; /* Premium Royal Blue */
    border-color: #1a56db !important;
    color: #ffffff !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    box-shadow: 0 4px 14px rgba(26, 86, 219, 0.15) !important;
    letter-spacing: 0.01em !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-success:hover {
    background: #1e429f !important;
    border-color: #1e429f !important;
    box-shadow: 0 6px 20px rgba(30, 66, 159, 0.3) !important;
    transform: translateY(-1.5px) !important;
}

.btn-success i {
    margin-right: 6px !important;
}

/* 11. Unified Table Controls Row Alignment — Flex-row approach (no pixel guessing) */

/* Give the wrapper a top padding to host the control bar */
.dataTables_wrapper {
    padding-top: 0 !important;
}

/* The top controls bar: lives just above the table */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin-top: 8px !important;
}

/* Pull DT-buttons and Search into a flex row above the table */
.dataTables_wrapper .row:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
}

.dataTables_wrapper .row:first-child > div {
    width: auto !important;
    flex: 0 1 auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* DT buttons (Copy/Excel/PDF/More) row */
.dt-buttons {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
}

/* Search input compact */
.dataTables_filter {
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: var(--slate-700) !important;
    font-weight: 600 !important;
    margin:-35px 0 0 0 !important;
}

.dataTables_filter label {
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

.dataTables_filter input {
    width: 160px !important;
    height: 32px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    color: var(--slate-900) !important;
    transition: all 0.2s ease-in-out !important;
}

.dataTables_filter input:focus {
    border-color: #1a56db !important;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12) !important;
    outline: none !important;
}

/* Add-button section: sits above the datatable wrapper, no absolute positioning */
.card-body:has(.dataTables_wrapper) {
    position: static !important;
}

/* Reset any old absolute positioning on the add-button block */
.card-body:has(.dataTables_wrapper) .mb-3.text-start:has(a),
.card-body:has(.dataTables_wrapper) .mb-3.text-start {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

/* Reset any old absolute positioning on filter/buttons for all card variants */
.card-body:has(.mb-3.text-start a):has(.dataTables_wrapper) .dataTables_filter,
.card-body:not(:has(.mb-3.text-start a)):has(.dataTables_wrapper) .dataTables_filter {
    position: static !important;
}

.card-body:has(.mb-3.text-start a):has(.dataTables_wrapper) .dt-buttons,
.card-body:not(:has(.mb-3.text-start a)):has(.dataTables_wrapper) .dt-buttons {
    position: static !important;
}

/* Mobile */
@media (max-width: 767.98px) {
    .card-body:has(.dataTables_wrapper) .mb-3.text-start:has(a),
    .card-body:has(.dataTables_wrapper) .mb-3.text-start {
        justify-content: center !important;
        width: 100% !important;
    }
}

/* Style DataTables copy/excel/pdf buttons */
.dataTables_wrapper .dt-buttons .dt-button {
    background: var(--slate-700) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.dataTables_wrapper .dt-buttons .dt-button:hover {
    background: var(--accent-gold) !important;
    color: var(--slate-950) !important;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 4px 10px var(--accent-glow) !important;
}

/* Reduce table font size globally for DataTables */
.dataTables_wrapper table.dataTable {
    font-size: 12px !important;
}

.dataTables_wrapper table.dataTable thead th {
    font-size: 12px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
}

.dataTables_wrapper table.dataTable tbody td {
    font-size: 12px !important;
    padding: 7px 10px !important;
}

.dataTables_info,
.dataTables_paginate {
    font-size: 12px !important;
}


#datatable-buttons tbody tr td:nth-child(6),
#datatable-buttons tbody tr td:nth-child(7),
#datatable-buttons tbody tr td:nth-child(8),
#datatable-buttons tbody tr td:nth-child(9),
#datatable-buttons tbody tr td:nth-child(10) {
    max-width: 160px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Premium Hover Effect indicating click-to-expand */
#datatable-buttons tbody tr td:nth-child(6):hover,
#datatable-buttons tbody tr td:nth-child(7):hover,
#datatable-buttons tbody tr td:nth-child(8):hover,
#datatable-buttons tbody tr td:nth-child(9):hover,
#datatable-buttons tbody tr td:nth-child(10):hover {
    background-color: rgba(26, 86, 219, 0.05) !important;
    color: #1a56db !important;
}

/* Smooth Accent Expansion State */
#datatable-buttons tbody tr td:nth-child(6).expanded-cell,
#datatable-buttons tbody tr td:nth-child(7).expanded-cell,
#datatable-buttons tbody tr td:nth-child(8).expanded-cell,
#datatable-buttons tbody tr td:nth-child(9).expanded-cell,
#datatable-buttons tbody tr td:nth-child(10).expanded-cell {
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    background-color: rgba(26, 86, 219, 0.02) !important;
    border-left: 2px solid #1a56db !important; /* Premium left blue keyline accent showing expanded state */
    padding-left: 14px !important; /* Balanced padding shift for keyline */
}

/* 14. Hide Empty Page Footer Bar */
.footer {
    display: none !important;
}

/* 15. Premium Form & Select2 Redesign (Zero PHP Changes) */
/* Premium top accent line for all Master Form pages */
.card:has(form[action*="project-categories"]),
.card:has(form[action*="/categories"]),
.card:has(form[action*="sub-categories"]),
.card:has(form[action*="accessories"]),
.card:has(form[action*="colours"]),
.card:has(form[action*="roles"]),
.card:has(form[action*="employees"]),
.card:has(form[action*="product-types"]),
.card:has(form[action*="product-units"]),
.card:has(form[action*="products"]),
.card:has(form[action*="vendors"]),
.card:has(form[action*="zones"]),
.card:has(form[action*="agents"]),
.card:has(form[action*="sales_executives"]) {
    border-top: 4px solid #1a56db !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
}

/* Select2 Premium Custom Styling Overrides */
.select2-container--default .select2-selection--multiple {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 4px 10px 4px 10px !important;
    transition: all 0.2s ease-in-out !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    overflow: visible !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #1a56db !important;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15) !important;
    outline: none !important;
}

/* Style the selected chips/badges */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(26, 86, 219, 0.08) !important;
    border: 1px solid rgba(26, 86, 219, 0.15) !important;
    color: #1a56db !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    border-radius: 6px !important;
    padding: 3px 10px 3px 22px !important;
    margin: 3px 5px 3px 0 !important;
    position: relative !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* Style the remove button inside the chip */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #1a56db !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-right: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: color 0.2s ease !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #1e429f !important;
    background: transparent !important;
}

/* Custom Dropdown List Item styling */
.select2-dropdown {
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
}

.select2-results__option {
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--slate-800) !important;
    transition: all 0.2s ease !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(26, 86, 219, 0.08) !important;
    color: #1a56db !important;
    font-weight: 600 !important;
}

/* Fix Select2 inline search input to wrap within the container */
.select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 1 60px !important;
    min-width: 60px !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
    min-width: 60px !important;
    margin-top: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 13.5px !important;
    color: var(--slate-800) !important;
}

/* Ensure the ul (choices list) wraps */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Red Asterisk Styling */
.form-label span.text-danger,
.form-label span[style*="color: red"],
.form-label span[style*="color:red"] {
    color: #e11d48 !important; /* Premium soft rose red */
    font-weight: 700 !important;
}

/* Modernized Radio groups in cards */
.form-check-inline {
    margin-right: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Modern File Upload Input box */
input[type="file"].form-control {
    padding: 8px 12px !important;
    cursor: pointer !important;
    background-color: var(--slate-50) !important;
}

input[type="file"].form-control::file-selector-button {
    background-color: var(--slate-900) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    margin-right: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

input[type="file"].form-control::file-selector-button:hover {
    background-color: #1a56db !important;
}

/* Action buttons */
form button[type="submit"].btn-success {
    background: #1a56db !important;
    border-color: #1a56db !important;
    color: #ffffff !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    padding: 10px 30px !important;
    box-shadow: 0 4px 14px rgba(26, 86, 219, 0.2) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

form button[type="submit"].btn-success:hover {
    background: #1e429f !important;
    border-color: #1e429f !important;
    box-shadow: 0 6px 20px rgba(30, 66, 159, 0.35) !important;
    transform: translateY(-1.5px) !important;
}

form a.btn-secondary {
    background: var(--slate-100) !important;
    border-color: #cbd5e1 !important;
    color: var(--slate-700) !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    padding: 10px 30px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

form a.btn-secondary:hover {
    background: var(--slate-200) !important;
    color: var(--slate-950) !important;
    border-color: #94a3b8 !important;
}

/* ==========================================================================
   16. Premium Login Page & Input Layout Fixes
   ========================================================================== */

/* Fix text overlapping icons in custom floating inputs across all auth pages */
.form-floating-custom > .form-control,
.form-floating-custom > .form-select {
    padding-left: 60px !important;
}

/* Fix floating labels alignment inside the custom inputs */
.form-floating-custom > label {
    left: 48px !important;
}

/* Specific right-padding for password input to prevent text from overlapping the eye addon */
.form-floating-custom.auth-pass-inputgroup > .form-control {
    padding-right: 52px !important;
}

/* Premium full-screen Authentication Background */
.auth-bg {
    background-image: url("../images/logo-1.png") !important;
    background-color: var(--slate-950) !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    height: 100vh !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Sleek gradient overlay over background to make it modern, beautiful, and keep high text contrast */
.auth-bg::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.45) 0%, rgba(2, 6, 23, 0.85) 100%) !important;
    z-index: 1 !important;
}

/* Soft glassmorphism container and floating text effects on auth sections */
.auth-full-page-content {
    background-color: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 10px 0 40px rgba(15, 23, 42, 0.04) !important;
    z-index: 2 !important;
}

/* Dark mode compatibility for full-page auth content container */
body[data-layout-mode="dark"] .auth-full-page-content {
    background-color: var(--slate-950) !important;
    border-right-color: rgba(255, 255, 255, 0.05) !important;
}

/* Premium dynamic animation for login input fields on focus */
.form-floating-custom .form-control:focus ~ .form-floating-icon i,
.form-floating-custom .form-control:focus ~ .form-floating-icon svg {
    color: var(--accent-gold) !important;
    filter: drop-shadow(0 0 4px var(--accent-glow)) !important;
    transform: scale(1.1);
    transition: all 0.25s ease !important;
}

.dataTables_filter {
    margin-top: -1.4rem !important;
}