/**
 * ==============================================================================
 * Modern Dashboard & Admin Theme Stylesheet
 * Centralized customization file for Admin Panel, Login, and Module views.
 * Designed for easy future modification and project reusability.
 * ==============================================================================
 */

/* ==============================================================================
   1. DESIGN TOKENS & CSS VARIABLES
   ============================================================================== */
:root {
    /* Brand & Accent Colors — GoRyde forest, sage, navy */
    --adm-forest: #112619;
    --adm-sage: #456c50;
    --adm-navy: #0d2846;
    --adm-primary: #456c50;
    --adm-primary-hover: #112619;
    --adm-primary-light: #e8f0ea;
    --adm-primary-ring: rgba(69, 108, 80, 0.22);

    /* Neutral & Surface Palette */
    --adm-bg-page: #f3f6f4;
    --adm-surface: #ffffff;
    --adm-surface-alt: #eef3f0;
    --adm-border: #d7e2da;
    --adm-border-hover: #b7c9bc;
    --adm-border-focus: #456c50;

    /* Text Colors */
    --adm-text-main: #102018;
    --adm-text-secondary: #3d5244;
    --adm-text-muted: #7d9184;
    --adm-text-inverse: #ffffff;

    /* Status Colors */
    --adm-success: #10b981;
    --adm-success-light: #ecfdf5;
    --adm-warning: #f59e0b;
    --adm-warning-light: #fffbeb;
    --adm-danger: #ef4444;
    --adm-danger-light: #fef2f2;
    --adm-info: #06b6d4;
    --adm-info-light: #ecfeff;

    /* Sidebar Palette */
    --adm-sidebar-bg: #112619;
    --adm-sidebar-text: #c5d4c9;
    --adm-sidebar-hover-bg: #1b3a28;
    --adm-sidebar-hover-text: #ffffff;
    --adm-sidebar-active-bg: #456c50;
    --adm-sidebar-active-text: #ffffff;
    --adm-sidebar-border: #0c1c12;

    /* Header Palette */
    --adm-header-bg: #ffffff;
    --adm-header-border: #e2e8f0;
    --adm-header-text: #102018;

    /* Typography */
    --adm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Geometry & Elevations */
    --adm-radius-sm: 6px;
    --adm-radius-md: 10px;
    --adm-radius-lg: 14px;
    --adm-radius-full: 9999px;

    --adm-shadow-sm: 0 1px 2px 0 rgba(17, 38, 25, 0.06);
    --adm-shadow-card: 0 1px 3px 0 rgba(17, 38, 25, 0.07), 0 1px 2px -1px rgba(17, 38, 25, 0.05);
    --adm-shadow-md: 0 4px 6px -1px rgba(17, 38, 25, 0.09), 0 2px 4px -2px rgba(17, 38, 25, 0.06);
    --adm-shadow-lg: 0 10px 15px -3px rgba(17, 38, 25, 0.12), 0 4px 6px -4px rgba(17, 38, 25, 0.06);
}

/* ==============================================================================
   2. GLOBAL TYPOGRAPHY & BASE RESETS
   ============================================================================== */
body,
.wrapper,
.content-wrapper {
    font-family: var(--adm-font-sans) !important;
    background-color: var(--adm-bg-page) !important;
    color: var(--adm-text-main) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Clean Scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

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

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: var(--adm-radius-full);
}

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

/* ==============================================================================
   3. HEADER & TOP NAVIGATION
   ============================================================================== */
.main-header {
    background-color: var(--adm-header-bg) !important;
    border-bottom: 1px solid var(--adm-header-border) !important;
    box-shadow: var(--adm-shadow-sm) !important;
    position: relative;
    z-index: 1030;
}

.main-header .logo {
    background-color: var(--adm-sidebar-bg) !important;
    color: #ffffff !important;
    border-right: 1px solid var(--adm-sidebar-border) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    height: 54px !important;
    line-height: 54px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: width 0.3s ease-in-out, background-color 0.2s ease !important;
    overflow: hidden !important;
}

.main-header .logo .logo-lg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: 100% !important;
    width: 100% !important;
}

.main-header .logo .logo-mini {
    display: none !important;
}

.main-header .logo .brand-logo-lg {
    max-height: 36px !important;
    max-width: 180px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.main-header .logo .brand-logo-mini {
    max-height: 32px !important;
    max-width: 32px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
}

/* Sidebar collapsed / mini state */
body.sidebar-collapse .main-header .logo {
    width: 50px !important;
    padding: 0 4px !important;
}

body.sidebar-collapse .main-header .logo .logo-lg {
    display: none !important;
}

body.sidebar-collapse .main-header .logo .logo-mini {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
}

.main-header .navbar {
    background-color: var(--adm-header-bg) !important;
    min-height: 54px !important;
    border: none !important;
    margin-bottom: 0 !important;
}

.main-header .sidebar-toggle {
    color: var(--adm-text-secondary) !important;
    padding: 6px 20px !important;
    font-size: 16px !important;
    transition: all 0.2s ease;
    text-decoration: none;
}

.main-header .sidebar-toggle:hover {
    color: var(--adm-primary) !important;
    background-color: var(--adm-surface-alt) !important;
}

.navbar-custom-menu .navbar-nav>li>a {
    color: var(--adm-text-secondary) !important;
    font-size: 14px;
    font-weight: 500;
    padding: 16px 18px !important;
    transition: all 0.2s ease;
}

.navbar-custom-menu .navbar-nav>li>a:hover,
.navbar-custom-menu .navbar-nav>.open>a {
    background-color: var(--adm-surface-alt) !important;
    color: var(--adm-primary) !important;
}

/* Notification badge */
.navbar-nav>.notifications-menu>a>.label {
    top: 10px !important;
    right: 10px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
    border-radius: var(--adm-radius-full) !important;
    background-color: var(--adm-primary) !important;
}

/* User avatar */
.navbar-nav>.user-menu .user-image {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--adm-radius-full) !important;
    border: 2px solid var(--adm-border) !important;
    margin-top: -6px !important;
}

/* User Dropdown */
.navbar-nav>.user-menu .dropdown-menu {
    border: 1px solid var(--adm-border) !important;
    border-radius: var(--adm-radius-md) !important;
    box-shadow: var(--adm-shadow-lg) !important;
    overflow: hidden;
    padding: 0 !important;
}

.navbar-nav>.user-menu .dropdown-menu>li.user-header {
    background: linear-gradient(135deg, #112619 0%, #0d2846 100%) !important;
    height: auto !important;
    padding: 24px 16px !important;
}

.navbar-nav>.user-menu .dropdown-menu>li.user-header img {
    border: 3px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--adm-radius-full) !important;
    width: 72px !important;
    height: 72px !important;
}

.navbar-nav>.user-menu .dropdown-menu>li.user-header p {
    color: #ffffff !important;
    font-weight: 600;
    margin-top: 10px !important;
}

.navbar-nav>.user-menu .dropdown-menu>li.user-header small {
    color: #94a3b8 !important;
}

.navbar-nav>.user-menu .dropdown-menu>.user-footer {
    background-color: #ffffff !important;
    padding: 12px 16px !important;
    border-top: 1px solid var(--adm-border) !important;
}

/* ==============================================================================
   4. SIDEBAR NAVIGATION
   ============================================================================== */
.main-sidebar,
.left-side {
    background-color: var(--adm-sidebar-bg) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04) !important;
    padding-top: 54px !important;
}

.sidebar {
    padding-bottom: 20px !important;
}

.sidebar-menu {
    /* padding: 16px 12px !important; */
}

.sidebar-menu>li {
    margin-bottom: 3px;
}

.sidebar-menu>li>a {
    padding: 15px 6px !important;
    border-radius: var(--adm-radius-sm) !important;
    color: var(--adm-sidebar-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-left: none !important;
    display: flex !important;
    align-items: center;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
}

.sidebar-menu>li>a>i {
    width: 20px !important;
    font-size: 15px !important;
    margin-right: 12px !important;
    color: #64748b !important;
    text-align: center;
    transition: color 0.15s ease-in-out;
}

.sidebar-menu>li:hover>a,
.sidebar-menu>li.active>a {
    color: var(--adm-sidebar-hover-text) !important;
    background-color: var(--adm-sidebar-hover-bg) !important;
}

.sidebar-menu>li:hover>a>i {
    color: #cbd5e1 !important;
}

.sidebar-menu>li.active>a {
    background-color: var(--adm-sidebar-active-bg) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 10px -2px rgba(69, 108, 80, 0.4) !important;
}

.sidebar-menu>li.active>a>i {
    color: #ffffff !important;
}

.sidebar-menu .header {
    background: transparent !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 16px 14px 6px !important;
}

/* ==============================================================================
   5. CONTENT AREA & BREADCRUMBS
   ============================================================================== */
.content-wrapper {
    background-color: var(--adm-bg-page) !important;
    min-height: calc(100vh - 54px) !important;
}

.content-header {
    padding: 22px 28px 12px !important;
    background: transparent !important;
    position: relative;
}

.content-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.content-header-inner .page-title-wrap {
    flex: 1 1 auto;
}

.content-header-inner .page-title,
.content-header>h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--adm-text-main) !important;
    letter-spacing: -0.025em !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.content-header-inner .page-title small,
.content-header>h1>small {
    font-size: 14px !important;
    color: var(--adm-text-muted) !important;
    font-weight: 400 !important;
    margin-left: 8px;
}

.content-header-inner .page-breadcrumbs-wrap {
    flex: 0 0 auto;
}

/* Modern Breadcrumbs: Crisp, Elevated & Structured */
nav[aria-label="breadcrumb"] {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.content-header-inner .breadcrumb,
.content-header .breadcrumb,
.breadcrumb {
    position: static !important;
    float: none !important;
    margin: 0 !important;
    background-color: var(--adm-surface) !important;
    border: 1px solid var(--adm-border) !important;
    border-radius: 8px !important;
    padding: 7px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: var(--adm-shadow-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
}

.breadcrumb>li,
.breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--adm-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Auto Home Icon for first breadcrumb item */
.breadcrumb>li:first-child a::before,
.breadcrumb-item:first-child a::before {
    content: "\f015" !important;
    font-family: FontAwesome !important;
    margin-right: 6px !important;
    color: #64748b !important;
    font-size: 13px !important;
}

.breadcrumb>li+li:before,
.breadcrumb-item+.breadcrumb-item:before {
    content: "/" !important;
    padding: 0 8px !important;
    color: #cbd5e1 !important;
    font-weight: 400 !important;
}

.breadcrumb>li>a,
.breadcrumb-item>a {
    color: var(--adm-text-secondary) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
    display: inline-flex !important;
    align-items: center !important;
}

.breadcrumb>li>a:hover,
.breadcrumb-item>a:hover {
    color: var(--adm-primary) !important;
}

.breadcrumb>.active,
.breadcrumb-item.active {
    color: var(--adm-text-main) !important;
    font-weight: 600 !important;
}

.content {
    padding: 12px 28px 32px !important;
}

/* ==============================================================================
   6. CARDS, BOXES & STATS WIDGETS
   ============================================================================== */
.box,
.card {
    background: var(--adm-surface) !important;
    border: 1px solid var(--adm-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--adm-shadow-card) !important;
    margin-bottom: 24px !important;
    border-top: 1px solid var(--adm-border) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden !important;
}

.box:hover,
.card:hover {
    box-shadow: var(--adm-shadow-md) !important;
}

.box-header {
    border-bottom: 1px solid var(--adm-border) !important;
    padding: 18px 24px !important;
    background: transparent !important;
}

.box-header .box-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--adm-text-main) !important;
    letter-spacing: -0.01em;
    margin: 0 !important;
}

.box-body {
    padding: 26px 28px !important;
}

/* ── Form full-width block fix ──
   Prevent form from becoming a flex-shrink child of .row or .box-body.
   Ensures inner .row/.col-* grids behave correctly at full width. */
.box-body > form,
.content > form,
.box-body form,
.wizard-step-content > form,
.wizard-step-content form {
    display: block !important;
    width: 100% !important;
    flex: none !important;
}

/* Global safety — forms should NEVER be flex containers by default.
   (Bootstrap 5 forms are block, but AdminLTE can override this) */
form:not(.d-flex):not(.form-inline):not(.input-group) {
    /* display: block !important; */
}

/* Ensure .card, .row, and module-table-wrapper inside forms stretch to full width */
.box-body form > .card,
.box-body form > .row,
.box-body form > .nav-tabs-custom,
.wizard-step-content form > .row,
.wizard-step-content form > .card,
.wizard-step-content form > .module-table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

.box-footer {
    background: var(--adm-surface-alt) !important;
    border-top: 1px solid var(--adm-border) !important;
    border-radius: 0 0 12px 12px !important;
    padding: 16px 24px !important;
}

/* Modernized Stat Card (Small Box) */
.small-box {
    background: var(--adm-surface) !important;
    border: 1px solid var(--adm-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--adm-shadow-card) !important;
    overflow: hidden;
    margin-bottom: 24px !important;
    position: relative;
    transition: all 0.2s ease-in-out;
}

.small-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--adm-shadow-md) !important;
    border-color: var(--adm-border-hover) !important;
}

.small-box .inner {
    padding: 22px 24px !important;
}

.small-box .inner h3 {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--adm-text-main) !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: -0.03em;
}

.small-box .inner p {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--adm-text-secondary) !important;
    margin: 0 !important;
    text-transform: capitalize;
}

.small-box .icon {
    top: 20px !important;
    right: 20px !important;
    font-size: 42px !important;
    color: var(--adm-text-muted) !important;
    opacity: 0.35 !important;
    transition: all 0.2s ease;
}

.small-box:hover .icon {
    transform: scale(1.08);
    opacity: 0.6 !important;
}

.small-box-footer {
    background: var(--adm-surface-alt) !important;
    border-top: 1px solid var(--adm-border) !important;
    color: var(--adm-primary) !important;
    padding: 9px 20px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    display: block;
    text-align: left !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.small-box-footer i {
    float: right;
    margin-top: 3px;
    transition: transform 0.2s ease;
}

.small-box:hover .small-box-footer {
    background: var(--adm-primary-light) !important;
    color: var(--adm-primary) !important;
}

.small-box:hover .small-box-footer i {
    transform: translateX(3px);
}

/* Subtle Accent variants */
.small-box.bg-aqua .icon,
.small-box.bg-primary .icon {
    color: var(--adm-primary) !important;
}

.small-box.bg-green .icon,
.small-box.bg-success .icon {
    color: var(--adm-success) !important;
}

.small-box.bg-yellow .icon,
.small-box.bg-warning .icon {
    color: var(--adm-warning) !important;
}

.small-box.bg-red .icon,
.small-box.bg-danger .icon {
    color: var(--adm-danger) !important;
}

/* ==============================================================================
   7. FORM CONTROLS, MODERN BOOTSTRAP FORM UTILITIES & SELECT2
   ============================================================================== */
/* Modern Form Group Spacing */
.form-group {
    margin-bottom: 24px !important;
    position: relative;
}

/* Modern Form Labels */
label,
.form-label {
    display: inline-block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.01em !important;
}

label .required,
label:contains("*") {
    color: var(--adm-danger) !important;
}

/* Standard Form Inputs (Single-line) */
.form-control:not(textarea):not([type="file"]) {
    background-color: var(--adm-surface) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    color: var(--adm-text-main) !important;
    height: 44px !important;
    line-height: 1.4 !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control:focus {
    border-color: var(--adm-border-focus) !important;
    box-shadow: 0 0 0 3px var(--adm-primary-ring) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--adm-text-muted) !important;
    font-size: 13.5px !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f8fafc !important;
    border-color: var(--adm-border) !important;
    color: var(--adm-text-secondary) !important;
    cursor: not-allowed !important;
}

/* Multiline Textarea Control */
textarea.form-control {
    background-color: var(--adm-surface) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    color: var(--adm-text-main) !important;
    height: auto !important;
    min-height: 110px !important;
    line-height: 1.6 !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    resize: vertical !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

textarea.form-control:focus {
    border-color: var(--adm-border-focus) !important;
    box-shadow: 0 0 0 3px var(--adm-primary-ring) !important;
    outline: none !important;
}

/* File Upload Controls */
input[type="file"].form-control {
    background-color: var(--adm-surface) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 44px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: var(--adm-text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.5 !important;
}

/* Select2 Modern Enterprise Skin */
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    background-color: var(--adm-surface) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 44px !important;
    padding: 7px 14px !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--adm-text-main) !important;
    font-size: 14px !important;
    line-height: 28px !important;
    padding: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    right: 10px !important;
}

.select2-container--default .select2-selection--multiple {
    background-color: var(--adm-surface) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    min-height: 44px !important;
    padding: 4px 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--adm-primary-light) !important;
    color: var(--adm-primary) !important;
    border: 1px solid rgba(69, 108, 80, 0.25) !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 12.5px !important;
    padding: 4px 10px !important;
    margin: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--adm-primary) !important;
    margin-right: 6px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--adm-border-focus) !important;
    box-shadow: 0 0 0 3px var(--adm-primary-ring) !important;
    outline: none !important;
}

.select2-dropdown {
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden !important;
    margin-top: 4px !important;
    z-index: 1060 !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    height: 38px !important;
    padding: 6px 12px !important;
    font-size: 13.5px !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--adm-primary) !important;
    color: #ffffff !important;
}

/* Modern Bootstrap Form Utilities & Helper Texts */
.form-text,
.help-block {
    font-size: 12.5px !important;
    color: #64748b !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}

.help-block.text-danger,
.invalid-feedback {
    color: var(--adm-danger) !important;
    font-size: 12.5px !important;
    margin-top: 6px !important;
}

/* Modern Form Actions Row (Save / Cancel buttons) */
.form-actions,
.box-body .form-group.col-sm-12:last-child {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--adm-border) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 0 !important;
}

.form-actions .btn,
.box-body .form-group.col-sm-12:last-child .btn {
    height: 44px !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: var(--adm-shadow-sm) !important;
}

.form-actions .btn-default,
.box-body .form-group.col-sm-12:last-child .btn-default {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-weight: 500 !important;
    padding: 0 20px !important;
}

.form-actions .btn-default:hover,
.box-body .form-group.col-sm-12:last-child .btn-default:hover {
    background: #f8fafc !important;
    color: #102018 !important;
    border-color: #94a3b8 !important;
}

/* ==============================================================================
   8. PASSWORD SHOW/HIDE FEATURE
   ============================================================================== */
.password-toggle-wrapper {
    position: relative;
    width: 100%;
}

.password-toggle-wrapper .form-control {
    padding-right: 44px !important;
}

.password-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    color: #94a3b8;
    font-size: 15px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.15s ease;
}

.password-toggle-btn:hover {
    color: var(--adm-text-main);
    background: #f1f5f9;
}

.password-toggle-btn:focus {
    outline: none;
    color: var(--adm-primary);
}

/* ==============================================================================
   9. BUTTONS, BADGES & ALERTS
   ============================================================================== */
.btn {
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 13.5px !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: var(--adm-shadow-sm) !important;
}

.btn-primary {
    background-color: var(--adm-primary) !important;
    border-color: var(--adm-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--adm-primary-hover) !important;
    border-color: var(--adm-primary-hover) !important;
    box-shadow: 0 4px 10px rgba(69, 108, 80, 0.3) !important;
}

.btn-default {
    background-color: var(--adm-surface) !important;
    border-color: #cbd5e1 !important;
    color: var(--adm-text-main) !important;
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--adm-surface-alt) !important;
    border-color: var(--adm-border-hover) !important;
}

.btn-flat {
    border-radius: 8px !important;
}

.btn-sm,
.btn-xs {
    padding: 5px 12px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

/* Alerts */
.alert {
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    font-size: 13.5px !important;
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
}

.alert-success {
    background-color: var(--adm-success-light) !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}

.alert-danger {
    background-color: var(--adm-danger-light) !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.alert-warning {
    background-color: var(--adm-warning-light) !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

/* ==============================================================================
   10. DATATABLES MODERN SKIN, BUTTONS, AND SPACING
   ============================================================================== */
.content .box.box-primary {
    background: #ffffff !important;
    border: 1px solid var(--adm-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--adm-shadow-card) !important;
    border-top: 1px solid var(--adm-border) !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
}

.content .box.box-primary .box-body {
    padding: 26px 28px !important;
}

.dataTables_wrapper {
    position: relative !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

.dataTables_wrapper::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Toolbar: Action Buttons on Left */
.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dt-buttons.btn-group {
    float: left !important;
    margin-bottom: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    position: static !important;
}

.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons.btn-group>.btn {
    float: none !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--adm-border) !important;
    color: var(--adm-text-secondary) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 0 16px !important;
    height: 38px !important;
    line-height: 38px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.15s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons .dt-button:hover,
.dataTables_wrapper .dt-buttons.btn-group>.btn:hover {
    background: var(--adm-surface-alt) !important;
    border-color: var(--adm-border-hover) !important;
    color: var(--adm-text-main) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(15, 23, 42, 0.06) !important;
}

/* Primary "Create" Button Highlights */
.dt-buttons .buttons-create,
.dataTables_wrapper .dt-buttons .buttons-create,
div.dt-buttons .btn.buttons-create,
div.dt-buttons button.buttons-create,
.dataTables_wrapper .dt-buttons .btn-primary,
.dataTables_wrapper .dt-buttons a[href*="create"],
.dataTables_wrapper .dt-buttons.btn-group>a[href*="create"] {
    background: var(--adm-primary) !important;
    border-color: var(--adm-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(69, 108, 80, 0.25) !important;
}

.dt-buttons .buttons-create:hover,
.dataTables_wrapper .dt-buttons .buttons-create:hover,
div.dt-buttons .btn.buttons-create:hover,
div.dt-buttons button.buttons-create:hover,
.dataTables_wrapper .dt-buttons .btn-primary:hover,
.dataTables_wrapper .dt-buttons a[href*="create"]:hover {
    background: var(--adm-primary-hover) !important;
    border-color: var(--adm-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(69, 108, 80, 0.35) !important;
}

/* Button Icon Styling (styles existing <i> tags rendered by buttons.server-side.js) */
.dataTables_wrapper .dt-buttons a>i,
.dataTables_wrapper .dt-buttons button>i,
.dataTables_wrapper .dt-buttons .btn>i,
.dt-buttons .btn>i {
    font-size: 13px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}

.dt-buttons .buttons-create i,
.dataTables_wrapper .dt-buttons .buttons-create i,
.dataTables_wrapper .dt-buttons .btn-primary i {
    color: #ffffff !important;
}

/* Fallback: If Create button has no <i> tag, inject plus icon via CSS */
.dt-buttons .buttons-create:not(:has(i))::before,
.dataTables_wrapper .dt-buttons .buttons-create:not(:has(i))::before {
    content: "\f067" !important;
    font-family: FontAwesome !important;
    font-size: 11px !important;
    margin-right: 6px !important;
    color: #ffffff !important;
}

/* Export & Utility Button Icon Colors */
.dataTables_wrapper .dt-buttons .buttons-excel i {
    color: #16a34a !important;
}

.dataTables_wrapper .dt-buttons .buttons-csv i {
    color: #0284c7 !important;
}

.dataTables_wrapper .dt-buttons .buttons-print i {
    color: #64748b !important;
}

.dataTables_wrapper .dt-buttons .buttons-reset i {
    color: #64748b !important;
}

.dataTables_wrapper .dt-buttons .buttons-reload i {
    color: #64748b !important;
}

/* Filter (Search) & Length Controls on Right */
.dataTables_wrapper .dataTables_filter {
    float: right !important;
    text-align: right !important;
    margin-bottom: 20px !important;
    margin-left: 16px !important;
}

.dataTables_wrapper .dataTables_length {
    float: right !important;
    margin-bottom: 20px !important;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--adm-text-secondary) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 38px !important;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    color: var(--adm-text-main) !important;
    background: #ffffff !important;
    width: 220px !important;
    height: 38px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--adm-primary) !important;
    box-shadow: 0 0 0 3px var(--adm-primary-ring) !important;
    width: 250px !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    color: var(--adm-text-main) !important;
    background: #ffffff !important;
    height: 38px !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: border-color 0.2s ease;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--adm-primary) !important;
    box-shadow: 0 0 0 3px var(--adm-primary-ring) !important;
}

/* Modern Data Table Design */
table.dataTable,
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin: 16px 0 20px 0 !important;
    border: 1px solid var(--adm-border) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    clear: both !important;
}

table.dataTable thead th,
.table>thead>tr>th {
    background-color: var(--adm-surface-alt) !important;
    color: var(--adm-text-secondary) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 14px 18px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--adm-border) !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle !important;
}

table.dataTable tbody td,
.table>tbody>tr>td {
    padding: 14px 18px !important;
    font-size: 13.5px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--adm-surface-alt) !important;
    color: var(--adm-text-main) !important;
    vertical-align: middle !important;
}

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

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #fafbfd !important;
}

.table-hover>tbody>tr:hover,
table.dataTable tbody tr:hover {
    background-color: #f1f5f9 !important;
}

/* Action Column in DataTables */
table.dataTable td:last-child,
table.dataTable th:last-child {
    text-align: right !important;
    white-space: nowrap !important;
    width: 1% !important;
}

table.dataTable td .btn-group {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

table.dataTable td .btn-group .btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: all 0.15s ease-in-out !important;
}

/* View Button (Eye) */
table.dataTable td .btn-group a:first-child,
table.dataTable td .btn-group a:has(.glyphicon-eye-open),
table.dataTable td .btn-group a:has(.fa-eye) {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #dbeafe !important;
}

table.dataTable td .btn-group a:first-child:hover,
table.dataTable td .btn-group a:has(.glyphicon-eye-open):hover,
table.dataTable td .btn-group a:has(.fa-eye):hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25) !important;
}

/* Edit Button (Pencil) */
table.dataTable td .btn-group a:nth-child(2),
table.dataTable td .btn-group a:has(.glyphicon-edit),
table.dataTable td .btn-group a:has(.fa-edit) {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border-color: #dcfce7 !important;
}

table.dataTable td .btn-group a:nth-child(2):hover,
table.dataTable td .btn-group a:has(.glyphicon-edit):hover,
table.dataTable td .btn-group a:has(.fa-edit):hover {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.25) !important;
}

/* Delete Button (Trash) */
table.dataTable td .btn-group .btn-danger,
table.dataTable td .btn-group button[type="submit"] {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fee2e2 !important;
}

table.dataTable td .btn-group .btn-danger:hover,
table.dataTable td .btn-group button[type="submit"]:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.25) !important;
}

/* Info & Pagination Bottom Bar */
.dataTables_wrapper .dataTables_info {
    float: left !important;
    padding-top: 12px !important;
    font-size: 13px !important;
    color: var(--adm-text-muted) !important;
    font-weight: 500 !important;
}

.dataTables_wrapper .dataTables_paginate {
    float: right !important;
    text-align: right !important;
    padding-top: 4px !important;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0 !important;
    display: inline-flex !important;
    gap: 4px !important;
}

.dataTables_wrapper .dataTables_paginate .pagination>li>a,
.dataTables_wrapper .dataTables_paginate .pagination>li>span {
    border-radius: 8px !important;
    border: 1px solid var(--adm-border) !important;
    color: var(--adm-text-secondary) !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: #ffffff !important;
    line-height: 1 !important;
    transition: all 0.15s ease !important;
}

.dataTables_wrapper .dataTables_paginate .pagination>li>a:hover {
    background: var(--adm-surface-alt) !important;
    border-color: var(--adm-border-hover) !important;
    color: var(--adm-text-main) !important;
}

.dataTables_wrapper .dataTables_paginate .pagination>.active>a,
.dataTables_wrapper .dataTables_paginate .pagination>.active>span {
    background: var(--adm-primary) !important;
    border-color: var(--adm-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(69, 108, 80, 0.25) !important;
}

.dataTables_wrapper .dataTables_paginate .pagination>.disabled>a,
.dataTables_wrapper .dataTables_paginate .pagination>.disabled>span {
    opacity: 0.5 !important;
    background: var(--adm-surface-alt) !important;
    border-color: var(--adm-border) !important;
    cursor: not-allowed !important;
}


/* ==============================================================================
   11. MODERN ADMIN LOGIN PAGE
   ============================================================================== */
body.modern-login-page {
    background: #f8fafc !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    margin: 0;
    font-family: var(--adm-font-sans) !important;
}

.modern-login-container {
    width: 100%;
    max-width: 440px;
}

.modern-login-card {
    background: #ffffff;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    box-shadow: var(--adm-shadow-lg);
    padding: 40px 36px;
}

.modern-login-header {
    text-align: center;
    margin-bottom: 30px;
}

.modern-login-brand {
    font-size: 24px;
    font-weight: 700;
    color: var(--adm-text-main);
    letter-spacing: -0.03em;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 8px;
}

.modern-login-brand:hover {
    text-decoration: none;
    color: var(--adm-primary);
}

.modern-login-subtitle {
    font-size: 14px;
    color: var(--adm-text-secondary);
    margin: 0;
}

.modern-login-btn {
    width: 100%;
    height: 44px;
    padding: 10px 16px;
    font-size: 14.5px;
    font-weight: 600;
    border-radius: var(--adm-radius-sm);
    background: var(--adm-primary);
    border: 1px solid var(--adm-primary);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(69, 108, 80, 0.2);
    transition: all 0.2s ease;
}

.modern-login-btn:hover {
    background: var(--adm-primary-hover);
    border-color: var(--adm-primary-hover);
    box-shadow: 0 4px 10px rgba(69, 108, 80, 0.35);
}

.modern-login-footer-links {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--adm-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.modern-login-footer-links a {
    color: var(--adm-primary);
    text-decoration: none;
    font-weight: 500;
}

.modern-login-footer-links a:hover {
    text-decoration: underline;
}

/* ==============================================================================
   12. FOOTER
   ============================================================================== */
.main-footer {
    background: var(--adm-surface) !important;
    border-top: 1px solid var(--adm-border) !important;
    color: var(--adm-text-secondary) !important;
    font-size: 13px !important;
    padding: 18px 28px !important;
}

/* ==============================================================================
   13. BOOTSTRAP 5 COMPATIBILITY BRIDGE (Grid, Helpers & Layout)
   ============================================================================== */
/* BS3 -> BS5 Helper Floats & Displays */
.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

.hidden-xs {
    display: inline-block;
}

@media (max-width: 767.98px) {
    .hidden-xs {
        display: none !important;
    }
}

/* BS3 col-xs-* Grid Mapping for Bootstrap 5 */
.col-xs-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}

.col-xs-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.col-xs-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-xs-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.col-xs-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}

.col-xs-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-xs-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}

.col-xs-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.col-xs-9 {
    flex: 0 0 auto;
    width: 75%;
}

.col-xs-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}

.col-xs-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}

.col-xs-12 {
    flex: 0 0 auto;
    width: 100%;
}

/* Form Group & Help Block BS5 Bridge */
.form-group {
    margin-bottom: 24px;
}

.help-block {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--adm-danger);
}

.has-error .form-control {
    border-color: var(--adm-danger) !important;
    background-color: var(--adm-danger-light) !important;
}

.has-error .help-block {
    color: var(--adm-danger) !important;
}

/* DataTables BS5 Toolbar & Search Alignment */
div.dataTables_wrapper div.dataTables_length select {
    width: auto !important;
    display: inline-block !important;
    height: 38px !important;
    padding: 6px 30px 6px 12px !important;
    border-radius: var(--adm-radius-sm) !important;
    border: 1px solid var(--adm-border) !important;
    font-size: 13px !important;
    margin: 0 6px !important;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 8px !important;
    display: inline-block !important;
    width: auto !important;
    height: 38px !important;
    padding: 6px 14px !important;
    border-radius: var(--adm-radius-sm) !important;
    border: 1px solid var(--adm-border) !important;
    font-size: 13.5px !important;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 14px !important;
    font-size: 13px !important;
    color: var(--adm-text-secondary) !important;
}

div.dataTables_wrapper div.dataTables_paginate {
    margin-top: 10px !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 0 !important;
    white-space: nowrap !important;
    justify-content: flex-end !important;
}

/* Bootstrap 5 Dropdown Menu Transitions */
.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
}

/* User Header & Notifications Inside Modern Header */
.navbar-custom-menu .navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar-custom-menu .navbar-nav>li {
    position: relative;
}

/* ==============================================================================
   14. FORM GRID & COLUMN SYSTEM (Bootstrap 5 Flexbox Support)
   ============================================================================== */
/* Ensure forms inside .row or .box-body / .card-body act as flex grid containers */
.content form,
.box-body form,
.card-body form,
.box-body>.row>form,
.card-body>.row>form,
form.row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-right: -12px !important;
    margin-left: -12px !important;
    box-sizing: border-box !important;
}

/* Ensure form columns have proper padding and spacing */
.content form>[class*="col-"],
.box-body form>[class*="col-"],
.card-body form>[class*="col-"],
form.row>[class*="col-"] {
    box-sizing: border-box !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
    margin-bottom: 24px !important;
}

/* Two-column layout on desktop & tablet (>= 768px) */
@media (min-width: 768px) {

    .content form>.col-sm-6,
    .content form>.col-md-6,
    .box-body form>.col-sm-6,
    .box-body form>.col-md-6,
    .card-body form>.col-sm-6,
    .card-body form>.col-md-6,
    form.row>.col-sm-6,
    form.row>.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .content form>.col-sm-4,
    .content form>.col-md-4,
    .box-body form>.col-sm-4,
    .box-body form>.col-md-4,
    form.row>.col-sm-4,
    form.row>.col-md-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }

    .content form>.col-sm-3,
    .content form>.col-md-3,
    .box-body form>.col-sm-3,
    .box-body form>.col-md-3,
    form.row>.col-sm-3,
    form.row>.col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }

    .content form>.col-sm-8,
    .content form>.col-md-8,
    .box-body form>.col-sm-8,
    .box-body form>.col-md-8,
    form.row>.col-sm-8,
    form.row>.col-md-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
        width: 66.666667% !important;
    }

    .content form>.col-sm-12,
    .content form>.col-md-12,
    .content form>.col-12,
    .box-body form>.col-sm-12,
    .box-body form>.col-md-12,
    .box-body form>.col-12,
    .card-body form>.col-sm-12,
    .card-body form>.col-md-12,
    .card-body form>.col-12,
    form.row>.col-sm-12,
    form.row>.col-md-12,
    form.row>.col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Mobile responsive collapse (< 768px) */
@media (max-width: 767.98px) {

    .content form>[class*="col-"],
    .box-body form>[class*="col-"],
    .card-body form>[class*="col-"],
    form.row>[class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Clearfix flex line breaker */
.content form>.clearfix,
.box-body form>.clearfix,
.card-body form>.clearfix,
form.row>.clearfix {
    display: block !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    clear: both !important;
}

/* Form actions bar */
.form-actions {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-top: 20px !important;
    margin-top: 8px !important;
    border-top: 1px solid var(--adm-border) !important;
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

/* ==============================================================================
   15. SELECT2 BOOTSTRAP 5 POLISH & FIXES
   ============================================================================== */
.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--single {
    background-color: var(--adm-surface) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 44px !important;
    padding: 7px 14px !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--adm-text-main) !important;
    font-size: 14px !important;
    line-height: 28px !important;
    padding: 0 !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    right: 10px !important;
}

.select2-container .select2-selection--multiple {
    background-color: var(--adm-surface) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    min-height: 44px !important;
    padding: 5px 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    list-style: none !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #e8f0ea !important;
    color: #456c50 !important;
    border: 1px solid rgba(69, 108, 80, 0.25) !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 4px 10px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: #456c50 !important;
    margin-right: 6px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #112619 !important;
}

.select2-container .select2-search--inline {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: inline-block !important;
}

.select2-container .select2-search--inline .select2-search__field {
    margin: 0 !important;
    padding: 4px 8px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--adm-text-main) !important;
    font-size: 13.5px !important;
    height: 32px !important;
}

.select2-container.select2-container--focus .select2-selection--multiple,
.select2-container.select2-container--open .select2-selection--multiple,
.select2-container.select2-container--focus .select2-selection--single,
.select2-container.select2-container--open .select2-selection--single {
    border-color: #456c50 !important;
    box-shadow: 0 0 0 3px rgba(69, 108, 80, 0.15) !important;
    outline: none !important;
}

.select2-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden !important;
    margin-top: 4px !important;
    z-index: 1060 !important;
}

.select2-results__option {
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    color: #102018 !important;
    background: #ffffff !important;
}

.select2-results__option--highlighted {
    background-color: #456c50 !important;
    color: #ffffff !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

/* ==============================================================================
   16. GLYPHICONS & ACTION BUTTONS ICONS (Bootstrap 5 Compatibility)
   ============================================================================== */
.glyphicon {
    display: inline-block !important;
    font-family: 'Glyphicons Halflings', FontAwesome !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Fallback content using FontAwesome glyph codes */
.glyphicon-eye-open:before {
    content: "\f06e" !important;
    font-family: FontAwesome !important;
}

.glyphicon-edit:before {
    content: "\f044" !important;
    font-family: FontAwesome !important;
}

.glyphicon-trash:before {
    content: "\f014" !important;
    font-family: FontAwesome !important;
}

.glyphicon-plus:before {
    content: "\f067" !important;
    font-family: FontAwesome !important;
}

.glyphicon-pencil:before {
    content: "\f040" !important;
    font-family: FontAwesome !important;
}

.glyphicon-remove:before {
    content: "\f00d" !important;
    font-family: FontAwesome !important;
}

.glyphicon-ok:before {
    content: "\f00c" !important;
    font-family: FontAwesome !important;
}

.glyphicon-search:before {
    content: "\f002" !important;
    font-family: FontAwesome !important;
}

.glyphicon-user:before {
    content: "\f007" !important;
    font-family: FontAwesome !important;
}

/* Table Action Buttons Icon Colors */
table.dataTable td .btn-group a .glyphicon-eye-open,
table.dataTable td .btn-group a:first-child i {
    color: #2563eb !important;
}

table.dataTable td .btn-group a .glyphicon-edit,
table.dataTable td .btn-group a:nth-child(2) i {
    color: #16a34a !important;
}

table.dataTable td .btn-group button .glyphicon-trash,
table.dataTable td .btn-group .btn-danger i {
    color: #ef4444 !important;
}

table.dataTable td .btn-group a:hover i,
table.dataTable td .btn-group button:hover i {
    color: #ffffff !important;
}