/*
 * THEMES.CSS - Темы оформления
 * Содержит: цветовые схемы, темная/светлая тема, брендинг
 */

/* ===== LIGHT THEME (DEFAULT) ===== */
:root {
  /* Primary Colors */
  --theme-primary: #0d6efd;
  --theme-primary-light: #6ea8fe;
  --theme-primary-dark: #0a58ca;
  --theme-primary-rgb: 13, 110, 253;
  
  /* Secondary Colors */
  --theme-secondary: #6c757d;
  --theme-secondary-light: #adb5bd;
  --theme-secondary-dark: #495057;
  
  /* Background Colors */
  --theme-bg-body: #ffffff;
  --theme-bg-surface: #ffffff;
  --theme-bg-card: #ffffff;
  --theme-bg-sidebar: #ffffff;
  --theme-bg-header: #ffffff;
  --theme-bg-footer: #f8f9fa;
  --theme-bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Text Colors */
  --theme-text-primary: #212529;
  --theme-text-secondary: #6c757d;
  --theme-text-muted: #adb5bd;
  --theme-text-inverse: #ffffff;
  --theme-text-link: var(--theme-primary);
  
  /* Border Colors */
  --theme-border-color: #dee2e6;
  --theme-border-light: #f8f9fa;
  --theme-border-dark: #adb5bd;
  
  /* Status Colors */
  --theme-success: #198754;
  --theme-success-light: #d1e7dd;
  --theme-danger: #dc3545;
  --theme-danger-light: #f8d7da;
  --theme-warning: #ffc107;
  --theme-warning-light: #fff3cd;
  --theme-info: #0dcaf0;
  --theme-info-light: #cff4fc;
  
  /* Shadows */
  --theme-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --theme-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --theme-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --theme-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  /* Primary Colors */
  --theme-primary: #6ea8fe;
  --theme-primary-light: #9ec5fe;
  --theme-primary-dark: #3d8bfd;
  
  /* Background Colors */
  --theme-bg-body: #121212;
  --theme-bg-surface: #1e1e1e;
  --theme-bg-card: #2d2d2d;
  --theme-bg-sidebar: #1e1e1e;
  --theme-bg-header: #1e1e1e;
  --theme-bg-footer: #1e1e1e;
  --theme-bg-overlay: rgba(0, 0, 0, 0.8);
  
  /* Text Colors */
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #adb5bd;
  --theme-text-muted: #6c757d;
  --theme-text-inverse: #212529;
  --theme-text-link: var(--theme-primary);
  
  /* Border Colors */
  --theme-border-color: #495057;
  --theme-border-light: #343a40;
  --theme-border-dark: #6c757d;
  
  /* Status Colors */
  --theme-success: #20c997;
  --theme-success-light: #0f5132;
  --theme-danger: #f5c2c7;
  --theme-danger-light: #842029;
  --theme-warning: #ffda6a;
  --theme-warning-light: #664d03;
  --theme-info: #86cfda;
  --theme-info-light: #055160;
  
  /* Shadows */
  --theme-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  --theme-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
  --theme-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
  --theme-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ===== THEME APPLICATION ===== */
body {
  background-color: var(--theme-bg-body);
  color: var(--theme-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cards */
.card {
  background-color: var(--theme-bg-card);
  border-color: var(--theme-border-color);
  color: var(--theme-text-primary);
}

.card-header {
  background-color: var(--theme-bg-surface);
  border-bottom-color: var(--theme-border-color);
}

.card-footer {
  background-color: var(--theme-bg-surface);
  border-top-color: var(--theme-border-color);
}

/* Navigation */
.navbar {
  background-color: var(--theme-bg-header);
  border-bottom-color: var(--theme-border-color);
}

.nav-link {
  color: var(--theme-text-secondary);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--theme-text-primary);
}

.nav-link.active {
  color: var(--theme-primary);
}

/* Sidebar */
.sidebar {
  background-color: var(--theme-bg-sidebar);
  border-right-color: var(--theme-border-color);
}

/* Forms */
.form-control {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-color);
  color: var(--theme-text-primary);
}

.form-control:focus {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-primary);
  color: var(--theme-text-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.25);
}

.form-control::placeholder {
  color: var(--theme-text-muted);
}

/* Buttons */
.btn-primary {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--theme-primary-dark);
  border-color: var(--theme-primary-dark);
}

.btn-outline-primary {
  color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: var(--theme-text-inverse);
}

/* Tables */
.table {
  color: var(--theme-text-primary);
}

.table th,
.table td {
  border-top-color: var(--theme-border-color);
}

.table thead th {
  border-bottom-color: var(--theme-border-color);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--theme-bg-surface);
}

.table-hover tbody tr:hover {
  background-color: var(--theme-bg-surface);
}

/* Modals */
.modal-content {
  background-color: var(--theme-bg-card);
  border-color: var(--theme-border-color);
}

.modal-header {
  border-bottom-color: var(--theme-border-color);
}

.modal-footer {
  border-top-color: var(--theme-border-color);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--theme-bg-card);
  border-color: var(--theme-border-color);
}

.dropdown-item {
  color: var(--theme-text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--theme-bg-surface);
  color: var(--theme-text-primary);
}

.dropdown-divider {
  border-top-color: var(--theme-border-color);
}

/* Alerts */
.alert-primary {
  background-color: var(--theme-info-light);
  border-color: var(--theme-info);
  color: var(--theme-info);
}

.alert-success {
  background-color: var(--theme-success-light);
  border-color: var(--theme-success);
  color: var(--theme-success);
}

.alert-danger {
  background-color: var(--theme-danger-light);
  border-color: var(--theme-danger);
  color: var(--theme-danger);
}

.alert-warning {
  background-color: var(--theme-warning-light);
  border-color: var(--theme-warning);
  color: var(--theme-warning);
}

/* ===== BRAND COLORS ===== */
.brand-primary {
  color: var(--theme-primary) !important;
}

.brand-bg-primary {
  background-color: var(--theme-primary) !important;
}

.brand-border-primary {
  border-color: var(--theme-primary) !important;
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 1000;
  background-color: var(--theme-bg-card);
  border: 1px solid var(--theme-border-color);
  border-radius: 50px;
  padding: 10px;
  box-shadow: var(--theme-shadow);
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  box-shadow: var(--theme-shadow-lg);
  transform: translateY(-50%) scale(1.05);
}

.theme-toggle-icon {
  width: 24px;
  height: 24px;
  color: var(--theme-text-primary);
  transition: transform 0.3s ease;
}

.theme-toggle-icon.sun {
  display: block;
}

.theme-toggle-icon.moon {
  display: none;
}

[data-theme="dark"] .theme-toggle-icon.sun {
  display: none;
}

[data-theme="dark"] .theme-toggle-icon.moon {
  display: block;
}

/* ===== CUSTOM THEME VARIABLES ===== */
.theme-chat {
  --chat-bg-client: var(--theme-primary);
  --chat-bg-admin: var(--theme-bg-surface);
  --chat-text-client: var(--theme-text-inverse);
  --chat-text-admin: var(--theme-text-primary);
  --chat-border: var(--theme-border-color);
}

.theme-admin {
  --admin-sidebar-bg: var(--theme-bg-sidebar);
  --admin-header-bg: var(--theme-bg-header);
  --admin-content-bg: var(--theme-bg-body);
  --admin-card-bg: var(--theme-bg-card);
}

/* ===== RESPONSIVE THEME ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --theme-primary: #6ea8fe;
    --theme-bg-body: #121212;
    --theme-bg-surface: #1e1e1e;
    --theme-bg-card: #2d2d2d;
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #adb5bd;
    --theme-border-color: #495057;
  }
}

/* ===== THEME TRANSITIONS ===== */
* {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Disable transitions during theme change */
.theme-transitioning * {
  transition: none !important;
}

/* ===== HIGH CONTRAST THEME ===== */
@media (prefers-contrast: high) {
  :root {
    --theme-border-color: #000000;
    --theme-text-primary: #000000;
    --theme-bg-body: #ffffff;
    --theme-primary: #0000ff;
  }
  
  [data-theme="dark"] {
    --theme-border-color: #ffffff;
    --theme-text-primary: #ffffff;
    --theme-bg-body: #000000;
    --theme-primary: #00ffff;
  }
}