/* Demo Code Examples - Dark Mode Compatible */
.demo-code-block {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
}

.dark .demo-code-block {
    background-color: #374151;
    border-color: #4b5563;
}

.demo-code-text {
    color: #4b5563;
    font-size: 0.875rem;
}

.dark .demo-code-text {
    color: #d1d5db;
}

.demo-code {
    color: #1f2937;
    background-color: #f9fafb;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.dark .demo-code {
    color: #e5e7eb;
    background-color: #111827;
}

/* Compact table override for dense data display */
.kt-table-compact {
    thead th {
        padding-inline: calc(var(--spacing) * 2) !important;
        padding-block: calc(var(--spacing) * 1.5) !important;
        height: calc(var(--spacing) * 7) !important;
    }

    tbody td {
        padding-inline: calc(var(--spacing) * 2) !important;
        padding-block: calc(var(--spacing) * 1.5) !important;
    }
}

/* Make action buttons compact to match text row height */
.kt-btn-xs {
    height: 16px !important;
    min-height: 16px !important;
    width: 16px !important;
    min-width: 16px !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 9px !important;
}

/* Modal size classes - ensure arbitrary values are available */
.max-w-\[300px\] {
    max-width: 300px !important;
}

.max-w-\[400px\] {
    max-width: 400px !important;
}

.max-w-\[500px\] {
    max-width: 500px !important;
}

.max-w-\[600px\] {
    max-width: 600px !important;
}

.max-w-\[800px\] {
    max-width: 800px !important;
}

/* Tab disabled styling - inherit from Metronic theme's muted styling */
button[data-kt-tab-toggle][disabled] {
    /* Inherit the theme's muted text color */
    color: var(--kt-text-muted-color, #6c757d) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Tab disabled stwe are not using bootstrap
yling - override browser defaults */
.kt-tab-toggle[disabled] {
    color: #6c757d !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Dark mode support for disabled tabs */
.dark .kt-tab-toggle[disabled] {
    color: #adb5bd !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* ===== LOADING SPINNER ANIMATIONS ===== */

/* Keyframe animations */
@keyframes kt-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes kt-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.95);
    }
}

@keyframes kt-bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

@keyframes kt-fade {
    0%, 39%, 100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}

/* Spinner base classes */
.kt-spinner {
    display: inline-block;
    border-radius: 50%;
}

/* Border spinner - rotating circle with transparent top */
.kt-spinner-border {
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: kt-spin 1s linear infinite;
}

/* Simple spin animation without borders - for icons */
.kt-spin {
    animation: kt-spin 1s linear infinite;
}

/* Ensure buttons render properly */
.btn {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    color: #fff;
    background-color: #0056b3;
    border-color: #004085;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #545b62;
    border-color: #4e555b;
}

/* ===== LOADING OVERLAY COMPONENT ===== */

/* Full-screen overlay backdrop */
.kt-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Dark mode overlay backdrop */
.dark .kt-loading-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Visible state */
.kt-loading-overlay-visible {
    opacity: 1;
    visibility: visible;
}

/* Content container */
.kt-loading-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    padding: 2rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    min-width: 200px;
    max-width: 400px;
    text-align: center;
}

/* Spinner container */
.kt-loading-overlay-spinner {
    margin-bottom: 1rem;
}

/* Loading text */
.kt-loading-overlay-text {
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Custom content container */
.kt-loading-overlay-custom {
    margin-top: 1rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

/* Pulse spinner - growing/shrinking circle */
.kt-spinner-pulse {
    background-color: currentColor;
    animation: kt-pulse 1.5s ease-in-out infinite;
}

/* Bouncing dots container */
.kt-spinner-dots {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.kt-spinner-dot {
    width: 0.5rem;
    height: 0.5rem;
    background-color: currentColor;
    border-radius: 50%;
    animation: kt-bounce 1.4s ease-in-out infinite both;
}

/* Staggered animation delays for bouncing dots */
.kt-spinner-dot:nth-child(1) { animation-delay: -0.32s; }
.kt-spinner-dot:nth-child(2) { animation-delay: -0.16s; }
.kt-spinner-dot:nth-child(3) { animation-delay: 0s; }

/* Fading dots animation */
.kt-spinner-fade-dots {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.kt-spinner-fade-dot {
    width: 0.5rem;
    height: 0.5rem;
    background-color: currentColor;
    border-radius: 50%;
    animation: kt-fade 1.4s ease-in-out infinite;
}

.kt-spinner-fade-dot:nth-child(1) { animation-delay: 0s; }
.kt-spinner-fade-dot:nth-child(2) { animation-delay: 0.2s; }
.kt-spinner-fade-dot:nth-child(3) { animation-delay: 0.4s; }

/* Size variants */
.kt-spinner-xs { width: 1rem; height: 1rem; }
.kt-spinner-sm { width: 1.5rem; height: 1.5rem; }
.kt-spinner-md { width: 2rem; height: 2rem; }
.kt-spinner-lg { width: 2.5rem; height: 2.5rem; }
.kt-spinner-xl { width: 3rem; height: 3rem; }

/* Color variants using theme colors */
.kt-spinner-primary { color: var(--kt-primary, #3b82f6); }
.kt-spinner-secondary { color: var(--kt-secondary, #6b7280); }
.kt-spinner-success { color: var(--kt-success, #10b981); }
.kt-spinner-warning { color: var(--kt-warning, #f59e0b); }
.kt-spinner-danger { color: var(--kt-danger, #ef4444); }
.kt-spinner-info { color: var(--kt-info, #06b6d4); }
.kt-spinner-light { color: var(--kt-light, #f8fafc); }
.kt-spinner-dark { color: var(--kt-dark, #1e293b); }

/* ===== LOADING WRAPPER COMPONENT ===== */

/* Wrapper container - relative positioning for overlay */
.kt-loading-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

/* Active state for wrapper */
.kt-loading-wrapper-active {
    /* Prevent interaction with child content when loading */
    pointer-events: none;
}

/* Loading overlay - positioned relative to wrapper */
.kt-loading-wrapper .kt-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    border-radius: inherit;
}

/* Dark mode overlay for wrapper */
.dark .kt-loading-wrapper .kt-loading-overlay {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Visible state for wrapper overlay */
.kt-loading-wrapper .kt-loading-overlay-visible {
    opacity: 1;
    visibility: visible;
}

/* Blur backdrop variant */
.kt-loading-wrapper .kt-loading-overlay-blur {
    backdrop-filter: blur(2px);
}

/* Loading content container for wrapper */
.kt-loading-wrapper .kt-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}

/* Spinner container for wrapper */
.kt-loading-wrapper .kt-loading-spinner-container {
    margin-bottom: 0.75rem;
}

/* Loading text for wrapper */
.kt-loading-wrapper .kt-loading-text {
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
}

/* Dark mode text color */
.dark .kt-loading-wrapper .kt-loading-text {
    color: var(--foreground);
}

/* ===== STICKY TABLE HEADERS ===== */
.kt-table-sticky {
    thead th {
        position: sticky;
        top: 0;
        background-color: var(--background);
        z-index: 10;
        border-bottom: 1px solid var(--border);
    }
}

/* Ensure sticky headers have solid background in all scenarios */
.kt-table-sticky thead th {
    /* Force solid background to prevent transparency issues */
    background-color: var(--background) !important;
}

/* Dark mode support for sticky headers */
.dark .kt-table-sticky thead th {
    background-color: var(--background) !important;
}

/* ===== DATATABLE SORTING INDICATORS ===== */
.kt-table-sort-icon {
    display: inline-block;
    width: 8px;
    height: 5px;
    margin-left: 0.5rem;
    position: relative;
}

/* Sortable column headers should show pointer cursor */
th[role="button"] {
    cursor: pointer;
}

th[role="button"]:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Sticky table headers need solid background on hover to prevent transparency */
.kt-table-sticky thead th[role="button"]:hover {
    background-color: color-mix(in srgb, var(--background) 95%, black 5%) !important;
}

/* Dark mode hover for sticky headers */
.dark .kt-table-sticky thead th[role="button"]:hover {
    background-color: color-mix(in srgb, var(--background) 95%, white 5%) !important;
}

.kt-table-sort-icon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Default unsorted state - both arrows */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10' viewBox='0 0 8 10' fill='none'%3E%3Cpath d='M1.08333 3.16667C0.908333 3.16667 0.791667 3.225 0.675 3.34167C0.441667 3.575 0.441667 3.925 0.675 4.15833L3.59167 7.075C3.825 7.30833 4.175 7.30833 4.40833 7.075L7.325 4.15833C7.55833 3.925 7.55833 3.575 7.325 3.34167C7.09167 3.10833 6.74167 3.10833 6.50833 3.34167L4 5.85L1.49167 3.34167C1.375 3.225 1.25833 3.16667 1.08333 3.16667Z' fill='%23C9CEDA'/%3E%3Cpath d='M1.08333 6.83333C0.908333 6.83333 0.791667 6.775 0.675 6.65833C0.441667 6.425 0.441667 6.075 0.675 5.84167L3.59167 2.925C3.825 2.69167 4.175 2.69167 4.40833 2.925L7.325 5.84167C7.55833 6.075 7.55833 6.425 7.325 6.65833C7.09167 6.89167 6.74167 6.89167 6.50833 6.65833L4 4.15L1.49167 6.65833C1.375 6.775 1.25833 6.83333 1.08333 6.83333Z' fill='%23C9CEDA'/%3E%3C/svg%3E");
}

/* Ascending sort - up arrow */
[aria-sort='ascending'] .kt-table-sort-icon:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3E%3C/svg%3E");
}

/* Descending sort - down arrow */
[aria-sort='descending'] .kt-table-sort-icon:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M6.91667 0.166667C7.09167 0.166667 7.20833 0.225 7.325 0.341667C7.55833 0.575 7.55833 0.925 7.325 1.15833L4.40833 4.075C4.175 4.30833 3.825 4.30833 3.59167 4.075L0.675 1.15833C0.441667 0.925 0.441667 0.575 0.675 0.341667C0.908333 0.108333 1.25833 0.108333 1.49167 0.341667L4 2.85L6.50833 0.341667C6.625 0.225 6.74167 0.166667 6.91667 0.166667Z' fill='%234B5675'/%3E%3C/svg%3E");
}

/* ===== GRID SYSTEM EXTENSIONS ===== */
/* Missing Tailwind CSS grid classes for the BlazorMetronic grid components */

/* Base col-span classes (3-12) - missing from main styles.css */
.col-span-3 {
    grid-column: span 3 / span 3;
}
.col-span-4 {
    grid-column: span 4 / span 4;
}
.col-span-5 {
    grid-column: span 5 / span 5;
}
.col-span-6 {
    grid-column: span 6 / span 6;
}
.col-span-7 {
    grid-column: span 7 / span 7;
}
.col-span-8 {
    grid-column: span 8 / span 8;
}
.col-span-9 {
    grid-column: span 9 / span 9;
}
.col-span-10 {
    grid-column: span 10 / span 10;
}
.col-span-11 {
    grid-column: span 11 / span 11;
}
.col-span-12 {
    grid-column: span 12 / span 12;
}

/* Base grid-cols classes (5-12) - missing from main styles.css */
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Responsive sm: variants (640px+) */
@media (width >= 40rem) {
    .sm\:col-span-1 { grid-column: span 1 / span 1; }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:col-span-3 { grid-column: span 3 / span 3; }
    .sm\:col-span-4 { grid-column: span 4 / span 4; }
    .sm\:col-span-5 { grid-column: span 5 / span 5; }
    .sm\:col-span-6 { grid-column: span 6 / span 6; }
    .sm\:col-span-7 { grid-column: span 7 / span 7; }
    .sm\:col-span-8 { grid-column: span 8 / span 8; }
    .sm\:col-span-9 { grid-column: span 9 / span 9; }
    .sm\:col-span-10 { grid-column: span 10 / span 10; }
    .sm\:col-span-11 { grid-column: span 11 / span 11; }
    .sm\:col-span-12 { grid-column: span 12 / span 12; }

    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sm\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .sm\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .sm\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .sm\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Responsive md: variants (768px+) */
@media (width >= 48rem) {
    .md\:col-span-1 { grid-column: span 1 / span 1; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:col-span-4 { grid-column: span 4 / span 4; }
    .md\:col-span-5 { grid-column: span 5 / span 5; }
    .md\:col-span-6 { grid-column: span 6 / span 6; }
    .md\:col-span-7 { grid-column: span 7 / span 7; }
    .md\:col-span-8 { grid-column: span 8 / span 8; }
    .md\:col-span-9 { grid-column: span 9 / span 9; }
    .md\:col-span-10 { grid-column: span 10 / span 10; }
    .md\:col-span-11 { grid-column: span 11 / span 11; }
    .md\:col-span-12 { grid-column: span 12 / span 12; }

    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .md\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Responsive lg: variants (1024px+) */
@media (width >= 64rem) {
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:col-span-5 { grid-column: span 5 / span 5; }
    .lg\:col-span-6 { grid-column: span 6 / span 6; }
    .lg\:col-span-7 { grid-column: span 7 / span 7; }
    .lg\:col-span-8 { grid-column: span 8 / span 8; }
    .lg\:col-span-9 { grid-column: span 9 / span 9; }
    .lg\:col-span-10 { grid-column: span 10 / span 10; }
    .lg\:col-span-11 { grid-column: span 11 / span 11; }
    .lg\:col-span-12 { grid-column: span 12 / span 12; }

    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Responsive xl: variants (1280px+) */
@media (width >= 80rem) {
    .xl\:col-span-1 { grid-column: span 1 / span 1; }
    .xl\:col-span-2 { grid-column: span 2 / span 2; }
    .xl\:col-span-3 { grid-column: span 3 / span 3; }
    .xl\:col-span-4 { grid-column: span 4 / span 4; }
    .xl\:col-span-5 { grid-column: span 5 / span 5; }
    .xl\:col-span-6 { grid-column: span 6 / span 6; }
    .xl\:col-span-7 { grid-column: span 7 / span 7; }
    .xl\:col-span-8 { grid-column: span 8 / span 8; }
    .xl\:col-span-9 { grid-column: span 9 / span 9; }
    .xl\:col-span-10 { grid-column: span 10 / span 10; }
    .xl\:col-span-11 { grid-column: span 11 / span 11; }
    .xl\:col-span-12 { grid-column: span 12 / span 12; }

    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* ===== DARK MODE FIX FOR SELECT COMPONENT ===== */
/* Fix for single select components having harsh borders in dark themes */
/* This ensures proper contrast and visibility with subtle borders in all dark themes */
/* Applies to both .dark and .isec-dark themes */
.dark .kt-select,
.isec-dark .kt-select {
    background-color: var(--card);
    border-color: var(--border);
}

.dark .kt-select-sm,
.isec-dark .kt-select-sm {
    background-color: var(--card);
    border-color: var(--border);
}

.dark .kt-select-lg,
.isec-dark .kt-select-lg {
    background-color: var(--card);
    border-color: var(--border);
}

/* ===== DATAGRID PAGE SIZE SELECTOR DROPDOWN FIX ===== */
/* Ensures the page size dropdown matches the width of the select trigger */
.kt-card-footer .kt-select-dropdown {
    min-width: 60px !important;
    width: auto !important;
}

/* ===== DATAGRID ROW STYLING SUPPORT ===== */
/*
    These styles ensure that row-level styling (via DataGridRowStyle) takes precedence
    over cell-level template styles. This is essential for proper row selection highlighting
    and custom row styling.

    Usage: Add "kt-datagrid" class to your DataGrid component:
    <DataGrid Class="kt-datagrid" RowSelectedStyle="@DataGridRowStylePresets.SelectedPrimary" ... />
*/

/* Ensures row-level styles take precedence over cell template styles */
.kt-datagrid tbody tr td[style*="font-weight"] * {
    font-weight: inherit !important;
}

.kt-datagrid tbody tr td[style*="color"] * {
    color: inherit !important;
}

.kt-datagrid tbody tr td[style*="font-style"] * {
    font-style: inherit !important;
}

.kt-datagrid tbody tr td[style*="text-decoration"] * {
    text-decoration: inherit !important;
}

.kt-datagrid tbody tr td[style*="background-color"] * {
    background-color: inherit !important;
}

/* Override common utility classes when row styling is applied */
.kt-datagrid tbody tr td[style*="color"] .text-muted-foreground {
    color: inherit !important;
}

.kt-datagrid tbody tr td[style*="font-weight"] .font-medium {
    font-weight: inherit !important;
}

.kt-datagrid tbody tr td[style*="font-weight"] .font-bold {
    font-weight: inherit !important;
}

/* Override badge colors when row styling is applied */
.kt-datagrid tbody tr td[style*="color"] .kt-badge {
    color: inherit !important;
}

/* Interactive hover effect for better UX */
.kt-datagrid tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Dark mode hover effect */
.dark .kt-datagrid tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Ensure checkboxes maintain proper contrast in styled rows */
.kt-datagrid tbody tr td .kt-checkbox:checked,
.kt-datagrid tbody tr td .kt-checkbox[aria-checked='true'] {
    /* Force the checkbox to maintain its primary color background */
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Ensure the checkmark is visible with white color */
.kt-datagrid tbody tr td .kt-checkbox:checked::after,
.kt-datagrid tbody tr td .kt-checkbox[aria-checked='true']::after {
    filter: none !important;
}

/* Override any cell background that might affect checkbox visibility */
.kt-datagrid tbody tr td[style*="background-color"] .kt-checkbox {
    /* Ensure checkbox background is not inherited */
    background-color: var(--background) !important;
}

.kt-datagrid tbody tr td[style*="background-color"] .kt-checkbox:checked,
.kt-datagrid tbody tr td[style*="background-color"] .kt-checkbox[aria-checked='true'] {
    /* When checked, use primary color */
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* ============================================================================
   TOGGLE SWITCH CONTRAST IN SELECTED ROWS
   ============================================================================ */

/* Ensure toggle switches maintain proper contrast in styled rows */
.kt-datagrid tbody tr td .kt-switch {
    /* Ensure switch background is not inherited from cell */
    background-color: var(--input) !important;
}

.kt-datagrid tbody tr td .kt-switch:checked,
.kt-datagrid tbody tr td .kt-switch[aria-checked='true'] {
    /* When checked, use primary color for background */
    background-color: var(--primary) !important;
}

/* Make the toggle circle (knob) darker for better contrast on light backgrounds */
.kt-datagrid tbody tr td .kt-switch:before {
    /* Use a darker color for the circle instead of white */
    background-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* When checked, make the circle white for contrast against primary color */
.kt-datagrid tbody tr td .kt-switch:checked:before,
.kt-datagrid tbody tr td .kt-switch[aria-checked='true']:before {
    background-color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Override for cells with background colors (selected rows) */
.kt-datagrid tbody tr td[style*="background-color"] .kt-switch:before {
    /* Use a semi-transparent dark color for better visibility */
    background-color: rgba(0, 0, 0, 0.25) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.kt-datagrid tbody tr td[style*="background-color"] .kt-switch:checked:before,
.kt-datagrid tbody tr td[style*="background-color"] .kt-switch[aria-checked='true']:before {
    /* When checked in selected row, use white for contrast */
    background-color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}