/* =========================================
   GSM_WEB - PROJECT STYLES
   ========================================= */

/* 1. VARIABLES & THEMES */
:root {
  --primary-color: #4B0082;
  --secondary-color: #6A0DAD;
  --accent-color: #9D4EDD;
  --accent-light: #E0AAFF;
  --success-color: #27ae60;
  --warning-color: #f39c12;
  --danger-color: #e74c3c;
  --info-color: #17a2b8;
  --text-color: #2c3e50;
  --text-light: #7f8c8d;
  --text-white: #ffffff;
  --text-muted: #999999;
  --bg-color: #f8f9fa;
  --card-bg: #ffffff;
  --header-bg: rgba(255,255,255,0.95);
  --gradient-primary: linear-gradient(135deg, #6A0DAD 0%, #9D4EDD 100%);
  --shadow: 0 4px 6px rgba(106,13,173,0.1);
  --shadow-hover: 0 8px 15px rgba(106,13,173,0.15);
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --border-radius-pill: 25px;
  --border-color: #e9ecef;
  --transition: all 0.3s ease;
  --primary-rgb: 75,0,130;
  --secondary-rgb: 106,13,173;
  --success-rgb: 39,174,96;
  --danger-rgb: 231,76,60;
  --warning-rgb: 243,156,18;
  --info-rgb: 23,162,184;
}

body.theme-light {
  --text-color: #2c3e50; --text-light: #7f8c8d; --bg-color: #f8f9fa; --card-bg: #ffffff;
  --header-bg: rgba(255,255,255,0.95); --border-color: #e9ecef;
}

body.theme-dark {
  --text-color: #ffffff; --text-light: #cccccc; --bg-color: #0f0f1a; --card-bg: #1a1a2e;
  --header-bg: rgba(26,26,46,0.95); --border-color: #495057; --primary-color: #9D4EDD;
  --secondary-color: #6A0DAD; --gradient-primary: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
  --shadow: 0 4px 6px rgba(0,0,0,0.5); --shadow-hover: 0 8px 15px rgba(0,0,0,0.7);
}

/* 2. RESET & BASE */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg-color);
  min-height: 100vh;
  color: var(--text-color);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display:block; max-width:100%; height:auto; }
input, button, textarea, select { font:inherit; color:inherit; }
a { color: var(--secondary-color); text-decoration:none; transition: var(--transition); }
a:hover { color: var(--primary-color); }

/* 3. TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 { font-weight:600; line-height:1.3; margin-bottom:1rem; color:var(--text-color); }
h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; }
p { margin-bottom: 1rem; }

/* 4. LAYOUT */
.container { min-height:100vh; display:flex; flex-direction:column; width:100%; max-width:100%; margin:0 auto; padding:0; }
.content-wrapper { flex:1; display:flex; flex-direction:column; max-width:100%; margin:0 auto; padding:0 20px; width:100%; }
.main-content { flex:1; background:var(--card-bg); border-radius:var(--border-radius); box-shadow:var(--shadow); padding: 2rem; margin-top: 1rem; }

.accred-header {
  display:flex; align-items:center; justify-content:space-between; padding:0 2rem;
  height:70px; background:var(--card-bg); border-radius:0 0 var(--border-radius) var(--border-radius);
  box-shadow:var(--shadow); position:sticky; top:0; z-index:100; flex-shrink:0;
}
.header-left, .header-right { flex:0 0 auto; display:flex; align-items:center; gap:1rem; }
.header-center { flex:1; text-align:center; min-width:0; }
.accred-header h1 { font-size:1.5rem; margin:0; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 5. COMPONENTS */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.75rem 1.5rem; border:none; border-radius:var(--border-radius-pill);
  font-weight:600; cursor:pointer; transition:var(--transition); text-decoration:none;
  white-space:nowrap; font-size:1rem; min-height:50px; color:var(--text-white);
}
.btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.btn-primary { background:var(--primary-color); }
.btn-success { background:var(--success-color); }
.btn-danger { background:var(--danger-color); }
.btn-outline { background:transparent; color:var(--text-color); border:2px solid var(--secondary-color); }
.btn-outline:hover:not(:disabled) { background:var(--secondary-color); color:var(--text-white); }
.btn:disabled { background:var(--text-light); cursor:not-allowed; transform:none; opacity:0.6; }

.form-group { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1rem; }
.form-group label { font-weight:600; color:var(--text-color); }
.form-control {
  padding:0.75rem 1rem; border:1px solid var(--primary-color); border-radius:var(--border-radius);
  font-size:1rem; transition:var(--transition); background:var(--card-bg); color:var(--text-color);
}
.form-control:focus { outline:none; border-color:var(--secondary-color); box-shadow:0 0 0 3px rgba(var(--secondary-rgb),0.15); }
.form-control::placeholder { color:var(--text-light); }

.checkbox { position:relative; display:flex; align-items:center; gap:0.75rem; padding:0.5rem 0; cursor:pointer; user-select:none; margin:10px 0; }
.checkbox input { position:absolute; opacity:0; width:0; height:0; }
.checkbox .checkmark {
  position:relative; display:inline-block; width:22px; height:22px; background:var(--card-bg);
  border:2px solid var(--secondary-color); border-radius:6px; transition:var(--transition); flex-shrink:0;
}
.checkbox:hover .checkmark { border-color:var(--accent-color); }
.checkbox input:checked + .checkmark { background:var(--secondary-color); border-color:var(--secondary-color); }
.checkbox .checkmark::after {
  content:''; position:absolute; display:none; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
  width:5px; height:10px; border:solid white; border-width:0 2px 2px 0;
}
.checkbox input:checked + .checkmark::after { display:block; }
.checkbox input:disabled + .checkmark { opacity:0.5; cursor:not-allowed; border-color:var(--text-light); }
.checkbox input:disabled ~ .checkbox-label { opacity:0.5; cursor:not-allowed; }

.card { background:var(--card-bg); border-radius:var(--border-radius); padding:2rem; box-shadow:var(--shadow); transition:var(--transition); position:relative; overflow:hidden; }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--gradient-primary); }

.alert { padding:1rem 1.5rem; border-radius:var(--border-radius); margin-bottom:1rem; display:flex; align-items:center; gap:1rem; }
.alert-success { background:rgba(var(--success-rgb),0.9); color:white; border-left:4px solid var(--success-color); }
.alert-danger { background:rgba(var(--danger-rgb),0.9); color:white; border-left:4px solid var(--danger-color); }
.alert-warning { background:rgba(var(--warning-rgb),0.9); color:white; border-left:4px solid var(--warning-color); }
.alert-info { background:rgba(var(--info-rgb),0.9); color:white; border-left:4px solid var(--info-color); }
.alert::before { content:''; font-size:1.2rem; flex-shrink:0; }
.alert-success::before { content:'✅' } .alert-danger::before { content:'❌' }
.alert-warning::before { content:'⚠️' } .alert-info::before { content:'ℹ️' }

.table-container { overflow-x:auto; border-radius:var(--border-radius); box-shadow:var(--shadow); margin-bottom:1.5rem; }
.table { width:100%; border-collapse:collapse; background:var(--card-bg); }
.table th, .table td { padding:1rem; text-align:left; border-bottom:1px solid var(--primary-color); }
.table th { background:var(--primary-color); color:var(--text-white); font-weight:600; }
.table tr:hover { background:var(--bg-color); }

/* 6. THEME SWITCHER */
.theme-toggle-container { display:flex; align-items:center; gap:0.75rem; padding:0.5rem 0.75rem; border-radius:25px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); cursor:pointer; transition:var(--transition); }
.theme-toggle-container:hover { background:rgba(255,255,255,0.2); border-color:var(--secondary-color); }
.theme-toggle-track { position:relative; width:52px; height:26px; border-radius:13px; background:linear-gradient(90deg,#fbbf24 0%,#fbbf24 50%,#e2e8f0 50%,#e2e8f0 100%); border:2px solid rgba(0,0,0,0.2); cursor:pointer; transition:var(--transition); overflow:hidden; }
.theme-toggle-thumb { position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:white; box-shadow:0 2px 4px rgba(0,0,0,0.2); display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.theme-icon-light, .theme-icon-dark { width:14px; height:14px; }
body.theme-light .theme-toggle-thumb { background:linear-gradient(135deg,#fbbf24,#f59e0b); left:2px; }
body.theme-dark .theme-toggle-thumb { background:linear-gradient(135deg,#4a5568,#2d3748); left:calc(100% - 24px); }
body.theme-light .theme-icon-light { display:block; } body.theme-light .theme-icon-dark { display:none; }
body.theme-dark .theme-icon-light { display:none; } body.theme-dark .theme-icon-dark { display:block; }

/* 7. UTILITIES */
.text-center { text-align:center; } .mt-1 { margin-top:0.5rem; } .mt-2 { margin-top:1rem; } .mt-3 { margin-top:1.5rem; }
.mb-1 { margin-bottom:0.5rem; } .mb-2 { margin-bottom:1rem; } .mb-3 { margin-bottom:1.5rem; }
.d-flex { display:flex; } .flex-column { flex-direction:column; } .flex-wrap { flex-wrap:wrap; }
.justify-center { justify-content:center; } .justify-between { justify-content:space-between; }
.align-center { align-items:center; } .gap-1 { gap:0.5rem; } .gap-2 { gap:1rem; } .gap-3 { gap:1.5rem; }
.w-100 { width:100%; } .w-auto { width:auto; }
.fade-in-up { animation: fadeInUp 0.6s ease-out; }

/* 8. ANIMATIONS & PRINT */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin { to { transform:rotate(360deg); } }
.spinner { border:4px solid #f3f3f3; border-top:4px solid var(--secondary-color); border-radius:50%; width:18px; height:18px; animation:spin 1s linear infinite; display:inline-block; vertical-align:middle; margin-right:8px; }
@media print { .no-print { display:none!important; } body { background:white!important; color:black!important; } .accred-header, .btn { display:none!important; } .main-content { box-shadow:none!important; padding:0!important; } }

/* 9. GSM SPECIFIC OVERRIDES */
.odometer-toggle { display:flex; gap:0.5rem; margin-bottom:1.5rem; }
.odometer-toggle .btn { flex:1; }
.odometer-toggle .btn.active { background:var(--secondary-color) !important; color:var(--text-white) !important; border-color:var(--secondary-color) !important; }

.info-box {
  background:rgba(var(--info-rgb),0.08); border-left:4px solid var(--info-color);
  padding:0.8rem 1rem; border-radius:var(--border-radius-sm); margin-bottom:1.2rem;
  color:var(--text-color); font-size:0.95rem;
}
.info-box strong { color:var(--secondary-color); }

.preview-area { margin-top:0.5rem; max-height:200px; overflow:hidden; border-radius:var(--border-radius-sm); border:2px dashed var(--border-color); }
.preview-area img { width:100%; height:auto; display:block; border-radius:calc(var(--border-radius-sm) - 2px); }
.text-muted { color:var(--text-light); font-size:0.85rem; }
.text-danger { color:var(--danger-color); font-size:0.85rem; margin-top:0.3rem; }
.flex-1 { flex:1; }

body.theme-light {
  --text-light: #5a6a7a !important;   /* Было #7f8c8d (4.0:1) → Стало ~6.5:1 */
  --text-muted: #6c757d !important;   /* Было #999999 (2.8:1) → Стало ~4.7:1 */
}

/* Плейсхолдеры полей ввода */
.form-control::placeholder {
  color: var(--text-light) !important;
  opacity: 1;
}

/* Инфо-блок и второстепенный текст */
.info-box {
  color: var(--text-color) !important;
}
.info-box span,
.info-box .text-muted {
  color: var(--text-light) !important;
}

/* Гарантируем читаемость лейблов и неактивных кнопок */
.form-group label,
.checkbox-label,
.odometer-toggle .btn:not(.active) {
  color: var(--text-color) !important;
}

.odometer-toggle .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.odometer-toggle .btn:disabled:hover { transform: none; box-shadow: none; }
.alert-warning { background: rgba(243, 156, 18, 0.15); border-left: 4px solid var(--warning-color); color: var(--text-color); }
.alert-warning .checkbox-label { font-size: 0.9rem; color: var(--text-color) !important; }