/**
 * OneTouch V3 CMS - Main Style & Metronic Tailwind Compatibility Bridge
 */

:root {
    --font-sans: 'Roboto', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --default-font-family: var(--font-sans);
    --tblr-border-color: var(--border, #e4e4e7);
    --tblr-border-style: solid;
    --tblr-primary: var(--primary, #006ae6);
    --tblr-body-bg: var(--background, #ffffff);
    --tblr-body-color: var(--foreground, #181c32);
}

body,
button,
input,
optgroup,
select,
textarea {
    font-family: var(--default-font-family);
}

/* ==========================================================================
   1. GRID SYSTEM (Bootstrap to Metronic Bridge)
   ========================================================================== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}
.row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
    .col-sm { flex: 1 0 0%; }
    .col-sm-auto { flex: 0 0 auto; width: auto; }
    .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-sm-3 { flex: 0 0 auto; width: 25%; }
    .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
    .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-sm-9 { flex: 0 0 auto; width: 75%; }
    .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
    .col-md { flex: 1 0 0%; }
    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-md-3 { flex: 0 0 auto; width: 25%; }
    .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-md-9 { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
    .col-lg { flex: 1 0 0%; }
    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
    .col-xl { flex: 1 0 0%; }
    .col-xl-auto { flex: 0 0 auto; width: auto; }
    .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xl-3 { flex: 0 0 auto; width: 25%; }
    .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xl-6 { flex: 0 0 auto; width: 50%; }
    .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xl-9 { flex: 0 0 auto; width: 75%; }
    .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* Gutters */
.g-0, .gx-0 { margin-right: 0; margin-left: 0; }
.g-0 > *, .gx-0 > * { padding-right: 0; padding-left: 0; }
.g-1, .gx-1 { margin-right: -0.25rem; margin-left: -0.25rem; }
.g-1 > *, .gx-1 > * { padding-right: 0.25rem; padding-left: 0.25rem; }
.g-2, .gx-2 { margin-right: -0.5rem; margin-left: -0.5rem; }
.g-2 > *, .gx-2 > * { padding-right: 0.5rem; padding-left: 0.5rem; }
.g-3, .gx-3 { margin-right: -0.75rem; margin-left: -0.75rem; }
.g-3 > *, .gx-3 > * { padding-right: 0.75rem; padding-left: 0.75rem; }
.g-4, .gx-4 { margin-right: -1rem; margin-left: -1rem; }
.g-4 > *, .gx-4 > * { padding-right: 1rem; padding-left: 1rem; }
.g-5, .gx-5 { margin-right: -1.5rem; margin-left: -1.5rem; }
.g-5 > *, .gx-5 > * { padding-right: 1.5rem; padding-left: 1.5rem; }

.gy-1 > * { margin-top: 0.25rem; }
.gy-2 > * { margin-top: 0.5rem; }
.gy-3 > * { margin-top: 0.75rem; }
.gy-4 > * { margin-top: 1rem; }
.gy-5 > * { margin-top: 1.5rem; }

/* ==========================================================================
   2. CARDS (Metronic Tailwind Card Bridge)
   ========================================================================== */
.card, .kt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--card, #ffffff);
    background-clip: border-box;
    border: 1px solid var(--border, #f1f1f4);
    border-radius: var(--radius, 0.75rem);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    overflow: visible;
}
.card-header, .kt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 1px solid var(--border, #f1f1f4);
    min-height: 4.25rem;
}
.card-header h2, .card-header h3, .card-title, .kt-card-title {
    margin-bottom: 0 !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--foreground, #181c32) !important;
    line-height: 1.5 !important;
}
.card-subtitle {
    font-size: 0.875rem;
    color: var(--muted-foreground, #71717a);
    margin-top: 0.25rem;
}
.card-body, .kt-card-content {
    flex: 1 1 auto;
    padding: 1.5rem;
    color: var(--foreground, #181c32);
}
.card-footer, .kt-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background-color: transparent;
    border-top: 1px solid var(--border, #f1f1f4);
}

/* ==========================================================================
   3. BUTTONS (Metronic Tailwind Button Bridge)
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius, 0.5rem);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
}
.btn:disabled, .btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.btn-primary {
    background-color: var(--primary, #006ae6);
    color: #ffffff;
    border-color: var(--primary, #006ae6);
}
.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #ffffff;
}
.btn-secondary {
    background-color: var(--secondary, #f4f4f5);
    color: var(--secondary-foreground, #181c32);
    border-color: var(--border, #e4e4e7);
}
.btn-secondary:hover {
    background-color: #e4e4e7;
    color: var(--secondary-foreground, #181c32);
}
.btn-danger, .btn-destructive {
    background-color: var(--destructive, #e11d48);
    color: #ffffff;
    border-color: var(--destructive, #e11d48);
}
.btn-danger:hover, .btn-destructive:hover {
    background-color: #be123c;
    border-color: #be123c;
    color: #ffffff;
}
.btn-success {
    background-color: #16a34a;
    color: #ffffff;
    border-color: #16a34a;
}
.btn-success:hover {
    background-color: #15803d;
    border-color: #15803d;
    color: #ffffff;
}
.btn-warning {
    background-color: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
}
.btn-warning:hover {
    background-color: #d97706;
    border-color: #d97706;
    color: #ffffff;
}
.btn-info {
    background-color: #06b6d4;
    color: #ffffff;
    border-color: #06b6d4;
}
.btn-info:hover {
    background-color: #0891b2;
    border-color: #0891b2;
    color: #ffffff;
}
.btn-outline-primary {
    background-color: transparent;
    color: var(--primary, #006ae6);
    border-color: var(--primary, #006ae6);
}
.btn-outline-primary:hover {
    background-color: var(--primary, #006ae6);
    color: #ffffff;
}
.btn-outline-secondary {
    background-color: transparent;
    color: var(--muted-foreground, #71717a);
    border-color: var(--border, #e4e4e7);
}
.btn-outline-secondary:hover {
    background-color: var(--secondary, #f4f4f5);
    color: var(--foreground, #181c32);
}
.btn-outline-danger {
    background-color: transparent;
    color: var(--destructive, #e11d48);
    border-color: var(--destructive, #e11d48);
}
.btn-outline-danger:hover {
    background-color: var(--destructive, #e11d48);
    color: #ffffff;
}
.btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    line-height: 1rem;
    border-radius: calc(var(--radius, 0.5rem) - 2px);
}
.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
}
.btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-sm.btn-icon {
    width: 1.85rem;
    height: 1.85rem;
}

/* ==========================================================================
   4. FORM CONTROLS & LABELS
   ========================================================================== */
.form-label {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground, #181c32);
    margin-bottom: 0.375rem;
}
.form-label.required:after {
    content: " *";
    color: var(--destructive, #e11d48);
    font-weight: bold;
}
.form-control {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--foreground, #181c32);
    background-color: var(--background, #ffffff);
    background-clip: padding-box;
    border: 1px solid var(--input, #e4e4e7);
    border-radius: var(--radius, 0.5rem);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
    outline: none;
    border-color: var(--primary, #006ae6);
    box-shadow: 0 0 0 2px rgba(0, 106, 230, 0.2);
}
.form-control::placeholder {
    color: var(--muted-foreground, #a1a1aa);
}
textarea.form-control {
    min-height: 80px;
}

.form-select,
.kt-select {
    display: inline-flex;
    align-items: center;
    height: 2.375rem;
    min-height: 2.375rem;
    padding: 0.4375rem 2.25rem 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--foreground, #181c32);
    background-color: var(--background, #ffffff);
    background-clip: padding-box;
    border: 1px solid var(--input, #e4e4e7);
    border-radius: var(--radius, 0.5rem);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px 10px;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-select:focus,
.kt-select:focus {
    outline: none;
    border-color: var(--primary, #006ae6);
    box-shadow: 0 0 0 3px rgba(0, 106, 230, 0.12);
}
.form-select:disabled,
.kt-select:disabled {
    background-color: var(--muted, #f4f4f5);
    opacity: 0.6;
    cursor: not-allowed;
}
.form-select-sm,
.kt-select-sm {
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0.25rem 1.75rem 0.25rem 0.625rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.375rem !important;
    background-position: right 0.5rem center !important;
    background-size: 12px 8px !important;
}
.form-select option,
.kt-select option {
    padding: 0.5rem 0.75rem;
    background-color: var(--card, #ffffff);
    color: var(--foreground, #181c32);
    font-size: 0.8125rem;
    font-weight: 500;
}

.form-control:not([class*="w-"]),
.kt-input:not([class*="w-"]),
.form-select:not([class*="w-"]),
.kt-select:not([class*="w-"]) {
    width: 100%;
}

/* Width utility helpers for filter forms */
.w-44 { width: 11rem !important; }
.w-60 { width: 15rem !important; }
.w-64 { width: 16rem !important; }
.w-72 { width: 18rem !important; }

/* ==========================================================================
   METRONIC DEMO 1 - SELECT2 ENHANCED STYLING
   ========================================================================== */
.select2-container {
    width: 100% !important;
    display: block;
}
.select2-container--bootstrap-5 {
    display: block;
    width: 100% !important;
}

/* Selection Box / Trigger */
.select2-container--bootstrap-5 .select2-selection {
    width: 100% !important;
    min-height: 2.375rem !important;
    height: 2.375rem !important;
    padding: 0.4375rem 2.25rem 0.4375rem 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: var(--foreground, #181c32) !important;
    background-color: var(--background, #ffffff) !important;
    border: 1px solid var(--input, #e4e4e7) !important;
    border-radius: var(--radius, 0.5rem) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Rendered value / placeholder */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--foreground, #181c32) !important;
    line-height: 1.5 !important;
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: var(--muted-foreground, #71717a) !important;
    font-weight: 400 !important;
}

/* Clean SVG Arrow Icon */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    top: 0 !important;
    right: 0.75rem !important;
    width: 1rem !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 10px !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

/* Clear Button */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    right: 2rem !important;
    width: 0.875rem !important;
    height: 0.875rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 4 8 8m0-8-8 8'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Focus and Open States */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection,
.select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection {
    border-color: var(--primary, #006ae6) !important;
    border-radius: var(--radius, 0.5rem) !important;
    border-bottom: 1px solid var(--primary, #006ae6) !important;
    border-top: 1px solid var(--primary, #006ae6) !important;
    box-shadow: 0 0 0 3px rgba(0, 106, 230, 0.12) !important;
    outline: none !important;
}

/* Dropdown Floating Card */
.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below,
.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above {
    background-color: var(--card, #ffffff) !important;
    border: 1px solid var(--border, #f1f1f4) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
    padding: 0.375rem !important;
    z-index: 1065 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Dropdown Search Field */
.select2-container--bootstrap-5 .select2-dropdown .select2-search--dropdown {
    padding: 0.25rem 0.25rem 0.375rem 0.25rem !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search--dropdown .select2-search__field {
    height: 2.125rem !important;
    padding: 0.375rem 0.625rem !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: var(--foreground, #181c32) !important;
    background-color: var(--background, #ffffff) !important;
    border: 1px solid var(--input, #e4e4e7) !important;
    border-radius: 0.375rem !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary, #006ae6) !important;
    box-shadow: 0 0 0 2px rgba(0, 106, 230, 0.12) !important;
}

/* Dropdown Results List */
.select2-container--bootstrap-5 .select2-results__options {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    max-height: 16rem !important;
    overflow-y: auto !important;
}
.select2-container--bootstrap-5 .select2-results__options::-webkit-scrollbar {
    width: 5px;
}
.select2-container--bootstrap-5 .select2-results__options::-webkit-scrollbar-thumb {
    background-color: var(--border, #e4e4e7);
    border-radius: 5px;
}

/* Option Items (Pill Style) */
.select2-container--bootstrap-5 .select2-results__option {
    display: flex !important;
    align-items: center !important;
    padding: 0.4375rem 0.75rem !important;
    margin: 0.125rem 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--foreground, #181c32) !important;
    border-radius: 0.375rem !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
    user-select: none !important;
    line-height: 1.4 !important;
}

/* Hover and Highlighted Option */
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap-5 .select2-results__option:hover {
    background-color: var(--accent, #f4f4f5) !important;
    color: var(--accent-foreground, #181c32) !important;
}

/* Selected Option */
.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background-color: var(--accent, #f4f4f5) !important;
    color: var(--accent-foreground, #181c32) !important;
    font-weight: 600 !important;
}

/* Disabled Option */
.select2-container--bootstrap-5 .select2-results__option--disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background-color: transparent !important;
}

/* Loading / Empty Message */
.select2-container--bootstrap-5 .select2-results__message {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.8125rem !important;
    color: var(--muted-foreground, #71717a) !important;
    text-align: center !important;
}

/* Multiple Selection / Tags */
.select2-container--bootstrap-5 .select2-selection--multiple {
    min-height: 2.375rem !important;
    height: auto !important;
    padding: 0.25rem 0.5rem !important;
    gap: 0.25rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.125rem 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--accent-foreground, #181c32) !important;
    background-color: var(--accent, #f4f4f5) !important;
    border: 1px solid var(--border, #e4e4e7) !important;
    border-radius: 0.25rem !important;
    margin: 0 !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--muted-foreground, #71717a) !important;
    margin-right: 0.25rem !important;
    font-size: 0.875rem !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    line-height: 1 !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--destructive, #e11d48) !important;
}

/* Input groups */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.input-group > .form-control,
.input-group > .form-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--muted-foreground, #71717a);
    text-align: center;
    white-space: nowrap;
    background-color: var(--secondary, #f4f4f5);
    border: 1px solid var(--input, #e4e4e7);
    border-radius: var(--radius, 0.5rem);
}
.input-group > :not(:first-child):not(.dropdown-menu) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > :not(:last-child):not(.dropdown-menu) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Checks & Radios */
.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.5rem;
    margin-bottom: 0.25rem;
}
.form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0;
    vertical-align: top;
    background-color: var(--background, #ffffff);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--input, #e4e4e7);
    border-radius: 0.25rem;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.form-check-input[type="radio"] {
    border-radius: 50%;
}
.form-check-input:checked {
    background-color: var(--primary, #006ae6);
    border-color: var(--primary, #006ae6);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input {
    width: 2rem;
    height: 1.125rem;
    border-radius: 2rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a1a1aa'/%3e%3c/svg%3e");
    background-position: left center;
}
.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-label {
    font-size: 0.875rem;
    color: var(--foreground, #181c32);
    cursor: pointer;
}

/* ==========================================================================
   5. DROPDOWNS & VISUALLY HIDDEN
   ========================================================================== */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.dropdown-menu {
    display: none;
    position: absolute;
    z-index: 1050;
    min-width: 12rem;
    padding: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    color: var(--foreground, #181c32);
    text-align: left;
    list-style: none;
    background-color: var(--card, #ffffff);
    background-clip: padding-box;
    border: 1px solid var(--border, #f1f1f4);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.dropdown-menu.show {
    display: block !important;
}
.dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.375rem 0.75rem;
    clear: both;
    font-weight: 400;
    color: var(--foreground, #181c32);
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: 0.375rem;
    text-decoration: none;
    cursor: pointer;
}
.dropdown-item:hover, .dropdown-item:focus {
    color: var(--foreground, #181c32);
    background-color: var(--secondary, #f4f4f5);
}

/* ==========================================================================
   6. DATATABLES FULL POLISHED STYLING (METRONIC DEMO 1 SPEC)
   ========================================================================== */

/* Completely hide duplicate default search and buttons */
.dataTables_filter,
div.dataTables_filter,
.dataTables_wrapper .dataTables_filter,
.dt-buttons,
div.dt-buttons,
.dataTables_wrapper .dt-buttons {
    display: none !important;
}

/* Wrapper and Scroll Containers */
.dataTables_wrapper {
    width: 100% !important;
    position: relative;
    clear: both;
}
.dataTables_scroll {
    width: 100% !important;
    overflow-x: auto !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.dataTables_scrollHead,
.dataTables_scrollBody,
.dataTables_scrollFoot {
    width: 100% !important;
    position: relative;
    border: none !important;
}
.dataTables_scrollHeadInner,
.dataTables_scrollFootInner {
    width: 100% !important;
    box-sizing: border-box !important;
    border: none !important;
}
.dataTables_scrollHeadInner > table,
.dataTables_scrollBody > table,
.dataTables_scrollFootInner > table,
table.dataTable {
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background-color: var(--card, #ffffff);
}

/* Eliminate DataTables default #111 black border on no-footer and scrollBody */
table.dataTable.no-footer,
.dataTables_scrollBody > table.dataTable,
div.dataTables_scrollBody {
    border: none !important;
    border-bottom: none !important;
}

/* Table Head Row & Cells - Strict uniform border var(--border) */
:is(.kt-table thead) tr,
.dataTables_scrollHead thead tr,
table.dataTable thead tr {
    border: none !important;
    border-bottom: 1px solid var(--border, #f1f1f4) !important;
    border-color: var(--border, #f1f1f4) !important;
}

table.dataTable thead th,
.dataTables_scrollHead table thead th,
:is(.kt-table thead) th {
    background-color: var(--muted, #f8fafc) !important;
    color: var(--secondary-foreground, #27272a) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 0.625rem 1rem !important;
    height: 2.5rem !important;
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid var(--border, #f1f1f4) !important;
    border-color: var(--border, #f1f1f4) !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
@supports (color: color-mix(in lab, red, red)) {
    table.dataTable thead th,
    .dataTables_scrollHead table thead th,
    :is(.kt-table thead) th {
        background-color: color-mix(in oklab, var(--muted) 40%, transparent) !important;
    }
}

/* First and last column cell padding aligned with Metronic card-grid (20px) */
:is(table.dataTable thead th, .dataTables_scrollHead table thead th):first-child,
:is(table.dataTable tfoot th, .dataTables_scrollFoot table th):first-child,
table.dataTable tbody td:first-child {
    padding-left: 1.25rem !important;
}
:is(table.dataTable thead th, .dataTables_scrollHead table thead th):last-child,
:is(table.dataTable tfoot th, .dataTables_scrollFoot table th):last-child,
table.dataTable tbody td:last-child {
    padding-right: 1.25rem !important;
}

/* DataTable Column Search Inputs Row (in Foot moved under Head) */
:is(.kt-table tfoot),
.dataTables_scrollFoot tfoot,
table.dataTable tfoot {
    border: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border, #f1f1f4) !important;
    border-color: var(--border, #f1f1f4) !important;
    background-color: var(--card, #ffffff) !important;
}
:is(.kt-table tfoot) tr,
.dataTables_scrollFoot tfoot tr,
table.dataTable tfoot tr {
    border: none !important;
    border-bottom: 1px solid var(--border, #f1f1f4) !important;
    border-color: var(--border, #f1f1f4) !important;
    background-color: var(--card, #ffffff) !important;
}
.dataTables_scrollFoot table th,
table.dataTable tfoot th {
    background-color: var(--card, #ffffff) !important;
    padding: 0.375rem 0.75rem !important;
    border: none !important;
    border-bottom: 1px solid var(--border, #f1f1f4) !important;
    border-color: var(--border, #f1f1f4) !important;
    box-sizing: border-box !important;
}
.dataTables_scrollFoot table th input.form-control,
.dataTables_scrollFoot table th select.form-select,
table.dataTable tfoot th input.form-control,
table.dataTable tfoot th select.form-select {
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    border: 1px solid var(--border, #f1f1f4) !important;
    border-color: var(--border, #f1f1f4) !important;
    border-radius: 0.375rem !important;
    background-color: var(--background, #ffffff) !important;
    color: var(--foreground, #0f172a) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.dataTables_scrollFoot table th input.form-control:focus,
.dataTables_scrollFoot table th select.form-select:focus {
    border-color: var(--primary, #006ae6) !important;
    box-shadow: 0 0 0 2px rgba(0, 106, 230, 0.12) !important;
    outline: none !important;
}

/* DataTable Body Cells */
table.dataTable tbody tr,
.dataTables_scrollBody tbody tr {
    border: none !important;
    border-bottom: 1px solid var(--border, #f1f1f4) !important;
    border-color: var(--border, #f1f1f4) !important;
}
table.dataTable tbody td,
.dataTables_scrollBody tbody td {
    padding: 0.75rem 1rem !important;
    font-size: 0.8125rem !important;
    color: var(--foreground, #0f172a) !important;
    border: none !important;
    border-bottom: 1px solid var(--border, #f1f1f4) !important;
    border-color: var(--border, #f1f1f4) !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    background-color: transparent !important;
}
table.dataTable tbody tr:hover td {
    background-color: var(--muted, #f8fafc) !important;
}
@supports (color: color-mix(in lab, red, red)) {
    table.dataTable tbody tr:hover td {
        background-color: color-mix(in oklab, var(--muted) 40%, transparent) !important;
    }
}
table.dataTable tbody tr:last-child,
table.dataTable tbody tr:last-child td,
.dataTables_scrollBody tbody tr:last-child,
.dataTables_scrollBody tbody tr:last-child td {
    border-bottom: none !important;
}
table.dataTable td.dataTables_empty {
    padding: 3.5rem 1rem !important;
    text-align: center !important;
    color: var(--muted-foreground, #64748b) !important;
    font-size: 0.875rem !important;
    border-bottom: none !important;
}

/* Strip any unwanted borders from bootstrap table classes */
table.table-bordered,
table.table-bordered th,
table.table-bordered td,
.table-bordered > :not(caption) > * > * {
    border: none !important;
}

/* DataTable Footer & Pagination (Metronic Demo 1 Spec: app-roster.html & user visual) */
.dt-card-footer,
.dataTables_wrapper > .kt-card-footer,
.dataTables_wrapper > .dt-card-footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
    width: 100% !important;
    border-top: 1px solid var(--border, #f1f1f4) !important;
    border-color: var(--border, #f1f1f4) !important;
    background-color: var(--card, #ffffff) !important;
    box-sizing: border-box !important;
    padding: 0.75rem 1.25rem !important;
}

/* Force left-side alignment for info element or its wrapper */
.dt-footer-left,
.dt-card-footer > .dt-footer-left,
.dataTables_wrapper > .kt-card-footer > .dt-footer-left,
.dt-card-footer > .dataTables_info,
.dataTables_wrapper > .kt-card-footer > .dataTables_info,
.dt-card-footer > div:has(.dataTables_info),
.dataTables_wrapper > .kt-card-footer > div:has(.dataTables_info) {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
}

/* Force right-side alignment and grouping for pagination and length */
.dt-footer-right,
.dt-card-footer > .dt-footer-right,
.dataTables_wrapper > .kt-card-footer > .dt-footer-right,
.dt-card-footer > div:has(.dataTables_paginate),
.dataTables_wrapper > .kt-card-footer > div:has(.dataTables_paginate),
.dt-card-footer > div:has(.dataTables_length),
.dataTables_wrapper > .kt-card-footer > div:has(.dataTables_length) {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 1rem !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
}

/* Length dropdown (Show [ 25 ] per page) */
.dataTables_length,
div.dataTables_wrapper div.dataTables_length {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}
.dataTables_length label,
div.dataTables_wrapper div.dataTables_length label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--secondary-foreground, #27272a) !important;
    white-space: nowrap !important;
}
.dataTables_length select,
.dataTables_length .form-select,
.dataTables_length select.form-select-sm,
div.dataTables_wrapper div.dataTables_length select {
    display: inline-block !important;
    height: 2rem !important;
    min-height: 2rem !important;
    width: auto !important;
    min-width: 4.25rem !important;
    padding: 0.25rem 1.75rem 0.25rem 0.625rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    border-radius: 0.375rem !important;
    border: 1px solid var(--border, #e4e4e7) !important;
    border-color: var(--border, #e4e4e7) !important;
    background-color: var(--card, #ffffff) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
    background-size: 14px 10px !important;
    color: var(--foreground, #181c32) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.dataTables_length select:focus,
.dataTables_length .form-select:focus {
    border-color: var(--primary, #006ae6) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 106, 230, 0.12) !important;
}

/* Info Summary (1-25 of 100 entries) */
.dataTables_info,
div.dataTables_wrapper div.dataTables_info {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--muted-foreground, #71717a) !important;
    padding: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

/* Pagination container */
.dataTables_paginate,
div.dataTables_wrapper div.dataTables_paginate {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}
.dataTables_paginate .pagination,
.pagination {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.dataTables_paginate .page-item,
.pagination .page-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Pagination buttons (Demo 1 pill-square style with border) */
.dataTables_paginate .page-item .page-link,
.pagination .page-item .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2rem !important;
    height: 2rem !important;
    padding: 0 0.5rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border-radius: 0.375rem !important;
    border: 1px solid var(--border, #e4e4e7) !important;
    background-color: var(--card, #ffffff) !important;
    color: var(--foreground, #181c32) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: none !important;
}
.dataTables_paginate .page-item .page-link:hover:not(.disabled),
.pagination .page-item .page-link:hover:not(.disabled) {
    background-color: var(--accent, #f4f4f5) !important;
    color: var(--accent-foreground, #181c32) !important;
    border-color: var(--border, #d4d4d8) !important;
}
.dataTables_paginate .page-item.active .page-link,
.pagination .page-item.active .page-link {
    background-color: var(--primary, #006ae6) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-color: var(--primary, #006ae6) !important;
    border-radius: 0.375rem !important;
}
.dataTables_paginate .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link {
    opacity: 0.45 !important;
    pointer-events: none !important;
    cursor: default !important;
    background-color: var(--card, #ffffff) !important;
    border-color: var(--border, #e4e4e7) !important;
    color: var(--muted-foreground, #a1a1aa) !important;
}
.dataTables_paginate .page-item.previous .page-link,
.dataTables_paginate .page-item.next .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    color: var(--foreground, #181c32) !important;
    border-color: var(--border, #e4e4e7) !important;
    background-color: var(--card, #ffffff) !important;
}
.dataTables_paginate .page-item.previous.disabled .page-link,
.dataTables_paginate .page-item.next.disabled .page-link,
.pagination .page-item:first-child.disabled .page-link,
.pagination .page-item:last-child.disabled .page-link {
    color: var(--muted-foreground, #a1a1aa) !important;
    border-color: var(--border, #e4e4e7) !important;
    opacity: 0.45 !important;
}

/* DataTable Footer Responsive layout */
@media (min-width: 768px) {
    .dt-card-footer,
    .dataTables_wrapper > .kt-card-footer,
    .dataTables_wrapper > .dt-card-footer {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }
}
@media (max-width: 767.98px) {
    .dt-card-footer,
    .dataTables_wrapper > .kt-card-footer,
    .dataTables_wrapper > .dt-card-footer {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }
    .dt-footer-left,
    .dt-footer-right {
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }
}

/* DataTable Processing Indicator */
div.dataTables_processing {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0.625rem 1.25rem !important;
    background-color: var(--card, #ffffff) !important;
    border: 1px solid var(--border, #e4e4e7) !important;
    border-color: var(--border, #e4e4e7) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    color: var(--foreground, #0f172a) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    z-index: 100 !important;
}

/* ==========================================================================
   7. BADGES & ALERTS
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    border-radius: 0.375rem;
    white-space: nowrap;
}
.badge-primary, .bg-primary {
    background-color: rgba(0, 106, 230, 0.1) !important;
    color: #006ae6 !important;
}
.badge-secondary, .bg-secondary {
    background-color: rgba(113, 113, 122, 0.1) !important;
    color: #71717a !important;
}
.badge-success, .bg-success {
    background-color: rgba(22, 163, 74, 0.1) !important;
    color: #16a34a !important;
}
.badge-danger, .bg-danger {
    background-color: rgba(225, 29, 72, 0.1) !important;
    color: #e11d48 !important;
}
.badge-warning, .bg-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #d97706 !important;
}
.badge-info, .bg-info {
    background-color: rgba(6, 182, 212, 0.1) !important;
    color: #0891b2 !important;
}

.alert {
    position: relative;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius, 0.5rem);
    font-size: 0.875rem;
}
.alert-success {
    color: #15803d;
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}
.alert-danger {
    color: #b91c1c;
    background-color: #fef2f2;
    border-color: #fecaca;
}
.alert-warning {
    color: #b45309;
    background-color: #fffbeb;
    border-color: #fde68a;
}
.alert-info {
    color: #0e7490;
    background-color: #ecfeff;
    border-color: #a5f3fc;
}

/* ==========================================================================
   8. COMMON UTILITIES & HELPERS
   ========================================================================== */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-fill { flex: 1 1 auto !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-muted { color: var(--muted-foreground, #71717a) !important; }
.text-primary { color: var(--primary, #006ae6) !important; }
.text-danger { color: var(--destructive, #e11d48) !important; }
.text-success { color: #16a34a !important; }
.text-warning { color: #f59e0b !important; }
.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-normal { font-weight: 400 !important; }
.pointer, .cursor-pointer { cursor: pointer !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }

/* Page containers & helpers */
.page-body { width: 100%; }
.container-xl, .container-lg, .container-md, .container-sm, .container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
.btn-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.form-help {
    display: inline-flex;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.75rem;
    text-align: center;
    text-decoration: none;
    cursor: help;
    user-select: none;
    border-radius: 50%;
    color: var(--muted-foreground, #71717a);
    background-color: var(--secondary, #f4f4f5);
    border: 1px solid var(--border, #e4e4e7);
}
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.m-0 { margin: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.p-0 { padding: 0 !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }

/* ==========================================================================
   9. ICON BRIDGE: TABLER (.ti .ti-*) TO KEENICONS GLYPHS
   ========================================================================== */
.ti {
    font-family: 'keenicons-solid', 'keenicons-outline' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.ti-plus:before { content: "\ea9e"; }
.ti-trash:before { content: "\eb0e"; }
.ti-edit:before, .ti-pencil:before { content: "\ea7f"; }
.ti-eye:before { content: "\ea08"; }
.ti-eye-off:before { content: "\ea07"; }
.ti-upload:before { content: "\ea15"; }
.ti-arrow-left:before { content: "\e945"; }
.ti-arrow-right:before { content: "\e948"; }
.ti-check:before { content: "\e99e"; }
.ti-x:before, .ti-cross:before, .ti-close:before { content: "\e9b4"; }
.ti-filter:before { content: "\ea1c"; }
.ti-search:before { content: "\ea60"; }
.ti-lock:before { content: "\ea5b"; }
.ti-user:before { content: "\eb1f"; }
.ti-logout:before { content: "\ea04"; }
.ti-settings:before { content: "\ea5b"; }

/* ==========================================================================
   10. ONETOUCH MODULE SPECIFIC
   ========================================================================== */
.wrap-list-checkbox {
    min-height: 150px;
    max-height: 220px;
    overflow-y: scroll;
}
.wrap-list-checkbox::-webkit-scrollbar {
    display: none;
}
.wrap-attribute .wrap-item-attribute:not(:first-child) {
    border-top: 1px solid var(--border, rgba(97, 104, 118, 0.16));
}
.portlet-placeholder {
    border: 1px dotted var(--border, #e4e4e7);
    margin: 0 1em 1em 1em;
    height: 53px;
}
.wrap-table-scroll {
    width: 100%;
    overflow-x: scroll;
}
#blockSubmitFixed {
    transition: all 0.3s ease-in-out;
}

/* ==========================================================================
   11. METRONIC 3-DOT TABLE ACTION DROPDOWN BRIDGE
   ========================================================================== */
.kt-menu-dropdown {
    z-index: 1050 !important;
}

.kt-menu-toggle.kt-btn-ghost {
    color: var(--muted-foreground, #71717a);
}

.kt-menu-toggle.kt-btn-ghost:hover,
.kt-menu-item.show > .kt-menu-toggle.kt-btn-ghost {
    color: var(--foreground, #181c32);
    background-color: var(--secondary, #f4f4f5);
}

.kt-menu-dropdown .kt-menu-item > button.kt-menu-link,
.kt-menu-dropdown .kt-menu-item > form > button.kt-menu-link {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.kt-menu-dropdown .kt-menu-link.text-destructive,
.kt-menu-dropdown .kt-menu-link.text-destructive .kt-menu-title,
.kt-menu-dropdown .kt-menu-link.text-destructive .kt-menu-icon i {
    color: var(--destructive, #ef4444) !important;
}

.kt-menu-dropdown .kt-menu-link.text-destructive:hover {
    background-color: var(--destructive-light, rgba(239, 68, 68, 0.08)) !important;
}

/* Standardized compact width & alignment for table action column */
th.dt-col-action,
td.dt-col-action,
th.col-action,
td.col-action,
table.dataTable th.dt-col-action,
table.dataTable td.dt-col-action,
.kt-table th.col-action,
.kt-table td.col-action {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    text-align: center !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Dedicated compact width & alignment for table checkbox selection column */
th.dt-col-checkbox,
td.dt-col-checkbox,
th.col-checkbox,
td.col-checkbox,
table.dataTable th.dt-col-checkbox,
table.dataTable td.dt-col-checkbox,
.kt-table th.col-checkbox,
.kt-table td.col-checkbox {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 44px !important;
    text-align: center !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Suppress all DataTables sorting arrows and pointer events on action and checkbox headers */
th.dt-col-action::before,
th.dt-col-action::after,
th.col-action::before,
th.col-action::after,
table.dataTable thead > tr > th.dt-col-action::before,
table.dataTable thead > tr > th.dt-col-action::after,
table.dataTable thead > tr > th.col-action::before,
table.dataTable thead > tr > th.col-action::after,
table.dataTable thead > tr > th:last-child.dt-col-action::before,
table.dataTable thead > tr > th:last-child.dt-col-action::after,
table.dataTable thead > tr > th:last-child.col-action::before,
table.dataTable thead > tr > th:last-child.col-action::after,
th.dt-col-checkbox::before,
th.dt-col-checkbox::after,
th.col-checkbox::before,
th.col-checkbox::after,
table.dataTable thead > tr > th.dt-col-checkbox::before,
table.dataTable thead > tr > th.dt-col-checkbox::after,
table.dataTable thead > tr > th.col-checkbox::before,
table.dataTable thead > tr > th.col-checkbox::after,
table.dataTable thead > tr > th:first-child.dt-col-checkbox::before,
table.dataTable thead > tr > th:first-child.dt-col-checkbox::after {
    display: none !important;
    content: "" !important;
    opacity: 0 !important;
}

th.dt-col-action,
th.col-action,
th.dt-col-checkbox,
th.col-checkbox,
table.dataTable thead > tr > th.dt-col-action,
table.dataTable thead > tr > th.col-action,
table.dataTable thead > tr > th.dt-col-checkbox,
table.dataTable thead > tr > th.col-checkbox {
    cursor: default !important;
    background-image: none !important;
    padding-right: 0.25rem !important;
}

/* Override last-child padding for action column */
:is(table.dataTable thead th, .dataTables_scrollHead table thead th):last-child.dt-col-action,
:is(table.dataTable thead th, .dataTables_scrollHead table thead th):last-child.col-action,
:is(table.dataTable tfoot th, .dataTables_scrollFoot table th):last-child.dt-col-action,
:is(table.dataTable tfoot th, .dataTables_scrollFoot table th):last-child.col-action,
table.dataTable tbody td:last-child.dt-col-action,
table.dataTable tbody td:last-child.col-action,
.kt-table th:last-child.col-action,
.kt-table td:last-child.col-action,
:is(table.dataTable, .kt-table) td:last-child:has(.kt-menu) {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    text-align: center !important;
}

/* Ensure 3-dot menu and button are perfectly centered inside table cells */
:is(table.dataTable, .kt-table, .table) td .kt-menu,
td .kt-menu {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 auto !important;
    width: auto !important;
}

:is(table.dataTable, .kt-table, .table) td .kt-menu .kt-menu-item,
td .kt-menu .kt-menu-item {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
}

:is(table.dataTable, .kt-table, .table) td .kt-menu .kt-menu-toggle,
td .kt-menu .kt-menu-toggle {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
}

.kt-menu.flex-inline {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ==========================================================================
   12. METRONIC INLINE FILTER TOOLBAR (System-wide Standard)
   ========================================================================== */
.filter-bar,
form[id*="-filters"],
form[id*="filters"],
.kt-card > form.flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.625rem !important;
    padding: 0.875rem 1.25rem !important;
    border-bottom: 1px solid var(--border, #f1f1f4) !important;
    background-color: var(--card, #ffffff) !important;
    box-sizing: border-box !important;
}

/* Prevent inputs/selects from expanding to 100% width on the same line */
.filter-bar > *,
form[id*="-filters"] > *,
form[id*="filters"] > * {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Enforce specific utility widths inside filter forms */
.filter-bar .w-32, form[id*="-filters"] .w-32, form[id*="filters"] .w-32 { width: 8rem !important; flex: 0 0 8rem !important; }
.filter-bar .w-36, form[id*="-filters"] .w-36, form[id*="filters"] .w-36 { width: 9rem !important; flex: 0 0 9rem !important; }
.filter-bar .w-40, form[id*="-filters"] .w-40, form[id*="filters"] .w-40 { width: 10rem !important; flex: 0 0 10rem !important; }
.filter-bar .w-44, form[id*="-filters"] .w-44, form[id*="filters"] .w-44 { width: 11rem !important; flex: 0 0 11rem !important; }
.filter-bar .w-48, form[id*="-filters"] .w-48, form[id*="filters"] .w-48 { width: 12rem !important; flex: 0 0 12rem !important; }
.filter-bar .w-52, form[id*="-filters"] .w-52, form[id*="filters"] .w-52 { width: 13rem !important; flex: 0 0 13rem !important; }
.filter-bar .w-56, form[id*="-filters"] .w-56, form[id*="filters"] .w-56 { width: 14rem !important; flex: 0 0 14rem !important; }
.filter-bar .w-60, form[id*="-filters"] .w-60, form[id*="filters"] .w-60 { width: 15rem !important; flex: 0 0 15rem !important; }
.filter-bar .w-64, form[id*="-filters"] .w-64, form[id*="filters"] .w-64 { width: 16rem !important; flex: 0 0 16rem !important; }

/* Filter search input wrapper */
.filter-bar .filter-search,
form[id*="-filters"] .filter-search,
form[id*="filters"] .filter-search {
    width: 14rem !important;
    flex: 0 0 14rem !important;
}
.filter-bar .filter-search input,
form[id*="-filters"] .filter-search input,
form[id*="filters"] .filter-search input {
    width: 100% !important;
    height: 2.25rem !important;
    font-size: 0.8125rem !important;
    border-radius: 0.375rem !important;
}

/* Filter select elements (Override 100% width default) */
.filter-bar select.kt-select,
.filter-bar select.form-select,
form[id*="-filters"] select.kt-select,
form[id*="-filters"] select.form-select,
form[id*="filters"] select.kt-select,
form[id*="filters"] select.form-select {
    display: inline-block !important;
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    padding: 0.25rem 2rem 0.25rem 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    border-radius: 0.375rem !important;
    background-position: right 0.65rem center !important;
    background-size: 12px 8px !important;
    box-shadow: none !important;
    border: 1px solid var(--border, #e4e4e7) !important;
    background-color: var(--card, #ffffff) !important;
    color: var(--foreground, #181c32) !important;
    cursor: pointer !important;
}

/* Date inputs in filter bars */
.filter-bar input[type="date"],
form[id*="-filters"] input[type="date"],
form[id*="filters"] input[type="date"] {
    width: 8.75rem !important;
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    padding: 0.25rem 0.5rem 0.25rem 0.625rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border-radius: 0.375rem !important;
    border: 1px solid var(--border, #e4e4e7) !important;
    background-color: var(--card, #ffffff) !important;
    color: var(--foreground, #181c32) !important;
    box-shadow: none !important;
    flex: 0 0 8.75rem !important;
}

/* Action buttons in filter bars */
.filter-bar .kt-btn,
form[id*="-filters"] .kt-btn,
form[id*="filters"] .kt-btn {
    height: 2.25rem !important;
    padding: 0 0.875rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border-radius: 0.375rem !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Right-aligned toggle column or actions */
.filter-bar .filter-end,
form[id*="-filters"] .filter-end,
form[id*="filters"] .filter-end,
form[id*="-filters"] .ml-auto,
form[id*="filters"] .ml-auto {
    margin-left: auto !important;
    flex: 0 0 auto !important;
}

/* ==========================================================================
   13. METRONIC MENU HOVER & ACTIVE SYNCHRONIZED STATES (Icon + Text + Bullet)
   ========================================================================== */

/* Smooth color transitions for all menu links, icons, arrows, and bullets */
.kt-menu .kt-menu-link,
.kt-menu .kt-menu-link .kt-menu-icon,
.kt-menu .kt-menu-link .kt-menu-icon i,
.kt-menu .kt-menu-link .kt-menu-title,
.kt-menu .kt-menu-link .kt-menu-arrow,
.kt-menu .kt-menu-link .kt-menu-arrow i,
.kt-menu .kt-menu-link .kt-menu-bullet,
.kt-menu .kt-menu-link .kt-menu-bullet::before {
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

/* 1. HOVER STATE: When hovering over ANY menu link (Sidebar & Dropdowns) */
/* Both icon, text, and arrow turn primary blue */
.kt-menu .kt-menu-link:hover .kt-menu-icon,
.kt-menu .kt-menu-link:hover .kt-menu-icon i,
.kt-menu .kt-menu-item:hover > .kt-menu-link .kt-menu-icon,
.kt-menu .kt-menu-item:hover > .kt-menu-link .kt-menu-icon i {
    color: var(--primary, #006ae6) !important;
}

.kt-menu .kt-menu-link:hover .kt-menu-title,
.kt-menu .kt-menu-item:hover > .kt-menu-link .kt-menu-title {
    color: var(--primary, #006ae6) !important;
}

.kt-menu .kt-menu-link:hover .kt-menu-arrow,
.kt-menu .kt-menu-link:hover .kt-menu-arrow i,
.kt-menu .kt-menu-item:hover > .kt-menu-link .kt-menu-arrow,
.kt-menu .kt-menu-item:hover > .kt-menu-link .kt-menu-arrow i {
    color: var(--primary, #006ae6) !important;
}

.kt-menu .kt-menu-link:hover .kt-menu-bullet::before,
.kt-menu .kt-menu-item:hover > .kt-menu-link .kt-menu-bullet::before {
    background-color: var(--primary, #006ae6) !important;
}

/* 2. ACTIVE / HERE / SHOW STATE: Active pages or active parent sections */
.kt-menu .kt-menu-item.active > .kt-menu-link .kt-menu-icon,
.kt-menu .kt-menu-item.active > .kt-menu-link .kt-menu-icon i,
.kt-menu .kt-menu-item.here > .kt-menu-link .kt-menu-icon,
.kt-menu .kt-menu-item.here > .kt-menu-link .kt-menu-icon i,
.kt-menu .kt-menu-item.show > .kt-menu-link .kt-menu-icon,
.kt-menu .kt-menu-item.show > .kt-menu-link .kt-menu-icon i {
    color: var(--primary, #006ae6) !important;
}

.kt-menu .kt-menu-item.active > .kt-menu-link .kt-menu-title,
.kt-menu .kt-menu-item.here > .kt-menu-link .kt-menu-title,
.kt-menu .kt-menu-item.show > .kt-menu-link .kt-menu-title {
    color: var(--primary, #006ae6) !important;
}

.kt-menu .kt-menu-item.active > .kt-menu-link .kt-menu-arrow,
.kt-menu .kt-menu-item.active > .kt-menu-link .kt-menu-arrow i,
.kt-menu .kt-menu-item.here > .kt-menu-link .kt-menu-arrow,
.kt-menu .kt-menu-item.here > .kt-menu-link .kt-menu-arrow i,
.kt-menu .kt-menu-item.show > .kt-menu-link .kt-menu-arrow,
.kt-menu .kt-menu-item.show > .kt-menu-link .kt-menu-arrow i {
    color: var(--primary, #006ae6) !important;
}

.kt-menu .kt-menu-item.active > .kt-menu-link .kt-menu-bullet::before,
.kt-menu .kt-menu-item.here > .kt-menu-link .kt-menu-bullet::before {
    background-color: var(--primary, #006ae6) !important;
}

/* 3. DROPDOWN MENU LINKS (e.g. Account dropdown in topbar) */
.kt-dropdown-menu .kt-dropdown-menu-link:hover,
.kt-dropdown-menu .kt-dropdown-menu-link:hover i {
    color: var(--primary, #006ae6) !important;
    transition: color 0.15s ease-in-out !important;
}

/* 4. EXCEPTIONS FOR DESTRUCTIVE ACTIONS */
.kt-menu .kt-menu-link.text-destructive:hover .kt-menu-icon,
.kt-menu .kt-menu-link.text-destructive:hover .kt-menu-icon i,
.kt-menu .kt-menu-link.text-destructive:hover .kt-menu-title,
.kt-dropdown-menu .kt-dropdown-menu-link.text-destructive:hover,
.kt-dropdown-menu .kt-dropdown-menu-link.text-destructive:hover i {
    color: var(--destructive, #ef4444) !important;
}

/* ==========================================================================
   SIDEBAR COLLAPSE ENHANCEMENTS
   ========================================================================== */
.demo1.kt-sidebar-collapse .kt-sidebar:hover:not(.animating) {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   NOTIFICATIONS DRAWER & FEED ENHANCEMENTS
   ========================================================================== */
#notifications_drawer {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

#notifications_tabs .kt-tab-toggle {
    position: relative;
    color: var(--muted-foreground, #71717a) !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    user-select: none;
}

#notifications_tabs .kt-tab-toggle:hover {
    color: var(--foreground, #181c32) !important;
    border-bottom-color: var(--border, #e4e4e7) !important;
}

#notifications_tabs .kt-tab-toggle.active {
    color: var(--primary, #006ae6) !important;
    border-bottom-color: var(--primary, #006ae6) !important;
    font-weight: 600 !important;
}

#notifications_tabs .kt-tab-toggle .tab-badge {
    transition: background-color 0.15s ease, color 0.15s ease;
}

#notifications_tabs .kt-tab-toggle.active .tab-badge {
    background-color: rgba(0, 106, 230, 0.12) !important;
    color: var(--primary, #006ae6) !important;
}

#notifications_tabs .kt-tab-toggle:not(.active) .tab-badge {
    background-color: var(--muted, #f4f4f5) !important;
    color: var(--muted-foreground, #71717a) !important;
}

.dark #notifications_tabs .kt-tab-toggle.active .tab-badge {
    background-color: rgba(0, 106, 230, 0.25) !important;
    color: #60a5fa !important;
}

.dark #notifications_tabs .kt-tab-toggle:not(.active) .tab-badge {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #a1a1aa !important;
}

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

.notification-card.unread {
    background-color: rgba(0, 106, 230, 0.04) !important;
    border-color: rgba(0, 106, 230, 0.12) !important;
}

.notification-card.unread:hover {
    background-color: rgba(0, 106, 230, 0.08) !important;
    border-color: rgba(0, 106, 230, 0.2) !important;
}

.notification-card:not(.unread) {
    background-color: transparent !important;
    border-color: transparent !important;
}

.notification-card:not(.unread):hover {
    background-color: var(--muted, #f4f4f5) !important;
}

.notification-item-dot-pulse {
    position: relative;
}

.notification-item-dot-pulse::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    background-color: var(--primary, #006ae6);
    opacity: 0.35;
    animation: notification-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes notification-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.35;
    }
    50% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.notifications-scroll-area::-webkit-scrollbar {
    width: 5px;
}

.notifications-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.notifications-scroll-area::-webkit-scrollbar-thumb {
    background-color: var(--border, #e4e4e7);
    border-radius: 4px;
}

/* Notification indicator dot — fix missing Tailwind `top-1.5` / `end-1.5` utilities */
#kt_header_notifications_toggle .notification-indicator {
    top: 6px;
    inset-inline-end: 6px;
    width: 8px;
    height: 8px;
}

/* ==========================================================================
   ONETOUCH V3 - BRAND LOGO & SIDEBAR RESPONSIVE / COLLAPSE SYSTEM
   ========================================================================== */
.theme-logo-dark {
    display: none !important;
}
.theme-logo-light {
    display: inline-block !important;
}

html.dark .theme-logo-light,
[data-kt-theme-mode="dark"] .theme-logo-light {
    display: none !important;
}
html.dark .theme-logo-dark,
[data-kt-theme-mode="dark"] .theme-logo-dark {
    display: inline-block !important;
}

/* Sidebar default state (Expanded) */
.demo1 .kt-sidebar .small-logo {
    display: none !important;
}
html:not(.dark) .demo1 .kt-sidebar .default-logo.theme-logo-light {
    display: inline-block !important;
}
html:not(.dark) .demo1 .kt-sidebar .default-logo.theme-logo-dark {
    display: none !important;
}
html.dark .demo1 .kt-sidebar .default-logo.theme-logo-light {
    display: none !important;
}
html.dark .demo1 .kt-sidebar .default-logo.theme-logo-dark {
    display: inline-block !important;
}

/* Sidebar Collapsed State (Not Hovered) - High Specificity */
.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .default-logo,
.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .default-logo.theme-logo-light,
.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .default-logo.theme-logo-dark,
html.dark .demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .default-logo,
html.dark .demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .default-logo.theme-logo-dark,
html:not(.dark) .demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .default-logo.theme-logo-light {
    display: none !important;
}

.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .small-logo {
    display: inline-block !important;
}

.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-sidebar-header {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-sidebar-logo {
    justify-content: center !important;
    width: 100% !important;
    padding-right: 0 !important;
}
.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-sidebar-logo a {
    justify-content: center !important;
    width: 100% !important;
}

/* Sidebar Collapsed State (Hovered / Expanded temporarily) */
.demo1.kt-sidebar-collapse .kt-sidebar:hover .small-logo {
    display: none !important;
}
html:not(.dark) .demo1.kt-sidebar-collapse .kt-sidebar:hover .default-logo.theme-logo-light {
    display: inline-block !important;
}
html:not(.dark) .demo1.kt-sidebar-collapse .kt-sidebar:hover .default-logo.theme-logo-dark {
    display: none !important;
}
html.dark .demo1.kt-sidebar-collapse .kt-sidebar:hover .default-logo.theme-logo-dark {
    display: inline-block !important;
}
html.dark .demo1.kt-sidebar-collapse .kt-sidebar:hover .default-logo.theme-logo-light {
    display: none !important;
}

/* ==========================================================================
   Import Form Single Row Layout (Balanced 5 Elements)
   ========================================================================== */
.import-single-row,
.import-fields-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.import-single-row .import-col,
.import-fields-row .import-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.import-single-row .import-col-mode,
.import-fields-row .import-col-mode {
    flex: 1.1 1 0%;
    min-width: 150px;
}

.import-single-row .import-col-file,
.import-fields-row .import-col-file {
    flex: 1.3 1 0%;
    min-width: 180px;
}

.import-single-row .import-col-password,
.import-fields-row .import-col-password {
    flex: 1.3 1 0%;
    min-width: 200px;
}

.import-single-row .import-col-province,
.import-fields-row .import-col-province {
    flex: 1.4 1 0%;
    min-width: 190px;
}

.import-single-row .import-col-submit,
.import-fields-row .import-col-submit {
    flex: 0 0 auto;
    min-width: 110px;
}

.import-single-row .kt-input,
.import-single-row .kt-select,
.import-single-row .import-checkbox-box,
.import-single-row .kt-btn,
.import-fields-row .kt-input,
.import-fields-row .kt-select,
.import-fields-row .import-checkbox-box,
.import-fields-row .kt-btn {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    box-sizing: border-box;
}

.import-single-row .import-label,
.import-fields-row .import-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 20px;
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--foreground, #181c32);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-single-row .import-label.required:after,
.import-fields-row .import-label.required:after {
    content: " *";
    color: var(--destructive, #e11d48);
    font-weight: bold;
}

.import-single-row .import-checkbox-box,
.import-fields-row .import-checkbox-box {
    display: flex;
    align-items: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border: 1px solid var(--input, #e4e4e7);
    border-radius: var(--radius, 0.5rem);
    background-color: var(--background, #ffffff);
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.import-single-row .import-checkbox-box:hover,
.import-fields-row .import-checkbox-box:hover {
    border-color: var(--primary, #006ae6);
    background-color: rgba(0, 106, 230, 0.02);
}

.import-single-row input[type="file"].kt-input,
.import-fields-row input[type="file"].kt-input {
    display: flex;
    align-items: center;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.import-single-row input[type="file"].kt-input::file-selector-button,
.import-fields-row input[type="file"].kt-input::file-selector-button {
    height: 26px;
    padding: 0 0.625rem;
    margin-right: 0.5rem;
    border: 0;
    border-radius: 0.25rem;
    background-color: var(--secondary, #f4f4f5);
    color: var(--foreground, #181c32);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.import-single-row input[type="file"].kt-input::file-selector-button:hover,
.import-fields-row input[type="file"].kt-input::file-selector-button:hover {
    background-color: var(--muted, #e4e4e7);
}

@media (min-width: 640px) and (max-width: 991px) {
    .import-single-row,
    .import-fields-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .import-single-row .import-col-submit,
    .import-fields-row .import-col-submit {
        grid-column: span 2;
    }
}

@media (min-width: 992px) {
    .import-single-row,
    .import-fields-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ==========================================================================
   News, FAQ & Resource Filter Bar Single Row Layout
   ========================================================================== */
.news-filter-form,
.faq-filter-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .news-filter-form {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .news-filter-form > .filter-item {
        flex: 1 1 160px;
        min-width: 0;
    }
    .news-filter-form > .filter-item-keyword {
        flex: 1.4 1 180px;
        min-width: 0;
    }
    .news-filter-form > .filter-action {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .faq-filter-form {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }
    .faq-filter-form > .filter-item {
        flex: 1 1 0;
        min-width: 0;
    }
    .faq-filter-form > .filter-item-keyword {
        flex: 1.4 1 0;
        min-width: 0;
    }
    .faq-filter-form > .filter-action {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

@media (min-width: 1024px) {
    .news-filter-form {
        flex-wrap: nowrap;
    }
    .news-filter-form > .filter-item {
        flex: 1 1 0;
        min-width: 0;
    }
    .news-filter-form > .filter-item-keyword {
        flex: 1.4 1 0;
        min-width: 0;
    }
    .news-filter-form > .filter-action {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

.news-filter-form .kt-input,
.news-filter-form .kt-select,
.news-filter-form .kt-btn,
.faq-filter-form .kt-input,
.faq-filter-form .kt-select,
.faq-filter-form .kt-btn {
    height: 38px !important;
}

/* ==========================================================================
   Password Input with Toggle Button
   ========================================================================== */
.password-input {
    padding-right: 2.75rem !important;
}

.password-toggle-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground, #71717a);
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
    z-index: 2;
}

.password-toggle-btn:hover {
    color: var(--foreground, #181c32);
}

/* ==========================================================================
   6. APP FOOTER (Metronic V3 Layout Bridge)
   ========================================================================== */
:root {
    --footer-height: 64px;
}

@media (max-width: 63.98rem) {
    :root {
        --footer-height: 110px;
    }
}

.app-footer {
    border-top: 1px solid #bfdbfe;
    background: #edf5fe;
    color: #475569;
    margin-top: auto;
}

/* Fixed Footer pinned to bottom of viewport */
.demo1.kt-footer-fixed .app-footer,
.kt-footer-fixed .app-footer {
    position: fixed;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 25;
    background: #edf5fe;
    border-top: 1px solid #bfdbfe;
    box-shadow: 0 -2px 10px rgba(0, 106, 230, 0.06);
}

.demo1 .app-footer {
    transition: inset-inline-start var(--sidebar-transition-duration, 0.3s) var(--sidebar-transition-timing, ease);
}

@media (min-width: 64rem) {
    .demo1.kt-sidebar-fixed.kt-footer-fixed .app-footer,
    .demo1.kt-sidebar-fixed .app-footer-fixed {
        inset-inline-start: var(--sidebar-width) !important;
    }
}

/* Ensure content above fixed footer is fully visible on scroll */
.demo1.kt-footer-fixed .kt-wrapper,
.kt-footer-fixed .kt-wrapper {
    padding-bottom: var(--footer-height);
}

.app-footer-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.625rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

@media (min-width: 1024px) {
    .app-footer-wrapper {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}

.app-footer-left {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
}

.app-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #1e293b;
}

.app-footer-title {
    font-weight: 700;
    color: #006ae6 !important;
    letter-spacing: 0.025em;
    text-shadow: none;
}

.app-footer-divider {
    color: #94a3b8;
    user-select: none;
}

.app-footer-desc {
    font-size: 0.8125rem;
    color: #64748b !important;
    font-weight: 400;
}

.app-footer-contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 1.25rem;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
}

.app-footer-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #64748b;
}

.app-footer-contact-item i {
    font-size: 0.875rem;
    color: #006ae6 !important;
    flex-shrink: 0;
}

.app-footer-contact-item a {
    color: #475569;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.app-footer-contact-item a:hover {
    color: #006ae6 !important;
    text-decoration: underline;
}

.app-footer-right {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: flex-start;
    text-align: left;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .app-footer-right {
        align-items: flex-end;
        text-align: right;
    }
}

.app-footer-copyright {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #64748b;
}

.app-footer-copyright span {
    color: #1e293b;
    font-weight: 600;
}

.app-footer-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: #64748b;
    line-height: 1.4;
}

.app-footer-version {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #334155;
    font-weight: 500;
}

.app-footer-status-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 9999px;
    background-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
    display: inline-block;
    flex-shrink: 0;
}

.bg-emerald-500 {
    background-color: #10b981 !important;
}

.app-footer-dot-sep {
    color: #cbd5e1;
    user-select: none;
}

.app-footer-decision {
    color: #64748b;
    opacity: 0.9;
}

/* Dark Mode support for Soft Blue Footer */
html.dark .app-footer,
html.dark .demo1.kt-footer-fixed .app-footer,
html.dark .kt-footer-fixed .app-footer {
    background: #0f172a;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

html.dark .app-footer-brand {
    color: #f1f5f9;
}

html.dark .app-footer-title {
    color: #60a5fa !important;
}

html.dark .app-footer-desc,
html.dark .app-footer-contacts,
html.dark .app-footer-contact-item,
html.dark .app-footer-copyright,
html.dark .app-footer-meta,
html.dark .app-footer-decision {
    color: #94a3b8 !important;
}

html.dark .app-footer-contact-item a {
    color: #cbd5e1;
}

html.dark .app-footer-contact-item a:hover {
    color: #60a5fa !important;
}

html.dark .app-footer-contact-item i {
    color: #60a5fa !important;
}

html.dark .app-footer-copyright span,
html.dark .app-footer-version {
    color: #f1f5f9 !important;
}

/* ==========================================================================
   PASSWORD VISIBILITY TOGGLE COMPONENT
   ========================================================================== */
.password-toggle-btn {
    position: absolute;
    inset-inline-end: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground, #71717a);
    cursor: pointer;
    border-radius: 0.375rem;
    background: transparent;
    border: none;
    padding: 0;
    transition: color 0.15s ease, background-color 0.15s ease;
    z-index: 5;
}

.password-toggle-btn:hover {
    color: var(--foreground, #09090b);
    background-color: var(--muted, rgba(0, 0, 0, 0.05));
}

html.dark .password-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.password-toggle-btn:focus-visible {
    outline: 2px solid var(--primary, #006ae6);
    outline-offset: 1px;
}

.password-toggle-btn i {
    font-size: 1.125rem;
    line-height: 1;
}

.password-toggle-btn .hidden,
.password-toggle-btn i.hidden,
.password-toggle-btn [hidden] {
    display: none !important;
}

.relative:has(.password-toggle-btn) input,
.relative input[type="password"],
.relative input[type="text"].has-password-toggle,
.input-password-wrapper input,
input.password-input {
    padding-inline-end: 2.75rem !important;
}

/* ==========================================================================
   STAT CARDS & COLORFUL BADGES
   ========================================================================== */
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (min-width: 640px) {
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4,
    .stat-cards-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .lg\:grid-cols-5,
    .stat-cards-grid-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-4,
    .stat-cards-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .xl\:grid-cols-5,
    .stat-cards-grid-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

.stat-card-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-decoration: none !important;
}

.stat-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.08), 0 3px 6px -2px rgba(0, 0, 0, 0.04);
}

.stat-card-item.is-active {
    border-color: var(--primary, #006ae6) !important;
    background-color: rgba(0, 106, 230, 0.04) !important;
    box-shadow: 0 0 0 2px rgba(0, 106, 230, 0.3), 0 4px 12px -2px rgba(0, 106, 230, 0.15) !important;
}

html.dark .stat-card-item.is-active {
    background-color: rgba(0, 106, 230, 0.12) !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4) !important;
}

.stat-card-badge {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-item:hover .stat-card-badge {
    transform: scale(1.08);
}

.stat-card-badge i {
    font-size: 1.35rem !important;
    line-height: 1 !important;
}

/* Blue / Primary */
.stat-badge-blue,
.stat-badge-primary,
.bg-blue-50 {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
}
.stat-badge-blue i,
.stat-badge-primary i,
.text-blue-600 {
    color: #2563eb !important;
}
html.dark .stat-badge-blue,
html.dark .stat-badge-primary,
html.dark .bg-blue-50 {
    background-color: rgba(37, 99, 235, 0.2) !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
}
html.dark .stat-badge-blue i,
html.dark .stat-badge-primary i,
html.dark .text-blue-600 {
    color: #60a5fa !important;
}

/* Emerald / Green / Success */
.stat-badge-emerald,
.stat-badge-green,
.stat-badge-success,
.bg-emerald-50,
.bg-green-50 {
    background-color: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}
.stat-badge-emerald i,
.stat-badge-green i,
.stat-badge-success i,
.text-emerald-600,
.text-green-600 {
    color: #059669 !important;
}
html.dark .stat-badge-emerald,
html.dark .stat-badge-green,
html.dark .stat-badge-success,
html.dark .bg-emerald-50,
html.dark .bg-green-50 {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
}
html.dark .stat-badge-emerald i,
html.dark .stat-badge-green i,
html.dark .stat-badge-success i,
html.dark .text-emerald-600,
html.dark .text-green-600 {
    color: #34d399 !important;
}

/* Amber / Yellow / Orange / Warning */
.stat-badge-amber,
.stat-badge-yellow,
.stat-badge-orange,
.stat-badge-warning,
.bg-amber-50,
.bg-yellow-50 {
    background-color: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
}
.stat-badge-amber i,
.stat-badge-yellow i,
.stat-badge-orange i,
.stat-badge-warning i,
.text-amber-600,
.text-yellow-600 {
    color: #d97706 !important;
}
html.dark .stat-badge-amber,
html.dark .stat-badge-yellow,
html.dark .stat-badge-orange,
html.dark .stat-badge-warning,
html.dark .bg-amber-50,
html.dark .bg-yellow-50 {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
}
html.dark .stat-badge-amber i,
html.dark .stat-badge-yellow i,
html.dark .stat-badge-orange i,
html.dark .stat-badge-warning i,
html.dark .text-amber-600,
html.dark .text-yellow-600 {
    color: #fbbf24 !important;
}

/* Rose / Red / Danger */
.stat-badge-rose,
.stat-badge-red,
.stat-badge-danger,
.bg-rose-50,
.bg-red-50 {
    background-color: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
}
.stat-badge-rose i,
.stat-badge-red i,
.stat-badge-danger i,
.text-rose-600,
.text-red-600 {
    color: #e11d48 !important;
}
html.dark .stat-badge-rose,
html.dark .stat-badge-red,
html.dark .stat-badge-danger,
html.dark .bg-rose-50,
html.dark .bg-red-50 {
    background-color: rgba(225, 29, 72, 0.2) !important;
    color: #fb7185 !important;
    border-color: rgba(251, 113, 133, 0.35) !important;
}
html.dark .stat-badge-rose i,
html.dark .stat-badge-red i,
html.dark .stat-badge-danger i,
html.dark .text-rose-600,
html.dark .text-red-600 {
    color: #fb7185 !important;
}

/* Purple / Violet */
.stat-badge-purple,
.stat-badge-violet,
.bg-purple-50,
.bg-violet-50 {
    background-color: #f5f3ff !important;
    color: #7c3aed !important;
    border: 1px solid #ddd6fe !important;
}
.stat-badge-purple i,
.stat-badge-violet i,
.text-purple-600,
.text-violet-600 {
    color: #7c3aed !important;
}
html.dark .stat-badge-purple,
html.dark .stat-badge-violet,
html.dark .bg-purple-50,
html.dark .bg-violet-50 {
    background-color: rgba(124, 58, 237, 0.2) !important;
    color: #a78bfa !important;
    border-color: rgba(167, 139, 250, 0.35) !important;
}
html.dark .stat-badge-purple i,
html.dark .stat-badge-violet i,
html.dark .text-purple-600,
html.dark .text-violet-600 {
    color: #a78bfa !important;
}

/* Cyan / Teal / Sky */
.stat-badge-cyan,
.stat-badge-teal,
.bg-cyan-50,
.bg-teal-50 {
    background-color: #ecfeff !important;
    color: #0891b2 !important;
    border: 1px solid #a5f3fc !important;
}
.stat-badge-cyan i,
.stat-badge-teal i,
.text-cyan-600,
.text-teal-600 {
    color: #0891b2 !important;
}
html.dark .stat-badge-cyan,
html.dark .stat-badge-teal,
html.dark .bg-cyan-50,
html.dark .bg-teal-50 {
    background-color: rgba(8, 145, 178, 0.2) !important;
    color: #22d3ee !important;
    border-color: rgba(34, 211, 238, 0.35) !important;
}
html.dark .stat-badge-cyan i,
html.dark .stat-badge-teal i,
html.dark .text-cyan-600,
html.dark .text-teal-600 {
    color: #22d3ee !important;
}

/* Slate / Gray */
.stat-badge-slate,
.stat-badge-gray,
.bg-slate-100 {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}
.stat-badge-slate i,
.stat-badge-gray i,
.text-slate-700 {
    color: #475569 !important;
}
html.dark .stat-badge-slate,
html.dark .stat-badge-gray,
html.dark .bg-slate-100 {
    background-color: rgba(100, 116, 139, 0.2) !important;
    color: #94a3b8 !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}
html.dark .stat-badge-slate i,
html.dark .stat-badge-gray i,
html.dark .text-slate-700 {
    color: #94a3b8 !important;
}