/* ========== LIGHT MODE ========== */
body.light_mode {
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
    color: #1a1a1a;
}

.light_mode .form-container,
.light_mode .modal-content {
    background-color: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.light_mode h1,
.light_mode h2 {
    color: #E30613;
}

.light_mode label {
    color: #555555;
}

.light_mode input[type="text"],
.light_mode input[type="email"],
.light_mode input[type="tel"],
.light_mode input[type="password"] {
    border-color: #e0e0e0;
    background-color: #f9f9f9;
    color: #1a1a1a;
}

.light_mode input[type="text"]:focus,
.light_mode input[type="email"]:focus,
.light_mode input[type="tel"]:focus,
.light_mode input[type="password"]:focus {
    background-color: #ffffff;
    border-color: #E30613;
}

.light_mode select {
    border-color: #e0e0e0;
    background-color: #f9f9f9;
    color: #1a1a1a;
}

.light_mode select:focus {
    border-color: #E30613;
    background-color: #ffffff;
}

.light_mode button {
    background: linear-gradient(135deg, #E30613 0%, #d1050f 100%);
    color: white;
}

.light_mode button:hover:not(:disabled) {
    background: linear-gradient(135deg, #d1050f 0%, #b80408 100%);
}

.light_mode button:disabled {
    background: #cccccc;
    color: #999999;
}

.light_mode .message {
    color: #d32f2f;
    background-color: #ffebee;
}

.light_mode .message span[style*="color: green"] {
    color: #2e7d32 !important;
    background-color: #e8f5e9 !important;
}

.light_mode .logout {
    background: linear-gradient(135deg, #E30613 0%, #d1050f 100%);
    color: white;
}

.light_mode .logout:hover {
    background: linear-gradient(135deg, #d1050f 0%, #b80408 100%);
}

.light_mode .statistics {
    background: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);
}

.light_mode .statistics .item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
}

.light_mode .statistics .item:hover {
    border-color: #E30613;
    box-shadow: 0 4px 16px rgba(227, 6, 19, 0.12);
}

.light_mode .statistics h1 {
    color: #E30613;
}

.light_mode .statistics b {
    color: #666666;
}

.light_mode .close-btn {
    color: #999999;
}

.light_mode .close-btn:hover {
    color: #E30613;
}

/* ========== DARK MODE ========== */
body.dark_mode {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    color: #e0e0e0;
}

.dark_mode .form-container,
.dark_mode .modal-content {
    background-color: #1e1e1e;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dark_mode h1,
.dark_mode h2 {
    color: #FF5555;
}

.dark_mode label {
    color: #b0b0b0;
}

.dark_mode input[type="text"],
.dark_mode input[type="email"],
.dark_mode input[type="tel"],
.dark_mode input[type="password"] {
    border-color: #333333;
    background-color: #2a2a2a;
    color: #e0e0e0;
}

.dark_mode input[type="text"]:focus,
.dark_mode input[type="email"]:focus,
.dark_mode input[type="tel"]:focus,
.dark_mode input[type="password"]:focus {
    background-color: #313131;
    border-color: #FF5555;
}

.dark_mode select {
    border-color: #333333;
    background-color: #2a2a2a;
    color: #e0e0e0;
}

.dark_mode select:focus {
    border-color: #FF5555;
    background-color: #313131;
}

.dark_mode button {
    background: linear-gradient(135deg, #FF5555 0%, #E30613 100%);
    color: white;
}

.dark_mode button:hover:not(:disabled) {
    background: linear-gradient(135deg, #E30613 0%, #d1050f 100%);
}

.dark_mode button:disabled {
    background: #444444;
    color: #888888;
}

.dark_mode .message {
    color: #FF7777;
    background-color: #3d1515;
}

.dark_mode .message span[style*="color: green"] {
    color: #76d275 !important;
    background-color: #1b3d1b !important;
}

.dark_mode .logout {
    background: linear-gradient(135deg, #FF5555 0%, #E30613 100%);
    color: white;
}

.dark_mode .logout:hover {
    background: linear-gradient(135deg, #E30613 0%, #d1050f 100%);
}

.dark_mode .statistics {
    background: linear-gradient(135deg, #252525 0%, #1f1f1f 100%);
}

.dark_mode .statistics .item {
    background-color: #2a2a2a;
    border: 1px solid #333333;
}

.dark_mode .statistics .item:hover {
    border-color: #FF5555;
    box-shadow: 0 4px 16px rgba(255, 85, 85, 0.2);
}

.dark_mode .statistics h1 {
    color: #FF5555;
}

.dark_mode .statistics b {
    color: #a0a0a0;
}

.dark_mode .close-btn {
    color: #808080;
}

.dark_mode .close-btn:hover {
    color: #FF5555;
}