html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Layout adjustments for sticky sidebar */
body.g-sidenav-show {
    display: flex;
    min-height: 100vh;
}

body.g-sidenav-show .sidenav {
    flex-shrink: 0;
}

body.g-sidenav-show .main-content {
    flex: 1;
    min-width: 0; /* Prevents flex item from overflowing */
    margin-left: 0 !important; /* Override Material Dashboard's margin */
}

.form-control, .form-label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.form-control {
    border: 1px solid #d2d6da !important;
    padding-left: .5rem !important;
}

/* Skip to main content link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 9999;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Ensure main content can receive focus */
#main-content:focus {
    outline: none;
}

/* ========================================
   Professional Topbar Enhancements
   ======================================== */

/* Glassmorphism effect for topbar */
#navbarBlur {
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 12px 0 rgba(31, 38, 135, 0.08) !important;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1000;
}

/* Topbar dropdown menu enhancements */
.navbar .dropdown-menu {
    animation: fadeInDown 0.2s ease-in-out;
    border: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 9999 !important;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown item hover effect */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(102, 126, 234, 0.1) !important;
    color: #344767 !important;
    transform: translateX(3px);
    transition: all 0.15s ease;
}

/* User avatar gradient animation */
.nav-item .nav-link [style*="linear-gradient"] {
    position: relative;
    overflow: hidden;
}

.nav-item .nav-link [style*="linear-gradient"]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Breadcrumb styling */
.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(0, 0, 0, 0.4);
}

.breadcrumb-item a:hover {
    color: #667eea !important;
    transition: color 0.2s ease;
}

/* Icon button hover effects */
.nav-link[style*="border-radius: 0.5rem"]:hover {
    background-color: rgba(102, 126, 234, 0.1) !important;
}

/* Notification badge pulse animation */
#unread-count:not([style*="display: none"]) {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* ========================================
   Professional Sidebar Enhancements
   ======================================== */

/* Logo styling in sidebar */
.sidenav-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
}

.sidenav-header img {
    transition: transform 0.3s ease;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.sidenav-header a:hover img {
    transform: scale(1.05);
}

/* Sidebar positioning and scroll behavior */
.sidenav {
    position: relative !important; /* Override Material Dashboard's fixed positioning */
    height: auto !important; /* Allow sidebar to grow with content */
    max-height: none !important; /* Remove max-height restrictions */
    overflow: visible !important; /* Disable ALL scrollbars - scroll with page */
    display: flex;
    flex-direction: column;
    width: 250px; /* Fixed width for sidebar */
    min-width: 250px; /* Prevent shrinking */
    top: 0 !important; /* Override any top positioning */
    transform: none !important; /* Override any transforms */
    padding-bottom: 0 !important; /* Remove bottom padding that causes white space */
}

.sidenav .navbar-collapse {
    overflow: visible !important; /* Disable ALL scrollbars */
    flex: 1;
    max-height: none !important; /* Remove max-height restrictions */
    padding-bottom: 0 !important; /* Remove bottom padding that causes white space */
}

/* Ensure navbar-nav also scrolls with the page */
.sidenav .navbar-nav {
    overflow: visible !important; /* Disable ALL scrollbars */
    max-height: none !important;
    padding-bottom: 0 !important; /* Remove bottom padding that causes white space */
    margin-bottom: 0 !important; /* Remove bottom margin that causes white space */
}

/* Disable Perfect Scrollbar on sidebar */
.sidenav.ps,
.sidenav .ps,
.sidenav .navbar-collapse.ps,
.sidenav .navbar-nav.ps {
    overflow: visible !important; /* Disable ALL scrollbars */
    max-height: none !important;
    position: relative !important;
}

/* Hide Perfect Scrollbar elements in sidebar */
.sidenav .ps__rail-y,
.sidenav .ps__thumb-y {
    display: none !important;
}

/* Sidebar nav link hover effect */
.sidenav .nav-link:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
    transition: all 0.2s ease;
}

/* Active link gradient with shadow */
.sidenav .nav-link.active,
.sidenav .nav-link.active.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14),
                0 7px 10px -5px rgba(102, 126, 234, 0.4);
    position: relative;
}

.sidenav .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 0 4px 4px 0;
}

/* Section headers in sidebar */
.sidenav h6 {
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.sidenav h6::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
}

/* Icon styling in sidebar */
.sidenav .nav-link .material-icons {
    transition: transform 0.2s ease;
}

.sidenav .nav-link:hover .material-icons {
    transform: scale(1.1);
}

/* Disabled link styling */
.sidenav .nav-link.opacity-6 {
    cursor: not-allowed;
    position: relative;
}

.sidenav .nav-link.opacity-6::after {
    content: '🔒';
    position: absolute;
    right: 1rem;
    font-size: 0.75rem;
}

/* ========================================
   Responsive Enhancements
   ======================================== */

@media (max-width: 1199px) {
    /* Hide breadcrumb on smaller screens */
    .breadcrumb {
        display: none !important;
    }

    /* Adjust topbar padding */
    #navbarBlur .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 1199px) {
    /* Mobile sidebar - hidden by default, slides in from left */
    body.g-sidenav-show .sidenav {
        position: fixed !important;
        left: -250px;
        top: 0;
        height: 100vh !important;
        z-index: 1050;
        transition: left 0.3s ease-in-out;
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        /* Hide scrollbar while maintaining scroll functionality */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    body.g-sidenav-show .sidenav::-webkit-scrollbar {
        display: none;
    }

    body.g-sidenav-show .sidenav.show {
        left: 0;
    }

    body.g-sidenav-show .main-content {
        margin-left: 0 !important;
        width: 100%;
    }

    /* Backdrop overlay for mobile sidebar */
    .sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }

    .sidebar-backdrop.show {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 767px) {
    /* Stack topbar items vertically on mobile */
    .navbar-nav {
        gap: 0.5rem !important;
    }

    /* Smaller user avatar on mobile */
    .nav-item .nav-link [style*="width: 36px"] {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem !important;
    }
}

/* ===================================
   Session Timeout Warning Modal
   =================================== */

.session-timeout-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.session-timeout-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.session-timeout-content {
    position: relative;
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 420px;
    width: 90%;
    text-align: center;
    animation: sessionModalFadeIn 0.3s ease-out;
}

@keyframes sessionModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.session-timeout-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ff9800 0%, #f44336 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: sessionIconPulse 2s ease-in-out infinite;
}

.session-timeout-icon i {
    font-size: 40px;
    color: white;
}

@keyframes sessionIconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.session-timeout-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #344767;
    margin-bottom: 0.75rem;
}

.session-timeout-message {
    color: #7b809a;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.session-timeout-countdown {
    font-size: 3rem;
    font-weight: 700;
    color: #ff9800;
    margin-bottom: 1.5rem;
    font-family: 'Roboto Mono', monospace;
    letter-spacing: 0.1em;
}

.session-timeout-countdown.urgent {
    color: #f44336;
    animation: countdownUrgent 0.5s ease-in-out infinite alternate;
}

.session-timeout-countdown.expired {
    color: #f44336;
    font-size: 1.5rem;
}

@keyframes countdownUrgent {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

.session-timeout-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-session-extend,
.btn-session-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-session-extend {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
    border: none;
    color: white;
}

.btn-session-extend:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.btn-session-extend:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-session-logout {
    border: 2px solid #7b809a;
    background: transparent;
    color: #7b809a;
}

.btn-session-logout:hover {
    background: #7b809a;
    color: white;
}

/* Session expired state - hide content and show only modal */
body.session-expired .session-timeout-overlay {
    background: rgba(0, 0, 0, 0.9);
}

body.session-expired .sidebar,
body.session-expired .main-panel,
body.session-expired .navbar,
body.session-expired .g-sidenav-show > *:not(.session-timeout-modal) {
    visibility: hidden;
}

/* Toast notifications */
.session-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    color: white;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.session-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.session-toast-success {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
}

.session-toast-error {
    background: linear-gradient(135deg, #f44336 0%, #c62828 100%);
}

/* Pagination - Fix text overflow in circular buttons */
.pagination .page-link,
.pagination .page-item span,
.dataTable-pagination-list li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem !important;
    min-width: 36px;
}

/* Ensure pagination buttons don't shrink too small */
.pagination .page-item .page-link {
    padding: 0;
    line-height: 36px;
}

/* DataTable pagination fix */
.dataTable-pagination-list li a {
    line-height: 36px !important;
}

/* ========================================
   CENTRALIZED UI COMPONENTS
   ======================================== */

/* ----------------------------------------
   1. Brand Colors & Gradients
   ---------------------------------------- */

:root {
    --brand-primary: #667eea;
    --brand-secondary: #764ba2;
    --brand-success: #4caf50;
    --brand-danger: #f44336;
    --brand-warning: #ff9800;
    --brand-info: #2196f3;
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
    --gradient-danger: linear-gradient(135deg, #f44336 0%, #c62828 100%);
    --gradient-warning: linear-gradient(135deg, #ff9800 0%, #ef6c00 100%);
    --gradient-info: linear-gradient(135deg, #2196f3 0%, #1565c0 100%);
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-strong: 0 15px 40px rgba(0, 0, 0, 0.15);
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;
}

/* ----------------------------------------
   2. Button Variants (Centralized)
   ---------------------------------------- */

.btn-gradient-primary {
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    transition: all var(--transition-normal);
}

.btn-gradient-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    color: #fff;
}

.btn-gradient-primary:active {
    transform: translateY(0);
}

.btn-gradient-success {
    background: var(--gradient-success);
    border: none;
    color: #fff;
    transition: all var(--transition-normal);
}

.btn-gradient-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
    color: #fff;
}

.btn-outline-gradient {
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
    background: transparent;
    transition: all var(--transition-normal);
}

.btn-outline-gradient:hover {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Link gradient styling */
.link-gradient {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.link-gradient:hover {
    color: var(--brand-secondary);
}

/* ----------------------------------------
   3. Card Styles (Consistent)
   ---------------------------------------- */

.card-elevated {
    border: none;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-soft);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.card-elevated:hover {
    box-shadow: var(--shadow-medium);
}

.card-interactive {
    cursor: pointer;
}

.card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
}

.card-header-gradient {
    background: var(--gradient-primary);
    color: #fff;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
}

.card-header-gradient h5,
.card-header-gradient h6,
.card-header-gradient .card-title {
    color: #fff;
}

/* Page Header Card */
.page-header-card {
    border: none;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-soft);
    margin-bottom: 1.5rem;
}

.page-header-card .card-body {
    padding: 1.5rem;
}

.page-header-card .page-title {
    font-weight: 700;
    color: #344767;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-header-card .page-subtitle {
    color: #7b809a;
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* ----------------------------------------
   4. Toast Notification System
   ---------------------------------------- */

.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10050;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    max-width: 400px;
}

.app-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius-md);
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateX(100%);
    transition: all var(--transition-normal);
    min-width: 300px;
    border-left: 4px solid;
}

.app-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.app-toast.toast-success {
    border-left-color: var(--brand-success);
}

.app-toast.toast-success .toast-icon {
    color: var(--brand-success);
}

.app-toast.toast-danger {
    border-left-color: var(--brand-danger);
}

.app-toast.toast-danger .toast-icon {
    color: var(--brand-danger);
}

.app-toast.toast-warning {
    border-left-color: var(--brand-warning);
}

.app-toast.toast-warning .toast-icon {
    color: var(--brand-warning);
}

.app-toast.toast-info {
    border-left-color: var(--brand-info);
}

.app-toast.toast-info .toast-icon {
    color: var(--brand-info);
}

.toast-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    color: #344767;
    margin-bottom: 0.25rem;
    font-size: 0.9375rem;
}

.toast-message {
    color: #7b809a;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.toast-close {
    background: none;
    border: none;
    padding: 0;
    color: #7b809a;
    cursor: pointer;
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

.toast-close:hover {
    color: #344767;
}

/* Toast progress bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.3;
    transition: width linear;
}

/* ----------------------------------------
   5. Confirmation Modal
   ---------------------------------------- */

.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10040;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.confirm-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.confirm-modal {
    background: #fff;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    max-width: 420px;
    width: 90%;
    padding: 2rem;
    text-align: center;
    transform: scale(0.9) translateY(-20px);
    transition: transform var(--transition-normal);
}

.confirm-modal-overlay.show .confirm-modal {
    transform: scale(1) translateY(0);
}

.confirm-modal-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.confirm-modal-icon.icon-warning {
    background: linear-gradient(135deg, #ff9800 0%, #ef6c00 100%);
}

.confirm-modal-icon.icon-danger {
    background: linear-gradient(135deg, #f44336 0%, #c62828 100%);
}

.confirm-modal-icon.icon-info {
    background: var(--gradient-primary);
}

.confirm-modal-icon i {
    font-size: 2rem;
    color: #fff;
}

.confirm-modal-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #344767;
    margin-bottom: 0.75rem;
}

.confirm-modal-message {
    color: #7b809a;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.confirm-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.confirm-modal-actions .btn {
    min-width: 120px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: var(--border-radius-md);
}

/* ----------------------------------------
   6. Empty States
   ---------------------------------------- */

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state-icon {
    font-size: 5rem;
    color: #e0e0e0;
    margin-bottom: 1.5rem;
    display: block;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #344767;
    margin-bottom: 0.5rem;
}

.empty-state-message {
    color: #7b809a;
    max-width: 400px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

.empty-state-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Animated empty state icon */
.empty-state-icon-animated {
    animation: emptyStateFloat 3s ease-in-out infinite;
}

@keyframes emptyStateFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ----------------------------------------
   7. Loading Skeletons
   ---------------------------------------- */

.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--border-radius-sm);
}

@keyframes skeletonShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-text-sm {
    height: 0.75em;
    width: 60%;
}

.skeleton-text-lg {
    height: 1.5em;
    width: 80%;
}

.skeleton-circle {
    border-radius: 50%;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-avatar-lg {
    width: 64px;
    height: 64px;
}

.skeleton-card {
    padding: 1.5rem;
    background: #fff;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-soft);
}

.skeleton-table-row {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.skeleton-table-cell {
    height: 1.25em;
    flex: 1;
}

/* ----------------------------------------
   8. Accessibility Enhancements
   ---------------------------------------- */

/* High contrast focus states */
*:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* Remove outline for mouse users */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced button focus */
.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

/* Form control focus improvements */
.form-control:focus-visible,
.form-select:focus-visible {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* Link focus visibility */
a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Card keyboard navigation */
.card-interactive:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 4px;
}

/* Improved color contrast for text */
.text-muted-accessible {
    color: #5a5a5a !important; /* Meets WCAG AA */
}

/* Screen reader only content */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ----------------------------------------
   9. Breadcrumb Navigation
   ---------------------------------------- */

.breadcrumb-nav {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.breadcrumb-nav .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.breadcrumb-nav .breadcrumb-item {
    color: #7b809a;
}

.breadcrumb-nav .breadcrumb-item a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb-nav .breadcrumb-item a:hover {
    color: var(--brand-secondary);
    text-decoration: underline;
}

.breadcrumb-nav .breadcrumb-item.active {
    color: #344767;
    font-weight: 500;
}

.breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #bdbdbd;
    font-weight: 600;
}

/* ----------------------------------------
   10. Form Enhancements
   ---------------------------------------- */

/* Input group with icon */
.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper .form-control {
    padding-left: 2.5rem;
}

.input-icon-wrapper .input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #7b809a;
    font-size: 1.25rem;
    pointer-events: none;
}

/* Floating labels enhancement */
.form-floating-custom {
    position: relative;
}

.form-floating-custom .form-control {
    height: 3.5rem;
    padding: 1rem 0.75rem;
}

.form-floating-custom label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem 0.75rem;
    pointer-events: none;
    color: #7b809a;
    transition: all var(--transition-fast);
    transform-origin: left top;
}

.form-floating-custom .form-control:focus ~ label,
.form-floating-custom .form-control:not(:placeholder-shown) ~ label {
    transform: scale(0.85) translateY(-0.5rem);
    color: var(--brand-primary);
}

/* Validation states */
.form-control.is-valid {
    border-color: var(--brand-success);
}

.form-control.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}

.form-control.is-invalid {
    border-color: var(--brand-danger);
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.15);
}

/* ----------------------------------------
   11. Status Badges & Indicators
   ---------------------------------------- */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-badge-success {
    background: rgba(76, 175, 80, 0.1);
    color: #2e7d32;
}

.status-badge-warning {
    background: rgba(255, 152, 0, 0.1);
    color: #ef6c00;
}

.status-badge-danger {
    background: rgba(244, 67, 54, 0.1);
    color: #c62828;
}

.status-badge-info {
    background: rgba(102, 126, 234, 0.1);
    color: var(--brand-primary);
}

.status-badge-neutral {
    background: rgba(0, 0, 0, 0.06);
    color: #5a5a5a;
}

/* Status dot indicator */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot-success {
    background: var(--brand-success);
}

.status-dot-warning {
    background: var(--brand-warning);
}

.status-dot-danger {
    background: var(--brand-danger);
}

.status-dot-neutral {
    background: #bdbdbd;
}

/* Pulsing status dot */
.status-dot-pulse {
    position: relative;
}

.status-dot-pulse::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: statusPulse 2s ease-out infinite;
}

@keyframes statusPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ----------------------------------------
   12. Table Enhancements
   ---------------------------------------- */

.table-modern {
    border-collapse: separate;
    border-spacing: 0;
}

.table-modern thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5a5a5a;
    padding: 1rem;
}

.table-modern tbody tr {
    transition: background-color var(--transition-fast);
}

.table-modern tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.03);
}

.table-modern tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

/* Row actions */
.table-row-actions {
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

tr:hover .table-row-actions {
    opacity: 1;
}

/* ----------------------------------------
   13. Avatar Improvements
   ---------------------------------------- */

.avatar-group {
    display: flex;
}

.avatar-group .avatar {
    margin-left: -0.75rem;
    border: 2px solid #fff;
    transition: transform var(--transition-fast);
}

.avatar-group .avatar:first-child {
    margin-left: 0;
}

.avatar-group .avatar:hover {
    transform: translateY(-2px);
    z-index: 1;
}

.avatar-status {
    position: relative;
}

.avatar-status::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #bdbdbd;
}

.avatar-status.online::after {
    background: var(--brand-success);
}

.avatar-status.away::after {
    background: var(--brand-warning);
}

.avatar-status.busy::after {
    background: var(--brand-danger);
}

/* ----------------------------------------
   14. Dark Mode Support
   ---------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root {
        --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
        --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.4);
        --shadow-strong: 0 15px 40px rgba(0, 0, 0, 0.5);
    }
}

/* Manual dark mode toggle class */
.dark-mode {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-card: #1f2940;
    --text-primary: #e4e6eb;
    --text-secondary: #b0b3b8;
}

.dark-mode .card {
    background: var(--bg-card);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .card-header {
    border-color: rgba(255, 255, 255, 0.1);
}

/* ----------------------------------------
   15. Utility Classes
   ---------------------------------------- */

/* Hover effects */
.hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.hover-scale {
    transition: transform var(--transition-normal);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* Gradient text */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dividers */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #7b809a;
    font-size: 0.875rem;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}

.divider::before {
    margin-right: 1rem;
}

.divider::after {
    margin-left: 1rem;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ========================================
   16. Guided Tour System
   ======================================== */

/* Tour overlay - darkens the background */
.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.tour-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Highlighted element - punches through the overlay */
.tour-highlight {
    position: relative;
    z-index: 10001 !important;
    box-shadow: 0 0 0 4px var(--brand-primary), 0 0 0 8px rgba(102, 126, 234, 0.3) !important;
    border-radius: var(--border-radius-md);
    animation: tourPulse 2s ease-in-out infinite;
}

@keyframes tourPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px var(--brand-primary), 0 0 0 8px rgba(102, 126, 234, 0.3);
    }
    50% {
        box-shadow: 0 0 0 4px var(--brand-primary), 0 0 0 12px rgba(102, 126, 234, 0.1);
    }
}

/* Tour tooltip */
.tour-tooltip {
    position: fixed;
    z-index: 10002;
    background: #fff;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-width: 380px;
    width: 90%;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9) translateY(10px);
    transition: all var(--transition-normal);
}

.tour-tooltip.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

/* Tooltip arrow */
.tour-tooltip::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    transform: rotate(45deg);
}

.tour-tooltip.position-bottom::before {
    top: -8px;
    left: 50%;
    margin-left: -8px;
}

.tour-tooltip.position-top::before {
    bottom: -8px;
    left: 50%;
    margin-left: -8px;
}

.tour-tooltip.position-left::before {
    right: -8px;
    top: 50%;
    margin-top: -8px;
}

.tour-tooltip.position-right::before {
    left: -8px;
    top: 50%;
    margin-top: -8px;
}

/* Tooltip header */
.tour-tooltip-header {
    padding: 1.25rem 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tour-tooltip-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tour-tooltip-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.tour-tooltip-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #344767;
    margin: 0;
}

.tour-tooltip-step {
    font-size: 0.75rem;
    color: #7b809a;
    margin-top: 0.25rem;
}

/* Tooltip body */
.tour-tooltip-body {
    padding: 1rem 1.5rem;
    color: #5a5a5a;
    line-height: 1.6;
    font-size: 0.9375rem;
}

/* Tooltip footer */
.tour-tooltip-footer {
    padding: 0 1.5rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.tour-tooltip-progress {
    display: flex;
    gap: 0.375rem;
}

.tour-tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e0e0e0;
    transition: all var(--transition-fast);
}

.tour-tooltip-dot.active {
    background: var(--brand-primary);
    width: 20px;
    border-radius: 4px;
}

.tour-tooltip-dot.completed {
    background: var(--brand-success);
}

.tour-tooltip-actions {
    display: flex;
    gap: 0.5rem;
}

.tour-tooltip-actions .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: var(--border-radius-md);
}

.btn-tour-skip {
    color: #7b809a;
    background: transparent;
    border: none;
}

.btn-tour-skip:hover {
    color: #344767;
    background: rgba(0, 0, 0, 0.05);
}

.btn-tour-prev {
    color: var(--brand-primary);
    background: transparent;
    border: 1px solid var(--brand-primary);
}

.btn-tour-prev:hover {
    background: rgba(102, 126, 234, 0.1);
}

.btn-tour-next {
    background: var(--gradient-primary);
    color: #fff;
    border: none;
}

.btn-tour-next:hover {
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

/* Welcome modal for tour start */
.tour-welcome-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.tour-welcome-modal.active {
    opacity: 1;
    visibility: visible;
}

.tour-welcome-content {
    background: #fff;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    max-width: 480px;
    width: 90%;
    padding: 2.5rem;
    text-align: center;
    transform: scale(0.9) translateY(-20px);
    transition: transform var(--transition-normal);
}

.tour-welcome-modal.active .tour-welcome-content {
    transform: scale(1) translateY(0);
}

.tour-welcome-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: welcomeWave 2s ease-in-out infinite;
}

@keyframes welcomeWave {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(15deg);
    }
    75% {
        transform: rotate(-15deg);
    }
}

.tour-welcome-icon i {
    font-size: 2.5rem;
    color: #fff;
}

.tour-welcome-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #344767;
    margin-bottom: 0.75rem;
}

.tour-welcome-subtitle {
    color: #7b809a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.tour-welcome-features {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.tour-welcome-feature {
    text-align: center;
}

.tour-welcome-feature i {
    font-size: 2rem;
    color: var(--brand-primary);
    margin-bottom: 0.5rem;
    display: block;
}

.tour-welcome-feature span {
    font-size: 0.875rem;
    color: #5a5a5a;
}

.tour-welcome-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.tour-welcome-actions .btn {
    padding: 0.875rem 2rem;
    font-weight: 600;
    border-radius: var(--border-radius-md);
    min-width: 140px;
}

/* Completion celebration */
.tour-complete-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.tour-complete-modal.active {
    opacity: 1;
    visibility: visible;
}

.tour-complete-content {
    background: #fff;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    max-width: 420px;
    width: 90%;
    padding: 2.5rem;
    text-align: center;
    transform: scale(0.9);
    transition: transform var(--transition-normal);
}

.tour-complete-modal.active .tour-complete-content {
    transform: scale(1);
}

.tour-complete-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--gradient-success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: celebrateBounce 0.6s ease-out;
}

@keyframes celebrateBounce {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.tour-complete-icon i {
    font-size: 2.5rem;
    color: #fff;
}

.tour-complete-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #344767;
    margin-bottom: 0.75rem;
}

.tour-complete-message {
    color: #7b809a;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Confetti animation for completion */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    z-index: 10004;
    pointer-events: none;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .tour-tooltip {
        max-width: calc(100% - 2rem);
        left: 1rem !important;
        right: 1rem !important;
    }

    .tour-welcome-features {
        gap: 1rem;
    }

    .tour-welcome-content,
    .tour-complete-content {
        padding: 1.5rem;
    }
}

/* ========================================
   Sticky Footer Styles
   ======================================== */

/* Make the main-content a flex container to push footer to bottom */
body.g-sidenav-show .main-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 0px); /* Full viewport height */
}

/* Make the container-fluid (content area) grow to fill available space */
body.g-sidenav-show .main-content > .container-fluid {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Footer should not grow, stays at bottom */
body.g-sidenav-show .main-content .footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background-color: transparent;
}

/* Ensure content before footer can grow */
body.g-sidenav-show .main-content > .container-fluid > *:not(.footer) {
    flex-shrink: 0;
}

/* Remove old margin-bottom from body since we're using flexbox now */
body.g-sidenav-show {
    margin-bottom: 0;
}

/* ========================================
   Safari & Cross-Browser Compatibility Fixes
   ======================================== */

/* Safari flexbox fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix Safari flexbox issues with min-height */
    body.g-sidenav-show {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }

    body.g-sidenav-show .main-content {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }

    /* Safari backdrop-filter fix */
    #navbarBlur {
        -webkit-backdrop-filter: blur(10px) saturate(180%);
        backdrop-filter: blur(10px) saturate(180%);
    }

    /* Safari form control fixes */
    input, select, textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0.375rem;
    }

    /* Preserve checkbox/radio appearance */
    input[type="checkbox"],
    input[type="radio"] {
        -webkit-appearance: checkbox;
        -moz-appearance: checkbox;
        appearance: checkbox;
    }

    input[type="radio"] {
        -webkit-appearance: radio;
        -moz-appearance: radio;
        appearance: radio;
    }

    /* Safari button styling fix */
    button, .btn {
        -webkit-appearance: none;
    }

    /* Safari sticky positioning fix */
    .sidenav {
        position: -webkit-sticky;
        position: sticky;
    }

    /* Safari animation performance */
    .tour-highlight,
    .hover-lift:hover,
    .hover-scale:hover {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Safari date input fix */
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"] {
        -webkit-appearance: textfield;
        appearance: textfield;
    }
}

/* Safari-specific modal and dropdown fixes */
@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        .modal-content {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        .dropdown-menu {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }
}

/* Edge and IE specific fixes */
@supports (-ms-ime-align: auto) {
    /* Edge Legacy fixes */
    body.g-sidenav-show .main-content {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .form-check-input {
        opacity: 1 !important;
        position: relative !important;
    }
}

/* Microsoft Edge Chromium specific fixes */
@supports (-ms-accelerator: true) {
    .form-control::-ms-clear,
    .form-control::-ms-reveal {
        display: none;
        width: 0;
        height: 0;
    }
}

/* Ensure checkboxes are visible on all browsers */
.form-check-input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    opacity: 1 !important;
    position: relative !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Fix form-switch toggle display - override the checkbox sizing above */
.form-switch .form-check-input {
    width: 1.875rem !important;
    height: 0.9375rem !important;
    border-radius: 1.875rem !important;
    background-color: #a3a3a3;
    border: none;
    cursor: pointer;
}

.form-switch .form-check-input:checked {
    background-color: #42424a;
}

.form-switch .form-check-input:after {
    content: "";
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    top: 50%;
    transform: translateY(-50%);
    left: -5px;
    transition: transform 0.25s ease-in-out;
}

.form-switch .form-check-input:checked:after {
    transform: translateY(-50%) translateX(21px);
}

/* Fix for forms not displaying correctly */
.form-control,
.form-select {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure cards display properly */
.card {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Fix gradient text for Safari */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}