* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
 --primary: #10b981;
 --primary-dark: #059669;
 --primary-light: #d1fae5;
 --secondary: #f59e0b;
 --success: #10b981;
 --danger: #ef4444;
 --warning: #f59e0b;
 --gray-50: #f9fafb;
 --gray-100: #f3f4f6;
 --gray-200: #e5e7eb;
 --gray-300: #d1d5db;
 --gray-400: #9ca3af;
 --gray-500: #6b7280;
 --gray-600: #4b5563;
 --gray-700: #374151;
 --gray-800: #1f2937;
 --gray-900: #111827;
 --radius: 12px;
 --radius-sm: 8px;
 --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
 --bg-card: #ffffff;
 --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
}

body {
 font-family: 'Inter', -apple-system, sans-serif;
 background: var(--gray-50);
 color: var(--gray-800);
 font-size: 14px;
 line-height: 1.5;
}

/* Login Screen */
.login-screen {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 background: linear-gradient(135deg, #059669 0%, #10b981 50%, #84cc16 100%);
}

.login-card {
 background: white;
 border-radius: 20px;
 padding: 48px 40px;
 width: 420px;
 max-width: 90vw;
 box-shadow: var(--shadow-lg);
}

.login-logo {
 text-align: center;
 margin-bottom: 32px;
}

.logo-icon {
 font-size: 64px;
 margin-bottom: 8px;
}

.login-logo h1 {
 font-size: 28px;
 font-weight: 800;
 color: var(--primary);
}

.logo-subtitle {
 color: var(--gray-500);
 font-size: 14px;
}

.login-form .form-group {
 margin-bottom: 16px;
}

.login-form label {
 display: block;
 font-size: 13px;
 font-weight: 600;
 color: var(--gray-700);
 margin-bottom: 6px;
}

.login-form input {
 width: 100%;
 padding: 12px 16px;
 border: 2px solid var(--gray-200);
 border-radius: var(--radius-sm);
 font-size: 15px;
 transition: border-color 0.2s;
}

.login-form input:focus {
 outline: none;
 border-color: var(--primary);
}

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 10px 20px;
 font-size: 14px;
 font-weight: 600;
 border: none;
 border-radius: var(--radius-sm);
 cursor: pointer;
 transition: all 0.2s;
 gap: 6px;
}

.btn-primary {
 background: var(--primary);
 color: white;
}

.btn-primary:hover {
 background: var(--primary-dark);
 transform: translateY(-1px);
}

.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: #059669; }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #dc2626; }
.btn-warning { background: var(--warning); color: white; }
.btn-warning:hover { background: #d97706; }
.btn-outline {
 background: transparent;
 border: 2px solid var(--gray-200);
 color: var(--gray-700);
}
.btn-outline:hover { background: var(--gray-50); }
.btn-vk {
 background: #0077ff;
 border: 2px solid #0077ff;
 color: #fff;
}
.btn-vk:hover {
 background: #006be6;
 border-color: #006be6;
 color: #fff;
}
body.dark-theme .btn-vk {
 background: #0077ff;
 border-color: #0077ff;
 color: #fff;
}
body.dark-theme .btn-vk:hover {
 background: #006be6;
 border-color: #006be6;
}

.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-full { width: 100%; padding: 14px; font-size: 16px; }
.btn:disabled,.btn-primary:disabled,.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; background: var(--gray-300, #9ca3af) !important; color: var(--gray-500, #6b7280) !important; transform: none !important;}

/* Header */
.header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 24px;
 background: white;
 border-bottom: 1px solid var(--gray-200);
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 100;
 height: 84px;
}

.header-left {
 display: flex;
 align-items: center;
 gap: 12px;
}

.menu-toggle {
 display: none;
 background: none;
 border: none;
 font-size: 24px;
 cursor: pointer;
 padding: 4px;
}

.header-logo {
 display: flex;
 align-items: center;
 gap: 8px;
}

.logo-icon-sm { font-size: 24px; }
.header-title { font-size: 18px; font-weight: 700; color: var(--primary); }

.header-right {
 display: flex;
 align-items: center;
 gap: 12px;
}

.header-role {
 background: var(--primary-light);
 color: var(--primary);
 padding: 4px 12px;
 border-radius: 20px;
 font-size: 12px;
 font-weight: 600;
}

.header-name {
 font-weight: 500;
 color: var(--gray-700);
}

/* Layout */
.layout {
 display: flex;
 margin-top: 84px;
 min-height: calc(100vh - 84px);
}

/* Sidebar */
.sidebar {
 width: 240px;
 background: white;
 border-right: 1px solid var(--gray-200);
 padding: 16px 0;
 position: fixed;
 top: 84px;
 left: 0;
 bottom: 0;
 overflow-y: auto;
 transition: transform 0.3s;
 z-index: 50;
 display: flex;
 flex-direction: column;
}

.sidebar-menu {
 display: flex;
 flex-direction: column;
 gap: 2px;
 flex: 1;
}

.menu-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 20px;
 color: var(--gray-600);
 text-decoration: none;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.2s;
 border-left: 3px solid transparent;
}

.menu-item:hover {
 background: var(--gray-50);
 color: var(--gray-800);
}

.menu-item.active {
 background: var(--primary-light);
 color: var(--primary);
 border-left-color: var(--primary);
 font-weight: 600;
}

.menu-icon { font-size: 18px; }

/* Content */
.content {
 flex: 1;
 margin-left: 0;
 padding: 24px;
 min-height: calc(100vh - 60px);
}

/* Когда сайдбар виден (админ/менеджер), добавляем отступ */
body.sidebar-visible .content {
 margin-left: 240px;
}

/* Page Header */
.page-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 24px;
}

.page-header h2 {
 font-size: 22px;
 font-weight: 700;
}

/* Cards */
.card {
 background: white;
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 20px;
 margin-bottom: 16px;
}

.card-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 16px;
}

.card-header h3 {
 font-size: 16px;
 font-weight: 600;
}

/* Stats Grid */
.stats-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 gap: 16px;
 margin-bottom: 24px;
}

.stat-card {
 background: white;
 border-radius: var(--radius);
 padding: 20px;
 box-shadow: var(--shadow);
 display: flex;
 align-items: center;
 gap: 16px;
}

.stat-icon {
 width: 48px;
 height: 48px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
}

.stat-icon.blue { background: #eef2ff; }
.stat-icon.green { background: #ecfdf5; }
.stat-icon.yellow { background: #fffbeb; }
.stat-icon.red { background: #fef2f2; }
.stat-icon.purple { background: #f5f3ff; }

.stat-info h4 {
 font-size: 24px;
 font-weight: 700;
 line-height: 1.2;
}

.stat-info p {
 color: var(--gray-500);
 font-size: 13px;
 font-weight: 500;
}

/* Table */
.table-wrapper {
 overflow-x: auto;
 overflow-y: auto;
 max-height: 600px;
}

table {
 width: 100%;
 border-collapse: collapse;
}

th {
 text-align: left;
 padding: 12px 16px;
 font-size: 12px;
 font-weight: 600;
 color: var(--gray-500);
 text-transform: uppercase;
 letter-spacing: 0.05em;
 border-bottom: 2px solid var(--gray-100);
}

td {
 padding: 12px 16px;
 border-bottom: 1px solid var(--gray-100);
 vertical-align: middle;
}

tr:hover { background: var(--gray-50); }

/* Form elements */
.form-group {
 margin-bottom: 16px;
}

.form-group label {
 display: block;
 font-size: 13px;
 font-weight: 600;
 color: var(--gray-700);
 margin-bottom: 6px;
}

.form-control {
 width: 100%;
 padding: 10px 14px;
 border: 2px solid var(--gray-200);
 border-radius: var(--radius-sm);
 font-size: 14px;
 font-family: inherit;
 transition: border-color 0.2s;
}

.form-control:focus {
 outline: none;
 border-color: var(--primary);
}

select.form-control {
 appearance: none;
 background-image: url("data:image/svg+xml,...");
 background-repeat: no-repeat;
 background-position: right 10px center;
}

.form-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
}

/* Modal */
.modal-overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0,0,0,0.5);
 z-index: 1001;
 align-items: center;
 justify-content: center;
 padding: 20px;
}

.modal-overlay[style*="display: flex"] .modal,
.modal-overlay[style*="display:flex"] .modal {
 display: block;
}

/* Внутренний .modal внутри .modal-overlay — центрированный белый контейнер */
.modal-overlay .modal {
 position: static;
 background: white;
 border-radius: var(--radius);
 width: 100%;
 max-width: 400px;
 max-height: 90vh;
 overflow-y: auto;
 box-shadow: var(--shadow-lg);
 margin: auto;
}

.modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0,0,0,0.5);
 z-index: 1000;
 align-items: center;
 justify-content: center;
 padding: 20px;
}

.modal.show { display: flex; }

.modal-content {
 background: white;
 border-radius: var(--radius);
 width: 100%;
 max-width: 560px;
 max-height: 90vh;
 overflow-y: auto;
 box-shadow: var(--shadow-lg);
}

.modal-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px 24px;
 border-bottom: 1px solid var(--gray-200);
}

.modal-header h3 { font-size: 18px; font-weight: 600; }

.modal-close {
 background: none;
 border: none;
 font-size: 20px;
 cursor: pointer;
 color: var(--gray-400);
 padding: 4px;
}

.modal-body { padding: 24px; text-align: center; }
.modal-lg .modal-content { max-width: 900px; }
.modal-lg .modal-body { text-align: left; }

/* Кастомный скроллбар */
.modal-content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar {
 width: 8px;
 height: 8px;
}
.modal-content::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-track {
 background: var(--gray-100);
 border-radius: 4px;
}
.modal-content::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb {
 background: var(--gray-300);
 border-radius: 4px;
}
.modal-content::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.table-wrapper::-webkit-scrollbar-thumb:hover {
 background: var(--gray-400);
}
body.dark-theme .modal-content::-webkit-scrollbar-track,
body.dark-theme .modal-body::-webkit-scrollbar-track,
body.dark-theme .table-wrapper::-webkit-scrollbar-track {
 background: var(--bg-secondary);
}
body.dark-theme .modal-content::-webkit-scrollbar-thumb,
body.dark-theme .modal-body::-webkit-scrollbar-thumb,
body.dark-theme .table-wrapper::-webkit-scrollbar-thumb {
 background: var(--border-color);
}
body.dark-theme .modal-content::-webkit-scrollbar-thumb:hover,
body.dark-theme .modal-body::-webkit-scrollbar-thumb:hover,
body.dark-theme .table-wrapper::-webkit-scrollbar-thumb:hover {
 background: var(--gray-500);
}

/* Badges */
.badge {
 display: inline-flex;
 align-items: center;
 padding: 2px 10px;
 border-radius: 20px;
 font-size: 12px;
 font-weight: 600;
}

.badge-active { background: #ecfdf5; color: #065f46; }
.badge-inactive { background: #fef2f2; color: #991b1b; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-admin { background: #eef2ff; color: var(--primary); }
.badge-manager { background: #fffbeb; color: #92400e; }
.badge-operator { background: #f5f3ff; color: #6d28d9; }
.badge-client { background: #ecfdf5; color: #065f46; }

/* Search */
.search-box {
 display: flex;
 gap: 8px;
 margin-bottom: 16px;
}

.search-box input {
 flex: 1;
 padding: 10px 14px;
 border: 2px solid var(--gray-200);
 border-radius: var(--radius-sm);
 font-size: 14px;
}

.search-box input:focus {
 outline: none;
 border-color: var(--primary);
}

/* Chart placeholder */
.chart-placeholder {
 height: 200px;
 display: flex;
 align-items: flex-end;
 gap: 4px;
 padding: 20px 0;
}

.chart-bar {
 flex: 1;
 background: var(--primary);
 border-radius: 4px 4px 0 0;
 min-height: 4px;
 transition: height 0.3s;
 position: relative;
}

.chart-bar:hover { opacity: 0.8; }

.chart-labels {
 display: flex;
 justify-content: space-between;
 font-size: 11px;
 color: var(--gray-500);
 padding-top: 8px;
}

/* Actions */
.actions {
 white-space: nowrap;
 vertical-align: middle;
}

.action-btn {
 padding: 6px 10px;
 border: none;
 border-radius: 6px;
 cursor: pointer;
 font-size: 13px;
 transition: all 0.2s;
}

.action-btn.edit { background: #eef2ff; color: var(--primary); }
.action-btn.edit:hover { background: var(--primary); color: white; }
.action-btn.delete { background: #fef2f2; color: var(--danger); }
.action-btn.delete:hover { background: var(--danger); color: white; }
.action-btn.view { background: #ecfdf5; color: var(--success); }
.action-btn.view:hover { background: var(--success); color: white; }

/* Checkbox group */
.checkbox-group {
 display: flex;
 flex-direction: column;
 gap: 8px;
 max-height: 200px;
 overflow-y: auto;
 border: 1px solid var(--gray-200);
 border-radius: var(--radius-sm);
 padding: 12px;
}

.checkbox-item {
 display: flex;
 align-items: center;
 gap: 8px;
}

.checkbox-item input[type="checkbox"] {
 width: 18px;
 height: 18px;
 accent-color: var(--primary);
}

/* Loading */
.loading {
 text-align: center;
 padding: 40px;
 color: var(--gray-400);
}

.loading::after {
 content: '';
 display: inline-block;
 width: 24px;
 height: 24px;
 border: 3px solid var(--gray-200);
 border-top-color: var(--primary);
 border-radius: 50%;
 animation: spin 0.6s linear infinite;
 margin-left: 8px;
 vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Empty state */
.empty-state {
 text-align: center;
 padding: 40px;
 color: var(--gray-400);
}

.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 16px; }

/* Toast */
.toast {
 position: fixed;
 bottom: 24px;
 right: 24px;
 padding: 12px 24px;
 border-radius: var(--radius-sm);
 color: white;
 font-weight: 500;
 z-index: 2000;
 animation: slideUp 0.3s ease;
 box-shadow: var(--shadow-lg);
}

.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.info { background: var(--primary); }

@keyframes slideUp {
 from { transform: translateY(20px); opacity: 0; }
 to { transform: translateY(0); opacity: 1; }
}

/* Responsive */
/* Sidebar footer - кнопки выхода и смены пароля */
.sidebar-footer {
 margin-top: auto;
 border-top: 1px solid var(--gray-200);
 padding-top: 4px;
}

.sidebar-footer .menu-item {
 color: var(--gray-500);
 font-size: 14px;
}

.sidebar-footer .menu-item:hover {
 color: var(--danger, #ef4444);
 background: rgba(239, 68, 68, 0.05);
}

.sidebar-footer .sidebar-change-password:hover {
 color: var(--primary);
 background: var(--primary-light);
}

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ===== */
@media (max-width: 768px) {
 .sidebar {
 transform: translateX(-100%);
 transition: transform 0.3s ease;
 }
 .sidebar.open {
 transform: translateX(0);
 }
 .menu-toggle { display: block !important; }
 .content {
 margin-left: 0 !important;
 padding: 16px;
 }
 .stats-grid {
 grid-template-columns: 1fr 1fr;
 }
 .form-row {
 grid-template-columns: 1fr;
 }
 .header-right .header-name { display: none; }
 .header-right .btn:not(.theme-toggle) { display: none; }
 .header-right .theme-toggle { font-size: 16px; padding: 4px 8px; }
 .header { padding: 8px 12px; }
 .header-title { font-size: 16px; }
 .header-role { font-size: 10px; padding: 2px 8px; }
 .modal-overlay > div { width: 80% !important; max-width: 500px !important; }
}

@media (max-width: 600px) {
 .header-right .header-role { display: none; }
 .header { padding: 8px 12px; height: 72px; }
 .layout { margin-top: 72px; min-height: calc(100vh - 72px); }
 .sidebar { top: 72px; }
 .content { padding: 12px; }
 .stats-grid { grid-template-columns: 1fr 1fr !important; }
 .stats-grid .stat-card:nth-child(3) { grid-column: span 2; }
}

@media (max-width: 480px) {
 .header { padding: 6px 10px; height: 72px; }
 .layout { margin-top: 72px; min-height: calc(100vh - 72px); }
 .sidebar { top: 72px; width: 240px !important; left: -240px !important; }
 .content { padding: 10px; }
 .stats-grid { grid-template-columns: 1fr !important; }
 .stats-grid .stat-card:nth-child(3) { grid-column: span 1; }
 .stat-card { padding: 10px !important; }
 .stat-card .stat-value { font-size: 18px !important; }
 .stat-card .stat-label { font-size: 10px !important; }
 .btn { font-size: 12px !important; padding: 6px 12px !important; }
 input, select, textarea { font-size: 16px !important; }
 .card { padding: 10px !important; }
 .page-header h2 { font-size: 16px !important; }
 .modal-overlay > div { width: 95% !important; padding: 12px !important; }
 th, td { padding: 4px 4px !important; font-size: 9px !important; }
 th { font-size: 8px !important; }
 .header-title { font-size: 14px; }
 .header-logo span { font-size: 14px !important; }
 .header-logo img { max-width: 160px !important; }
}


/* Dark Theme */
body.dark-theme {
 --bg-primary: #0f172a;
 --bg-secondary: #1e293b;
 --bg-card: #1e293b;
 --text-primary: #f1f5f9;
 --text-secondary: #94a3b8;
 --border-color: #334155;
 --hover-bg: #334155;
 --primary-light: #064e3b;
}

body.dark-theme {
 background: var(--bg-primary);
 color: var(--text-primary);
}

body.dark-theme .header,
body.dark-theme .sidebar,
body.dark-theme .card,
body.dark-theme .stat-card,
body.dark-theme .modal-content,
body.dark-theme .login-card {
 background: var(--bg-card) !important;
 border-color: var(--border-color);
}

body.dark-theme .header { border-bottom-color: var(--border-color); }
body.dark-theme .sidebar { border-right-color: var(--border-color); }
body.dark-theme th { color: var(--text-secondary); border-bottom-color: var(--border-color); }
body.dark-theme td { border-bottom-color: var(--border-color); }
body.dark-theme tr:hover { background: var(--hover-bg); }
body.dark-theme .form-control { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); }
body.dark-theme .form-group label { color: var(--text-secondary); }
body.dark-theme .menu-item { color: var(--text-secondary); }
body.dark-theme .menu-item:hover { background: var(--hover-bg); color: var(--text-primary); }
body.dark-theme .menu-item.active { background: rgba(99, 102, 241, 0.15); }
body.dark-theme .modal-header { border-bottom-color: var(--border-color); }
body.dark-theme .modal { background: rgba(0,0,0,0.7); }
body.dark-theme .checkbox-group { border-color: var(--border-color); }
body.dark-theme .btn-outline { border-color: var(--border-color); color: var(--text-primary); }
body.dark-theme .btn-outline:hover { background: var(--hover-bg); }
body.dark-theme .stat-icon.blue { background: rgba(99, 102, 241, 0.2); }
body.dark-theme .stat-icon.green { background: rgba(16, 185, 129, 0.2); }
body.dark-theme .stat-icon.yellow { background: rgba(245, 158, 11, 0.2); }
body.dark-theme .stat-icon.red { background: rgba(239, 68, 68, 0.2); }
body.dark-theme .stat-icon.purple { background: rgba(139, 92, 246, 0.2); }
body.dark-theme .header-name { color: var(--text-primary); }
body.dark-theme .header-role { background: rgba(99, 102, 241, 0.2); }
body.dark-theme .search-box input { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); }
body.dark-theme .login-logo h1 { color: #818cf8; }

/* Dark theme - operator cabinet */
body.dark-theme .operator-cabinet {
 color: var(--text-primary);
}

body.dark-theme .cabinet-header h2 {
 color: var(--text-primary);
}

body.dark-theme .cabinet-subtitle {
 color: var(--text-secondary);
}

body.dark-theme .cabinet-btn {
 background: var(--bg-card) !important;
 border-color: var(--border-color) !important;
}

body.dark-theme .cabinet-btn .cabinet-btn-label {
 color: var(--text-primary);
}

body.dark-theme .cabinet-btn .cabinet-btn-desc {
 color: var(--text-secondary);
}

body.dark-theme .cabinet-btn:hover {
 border-color: var(--primary) !important;
 box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

body.dark-theme .cabinet-btn-trip {
 background: linear-gradient(135deg, #064e3b, #065f46) !important;
 border-color: #059669 !important;
}

body.dark-theme .cabinet-btn-trip:hover {
 background: linear-gradient(135deg, #065f46, #047857) !important;
 border-color: #10b981 !important;
}

body.dark-theme .cabinet-btn-sub {
 background: linear-gradient(135deg, #1e3a5f, #1e40af) !important;
 border-color: #3b82f6 !important;
}

body.dark-theme .cabinet-btn-sub:hover {
 background: linear-gradient(135deg, #1e40af, #2563eb) !important;
 border-color: #60a5fa !important;
}

body.dark-theme .cabinet-point-select label {
 color: var(--text-secondary);
}

body.dark-theme .cabinet-point-select select {
 background: var(--bg-secondary);
 border-color: var(--border-color);
 color: var(--text-primary);
}

body.dark-theme .scanner-container {
 background: var(--bg-card) !important;
 border-color: var(--border-color);
}

body.dark-theme .scanner-header h3 {
 color: var(--text-primary);
}

body.dark-theme .scanner-status {
 color: var(--text-secondary);
}

body.dark-theme .scanner-error {
 color: #fca5a5;
}

body.dark-theme .scanner-manual-input p {
 color: var(--text-secondary) !important;
}

body.dark-theme .scanner-manual-input input {
 background: var(--bg-secondary);
 border-color: var(--border-color);
 color: var(--text-primary);
}

body.dark-theme .result-card {
 background: var(--bg-card) !important;
 border-color: var(--border-color);
}

body.dark-theme .result-card .result-text {
 color: var(--text-primary);
}

body.dark-theme .result-card.result-success {
 border-color: #059669;
}

body.dark-theme .result-card.result-info {
 border-color: #3b82f6;
}

body.dark-theme .result-card.result-error {
 border-color: #ef4444;
}

body.dark-theme .result-card.result-question {
 border-color: #f59e0b;
}

body.dark-theme .loading {
 color: var(--text-secondary);
}
body.dark-theme .card-header h3 { color: var(--text-primary); }
body.dark-theme .page-header h2 { color: var(--text-primary); }
body.dark-theme .stat-info h4 { color: var(--text-primary); }
body.dark-theme .stat-info p { color: var(--text-secondary); }
body.dark-theme .feedback-item { border-color: var(--border-color) !important; }
body.dark-theme .chart-bar { background: #818cf8; }
body.dark-theme .chart-labels { color: var(--text-secondary); }
body.dark-theme .loading { color: var(--text-secondary); }
body.dark-theme .empty-state { color: var(--text-secondary); }
body.dark-theme .toast { color: white; }
body.dark-theme #loginError { color: #fca5a5; }
body.dark-theme .badge-active { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
body.dark-theme .badge-inactive { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
body.dark-theme .badge-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
body.dark-theme .badge-admin { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
body.dark-theme .badge-manager { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
body.dark-theme .badge-operator { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }
body.dark-theme .badge-client { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
body.dark-theme .action-btn.edit { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
body.dark-theme .action-btn.edit:hover { background: #6366f1; color: white; }
body.dark-theme .action-btn.delete { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
body.dark-theme .action-btn.delete:hover { background: #ef4444; color: white; }
body.dark-theme .action-btn.view { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
body.dark-theme .action-btn.view:hover { background: #10b981; color: white; }
.theme-toggle { font-size: 18px; padding: 6px 10px; line-height: 1; }

/* Point badge for admin clients table */
.points-badge {
 display: inline-block;
 background: var(--primary);
 color: white;
 border-radius: 50%;
 width: 28px;
 height: 28px;
 text-align: center;
 line-height: 28px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
 transition: transform 0.2s;
}
.points-badge:hover {
 transform: scale(1.15);
 background: var(--primary-dark);
}


/* ===================== OPERATOR CABINET ===================== */
.operator-cabinet {
 max-width: 600px;
 margin: 0 auto;
 padding: 20px;
 min-height: calc(100vh - 120px);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

/* Когда сайдбар скрыт (оператор), убираем отступ */
body:not(.sidebar-visible) .content .operator-cabinet {
 margin-left: auto;
 margin-right: auto;
 width: 100%;
}

.cabinet-header {
 text-align: center;
 margin-bottom: 40px;
}

.cabinet-header h2 {
 font-size: 28px;
 margin-bottom: 8px;
}

.cabinet-subtitle {
 color: var(--text-secondary);
 font-size: 16px;
}

.cabinet-actions {
 display: flex;
 flex-direction: column;
 gap: 16px;
 width: 100%;
 max-width: 400px;
 margin: 0 auto;
}

.cabinet-btn {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 32px 20px;
 border: 2px solid var(--border);
 border-radius: 16px;
 background: var(--card-bg);
 cursor: pointer;
 transition: all 0.3s;
 text-align: center;
}

.cabinet-btn:hover {
 border-color: var(--primary);
 transform: translateY(-2px);
 box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.cabinet-btn-icon {
 font-size: 48px;
 margin-bottom: 12px;
}

.cabinet-btn-label {
 font-size: 20px;
 font-weight: 600;
 margin-bottom: 4px;
}

.cabinet-btn-desc {
 font-size: 14px;
 color: var(--text-secondary);
}

/* Cabinet action buttons with background */
.cabinet-btn-trip {
 background: linear-gradient(135deg, #e8f5e9, #c8e6c9) !important;
 border-color: #a5d6a7 !important;
}

.cabinet-btn-trip:hover {
 background: linear-gradient(135deg, #c8e6c9, #a5d6a7) !important;
 border-color: #66bb6a !important;
}

.cabinet-btn-sub {
 background: linear-gradient(135deg, #e3f2fd, #bbdefb) !important;
 border-color: #90caf9 !important;
}

.cabinet-btn-sub:hover {
 background: linear-gradient(135deg, #bbdefb, #90caf9) !important;
 border-color: #42a5f5 !important;
}

.scanner-container {
 margin-top: 24px;
 padding: 20px;
 background: var(--card-bg);
 border-radius: 16px;
 border: 1px solid var(--border);
}

.scanner-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 16px;
}

.scanner-header h3 {
 margin: 0;
 font-size: 18px;
}

.scanner-viewport {
 display: flex;
 justify-content: center;
 margin-bottom: 16px;
}

.scanner-status {
 text-align: center;
 color: var(--text-secondary);
 padding: 12px;
}

.scanner-error {
 text-align: center;
 color: #e74c3c;
 padding: 12px;
}

.cabinet-result {
 margin-top: 24px;
}

.result-card {
 padding: 24px;
 border-radius: 16px;
 text-align: center;
 background: var(--card-bg);
 border: 1px solid var(--border);
}

.result-card.result-success {
 border-color: #27ae60;
 background: #f0fdf4;
}

.result-card.result-error {
 border-color: #e74c3c;
 background: #fef2f2;
}

.result-card.result-info {
 border-color: #3498db;
 background: #eff6ff;
}

.result-card.result-question {
 border-color: #f39c12;
 background: #fffbeb;
}

.result-icon {
 font-size: 48px;
 margin-bottom: 12px;
}

.result-text {
 font-size: 16px;
 margin-bottom: 8px;
 color: var(--text-primary);
}

.result-actions {
 display: flex;
 gap: 12px;
 justify-content: center;
 margin-top: 16px;
}

.dark-theme .result-card.result-success {
 background: #064e3b;
}

.dark-theme .result-card.result-error {
 background: #450a0a;
}

.dark-theme .result-card.result-info {
 background: #0c4a6e;
}

.dark-theme .result-card.result-question {
 background: #451a03;
}

/* Loading spinner */
.loading-spinner {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 60px 20px;
 color: #888;
}
.spinner {
 width: 40px;
 height: 40px;
 border: 4px solid #e0e0e0;
 border-top: 4px solid #4CAF50;
 border-radius: 50%;
 animation: spin 0.8s linear infinite;
 margin-bottom: 12px;
}
@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

/* Operator cabinet point select */
.cabinet-point-select {
 margin-bottom: 20px;
 padding: 16px;
 background: #f8f9fa;
 border-radius: 12px;
}
.cabinet-point-select label {
 display: block;
 margin-bottom: 6px;
 font-weight: 600;
 font-size: 14px;
 color: #333;
}
.cabinet-point-select select {
 width: 100%;
 padding: 10px 12px;
 border: 2px solid #ddd;
 border-radius: 8px;
 font-size: 15px;
 background: white;
}

/* Trip badge */
.badge-trip {
 display: inline-block;
 padding: 4px 10px;
 border-radius: 20px;
 font-size: 13px;
 font-weight: 600;
 background: #e3f2fd;
 color: #1565c0;
}

/* Operator point selection cards */
.cabinet-point-list {
 display: flex;
 flex-direction: column;
 gap: 12px;
 padding: 16px 0;
}

.cabinet-point-card {
 background: var(--card-bg, #fff);
 border: 2px solid var(--border-color, #e0e0e0);
 border-radius: 12px;
 padding: 20px;
 cursor: pointer;
 transition: all 0.2s ease;
 text-align: center;
}

.cabinet-point-card:hover {
 border-color: var(--primary, #4a90d9);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.cabinet-point-card-name {
 font-size: 18px;
 font-weight: 600;
 color: var(--text-color, #333);
 margin-bottom: 4px;
}

.cabinet-point-card-addr {
 font-size: 14px;
 color: var(--text-secondary, #888);
}

/* Fullscreen scanner overlay */
.scanner-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.5);
 z-index: 9999;
 display: none;
 align-items: center;
 justify-content: center;
 backdrop-filter: blur(2px);
}

.scanner-overlay-header {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 16px 20px;
 color: var(--text, #111827);
 font-size: 16px;
 font-weight: 600;
 border-bottom: 1px solid var(--border, #e5e7eb);
 text-align: center;
}

.scanner-close-btn {
 background: var(--hover, #f3f4f6);
 border: none;
 color: var(--text, #111827);
 font-size: 20px;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background 0.2s;
}
.scanner-close-btn:hover {
 background: var(--border, #e5e7eb);
}

.scanner-overlay-footer {
 padding: 20px;
}

.scanner-overlay-footer .scanner-result {
 text-align: center;
 margin-bottom: 12px;
}

.scanner-overlay-footer .scanner-status {
 color: var(--text-secondary, #6b7280);
 font-size: 14px;
}

.scanner-overlay-footer .scanner-error {
 color: #ef4444;
 font-size: 14px;
 background: #fef2f2;
 padding: 8px 12px;
 border-radius: 8px;
}

.scanner-overlay-footer .scanner-manual-input {
 display: flex;
 gap: 8px;
}

.scanner-overlay-footer .scanner-manual-input .form-input {
 flex: 1;
 background: var(--card-bg, #fff);
 border: 1px solid var(--border, #e5e7eb);
 border-radius: 8px;
 padding: 10px 14px;
 font-size: 14px;
 color: var(--text, #111827);
}

/* Scanner modal content - white card inside overlay */
.scanner-overlay .modal-content {
 background: var(--card-bg, #fff);
 border-radius: 16px;
 max-width: 400px;
 width: 90%;
 max-height: 90vh;
 overflow-y: auto;
 box-shadow: 0 8px 32px rgba(0,0,0,0.2);
 animation: slideUp 0.2s ease;
}


/* Operator modal dialog */
.operator-modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.5);
 z-index: 10000;
 display: flex;
 align-items: center;
 justify-content: center;
 animation: fadeIn 0.2s ease;
}

.operator-modal-box {
 background: var(--card-bg, #fff);
 border-radius: 16px;
 padding: 24px;
 max-width: 360px;
 width: 90%;
 box-shadow: 0 8px 32px rgba(0,0,0,0.2);
 animation: slideUp 0.2s ease;
}

/* Убираем лишние рамки внутри модального окна оператора */
.operator-modal-box .result-card {
 border: none !important;
 background: transparent !important;
 padding: 0 !important;
}

/* Тёмная тема для модального окна оператора */
body.dark-theme .operator-modal-box {
 background: var(--bg-card, #1e293b);
 color: var(--text-primary, #f1f5f9);
}

body.dark-theme .operator-modal-box .result-text {
 color: var(--text-primary, #f1f5f9);
}

body.dark-theme .operator-modal-box .result-icon {
 color: var(--text-primary, #f1f5f9);
}

/* Dark theme for scanner overlay */
body.dark-theme .scanner-overlay .modal-content {
 background: var(--bg-card, #1e293b);
 color: var(--text-primary, #f1f5f9);
}

body.dark-theme .scanner-overlay-header {
 color: var(--text-primary, #f1f5f9);
 border-bottom-color: var(--border-color, #334155);
}

body.dark-theme .scanner-overlay-footer .scanner-status {
 color: var(--text-secondary, #94a3b8);
}

body.dark-theme .scanner-overlay-footer .scanner-error {
 background: rgba(239, 68, 68, 0.1);
 color: #fca5a5;
}

body.dark-theme .scanner-close-btn {
 background: var(--hover-dark, #334155);
 color: var(--text-primary, #f1f5f9);
}

body.dark-theme .scanner-close-btn:hover {
 background: var(--border-color, #475569);
}

@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}

@keyframes slideUp {
 from { transform: translateY(20px); opacity: 0; }
 to { transform: translateY(0); opacity: 1; }
}

/* ===================== ACHIEVEMENTS GRID ===================== */
.achievements-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: 16px;
 padding: 4px 0;
}

.achievement-card {
 background: white;
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 position: relative;
 transition: transform 0.2s, box-shadow 0.2s;
}

.achievement-card:hover {
 transform: translateY(-2px);
 box-shadow: var(--shadow-lg);
}

.achievement-card.achievement-inactive {
 opacity: 0.6;
}

.achievement-icon-wrapper {
 width: 100px;
 height: 100px;
 border-radius: 16px;
 background: linear-gradient(135deg, #fef3c7, #fde68a);
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 12px;
 overflow: hidden;
 flex-shrink: 0;
}

.achievement-icon-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.achievement-icon-fallback {
 font-size: 48px;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
}

.achievement-info {
 flex: 1;
 width: 100%;
}

.achievement-name {
 font-size: 16px;
 font-weight: 700;
 margin: 0 0 4px;
 color: var(--gray-900);
}

.achievement-desc {
 font-size: 13px;
 color: var(--gray-500);
 margin: 0 0 12px;
 line-height: 1.4;
}

.achievement-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 justify-content: center;
}

.badge-condition {
 background: #eef2ff;
 color: #4f46e5;
 font-size: 11px;
 padding: 3px 8px;
 border-radius: 20px;
 font-weight: 600;
}

.badge-reward {
 background: #fef3c7;
 color: #d97706;
 font-size: 11px;
 padding: 3px 8px;
 border-radius: 20px;
 font-weight: 600;
}

.achievement-actions {
 position: absolute;
 top: 12px;
 right: 12px;
 display: flex;
 gap: 4px;
 opacity: 0;
 transition: opacity 0.2s;
}

.achievement-card:hover .achievement-actions {
 opacity: 1;
}

/* Sticky table headers */
.table-wrapper thead {
 position: sticky;
 top: 0;
 z-index: 2;
 background: var(--bg-card) !important;
}

.table-wrapper thead tr {
 background: var(--bg-card) !important;
}

.table-wrapper thead th {
 position: sticky;
 top: 0;
 background: var(--bg-card) !important;
 z-index: 1;
 box-shadow: inset 0 -2px 0 var(--gray-100);
}

/* Nav badge для feedback */
.nav-badge {
 background: #ef4444;
 color: #fff;
 font-size: 10px;
 font-weight: 700;
 padding: 1px 6px;
 border-radius: 10px;
 margin-left: 4px;
 vertical-align: middle;
}

/* ===== Логотип ===== */
.logo-icon-img {
 display: block;
 max-width: 64px;
 height: auto;
}
.logo-icon-sm-img {
 display: inline-block;
 max-width: 40px;
 height: auto;
 vertical-align: middle;
}
/* ===== МОБИЛЬНАЯ ОПТИМИЗАЦИЯ ===== */

/* Базовые мобильные настройки */
* {
 box-sizing: border-box;
}

body {
 overflow-x: hidden;
 width: 100%;
 max-width: 100vw;
}

.card, .page-header, .stats-grid, .empty-state {
 max-width: 100%;
 overflow-wrap: break-word;
 word-wrap: break-word;
}

.table-responsive {
 overflow-x: auto;
 overflow-y: auto;
 max-height: 600px;
 -webkit-overflow-scrolling: touch;
 width: 100%;
}

@media (max-width: 600px) {
 body { padding: 0 !important; margin: 0 !important; }
 .sidebar { width: 260px !important; left: -260px !important; }
 .sidebar.open { left: 0 !important; }
 .content { padding: 12px 10px !important; width: 100% !important; margin-left: 0 !important; max-width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
 .page-header { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
 .page-header h2 { font-size: 18px !important; text-align: center; }
 .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
 .stat-card { padding: 12px !important; }
 .stat-card .stat-value { font-size: 20px !important; }
 .stat-card .stat-label { font-size: 11px !important; }
 .card { padding: 12px !important; margin-bottom: 12px !important; border-radius: 10px !important; width: 100% !important; max-width: 100% !important; }
 .btn { font-size: 13px !important; padding: 8px 14px !important; min-height: 40px; }
 .btn-full { width: 100% !important; }
 .btn-group { flex-direction: column !important; gap: 6px !important; }
 input, select, textarea { font-size: 16px !important; max-width: 100% !important; box-sizing: border-box; }
 .search-box { flex-direction: column !important; gap: 6px !important; }
 .search-box input, .search-box select, .search-box button { width: 100% !important; }
 .modal-overlay > div { width: 95% !important; max-width: 95% !important; margin: 10px auto !important; padding: 16px !important; max-height: 90vh !important; overflow-y: auto !important; }
 .form-group { margin-bottom: 10px !important; }
 .form-row { flex-direction: column !important; gap: 8px !important; }
 .children-list { grid-template-columns: 1fr !important; }
 .filter-bar { flex-direction: column !important; gap: 6px !important; }
 .filter-bar > * { width: 100% !important; }
 .client-card { padding: 10px !important; }
 .profile-header { flex-direction: column !important; align-items: center !important; text-align: center !important; }
 .profile-avatar { margin-bottom: 8px !important; }
 .operator-cabinet { padding: 10px !important; }
 .qr-scanner input { width: 100% !important; }
 .chart-container { height: 200px !important; }
 .actions-row { flex-wrap: wrap !important; gap: 4px !important; }
 .actions-row .btn { flex: 1 1 auto !important; min-width: 0 !important; font-size: 12px !important; padding: 6px 10px !important; }
 .hide-mobile { display: none !important; }
 .header-logo { gap: 6px !important; }
 .header-logo span { font-size: 16px !important; }
 .header-logo img { max-width: 170px !important; }
 .badge { font-size: 10px !important; padding: 2px 6px !important; }
 .list-item { padding: 10px !important; flex-direction: column !important; gap: 6px !important; }
 .list-item .list-item-actions { align-self: flex-end !important; }
 .section-title { font-size: 16px !important; }
 .menu-item { padding: 14px 16px !important; min-height: 48px; }
 .cabinet-tab { min-height: 44px; display: flex; align-items: center; justify-content: center; }
 .code-container canvas, .code-container img { width: 160px !important; height: 160px !important; }
}

@media (max-width: 400px) {
 .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
 .stat-card { padding: 8px !important; }
 .stat-card .stat-value { font-size: 16px !important; }
 .stat-card .stat-label { font-size: 10px !important; }
 .content { padding: 8px 6px !important; }
 .card { padding: 8px !important; }
 .btn { font-size: 12px !important; padding: 6px 10px !important; min-height: 36px; }
 h2 { font-size: 16px !important; }
 h3 { font-size: 14px !important; }
 .sidebar { width: 220px !important; left: -220px !important; }
 .code-container canvas, .code-container img { width: 140px !important; height: 140px !important; }
 .verification-code-display { font-size: 32px !important; letter-spacing: 8px !important; padding: 14px 8px !important; }
}

@media (max-width: 390px) {
 .dk-activity-card .card-header h3 { font-size:13px; }
 .dk-activity-card .card-header .brand-chip { font-size:9px; }
 .dk-activity-card > div:nth-child(2) { margin-top:0; }
 .table-view-toggle { transform:scale(0.75); transform-origin:left center; }
}

@media (min-width: 601px) and (max-width: 1024px) {
 .content { padding: 16px !important; max-width: 100% !important; }
 .stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
 .sidebar { width: 220px !important; }
 .modal-overlay > div { width: 70% !important; max-width: 600px !important; }
 .header-title { font-size: 18px; }
 .header-logo span { font-size: 18px; }
}

.login-logo {
 text-align: center;
}

::-webkit-scrollbar {
 width: 6px;
 height: 6px;
}
::-webkit-scrollbar-track {
 background: transparent;
}
::-webkit-scrollbar-thumb {
 background: var(--primary-light, #c8e6c9);
 border-radius: 3px;
}

/* ===== ТАБЛИЦЫ НА МОБИЛЬНЫХ ===== */
@media (max-width: 600px) {
 /* Таблицы превращаются в карточки (по умолчанию) */
 .table-wrapper {
 overflow: visible !important;
 max-height: none !important;
 }

 .table-wrapper table,
 table {
 width: 100% !important;
 min-width: auto !important;
 table-layout: auto;
 border-collapse: separate;
 border-spacing: 0;
 }

 .table-wrapper thead,
 table thead {
 display: none !important;
 }

 .table-wrapper tbody tr,
 table tbody tr {
 display: block !important;
 background: var(--bg-card) !important;
 border: 1px solid var(--border-color) !important;
 border-radius: 10px !important;
 padding: 10px 12px !important;
 margin-bottom: 8px !important;
 box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
 }

 .table-wrapper tbody tr:hover,
 table tbody tr:hover {
 background: var(--bg-card) !important;
 }

 .table-wrapper td,
 table td {
 display: flex !important;
 justify-content: space-between !important;
 align-items: center !important;
 padding: 5px 0 !important;
 border-bottom: 1px solid var(--border-color) !important;
 border-left: none !important;
 text-align: right !important;
 gap: 8px !important;
 font-size: 12px !important;
 white-space: normal !important;
 }

 .table-wrapper td:last-child,
 table td:last-child {
 border-bottom: none !important;
 }

 .table-wrapper td::before,
 table td::before {
 content: attr(data-label) !important;
 font-weight: 600 !important;
 font-size: 11px !important;
 color: var(--text-secondary) !important;
 text-align: left !important;
 flex-shrink: 0 !important;
 min-width: 80px !important;
 }

 .table-wrapper td .btn,
 table td .btn {
 font-size: 11px !important;
 padding: 4px 10px !important;
 }

 .table-wrapper td .badge,
 table td .badge {
 font-size: 10px !important;
 padding: 2px 6px !important;
 }

 .table-wrapper td a,
 table td a,
 .table-wrapper td span,
 table td span {
 font-size: 12px !important;
 }

 .table-wrapper td img,
 table td img {
 max-width: 24px !important;
 max-height: 24px !important;
 }

 .table-wrapper td .action-btns,
 table td .action-btns {
 display: flex !important;
 gap: 4px !important;
 justify-content: flex-end !important;
 }

 .table-wrapper td .action-btns .btn,
 table td .action-btns .btn {
 font-size: 10px !important;
 padding: 3px 8px !important;
 min-width: auto !important;
 }

 /* Скрываем колонки с data-label="Действия" если они пустые */
 td[data-label="Действия"]:empty {
 display: none !important;
 }

 /* Убираем лишние колонки */
 .hide-mobile-col {
 display: none !important;
 }

 /* Режим таблицы (когда добавлен класс .table-mode) */
 .table-wrapper.table-mode {
 overflow-x: auto !important;
 -webkit-overflow-scrolling: touch !important;
 }
 .table-wrapper.table-mode table,
 table.table-mode {
 min-width: 600px !important;
 border-collapse: collapse !important;
 }
 .table-wrapper.table-mode thead,
 table.table-mode thead {
 display: table-header-group !important;
 }
 .table-wrapper.table-mode tbody tr,
 table.table-mode tbody tr {
 display: table-row !important;
 background: none !important;
 border: none !important;
 border-radius: 0 !important;
 padding: 0 !important;
 margin-bottom: 0 !important;
 box-shadow: none !important;
 }
 .table-wrapper.table-mode td,
 table.table-mode td {
 display: table-cell !important;
 padding: 6px 6px !important;
 border-bottom: 1px solid var(--border-color) !important;
 border-left: none !important;
 text-align: left !important;
 font-size: 10px !important;
 white-space: nowrap !important;
 }
 .table-wrapper.table-mode td::before,
 table.table-mode td::before {
 content: none !important;
 display: none !important;
 }
 .table-wrapper.table-mode td .btn,
 table.table-mode td .btn {
 font-size: 9px !important;
 padding: 3px 6px !important;
 }
 .table-wrapper.table-mode td .badge,
 table.table-mode td .badge {
 font-size: 8px !important;
 padding: 1px 4px !important;
 }
 .table-wrapper.table-mode td a,
 table.table-mode td a,
 .table-wrapper.table-mode td span,
 table.table-mode td span {
 font-size: 10px !important;
 }
 .table-wrapper.table-mode td img,
 table.table-mode td img {
 max-width: 20px !important;
 max-height: 20px !important;
 }
 .table-wrapper.table-mode td .action-btns,
 table.table-mode td .action-btns {
 display: flex !important;
 gap: 2px !important;
 justify-content: flex-start !important;
 }
 .table-wrapper.table-mode td .action-btns .btn,
 table.table-mode td .action-btns .btn {
 font-size: 8px !important;
 padding: 2px 5px !important;
 min-width: auto !important;
 }
}

/* Переключатель режима таблицы (карточки/таблица) */
.table-view-toggle {
 display: none;
 align-items: center;
 gap: 8px;
 font-size: 11px;
 color: var(--text-secondary);
 white-space: nowrap;
 user-select: none;
}

.table-view-toggle .toggle-label {
 font-weight: 500;
 transition: color 0.2s;
}

.table-view-toggle .toggle-label.active {
 color: var(--text-primary);
 font-weight: 600;
}

.table-view-toggle .toggle-switch {
 position: relative;
 width: 44px;
 height: 22px;
 background: var(--border-color);
 border-radius: 11px;
 cursor: pointer;
 transition: background 0.3s;
 flex-shrink: 0;
}

.table-view-toggle .toggle-switch::after {
 content: '';
 position: absolute;
 top: 2px;
 left: 2px;
 width: 18px;
 height: 18px;
 background: var(--text-primary);
 border-radius: 50%;
 transition: transform 0.3s;
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.table-view-toggle .toggle-switch.active {
 background: var(--primary-color, #4f46e5);
}

.table-view-toggle .toggle-switch.active::after {
 background: #ffffff;
 transform: translateX(22px);
}

@media (max-width: 600px) {
 .table-view-toggle {
 display: flex !important;
 }
}

/* QR code text ID */
.qr-code-text {
 margin-top: 12px;
 padding: 8px 12px;
 background: #f3f4f6;
 border-radius: 8px;
 font-size: 13px;
 color: #4b5563;
 text-align: center;
 word-break: break-all;
 font-family: 'Courier New', Courier, monospace;
 letter-spacing: 1px;
}


/* 6-значный код верификации */
.verification-code-display {
 font-size: 42px;
 font-weight: 800;
 letter-spacing: 12px;
 text-align: center;
 padding: 20px 10px;
 background: linear-gradient(135deg, #1a1a2e, #16213e);
 border-radius: 16px;
 color: #4ade80;
 font-family: 'Courier New', Courier, monospace;
 box-shadow: 0 0 30px rgba(74, 222, 128, 0.3);
 text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
 margin: 10px 0;
}



/* Ссылки на документы в кабинете клиента */
.doc-links {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 padding: 16px 0;
}

.doc-link {
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 10px 12px;
 background: var(--card-bg, #fff);
 border: 1px solid var(--border-color, #e5e7eb);
 border-radius: 8px;
 color: var(--text-primary, #1f2937);
 text-decoration: none;
 font-size: 13px;
 transition: background 0.2s, border-color 0.2s;
}

.doc-link:hover {
 background: var(--hover-bg, #f3f4f6);
 border-color: var(--primary-color, #4f46e5);
}

@media (max-width: 480px) {
 .doc-links {
 grid-template-columns: 1fr;
 }
}


/* ===== DINOKAT FOUNDATION LAYER (Phase 1, non-breaking overrides) ===== */
:root {
 --dk-lime: #A3FF12;
 --dk-turquoise: #00C6B4;
 --dk-orange: #FF9F1C;
 --dk-yellow: #FFD93D;
 --dk-graphite: #2D2D2D;
 --dk-bg: #F8F9FB;
 --dk-white: #FFFFFF;

 --brand-text-primary: #2D2D2D;
 --brand-text-secondary: #5B6472;
 --brand-surface: #FFFFFF;
 --brand-surface-soft: #F8F9FB;

 --brand-font-head: 'Montserrat', 'Segoe UI', Arial, sans-serif;
 --brand-font-body: 'Montserrat', 'Segoe UI', Arial, sans-serif;

 --brand-space-1: 4px;
 --brand-space-2: 8px;
 --brand-space-3: 12px;
 --brand-space-4: 16px;
 --brand-space-5: 20px;
 --brand-space-6: 24px;
 --brand-space-8: 32px;

 --brand-r-sm: 12px;
 --brand-r-md: 18px;
 --brand-r-lg: 24px;
 --brand-r-xl: 32px;
 --brand-r-pill: 999px;

 --brand-shadow-soft: 0 8px 24px rgba(45,45,45,.08);
 --brand-shadow-card: 0 12px 30px rgba(45,45,45,.10);
 --brand-glow: 0 0 0 4px rgba(163,255,18,.22);

 --brand-logo-full: url('/img/brand/logo-full.svg');
 --brand-logo-one-line: url('/img/brand/logo-oneline.svg');
 --brand-logo-two-line: url('/img/brand/logo-twoline.svg');
 --brand-logo-mascot: url('/img/brand/mascot-icon.svg');
}

body {
 background: var(--dk-bg);
 color: var(--brand-text-primary);
 font-family: var(--brand-font-body);
}

h1,h2,h3,.header-title,.logo-subtitle {
 font-family: var(--brand-font-head);
}

.brand-surface {
 background: var(--brand-surface);
 border-radius: var(--brand-r-lg);
 box-shadow: var(--brand-shadow-soft);
}

.brand-gradient-bg {
 background: linear-gradient(135deg, rgba(163,255,18,.18), rgba(0,198,180,.14));
}

.brand-card {
 background: var(--brand-surface);
 border-radius: var(--brand-r-lg);
 box-shadow: var(--brand-shadow-card);
 padding: var(--brand-space-5);
}

.brand-chip {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 12px;
 border-radius: var(--brand-r-pill);
 background: rgba(0,198,180,.10);
 color: var(--dk-graphite);
 font-weight: 600;
 font-size: 12px;
}

.brand-button {
 border-radius: var(--brand-r-pill);
 min-height: 44px;
 font-weight: 700;
 transition: all .22s ease;
}
.brand-button--primary {
 background: linear-gradient(135deg, var(--dk-lime), #8DF000);
 color: #1D1D1D;
 box-shadow: 0 6px 18px rgba(163,255,18,.36);
}
.brand-button--secondary {
 background: #fff;
 color: var(--dk-graphite);
 border: 1px solid rgba(0,198,180,.28);
}
.brand-button:hover { transform: translateY(-1px); }

.brand-glow:focus,
.brand-button:focus,
input:focus,
select:focus,
textarea:focus {
 outline: none;
 box-shadow: var(--brand-glow);
}

.brand-logo {
 display: block;
 object-fit: contain;
 height: auto;
}
.brand-logo--full { width: min(260px, 68vw); }
.brand-logo--one-line { width: min(220px, 34vw); }
.brand-logo--two-line { width: min(158px, 40vw); }

.logo-safe { padding: 8px; }

/* Header/Auth logo strategy */
.header-logo img.logo-icon-sm-img {
 content: var(--brand-logo-one-line);
 width: 180px !important;
 max-width: 42vw !important;
 height: auto !important;
}
.login-logo img.logo-icon-img {
 width: 168px !important;
 max-width: 72vw !important;
 height: auto !important;
}

/* Mobile: switch to two-line mark in headers */
@media (max-width: 768px) {
 .header-logo img.logo-icon-sm-img {
 content: var(--brand-logo-two-line);
 width: 126px !important;
 max-width: 48vw !important;
 }
}

/* Cleaner premium family shell */
.top-bar, .sidebar, .card, .table-container, .modal-content {
 border-radius: var(--brand-r-md);
}
.sidebar, .top-bar { box-shadow: var(--brand-shadow-soft); }


/* ===== DINOKAT PHASE 2 REFINEMENT ===== */
.login-screen { background: radial-gradient(1200px 480px at 12% -10%, rgba(163,255,18,.20), transparent), radial-gradient(1000px 420px at 100% 0%, rgba(0,198,180,.18), transparent), var(--dk-bg); }
.login-card { border-radius: var(--brand-r-xl); box-shadow: 0 18px 48px rgba(45,45,45,.12); border: 1px solid rgba(0,0,0,.04); }
.auth-trust-chip { margin:10px auto 0; display:inline-flex; padding:8px 14px; border-radius:999px; background:rgba(0,198,180,.10); color:var(--dk-graphite); font-weight:700; font-size:12px; }

.sidebar-brand { padding: 14px 14px 8px; display:flex; justify-content:center; border-bottom:1px solid rgba(0,0,0,.06); margin-bottom:6px; }
.menu-item { border-radius: 14px; margin: 4px 8px; padding: 12px 12px; }
.menu-item.active { background: linear-gradient(135deg, rgba(163,255,18,.22), rgba(0,198,180,.15)); border: 1px solid rgba(0,198,180,.25); }

.dashboard-welcome { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.stat-card { border-radius: 18px; box-shadow: 0 8px 20px rgba(45,45,45,.08); border:1px solid rgba(0,0,0,.04); }

.cabinet-top-bar, .code-card, .stat-card, .tab-content, .doc-link { border-radius: 18px !important; }
.code-card { box-shadow: 0 12px 30px rgba(45,45,45,.09); border:1px solid rgba(0,0,0,.04); }
.code-refresh-btn, .cabinet-btn { border-radius: 999px !important; }

@media (max-width: 768px) {
 .header-title { display:none; }
 .dashboard-welcome { flex-direction:column; }
 .menu-item { min-height: 46px; }
}


/* ===== DINOKAT 2A POLISH ===== */
:root {
 --dk-touch: 44px;
}

.login-card { max-width: 440px; padding: 28px; }
.login-logo h1 { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: .2px; }
.auth-hero-subtitle { margin: 8px 0 0; color: var(--brand-text-secondary); font-size: 14px; line-height: 1.5; }
.login-form .form-group { margin-bottom: 14px; }
.login-form input, .login-form .btn { min-height: var(--dk-touch); }

.header { backdrop-filter: blur(10px); background: rgba(255,255,255,.86); border-bottom: 1px solid rgba(0,0,0,.06); }
.sidebar { background: #fff; }
.menu-item { min-height: var(--dk-touch); display: flex; align-items: center; gap: 10px; }
.menu-icon { width: 22px; text-align: center; }

#clientCabinet { max-width: 980px; margin: 0 auto; }
.cabinet-top-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.code-card h2 { font-size: 20px; line-height: 1.3; }
.code-refresh-btn { min-height: var(--dk-touch); padding: 0 16px; }
.stats-row { gap: 12px; }
.cabinet-btn { min-height: var(--dk-touch); }
.doc-link { min-height: var(--dk-touch); align-items: center; }

@media (max-width: 768px) {
 .login-card { max-width: 100%; margin: 10px; padding: 22px 16px; border-radius: 24px; }
 .header-right .btn { min-height: var(--dk-touch); }
 .cabinet-top-bar .brand-chip { order: 2; width: 100%; justify-content: center; }
 .cabinet-top-bar .logo-row { order: 1; }
 .cabinet-top-bar > div:last-child { order: 3; margin-left: auto; }
 .code-card { padding: 16px; }
}


/* ===== DINOKAT 2B DASHBOARD ===== */


/* auth hero image replacement */
.auth-hero-image {
 display:block;
 width:min(300px, 86vw);
 max-width:100%;
 height:auto;
 margin: 4px auto 8px;
}


/* auth contrast fix for hero logo */
.login-card {
 background: #ffffff !important;
 border: 1px solid rgba(45,45,45,.10) !important;
 box-shadow: 0 22px 52px rgba(45,45,45,.16) !important;
}
.login-logo {
 background: linear-gradient(180deg, rgba(248,249,251,.95), rgba(255,255,255,.98));
 border-radius: 20px;
 padding: 14px 12px 10px;
}
.auth-hero-image {
 width: min(340px, 90vw) !important;
 filter: drop-shadow(0 2px 6px rgba(0,0,0,.10));
}
.logo-subtitle { color: #4b5563 !important; }


/* auth page light background fix */
.login-screen {
 background: #FFFFFF !important;
}

/* auth page final white override */
body #loginScreen.login-screen { background: #FFFFFF !important; }


/* brand map canonical usage */
:root {
 --brand-logo-full: url('/img/brand/logo-full.svg');
 --brand-logo-one-line: url('/img/brand/logo-oneline.svg');
 --brand-logo-two-line: url('/img/brand/logo-twoline.svg');
 --brand-logo-mascot: url('/img/brand/mascot-icon.svg');
 --brand-logo-favicon: url('/img/brand/favicon.svg');
}

/* desktop header -> one-line */
.header-logo img.logo-icon-sm-img { content: var(--brand-logo-one-line); }
/* mobile header/sidebar -> two-line */
@media (max-width: 768px) {
 .header-logo img.logo-icon-sm-img { content: var(--brand-logo-two-line); }
}
/* auth -> full logo */
.login-logo .auth-hero-image,
.login-logo .brand-logo--full { width: min(340px, 90vw) !important; }


/* ===== DINOKAT FULL REDESIGN WAVE (global ui polish) ===== */
:root {
 --dk-page-max: 1240px;
 --dk-gap: 14px;
}

/* global shell */
.content { padding: 20px !important; }
.content > * { max-width: var(--dk-page-max); margin-left: auto; margin-right: auto; }
.page-header { margin-bottom: 14px; }
.page-header h2 { font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; letter-spacing: .2px; color: var(--dk-graphite); }

/* cards/tables/forms */
.card, .table-container, .modal-content, .tx-item, .achievement-item, .child-card {
 background: #fff;
 border: 1px solid rgba(45,45,45,.07);
 border-radius: 20px !important;
 box-shadow: 0 10px 24px rgba(45,45,45,.08);
}
.card-header { padding: 16px 18px 10px; }
.card-body, .card-content { padding: 16px 18px 18px; }
.table-wrapper, table { border-radius: 16px; overflow: hidden; }

table thead th {
 background: #f7fafb;
 color: #5b6472;
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: .02em;
 border-bottom: 1px solid rgba(45,45,45,.08);
}
table tbody tr:hover { background: rgba(0,198,180,.05); }

.form-control, input, select, textarea {
 min-height: 44px;
 border-radius: 14px !important;
 border: 1px solid rgba(45,45,45,.15) !important;
 background: #fff;
}
.btn { min-height: 44px; border-radius: 999px !important; font-weight: 700; }
.btn-primary {
 background: linear-gradient(135deg, var(--dk-lime), #90f40c) !important;
 color: #1f2937 !important;
 border: 0 !important;
}
.btn-outline { border-color: rgba(0,198,180,.35) !important; color: var(--dk-graphite) !important; }

/* loyalty / progress / stats */
.sub-card {
 background: linear-gradient(135deg, var(--dk-turquoise), #23d9c8 58%, var(--dk-lime));
 box-shadow: 0 14px 30px rgba(0,198,180,.24);
}
.sub-card .sub-trips { letter-spacing: .2px; }
.sub-card .sub-progress { background: rgba(255,255,255,.32); }
.sub-card .sub-progress-bar { background: #fff; }
.stat-card .stat-value { color: var(--dk-graphite); }

/* qr emphasis */
.code-card {
 border: 1px solid rgba(0,198,180,.24) !important;
 box-shadow: 0 16px 34px rgba(0,198,180,.15) !important;
}
#clientCodeText {
 border: 2px solid rgba(255,255,255,.55);
 box-shadow: 0 10px 24px rgba(16,185,129,.30);
}

/* navigation polish */
.sidebar { border-right: 1px solid rgba(45,45,45,.06); }
.menu-item { font-weight: 600; }
.menu-item.active {
 background: linear-gradient(135deg, rgba(163,255,18,.22), rgba(0,198,180,.14)) !important;
 border: 1px solid rgba(0,198,180,.25);
}

/* empty states */
.empty-state {
 border: 1px dashed rgba(0,198,180,.35);
 border-radius: 18px;
 background: linear-gradient(180deg, #fbffff, #f9fffb);
 color: #4b5563;
 padding: 20px;
}
.empty-icon { font-size: 32px; }

/* mobile-first */
@media (max-width: 1024px) {
 .content { padding: 14px !important; }
}
@media (max-width: 768px) {
 .header-right { gap: 6px; }
 .header-right .btn { min-height: 40px; padding: 8px 12px; }
 .card, .table-container, .modal-content { border-radius: 16px !important; }
 table thead { display: none; }
 table, tbody, tr, td { display: block; width: 100%; }
 tbody tr { margin-bottom: 10px; border: 1px solid rgba(45,45,45,.08); border-radius: 14px; padding: 8px 10px; }
 td { display:flex; justify-content:space-between; gap:8px; padding:8px 2px; border-bottom: 1px dashed rgba(45,45,45,.08); }
 td:last-child { border-bottom: 0; }
 td::before { content: attr(data-label); font-weight: 700; color: #6b7280; }
}
@media (max-width: 430px) {
 .page-header h2 { font-size: 24px; }
 .btn, .form-control, input, select, textarea { min-height: 44px; }
}


/* ===== DINOKAT PHASE 3/4 SECTION POLISH ===== */
.dk-section-head {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 margin-bottom:14px;
}
.dk-section-card {
 border:1px solid rgba(45,45,45,.07);
 box-shadow:0 10px 24px rgba(45,45,45,.08);
 border-radius:20px !important;
}
.dk-table-wrap { border-radius: 16px; overflow: hidden; }
.dk-empty-state {
 border: 1px dashed rgba(0,198,180,.35);
 background: linear-gradient(180deg,#fbffff,#f9fffb);
}

/* reward/qr helpers */
.reward-journey, .loyalty-journey {
 background: linear-gradient(135deg, rgba(0,198,180,.12), rgba(163,255,18,.12));
 border: 1px solid rgba(0,198,180,.22);
 border-radius: 18px;
 padding: 14px;
}
.qr-focus-card {
 border: 1px solid rgba(0,198,180,.30);
 box-shadow: 0 12px 30px rgba(0,198,180,.18);
 border-radius: 18px;
}

@media (max-width: 768px) {
 .dk-section-head { align-items:flex-start; flex-direction:column; }
 .dk-section-head .btn { width:100%; }
}


/* ===== DINOKAT LOGO PLACEMENT FINAL PASS ===== */
:root {
 --logo-safe-space: 12px;
 --logo-header-desktop-h: 34px;
 --logo-header-mobile-h: 30px;
 --logo-auth-max-w: 320px;
 --logo-sidebar-max-w: 152px;
}

/* Auth: full logo hero */
.login-logo {
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:8px;
 padding:16px;
}
.login-logo .auth-hero-image,
.login-logo .brand-logo--full {
 width:min(var(--logo-auth-max-w), 86vw) !important;
 height:auto !important;
 margin: 0 auto !important;
}

/* Header: one-line desktop */
.header-logo {
 padding: var(--logo-safe-space);
 display:flex;
 align-items:center;
}
.header-logo img.logo-icon-sm-img,
.header-logo .brand-logo--one-line {
 height: var(--logo-header-desktop-h) !important;
 width: auto !important;
 max-width: 220px !important;
}

/* Sidebar: two-line */
.sidebar-brand {
 padding: 16px 12px 10px;
}
.sidebar-brand .brand-logo--two-line {
 max-width: var(--logo-sidebar-max-w) !important;
 width: 100%;
 height: auto;
}

/* Cabinet top */
.cabinet-top-bar .logo-row {
 display:flex;
 align-items:center;
 gap: 0;
 padding: var(--logo-safe-space) 0;
}
.cabinet-top-bar .logo-row .brand-logo--one-line,
.cabinet-top-bar .logo-row .brand-logo--two-line {
 height: 38px !important;
 width:auto !important;
 max-width: 210px;
}

/* mascot utility ready for empty states */
.brand-mascot {
 width: 72px;
 height: 72px;
 object-fit: contain;
}

@media (max-width: 768px) {
 .header-logo img.logo-icon-sm-img,
 .header-logo .brand-logo--one-line,
 .header-logo .brand-logo--two-line {
 height: var(--logo-header-mobile-h) !important;
 max-width: 150px !important;
 }
 .sidebar-brand .brand-logo--two-line { max-width: 132px !important; }
 .login-logo .auth-hero-image,
 .login-logo .brand-logo--full { width:min(290px, 88vw) !important; }
 .cabinet-top-bar .logo-row .brand-logo--one-line,
 .cabinet-top-bar .logo-row .brand-logo--two-line { height: 34px !important; max-width: 170px !important; }
}


/* ===== DINOKAT FINAL POLISH LAYER ===== */
:root {
 --dk-radius-sm: 12px;
 --dk-radius-md: 16px;
 --dk-radius-lg: 20px;
}

/* section rhythm */
.page-header { margin-bottom: 16px !important; }
.page-header h2 { margin: 0 !important; line-height: 1.2; }
.card + .card, .table-container + .card, .card + .table-container { margin-top: 14px; }

/* better controls */
.btn, .action-btn {
 transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover, .action-btn:hover {
 transform: translateY(-1px);
 box-shadow: 0 8px 18px rgba(45,45,45,.12);
}
.btn:active, .action-btn:active { transform: translateY(0); }
.btn:disabled, .action-btn:disabled {
 opacity: .55;
 cursor: not-allowed;
 box-shadow: none;
}

/* focus states */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
 outline: 3px solid rgba(0,198,180,.25);
 outline-offset: 2px;
}

/* table readability */
table td, table th { vertical-align: middle; }
table td.actions { white-space: nowrap; }
.badge { border-radius: 999px; }

/* modals */
.modal-content {
 border-radius: var(--dk-radius-lg) !important;
 border: 1px solid rgba(45,45,45,.08);
}
.modal-header { border-bottom: 1px solid rgba(45,45,45,.08); }
.modal-footer { border-top: 1px solid rgba(45,45,45,.08); }

/* legal readability */
main p, article p, .content p { line-height: 1.7; }
main ul, article ul, .content ul { padding-left: 20px; }
main li, article li, .content li { margin: 6px 0; }

/* small mobile tune */
@media (max-width: 430px) {
 .page-header { gap: 10px; }
 .page-header .btn { width: 100%; }
 .badge { font-size: 11px; padding: 4px 8px; }
}


/* auth logo pair: mascot left + wordmark right */
.auth-brand-row {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 12px;
 width: 100%;
 margin: 0 auto 6px;
}
.auth-brand-mascot {
 width: clamp(52px, 8vw, 74px);
 height: auto;
 object-fit: contain;
 flex: 0 0 auto;
}
.auth-brand-row .auth-hero-image {
 width: min(300px, 72vw) !important;
 max-width: 100%;
 height: auto !important;
 margin: 0 !important;
}
@media (max-width: 480px) {
 .auth-brand-row { gap: 10px; }
 .auth-brand-mascot { width: clamp(44px, 14vw, 58px); }
 .auth-brand-row .auth-hero-image { width: min(250px, 66vw) !important; }
}


/* auth single logo: logo_club_full */
.auth-single-logo {
 display:block;
 width:min(240px, 66vw);
 max-width:100%;
 height:auto;
 margin:0 auto 8px;
}
@media (max-width: 480px){
 .auth-single-logo { width:min(210px, 62vw); }
}


/* client cabinet brand: logo_club_full */
.cabinet-top-bar .logo-row img[src*="logo-club-full.svg"] {
 height: 52px !important;
 width: auto !important;
 max-width: 320px;
}
@media (max-width: 768px){
 .cabinet-top-bar .logo-row img[src*="logo-club-full.svg"] { height: 44px !important; max-width: 250px; }
}
#clientCabinet .cabinet-top-bar {
 justify-content: center !important;
 text-align: center;
}
#clientCabinet .cabinet-top-bar .logo-row {
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}
#clientCabinet .cabinet-top-bar .logo-row img[src*="logo-club-full.svg"] {
 width: min(100%, 680px) !important;
 max-width: 100%;
 height: auto !important;
 display: block;
 margin: 0 auto;
}
@media (max-width: 768px){
 #clientCabinet .cabinet-top-bar .logo-row img[src*="logo-club-full.svg"] {
 width: min(100%, 92vw) !important;
 height: auto !important;
 }

}

/* ===== client cabinet buttons redesign ===== */
#clientCabinet .cabinet-btn,
#clientCabinet .code-refresh-btn,
#clientCabinet .logout-btn,
#clientCabinet .doc-link,
#clientCabinet .cabinet-tab,
#clientCabinet .btn,
#clientCabinet button {
 border-radius: 14px !important;
 border: 1px solid rgba(16, 185, 129, 0.28) !important;
 background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(244,255,250,0.96) 100%) !important;
 color: #0f172a !important;
 box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(16, 185, 129, 0.12) !important;
 transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
 font-weight: 600 !important;
}

#clientCabinet .cabinet-btn,
#clientCabinet .code-refresh-btn,
#clientCabinet .logout-btn,
#clientCabinet .btn,
#clientCabinet button {
 min-height: 46px;
 padding: 11px 16px !important;
}

#clientCabinet .doc-link,
#clientCabinet .cabinet-tab {
 min-height: 44px;
 display: inline-flex !important;
 align-items: center;
 justify-content: center;
 text-decoration: none !important;
}

#clientCabinet .cabinet-tab.active,
#clientCabinet .btn-primary,
#clientCabinet .code-refresh-btn {
 background: linear-gradient(135deg, #10b981 0%, #84cc16 100%) !important;
 color: #ffffff !important;
 border-color: rgba(5, 150, 105, 0.42) !important;
 box-shadow: 0 10px 24px rgba(16, 185, 129, 0.32) !important;
}

#clientCabinet .cabinet-btn:hover,
#clientCabinet .code-refresh-btn:hover,
#clientCabinet .logout-btn:hover,
#clientCabinet .doc-link:hover,
#clientCabinet .cabinet-tab:hover,
#clientCabinet .btn:hover,
#clientCabinet button:hover {
 transform: translateY(-1px);
 box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12), 0 5px 14px rgba(16, 185, 129, 0.16) !important;
 border-color: rgba(16, 185, 129, 0.44) !important;
}

#clientCabinet .cabinet-btn:active,
#clientCabinet .code-refresh-btn:active,
#clientCabinet .logout-btn:active,
#clientCabinet .doc-link:active,
#clientCabinet .cabinet-tab:active,
#clientCabinet .btn:active,
#clientCabinet button:active {
 transform: translateY(0);
 filter: brightness(.98);
}

body.dark-theme #clientCabinet .cabinet-btn,
body.dark-theme #clientCabinet .code-refresh-btn,
body.dark-theme #clientCabinet .logout-btn,
body.dark-theme #clientCabinet .doc-link,
body.dark-theme #clientCabinet .cabinet-tab,
body.dark-theme #clientCabinet .btn,
body.dark-theme #clientCabinet button {
 background: linear-gradient(180deg, rgba(30,41,59,.95) 0%, rgba(15,23,42,.95) 100%) !important;
 border-color: rgba(132, 204, 22, 0.30) !important;
 color: #e5e7eb !important;
 box-shadow: 0 10px 26px rgba(0,0,0,.38), 0 4px 10px rgba(132, 204, 22, .14) !important;
}

body.dark-theme #clientCabinet .cabinet-tab.active,
body.dark-theme #clientCabinet .btn-primary,
body.dark-theme #clientCabinet .code-refresh-btn {
 background: linear-gradient(135deg, #22c55e 0%, #84cc16 100%) !important;
 color: #052e16 !important;
}

@media (max-width: 600px) {
 #clientCabinet .cabinet-btn,
 #clientCabinet .code-refresh-btn,
 #clientCabinet .logout-btn,
 #clientCabinet .doc-link,
 #clientCabinet .cabinet-tab,
 #clientCabinet .btn,
 #clientCabinet button {
 border-radius: 12px !important;
 min-height: 44px;
 }
}


.dk-icon {
 width: 20px;
 height: 20px;
 flex: 0 0 auto;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: currentColor;
}
.dk-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dk-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: currentColor;
}

.dk-nav-icon {
  opacity: 0.85;
}

.dk-icon svg { width: 100%; height: 100%; display: block; }
.dk-btn .dk-icon { margin-inline-start: -2px; }
.dk-icon--sm { width: 16px; height: 16px; }
.dk-icon--lg { width: 24px; height: 24px; }

/* ===== ADMIN-DESIGN-2B: Header logo ===== */
.header-logo-img {
  height: 36px;
  width: auto;
  display: block;
}

/* ===== ADMIN-DESIGN-2B: Sidebar modern ===== */
.sidebar {
  padding-top: 8px;
}

.sidebar-menu {
  gap: 1px;
  padding: 0 8px;
}

.menu-item {
  padding: 10px 14px;
  border-radius: 8px;
  border-left: none;
  gap: 12px;
  font-size: 14px;
}

.menu-item:hover {
  background: var(--gray-100);
}

.menu-item.active {
  background: rgba(163, 255, 18, 0.15);
  border-left: none;
  color: var(--primary);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(163, 255, 18, 0.3);
}

body.dark-theme .menu-item.active {
  background: rgba(163, 255, 18, 0.12);
  box-shadow: inset 0 0 0 1px rgba(163, 255, 18, 0.2);
}

body.dark-theme .menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Sidebar footer */
.sidebar-footer {
  padding: 4px 8px;
  margin-top: auto;
}

.sidebar-footer .menu-item {
  border-radius: 8px;
  padding: 10px 14px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .header-logo-img {
    height: auto;
  }
}

@media (max-width: 480px) {
  .header-logo-img {
    height: auto;
  }
}

/* ===== ADMIN-DESIGN-2C: Header logo enlarged ===== */
.header-logo-img {
  width: 200px;
  height: auto;
  display: block;
}

/* ===== ADMIN-DESIGN-2E: Logo safe area ===== */
.header-logo {
  padding: 8px 0 8px 20px;
}

/* ===== ADMIN-DESIGN-2C: Sidebar group labels ===== */
.sidebar-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
  padding: 16px 14px 6px;
  color: var(--gray-600);
  user-select: none;
}

.sidebar-group-label:first-child {
  padding-top: 4px;
}

body.dark-theme .sidebar-group-label {
  color: var(--gray-400);
}

/* ===== ADMIN-DESIGN-2C: Sidebar modern v2 ===== */
.menu-item {
  padding: 10px 14px;
  border-radius: 10px;
  border-left: none;
  gap: 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.menu-item:hover {
  background: rgba(163, 255, 18, 0.08);
}

.menu-item.active {
  background: rgba(163, 255, 18, 0.15);
  border-left: none;
  color: var(--primary);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(163, 255, 18, 0.3);
}

body.dark-theme .menu-item.active {
  background: rgba(163, 255, 18, 0.12);
  box-shadow: inset 0 0 0 1px rgba(163, 255, 18, 0.2);
}

body.dark-theme .menu-item:hover {
  background: rgba(163, 255, 18, 0.08);
}

/* Sidebar footer */
.sidebar-footer {
  padding: 4px 8px;
  margin-top: auto;
}

.sidebar-footer .menu-item {
  border-radius: 10px;
  padding: 10px 14px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .header-logo-img {
    width: 170px;
    height: auto;
  }
  .header-logo {
    padding: 8px 0 8px 12px;
  }
}

@media (max-width: 480px) {
  .header-logo-img {
    width: 160px;
    height: auto;
  }
  .header-logo {
    padding: 8px 0 8px 10px;
  }
}


/* ===== ADMIN-DESIGN-3A: Dashboard Cards Redesign ===== */

/* --- KPI Grid --- */
.dk-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.dk-kpi-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 80px;
}

.dk-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

.dk-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #e8f5e9;
}

.dk-kpi-svg {
  width: 20px;
  height: 20px;
  stroke: #1DBA74;
}

.dk-kpi-card[data-icon="users"] .dk-kpi-icon { background: #e3f2fd; }
.dk-kpi-card[data-icon="users"] .dk-kpi-svg { stroke: #1565c0; }

.dk-kpi-card[data-icon="route"] .dk-kpi-icon { background: #e8f5e9; }
.dk-kpi-card[data-icon="route"] .dk-kpi-svg { stroke: #1DBA74; }

.dk-kpi-card[data-icon="gift"] .dk-kpi-icon { background: #fce4ec; }
.dk-kpi-card[data-icon="gift"] .dk-kpi-svg { stroke: #e91e63; }

.dk-kpi-card[data-icon="ticket"] .dk-kpi-icon { background: #fff3e0; }
.dk-kpi-card[data-icon="ticket"] .dk-kpi-svg { stroke: #ff6f00; }

.dk-kpi-card[data-icon="star"] .dk-kpi-icon { background: #fff8e1; }
.dk-kpi-card[data-icon="star"] .dk-kpi-svg { stroke: #f9a825; }

.dk-kpi-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dk-kpi-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  color: #17233A;
}

.dk-kpi-label {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

/* --- Section --- */
.dk-section {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
}

.dk-section-header {
  margin-bottom: 10px;
}

.dk-section-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #17233A;
  margin: 0;
}

/* --- Rating List (Top Points) --- */
.dk-rating-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dk-rating-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #F5F7FA;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.dk-rating-item:hover {
  background: #eef1f5;
}

.dk-rating-pos {
  font-size: 14px;
  font-weight: 800;
  color: #1DBA74;
  min-width: 28px;
}

.dk-rating-item:first-child .dk-rating-pos {
  color: #f59e0b;
  font-size: 16px;
}

.dk-rating-item:nth-child(2) .dk-rating-pos {
  color: #6b7280;
}

.dk-rating-item:nth-child(3) .dk-rating-pos {
  color: #b45309;
}

.dk-rating-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8f5e9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dk-rating-svg {
  width: 16px;
  height: 16px;
  stroke: #1DBA74;
}

.dk-rating-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dk-rating-name {
  font-size: 14px;
  font-weight: 600;
  color: #17233A;
}

.dk-rating-stat {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

/* --- Actions Grid --- */
.dk-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.dk-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 12px;
  background: #F5F7FA;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: inherit;
}

.dk-action-card:hover {
  background: #e8f5e9;
  border-color: #1DBA74;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(29,186,116,0.15);
}

.dk-action-card:active {
  transform: translateY(0);
}

.dk-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.dk-action-svg {
  width: 18px;
  height: 18px;
  stroke: #1DBA74;
}

.dk-action-label {
  font-size: 13px;
  font-weight: 600;
  color: #17233A;
}

/* --- Mobile: KPI --- */
@media (max-width: 768px) {
  .dk-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .dk-kpi-card {
    padding: 10px 12px;
    min-height: 72px;
  }
  .dk-kpi-icon {
    width: 32px;
    height: 32px;
  }
  .dk-kpi-svg {
    width: 14px;
    height: 14px;
  }
  .dk-kpi-value {
    font-size: 20px;
  }
  .dk-kpi-label {
    font-size: 11px;
  }
  .dk-actions-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .dk-action-card {
    padding: 10px 8px;
  }
  .dk-action-icon {
    width: 28px;
    height: 28px;
  }
  .dk-action-svg {
    width: 12px;
    height: 12px;
  }
  .dk-action-label {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .dk-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .dk-kpi-card {
    padding: 8px 10px;
    min-height: 64px;
    gap: 8px;
  }
  .dk-kpi-icon {
    width: 32px;
    height: 32px;
  }
  .dk-kpi-svg {
    width: 14px;
    height: 14px;
  }
  .dk-kpi-value {
    font-size: 14px;
  }
  .dk-kpi-label {
    font-size: 10px;
  }
  .dk-actions-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  .dk-action-card {
    padding: 6px 4px;
    border-radius: 6px;
  }
  .dk-action-icon {
    width: 28px;
    height: 28px;
  }
  .dk-action-svg {
    width: 12px;
    height: 12px;
  }
  .dk-action-label {
    font-size: 10px;
  }
  .dk-section {
    padding: 14px;
  }
  .dk-rating-item {
    padding: 10px 12px;
  }
}

@media (max-width: 390px) {
  .dk-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .dk-kpi-card {
    padding: 6px 8px;
    min-height: 56px;
    gap: 6px;
  }
  .dk-kpi-icon {
    width: 28px;
    height: 28px;
  }
  .dk-kpi-svg {
    width: 14px;
    height: 14px;
  }
  .dk-kpi-value {
    font-size: 14px;
  }
  .dk-kpi-label {
    font-size: 9px;
  }
  .dk-actions-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
  }
  .dk-action-card {
    padding: 6px 4px;
    border-radius: 6px;
  }
  .dk-action-icon {
    width: 24px;
    height: 24px;
  }
  .dk-action-svg {
    width: 12px;
    height: 12px;
  }
  .dk-action-label {
    font-size: 9px;
  }
}


/* ===== ADMIN-DESIGN-4A: Operation type badges ===== */
.dk-op-badge {
 display: inline-block;
 padding: 3px 10px;
 border-radius: 20px;
 font-size: 12px;
 font-weight: 600;
 line-height: 1.4;
 white-space: nowrap;
}

.dk-op-badge--achievement {
 background: rgba(255, 193, 7, 0.15);
 color: #b8860b;
}
body.dark-theme .dk-op-badge--achievement {
 background: rgba(255, 193, 7, 0.12);
 color: #ffd700;
}

.dk-op-badge--ride {
 background: rgba(0, 200, 150, 0.12);
 color: #008060;
}
body.dark-theme .dk-op-badge--ride {
 background: rgba(0, 200, 150, 0.1);
 color: #00c896;
}

.dk-op-badge--points {
 background: rgba(33, 150, 243, 0.12);
 color: #1565c0;
}
body.dark-theme .dk-op-badge--points {
 background: rgba(33, 150, 243, 0.1);
 color: #64b5f6;
}

.dk-op-badge--subscription {
 background: rgba(255, 152, 0, 0.15);
 color: #c77600;
}
body.dark-theme .dk-op-badge--subscription {
 background: rgba(255, 152, 0, 0.12);
 color: #ffb74d;
}

.dk-op-badge--neutral {
 background: rgba(128, 128, 128, 0.1);
 color: #666;
}
body.dark-theme .dk-op-badge--neutral {
 background: rgba(128, 128, 128, 0.08);
 color: #aaa;
}

/* Mobile: allow badge to wrap in cards */
@media (max-width: 480px) {
 .dk-op-badge {
 font-size: 11px;
 padding: 2px 8px;
 }
}
@media (max-width: 390px) {
 .dk-op-badge {
 font-size: 10px;
 padding: 2px 6px;
 }
}

/* ===== ADMIN-DESIGN-5A: Client action buttons ===== */
.dk-action-btns {
 display: flex;
 gap: 6px;
 align-items: center;
}

.dk-action-btn {
 width: 36px;
 height: 36px;
 border: none;
 border-radius: 10px;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s ease;
 background: transparent;
 color: var(--gray-500);
 padding: 0;
 position: relative;
}

.dk-action-btn:hover {
 background: rgba(163, 255, 18, 0.12);
}

.dk-action-btn svg {
 width: 18px;
 height: 18px;
}

.dk-action-btn--view { color: #10b981; }
.dk-action-btn--edit { color: #6366f1; }
.dk-action-btn--history { color: #f59e0b; }

/* Tooltip */
.dk-action-btn[title]:hover::after {
 content: attr(title);
 position: absolute;
 bottom: calc(100% + 6px);
 left: 50%;
 transform: translateX(-50%);
 background: #1f2937;
 color: white;
 font-size: 11px;
 padding: 4px 8px;
 border-radius: 6px;
 white-space: nowrap;
 pointer-events: none;
 z-index: 100;
}

/* ===== Badges ===== */
.dk-badge {
 display: inline-block;
 padding: 4px 12px;
 border-radius: 20px;
 font-size: 13px;
 font-weight: 700;
 line-height: 1.4;
}

.dk-badge--points {
 background: #ecfdf5;
 color: #065f46;
}

.dk-badge--trips {
 background: #e3f2fd;
 color: #1565c0;
}

/* ===== Subscription progress pill ===== */
.dk-sub-pill {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-width: 100px;
}

.dk-sub-pill__label {
 font-size: 13px;
 font-weight: 600;
 color: var(--text-primary);
 white-space: nowrap;
}

.dk-sub-pill__bar {
 flex: 1;
 height: 6px;
 background: #e5e7eb;
 border-radius: 3px;
 overflow: hidden;
 min-width: 40px;
}

.dk-sub-pill__fill {
 height: 100%;
 background: #10b981;
 border-radius: 3px;
 transition: width 0.3s ease;
}

/* ===== Client row hover ===== */
.dk-client-row:hover {
 background: #f8faf8;
}

/* ===== Mobile client cards ===== */
.dk-client-cards {
 display: none;
}

@media (max-width: 768px) {
 .dk-client-cards {
 display: flex;
 flex-direction: column;
 gap: 12px;
 padding: 12px 0;
 }

 .dk-client-card {
 background: var(--bg-card);
 border: 1px solid var(--gray-200);
 border-radius: 12px;
 padding: 16px;
 }

 .dk-client-card__header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 12px;
 }

 .dk-client-card__name {
 font-size: 16px;
 font-weight: 600;
 color: var(--text-primary);
 }

 .dk-client-card__id {
 font-size: 12px;
 color: var(--gray-500);
 background: var(--gray-100);
 padding: 2px 8px;
 border-radius: 6px;
 }

 .dk-client-card__body {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-bottom: 12px;
 }

 .dk-client-card__row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 }

 .dk-client-card__label {
 font-size: 13px;
 color: var(--gray-500);
 }

 .dk-client-card__value {
 font-size: 14px;
 font-weight: 500;
 color: var(--text-primary);
 }

 .dk-client-card__actions {
 display: flex;
 gap: 8px;
 justify-content: center;
 padding-top: 12px;
 border-top: 1px solid var(--gray-100);
 }
}

/* Dark theme overrides */
body.dark-theme .dk-badge--points {
 background: rgba(16, 185, 129, 0.2);
 color: #6ee7b7;
}

body.dark-theme .dk-badge--trips {
 background: rgba(59, 130, 246, 0.2);
 color: #93c5fd;
}

body.dark-theme .dk-sub-pill__bar {
 background: #374151;
}

body.dark-theme .dk-client-row:hover {
 background: rgba(255, 255, 255, 0.03);
}

body.dark-theme .dk-client-card {
 border-color: #374151;
}

body.dark-theme .dk-client-card__id {
 background: #374151;
 color: #9ca3af;
}

body.dark-theme .dk-action-btn:hover {
 background: rgba(163, 255, 18, 0.08);
}


/* ===== ADMIN-DESIGN-6A: Location cards ===== */
.dk-location-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
 padding: 0;
}

.dk-location-grid--single {
 grid-template-columns: minmax(0, 480px);
 justify-content: center;
}
.dk-location-card {
 background: var(--bg-card);
 border: 1px solid var(--gray-200);
 border-radius: 16px;
 padding: 20px;
 transition: box-shadow 0.2s ease, border-color 0.2s ease;
 display: flex;
 flex-direction: column;
}

.dk-location-card__body {
 flex: 1;
}

.dk-location-card:hover {
 border-color: var(--gray-300);
 box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.dk-location-card__header {
 margin-bottom: 16px;
}

.dk-location-card__title-row {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 8px;
 margin-bottom: 4px;
}

.dk-location-card__name {
 font-size: 18px;
 font-weight: 600;
 color: var(--text-primary);
 margin: 0;
}

.dk-location-card__city {
 font-size: 14px;
 color: var(--gray-500);
}

.dk-location-card__status {
 display: inline-block;
 padding: 3px 10px;
 border-radius: 20px;
 font-size: 12px;
 font-weight: 600;
 white-space: nowrap;
 flex-shrink: 0;
}

.dk-location-card__status--active {
 background: #ecfdf5;
 color: #065f46;
}

.dk-location-card__status--inactive {
 background: #f3f4f6;
 color: #6b7280;
}

.dk-location-card__body {
 margin-bottom: 16px;
}

.dk-location-card__info {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.dk-location-card__info-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dk-info-icon {
  flex-shrink: 0;
  color: var(--gray-400);
}

.dk-location-card__info-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.dk-location-card__actions {
 display: flex;
 gap: 6px;
 justify-content: flex-end;
 padding-top: 12px;
 border-top: 1px solid var(--gray-100);
}

/* Operators badge */
.dk-badge--operators {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 background: #f3f4f6;
 color: #374151;
 padding: 3px 10px;
 border-radius: 20px;
 font-size: 13px;
 font-weight: 600;
}

.dk-badge--operators svg {
 width: 14px;
 height: 14px;
}

/* Action button colors for locations */
.dk-action-btn--delete { color: #ef4444; }

/* Mobile */
@media (max-width: 768px) {
 .dk-location-grid {
 grid-template-columns: 1fr;
 gap: 12px;
 }

 .dk-location-card {
 padding: 16px;
 }

 .dk-location-card__name {
 font-size: 16px;
 }
}

/* Dark theme */
body.dark-theme .dk-location-card {
 border-color: #374151;
}

body.dark-theme .dk-location-card:hover {
 border-color: #4b5563;
 box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

body.dark-theme .dk-location-card__status--active {
 background: rgba(16, 185, 129, 0.2);
 color: #6ee7b7;
}

body.dark-theme .dk-location-card__status--inactive {
 background: rgba(107, 114, 128, 0.2);
 color: #9ca3af;
}

body.dark-theme .dk-badge--operators {
 background: rgba(107, 114, 128, 0.2);
 color: #d1d5db;
}


/* ===== ADMIN-DESIGN-8B: Модалка редактирования точки ===== */

/* 2 колонки на desktop */
.dk-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .dk-form-row-2 {
    grid-template-columns: 1fr;
  }
}

/* Режим работы с подписями */
.dk-hours-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.dk-hours-field {
  flex: 1;
  min-width: 0;
}

.dk-hours-label {
  display: block;
  font-size: 12px;
  color: var(--gray-500, #6b7280);
  margin-bottom: 4px;
}

.dk-hours-sep {
  color: var(--gray-400, #9ca3af);
  font-weight: bold;
  padding-bottom: 8px;
}

/* Мета-информация */
.dk-meta-row {
  display: flex;
  gap: 24px;
  padding: 10px 0;
  margin-bottom: 8px;
  border-top: 1px solid var(--gray-200, #e5e7eb);
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.dk-meta-item {
  font-size: 13px;
  color: var(--gray-500, #6b7280);
}

.dk-meta-item strong {
  color: var(--text-color, #111827);
}

/* Список операторов */
.dk-operator-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dk-badge--operator {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--gray-100, #f3f4f6);
  color: var(--text-color, #111827);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.dk-empty-hint {
  font-size: 13px;
  color: var(--gray-400, #9ca3af);
}

/* Кнопки: Отмена | Сохранить */
.dk-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200, #e5e7eb);
  margin-top: 4px;
}

.dk-form-actions .btn {
  min-width: 120px;
}

/* Dark theme */
body.dark-theme .dk-meta-row {
  border-color: #374151;
}

body.dark-theme .dk-meta-item {
  color: #9ca3af;
}

body.dark-theme .dk-meta-item strong {
  color: #e5e7eb;
}

body.dark-theme .dk-badge--operator {
  background: rgba(107, 114, 128, 0.2);
  color: #d1d5db;
}

body.dark-theme .dk-form-actions {
  border-color: #374151;
}

body.dark-theme .dk-hours-label {
  color: #9ca3af;
}

body.dark-theme .dk-hours-sep {
  color: #6b7280;
}

body.dark-theme .dk-empty-hint {
  color: #6b7280;
}

/* ===== ADMIN-DESIGN-9D: Manager Edit Modal ===== */

/* --- Manager Header --- */
.dk-manager-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
  border-radius: 14px;
  margin-bottom: 20px;
  border: 1px solid rgba(99, 102, 241, 0.12);
}

.dk-manager-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.dk-manager-brief {
  flex: 1;
  min-width: 0;
}

.dk-manager-brief-name {
  font-size: 18px;
  font-weight: 700;
  color: #17233A;
  margin: 0 0 2px 0;
}

.dk-manager-brief-phone {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 6px 0;
}

.dk-manager-brief-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Toggle Switch --- */
.dk-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.dk-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.dk-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.dk-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #d1d5db;
  border-radius: 24px;
  transition: all 0.3s ease;
}

.dk-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.dk-toggle input:checked + .dk-toggle-slider {
  background: #10b981;
}

.dk-toggle input:checked + .dk-toggle-slider::before {
  transform: translateX(20px);
}

.dk-toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  user-select: none;
}

.dk-toggle-status {
  font-size: 13px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
}

.dk-toggle-status--active {
  background: #ecfdf5;
  color: #065f46;
}

.dk-toggle-status--inactive {
  background: #f3f4f6;
  color: #6b7280;
}

/* --- Points Summary --- */
.dk-points-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #374151;
}

.dk-points-summary strong {
  color: #17233A;
}

.dk-points-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.dk-point-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  color: #065f46;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.dk-point-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* --- Point Checkbox Cards --- */
.dk-point-checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding: 2px;
}

.dk-point-checkbox-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  user-select: none;
}

.dk-point-checkbox-card:hover {
  border-color: #c7d2fe;
  background: #f8faff;
}

.dk-point-checkbox-card.checked {
  border-color: #6366f1;
  background: #f0f0ff;
}

.dk-point-cb-box {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.dk-point-checkbox-card.checked .dk-point-cb-box {
  background: #6366f1;
  border-color: #6366f1;
}

.dk-point-cb-box svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  stroke-width: 3;
  display: none;
}

.dk-point-checkbox-card.checked .dk-point-cb-box svg {
  display: block;
}

.dk-point-cb-name {
  font-size: 13px;
  font-weight: 600;
  color: #17233A;
  line-height: 1.3;
}

/* --- Info Grid --- */
.dk-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #f3f4f6;
}

.dk-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dk-info-item-label {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dk-info-item-value {
  font-size: 14px;
  font-weight: 600;
  color: #17233A;
}

/* --- Section spacing inside modal --- */
.dk-modal-section {
  margin-bottom: 20px;
}

.dk-modal-section:last-child {
  margin-bottom: 0;
}

.dk-modal-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #17233A;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dk-modal-section-title svg {
  width: 18px;
  height: 18px;
  color: #6366f1;
  flex-shrink: 0;
}

/* --- Form actions inside modal --- */
.dk-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid #f3f4f6;
}

.dk-form-actions .btn {
  min-width: 120px;
}

/* --- Mobile: Point Checkboxes --- */
@media (max-width: 768px) {
  .dk-point-checkboxes {
    grid-template-columns: 1fr;
  }
  .dk-info-grid {
    grid-template-columns: 1fr;
  }
  .dk-manager-header {
    flex-direction: column;
    text-align: center;
  }
  .dk-manager-brief-meta {
    justify-content: center;
  }
}

/* Dark theme for manager modal */
body.dark-theme .dk-manager-header {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%);
  border-color: rgba(99, 102, 241, 0.2);
}

body.dark-theme .dk-manager-brief-name {
  color: #e5e7eb;
}

body.dark-theme .dk-manager-brief-phone {
  color: #9ca3af;
}

body.dark-theme .dk-toggle-label {
  color: #d1d5db;
}

body.dark-theme .dk-toggle-status--active {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

body.dark-theme .dk-toggle-status--inactive {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

body.dark-theme .dk-points-summary {
  color: #d1d5db;
}

body.dark-theme .dk-points-summary strong {
  color: #e5e7eb;
}

body.dark-theme .dk-point-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

body.dark-theme .dk-point-checkbox-card {
  background: #1f2937;
  border-color: #374151;
}

body.dark-theme .dk-point-checkbox-card:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
}

body.dark-theme .dk-point-checkbox-card.checked {
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.15);
}

body.dark-theme .dk-point-cb-box {
  border-color: #4b5563;
}

body.dark-theme .dk-point-cb-name {
  color: #e5e7eb;
}

body.dark-theme .dk-info-grid {
  background: #1f2937;
  border-color: #374151;
}

body.dark-theme .dk-info-item-label {
  color: #6b7280;
}

body.dark-theme .dk-info-item-value {
  color: #e5e7eb;
}

body.dark-theme .dk-modal-section-title {
  color: #e5e7eb;
}

body.dark-theme .dk-modal-section-title svg {
  color: #818cf8;
}

body.dark-theme .dk-form-actions {
  border-color: #374151;
}