/* ===================================
   PROFESSIONAL THEME - ELEGANT & COHESIVE
   Single color family, sophisticated palette
   SUPER AGGRESSIVE OVERRIDES - 18px base text
   =================================== */

/* Force modern font everywhere EXCEPT icons - HIGHEST SPECIFICITY */
html *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fad):not(.ion):not(.glyphicon):not([class*="fa-"]):not([class*="ion-"]):not([class*="glyphicon-"]),
body *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fad):not(.ion):not(.glyphicon):not([class*="fa-"]):not([class*="ion-"]):not([class*="glyphicon-"]) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Ensure icon fonts are NOT overridden */
.fa, .fas, .far, .fal, .fab, .fad,
[class^="fa-"], [class*=" fa-"],
i[class^="fa"], i[class*=" fa"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

.far { font-weight: 400 !important; }
.fal { font-weight: 300 !important; }
.fab { font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; }
.ion, [class^="ion-"] { font-family: "Ionicons" !important; }
.glyphicon, [class^="glyphicon-"] { font-family: "Glyphicons Halflings" !important; }

/* ===================================
   PROFESSIONAL COLOR PALETTE
   Single blue theme - elegant & cohesive
   =================================== */

/* CLEAN BACKGROUND - Subtle gray */
body {
    background: #f8f9fa !important;
    background-attachment: fixed !important;
}

.content-wrapper {
    background: #ffffff !important;
    margin-left: 250px !important;
    margin-top: 20px !important;
    margin-right: 20px !important;
    margin-bottom: 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    padding: 30px !important;
    transition: margin-left 0.3s ease !important;
    border: 1px solid #e9ecef !important;
}

.sidebar-collapse .content-wrapper {
    margin-left: 70px !important;
}

@media (max-width: 767px) {
    .content-wrapper {
        margin-left: 20px !important;
    }
}

/* PROFESSIONAL HEADER - Clean, single color */
.content-header {
    background: #2c5282 !important;
    color: white !important;
    padding: 32px !important;
    border-radius: 10px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 8px rgba(44, 82, 130, 0.15) !important;
}

.content-header h1 {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: white !important;
    margin: 0 !important;
    letter-spacing: -0.5px !important;
}

.content-header p,
.content-header small {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
}

/* ELEGANT STATISTICS CARDS - Consistent theme */
.info-box,
.info-box-new-style {
    background: white !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e9ecef !important;
    transition: all 0.2s ease !important;
    min-height: 120px !important;
    position: relative !important;
    overflow: visible !important;
}

.info-box:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border-color: #dee2e6 !important;
}

/* Simple left border accent - no top bar */
.info-box::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    border-radius: 10px 0 0 10px !important;
}

/* PROFESSIONAL ICON STYLING - Single color family */
.info-box-icon {
    width: 70px !important;
    height: 70px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    margin: 0 16px 0 0 !important;
    float: left !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: visible !important;
}

.info-box:hover .info-box-icon {
    transform: scale(1.02) !important;
}

/* COHESIVE COLOR SYSTEM - Shades of blue and neutral */

/* Primary - Deep Blue */
.info-box-icon.bg-aqua,
.info-box-icon.bg-blue {
    background: #2c5282 !important;
    color: white !important;
}

.info-box.info-box-new-style:has(.bg-aqua)::before,
.info-box.info-box-new-style:has(.bg-blue)::before {
    background: #2c5282 !important;
}

/* Success - Elegant Green */
.info-box-icon.bg-green {
    background: #2f855a !important;
    color: white !important;
}

.info-box.info-box-new-style:has(.bg-green)::before {
    background: #2f855a !important;
}

/* Warning - Muted Amber */
.info-box-icon.bg-yellow {
    background: #d97706 !important;
    color: white !important;
}

.info-box.info-box-new-style:has(.bg-yellow)::before {
    background: #d97706 !important;
}

/* Danger - Professional Red */
.info-box-icon.bg-red {
    background: #c53030 !important;
    color: white !important;
}

.info-box.info-box-new-style:has(.bg-red)::before {
    background: #c53030 !important;
}

/* Purple - Muted Professional */
.info-box-icon.bg-purple {
    background: #6b46c1 !important;
    color: white !important;
}

.info-box.info-box-new-style:has(.bg-purple)::before {
    background: #6b46c1 !important;
}

/* All icons have consistent styling */
.info-box-icon i {
    color: white !important;
    position: relative !important;
    z-index: 2 !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.info-box-icon .fa,
.info-box-icon .fas,
.info-box-icon .far,
.info-box-icon .ion {
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 2rem !important;
    color: white !important;
}

/* PROFESSIONAL TEXT STYLING - MUCH LARGER */
.info-box-text {
    font-size: 1rem !important; /* 16px, was 14px */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #6c757d !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.info-box-number {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: #212529 !important;
    letter-spacing: -0.5px !important;
    line-height: 1 !important;
}

.info-box-content {
    padding-top: 8px !important;
}

/* BASE TEXT - 14px standard */
html,
body,
p,
div,
span,
.content-wrapper,
.box-body,
td,
th,
li,
a {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.6 !important;
}

/* MUCH LARGER HEADINGS */
h1 { font-size: 3rem !important; } /* 48px, was 40px */
h2 { font-size: 2.5rem !important; } /* 40px, was 32px */
h3 { font-size: 2rem !important; } /* 32px, was 28px */
h4 { font-size: 1.75rem !important; } /* 28px, was 24px */
h5 { font-size: 1.5rem !important; } /* 24px, was 20px */
h6 { font-size: 1.25rem !important; } /* 20px, was 18px */

/* PROFESSIONAL SIDEBAR - Clean, elegant */
/* Match vendor.css specificity so these !important rules win */
.skin-blue-light .main-sidebar,
.skin-blue-light .left-side,
.skin-green-light .main-sidebar,
.skin-green-light .left-side,
.skin-purple-light .main-sidebar,
.skin-purple-light .left-side,
.skin-red-light .main-sidebar,
.skin-red-light .left-side,
.skin-yellow-light .main-sidebar,
.skin-yellow-light .left-side,
.skin-black-light .main-sidebar,
.skin-black-light .left-side,
.main-sidebar {
    background: #1e293b !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08) !important;
    border-right: 0 !important;
}

.main-sidebar .sidebar {
    background: transparent !important;
}

/* Sidebar link text must be white (vendor.css sets dark colors for light skins) */
.skin-blue-light .sidebar-menu > li > a,
.skin-green-light .sidebar-menu > li > a,
.skin-purple-light .sidebar-menu > li > a,
.skin-red-light .sidebar-menu > li > a,
.skin-yellow-light .sidebar-menu > li > a,
.skin-black-light .sidebar-menu > li > a {
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
}

/* Treeview submenu background override */
.skin-blue-light .sidebar-menu > li > .treeview-menu,
.skin-green-light .sidebar-menu > li > .treeview-menu,
.skin-purple-light .sidebar-menu > li > .treeview-menu,
.skin-red-light .sidebar-menu > li > .treeview-menu,
.skin-yellow-light .sidebar-menu > li > .treeview-menu,
.skin-black-light .sidebar-menu > li > .treeview-menu {
    background: #15202b !important;
}

.main-sidebar .logo {
    background: rgba(44, 82, 130, 0.15) !important;
    padding: 20px !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    color: white !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* SIDEBAR MENU - 14.5px */
.sidebar-menu > li > a {
    padding: 14px 18px !important;
    margin: 5px 10px !important;
    border-radius: 8px !important;
    font-size: 0.90625rem !important; /* 14.5px */
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
}

.sidebar-menu > li > a:hover {
    background: rgba(44, 82, 130, 0.2) !important;
    color: white !important;
    transform: translateX(3px) !important;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li.active > a:hover,
.sidebar-menu > li.active > a:focus {
    background: #2c5282 !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(44, 82, 130, 0.3) !important;
}

/* Override AdminLTE skin classes for sidebar menu */
.skin-black-light .sidebar-menu > li.active > a,
.skin-black-light .sidebar-menu > li.menu-open > a,
.skin-black-light .sidebar-menu > li:hover > a,
.skin-blue-light .sidebar-menu > li.active > a,
.skin-blue-light .sidebar-menu > li.menu-open > a,
.skin-blue-light .sidebar-menu > li:hover > a,
.skin-green-light .sidebar-menu > li.active > a,
.skin-green-light .sidebar-menu > li.menu-open > a,
.skin-green-light .sidebar-menu > li:hover > a,
.skin-purple-light .sidebar-menu > li.active > a,
.skin-purple-light .sidebar-menu > li.menu-open > a,
.skin-purple-light .sidebar-menu > li:hover > a,
.skin-red-light .sidebar-menu > li.active > a,
.skin-red-light .sidebar-menu > li.menu-open > a,
.skin-red-light .sidebar-menu > li:hover > a,
.skin-yellow-light .sidebar-menu > li.active > a,
.skin-yellow-light .sidebar-menu > li.menu-open > a,
.skin-yellow-light .sidebar-menu > li:hover > a {
    background: #2c5282 !important;
    color: #ffffff !important;
}

/* SUBMENU - Solid colors, no opacity, highly visible */
.sidebar-menu .treeview-menu {
    background: #15202b !important;
    padding: 8px 0 !important;
    margin: 0 10px !important;
    border-radius: 8px !important;
    border-left: 4px solid #2c5282 !important;
}

.sidebar-menu .treeview-menu > li {
    background: none !important;
}

.sidebar-menu .treeview-menu > li > a {
    color: #e2e8f0 !important;
    background: none !important;
    padding: 10px 18px 10px 42px !important;
    font-size: 0.875rem !important; /* 14px */
    border-radius: 6px !important;
    margin: 2px 8px !important;
}

.sidebar-menu .treeview-menu > li > a:hover {
    color: #ffffff !important;
    background: #2c5282 !important;
}

.sidebar-menu .treeview-menu > li.active > a {
    color: #ffffff !important;
    background: #3b6ba8 !important;
    font-weight: 600 !important;
}

.sidebar-menu > li > a > i {
    font-size: 1.1rem !important;
    margin-right: 12px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: 20px !important;
    text-align: center !important;
}

.sidebar-menu .fa,
.sidebar-menu .fas,
.sidebar-menu .far,
.sidebar-menu .ion,
.sidebar-menu .glyphicon {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Additional sidebar overrides */
.skin-blue .main-sidebar,
.skin-blue-light .main-sidebar,
aside.main-sidebar {
    background: #1e293b !important;
}

.sidebar-menu li a,
.sidebar a,
.main-sidebar a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.sidebar-menu li a:hover,
.sidebar a:hover,
.main-sidebar a:hover {
    color: white !important;
}

.sidebar-menu > li.header {
    color: rgba(255, 255, 255, 0.5) !important;
    background: transparent !important;
    padding: 8px 18px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.sidebar-menu .treeview > a > .fa-angle-left,
.sidebar-menu .treeview > a > .pull-right-container > .fa-angle-left {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* PROFESSIONAL BUTTONS - 14.5px */
.btn {
    padding: 12px 26px !important;
    border-radius: 8px !important;
    font-size: 0.90625rem !important; /* 14.5px */
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.btn-primary {
    background: #2c5282 !important;
    color: white !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #2a4365 !important;
    color: white !important;
}

.btn-success {
    background: #2f855a !important;
    color: white !important;
}

.btn-success:hover,
.btn-success:focus {
    background: #276749 !important;
    color: white !important;
}

.btn-warning {
    background: #d97706 !important;
    color: white !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background: #b45309 !important;
    color: white !important;
}

.btn-danger {
    background: #c53030 !important;
    color: white !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background: #9b2c2c !important;
    color: white !important;
}

.btn-info {
    background: #2c5282 !important;
    color: white !important;
}

.btn-lg {
    padding: 14px 32px !important;
    font-size: 1rem !important; /* 16px */
}

.btn-sm {
    padding: 8px 18px !important;
    font-size: 0.875rem !important; /* 14px */
}

/* PROFESSIONAL BOXES */
.box {
    background: white !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e9ecef !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
}

.box-header {
    background: #2c5282 !important;
    padding: 16px 20px !important;
    border-bottom: none !important;
}

.box-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: white !important;
    margin: 0 !important;
}

.box-body {
    padding: 20px !important;
    font-size: 0.90625rem !important; /* 14.5px */
}

/* PROFESSIONAL TABLES */
.table {
    border-collapse: separate !important;
    border-spacing: 0 6px !important;
}

.table thead th {
    background: #f8f9fa !important;
    color: #495057 !important;
    padding: 16px !important;
    font-size: 0.875rem !important; /* 14px - uppercase text */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    border-bottom: 2px solid #dee2e6 !important;
}

.table tbody tr {
    background: white !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s ease !important;
}

.table tbody tr:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.table tbody td {
    padding: 16px !important;
    font-size: 0.90625rem !important; /* 14.5px */
    border: none !important;
    vertical-align: middle !important;
}

.table tbody tr td:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.table tbody tr td:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* PROFESSIONAL FORMS - 14.5px */
.form-control {
    padding: 12px 16px !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
    font-size: 0.90625rem !important; /* 14.5px */
    transition: all 0.15s ease !important;
    background: white !important;
}

.form-control:focus {
    border-color: #2c5282 !important;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.1) !important;
    outline: none !important;
}

.form-group label {
    font-size: 0.90625rem !important; /* 14.5px */
    font-weight: 600 !important;
    color: #495057 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.select2-container--default .select2-selection--single {
    padding: 12px 16px !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
    height: auto !important;
    font-size: 0.90625rem !important; /* 14.5px */
    transition: all 0.15s ease !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 0.90625rem !important; /* 14.5px */
    line-height: 1.5 !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #2c5282 !important;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.1) !important;
}

/* PROFESSIONAL ALERTS - 14.5px */
.alert {
    padding: 16px 20px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 0.90625rem !important; /* 14.5px */
    font-weight: 500 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 20px !important;
    border-left: 4px solid !important;
}

.alert-success {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border-left-color: #2f855a !important;
}

.alert-warning {
    background: #fffbeb !important;
    color: #92400e !important;
    border-left-color: #d97706 !important;
}

.alert-danger {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-left-color: #c53030 !important;
}

.alert-info {
    background: #eff6ff !important;
    color: #1e40af !important;
    border-left-color: #2c5282 !important;
}

/* PROFESSIONAL SCROLLBAR */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* HEADER BAR */
.main-header {
    background: #2c5282 !important;
    border-bottom: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    margin-left: 250px !important;
    transition: margin-left 0.3s ease !important;
}

.sidebar-collapse .main-header {
    margin-left: 50px !important;
}

@media (max-width: 767px) {
    .main-header {
        margin-left: 0 !important;
    }
}

.main-header .navbar {
    background: transparent !important;
    margin: 0 !important;
}

.main-header .navbar-nav > li > a {
    color: white !important;
    font-weight: 500 !important;
    font-size: 0.90625rem !important; /* 14.5px */
}

.main-header .navbar-nav > li > a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
}

.main-header .fa,
.main-header .fas,
.main-header .far,
.main-header .ion,
.main-header .glyphicon {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* LOADING SPINNER */
.fa-sync.fa-spin {
    animation: spin 1s linear infinite !important;
    color: #2c5282 !important;
    font-size: 1.5rem !important;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* GLOBAL ICON FIXES */
.fa, .fas, .far, .fal, .fab, .fad,
i[class^="fa"], i[class*=" fa"],
[class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: 900 !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}

.far {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro" !important;
    font-weight: 400 !important;
}

.fab {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}

.ion, .ionicons, [class^="ion-"] {
    font-family: "Ionicons" !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

.glyphicon, [class^="glyphicon-"] {
    font-family: "Glyphicons Halflings" !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

.btn .fa, .btn .fas, .btn .ion,
button .fa, button .fas, button .ion {
    opacity: 1 !important;
    visibility: visible !important;
    margin-right: 6px !important;
}

/* BADGES */
.badge {
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .content-header h1 {
        font-size: 1.75rem !important;
    }

    .info-box {
        min-height: 100px !important;
        padding: 16px !important;
    }

    .info-box-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.5rem !important;
    }

    .info-box-number {
        font-size: 1.5rem !important;
    }
}

/* ===================================
   SUPER AGGRESSIVE TEXT SIZE OVERRIDES
   These rules MUST override AdminLTE and any other CSS
   =================================== */

/* Standard sizes: 14px and 14.5px - ultimate specificity */
html body,
html body *:not(.fa):not(.fas):not(.far):not(.fab):not(.ion):not([class*="fa-"]),
body div,
body span,
body p {
    font-size: 0.875rem !important; /* 14px */
}

/* Specific overrides for 14.5px interactive elements */
body td,
body th,
body label,
body input,
body select,
body textarea {
    font-size: 0.90625rem !important; /* 14.5px */
}

/* List items 14px */
body li {
    font-size: 0.875rem !important; /* 14px */
}

/* Ensure table headers are 14px uppercase */
html body .table thead th,
.content-wrapper .table thead th,
table.table thead th {
    font-size: 0.875rem !important; /* 14px */
}

/* Ensure table body cells are 14.5px */
html body .table tbody td,
.content-wrapper .table tbody td,
table.table tbody td {
    font-size: 0.90625rem !important; /* 14.5px */
}

/* Ensure forms have 14.5px */
html body input.form-control,
html body select.form-control,
html body textarea.form-control,
.content-wrapper input.form-control,
.content-wrapper select.form-control,
.content-wrapper textarea.form-control {
    font-size: 0.90625rem !important; /* 14.5px */
}

/* Ensure buttons have 14.5px */
html body .btn,
html body button,
.content-wrapper .btn,
.content-wrapper button {
    font-size: 0.90625rem !important; /* 14.5px */
}

/* Ensure sidebar has 14.5px */
html body .sidebar-menu > li > a,
html body .main-sidebar > li > a,
.sidebar-menu > li > a {
    font-size: 0.90625rem !important; /* 14.5px */
}

/* Submenu 14px - solid colors, no opacity */
.sidebar-menu .treeview-menu > li > a {
    font-size: 0.875rem !important; /* 14px */
    color: #e2e8f0 !important;
    background: none !important;
}

.sidebar-menu .treeview-menu > li {
    background: none !important;
}

.sidebar-menu .treeview-menu {
    background: #15202b !important;
}

/* Ensure all text elements default to 14px */
html body div:not(.info-box-icon):not([class*="fa-"]),
html body span:not(.info-box-icon):not([class*="fa-"]),
html body p,
html body a:not(.logo) {
    font-size: 0.875rem !important; /* 14px */
}

/* Override any AdminLTE small text classes */
.small,
small,
.text-sm,
.text-small {
    font-size: 0.875rem !important; /* 14px minimum */
}

/* DataTables 14.5px */
.dataTables_wrapper,
.dataTables_wrapper select,
.dataTables_wrapper input,
.dataTables_info,
.dataTables_paginate {
    font-size: 0.90625rem !important; /* 14.5px */
}

/* Modal 14.5px */
.modal-body,
.modal-header,
.modal-footer {
    font-size: 0.90625rem !important; /* 14.5px */
}

/* Dropdown 14.5px */
.dropdown-menu,
.dropdown-menu li a {
    font-size: 0.90625rem !important; /* 14.5px */
}

/* Fix: dropdown menus in DataTables get covered by subsequent rows.
   The open dropdown-menu needs a z-index above everything in the table. */
.open > .dropdown-menu,
.dropdown-menu.show {
    z-index: 9999 !important;
}

/* CSS :has() for modern browsers — boost z-index on the cell/row owning an open dropdown */
td:has(.open),
td:has(.dropdown-menu.show) {
    position: relative !important;
    z-index: 9999 !important;
    overflow: visible !important;
}

/* Ensure box content 14.5px */
html body .box-body,
html body .box-body *:not(.fa):not(.fas):not([class*="fa-"]) {
    font-size: 0.90625rem !important; /* 14.5px */
}

/* ===================================
   FIX: SIDEBAR SUBMENU CONTRAST
   AdminLTE's .skin-*-light .sidebar-menu > li > .treeview-menu rule (in vendor.css)
   sets the submenu background to a near-white grey (#f4f4f5), which collides with
   the near-white submenu link colour set by professional-theme.css above —
   producing white-on-white text. We need higher specificity than the AdminLTE
   skin selector (specificity 0,3,0) so we chain body + the skin class.
   =================================== */
html body[class*="skin-"] .sidebar-menu .treeview-menu,
html body[class*="skin-"] .sidebar-menu > li > .treeview-menu,
html body[class*="skin-"] .sidebar-menu > li.menu-open > .treeview-menu,
html body[class*="skin-"] .sidebar-menu > li:hover > .treeview-menu {
    background: #15202b !important;
    border-left: 4px solid #2c5282 !important;
}

html body[class*="skin-"] .sidebar-menu .treeview-menu > li > a,
html body[class*="skin-"] .sidebar-menu > li > .treeview-menu > li > a,
html body[class*="skin-"] .sidebar-menu > li.menu-open > .treeview-menu > li > a,
html body[class*="skin-"] .sidebar-menu > li:hover > .treeview-menu > li > a {
    color: #e2e8f0 !important;
    background: transparent !important;
}

html body[class*="skin-"] .sidebar-menu .treeview-menu > li > a:hover,
html body[class*="skin-"] .sidebar-menu .treeview-menu > li > a:focus {
    color: #ffffff !important;
    background: #2c5282 !important;
}

html body[class*="skin-"] .sidebar-menu .treeview-menu > li.active > a {
    color: #ffffff !important;
    background: #3b6ba8 !important;
    font-weight: 600 !important;
}

/* ===================================
   FIX: COMPACT /home DASHBOARD HEADER
   The .content-header-custom <h1> uses inline styles with a 3.5rem hand emoji
   and oversized welcome text; tighten to the design reference values.
   Inline styles win on cascade so we deliberately wrap with body to guarantee
   override (specificity 0,1,2 + !important).
   =================================== */
body .content-header.content-header-custom {
    padding: 12px 16px !important;
    margin: 0 1rem 0.75rem !important;
}

body .content-header.content-header-custom h1 {
    font-size: 1.25rem !important;     /* 20px */
    line-height: 1.3 !important;
    gap: 0.5rem !important;
    font-weight: 600 !important;
}

body .content-header.content-header-custom h1 > span:first-child {
    font-size: 1.5rem !important;       /* the 👋 emoji – was 3.5rem */
}

body .content-header.content-header-custom p {
    font-size: 0.8125rem !important;    /* 13px */
    margin: 6px 0 0 0 !important;
    opacity: 0.9;
}

body .content-header.content-header-custom p i {
    font-size: 0.875rem !important;
    margin-right: 6px !important;
}

/* Compact stat / info boxes on /home */
body .content-custom .info-box.info-box-new-style {
    min-height: 84px !important;
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
}

body .content-custom .info-box .info-box-icon {
    width: 56px !important;
    height: 56px !important;
    line-height: 56px !important;
    font-size: 1.5rem !important;
}

body .content-custom .info-box .info-box-text {
    font-size: 0.8125rem !important;    /* 13px */
    margin-top: 4px !important;
}

body .content-custom .info-box .info-box-number {
    font-size: 1.125rem !important;     /* 18px */
    line-height: 1.2 !important;
}

/* Tighten dashboard filter card and its button */
body .content-custom .modern-card {
    padding: 0.75rem 1rem !important;
}

body .content-custom #dashboard_date_filter.btn-lg {
    padding: 8px 14px !important;
    font-size: 0.875rem !important;
    height: 38px !important;
    line-height: 1 !important;
}

/* Refresh button next to welcome */
body .content-header.content-header-custom .btn.btn-primary {
    padding: 6px 12px !important;
    font-size: 0.8125rem !important;
    height: 36px !important;
    line-height: 1 !important;
}

/* Tighten widget headers (chart titles, payment-dues etc.) */
body .content-custom .box-header,
body .content-custom .box .box-header {
    padding: 10px 14px !important;
}

body .content-custom .box-header .box-title {
    font-size: 0.9375rem !important;    /* 15px */
    line-height: 1.3 !important;
}

body .content-custom .box-body {
    padding: 12px 14px !important;
}

/* Reduce row spacing */
body .content-custom > .row {
    margin-bottom: 0.5rem !important;
}

/* ==========================================================================
   FIX: COMPACT /home DASHBOARD FOR ADMIN ROLE
   The admin /home view (resources/views/home/index.blade.php) renders extra
   widgets the waiter view does not: a stat-grid header, two Highcharts
   panels (Sales last 30 days, Sales current FY), AdminLTE widget boxes
   (.box.box-primary, .box.box-warning) for payment dues / stock alerts /
   sales orders / purchase orders / pending shipments, plus a .modern-card
   filter row with a date picker and location select.

   Two problems on admin's /home that the earlier waiter-only block did not
   address:
     1) The first stats <div class="row"> shrinks to ~291px (and the cards
        collapse to ~43px wide vertical strips) because .col-custom
        ({display:flex;flex-direction:column}) interacts badly with the
        .row's display:flex;flex-wrap:wrap and the floated col-md-* widths.
        Force .row to fill 100% and pin the col-md-* / col-sm-* flex-basis
        so the stat grid lays out left-to-right at the correct widths.
     2) Each AdminLTE .box (chart panels and table widgets) is 466-484px
        tall because the box-body wraps a Highcharts container with inline
        height:400px !important. Cap the chart container, tighten box
        chrome, shrink padding, font sizes, etc.

   Scope: body .content-custom ... so it only touches /home, never the POS
   create screen, kitchen views, or any other AdminLTE box on the rest of
   the app.
   ========================================================================== */

/* Repair the broken first stats row layout. The row needs to fill its
   container; the col-md and col-sm children need to honor their grid widths
   instead of flex-shrinking down. */
body section.content-custom > .row {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body section.content-custom .modern-card > .row {
    width: 100% !important;
    flex: 0 0 100% !important;
}

body section.content-custom > .row > [class*="col-md-"],
body section.content-custom > .row > [class*="col-sm-"] {
    flex-shrink: 0 !important;
}

/* sm-range columns first so md-range can override them at 992px+ */
@media (min-width: 768px) {
    body section.content-custom > .row > .col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    body section.content-custom > .row > .col-sm-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 992px) {
    /* col-md-3 must come AFTER col-sm-6 in source order so that, when an
       element has both classes (col-md-3 col-sm-6), the md rule wins at
       desktop widths. */
    body section.content-custom > .row > .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    body section.content-custom > .row > .col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    body section.content-custom > .row > .col-md-4 {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        width: 33.3333% !important;
    }
    body section.content-custom > .row > .col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

/* (2) Compact the admin stat info-boxes (same .info-box-new-style class as
   the waiter view, but the second stats row plus admin-specific layout
   needs tighter row/column gutters). */
body .content-custom .col-custom {
    padding-left: 8px !important;
    padding-right: 8px !important;
    /* Stop the col from being a flex column that stretches its child to
       match the tallest sibling – we want each card to size to its own
       content. */
    display: block !important;
}

body .content-custom .info-box.info-box-new-style {
    min-height: 78px !important;
    height: auto !important;
    padding: 8px 10px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

body .content-custom .info-box.info-box-new-style .info-box-icon {
    width: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    border-radius: 10px !important;
}

body .content-custom .info-box.info-box-new-style .info-box-icon i {
    font-size: 22px !important;
}

body .content-custom .info-box.info-box-new-style .info-box-icon i.fa {
    font-size: 18px !important;
}

body .content-custom .info-box.info-box-new-style .info-box-content {
    margin-left: 56px !important;
    padding: 4px 0 4px 8px !important;
}

body .content-custom .info-box.info-box-new-style .info-box-text {
    font-size: 0.75rem !important;       /* 12px – stat label */
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

body .content-custom .info-box.info-box-new-style .info-box-number {
    font-size: 1.0625rem !important;     /* 17px – stat value */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
}

/* The little "total return / total return paid" footer paragraph – hide
   it on admin /home; the breakdown is available in the dedicated reports
   and keeping it makes the stat card 154px instead of 78px. */
body .content-custom .info-box.info-box-new-style p.fs-10 {
    display: none !important;
}

/* (3) Tighten AdminLTE widget boxes – chart panels and the data-table
   widgets (sales payment dues, stock alert, sales order, etc.). */
body .content-custom .box {
    margin-bottom: 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

body .content-custom .box > .box-header,
body .content-custom .box > .box-header.with-border {
    padding: 8px 12px !important;
    min-height: 36px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

body .content-custom .box > .box-header > .box-title {
    font-size: 0.9375rem !important;     /* 15px */
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

body .content-custom .box > .box-header > .box-title i {
    font-size: 0.95rem !important;
}

body .content-custom .box > .box-body {
    padding: 10px 12px !important;
}

/* (4) Cap chart heights – Highcharts injects inline height:400px !important
   on its container, so override at the wrapping div level too. */
body .content-custom .box-primary .box-body > div[data-highcharts-chart],
body .content-custom .box-primary .box-body > div[id][style*="height: 400px"] {
    height: 240px !important;
    max-height: 240px !important;
}

body .content-custom .box-primary .box-body .highcharts-container,
body .content-custom .box-primary .box-body .highcharts-container svg {
    max-height: 240px !important;
}

/* (5) Compact DataTables widgets (toolbars, search, pagination). */
body .content-custom .dataTables_wrapper {
    padding: 0 !important;
    background: transparent !important;
    font-size: 0.8125rem !important;     /* 13px */
}

body .content-custom .dataTables_wrapper .dt-buttons {
    margin-bottom: 6px !important;
}

body .content-custom .dataTables_wrapper .dt-buttons .btn {
    padding: 4px 9px !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
}

body .content-custom .dataTables_wrapper .dataTables_length,
body .content-custom .dataTables_wrapper .dataTables_filter,
body .content-custom .dataTables_wrapper .dataTables_info,
body .content-custom .dataTables_wrapper .dataTables_paginate {
    font-size: 0.8125rem !important;
    margin-bottom: 4px !important;
}

body .content-custom .dataTables_wrapper .dataTables_filter input {
    height: 30px !important;
    padding: 4px 8px !important;
    font-size: 0.8125rem !important;
}

body .content-custom .dataTables_wrapper table.dataTable thead th {
    padding: 6px 8px !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

body .content-custom .dataTables_wrapper table.dataTable tbody td {
    padding: 6px 8px !important;
    font-size: 0.8125rem !important;
}

body .content-custom .dataTables_wrapper .pagination > li > a,
body .content-custom .dataTables_wrapper .pagination > li > span {
    padding: 4px 9px !important;
    font-size: 0.8125rem !important;
    line-height: 1.3 !important;
}

/* (6) The location filter / date-filter row at the very top of admin /home. */
body .content-custom .modern-card {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
}

body .content-custom .modern-card .modern-form-group label {
    font-size: 0.75rem !important;
    margin-bottom: 3px !important;
}

body .content-custom .modern-card .form-control,
body .content-custom .modern-card .select2-container--default .select2-selection--single {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.8125rem !important;
}

body .content-custom .modern-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    padding-left: 10px !important;
}

body .content-custom .modern-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}

body .content-custom #dashboard_date_filter.btn-lg {
    height: 34px !important;
    padding: 4px 12px !important;
    font-size: 0.8125rem !important;
    line-height: 1.3 !important;
}