/* ==========================================================================
   Nomad LMS Design System
   Единая система дизайна для консистентного UI
   Объединяет custom-theme.css и оригинальный design-system.css
   ========================================================================== */

/* ==========================================================================
   Design Tokens (CSS Variables)
   ========================================================================== */
:root {
  /* Шрифты */
  --ds-font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Корпоративные цвета - Primary */
  --ds-primary: #0D81FF;
  --ds-primary-hover: #0B6EDB;
  --ds-primary-active: #095BB7;
  --ds-primary-rgb: 13, 129, 255;
  
  /* Градации primary цвета */
  --ds-primary-100: #E6F2FF;
  --ds-primary-200: #CCE5FF;
  --ds-primary-300: #99CCFF;
  --ds-primary-400: #66B2FF;
  --ds-primary-500: #0D81FF;
  --ds-primary-600: #0B6EDB;
  --ds-primary-700: #095BB7;
  --ds-primary-800: #074893;
  --ds-primary-900: #053570;
  
  /* Colors - Secondary */
  --ds-secondary: #1D3856;
  --ds-secondary-hover: #19304A;
  --ds-secondary-light: #7B93B7;
  --ds-secondary-rgb: 29, 56, 86;
  
  /* Градации secondary цвета */
  --ds-secondary-100: #E9EDF3;
  --ds-secondary-200: #D3DBE7;
  --ds-secondary-300: #A7B7CF;
  --ds-secondary-400: #7B93B7;
  --ds-secondary-500: #1D3856;
  --ds-secondary-600: #19304A;
  --ds-secondary-700: #15283E;
  --ds-secondary-800: #112032;
  --ds-secondary-900: #0D1826;
  
  /* Colors - Dark */
  --ds-dark: #15171E;
  --ds-dark-rgb: 21, 23, 30;
  
  /* Градации dark цвета */
  --ds-dark-100: #E8E8E9;
  --ds-dark-200: #D1D1D3;
  --ds-dark-300: #A3A3A7;
  --ds-dark-400: #75757B;
  --ds-dark-500: #15171E;
  --ds-dark-600: #121419;
  --ds-dark-700: #0F1114;
  --ds-dark-800: #0C0E0F;
  --ds-dark-900: #090B0A;
  
  /* Colors - Semantic */
  --ds-success: #10B981;
  --ds-success-rgb: 16, 185, 129;
  --ds-danger: #EF4444;
  --ds-danger-rgb: 239, 68, 68;
  --ds-warning: #EAB308;
  --ds-warning-rgb: 234, 179, 8;
  --ds-info: #06B6D4;
  --ds-info-rgb: 6, 182, 212;
  
  /* Расширенная цветовая палитра */
  --ds-blue: #0D81FF;
  --ds-indigo: #4C63D2;
  --ds-purple: #7C3AED;
  --ds-pink: #EC4899;
  --ds-red: #EF4444;
  --ds-orange: #F97316;
  --ds-yellow: #EAB308;
  --ds-green: #10B981;
  --ds-teal: #14B8A6;
  --ds-cyan: #06B6D4;
  
  /* Colors - Neutral */
  --ds-light: #F8F9FA;
  --ds-gray-50: rgb(248, 250, 252);
  --ds-gray-100: rgb(241, 245, 249);
  --ds-gray-200: rgb(226, 232, 240);
  --ds-gray-300: rgb(203, 213, 225);
  --ds-gray-400: rgb(148, 163, 184);
  --ds-gray-500: rgb(100, 116, 139);
  --ds-gray-600: rgb(71, 85, 105);
  --ds-gray-700: rgb(51, 65, 85);
  --ds-gray-800: rgb(30, 41, 59);
  --ds-gray-900: rgb(15, 23, 42);
  
  /* Body colors */
  --ds-body-bg: #FFFFFF;
  --ds-body-bg-rgb: 255, 255, 255;
  --ds-body-color: #15171E;
  --ds-body-color-rgb: 21, 23, 30;
  --ds-emphasis-color: #15171E;
  --ds-secondary-color: rgba(21, 23, 30, 0.75);
  --ds-tertiary-color: rgba(21, 23, 30, 0.5);
  
  /* Glassmorphism */
  --ds-glass-bg: rgba(255, 255, 255, 0.70);
  --ds-glass-border: rgba(15, 23, 42, 0.10);
  --ds-glass-blur: blur(8px);
  
  /* Spacing */
  --ds-spacing-xs: 0.25rem;  /* 4px */
  --ds-spacing-sm: 0.5rem;   /* 8px */
  --ds-spacing-md: 1rem;     /* 16px */
  --ds-spacing-lg: 1.5rem;   /* 24px */
  --ds-spacing-xl: 3rem;     /* 48px */
  
  /* Border Radius */
  --ds-radius-sm: 0.375rem;  /* 6px */
  --ds-radius-md: 0.5rem;    /* 8px */
  --ds-radius-lg: 0.75rem;   /* 12px */
  --ds-radius-xl: 1rem;      /* 16px */
  --ds-radius-pill: 50rem;
  --ds-radius-circle: 50%;
  
  /* Shadows */
  --ds-shadow-sm: 0 0.125rem 0.25rem rgba(21, 23, 30, 0.075);
  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --ds-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.16);
  --ds-shadow-primary: 0 4px 16px rgba(13, 129, 255, 0.3);
  
  /* Transitions */
  --ds-transition-fast: 0.15s ease;
  --ds-transition-base: 0.2s ease;
  --ds-transition-slow: 0.3s ease;
  
  /* Typography */
  --ds-font-weight-normal: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold: 700;
  
  /* Z-index layers */
  --ds-z-dropdown: 1000;
  --ds-z-sticky: 1020;
  --ds-z-fixed: 1030;
  --ds-z-modal-backdrop: 1040;
  --ds-z-modal: 1050;
  --ds-z-popover: 1060;
  --ds-z-tooltip: 1070;
  
  /* Link colors */
  --ds-link-color: var(--ds-primary);
  --ds-link-hover-color: var(--ds-primary-hover);
  --ds-link-decoration: none;
  
  /* Border */
  --ds-border-width: 1px;
  --ds-border-style: solid;
  --ds-border-color: rgba(21, 23, 30, 0.175);
  --ds-border-color-translucent: rgba(21, 23, 30, 0.175);
  
  /* Bootstrap совместимость */
  --bs-primary: var(--ds-primary);
  --bs-primary-rgb: var(--ds-primary-rgb);
  --bs-secondary: var(--ds-secondary);
  --bs-secondary-rgb: var(--ds-secondary-rgb);
  --bs-dark: var(--ds-dark);
  --bs-dark-rgb: var(--ds-dark-rgb);
  --bs-success: var(--ds-success);
  --bs-danger: var(--ds-danger);
  --bs-warning: var(--ds-warning);
  --bs-info: var(--ds-info);
  --bs-light: var(--ds-light);
  
  --bs-blue: var(--ds-blue);
  --bs-indigo: var(--ds-indigo);
  --bs-purple: var(--ds-purple);
  --bs-pink: var(--ds-pink);
  --bs-red: var(--ds-red);
  --bs-orange: var(--ds-orange);
  --bs-yellow: var(--ds-yellow);
  --bs-green: var(--ds-green);
  --bs-teal: var(--ds-teal);
  --bs-cyan: var(--ds-cyan);
  
  --bs-body-bg: var(--ds-body-bg);
  --bs-body-color: var(--ds-body-color);
  --bs-emphasis-color: var(--ds-emphasis-color);
  --bs-secondary-color: var(--ds-secondary-color);
  --bs-tertiary-color: var(--ds-tertiary-color);
  --bs-border-color: var(--ds-border-color);
  --bs-border-color-translucent: var(--ds-border-color-translucent);
  --bs-link-color: var(--ds-link-color);
  --bs-link-hover-color: var(--ds-link-hover-color);
  
  --bs-component-active-color: #FFFFFF;
  --bs-component-active-bg: var(--ds-primary);
  
  /* Box Shadow для компонентов */
  --ds-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --ds-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --ds-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --ds-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  
  /* Focus ring */
  --ds-focus-ring-width: 0.25rem;
  --ds-focus-ring-opacity: 0.25;
  --ds-focus-ring-color: rgba(var(--ds-primary-rgb), var(--ds-focus-ring-opacity));
  
  /* Form feedback colors */
  --ds-form-valid-color: var(--ds-success);
  --ds-form-valid-border-color: var(--ds-success);
  --ds-form-invalid-color: var(--ds-danger);
  --ds-form-invalid-border-color: var(--ds-danger);
  
  /* Spacing scale расширенный */
  --ds-spacing-0: 0;
  --ds-spacing-1: 0.25rem;  /* 4px */
  --ds-spacing-2: 0.5rem;   /* 8px */
  --ds-spacing-3: 1rem;     /* 16px */
  --ds-spacing-4: 1.5rem;   /* 24px */
  --ds-spacing-5: 3rem;     /* 48px */
  --ds-spacing-6: 4.5rem;   /* 72px */
  --ds-spacing-7: 6rem;     /* 96px */
  
  /* Grid system */
  --ds-gutter-x: 1.5rem;
  --ds-gutter-y: 0;
  
  /* Toast component */
  --ds-toast-zindex: var(--ds-z-tooltip);
  --ds-toast-padding-x: 0.75rem;
  --ds-toast-padding-y: 0.5rem;
  --ds-toast-spacing: 1.5rem;
  --ds-toast-max-width: 350px;
  --ds-toast-font-size: 0.875rem;
  --ds-toast-bg: var(--ds-glass-bg);
  --ds-toast-border-width: 1px;
  --ds-toast-border-color: var(--ds-glass-border);
  --ds-toast-border-radius: var(--ds-radius-lg);
  --ds-toast-box-shadow: var(--ds-shadow-lg);
  
  /* Accordion component */
  --ds-accordion-bg: transparent;
  --ds-accordion-border-color: var(--ds-glass-border);
  --ds-accordion-border-radius: var(--ds-radius-lg);
  --ds-accordion-button-active-bg: rgba(var(--ds-primary-rgb), 0.1);
}

/* Dark Theme Tokens */
[data-bs-theme="dark"] {
  --ds-primary: #66B2FF;
  --ds-primary-hover: #99CCFF;
  --ds-primary-active: rgb(147, 197, 253);
  --ds-primary-rgb: 102, 178, 255;
  
  --ds-glass-bg: rgba(17, 24, 39, 0.55);
  --ds-glass-border: rgba(226, 232, 240, 0.12);
  
  --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --ds-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
  --ds-shadow-primary: 0 4px 16px rgba(102, 178, 255, 0.35);
  
  --ds-body-bg: #15171E;
  --ds-body-bg-rgb: 21, 23, 30;
  --ds-body-color: #FFFFFF;
  --ds-body-color-rgb: 255, 255, 255;
  --ds-emphasis-color: #FFFFFF;
  --ds-secondary-color: rgba(255, 255, 255, 0.75);
  --ds-tertiary-color: rgba(255, 255, 255, 0.5);
  
  --ds-border-color: rgba(255, 255, 255, 0.175);
  --ds-border-color-translucent: rgba(255, 255, 255, 0.175);
  
  --ds-link-color: var(--ds-primary);
  --ds-link-hover-color: var(--ds-primary-hover);
  
  --ds-toast-bg: rgba(33, 37, 41, 0.95);
  
  /* Bootstrap совместимость для темной темы */
  --bs-body-bg: var(--ds-body-bg);
  --bs-body-color: var(--ds-body-color);
  --bs-emphasis-color: var(--ds-emphasis-color);
  --bs-secondary-color: var(--ds-secondary-color);
  --bs-tertiary-color: var(--ds-tertiary-color);
  --bs-border-color: var(--ds-border-color);
  --bs-border-color-translucent: var(--ds-border-color-translucent);
  --bs-link-color: var(--ds-link-color);
  --bs-link-hover-color: var(--ds-link-hover-color);
}

/* ==========================================================================
   Design System Page Styles
   ========================================================================== */
.design-section {
  border-bottom: 1px solid var(--ds-glass-border);
}

.design-section:last-child {
  border-bottom: none;
}

/* ==========================================================================
   Color Swatches
   ========================================================================== */
.color-swatch {
  height: 80px;
  display: flex;
  align-items: end;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform var(--ds-transition-base), box-shadow var(--ds-transition-base);
}

.color-swatch:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
}

[data-bs-theme="dark"] .color-swatch {
  border-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Spacing Helper
   ========================================================================== */
.spacing-box {
  background: rgba(59, 130, 246, 0.15);
  border: 1px dashed rgba(59, 130, 246, 0.4);
  display: inline-block;
  transition: background var(--ds-transition-base);
}

.spacing-box:hover {
  background: rgba(59, 130, 246, 0.25);
}

/* ==========================================================================
   Code Preview
   ========================================================================== */
.code-preview {
  background: rgba(100, 116, 139, 0.08);
  border: 1px solid rgba(100, 116, 139, 0.2);
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace;
  font-size: 0.875rem;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.6;
}

[data-bs-theme="dark"] .code-preview {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.25);
}

/* ==========================================================================
   Hero Section (Dotted Background)
   ========================================================================== */
.home-hero {
  --home-dot-size: 22px;
  --home-dot-radius: 1px;
  --home-dot-color: rgba(15, 23, 42, .10);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--ds-glass-border);
  min-height: 70vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 1px 1px, var(--home-dot-color) var(--home-dot-radius), transparent var(--home-dot-radius)) 0 0 / var(--home-dot-size) var(--home-dot-size),
    radial-gradient(800px 400px at 70% -10%, rgba(59, 130, 246, .06), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .98));
}

[data-bs-theme="dark"] .home-hero {
  --home-dot-color: rgba(226, 232, 240, .12);
  background:
    radial-gradient(circle at 1px 1px, var(--home-dot-color) var(--home-dot-radius), transparent var(--home-dot-radius)) 0 0 / var(--home-dot-size) var(--home-dot-size),
    radial-gradient(800px 400px at 70% -10%, rgba(96, 165, 250, .08), transparent 60%),
    linear-gradient(180deg, rgba(10, 12, 18, .78), rgba(10, 12, 18, .92));
}

/* Центрирование контента в hero на мобильных */
@media (max-width: 991.98px) {
  .home-hero {
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .home-hero .row > div {
    text-align: center;
  }
  
  .home-hero .d-flex.flex-wrap.gap-2 {
    justify-content: center;
  }
  
  .home-hero .d-inline-flex {
    justify-content: center;
  }
  
  .home-hero h1,
  .home-hero .lead {
    text-align: center;
  }
}

/* ==========================================================================
   Page Hero - Компактная версия для внутренних страниц
   ========================================================================== */
.page-hero {
  --home-dot-size: 22px;
  --home-dot-radius: 1px;
  --home-dot-color: rgba(15, 23, 42, .10);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--ds-glass-border);
  padding: 3rem 0;
  background:
    radial-gradient(circle at 1px 1px, var(--home-dot-color) var(--home-dot-radius), transparent var(--home-dot-radius)) 0 0 / var(--home-dot-size) var(--home-dot-size),
    radial-gradient(800px 400px at 70% -10%, rgba(59, 130, 246, .06), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .98));
}

[data-bs-theme="dark"] .page-hero {
  --home-dot-color: rgba(226, 232, 240, .12);
  background:
    radial-gradient(circle at 1px 1px, var(--home-dot-color) var(--home-dot-radius), transparent var(--home-dot-radius)) 0 0 / var(--home-dot-size) var(--home-dot-size),
    radial-gradient(800px 400px at 70% -10%, rgba(96, 165, 250, .08), transparent 60%),
    linear-gradient(180deg, rgba(10, 12, 18, .78), rgba(10, 12, 18, .92));
}

/* Адаптивность для page-hero */
@media (max-width: 767.98px) {
  .page-hero {
    padding: 2rem 0;
  }
}

/* ==========================================================================
   Auth Pages - Фон на всю страницу
   ========================================================================== */
.auth-page-wrapper {
  --home-dot-size: 22px;
  --home-dot-radius: 1px;
  --home-dot-color: rgba(15, 23, 42, .10);
  position: relative;
  min-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
  padding: 2rem 0;
  background:
    radial-gradient(circle at 1px 1px, var(--home-dot-color) var(--home-dot-radius), transparent var(--home-dot-radius)) 0 0 / var(--home-dot-size) var(--home-dot-size),
    radial-gradient(800px 600px at 50% 30%, rgba(59, 130, 246, .08), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .98));
}

[data-bs-theme="dark"] .auth-page-wrapper {
  --home-dot-color: rgba(226, 232, 240, .12);
  background:
    radial-gradient(circle at 1px 1px, var(--home-dot-color) var(--home-dot-radius), transparent var(--home-dot-radius)) 0 0 / var(--home-dot-size) var(--home-dot-size),
    radial-gradient(800px 600px at 50% 30%, rgba(96, 165, 250, .10), transparent 70%),
    linear-gradient(180deg, rgba(10, 12, 18, .85), rgba(10, 12, 18, .95));
}

@media (max-width: 767.98px) {
  .auth-page-wrapper {
    min-height: calc(100vh - 120px);
    padding-top: 2rem;
    padding-bottom: 2rem;
    align-items: flex-start;
  }
}

/* Auth card enhancement */
.auth-page-wrapper .home-hero-card {
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, .02),
    0 4px 8px rgba(0, 0, 0, .04),
    0 8px 24px rgba(0, 0, 0, .06);
  transform: none !important;
}

[data-bs-theme="dark"] .auth-page-wrapper .home-hero-card {
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, .04),
    0 4px 8px rgba(0, 0, 0, .2),
    0 8px 24px rgba(0, 0, 0, .3);
  transform: none !important;
}

.auth-page-wrapper .home-hero-card:hover {
  transform: none !important;
}

/* Social Login Buttons */
.btn-google {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  color: #1f1f1f;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.btn-google:hover {
  background: #f8f9fa;
  border-color: rgba(0, 0, 0, .15);
  color: #1f1f1f;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

.btn-google:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

[data-bs-theme="dark"] .btn-google {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .15);
  color: #e8eaed;
}

[data-bs-theme="dark"] .btn-google:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}

.btn-ecp {
  background: linear-gradient(135deg, #0D81FF 0%, #0B6EDB 100%);
  border: 1px solid rgba(13, 129, 255, .3);
  color: #fff;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.btn-ecp:hover {
  background: linear-gradient(135deg, #0B6EDB 0%, #095BB7 100%);
  border-color: rgba(13, 129, 255, .5);
  color: #fff;
  box-shadow: 0 4px 12px rgba(13, 129, 255, .3);
}

.btn-ecp:active {
  box-shadow: 0 2px 6px rgba(13, 129, 255, .3);
}

[data-bs-theme="dark"] .btn-ecp {
  background: linear-gradient(135deg, rgba(13, 129, 255, .8) 0%, rgba(11, 110, 219, .8) 100%);
  border-color: rgba(13, 129, 255, .4);
}

[data-bs-theme="dark"] .btn-ecp:hover {
  background: linear-gradient(135deg, rgba(13, 129, 255, .9) 0%, rgba(11, 110, 219, .9) 100%);
  border-color: rgba(13, 129, 255, .6);
  box-shadow: 0 4px 12px rgba(13, 129, 255, .4);
}

/* ==========================================================================
   Buttons - Enhanced Styles (Hero Section)
   ========================================================================== */

/* Небольшие улучшения для кнопок в hero секции */
.home-hero .btn-link {
  color: var(--ds-secondary-hover);
  font-weight: var(--ds-font-weight-medium);
  padding: 0.625rem 0.5rem;
  transition: color var(--ds-transition-base);
}

.home-hero .btn-link:hover {
  color: var(--ds-primary-hover);
}

.home-hero .btn-link i {
  transition: transform var(--ds-transition-base);
}

.home-hero .btn-link:hover i {
  transform: translateX(2px);
}

[data-bs-theme="dark"] .home-hero .btn-link {
  color: var(--ds-gray-300);
}

[data-bs-theme="dark"] .home-hero .btn-link:hover {
  color: rgb(147, 197, 253);
}

/* ==========================================================================
   Cards - Glassmorphism Style
   ========================================================================== */

/* Hero Card */
.home-hero-card {
  border: 1px solid var(--ds-glass-border);
  background: var(--ds-glass-bg);
  backdrop-filter: var(--ds-glass-blur);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-hero-card:hover {
  box-shadow: var(--ds-shadow-md);
  border-color: rgba(59, 130, 246, 0.2);
}

[data-bs-theme="dark"] .home-hero-card {
  border-color: rgba(226, 232, 240, .12);
  background: rgba(17, 24, 39, .55);
}

[data-bs-theme="dark"] .home-hero-card:hover {
  border-color: rgba(96, 165, 250, 0.25);
}

/* Feature Cards */
.home-feature {
  border: 1px solid var(--ds-glass-border);
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.25s ease;
  cursor: pointer;
}

.home-feature:hover {
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, .25);
}

[data-bs-theme="dark"] .home-feature {
  border-color: rgba(226, 232, 240, .12);
  background: rgba(17, 24, 39, .50);
}

[data-bs-theme="dark"] .home-feature:hover {
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4);
  border-color: rgba(96, 165, 250, .30);
}

/* Course Cards - специальные стили */
.home-feature .card-img-top {
  border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
}

.home-feature .card-footer {
  margin-top: auto;
}

/* ==========================================================================
   Badges
   ========================================================================== */

/* Soft Badge - Glassmorphism */
.badge-soft {
  background: rgba(59, 130, 246, .12);
  color: var(--ds-primary-hover);
  border: 1px solid rgba(59, 130, 246, .20);
  font-weight: var(--ds-font-weight-medium);
  padding: 0.375rem 0.75rem;
  transition: all var(--ds-transition-base);
}

.badge-soft:hover {
  background: rgba(59, 130, 246, .18);
  border-color: rgba(59, 130, 246, .30);
}

[data-bs-theme="dark"] .badge-soft {
  background: rgba(96, 165, 250, .15);
  color: rgb(147, 197, 253);
  border-color: rgba(96, 165, 250, .25);
}

[data-bs-theme="dark"] .badge-soft:hover {
  background: rgba(96, 165, 250, .22);
  border-color: rgba(96, 165, 250, .35);
}

/* Backdrop Blur Utility */
.backdrop-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Course Card Enhancements */
.home-feature .card-img-top,
.home-feature img {
  transition: transform 0.3s ease;
}

.home-feature:hover img {
  transform: scale(1.05);
}

/* Chapter accordion - clean minimal style */
.chapter-accordion .accordion-item {
  border: none !important;
  background: transparent;
}

.chapter-accordion .accordion-header {
  border: none;
  margin-bottom: 0;
}

.chapter-accordion .accordion-button {
  background: transparent;
  border: none;
  padding: 1.25rem 1.5rem;
  box-shadow: none !important;
  border-radius: var(--ds-radius-lg);
  transition: all 0.2s ease;
  font-size: 1rem;
  color: var(--bs-body-color);
  cursor: pointer;
  position: relative;
}

.chapter-accordion .accordion-button::after {
  content: "\F282";
  font-family: "bootstrap-icons" !important;
  background: none;
  width: auto;
  height: auto;
  font-size: 1.25rem;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
  color: var(--bs-body-color);
  opacity: 0.5;
}

.chapter-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(90deg);
  opacity: 0.7;
}

.chapter-accordion .accordion-button:hover {
  background: rgba(var(--ds-primary-rgb), 0.03);
  color: var(--bs-body-color);
}

.chapter-accordion .accordion-button:hover::after {
  opacity: 1;
}

.chapter-accordion .accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--bs-body-color);
  box-shadow: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
  margin-bottom: 0;
}

.chapter-accordion .accordion-button:focus {
  box-shadow: none !important;
  border-color: transparent;
  outline: none;
}

.chapter-accordion .accordion-collapse {
  border: none;
}

.chapter-accordion .accordion-body {
  padding: 0 1.5rem 1.5rem;
  background: transparent;
}

[data-bs-theme="dark"] .chapter-accordion .accordion-button {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .chapter-accordion .accordion-button:hover {
  background: rgba(var(--ds-primary-rgb), 0.06);
}

[data-bs-theme="dark"] .chapter-accordion .accordion-button:not(.collapsed) {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* Course element items */
.course-element-item {
  transition: all 0.15s ease;
  cursor: default;
}

.course-element-item:hover {
  background: rgba(var(--ds-primary-rgb), 0.04);
  transform: translateX(2px);
}

[data-bs-theme="dark"] .course-element-item:hover {
  background: rgba(var(--ds-primary-rgb), 0.08);
}

/* ==========================================================================
   KPI Blocks
   ========================================================================== */
.home-kpi {
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(255, 255, 255, .55);
  transition: all var(--ds-transition-base);
  cursor: pointer;
}

.home-kpi:hover {
  background: rgba(255, 255, 255, .75);
  border-color: rgba(15, 23, 42, .18);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
}

[data-bs-theme="dark"] .home-kpi {
  border-color: rgba(226, 232, 240, .15);
  background: rgba(17, 24, 39, .35);
}

[data-bs-theme="dark"] .home-kpi:hover {
  background: rgba(17, 24, 39, .50);
  border-color: rgba(226, 232, 240, .22);
}

.home-kpi-label {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  font-weight: var(--ds-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.home-kpi-value {
  font-size: 0.9375rem;
  font-weight: var(--ds-font-weight-semibold);
  color: var(--bs-body-color);
}

/* Primary KPI (highlighted) */
.home-kpi-primary {
  background: rgba(59, 130, 246, .08);
  border-color: rgba(59, 130, 246, .20);
}

.home-kpi-primary:hover {
  background: rgba(59, 130, 246, .12);
  border-color: rgba(59, 130, 246, .30);
}

[data-bs-theme="dark"] .home-kpi-primary {
  background: rgba(96, 165, 250, .10);
  border-color: rgba(96, 165, 250, .25);
}

[data-bs-theme="dark"] .home-kpi-primary:hover {
  background: rgba(96, 165, 250, .15);
  border-color: rgba(96, 165, 250, .35);
}

.home-kpi-primary .home-kpi-value {
  color: var(--ds-primary-hover);
}

[data-bs-theme="dark"] .home-kpi-primary .home-kpi-value {
  color: rgb(147, 197, 253);
}

/* ==========================================================================
   Forms - Enhanced Styles
   ========================================================================== */
.form-control:focus,
.form-select:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.15);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.15);
}

/* ==========================================================================
   Alerts - Enhanced
   ========================================================================== */
.alert {
  border-radius: var(--ds-radius-lg);
  border: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================================
   Tables - Enhanced
   ========================================================================== */
.table {
  --bs-table-hover-bg: rgba(59, 130, 246, 0.04);
}

[data-bs-theme="dark"] .table {
  --bs-table-hover-bg: rgba(96, 165, 250, 0.08);
}

.table thead th {
  font-weight: var(--ds-font-weight-semibold);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
}

/* ==========================================================================
   Progress Bars
   ========================================================================== */
.progress {
  border-radius: var(--ds-radius-md);
  overflow: hidden;
}

.progress-bar {
  transition: width var(--ds-transition-slow);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

/* Breadcrumbs */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--bs-secondary-color);
}

.breadcrumb-item a {
  color: var(--ds-primary-hover);
  text-decoration: none;
  transition: color var(--ds-transition-base);
}

.breadcrumb-item a:hover {
  color: var(--ds-primary);
  text-decoration: underline;
}

/* Nav Tabs */
.nav-tabs {
  border-bottom-color: var(--ds-glass-border);
}

.nav-tabs .nav-link {
  border: none;
  color: var(--bs-secondary-color);
  font-weight: var(--ds-font-weight-medium);
  padding: 0.75rem 1.25rem;
  transition: all var(--ds-transition-base);
}

.nav-tabs .nav-link:hover {
  color: var(--ds-primary);
  border-color: transparent;
}

.nav-tabs .nav-link.active {
  color: var(--ds-primary-hover);
  background: transparent;
  border-bottom: 2px solid var(--ds-primary);
}

/* Nav Pills */
.nav-pills .nav-link {
  border-radius: var(--ds-radius-md);
  font-weight: var(--ds-font-weight-medium);
  transition: all var(--ds-transition-base);
}

.nav-pills .nav-link.active {
  background: var(--ds-primary);
}

.nav-pills .nav-link:hover:not(.active) {
  background: rgba(59, 130, 246, 0.1);
  color: var(--ds-primary-hover);
}

/* List Group */
.list-group-item {
  border-color: var(--ds-glass-border);
  transition: all var(--ds-transition-base);
}

.list-group-item-action:hover {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.15);
}

.list-group-item.active {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
}

/* ==========================================================================
   Modals & Offcanvas
   ========================================================================== */
.modal-content,
.offcanvas {
  border-radius: var(--ds-radius-xl);
  border: 1px solid var(--ds-glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.modal-header,
.offcanvas-header {
  border-bottom-color: var(--ds-glass-border);
}

.modal-footer,
.offcanvas-footer {
  border-top-color: var(--ds-glass-border);
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination {
  --bs-pagination-border-radius: var(--ds-radius-md);
}

.page-link {
  border-color: var(--ds-glass-border);
  font-weight: var(--ds-font-weight-medium);
  transition: all var(--ds-transition-base);
}

.page-link:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--ds-primary-hover);
}

.page-item.active .page-link {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
}

/* ==========================================================================
   Spinners
   ========================================================================== */
.spinner-border,
.spinner-grow {
  animation-duration: 0.85s;
}

/* ==========================================================================
   Skeleton Loaders (Placeholders)
   ========================================================================== */
.placeholder {
  background: linear-gradient(
    90deg,
    var(--bs-secondary-bg) 0%,
    rgba(var(--bs-secondary-bg-rgb), 0.6) 50%,
    var(--bs-secondary-bg) 100%
  );
  opacity: 0.7;
}

.placeholder-glow .placeholder {
  animation: placeholder-glow 1.5s ease-in-out infinite;
}

.placeholder-wave {
  animation: placeholder-wave 1.5s linear infinite;
}

@keyframes placeholder-glow {
  50% {
    opacity: 0.4;
  }
}

@keyframes placeholder-wave {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ==========================================================================
   Empty States
   ========================================================================== */
.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
}

.empty-state i {
  font-size: 4rem;
  color: var(--bs-secondary-color);
  margin-bottom: 1.5rem;
}

.empty-state h5 {
  font-weight: var(--ds-font-weight-semibold);
  margin-bottom: 0.75rem;
}

.empty-state p {
  color: var(--bs-secondary-color);
  max-width: 400px;
  margin: 0 auto 1.5rem;
}

/* ==========================================================================
   Tooltips & Popovers
   ========================================================================== */
.tooltip {
  --bs-tooltip-bg: var(--ds-dark);
  --bs-tooltip-opacity: 0.95;
}

[data-bs-theme="dark"] .tooltip {
  --bs-tooltip-bg: var(--ds-gray-700);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Glass Effect Utility */
.glass-effect {
  background: var(--ds-glass-bg);
  backdrop-filter: var(--ds-glass-blur);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  border: 1px solid var(--ds-glass-border);
}

/* Hover Lift Effect */
.hover-lift {
  transition: transform var(--ds-transition-base), box-shadow var(--ds-transition-base);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
}

/* Smooth Transitions */
.transition-smooth {
  transition: all var(--ds-transition-base);
}

/* Focus Ring */
.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
  border-radius: var(--ds-radius-md);
}

/* Text Gradient */
.text-gradient-primary {
  background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-primary-active) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */
@media (max-width: 768px) {
  .home-hero .btn,
  .home-hero-card .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
  
  .home-kpi {
    margin-bottom: 0.5rem;
  }
  
  .design-section {
    padding: 2rem 0;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
  .home-hero,
  .home-hero-card,
  .home-feature {
    background: white !important;
    backdrop-filter: none !important;
  }
  
  .btn {
    border: 1px solid #000 !important;
  }
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus Visible */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .home-hero-card,
  .home-feature,
  .home-kpi {
    border-width: 2px;
  }
}

/* ==========================================================================
   EXTENDED COMPONENTS FROM BOOTSTRAP
   ========================================================================== */

/* ==========================================================================
   Accordion Component
   ========================================================================== */
.ds-accordion {
  --ds-accordion-bg: var(--ds-accordion-bg);
  --ds-accordion-border-color: var(--ds-accordion-border-color);
  --ds-accordion-border-radius: var(--ds-accordion-border-radius);
  --ds-accordion-button-active-bg: var(--ds-accordion-button-active-bg);
}

.ds-accordion-item {
  background-color: var(--ds-accordion-bg);
  border: 1px solid var(--ds-accordion-border-color);
  border-radius: var(--ds-accordion-border-radius);
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: all var(--ds-transition-base);
}

.ds-accordion-item:hover {
  border-color: rgba(var(--ds-primary-rgb), 0.3);
}

.ds-accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  font-weight: var(--ds-font-weight-medium);
  text-align: left;
  color: var(--ds-body-color);
  background-color: transparent;
  border: 0;
  transition: all var(--ds-transition-base);
  cursor: pointer;
}

.ds-accordion-button:hover {
  background-color: rgba(var(--ds-primary-rgb), 0.05);
}

.ds-accordion-button:not(.collapsed) {
  background-color: var(--ds-accordion-button-active-bg);
  color: var(--ds-primary);
}

.ds-accordion-button::after {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23677788'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform var(--ds-transition-base);
}

.ds-accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}

.ds-accordion-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
}

.ds-accordion-collapse.show {
  max-height: 500px;
  transition: max-height 0.35s ease-in;
}

.ds-accordion-body {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--ds-glass-border);
}

/* ==========================================================================
   Dropdown Component
   ========================================================================== */
.ds-dropdown {
  position: relative;
}

.ds-dropdown-toggle::after {
  content: "";
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.ds-dropdown-menu {
  position: absolute;
  z-index: var(--ds-z-dropdown);
  display: none;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: var(--ds-body-color);
  text-align: left;
  list-style: none;
  background-color: var(--ds-glass-bg);
  backdrop-filter: var(--ds-glass-blur);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
}

.ds-dropdown-menu.show {
  display: block;
}

.ds-dropdown-menu-end {
  right: 0;
  left: auto;
}

.ds-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  clear: both;
  font-weight: var(--ds-font-weight-normal);
  color: var(--ds-body-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  transition: all var(--ds-transition-fast);
}

.ds-dropdown-item:hover,
.ds-dropdown-item:focus {
  background-color: rgba(var(--ds-primary-rgb), 0.1);
  color: var(--ds-primary);
}

.ds-dropdown-item.active {
  background-color: var(--ds-primary);
  color: white;
}

.ds-dropdown-item:disabled,
.ds-dropdown-item.disabled {
  color: var(--bs-secondary-color);
  pointer-events: none;
  background-color: transparent;
  opacity: 0.5;
}

.ds-dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid var(--ds-glass-border);
}

.ds-dropdown-header {
  display: block;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

/* ==========================================================================
   Toast Component (Enhanced)
   ========================================================================== */
.ds-toast {
  width: var(--ds-toast-max-width);
  max-width: 100%;
  font-size: var(--ds-toast-font-size);
  pointer-events: auto;
  background-color: var(--ds-toast-bg);
  backdrop-filter: var(--ds-glass-blur);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  background-clip: padding-box;
  border: var(--ds-toast-border-width) solid var(--ds-toast-border-color);
  box-shadow: var(--ds-toast-box-shadow);
  border-radius: var(--ds-toast-border-radius);
}

.ds-toast-container {
  position: fixed;
  z-index: var(--ds-toast-zindex);
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}

.ds-toast-container > :not(:last-child) {
  margin-bottom: var(--ds-toast-spacing);
}

/* Toast positions */
.ds-toast-container.top-0 { top: 0; }
.ds-toast-container.top-50 { top: 50%; }
.ds-toast-container.bottom-0 { bottom: 0; }
.ds-toast-container.start-0 { left: 0; }
.ds-toast-container.start-50 { left: 50%; }
.ds-toast-container.end-0 { right: 0; }

.ds-toast-header {
  display: flex;
  align-items: center;
  padding: var(--ds-toast-padding-y) var(--ds-toast-padding-x);
  color: var(--ds-body-color);
  background-color: rgba(var(--ds-body-bg-rgb), 0.85);
  border-bottom: 1px solid var(--ds-glass-border);
  border-top-left-radius: calc(var(--ds-toast-border-radius) - var(--ds-toast-border-width));
  border-top-right-radius: calc(var(--ds-toast-border-radius) - var(--ds-toast-border-width));
}

.ds-toast-body {
  padding: var(--ds-toast-padding-x);
  word-wrap: break-word;
}

.ds-toast .btn-close {
  margin-right: calc(-0.5 * var(--ds-toast-padding-x));
  margin-left: var(--ds-toast-padding-x);
  background-size: 0.8rem;
  opacity: 0.8;
  filter: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='m.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  transition: all 0.2s ease;
  width: 1.2em;
  height: 1.2em;
  padding: 0;
  border: none;
  background-color: transparent;
}

.ds-toast .btn-close:hover {
  opacity: 1;
  transform: scale(1.15);
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.ds-toast .btn-close:focus {
  box-shadow: 0 0 0 2px rgba(13, 129, 255, 0.3);
  outline: none;
  border-radius: 3px;
}

/* Темная тема для btn-close */
[data-bs-theme="dark"] .ds-toast .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='m.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  filter: none;
}

[data-bs-theme="dark"] .ds-toast .btn-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Toast variants */
.ds-toast-success {
  border-left: 4px solid var(--ds-success);
}

.ds-toast-danger {
  border-left: 4px solid var(--ds-danger);
}

.ds-toast-warning {
  border-left: 4px solid var(--ds-warning);
}

.ds-toast-info {
  border-left: 4px solid var(--ds-info);
}

/* Адаптивность для toast */
@media (max-width: 576px) {
  .ds-toast-container {
    left: 1rem !important;
    right: 1rem !important;
    top: 1rem !important;
    width: auto !important;
  }
  
  .ds-toast {
    width: 100%;
    max-width: none;
  }
}

/* ==========================================================================
   Grid System
   ========================================================================== */
.ds-container,
.ds-container-fluid {
  width: 100%;
  padding-right: calc(var(--ds-gutter-x) * 0.5);
  padding-left: calc(var(--ds-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .ds-container { max-width: 540px; }
}

@media (min-width: 768px) {
  .ds-container { max-width: 720px; }
}

@media (min-width: 992px) {
  .ds-container { max-width: 960px; }
}

@media (min-width: 1200px) {
  .ds-container { max-width: 1140px; }
}

@media (min-width: 1400px) {
  .ds-container { max-width: 1320px; }
}

.ds-row {
  --ds-gutter-x: 1.5rem;
  --ds-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--ds-gutter-y));
  margin-right: calc(-0.5 * var(--ds-gutter-x));
  margin-left: calc(-0.5 * var(--ds-gutter-x));
}

.ds-row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--ds-gutter-x) * 0.5);
  padding-left: calc(var(--ds-gutter-x) * 0.5);
  margin-top: var(--ds-gutter-y);
}

/* Column sizes */
.ds-col { flex: 1 0 0%; }
.ds-col-auto { flex: 0 0 auto; width: auto; }
.ds-col-1 { flex: 0 0 auto; width: 8.33333333%; }
.ds-col-2 { flex: 0 0 auto; width: 16.66666667%; }
.ds-col-3 { flex: 0 0 auto; width: 25%; }
.ds-col-4 { flex: 0 0 auto; width: 33.33333333%; }
.ds-col-5 { flex: 0 0 auto; width: 41.66666667%; }
.ds-col-6 { flex: 0 0 auto; width: 50%; }
.ds-col-7 { flex: 0 0 auto; width: 58.33333333%; }
.ds-col-8 { flex: 0 0 auto; width: 66.66666667%; }
.ds-col-9 { flex: 0 0 auto; width: 75%; }
.ds-col-10 { flex: 0 0 auto; width: 83.33333333%; }
.ds-col-11 { flex: 0 0 auto; width: 91.66666667%; }
.ds-col-12 { flex: 0 0 auto; width: 100%; }

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

/* Margin auto */
.ds-m-auto { margin: auto !important; }
.ds-mt-auto { margin-top: auto !important; }
.ds-mb-auto { margin-bottom: auto !important; }
.ds-ms-auto { margin-left: auto !important; }
.ds-me-auto { margin-right: auto !important; }
.ds-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ds-my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Gap utilities для Flexbox/Grid */
.ds-gap-0 { gap: var(--ds-spacing-0) !important; }
.ds-gap-1 { gap: var(--ds-spacing-1) !important; }
.ds-gap-2 { gap: var(--ds-spacing-2) !important; }
.ds-gap-3 { gap: var(--ds-spacing-3) !important; }
.ds-gap-4 { gap: var(--ds-spacing-4) !important; }
.ds-gap-5 { gap: var(--ds-spacing-5) !important; }

/* ==========================================================================
   Display Utilities
   ========================================================================== */
.ds-d-none { display: none !important; }
.ds-d-inline { display: inline !important; }
.ds-d-inline-block { display: inline-block !important; }
.ds-d-block { display: block !important; }
.ds-d-grid { display: grid !important; }
.ds-d-table { display: table !important; }
.ds-d-flex { display: flex !important; }
.ds-d-inline-flex { display: inline-flex !important; }

/* Flex utilities */
.ds-flex-row { flex-direction: row !important; }
.ds-flex-column { flex-direction: column !important; }
.ds-flex-row-reverse { flex-direction: row-reverse !important; }
.ds-flex-column-reverse { flex-direction: column-reverse !important; }
.ds-flex-wrap { flex-wrap: wrap !important; }
.ds-flex-nowrap { flex-wrap: nowrap !important; }
.ds-flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.ds-flex-fill { flex: 1 1 auto !important; }
.ds-flex-grow-0 { flex-grow: 0 !important; }
.ds-flex-grow-1 { flex-grow: 1 !important; }
.ds-flex-shrink-0 { flex-shrink: 0 !important; }
.ds-flex-shrink-1 { flex-shrink: 1 !important; }

/* Justify content */
.ds-justify-content-start { justify-content: flex-start !important; }
.ds-justify-content-end { justify-content: flex-end !important; }
.ds-justify-content-center { justify-content: center !important; }
.ds-justify-content-between { justify-content: space-between !important; }
.ds-justify-content-around { justify-content: space-around !important; }
.ds-justify-content-evenly { justify-content: space-evenly !important; }

/* Align items */
.ds-align-items-start { align-items: flex-start !important; }
.ds-align-items-end { align-items: flex-end !important; }
.ds-align-items-center { align-items: center !important; }
.ds-align-items-baseline { align-items: baseline !important; }
.ds-align-items-stretch { align-items: stretch !important; }

/* Align self */
.ds-align-self-auto { align-self: auto !important; }
.ds-align-self-start { align-self: flex-start !important; }
.ds-align-self-end { align-self: flex-end !important; }
.ds-align-self-center { align-self: center !important; }
.ds-align-self-baseline { align-self: baseline !important; }
.ds-align-self-stretch { align-self: stretch !important; }

/* ==========================================================================
   Position Utilities
   ========================================================================== */
.ds-position-static { position: static !important; }
.ds-position-relative { position: relative !important; }
.ds-position-absolute { position: absolute !important; }
.ds-position-fixed { position: fixed !important; }
.ds-position-sticky { position: sticky !important; }

/* Top/Bottom/Left/Right */
.ds-top-0 { top: 0 !important; }
.ds-top-50 { top: 50% !important; }
.ds-top-100 { top: 100% !important; }
.ds-bottom-0 { bottom: 0 !important; }
.ds-bottom-50 { bottom: 50% !important; }
.ds-bottom-100 { bottom: 100% !important; }
.ds-start-0 { left: 0 !important; }
.ds-start-50 { left: 50% !important; }
.ds-start-100 { left: 100% !important; }
.ds-end-0 { right: 0 !important; }
.ds-end-50 { right: 50% !important; }
.ds-end-100 { right: 100% !important; }

/* Translate middle */
.ds-translate-middle {
  transform: translate(-50%, -50%) !important;
}

.ds-translate-middle-x {
  transform: translateX(-50%) !important;
}

.ds-translate-middle-y {
  transform: translateY(-50%) !important;
}

/* ==========================================================================
   Overflow Utilities
   ========================================================================== */
.ds-overflow-auto { overflow: auto !important; }
.ds-overflow-hidden { overflow: hidden !important; }
.ds-overflow-visible { overflow: visible !important; }
.ds-overflow-scroll { overflow: scroll !important; }
.ds-overflow-x-auto { overflow-x: auto !important; }
.ds-overflow-x-hidden { overflow-x: hidden !important; }
.ds-overflow-x-visible { overflow-x: visible !important; }
.ds-overflow-x-scroll { overflow-x: scroll !important; }
.ds-overflow-y-auto { overflow-y: auto !important; }
.ds-overflow-y-hidden { overflow-y: hidden !important; }
.ds-overflow-y-visible { overflow-y: visible !important; }
.ds-overflow-y-scroll { overflow-y: scroll !important; }

/* ==========================================================================
   Text Utilities
   ========================================================================== */
.ds-text-start { text-align: left !important; }
.ds-text-end { text-align: right !important; }
.ds-text-center { text-align: center !important; }
.ds-text-justify { text-align: justify !important; }

.ds-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-text-wrap { white-space: normal !important; }
.ds-text-nowrap { white-space: nowrap !important; }
.ds-text-break { word-wrap: break-word !important; word-break: break-word !important; }

/* Text transform */
.ds-text-lowercase { text-transform: lowercase !important; }
.ds-text-uppercase { text-transform: uppercase !important; }
.ds-text-capitalize { text-transform: capitalize !important; }

/* Text decoration */
.ds-text-decoration-none { text-decoration: none !important; }
.ds-text-decoration-underline { text-decoration: underline !important; }
.ds-text-decoration-line-through { text-decoration: line-through !important; }

/* Font weight */
.ds-fw-light { font-weight: 300 !important; }
.ds-fw-lighter { font-weight: lighter !important; }
.ds-fw-normal { font-weight: var(--ds-font-weight-normal) !important; }
.ds-fw-medium { font-weight: var(--ds-font-weight-medium) !important; }
.ds-fw-semibold { font-weight: var(--ds-font-weight-semibold) !important; }
.ds-fw-bold { font-weight: var(--ds-font-weight-bold) !important; }
.ds-fw-bolder { font-weight: bolder !important; }

/* Font style */
.ds-fst-italic { font-style: italic !important; }
.ds-fst-normal { font-style: normal !important; }

/* Font size */
.ds-fs-1 { font-size: calc(1.375rem + 1.5vw) !important; }
.ds-fs-2 { font-size: calc(1.325rem + 0.9vw) !important; }
.ds-fs-3 { font-size: calc(1.3rem + 0.6vw) !important; }
.ds-fs-4 { font-size: calc(1.275rem + 0.3vw) !important; }
.ds-fs-5 { font-size: 1.25rem !important; }
.ds-fs-6 { font-size: 1rem !important; }

/* Line height */
.ds-lh-1 { line-height: 1 !important; }
.ds-lh-sm { line-height: 1.25 !important; }
.ds-lh-base { line-height: 1.5 !important; }
.ds-lh-lg { line-height: 2 !important; }

/* Text colors */
.ds-text-primary { color: var(--ds-primary) !important; }
.ds-text-secondary { color: var(--ds-secondary) !important; }
.ds-text-success { color: var(--ds-success) !important; }
.ds-text-danger { color: var(--ds-danger) !important; }
.ds-text-warning { color: var(--ds-warning) !important; }
.ds-text-info { color: var(--ds-info) !important; }
.ds-text-light { color: var(--ds-light) !important; }
.ds-text-dark { color: var(--ds-dark) !important; }
.ds-text-body { color: var(--ds-body-color) !important; }
.ds-text-muted { color: var(--bs-secondary-color) !important; }
.ds-text-white { color: #fff !important; }
.ds-text-black { color: #000 !important; }

/* ==========================================================================
   Background Utilities
   ========================================================================== */
.ds-bg-primary { background-color: var(--ds-primary) !important; }
.ds-bg-secondary { background-color: var(--ds-secondary) !important; }
.ds-bg-success { background-color: var(--ds-success) !important; }
.ds-bg-danger { background-color: var(--ds-danger) !important; }
.ds-bg-warning { background-color: var(--ds-warning) !important; }
.ds-bg-info { background-color: var(--ds-info) !important; }
.ds-bg-light { background-color: var(--ds-light) !important; }
.ds-bg-dark { background-color: var(--ds-dark) !important; }
.ds-bg-body { background-color: var(--ds-body-bg) !important; }
.ds-bg-white { background-color: #fff !important; }
.ds-bg-transparent { background-color: transparent !important; }

/* Background opacity variants */
.ds-bg-opacity-10 { --bs-bg-opacity: 0.1; }
.ds-bg-opacity-25 { --bs-bg-opacity: 0.25; }
.ds-bg-opacity-50 { --bs-bg-opacity: 0.5; }
.ds-bg-opacity-75 { --bs-bg-opacity: 0.75; }
.ds-bg-opacity-100 { --bs-bg-opacity: 1; }

/* ==========================================================================
   Border Utilities
   ========================================================================== */
.ds-border { border: var(--ds-border-width) var(--ds-border-style) var(--ds-border-color) !important; }
.ds-border-0 { border: 0 !important; }
.ds-border-top { border-top: var(--ds-border-width) var(--ds-border-style) var(--ds-border-color) !important; }
.ds-border-top-0 { border-top: 0 !important; }
.ds-border-end { border-right: var(--ds-border-width) var(--ds-border-style) var(--ds-border-color) !important; }
.ds-border-end-0 { border-right: 0 !important; }
.ds-border-bottom { border-bottom: var(--ds-border-width) var(--ds-border-style) var(--ds-border-color) !important; }
.ds-border-bottom-0 { border-bottom: 0 !important; }
.ds-border-start { border-left: var(--ds-border-width) var(--ds-border-style) var(--ds-border-color) !important; }
.ds-border-start-0 { border-left: 0 !important; }

/* Border colors */
.ds-border-primary { border-color: var(--ds-primary) !important; }
.ds-border-secondary { border-color: var(--ds-secondary) !important; }
.ds-border-success { border-color: var(--ds-success) !important; }
.ds-border-danger { border-color: var(--ds-danger) !important; }
.ds-border-warning { border-color: var(--ds-warning) !important; }
.ds-border-info { border-color: var(--ds-info) !important; }
.ds-border-light { border-color: var(--ds-light) !important; }
.ds-border-dark { border-color: var(--ds-dark) !important; }
.ds-border-white { border-color: #fff !important; }

/* Border radius */
.ds-rounded { border-radius: var(--ds-radius-sm) !important; }
.ds-rounded-0 { border-radius: 0 !important; }
.ds-rounded-1 { border-radius: var(--ds-radius-sm) !important; }
.ds-rounded-2 { border-radius: var(--ds-radius-md) !important; }
.ds-rounded-3 { border-radius: var(--ds-radius-lg) !important; }
.ds-rounded-4 { border-radius: var(--ds-radius-xl) !important; }
.ds-rounded-circle { border-radius: var(--ds-radius-circle) !important; }
.ds-rounded-pill { border-radius: var(--ds-radius-pill) !important; }

/* Rounded corners */
.ds-rounded-top { border-top-left-radius: var(--ds-radius-sm) !important; border-top-right-radius: var(--ds-radius-sm) !important; }
.ds-rounded-end { border-top-right-radius: var(--ds-radius-sm) !important; border-bottom-right-radius: var(--ds-radius-sm) !important; }
.ds-rounded-bottom { border-bottom-right-radius: var(--ds-radius-sm) !important; border-bottom-left-radius: var(--ds-radius-sm) !important; }
.ds-rounded-start { border-bottom-left-radius: var(--ds-radius-sm) !important; border-top-left-radius: var(--ds-radius-sm) !important; }

/* ==========================================================================
   Shadow Utilities
   ========================================================================== */
.ds-shadow { box-shadow: var(--ds-shadow-md) !important; }
.ds-shadow-sm { box-shadow: var(--ds-shadow-sm) !important; }
.ds-shadow-lg { box-shadow: var(--ds-shadow-lg) !important; }
.ds-shadow-none { box-shadow: none !important; }

/* ==========================================================================
   Sizing Utilities
   ========================================================================== */
.ds-w-25 { width: 25% !important; }
.ds-w-50 { width: 50% !important; }
.ds-w-75 { width: 75% !important; }
.ds-w-100 { width: 100% !important; }
.ds-w-auto { width: auto !important; }

.ds-h-25 { height: 25% !important; }
.ds-h-50 { height: 50% !important; }
.ds-h-75 { height: 75% !important; }
.ds-h-100 { height: 100% !important; }
.ds-h-auto { height: auto !important; }

.ds-mw-100 { max-width: 100% !important; }
.ds-mh-100 { max-height: 100% !important; }

.ds-vw-100 { width: 100vw !important; }
.ds-vh-100 { height: 100vh !important; }
.ds-min-vw-100 { min-width: 100vw !important; }
.ds-min-vh-100 { min-height: 100vh !important; }

/* ==========================================================================
   Visibility Utilities
   ========================================================================== */
.ds-visible { visibility: visible !important; }
.ds-invisible { visibility: hidden !important; }

.ds-opacity-0 { opacity: 0 !important; }
.ds-opacity-25 { opacity: 0.25 !important; }
.ds-opacity-50 { opacity: 0.5 !important; }
.ds-opacity-75 { opacity: 0.75 !important; }
.ds-opacity-100 { opacity: 1 !important; }

/* ==========================================================================
   Component States
   ========================================================================== */

/* Disabled state */
.ds-disabled,
[disabled].ds-disabled {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

/* Loading state */
.ds-loading {
  position: relative;
  pointer-events: none;
}

.ds-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ds-spin 0.75s linear infinite;
}

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

/* Interactive states */
.ds-interactive {
  cursor: pointer;
  user-select: none;
  transition: all var(--ds-transition-base);
}

.ds-interactive:hover {
  opacity: 0.8;
}

.ds-interactive:active {
  transform: scale(0.98);
}

/* User select */
.ds-user-select-all { user-select: all !important; }
.ds-user-select-auto { user-select: auto !important; }
.ds-user-select-none { user-select: none !important; }

/* Pointer events */
.ds-pe-none { pointer-events: none !important; }
.ds-pe-auto { pointer-events: auto !important; }

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */
@media (min-width: 576px) {
  .ds-d-sm-none { display: none !important; }
  .ds-d-sm-block { display: block !important; }
  .ds-d-sm-flex { display: flex !important; }
}

@media (min-width: 768px) {
  .ds-d-md-none { display: none !important; }
  .ds-d-md-block { display: block !important; }
  .ds-d-md-flex { display: flex !important; }
}

@media (min-width: 992px) {
  .ds-d-lg-none { display: none !important; }
  .ds-d-lg-block { display: block !important; }
  .ds-d-lg-flex { display: flex !important; }
}

@media (min-width: 1200px) {
  .ds-d-xl-none { display: none !important; }
  .ds-d-xl-block { display: block !important; }
  .ds-d-xl-flex { display: flex !important; }
}

@media (min-width: 1400px) {
  .ds-d-xxl-none { display: none !important; }
  .ds-d-xxl-block { display: block !important; }
  .ds-d-xxl-flex { display: flex !important; }
}

/* ==========================================================================
   СТИЛИ ИЗ CUSTOM-THEME.CSS (уникальные компоненты)
   ========================================================================== */

/* ==========================================================================
   Применение шрифта Inter
   ========================================================================== */
body {
  font-family: var(--ds-font-family-base);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ds-font-family-base);
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

/* ==========================================================================
   Navbar - Корпоративный стиль
   ========================================================================== */
.navbar {
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0.75rem 0;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.navbar-brand {
  color: var(--bs-primary) !important;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  font-family: var(--ds-font-family-base);
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.navbar-toggler {
  border: 1px solid var(--bs-border-color);
  padding: 0.375rem 0.5rem;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-nav .nav-link {
  color: var(--bs-body-color);
  padding: 0.5rem 1rem;
  transition: color 0.2s;
  font-family: var(--ds-font-family-base);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
}

.navbar-nav .nav-link:hover {
  color: var(--bs-primary);
}

/* Кнопка иконки и тема */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--bs-body-color);
  transition: all 0.2s;
  position: relative;
}

.btn-icon:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.theme-icon-dark,
.theme-icon-light {
  position: absolute;
  transition: all 0.3s;
}

.theme-icon-light {
  opacity: 0;
  transform: rotate(180deg) scale(0);
}

[data-bs-theme="dark"] .theme-icon-dark {
  opacity: 0;
  transform: rotate(-180deg) scale(0);
}

[data-bs-theme="dark"] .theme-icon-light {
  opacity: 1;
  transform: rotate(0) scale(1);
}

[data-bs-theme="dark"] .navbar {
  background-color: var(--bs-body-bg);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .navbar-brand {
  color: var(--ds-primary-300) !important;
}

[data-bs-theme="dark"] .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

[data-bs-theme="dark"] .navbar-nav .nav-link:hover {
  color: var(--ds-primary-300);
}

[data-bs-theme="dark"] .btn-icon {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
}

[data-bs-theme="dark"] .btn-icon:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

[data-bs-theme="dark"] .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    margin-top: 1rem;
  }
}

/* ==========================================================================
   Buttons - Корпоративные стили (полный набор)
   ========================================================================== */
.btn {
  font-family: var(--ds-font-family-base);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  transition: all 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn i {
  display: inline-flex;
  align-items: center;
}

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ds-primary-600);
  border-color: var(--ds-primary-600);
  color: #FFFFFF;
}

.btn-primary:active,
.btn-primary.active {
  background-color: var(--ds-primary-700);
  border-color: var(--ds-primary-700);
}

.btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #FFFFFF;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--ds-secondary-600);
  border-color: var(--ds-secondary-600);
  color: #FFFFFF;
}

.btn-success {
  background-color: var(--bs-green);
  border-color: var(--bs-green);
  color: #FFFFFF;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #059669;
  border-color: #059669;
  color: #FFFFFF;
}

.btn-danger {
  background-color: var(--bs-red);
  border-color: var(--bs-red);
  color: #FFFFFF;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #DC2626;
  border-color: #DC2626;
  color: #FFFFFF;
}

.btn-warning {
  background-color: var(--bs-yellow);
  border-color: var(--bs-yellow);
  color: #000000;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: #CA8A04;
  border-color: #CA8A04;
  color: #000000;
}

.btn-info {
  background-color: var(--bs-cyan);
  border-color: var(--bs-cyan);
  color: #FFFFFF;
}

.btn-info:hover,
.btn-info:focus {
  background-color: #0891B2;
  border-color: #0891B2;
  color: #FFFFFF;
}

.btn-dark {
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
  color: #FFFFFF;
}

.btn-dark:hover,
.btn-dark:focus {
  background-color: var(--ds-dark-600);
  border-color: var(--ds-dark-600);
  color: #FFFFFF;
}

.btn-light {
  background-color: #F8F9FA;
  border-color: #F8F9FA;
  color: #000000;
}

.btn-light:hover,
.btn-light:focus {
  background-color: #E9ECEF;
  border-color: #E9ECEF;
  color: #000000;
}

/* Outline кнопки */
.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #FFFFFF;
}

.btn-outline-secondary {
  color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #FFFFFF;
}

.btn-outline-success {
  color: var(--bs-green);
  border-color: var(--bs-green);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--bs-green);
  border-color: var(--bs-green);
  color: #FFFFFF;
}

.btn-outline-danger {
  color: var(--bs-red);
  border-color: var(--bs-red);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--bs-red);
  border-color: var(--bs-red);
  color: #FFFFFF;
}

.btn-outline-warning {
  color: var(--bs-yellow);
  border-color: var(--bs-yellow);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background-color: var(--bs-yellow);
  border-color: var(--bs-yellow);
  color: #000000;
}

.btn-outline-info {
  color: var(--bs-cyan);
  border-color: var(--bs-cyan);
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  background-color: var(--bs-cyan);
  border-color: var(--bs-cyan);
  color: #FFFFFF;
}

.btn-outline-dark {
  color: var(--bs-dark);
  border-color: var(--bs-dark);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
  color: #FFFFFF;
}

.btn-outline-light {
  color: #6C757D;
  border-color: #F8F9FA;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
  background-color: #F8F9FA;
  border-color: #F8F9FA;
  color: #000000;
}

/* ==========================================================================
   Buttons - Расширенные эффекты (из Bootstrap Theme)
   ========================================================================== */

/* Box-shadow эффекты для кнопок */
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary:hover {
  box-shadow: 0 4px 11px rgba(13, 129, 255, 0.35);
}

.btn-check:focus + .btn-secondary,
.btn-secondary:focus,
.btn-secondary:hover {
  box-shadow: 0 4px 11px rgba(29, 56, 86, 0.35);
}

.btn-check:focus + .btn-success,
.btn-success:focus,
.btn-success:hover {
  box-shadow: 0 4px 11px rgba(16, 185, 129, 0.35);
}

.btn-check:focus + .btn-info,
.btn-info:focus,
.btn-info:hover {
  box-shadow: 0 4px 11px rgba(6, 182, 212, 0.35);
}

.btn-check:focus + .btn-warning,
.btn-warning:focus,
.btn-warning:hover {
  box-shadow: 0 4px 11px rgba(234, 179, 8, 0.35);
}

.btn-check:focus + .btn-danger,
.btn-danger:focus,
.btn-danger:hover {
  box-shadow: 0 4px 11px rgba(239, 68, 68, 0.35);
}

.btn-check:focus + .btn-light,
.btn-light:focus,
.btn-light:hover {
  box-shadow: 0 4px 11px rgba(248, 249, 250, 0.35);
}

.btn-check:focus + .btn-dark,
.btn-dark:focus,
.btn-dark:hover {
  box-shadow: 0 4px 11px rgba(21, 23, 30, 0.35);
}

/* Outline кнопки с box-shadow */
.btn-outline-primary:focus,
.btn-outline-primary:hover {
  box-shadow: 0 4px 11px rgba(13, 129, 255, 0.25);
}

.btn-outline-secondary:focus,
.btn-outline-secondary:hover {
  box-shadow: 0 4px 11px rgba(29, 56, 86, 0.25);
}

.btn-outline-success:focus,
.btn-outline-success:hover {
  box-shadow: 0 4px 11px rgba(16, 185, 129, 0.25);
}

.btn-outline-info:focus,
.btn-outline-info:hover {
  box-shadow: 0 4px 11px rgba(6, 182, 212, 0.25);
}

.btn-outline-warning:focus,
.btn-outline-warning:hover {
  box-shadow: 0 4px 11px rgba(234, 179, 8, 0.25);
}

.btn-outline-danger:focus,
.btn-outline-danger:hover {
  box-shadow: 0 4px 11px rgba(239, 68, 68, 0.25);
}

.btn-outline-light:focus,
.btn-outline-light:hover {
  box-shadow: 0 4px 11px rgba(248, 249, 250, 0.25);
}

.btn-outline-dark:focus,
.btn-outline-dark:hover {
  box-shadow: 0 4px 11px rgba(21, 23, 30, 0.25);
}

/* Active shadow для всех кнопок */
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/* Размеры кнопок */
.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  border-radius: var(--ds-radius-md);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: var(--ds-radius-sm);
}

/* Кнопки группы */
.btn-group .btn {
  position: relative;
  z-index: 2;
}

.btn-group .btn:focus,
.btn-group .btn:hover,
.btn-group .btn:active {
  z-index: 5;
}

/* Состояния кнопок */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  pointer-events: none;
  opacity: 0.65;
  box-shadow: none;
}

/* Кнопка-ссылка */
.btn-link {
  font-weight: var(--ds-font-weight-normal);
  color: var(--ds-link-color);
  text-decoration: none;
}

.btn-link:hover {
  color: var(--ds-link-hover-color);
  text-decoration: underline;
}

.btn-link:disabled,
.btn-link.disabled {
  color: var(--ds-gray-400);
}

/* Кнопка закрытия */
.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: var(--ds-radius-sm);
  opacity: 0.5;
}

.btn-close:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}

.btn-close:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 129, 255, 0.25);
  opacity: 1;
}

.btn-close:disabled,
.btn-close.disabled {
  pointer-events: none;
  user-select: none;
  opacity: 0.25;
}

/* Темная тема для btn-close */
[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==========================================================================
   Cards - Корпоративный стиль
   ========================================================================== */
.card {
  border-color: var(--bs-border-color);
  box-shadow: 0 0.125rem 0.25rem rgba(21, 23, 30, 0.075);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.card-header {
  background-color: rgba(13, 129, 255, 0.05);
  border-bottom-color: var(--bs-border-color);
}

/* ==========================================================================
   Alerts - Корпоративные цвета
   ========================================================================== */
.alert-primary {
  background-color: rgba(13, 129, 255, 0.1);
  border-color: rgba(13, 129, 255, 0.2);
  color: var(--ds-primary-700);
}

.alert-secondary {
  background-color: rgba(29, 56, 86, 0.1);
  border-color: rgba(29, 56, 86, 0.2);
  color: var(--ds-secondary-700);
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
  color: #059669;
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #DC2626;
}

.alert-warning {
  background-color: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.2);
  color: #CA8A04;
}

.alert-info {
  background-color: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.2);
  color: #0891B2;
}

.alert-dark {
  background-color: rgba(21, 23, 30, 0.1);
  border-color: rgba(21, 23, 30, 0.2);
  color: var(--ds-dark-700);
}

.alert-light {
  background-color: #FEFEFE;
  border-color: #FDFDFE;
  color: #818182;
}

/* ==========================================================================
   Forms - Корпоративные цвета
   ========================================================================== */
.form-control,
.form-select,
.form-label {
  font-family: var(--ds-font-family-base);
  font-optical-sizing: auto;
  font-style: normal;
  transition: all 0.15s ease-in-out;
}

.form-control:focus {
  border-color: var(--ds-primary-300);
  box-shadow: 0 0 0 0.2rem rgba(13, 129, 255, 0.25);
}

.form-select:focus {
  border-color: var(--ds-primary-300);
  box-shadow: 0 0 0 0.2rem rgba(13, 129, 255, 0.25);
}

/* ==========================================================================
   Progress Bars - Корпоративные цвета
   ========================================================================== */
.progress-bar {
  background-color: var(--bs-primary);
}

.progress-bar.bg-primary { background-color: var(--bs-primary) !important; }
.progress-bar.bg-secondary { background-color: var(--bs-secondary) !important; }
.progress-bar.bg-success { background-color: var(--bs-green) !important; }
.progress-bar.bg-danger { background-color: var(--bs-red) !important; }
.progress-bar.bg-warning { background-color: var(--bs-yellow) !important; }
.progress-bar.bg-info { background-color: var(--bs-cyan) !important; }
.progress-bar.bg-dark { background-color: var(--bs-dark) !important; }

/* ==========================================================================
   Badges - Корпоративные цвета
   ========================================================================== */
.badge.bg-primary { background-color: var(--bs-primary) !important; }
.badge.bg-secondary { background-color: var(--bs-secondary) !important; }
.badge.bg-dark { background-color: var(--bs-dark) !important; }

.badge.bg-success,
.bg-success {
  background-color: var(--bs-green) !important;
  color: #FFFFFF !important;
}

.badge.bg-danger,
.bg-danger {
  background-color: var(--bs-red) !important;
  color: #FFFFFF !important;
}

.badge.bg-warning,
.bg-warning {
  background-color: var(--bs-yellow) !important;
  color: #000000 !important;
}

.badge.bg-info,
.bg-info {
  background-color: var(--bs-cyan) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   Текстовые утилиты - Корпоративные цвета
   ========================================================================== */
.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-success { color: var(--bs-green) !important; }
.text-info { color: var(--bs-cyan) !important; }
.text-warning { color: var(--bs-yellow) !important; }
.text-danger { color: var(--bs-red) !important; }
.text-dark { color: var(--bs-dark) !important; }

/* ==========================================================================
   Фоновые утилиты - Корпоративные цвета
   ========================================================================== */
.bg-primary { background-color: var(--bs-primary) !important; color: #FFFFFF !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; color: #FFFFFF !important; }
.bg-success { background-color: var(--bs-green) !important; color: #FFFFFF !important; }
.bg-info { background-color: var(--bs-cyan) !important; color: #FFFFFF !important; }
.bg-warning { background-color: var(--bs-yellow) !important; color: #000000 !important; }
.bg-danger { background-color: var(--bs-red) !important; color: #FFFFFF !important; }
.bg-dark { background-color: var(--bs-dark) !important; color: #FFFFFF !important; }
.bg-light { background-color: #F8F9FA !important; color: #000000 !important; }

/* ==========================================================================
   Границы - Корпоративные цвета
   ========================================================================== */
.border-primary { border-color: var(--bs-primary) !important; }
.border-secondary { border-color: var(--bs-secondary) !important; }
.border-success { border-color: var(--bs-green) !important; }
.border-info { border-color: var(--bs-cyan) !important; }
.border-warning { border-color: var(--bs-yellow) !important; }
.border-danger { border-color: var(--bs-red) !important; }
.border-dark { border-color: var(--bs-dark) !important; }
.border-light { border-color: #DEE2E6 !important; }

/* ==========================================================================
   Ссылки
   ========================================================================== */
a {
  color: var(--bs-link-color);
  text-decoration: none;
}

a:hover {
  color: var(--bs-link-hover-color);
}

/* ==========================================================================
   Пагинация - Корпоративные цвета
   ========================================================================== */
.page-link {
  color: var(--bs-primary);
}

.page-link:hover {
  color: var(--ds-primary-700);
  background-color: var(--ds-primary-100);
  border-color: var(--ds-primary-300);
}

.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #FFFFFF;
}

/* ==========================================================================
   Модальные окна
   ========================================================================== */
.modal-header {
  border-bottom-color: var(--bs-border-color);
}

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

.modal-content {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ==========================================================================
   Dropdown - Корпоративные цвета
   ========================================================================== */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(13, 129, 255, 0.1);
  color: var(--ds-primary-700);
}

.dropdown-item.active {
  background-color: var(--bs-primary);
  color: #FFFFFF;
}

/* ==========================================================================
   Footer - Минималистичный, адаптивный под тему
   ========================================================================== */
.footer {
  background-color: #F8F9FA !important;
  border-top: 1px solid var(--bs-border-color);
  margin-top: auto;
  color: var(--bs-body-color) !important;
}

.footer .footer-links a {
  font-size: 0.9rem;
  transition: color 0.2s ease;
  color: var(--bs-secondary-color) !important;
}

.footer .footer-links a:hover {
  color: var(--bs-primary) !important;
}

.footer .text-muted {
  color: var(--bs-secondary-color) !important;
}

/* Темная тема для footer */
[data-bs-theme="dark"] .footer {
  background-color: #1D3856 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFFFFF !important;
}

[data-bs-theme="dark"] .footer .footer-links a {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-bs-theme="dark"] .footer .footer-links a:hover {
  color: var(--ds-primary-300) !important;
}

[data-bs-theme="dark"] .footer .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Адаптивность footer */
@media (max-width: 768px) {
  .footer .col-md-6:first-child {
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .footer .col-md-6:last-child {
    text-align: center !important;
  }
  
  .footer .d-flex.flex-column.align-items-md-end {
    align-items: center !important;
  }
  
  .footer .footer-links a {
    margin: 0 0.75rem !important;
  }
  
  .btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }
}