/* Dark Mode Styles for Machine Maintenance System */

/* Token overrides - everything in style.css built on var(--color-*) re-themes
   automatically from this one block. The class-specific rules below remain
   for pages that still use literal colors instead of the shared tokens. */
body.dark-mode {
    --color-bg: #16213e;
    --color-surface: #1e2a4a;
    --color-text: #e0e0e0;
    --color-text-muted: #b0b0b0;
    --color-border: #2d3e5f;

    background: #1a1a2e;
    color: #e0e0e0;
}

.dark-mode #container {
    background: #16213e;
}

.dark-mode #content {
    background: #16213e;
}

.dark-mode .page-header {
    background: #16213e;
    border-color: #2d3e5f;
}

.dark-mode .dashboard-container,
.dark-mode .settings-container {
    background: transparent;
}

.dark-mode .card,
.dark-mode .stats-card,
.dark-mode .settings-card,
.dark-mode .table-container {
    background: #1e2a4a;
    border-color: #2d3e5f;
    color: #e0e0e0;
}

.dark-mode .card-header,
.dark-mode .settings-card .card-header {
    background: #16213e;
    border-color: #2d3e5f;
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4,
.dark-mode .card-header h3,
.dark-mode .preference-section h4 {
    color: #f0f0f0;
}

.dark-mode p,
.dark-mode .card-header p {
    color: #b0b0b0;
}

/* Navigation */
.dark-mode #sidenav {
    background: #0f1922;
    border-color: #2d3e5f;
}

.dark-mode .menu-item {
    color: #b0b0b0;
}

.dark-mode .menu-item:hover {
    background: #1e2a4a;
    color: #3498db;
}

.dark-mode .menu-item.active {
    background: #1e2a4a;
    color: #3498db;
}

/* Buttons */
.dark-mode .btn {
    border-color: #2d3e5f;
}

.dark-mode .btn-secondary {
    background: #2d3e5f;
    color: #e0e0e0;
}

.dark-mode .btn-secondary:hover {
    background: #3d4e6f;
}

/* Forms */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="number"],
.dark-mode input[type="date"],
.dark-mode select,
.dark-mode textarea,
.dark-mode .pref-select {
    background: #1e2a4a;
    border-color: #2d3e5f;
    color: #e0e0e0;
}

.dark-mode input[type="text"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode input[type="password"]:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
    border-color: #3498db;
    background: #253555;
}

.dark-mode .readonly-field {
    background: #16213e !important;
    color: #7f8c8d !important;
}

/* Tables */
.dark-mode table {
    background: #1e2a4a;
    color: #e0e0e0;
}

.dark-mode thead th {
    background: #16213e;
    color: #f0f0f0;
    border-color: #2d3e5f;
}

.dark-mode tbody tr {
    border-color: #2d3e5f;
}

.dark-mode tbody tr:hover {
    background: #253555;
}

.dark-mode tbody td {
    color: #e0e0e0;
}

/* Stats Cards */
.dark-mode .stat-value {
    color: #f0f0f0;
}

.dark-mode .stat-label {
    color: #b0b0b0;
}

/* Nav Tabs */
.dark-mode .nav-tabs {
    background: #1e2a4a;
    border-color: #2d3e5f;
}

.dark-mode .tab-btn {
    color: #b0b0b0;
}

.dark-mode .tab-btn:hover:not(.active) {
    background: #253555;
    color: #e0e0e0;
}

/* Preferences */
.dark-mode .preference-item,
.dark-mode .permission-item,
.dark-mode .info-item {
    background: #16213e;
    border-color: #2d3e5f;
}

.dark-mode .preference-label,
.dark-mode .permission-name,
.dark-mode .info-item label {
    color: #f0f0f0;
}

.dark-mode .preference-desc,
.dark-mode .info-item value {
    color: #b0b0b0;
}

/* Status Badges */
.dark-mode .status-badge {
    border-color: #2d3e5f;
}

/* Notification Banner */
.dark-mode .notification-banner {
    background: linear-gradient(135deg, #3d4e6f 0%, #5667a2 100%);
}

/* Help Text */
.dark-mode .help-text {
    color: #8f9faf;
}

/* Messages */
.dark-mode .success-message {
    background: #1b4d3e;
    border-color: #27ae60;
    color: #a8e6cf;
}

.dark-mode .error-message {
    background: #4d1b1b;
    border-color: #e74c3c;
    color: #f5b7b1;
}

/* Page Header */
.dark-mode .page-header h2 {
    color: #f0f0f0;
}

/* Mobile Navigation */
.dark-mode .mobile-nav-toggle span {
    background: #e0e0e0;
}

.dark-mode .menu-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* Links */
.dark-mode a {
    color: #5dade2;
}

.dark-mode a:hover {
    color: #3498db;
}

/* Labels */
.dark-mode label {
    color: #e0e0e0;
}

.dark-mode .form-group label {
    color: #e0e0e0;
}

/* Action Links and Buttons */
.dark-mode .action-link,
.dark-mode .action-item {
    background: #1e2a4a;
    border-color: #2d3e5f;
}

.dark-mode .action-link:hover,
.dark-mode .action-item:hover {
    background: #253555;
}

.dark-mode .action-text {
    color: #e0e0e0;
}

/* Quick Actions */
.dark-mode .quick-actions {
    background: #1e2a4a;
    border-color: #2d3e5f;
}

.dark-mode .quick-actions h3 {
    color: #f0f0f0;
}

/* Stats Grid */
.dark-mode .stats-grid {
    background: transparent;
}

/* Recent Activity */
.dark-mode .activity-item {
    background: #1e2a4a;
    border-color: #2d3e5f;
}

.dark-mode .activity-time {
    color: #8f9faf;
}

.dark-mode .activity-description {
    color: #b0b0b0;
}

/* Dropdowns and Select Options */
.dark-mode select option {
    background: #1e2a4a;
    color: #e0e0e0;
}

/* Priority Badges */
.dark-mode .priority-high,
.dark-mode .priority-critical {
    background: #7c2e2e;
    color: #ffb3b3;
}

.dark-mode .priority-medium {
    background: #7c5e2e;
    color: #ffd9b3;
}

.dark-mode .priority-low {
    background: #2e4a7c;
    color: #b3d9ff;
}

/* Status Indicators */
.dark-mode .status-current {
    background: #2e7c3e;
    color: #b3ffb3;
}

.dark-mode .status-due-soon {
    background: #7c6e2e;
    color: #fff9b3;
}

.dark-mode .status-overdue {
    background: #7c2e2e;
    color: #ffb3b3;
}

/* Machine Cards */
.dark-mode .machine-card {
    background: #1e2a4a;
    border-color: #2d3e5f;
}

.dark-mode .machine-info {
    color: #b0b0b0;
}

/* Maintenance Items */
.dark-mode .maintenance-item {
    background: #1e2a4a;
    border-color: #2d3e5f;
}

/* Work Orders */
.dark-mode .work-order-card {
    background: #1e2a4a;
    border-color: #2d3e5f;
}

/* Modals */
.dark-mode .modal {
    background: #1e2a4a;
    border-color: #2d3e5f;
}

.dark-mode .modal-header {
    background: #16213e;
    border-color: #2d3e5f;
}

.dark-mode .modal-title {
    color: #f0f0f0;
}

/* Scrollbars (Webkit) */
.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: #16213e;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #2d3e5f;
    border-radius: 5px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #3d4e6f;
}

/* Code and Pre */
.dark-mode code,
.dark-mode pre {
    background: #0f1922;
    color: #e0e0e0;
    border-color: #2d3e5f;
}

/* Tooltips */
.dark-mode .tooltip {
    background: #0f1922;
    color: #e0e0e0;
    border-color: #2d3e5f;
}

/* Disabled Elements */
.dark-mode input:disabled,
.dark-mode select:disabled,
.dark-mode button:disabled {
    background: #16213e;
    color: #5f6f8f;
    opacity: 0.6;
}

/* Placeholder Text */
.dark-mode ::placeholder {
    color: #5f6f8f;
}

.dark-mode :-ms-input-placeholder {
    color: #5f6f8f;
}

.dark-mode ::-ms-input-placeholder {
    color: #5f6f8f;
}

/* Borders */
.dark-mode hr {
    border-color: #2d3e5f;
}

/* Box Shadows - Make them darker */
.dark-mode .card,
.dark-mode .settings-card,
.dark-mode .stats-card,
.dark-mode .btn {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.dark-mode .nav-tabs {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}