/* ============================================
   CSS Variables و استایل‌های پایه
   ============================================ */

/* متغیرهای CSS برای تم تاریک (پیش‌فرض) */
:root {
    --bg-primary: #1f2937;
    --bg-secondary: #111827;
    --bg-tertiary: #374151;
    --bg-card: #1f2937;
    --bg-input: #374151;
    --text-primary: #f3f4f6;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --border-color: #4b5563;
    --hover-bg: #374151;
}

/* استایل‌های پایه body */
body { 
    font-family: 'Vazirmatn', sans-serif; 
    background-color: var(--bg-primary); 
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* استایل‌های کارت دستگاه */
.console-card { 
    transition: all 0.3s ease; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
}
.console-card.available { border-left: 5px solid #22c55e; }
.console-card.busy { border-left: 5px solid #ef4444; }
.console-card.paused { border-left: 5px solid #f59e0b; }
.console-card.reserved { border-left: 5px solid #3b82f6; }

/* انیمیشن تایمر */
.timer-blinking { animation: blinker 1.5s linear infinite; }
@keyframes blinker { 50% { opacity: 0.3; } }

/* استایل input number */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] { 
    -moz-appearance: textfield; 
}

/* استایل Modal */
.modal-backdrop { 
    background-color: rgba(0, 0, 0, 0.6); 
}

/* استایل Navigation */
.admin-nav-link.active { 
    background-color: #3b82f6; 
    color: white; 
}
.sub-nav-link.active { 
    border-bottom: 2px solid #3b82f6; 
    color: #3b82f6; 
}

/* استایل منوهای تودرتو */
#device-settings-submenu,
#settings-submenu {
    transition: all 0.3s ease;
}
#device-settings-submenu .admin-nav-link,
#settings-submenu .admin-nav-link {
    font-size: 0.875rem;
    padding: 0.5rem;
}

/* استایل لودر */
.loader {
    border: 4px solid var(--text-primary);
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
}
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}
#app-loader {
    position: fixed; 
    inset: 0; 
    background-color: rgba(31, 41, 55, 0.8);
    z-index: 100; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* رنگ عنوان ماه (پیش‌فرض برای تم تاریک) */
.month-title-color {
    color: #60a5fa; /* آبی روشن برای تم تاریک */
}