/* =====================================================
   Dark Theme - Companion to Design System
   Minimal overrides only - main styles in style.css
   ===================================================== */

/* This file intentionally left minimal.
   All dark theme styling is handled by CSS variables in style.css.
   This file only contains supplementary dark-specific adjustments. */

/* Users Loader Animation */
.users-loader {
    width: 28px;
    height: 14px;
    color: #FFF;
    background: currentColor;
    border-radius: 50% 50% 0 0;
    position: relative;
    display: block;
    margin: 28px auto 10px;
    box-sizing: border-box;
    animation: animloader-users 4s linear infinite;
}
.users-loader::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: currentColor;
    top: -20px;
    box-sizing: border-box;
    animation: animloader1-users 4s linear infinite;
}

@keyframes animloader-users {
    0% { box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px; }
    20% { box-shadow: 20px -1px 0 -2px, 0 0 0 -2px, 20px -1px 0 -5px, 0 0 0 -5px; }
    40% { box-shadow: 20px -1px 0 -2px, -20px -1px 0 -2px, 20px -1px 0 -5px, -20px -1px 0 -5px; }
    60% { box-shadow: 20px -1px 0 -2px, -20px -1px 0 -2px, 12px -16px 0 -5px, -20px -1px 0 -5px; }
    80%, 95% { box-shadow: 20px -1px 0 -2px, -20px -1px 0 -2px, 12px -16px 0 -5px, -12px -16px 0 -5px; }
    100% { box-shadow: 20px -1px 0 -2px rgba(255,255,255,0), -20px -1px 0 -2px rgba(255,255,255,0), 12px -16px 0 -5px rgba(255,255,255,0), -12px -16px 0 -5px rgba(255,255,255,0); }
}

@keyframes animloader1-users {
    0% { box-shadow: 0 0 0 -2px, 0 0 0 -2px, 0 0 0 -5px, 0 0 0 -5px; }
    20% { box-shadow: 20px 2px 0 -2px, 0 0 0 -2px, 20px 2px 0 -5px, 0 0 0 -5px; }
    40% { box-shadow: 20px 2px 0 -2px, -20px 2px 0 -2px, 20px 2px 0 -5px, -20px 2px 0 -5px; }
    60% { box-shadow: 20px 2px 0 -2px, -20px 2px 0 -2px, 12px -12px 0 -5px, -20px 2px 0 -5px; }
    80%, 95% { box-shadow: 20px 2px 0 -2px, -20px 2px 0 -2px, 12px -12px 0 -5px, -12px -12px 0 -5px; }
    100% { box-shadow: 20px 2px 0 -2px rgba(255,255,255,0), -20px 2px 0 -2px rgba(255,255,255,0), 12px -12px 0 -5px rgba(255,255,255,0), -12px -12px 0 -5px rgba(255,255,255,0); }
}

/* Hide Dark Mode Toggle - always dark */
.dark-mode-toggle,
#darkModeToggle {
    display: none;
}