/**
 * KLIMOV RED Design System
 *
 * ⚠️  HAND-MAINTAINED FILE — DO NOT REGENERATE!
 * Running `npm run css:build` outputs to tailwind-utilities.css, NOT here.
 * This file contains design tokens, domain components, and utility classes
 * that are NOT produced by the Tailwind build.
 *
 * Официальная цветовая палитра:
 * - #f24c3f (KLIMOV RED - Primary)
 * - #b93c35 (Dark Red)
 * - #ededed (Light Gray)
 * - #2d2d2d (Dark Gray)
 * - #000000 (Black)
 * - #ffffff (White)
 *
 * Принципы:
 * - Mobile-first (390×844 базовый размер)
 * - Минимализм
 * - 8pt/4pt сетка
 * - Компактные формы
 */

/* ========================================
   CSS Variables (Design Tokens)
   ======================================== */

:root {
  /* Inform browser we support both modes */
  color-scheme: light dark;

  /* KLIMOV RED Brand Colors - Light Mode */
  --primary: #f24c3f;
  --primary-hover: #d63f33;
  --primary-dark: #b93c35;
  --primary-rgb: 242, 76, 63;
  --primary-muted: rgba(242, 76, 63, 0.1);
  --secondary: #ededed;
  --foreground: #2d2d2d;
  --background: #ffffff;
  --black: #000000;

  /* Semantic Colors - Light Mode */
  --text-primary: #000000;
  --text-secondary: #2d2d2d;
  --text-muted: #6b7280;
  --text-success: #16a34a;
  --text-warning: #d97706;
  --text-danger: #dc2626;
  --text-info: #3b82f6;
  --border: rgba(45, 45, 45, 0.1);
  --border-color: rgba(45, 45, 45, 0.1);
  --border-secondary: rgba(45, 45, 45, 0.05);
  --input-bg: #ededed;
  --destructive: #b93c35;
  --danger: #dc2626;
  --warning: #f59e0b;
  --success: #16a34a;
  --info: #3b82f6;
  --purple: #8b5cf6;
  --cyan: #06b6d4;

  /* Surface Colors */
  --surface-primary: #ffffff;
  --surface-secondary: #f9fafb;
  --surface-tertiary: #f3f4f6;
  --surface-elevated: #ffffff;

  /* Background Aliases */
  --bg-white: #ffffff;
  --bg-secondary: #f3f4f6;
  --primary-bg: rgba(242, 76, 63, 0.1);

  /* Status Colors with backgrounds */
  --success-bg: rgba(22, 163, 74, 0.1);
  --warning-bg: rgba(245, 158, 11, 0.1);
  --danger-bg: rgba(220, 38, 38, 0.1);
  --info-bg: rgba(59, 130, 246, 0.1);

  /* Search highlight (warm amber from palette, complements KLIMOV RED) */
  --highlight-bg: #fde68a;
  --highlight-bg-dark: #f59e0b;
  --highlight-text-dark: #1a1a1a;

  /* Premium gradient (for "All folders" icon etc.) */
  --gradient-premium: linear-gradient(135deg, #6b8cff 0%, #8b5cf6 50%, #d946ef 100%);

  /* Accent Colors */
  --accent-primary: #f24c3f;
  --accent-primary-muted: rgba(242, 76, 63, 0.1);
  --accent-warning: #f59e0b;

  /* Spacing (4pt/8pt grid) */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;

  /* Spacing Aliases (for compatibility with alternative naming) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Color Aliases (for compatibility with alternative naming) */
  --color-primary: #f24c3f;
  --color-primary-50: rgba(242, 76, 63, 0.05);
  --color-primary-100: rgba(242, 76, 63, 0.1);
  --color-primary-200: rgba(242, 76, 63, 0.2);
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-hover: #f3f4f6;
  --color-border: rgba(45, 45, 45, 0.1);
  --color-text: #000000;
  --color-text-muted: #6b7280;
  --color-neutral-200: #e5e7eb;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-700: #374151;
  --color-neutral-900: #111827;
  --color-primary-light: rgba(242, 76, 63, 0.1);

  /* Background Aliases */
  --background: #ffffff;
  --background-hover: #f3f4f6;
  --background-secondary: #f3f4f6;
  --foreground: #000000;
  --card-bg: #ffffff;
  --dropdown-bg: #ffffff;
  --hover-bg: #f3f4f6;
  --secondary: #6b7280;
  --error: #dc2626;

  /* Font Aliases */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Transition */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Shadows - Light Mode */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.2);
  --shadow-primary: 0 2px 8px rgba(220, 38, 38, 0.3);

  /* Typography Scale */
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;

  /* Z-Index Scale (layering system) */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-toast: 700;
  --z-max: 9999;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Dark Mode
   ======================================== */

/* Dark mode - принудительно темная тема */
html[data-theme="dark"] {
  /* KLIMOV RED Brand Colors - Dark Mode */
  /* Slightly desaturated and lighter red for dark backgrounds */
  --primary: #ff6b5e;
  --primary-hover: #ff8578;
  --primary-dark: #ff5243;
  --primary-muted: rgba(255, 107, 94, 0.15);
  --secondary: #2a2a2a;
  --foreground: #1a1a1a; /* Темный фон для навигации */
  --background: #0f0f0f;

  /* Semantic Colors - Dark Mode */
  --text-primary: #f5f5f5;
  --text-secondary: #e5e5e5;
  --text-muted: #9ca3af;
  --text-success: #4ade80;
  --border: rgba(255, 255, 255, 0.1);
  --border-color: rgba(255, 255, 255, 0.1);
  --input-bg: #1a1a1a;
  --destructive: #ff5243;

  /* Surface Colors - Dark Mode */
  --surface-primary: #0f0f0f;
  --surface-secondary: #1a1a1a;
  --surface-tertiary: #242424;
  --hover-bg: #1f1f1f;
  --background-hover: #1f1f1f;

  /* Accent Colors - Dark Mode */
  --accent-primary: #ff6b5e;
  --accent-primary-muted: rgba(255, 107, 94, 0.15);
  --accent-warning: #f59e0b;

  /* Shadows - Dark Mode (more subtle) */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-primary: 0 2px 8px rgba(255, 107, 94, 0.4);

  /* Backgrounds - Dark Mode */
  --bg-white: #1a1a1a;
  --bg-secondary: #242424;
  --dropdown-bg: #1a1a1a;
  --card-bg: #1a1a1a;
}

/* Auto mode - следует за системной темой */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    /* KLIMOV RED Brand Colors - Dark Mode */
    --primary: #ff6b5e;
    --primary-hover: #ff8578;
    --primary-dark: #ff5243;
    --primary-muted: rgba(255, 107, 94, 0.15);
    --secondary: #2a2a2a;
    --foreground: #1a1a1a;
    --background: #0f0f0f;

    /* Semantic Colors - Dark Mode */
    --text-primary: #f5f5f5;
    --text-secondary: #e5e5e5;
    --text-muted: #9ca3af;
    --text-success: #4ade80;
    --border: rgba(255, 255, 255, 0.1);
    --border-color: rgba(255, 255, 255, 0.1);
    --input-bg: #1a1a1a;
    --destructive: #ff5243;

    /* Surface Colors - Dark Mode */
    --surface-primary: #0f0f0f;
    --surface-secondary: #1a1a1a;
    --surface-tertiary: #242424;
    --hover-bg: #1f1f1f;
    --background-hover: #1f1f1f;

    /* Accent Colors - Dark Mode */
    --accent-primary: #ff6b5e;
    --accent-primary-muted: rgba(255, 107, 94, 0.15);
    --accent-warning: #f59e0b;

    /* Shadows - Dark Mode (more subtle) */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-primary: 0 2px 8px rgba(255, 107, 94, 0.4);

    /* Backgrounds - Dark Mode */
    --bg-white: #1a1a1a;
    --bg-secondary: #242424;
    --dropdown-bg: #1a1a1a;
    --card-bg: #1a1a1a;
  }
}

/* Navigation — moved to core/navigation.css */

/* Action buttons for table rows */
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--surface-secondary);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.action-btn:hover {
  color: var(--text-primary);
  background: var(--surface-tertiary);
  transform: translateY(-1px);
}

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

/* Award button - special styling */
.action-btn.award-btn {
  color: rgba(251, 191, 36, 0.6);
}

.action-btn.award-btn:hover {
  color: rgb(251, 191, 36);
  background: rgba(251, 191, 36, 0.1);
}

.action-btn.award-btn.is-active {
  color: rgb(251, 191, 36);
  background: rgba(251, 191, 36, 0.15);
}

/* Expand offers button - rotate icon when expanded */
.action-btn.expand-offers-btn .expand-icon {
  transition: transform var(--transition-fast);
}

.action-btn.expand-offers-btn.expanded .expand-icon {
  transform: rotate(180deg);
}

/* Status badges for offers */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.status-badge.badge-award {
  background: rgba(251, 191, 36, 0.12);
  color: var(--warning);
}

.status-badge.badge-best {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
}

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

/* ========================================
   Base Styles
   ======================================== */

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Layout
   ======================================== */

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-4);
}

@media (min-width: 1024px) {
  .container {
    padding: var(--spacing-6);
  }
}

.layout-two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

@media (min-width: 1280px) {
  .layout-two-column {
    grid-template-columns: 7fr 5fr;
  }
}

/* ========================================
   Typography
   ======================================== */

h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  color: var(--text-primary);
}

h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
}

h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.text-muted {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.text-xs {
  font-size: var(--font-size-xs);
}

/* ========================================
   Cards
   ======================================== */

.card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  /* overflow: hidden убран для поддержки tooltips */
}

.card-header {
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--border);
}

.card-content {
  padding: var(--spacing-4);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

/* Buttons — moved to core/components.css */

/* Form base (.form-group, .form-label, etc.) — source of truth in core/components.css */
/* Below: form enhancements (select arrows, search icon, dark mode) unique to this file */

/* Убираем красную рамку у невалидных search input */
.form-input:invalid {
  box-shadow: none;
}

/* Custom Select styling */
.form-select {
  appearance: none;
  /* Light mode arrow */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%232d2d2d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px;
  cursor: pointer;
}

/* Dark mode select arrow - принудительная темная тема */
html[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23e5e5e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Auto mode с темной системной темой */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23e5e5e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

.form-select:hover {
  background-color: var(--primary-muted);
}

/* Date input styling */
.form-input[type="date"] {
  position: relative;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.form-input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.form-input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Search input styling */
.form-input[type="search"] {
  /* Light mode search icon */
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' stroke='%236b7280' stroke-width='2'/%3E%3Cpath d='M21 21l-4.35-4.35' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 16px;
  padding-left: 40px;
}

/* Dark mode search icon - принудительная темная тема */
html[data-theme="dark"] .form-input[type="search"] {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' stroke='%239ca3af' stroke-width='2'/%3E%3Cpath d='M21 21l-4.35-4.35' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Auto mode с темной системной темой */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .form-input[type="search"] {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' stroke='%239ca3af' stroke-width='2'/%3E%3Cpath d='M21 21l-4.35-4.35' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

.form-input[type="number"] {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

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

.form-error {
  color: var(--destructive);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-1);
}

/* ========================================
   Table
   ======================================== */

.table-wrapper {
  overflow-x: auto;
  overflow-y: visible; /* Разрешаем tooltips выходить за границы по вертикали */
  -webkit-overflow-scrolling: touch;
}

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

.table th {
  padding: var(--spacing-3);
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: var(--spacing-3);
  border-bottom: 1px solid var(--border);
}

.table tr:hover {
  background: var(--primary-muted);
}

.table-align-right {
  text-align: right;
}

.table-group-header {
  background: var(--surface-secondary);
  font-weight: var(--font-weight-medium);
}

.table-subgroup-header {
  background: var(--surface-tertiary);
  font-weight: var(--font-weight-regular);
}

.table-model-header {
  background: var(--surface-primary);
  font-weight: var(--font-weight-semibold);
  border-top: 2px solid var(--border) !important;
}

.table-model-header td {
  padding: var(--spacing-3) var(--spacing-4) !important;
}

/* Legacy .badge — removed (use kr-badge from components.css) */

/* Row with coating color tint */
.table tr.has-coating-color {
  position: relative;
  background: linear-gradient(90deg,
    rgba(var(--row-color-r), var(--row-color-g), var(--row-color-b), 0.03) 0%,
    rgba(var(--row-color-r), var(--row-color-g), var(--row-color-b), 0.01) 100%);
  transition: background 0.2s ease;
}

.table tr.has-coating-color:hover {
  background: linear-gradient(90deg,
    rgba(var(--row-color-r), var(--row-color-g), var(--row-color-b), 0.08) 0%,
    rgba(var(--row-color-r), var(--row-color-g), var(--row-color-b), 0.04) 100%) !important;
}

/* Dark mode adaptation for row tinting */
html[data-theme="dark"] .table tr.has-coating-color {
  background: linear-gradient(90deg,
    rgba(var(--row-color-r), var(--row-color-g), var(--row-color-b), 0.05) 0%,
    rgba(var(--row-color-r), var(--row-color-g), var(--row-color-b), 0.02) 100%);
}

html[data-theme="dark"] .table tr.has-coating-color:hover {
  background: linear-gradient(90deg,
    rgba(var(--row-color-r), var(--row-color-g), var(--row-color-b), 0.12) 0%,
    rgba(var(--row-color-r), var(--row-color-g), var(--row-color-b), 0.06) 100%) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .table tr.has-coating-color {
    background: linear-gradient(90deg,
      rgba(var(--row-color-r), var(--row-color-g), var(--row-color-b), 0.05) 0%,
      rgba(var(--row-color-r), var(--row-color-g), var(--row-color-b), 0.02) 100%);
  }

  html[data-theme="auto"] .table tr.has-coating-color:hover {
    background: linear-gradient(90deg,
      rgba(var(--row-color-r), var(--row-color-g), var(--row-color-b), 0.12) 0%,
      rgba(var(--row-color-r), var(--row-color-g), var(--row-color-b), 0.06) 100%) !important;
  }
}

/* Coating chips container - grid layout for alignment across rows */
.coating-chips-container {
  display: grid;
  grid-template-columns: 40px auto 1fr;
  gap: var(--spacing-2);
  align-items: center;
}

.coating-chips-container .badge {
  justify-self: start;
}

.coating-chips-container .color-chip {
  justify-self: start;
}

.coating-chips-container .finish-chip {
  justify-self: start;
}

/* Color Chips - unified style with badge */
.color-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  border: 1px solid rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  /* More subtle transparency for color backgrounds */
  opacity: 0.92;
}

html[data-theme="dark"] .color-chip,
html[data-theme="auto"] .color-chip {
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0.95;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .color-chip {
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.95;
  }
}

.color-chip-code {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  opacity: 0.6;
  margin-left: 2px;
}

/* Finish Chip - unified style with badge */
.finish-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  background: var(--surface-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.finish-chip-code {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  opacity: 0.6;
  margin-left: 1px;
}

/* Legacy .chip — removed (use kr-chip from components.css) */

/* ========================================
   Toggle Group (переключатели)
   ======================================== */

.toggle-group {
  display: inline-flex;
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: var(--spacing-1);
}

.toggle-btn {
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.toggle-btn:hover:not(.active):not(:disabled) {
  color: var(--text-primary);
  background: var(--surface-tertiary);
}

.toggle-btn.active {
  background: var(--surface-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.toggle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Цветные toggle варианты */
.toggle-btn--primary.active {
  background: var(--primary);
  color: white;
}

.toggle-btn--danger.active {
  background: var(--danger);
  color: white;
}

/* ========================================
   Margin Indicators (индикаторы маржи)
   ======================================== */

.margin-low {
  color: var(--danger);
}

.margin-medium {
  color: var(--warning);
}

.margin-high {
  color: var(--success);
}

.margin-critical {
  color: var(--danger);
  font-weight: var(--font-weight-semibold);
}

/* Фоновые варианты */
.margin-low-bg {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.margin-medium-bg {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.margin-high-bg {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

/* ========================================
   Filters Bar
   ======================================== */

.filters-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

@media (min-width: 640px) {
  .filters-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .filters-bar {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ========================================
   Rate Cards (Mobile)
   ======================================== */

.rate-card {
  background: var(--background);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary-muted);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-3);
  transition: all var(--transition-fast);
}

.rate-card:hover {
  box-shadow: var(--shadow-sm);
}

.rate-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-3);
}

.rate-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.rate-card-field-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: 2px;
}

.rate-card-field-value {
  font-weight: var(--font-weight-medium);
}

/* ========================================
   Icons
   ======================================== */

.icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon-sm {
  width: 14px;
  height: 14px;
}

/* ========================================
   Utilities - Comprehensive Tailwind-like Classes
   ======================================== */

/* ----------------------------------------
   Display
   ---------------------------------------- */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.contents { display: contents; }

/* ----------------------------------------
   Flexbox
   ---------------------------------------- */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.grow { flex-grow: 1; }
.grow-0 { flex-grow: 0; }
.shrink { flex-shrink: 1; }
.shrink-0 { flex-shrink: 0; }

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

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

/* Align Self */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }

/* Gap */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-5 { gap: var(--spacing-5); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }

/* ----------------------------------------
   Grid
   ---------------------------------------- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-full { grid-column: 1 / -1; }

/* ----------------------------------------
   Position
   ---------------------------------------- */
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* ----------------------------------------
   Width & Height
   ---------------------------------------- */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-screen { width: 100vw; }
.w-min { width: min-content; }
.w-max { width: max-content; }
.w-fit { width: fit-content; }

/* Fixed widths (common in forms) */
.w-16 { width: 16px; }
.w-20 { width: 20px; }
.w-24 { width: 24px; }
.w-32 { width: 32px; }
.w-40 { width: 40px; }
.w-48 { width: 48px; }
.w-64 { width: 64px; }
.w-80 { width: 80px; }
.w-100 { width: 100px; }
.w-120 { width: 120px; }
.w-140 { width: 140px; }
.w-160 { width: 160px; }
.w-200 { width: 200px; }
.w-280 { width: 280px; }

.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.h-16 { height: 16px; }
.h-20 { height: 20px; }
.h-24 { height: 24px; }
.h-32 { height: 32px; }
.h-40 { height: 40px; }

.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }
.max-w-full { max-width: 100%; }
.max-w-screen { max-width: 100vw; }

/* ----------------------------------------
   Spacing - Margin
   ---------------------------------------- */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-auto { margin: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--spacing-1); }
.mr-2 { margin-right: var(--spacing-2); }
.mr-3 { margin-right: var(--spacing-3); }
.mr-4 { margin-right: var(--spacing-4); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--spacing-1); }
.ml-2 { margin-left: var(--spacing-2); }
.ml-3 { margin-left: var(--spacing-3); }
.ml-4 { margin-left: var(--spacing-4); }
.ml-auto { margin-left: auto; }

/* ----------------------------------------
   Spacing - Padding
   ---------------------------------------- */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.p-6 { padding: var(--spacing-6); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }

.pt-0 { padding-top: 0; }
.pt-2 { padding-top: var(--spacing-2); }
.pt-3 { padding-top: var(--spacing-3); }
.pt-4 { padding-top: var(--spacing-4); }

.pr-0 { padding-right: 0; }
.pr-2 { padding-right: var(--spacing-2); }
.pr-3 { padding-right: var(--spacing-3); }
.pr-4 { padding-right: var(--spacing-4); }

.pb-0 { padding-bottom: 0; }
.pb-2 { padding-bottom: var(--spacing-2); }
.pb-3 { padding-bottom: var(--spacing-3); }
.pb-4 { padding-bottom: var(--spacing-4); }

.pl-0 { padding-left: 0; }
.pl-2 { padding-left: var(--spacing-2); }
.pl-3 { padding-left: var(--spacing-3); }
.pl-4 { padding-left: var(--spacing-4); }

/* ----------------------------------------
   Typography - Font Size
   ---------------------------------------- */
.text-2xs { font-size: var(--font-size-xs); }
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: 30px; }

/* Font Weight */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Font Family */
.font-sans { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
.font-mono { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; }

/* Font Style */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Text Decoration */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Line Height */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }

/* White Space */
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* Word Break */
.break-normal { overflow-wrap: normal; word-break: normal; }
.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tabular Numbers */
.tabular-nums { font-variant-numeric: tabular-nums; }
.proportional-nums { font-variant-numeric: proportional-nums; }

/* Letter Spacing */
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.025em; }

/* ----------------------------------------
   Text Colors
   ---------------------------------------- */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); font-size: var(--font-size-sm); }
.text-accent { color: var(--primary); }

/* Semantic Colors */
.text-success { color: var(--text-success); }
.text-warning { color: var(--accent-warning); }
.text-danger { color: var(--destructive); }
.text-info { color: var(--info); }

.text-inherit { color: inherit; }
.text-current { color: currentColor; }

/* ----------------------------------------
   Background Colors
   ---------------------------------------- */
.bg-transparent { background-color: transparent; }
.bg-primary { background-color: var(--surface-primary); }
.bg-secondary { background-color: var(--surface-secondary); }
.bg-tertiary { background-color: var(--surface-tertiary); }
.bg-accent { background-color: var(--primary); }
.bg-accent-muted { background-color: var(--primary-muted); }

/* Semantic Backgrounds */
.bg-success { background-color: rgba(34, 197, 94, 0.15); }
.bg-warning { background-color: rgba(245, 158, 11, 0.15); }
.bg-danger { background-color: rgba(239, 68, 68, 0.15); }
.bg-info { background-color: rgba(59, 130, 246, 0.15); }

/* ----------------------------------------
   Borders
   ---------------------------------------- */
.border { border: 1px solid var(--border); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--border); }
.border-r { border-right: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-l { border-left: 1px solid var(--border); }

.border-2 { border-width: 2px; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }

.border-primary { border-color: var(--primary); }
.border-success { border-color: var(--success); }
.border-warning { border-color: var(--warning); }
.border-danger { border-color: var(--danger); }

/* Border Radius */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* ----------------------------------------
   Effects
   ---------------------------------------- */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-primary { box-shadow: var(--shadow-primary); }

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ----------------------------------------
   Interactivity
   ---------------------------------------- */
.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* ----------------------------------------
   Overflow
   ---------------------------------------- */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

/* ----------------------------------------
   Z-Index
   ---------------------------------------- */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-dropdown { z-index: 100; }
.z-sticky { z-index: 200; }
.z-modal { z-index: 500; }
.z-tooltip { z-index: 1000; }
.z-toast { z-index: 1100; }

/* Legacy .modal-overlay — removed (use kr-modal from components.css) */

.w-500 { width: 500px; }
.max-w-90 { max-width: 90%; }
.max-h-300 { max-height: 300px; }

/* ----------------------------------------
   Transitions
   ---------------------------------------- */
.transition-none { transition: none; }
.transition-all { transition: all var(--transition-normal); }
.transition-colors { transition: color, background-color, border-color var(--transition-fast); }
.transition-opacity { transition: opacity var(--transition-fast); }
.transition-transform { transition: transform var(--transition-fast); }

.duration-75 { transition-duration: 75ms; }
.duration-100 { transition-duration: 100ms; }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

/* ----------------------------------------
   Transform
   ---------------------------------------- */
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.rotate-0 { transform: rotate(0deg); }
.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

/* ----------------------------------------
   Visibility
   ---------------------------------------- */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* ----------------------------------------
   Form Utilities
   ---------------------------------------- */
/* Common form row layout */
.form-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) 0;
}

.form-row-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Input widths for numbers */
.input-narrow { width: 80px; }
.input-medium { width: 120px; }
.input-wide { width: 200px; }

/* Checkbox/Radio styling */
.checkbox-sm {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ----------------------------------------
   Alpine.js Utilities
   ---------------------------------------- */
[x-cloak] { display: none !important; }

/* ----------------------------------------
   Accessibility
   ---------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ========================================
   Responsive Utilities
   ======================================== */

.hidden-mobile {
  display: none;
}

@media (min-width: 1024px) {
  .hidden-mobile {
    display: block;
  }
  .hidden-desktop {
    display: none;
  }
}

/* ========================================
   HTMX Loading States
   ======================================== */

.htmx-request {
  opacity: 0.6;
  pointer-events: none;
}

.htmx-swapping {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.htmx-settling {
  opacity: 1;
  transition: opacity var(--transition-fast);
}

/* ========================================
   Highlight Animation (New Records)
   ======================================== */

.highlight-new {
  animation: highlight-fade 3s ease-out;
}

@keyframes highlight-fade {
  0% {
    background-color: var(--primary-muted);
  }
  100% {
    background-color: transparent;
  }
}

/* ========================================
   Empty States
   ======================================== */

.empty-state {
  text-align: center;
  padding: var(--spacing-8) var(--spacing-4);
  color: var(--text-muted);
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--spacing-3);
  opacity: 0.3;
}

/* ========================================
   Separator
   ======================================== */

.separator {
  height: 1px;
  background: var(--border);
  margin: var(--spacing-4) 0;
}

/* ========================================
   Messages/Toasts
   ======================================== */

.message {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-3);
}

.message-success {
  background: rgba(34, 197, 94, 0.1);
  color: rgb(21, 128, 61);
  border-left: 4px solid rgb(34, 197, 94);
}

.message-error {
  background: rgba(185, 60, 53, 0.1);
  color: var(--primary-dark);
  border-left: 4px solid var(--destructive);
}

/* ========================================
   Kopecks Style (Price Decimals)
   ======================================== */

.kopecks {
  font-size: 0.75em;
  opacity: 0.65;
  vertical-align: bottom;
  font-weight: var(--font-weight-normal);
  margin-left: 1px;
}

/* ========================================
   Autocomplete Dropdown
   ======================================== */

/* Скрытие элементов до инициализации Alpine.js */
[x-cloak] {
  display: none !important;
}

/* Dropdown контейнер */
.search-dropdown {
  background: var(--surface-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
  max-height: 400px;
  overflow-y: auto;
  padding: 0;
}

/* Элемент подсказки */
.suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.1s ease;
  font-size: var(--font-size-base);
  line-height: 1.4;
}

/* Тип подсказки (справа) */
.suggestion-type {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-left: 12px;
  white-space: nowrap;
}

/* Hover эффект - в стиле таблицы */
.suggestion-item:hover,
.suggestion-item-highlighted {
  background-color: var(--primary-muted);
}

/* Активное состояние при клике */
.suggestion-item:active {
  background-color: var(--primary-muted);
  opacity: 0.8;
}

/* Скроллбар для dropdown (только Webkit) */
.search-dropdown::-webkit-scrollbar {
  width: 6px;
}

.search-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.search-dropdown::-webkit-scrollbar-thumb {
  background: var(--color-neutral-300);
  border-radius: var(--radius-xs);
}

.search-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-400);
}

/* Анимация появления dropdown */
.search-dropdown {
  animation: dropdown-appear 0.15s ease-out;
}

@keyframes dropdown-appear {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   FILTER COMPONENTS (from filter-chips.css)
   Универсальные компоненты фильтров для всего проекта
   ============================================ */

/* Кнопки периода котировок (Все время, Сегодня, Вчера...)
   Используем ТОЧНО ТАК ЖЕ стили как у chip-inline */

.date-quick-btn {
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-1);
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: var(--surface-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
}

.date-quick-btn:hover:not(.active) {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.date-quick-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3);
}

/* ============================================
   УМНЫЕ ФИЛЬТРЫ (Последние по поставщикам, Лучшие цены, Только с авардами)
   ============================================ */

.smart-filter-chip {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.smart-filter-chip[data-filter="latest_per_supplier"] {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.smart-filter-chip[data-filter="latest_per_supplier"].selected {
    background: rgba(59, 130, 246, 0.2);
    color: #1e40af;
    border-color: rgba(59, 130, 246, 0.3);
}

.smart-filter-chip[data-filter="best_prices"] {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.smart-filter-chip[data-filter="best_prices"].selected {
    background: rgba(34, 197, 94, 0.2);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.3);
}

.smart-filter-chip[data-filter="award_only"] {
    background: rgba(251, 191, 36, 0.1);
    color: #d97706;
}

.smart-filter-chip[data-filter="award_only"].selected {
    background: rgba(251, 191, 36, 0.2);
    color: #b45309;
    border-color: rgba(251, 191, 36, 0.3);
}

/* Legacy chip-inline — removed (use kr-chip--filter-inline from components.css) */
    cursor: not-allowed;
}

/* Legacy chip-supplier — removed (use kr-chip--filter-inline from components.css) */

/* Legacy chip-compact, chip-medium — removed (use kr-chip from components.css) */

/* ============================================
   ЦВЕТОВОЙ ЧИПС
   Для: Цвета (C00, C23, R9006 и т.д.)
   С цветным фоном
   ============================================ */

/* Базовый color-chip (для использования в таблицах) */
.color-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid rgba(0,0,0,0.15);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Legacy chip-color, chip-more, chips-grid-3col, chips-row, chips-colors — removed (use kr-chip from components.css) */

/* Группа фильтров */
.filter-group {
    margin-bottom: var(--spacing-3, 12px);
}

.filter-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin-bottom: 8px;
}

/* ============================================
   CUSTOM TOOLTIPS (быстрые и стильные)
   ============================================ */

/* Элемент с тултипом - курсор не меняем */
[data-tooltip] {
    position: relative;
}

/* Стили для артикулов */
.article-segment {
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.article-segment:hover {
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--text-muted);
}

/* Сам тултип */
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(0, 0, 0, 0.92);
    color: white;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Для артикулов - используем JavaScript tooltip (см. klimov-tooltips.js) */
.article-segment[data-tooltip] {
    /* cursor остается от .article-segment (pointer) */
}

/* Отключаем CSS tooltip для артикулов, используем JS */
.article-segment[data-tooltip]::before,
.article-segment[data-tooltip]::after {
    display: none;
}

/* JavaScript tooltip стили */
.klimov-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.92);
    color: white;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 999999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.klimov-tooltip-visible {
    opacity: 1;
    transform: translateY(0);
}

.klimov-tooltip-bottom {
    transform: translateY(-4px);
}

.klimov-tooltip-bottom.klimov-tooltip-visible {
    transform: translateY(0);
}

/* Стрелка тултипа */
[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.92);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 100000;
}

/* Показываем тултип при наведении */
[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Варианты позиционирования */

/* Тултип справа */
[data-tooltip-pos="right"]::before {
    bottom: auto;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}

[data-tooltip-pos="right"]:hover::before {
    transform: translateY(-50%) translateX(0);
}

[data-tooltip-pos="right"]::after {
    bottom: auto;
    left: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: rgba(0, 0, 0, 0.92);
    border-top-color: transparent;
}

/* Тултип слева */
[data-tooltip-pos="left"]::before {
    bottom: auto;
    left: auto;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}

[data-tooltip-pos="left"]:hover::before {
    transform: translateY(-50%) translateX(0);
}

[data-tooltip-pos="left"]::after {
    bottom: auto;
    left: auto;
    right: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: rgba(0, 0, 0, 0.92);
    border-top-color: transparent;
}

/* Тултип внизу */
[data-tooltip-pos="bottom"]::before {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}

[data-tooltip-pos="bottom"]:hover::before {
    transform: translateX(-50%) translateY(0);
}

[data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: rgba(0, 0, 0, 0.92);
}

/* ========================================
   BADGE: Количество котировок на кнопке разворачивания
   ======================================== */

.offers-count-badge {
    /* Цифра на одном уровне со стрелкой */
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1;

    /* Защита от кликов */
    pointer-events: none;
}


/* ========================================
   DRAWER: Slide-in Panel for Editing
   ======================================== */

/* Overlay (background dimmer) */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.drawer-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* Drawer panel */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 500px;
    max-width: 90vw;
    background: var(--surface-primary);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
}

.drawer.active {
    transform: translateX(0);
}

/* Drawer header */
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-secondary);
}

.drawer-title {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary);
}

.drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-2xl);
    color: var(--text-secondary);
    padding: var(--spacing-1);
    line-height: 1;
    transition: color var(--transition-fast);
}

.drawer-close:hover {
    color: var(--text-primary);
}

/* Drawer content */
.drawer-content {
    padding: var(--spacing-4);
    overflow-y: auto;
    height: calc(100vh - 80px);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .drawer {
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
    }
}

html[data-theme="dark"] .drawer {
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
}

/* ========================================
   FILTER COMPONENTS - Multi-chip filter system
   ======================================== */

/* Multi-filter panel container */
.multi-filter-panel {
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-3);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    width: 100%;
    grid-column: 1 / -1;
}

/* Container for related filters */
.filter-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    width: 100%;
}

/* Filter group - horizontal layout (label left, chips right) */
.filter-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-2);
    min-width: 0;
    width: 100%;
    padding: 6px var(--spacing-2);
    position: relative;
    background: var(--surface-primary);
    border-radius: var(--radius-sm);
}

.filter-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.hint-text {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
    margin-left: var(--spacing-1);
    white-space: nowrap;
}

/* Legacy .filter-chips-row — removed (use kr-chip-group from components.css) */

/* Basic chip button (compact) */
.filter-chip {
    position: relative;
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: var(--surface-primary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.filter-chip:hover:not(:disabled) {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.filter-chip.selected {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 2px 6px rgba(var(--primary-rgb, 220, 38, 38), 0.3);
}

.filter-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Legacy filter-chip-inline, filter-chip-more, filter-chip-all — removed (use kr-chip--filter-inline from components.css) */

/* Dark mode for filter chips */
html[data-theme="dark"] .filter-chip {
    background: var(--surface-secondary);
    border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .filter-chip:hover:not(:disabled) {
    background: var(--surface-tertiary);
    border-color: var(--primary);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .filter-chip {
        background: var(--surface-secondary);
        border-color: rgba(255, 255, 255, 0.15);
    }

    html[data-theme="auto"] .filter-chip:hover:not(:disabled) {
        background: var(--surface-tertiary);
        border-color: var(--primary);
    }
}

/* Filter summary section */
.filter-summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--surface-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    width: fit-content;
}

.summary-text {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.summary-text strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

/* Reset filters button */
.filter-reset-btn {
    padding: 4px 12px;
    border: 1px solid var(--border);
    background: var(--surface-primary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.filter-reset-btn:hover {
    border-color: var(--error);
    color: var(--error);
    background: var(--error-bg, rgba(239, 68, 68, 0.1));
    transform: translateY(-1px);
}

/* ========================================
   Profile Sketches / Images
   ======================================== */

/* Эскизы профилей: инверсия для темной темы (принудительной и автоматической) */
[data-theme="dark"] .profile-sketch-icon {
    filter: invert(1);
}

/* Инверсия для автоматического режима при темной системной теме */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .profile-sketch-icon {
        filter: invert(1);
    }
}

/* Кнопки поворота изображений */
.btn-rotate {
    padding: 4px;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.btn-rotate:hover {
    background: var(--primary-muted);
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.1);
}

.btn-rotate:active {
    transform: scale(0.95);
}

/* ========================================
   File Upload / Drag & Drop Zone
   ======================================== */

.file-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-6);
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    cursor: pointer;
    transition: all var(--transition-normal);
    min-height: 180px;
    text-align: center;
}

.file-dropzone:hover {
    border-color: var(--primary);
    background: var(--primary-muted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.file-dropzone.drag-over {
    border-color: var(--primary);
    background: var(--primary-muted);
    border-style: solid;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
    transform: scale(1.02);
}

/* Dark mode adjustments */
html[data-theme="dark"] .file-dropzone {
    background: var(--surface-tertiary);
}

html[data-theme="dark"] .file-dropzone:hover {
    background: rgba(var(--primary-rgb), 0.15);
}

html[data-theme="dark"] .file-dropzone.drag-over {
    background: rgba(var(--primary-rgb), 0.2);
}


/* ========================================
   STRATEGY PANEL (Панель стратегии ценообразования)
   ======================================== */

.strategy-panel-card {
    margin-bottom: var(--spacing-6);
}

.strategy-meta {
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

/* Эффективная цена (главный индикатор) */
.effective-price-card {
    background: linear-gradient(135deg, var(--success) 0%, var(--success) 100%);
    border-radius: var(--border-radius);
    padding: var(--spacing-6);
    text-align: center;
    color: white;
    margin-bottom: var(--spacing-6);
}

.effective-price-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: var(--spacing-2);
    font-weight: var(--font-weight-semibold);
}

.effective-price-value {
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-1);
}

.effective-price-logic {
    font-size: var(--font-size-sm);
    opacity: 0.85;
}

/* Сетка вариантов цен */
.prices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
}

.price-item {
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-4);
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}

.price-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.price-item-selected {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.price-item-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-2);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.price-item-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

/* Секция настроек */
.settings-section {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.settings-summary {
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    list-style: none;
    padding: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.settings-summary::-webkit-details-marker {
    display: none;
}

.settings-summary::before {
    content: '▼';
    display: inline-block;
    margin-right: var(--spacing-2);
    transition: transform 0.2s;
}

details[open] .settings-summary::before {
    transform: rotate(180deg);
}

.strategy-form .form-group {
    margin-bottom: var(--spacing-4);
}

.form-actions {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
}

/* Мета-информация */
.strategy-meta-info {
    display: flex;
    justify-content: space-between;
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-4);
}

/* История изменений */
.history-section {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius);
    padding: var(--spacing-4);
    margin-top: var(--spacing-4);
}

.history-summary {
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    list-style: none;
    padding: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.history-summary::-webkit-details-marker {
    display: none;
}

.history-summary::before {
    content: '▶';
    display: inline-block;
    margin-right: var(--spacing-2);
    transition: transform 0.2s;
}

details[open] .history-summary::before {
    transform: rotate(90deg);
}

.history-list {
    margin-top: var(--spacing-3);
}

.history-item {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}

.history-header {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    margin-bottom: var(--spacing-2);
}

.history-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}

.history-type {
    font-size: var(--font-size-xs);
    padding: 2px var(--spacing-2);
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-semibold);
}

.history-type-created {
    background: rgba(34, 197, 94, 0.15);
    color: #15803d;
}

.history-type-updated {
    background: rgba(59, 130, 246, 0.15);
    color: #1e40af;
}

.history-type-recalculated {
    background: rgba(245, 158, 11, 0.15);
    color: #a16207;
}

.history-type-deactivated {
    background: rgba(239, 68, 68, 0.15);
    color: #991b1b;
}

.history-type-activated {
    background: rgba(16, 185, 129, 0.15);
    color: #065f46;
}

.history-user {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-left: auto;
}

.history-details {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    font-size: var(--font-size-sm);
}

.history-price {
    font-weight: var(--font-weight-bold);
    color: var(--success);
}

.history-logic {
    color: var(--color-text-muted);
}

.history-notes {
    color: var(--color-text);
    font-style: italic;
}

/* Сообщение "нет стратегии" */
.no-strategy-message {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--border-radius);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-5);
}

.no-strategy-message p {
    margin: 0 0 var(--spacing-2) 0;
    color: var(--color-text);
}

.no-strategy-message p:last-child {
    margin-bottom: 0;
}

/* Alert */
.alert {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-4);
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #15803d;
}

/* ========================================
   STRATEGIES GRID (Сетка стратегий)
   ======================================== */

.strategies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-4);
}

.strategy-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-4);
    transition: all 0.2s;
}

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

.strategy-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
}

.strategy-card-title {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
    flex-wrap: wrap;
}

.btn-icon {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-2);
    cursor: pointer;
    font-size: var(--font-size-md);
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--color-primary);
    color: white;
    transform: scale(1.1);
}

.strategy-card-price {
    text-align: center;
    padding: var(--spacing-4) 0;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-4);
}

.price-value-lg {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--success);
    margin-bottom: var(--spacing-1);
}

.price-label-sm {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.strategy-card-stats {
    display: flex;
    justify-content: space-around;
    padding: var(--spacing-3) 0;
    margin-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
}

.stat-item {
    text-align: center;
}

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-1);
}

.stat-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.strategy-card-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
}

.strategy-detail-wrapper {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

.strategy-detail-wrapper:empty {
    display: none;
}

/* Legacy .chip-muted — removed (use kr-badge--muted from components.css) */

/* ========================================
   TOAST NOTIFICATIONS (macOS-style)
   ======================================== */

.klimov-toast {
    position: fixed;
    top: 16px;
    right: 16px;
    min-width: 340px;
    max-width: 420px;
    background: rgba(30, 30, 30, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 14px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    z-index: 10000;
    opacity: 0;
    transform: translateY(-24px) scale(0.92);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.klimov-toast.klimov-toast-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.klimov-toast-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.klimov-toast-message {
    flex: 1;
    color: rgba(255, 255, 255, 0.96);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.015em;
}

/* Success - macOS green */
.klimov-toast-success .klimov-toast-icon {
    color: #34C759;
    filter: drop-shadow(0 0 8px rgba(52, 199, 89, 0.4));
}

/* Error - macOS red */
.klimov-toast-error .klimov-toast-icon {
    color: #FF3B30;
    filter: drop-shadow(0 0 8px rgba(255, 59, 48, 0.4));
}

/* Info - macOS blue */
.klimov-toast-info .klimov-toast-icon {
    color: #0A84FF;
    filter: drop-shadow(0 0 8px rgba(10, 132, 255, 0.4));
}

/* Loading - subtle white */
.klimov-toast-loading .klimov-toast-icon {
    color: rgba(255, 255, 255, 0.7);
}

.klimov-toast-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-full);
    animation: klimov-toast-spin 0.65s linear infinite;
}

/* Animation */
@keyframes klimov-toast-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Stacking multiple toasts */
.klimov-toast:not(:first-child) {
    margin-top: 12px;
}

/* Light mode (если потребуется) */
@media (prefers-color-scheme: light) {
    .klimov-toast {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.12),
            0 2px 8px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .klimov-toast-message {
        color: rgba(0, 0, 0, 0.9);
    }

    .klimov-toast-spinner {
        border-color: rgba(0, 0, 0, 0.15);
        border-top-color: rgba(0, 0, 0, 0.7);
    }
}

/* ========================================
   Undo Toast — для операций с отменой
   ======================================== */

.klimov-undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: 12px 16px;
    background: #1a1a1a;
    border-radius: var(--radius-lg);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    z-index: 10001;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.klimov-undo-toast.undo-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.undo-toast-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
}

.undo-toast-content {
    flex: 1;
    min-width: 0;
}

.undo-toast-message {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
}

.undo-toast-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #60a5fa;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.undo-toast-btn:hover {
    background: rgba(96, 165, 250, 0.15);
}

.undo-toast-btn:active {
    background: rgba(96, 165, 250, 0.25);
}

/* Progress bar */
.undo-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.undo-toast-progress-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--success), var(--success));
    transform-origin: left;
}

/* Состояние "Отменено" */
.klimov-undo-toast.undo-toast-undone .undo-toast-icon {
    color: var(--warning);
}

.klimov-undo-toast.undo-toast-undone .undo-toast-message {
    color: var(--warning);
}

.klimov-undo-toast.undo-toast-undone .undo-toast-progress-bar {
    background: var(--warning);
}

/* Light theme support */
@media (prefers-color-scheme: light) {
    .klimov-undo-toast {
        background: rgba(255, 255, 255, 0.98);
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.12),
            0 2px 8px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .undo-toast-message {
        color: rgba(0, 0, 0, 0.9);
    }

    .undo-toast-btn {
        color: #2563eb;
    }

    .undo-toast-btn:hover {
        background: rgba(37, 99, 235, 0.1);
    }

    .undo-toast-progress {
        background: rgba(0, 0, 0, 0.08);
    }
}

/* Navigation — moved to core/navigation.css */

/* ========================================
   Company Inline Edit (Invoice Builder)
   ======================================== */

/* Навигация между компаниями */
.company-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-left: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.company-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: var(--surface-tertiary);
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.company-nav-btn:hover:not(:disabled) {
    background: var(--primary-muted);
    color: var(--primary);
}

.company-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.company-nav-counter {
    font-size: var(--font-size-xs);
    font-weight: 500;
    min-width: 24px;
    text-align: center;
}

/* Карточка компании (режим просмотра) */
.company-card {
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.company-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-2);
}

.company-card-name {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-base);
    line-height: 1.3;
}

.company-card-name strong {
    font-weight: 500;
}

.company-card-actions {
    display: flex;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

.btn-icon-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-xs);
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.btn-icon-sm:hover {
    background: var(--primary-muted);
    color: var(--primary);
}

/* Чипы с метаданными */
.company-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

/* Legacy .chip-vat-inline, .chip-revenue, .chip-employees — removed */

/* Реквизиты */
.company-requisites {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* Официальные контакты */
.company-contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.company-contacts-label {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

/* Юридический адрес */
.company-address {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

/* Кнопка добавления компании */
.btn-add-company-inline {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    margin-top: 4px;
    font-size: var(--font-size-sm);
    color: var(--primary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-add-company-inline:hover {
    background: var(--primary-muted);
    border-radius: var(--radius-xs);
}

/* Режим редактирования */
.company-edit {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.company-search-wrapper {
    position: relative;
}

.company-search-input {
    width: 100%;
    padding: 10px 12px;
    font-size: var(--font-size-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-primary);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}

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

.company-search-input::placeholder {
    color: var(--text-muted);
}

/* Подсказки DaData */
.company-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
}

.company-suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}

.company-suggestion-item:last-child {
    border-bottom: none;
}

.company-suggestion-item:hover,
.company-suggestion-item.selected {
    background: var(--primary-muted);
}

.company-suggestion-name {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.company-suggestion-meta {
    display: flex;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.company-suggestion-inn {
    color: var(--text-secondary);
}

.company-suggestion-revenue {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Inline-форма компании */
.company-form-inline {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    margin-top: 8px;
}

.company-form-row {
    display: flex;
    gap: var(--spacing-2);
}

.company-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
}

.company-input {
    flex: 1;
    padding: 8px 10px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-primary);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}

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

.company-input::placeholder {
    color: var(--text-muted);
}

.company-input-name {
    font-weight: 500;
}

/* НДС чипы (inline) */
.vat-chips-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

/* Legacy .chip-vat-sm — removed */

/* Кнопки формы */
.company-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: 4px;
}

.btn-cancel-sm {
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-cancel-sm:hover {
    background: var(--surface-tertiary);
}

.btn-save-sm {
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-save-sm:hover:not(:disabled) {
    background: var(--primary-hover);
}

.btn-save-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Legacy .badge-primary — removed (use kr-badge--primary from components.css) */

/* ========================================
   Entity Picker (базовые стили для всех picker'ов)
   Используется для: company-picker, contact-picker, address-picker
   ======================================== */

/* Базовые классы для переиспользования */
.entity-picker {
    position: relative;
    width: 100%;
}

.entity-picker-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--surface-secondary);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.entity-picker-empty:hover {
    background: var(--surface-tertiary);
    border-color: var(--primary);
}

.entity-picker-placeholder {
    color: var(--text-muted);
    font-size: var(--font-size-base);
}

.entity-picker-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-md);
    font-weight: 500;
}

.entity-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 44px;
}

.entity-picker-row:hover {
    background: var(--surface-tertiary);
    border-color: var(--primary-muted);
}

.entity-picker-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    flex: 1;
    min-width: 0;
}

.entity-picker-name {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-picker-chevron {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-left: 8px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.entity-picker-chevron.open {
    transform: rotate(180deg);
}

.entity-picker-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 280px;
    overflow-y: auto;
}

.entity-picker-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.entity-picker-option:hover {
    background: var(--surface-secondary);
}

.entity-picker-option.selected {
    background: var(--primary-light);
}

.entity-option-check,
.entity-option-empty {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    margin-top: 2px;
    flex-shrink: 0;
}

.entity-option-check {
    color: var(--primary);
}

.entity-option-empty {
    color: var(--text-muted);
}

.entity-option-content {
    flex: 1;
    min-width: 0;
}

.entity-option-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.entity-option-name {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.entity-option-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
}

.entity-option-sub {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: 1px;
}

.entity-option-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-left: auto;
    flex-shrink: 0;
}

.entity-option-edit,
.entity-option-delete {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    opacity: 0;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.entity-picker-option:hover .entity-option-edit,
.entity-picker-option:hover .entity-option-delete {
    opacity: 1;
}

.entity-option-edit:hover {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info);
}

.entity-option-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.entity-picker-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}

.entity-picker-add {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 10px 12px;
    cursor: pointer;
    color: var(--primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: background 0.1s ease;
}

.entity-picker-add:hover {
    background: var(--surface-secondary);
}

.entity-picker-add-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius-full);
}

/* Чип для entity picker */
.entity-picker-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    border-radius: var(--radius-xs);
    background: var(--surface-tertiary);
    color: var(--text-secondary);
}

.entity-picker-chip.mini {
    font-size: 9px;
    padding: 0 4px;
}

/* ========================================
   Apple-style Company Picker

   ⚠️ DEPRECATED: Эти стили перенесены в
   /static/css/components/entity-picker.css

   Для страниц где подключён entity-picker.css,
   стили ниже переопределяются. Оставлены для
   обратной совместимости со старыми страницами.
   ======================================== */

/* Контейнер picker */
.company-picker {
    position: relative;
    width: 100%;
}

/* Пустое состояние */
.company-picker-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--surface-secondary);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.company-picker-empty:hover {
    background: var(--surface-tertiary);
    border-color: var(--primary);
}

.company-picker-placeholder {
    color: var(--text-muted);
    font-size: var(--font-size-base);
}

.company-picker-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-md);
    font-weight: 500;
}

/* Свёрнутая строка с выбранной компанией */
.company-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 44px; /* Apple tap target */
}

.company-picker-row:hover {
    background: var(--surface-tertiary);
    border-color: var(--primary-muted);
}

.company-picker-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    flex: 1;
    min-width: 0;
}

.company-picker-name {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-picker-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.company-picker-inn {
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
    font-size: var(--font-size-xs);
}

.company-picker-inn .label {
    color: var(--text-muted);
    opacity: 0.7;
}

.company-picker-ceo {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-picker-address {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.company-option-address {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

.company-picker-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    border-radius: var(--radius-xs);
    background: var(--surface-tertiary);
    color: var(--text-secondary);
}

.company-picker-chip.vat-needs_deduction {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.company-picker-chip.vat-no_vat {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
}

.company-picker-chip.vat-vat_no_deduction {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.company-picker-chip.vat-export_0 {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.company-picker-chip.revenue {
    background: var(--surface-tertiary);
    color: var(--text-secondary);
}

.company-picker-chip.employees {
    background: var(--surface-tertiary);
    color: var(--text-muted);
}

.company-picker-chip.mini {
    font-size: 9px;
    padding: 1px 4px;
}

.company-picker-chip.vat-unknown {
    background: #fef3c7;
    color: #92400e;
    border: 1px dashed var(--warning);
}

.company-picker-chip.clickable {
    cursor: pointer;
    transition: all 0.15s;
}

.company-picker-chip.clickable:hover {
    background: #fde68a;
    transform: scale(1.05);
}

/* VAT Picker Popup */
.vat-picker-popup {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 12px;
    min-width: 220px;
    z-index: 300;
    margin-top: 4px;
}

.vat-picker-title {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.vat-picker-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.vat-picker-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-secondary);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.vat-picker-btn:hover {
    background: var(--surface-tertiary);
    border-color: var(--primary);
}

.vat-picker-btn.active {
    background: rgba(220, 53, 69, 0.08);
    border-color: var(--primary);
}

.vat-picker-btn .vat-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.vat-picker-btn .vat-desc {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* Разделитель перед кнопкой ручного ввода */
.company-add-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* Кнопка ручного ввода (иностранные компании) — Apple-style */
.company-add-manual {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: var(--radius-md);
    margin: 4px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.company-add-manual:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
    border-color: rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.company-add-manual .manual-icon {
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.company-add-manual .manual-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.company-add-manual .manual-text {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary, var(--info));
}

.company-add-manual .manual-hint {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.company-add-manual .manual-arrow {
    font-size: var(--font-size-md);
    color: var(--color-primary, var(--info));
    opacity: 0.7;
    transition: transform 0.15s, opacity 0.15s;
}

.company-add-manual:hover .manual-arrow {
    transform: translateX(3px);
    opacity: 1;
}

/* Форма ручного ввода */
.company-manual-form {
    padding: 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    margin-top: 8px;
}

.manual-form-header {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-2);
    margin-bottom: 12px;
}

.manual-form-title {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
}

.manual-form-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.manual-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
}

.manual-form-grid .form-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.manual-form-grid .form-field.full-width {
    grid-column: 1 / -1;
}

.manual-form-grid label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.manual-form-grid input,
.manual-form-grid select {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--surface-primary);
    color: var(--text-primary);
}

.manual-form-grid input:focus,
.manual-form-grid select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Apple-style иерархия информации */
.company-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
}

.company-picker-badges {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

.company-picker-inn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    margin-top: 2px;
}

.company-picker-employees {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.company-picker-details {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.company-picker-details .sep {
    color: var(--text-muted);
    opacity: 0.5;
}

.company-picker-address-text {
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

/* Сводка по юрлицам клиента */
.customer-value-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.customer-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.customer-companies-summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.summary-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-xs);
    white-space: nowrap;
}

.summary-chip.revenue {
    background: var(--surface-tertiary);
    color: var(--text-secondary);
}

.summary-chip.employees {
    background: var(--surface-tertiary);
    color: var(--text-muted);
}

.summary-chip.companies {
    background: var(--surface-tertiary);
    color: var(--text-muted);
}

.company-picker-chevron {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    transition: transform var(--transition-fast);
    margin-left: 8px;
}

.company-picker-chevron.open {
    transform: rotate(180deg);
}

/* Dropdown */
.company-picker-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
}

.company-picker-option {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    transition: background var(--transition-fast);
    gap: var(--spacing-2);
    min-height: 44px;
}

.company-picker-option:hover {
    background: var(--surface-secondary);
}

.company-picker-option.selected {
    background: var(--primary-muted);
}

.company-option-check,
.company-option-empty {
    width: 16px;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.company-option-check {
    color: var(--primary);
}

.company-option-empty {
    color: var(--text-muted);
}

.company-option-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    flex: 1;
    min-width: 0;
}

.company-option-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.company-option-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-option-sub {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.company-option-ceo {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-option-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

.company-option-delete {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    opacity: 0;
    transition: all var(--transition-fast);
}

.company-picker-option:hover .company-option-delete {
    opacity: 1;
}

.company-option-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.company-option-badge {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    background: var(--primary-muted);
    color: var(--primary);
}

.company-option-chips {
    display: flex;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

.company-picker-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.company-picker-add {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 10px 12px;
    cursor: pointer;
    color: var(--primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: background var(--transition-fast);
}

.company-picker-add:hover {
    background: var(--primary-muted);
}

.company-picker-add-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
}

/* Режим добавления (inline) */
.company-add-inline {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.company-add-search {
    position: relative;
}

.company-add-input {
    width: 100%;
    padding: 12px 40px 12px 14px;
    font-size: var(--font-size-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}

.company-add-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-muted);
}

.company-add-input::placeholder {
    color: var(--text-muted);
}

.company-add-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
}

.company-add-close:hover {
    background: var(--surface-tertiary);
    color: var(--text-primary);
}

/* Подсказки DaData */
.company-add-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 101;
    max-height: 280px;
    overflow-y: auto;
}

.company-add-suggestion {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}

.company-add-suggestion:last-child {
    border-bottom: none;
}

.company-add-suggestion:hover,
.company-add-suggestion.selected {
    background: var(--primary-muted);
}

.company-add-suggestion-name {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.company-add-suggestion-meta {
    display: flex;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.company-add-suggestion-meta .suggestion-revenue {
    color: var(--text-secondary);
    font-weight: 500;
}

.company-add-suggestion-meta .suggestion-ceo {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.company-add-suggestion-meta .suggestion-employees {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* Форма добавления */
.company-add-form {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.company-add-preview {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.company-preview-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.company-preview-details {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
}

.company-preview-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    margin-top: 4px;
}

.company-preview-revenue {
    color: var(--text-secondary);
    font-weight: 600;
}

.company-preview-employees {
    color: var(--text-muted);
    font-weight: 500;
}

.company-preview-ceo {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.company-preview-ceo .ceo-icon {
    font-size: var(--font-size-xs);
    opacity: 0.7;
}

.company-preview-address {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* НДС выбор */
.company-add-vat {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.company-add-vat-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 500;
}

.company-add-vat-chips {
    display: flex;
    gap: var(--spacing-2);
}

.vat-chip-btn {
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.vat-chip-btn:hover {
    background: var(--surface-tertiary);
}

.vat-chip-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Экспорт 0% — особый стиль */
.vat-chip-btn.active.export {
    background: linear-gradient(135deg, var(--success), #059669);
    border-color: var(--success);
    cursor: default;
}

.vat-chip-btn.active.export:disabled {
    opacity: 1;
    background: linear-gradient(135deg, var(--success), #059669);
}

/* Подсказка про НДС */
.vat-hint {
    font-size: var(--font-size-xs);
    color: var(--success);
    font-weight: 500;
    margin-left: 4px;
}

/* Кнопки */
.company-add-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    padding-top: 8px;
}

.btn-text {
    padding: 8px 16px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.btn-text:hover {
    background: var(--surface-tertiary);
    color: var(--text-primary);
}

.btn-primary-sm {
    padding: 8px 16px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    background: var(--primary);
    border: none;
    color: white;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.btn-primary-sm:hover:not(:disabled) {
    background: var(--primary-hover);
}

.btn-primary-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .company-picker-row {
        padding: 12px;
    }

    .company-picker-meta {
        flex-wrap: wrap;
    }

    .company-picker-dropdown {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 60vh;
        overflow-y: auto;
    }

    .company-add-vat {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }

    .company-add-vat-chips {
        width: 100%;
    }

    .vat-chip-btn {
        flex: 1;
        text-align: center;
    }
}

/* ==================================================
   CONTACT PICKER (Apple-style)

   ⚠️ DEPRECATED: Эти стили перенесены в
   /static/css/components/entity-picker.css

   Для страниц где подключён entity-picker.css,
   стили ниже переопределяются. Оставлены для
   обратной совместимости со старыми страницами.
   ================================================== */

.contact-section {
    position: relative;
}

.contact-picker {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Пустое состояние — добавить контакт */
.contact-picker-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--surface-secondary);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.contact-picker-empty:hover {
    border-color: var(--primary);
    background: var(--surface-tertiary);
}

.contact-picker-placeholder {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.contact-picker-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-size: var(--font-size-md);
    font-weight: 600;
    border-radius: var(--radius-full);
}

/* Выбранный контакт — компактная карточка */
.contact-picker-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 8px 12px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.contact-picker-row:hover {
    border-color: var(--primary-light);
    background: var(--surface-tertiary);
}

.contact-picker-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.contact-picker-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.contact-picker-name {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.contact-picker-badges {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

.contact-picker-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.contact-picker-chip.role {
    background: var(--surface-tertiary);
    color: var(--text-secondary);
    text-transform: none;
    font-weight: 500;
}

.contact-picker-chip.lpr {
    background: #fef3c7;
    color: #92400e;
}

.contact-picker-chip.primary {
    background: var(--primary-light);
    color: var(--primary);
}

/* Контакты: телефон, email, мессенджеры */
.contact-picker-contacts {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-top: 2px;
}

.contact-link-compact {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.contact-link-compact:hover {
    color: var(--primary);
}

.contact-link-compact svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.contact-link-compact.phone svg {
    color: var(--success);
}

.contact-link-compact.email svg {
    color: var(--text-muted);
}

.contact-link-compact.telegram svg {
    color: #0088cc;
}

.contact-link-compact.whatsapp svg {
    color: #25d366;
}

.contact-picker-chevron {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.contact-picker-chevron.open {
    transform: rotate(180deg);
}

/* Contact card action buttons (edit, expand) */
.contact-picker-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-right: 4px;
}

.contact-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.contact-action-btn:hover {
    background: var(--surface-tertiary);
    color: var(--text-primary);
}

.contact-action-btn.edit:hover {
    color: var(--primary);
}

.contact-action-btn.edit.active {
    background: var(--primary);
    color: white;
}

.contact-action-btn.expand.active {
    background: var(--surface-tertiary);
    color: var(--primary);
}

.contact-action-btn svg {
    transition: transform 0.2s ease;
}

/* Contact card expanded section */
.contact-card-expanded {
    border-top: 1px solid var(--border-light);
    padding: 10px 12px;
    background: var(--surface-tertiary);
    overflow: hidden;
}

.contact-expanded-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.contact-expanded-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.contact-expanded-label {
    color: var(--text-muted);
    min-width: 70px;
    flex-shrink: 0;
}

.contact-expanded-value {
    color: var(--text-primary);
}

.contact-expanded-value.phone-action {
    cursor: pointer;
    color: var(--primary);
    transition: color 0.15s ease;
}

.contact-expanded-value.phone-action:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.contact-expanded-value.link {
    color: var(--primary);
    text-decoration: none;
}

.contact-expanded-value.link:hover {
    text-decoration: underline;
}

/* Contact picker when expanded */
.contact-picker.expanded {
    border-color: var(--primary-light);
}

.contact-picker.expanded .contact-picker-row {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ============================================================================
   CONTACT CONTEXT MENU (popup menu on field click)
   ============================================================================ */

.contact-context-menu {
    position: fixed;
    background: var(--surface-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
    z-index: 10000;
    min-width: 180px;
    padding: 6px 0;
    animation: context-menu-appear 0.12s ease-out;
}

@keyframes context-menu-appear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: 10px 14px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.1s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

.context-menu-item:hover {
    background: var(--surface-secondary);
}

.context-menu-item:active {
    background: var(--surface-tertiary);
}

.context-menu-item svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.context-menu-item:hover svg {
    color: var(--text-secondary);
}

.context-menu-item.primary {
    color: var(--primary);
}

.context-menu-item.primary svg {
    color: var(--primary);
}

.context-menu-item.danger {
    color: var(--danger);
}

.context-menu-item.danger svg {
    color: var(--danger);
}

.context-menu-divider {
    height: 1px;
    background: var(--border-light);
    margin: 6px 0;
}

/* ============================================================================
   INLINE EDIT INPUT (Material Design style - underline only)
   ============================================================================ */

.inline-edit-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.inline-edit-input {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--primary);
    padding: 2px 0;
    margin: -2px 0;
    outline: none;
    min-width: 60px;
    width: auto;
    transition: border-color 0.15s ease;
}

.inline-edit-input:focus {
    border-bottom-color: var(--primary-hover);
}

.inline-edit-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

/* Inline edit with save indicator */
.inline-edit-wrapper.saving .inline-edit-input {
    border-bottom-color: var(--text-muted);
    opacity: 0.7;
}

.inline-edit-wrapper .inline-edit-spinner {
    position: absolute;
    right: -20px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: var(--radius-full);
    animation: inline-spin 0.6s linear infinite;
}

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

.inline-edit-wrapper .inline-edit-check {
    position: absolute;
    right: -20px;
    color: var(--success);
    font-size: var(--font-size-base);
    animation: inline-check-appear 0.2s ease-out;
}

@keyframes inline-check-appear {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================================================
   CONTACT CARD - Full Info Layout
   ============================================================================ */

.contact-card-full {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.contact-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
}

.contact-card-main {
    flex: 1;
    min-width: 0;
}

.contact-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-xs);
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background 0.1s ease;
}

.contact-card-name:hover {
    background: var(--surface-tertiary);
}

.contact-card-badges {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: 4px;
    flex-wrap: wrap;
}

.contact-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.15s ease;
}

.contact-card-badge.position {
    background: var(--surface-tertiary);
    color: var(--text-secondary);
}

.contact-card-badge.position:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.contact-card-badge.lpr {
    background: var(--warning-light);
    color: var(--warning-dark);
}

.contact-card-badge.primary {
    background: var(--success-light);
    color: var(--success-dark);
}

/* Contact card fields */
.contact-card-fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-top: 4px;
}

.contact-card-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.contact-field {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: var(--radius-sm);
    transition: background 0.1s ease;
}

.contact-field:hover {
    background: var(--surface-tertiary);
    color: var(--text-primary);
}

.contact-field svg {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.contact-field:hover svg {
    color: var(--text-secondary);
}

.contact-field.phone svg {
    color: var(--success);
}

.contact-field.email svg {
    color: var(--info);
}

.contact-field.telegram svg {
    color: #0088cc;
}

.contact-field.whatsapp svg {
    color: #25d366;
}

/* Messenger icons row */
.contact-messengers {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.contact-messenger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--surface-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-muted);
}

.contact-messenger-btn:hover {
    transform: scale(1.05);
}

.contact-messenger-btn.whatsapp:hover {
    background: #dcf8c6;
    color: #25d366;
}

.contact-messenger-btn.telegram:hover {
    background: #e3f2fd;
    color: #0088cc;
}

.contact-messenger-btn svg {
    width: 16px;
    height: 16px;
}

/* Contact card actions */
.contact-card-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.contact-card-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.contact-card-action-btn:hover {
    background: var(--surface-tertiary);
    color: var(--text-primary);
}

/* ============================================================================
   POSITION DROPDOWN (editable list)
   ============================================================================ */

.position-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--surface-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
    animation: context-menu-appear 0.12s ease-out;
}

.position-dropdown-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-secondary);
    border-radius: var(--radius-lg) 10px 0 0;
}

.position-dropdown-search {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    outline: none;
}

.position-dropdown-search::placeholder {
    color: var(--text-muted);
}

.position-dropdown-list {
    padding: 6px 0;
}

.position-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.1s ease;
}

.position-dropdown-item:hover {
    background: var(--surface-secondary);
}

.position-dropdown-item.selected {
    background: var(--primary-light);
    color: var(--primary);
}

.position-dropdown-item .delete-btn {
    display: none;
    padding: 2px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-xs);
}

.position-dropdown-item:hover .delete-btn {
    display: flex;
}

.position-dropdown-item .delete-btn:hover {
    color: var(--danger);
    background: var(--danger-light);
}

.position-dropdown-add {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 10px 12px;
    font-size: var(--font-size-sm);
    color: var(--primary);
    cursor: pointer;
    border-top: 1px solid var(--border-light);
    transition: background 0.1s ease;
}

.position-dropdown-add:hover {
    background: var(--primary-light);
}

.position-dropdown-add svg {
    width: 14px;
    height: 14px;
}

/* Editable field hover effect - updated for new system */
.editable-field {
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: var(--radius-xs);
    padding: 2px 4px;
    margin: -2px -4px;
}

.editable-field:hover {
    background: var(--surface-secondary);
    color: var(--primary);
}

.editable-field:active {
    background: var(--surface-tertiary);
}

/* Dropdown со списком контактов */
.contact-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--surface-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
    overflow: hidden;
}

.contact-picker-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.contact-picker-option:hover {
    background: var(--surface-secondary);
}

.contact-picker-option.selected {
    background: var(--primary-light);
}

/* Кнопки действий для контакта */
.contact-option-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-left: auto;
    flex-shrink: 0;
}

.contact-option-edit,
.contact-option-delete {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    opacity: 0;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.contact-picker-option:hover .contact-option-edit,
.contact-picker-option:hover .contact-option-delete {
    opacity: 1;
}

.contact-option-edit:hover {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info);
}

.contact-option-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.contact-option-check,
.contact-option-empty {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    margin-top: 2px;
    flex-shrink: 0;
}

.contact-option-check {
    color: var(--primary);
}

.contact-option-empty {
    color: var(--text-muted);
}

.contact-option-content {
    flex: 1;
    min-width: 0;
}

.contact-option-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.contact-option-name {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.contact-option-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
}

.contact-option-badge.lpr {
    background: #fef3c7;
    color: #92400e;
}

.contact-option-sub {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: 1px;
}

.contact-option-phones {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.contact-messenger {
    color: #0088cc;
}

.contact-picker-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}

.contact-picker-add {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 10px 12px;
    cursor: pointer;
    color: var(--primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: background 0.1s ease;
}

.contact-picker-add:hover {
    background: var(--surface-secondary);
}

.contact-picker-add-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius-full);
}

/* Форма добавления контакта (inline) */
.contact-add-inline {
    flex: 1;
}

.contact-add-form {
    background: var(--surface-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 12px;
}

.contact-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.contact-form-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.contact-add-close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: var(--font-size-md);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: all 0.15s ease;
}

.contact-add-close:hover {
    background: var(--surface-tertiary);
    color: var(--text-primary);
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
}

.contact-form-grid .form-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.contact-form-grid .form-field label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.contact-form-grid .form-field input {
    padding: 6px 10px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--surface-primary);
    color: var(--text-primary);
    transition: border-color 0.15s ease;
}

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

.contact-form-grid .form-field input::placeholder {
    color: var(--text-muted);
}

/* Роли контакта */
.contact-roles {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

.contact-roles-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.contact-roles-chips {
    display: flex;
    gap: var(--spacing-2);
}

.role-chip-btn {
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.role-chip-btn:hover {
    border-color: var(--primary-light);
    background: var(--surface-tertiary);
}

.role-chip-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Кнопки формы */
.contact-add-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: 12px;
}

/* ======================================
   amoCRM-style Contact Form (unified name input)
   ====================================== */

/* Единое поле для ФИО */
.contact-name-unified {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: 8px;
}

.contact-name-input {
    flex: 1;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 500;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.contact-name-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.contact-name-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.contact-add-close-inline {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-tertiary);
    border: none;
    font-size: var(--font-size-base);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}

.contact-add-close-inline:hover {
    background: var(--surface-secondary);
    color: var(--text-primary);
}

/* Показ разбитого ФИО */
.contact-name-parsed {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    padding: 8px 10px;
    margin-bottom: 10px;
    background: rgba(34, 197, 94, 0.08);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.parsed-label {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.parsed-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 2px 8px;
    background: rgba(34, 197, 94, 0.12);
    border-radius: var(--radius-xs);
}

.parsed-key {
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.parsed-value {
    color: #059669;
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* Deprecated - для обратной совместимости */
.parsed-name {
    color: #059669;
    font-weight: 600;
}

/* ========================================
   FIO Suggestions Dropdown (DaData)
   ======================================== */
.fio-suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
    backdrop-filter: none;
}

.fio-suggestion-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s ease;
}

.fio-suggestion-item:last-child {
    border-bottom: none;
}

.fio-suggestion-item:hover,
.fio-suggestion-item.selected {
    background: rgba(220, 38, 38, 0.08);
}

.fio-suggestion-value {
    font-weight: 500;
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.fio-suggestion-parts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
}

.fio-part {
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
}

.fio-surname { color: #059669; }
.fio-name { color: var(--info); }
.fio-patronymic { color: #8b5cf6; }

/* Кликабельные чипы ФИО для смены ролей */
.fio-chip-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.fio-chip-clickable:hover {
    background: rgba(34, 197, 94, 0.25);
    transform: scale(1.02);
}

.fio-swap-icon {
    opacity: 0;
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    margin-left: 2px;
    transition: opacity 0.15s ease;
}

.fio-chip-clickable:hover .fio-swap-icon {
    opacity: 1;
}

/* Gender chip (пол от DaData) */
.gender-chip {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 2px 8px !important;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.gender-chip:hover {
    transform: scale(1.05);
}

.gender-chip.gender-male {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.gender-chip.gender-male:hover {
    background: rgba(59, 130, 246, 0.25);
}

.gender-chip.gender-female {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.gender-chip.gender-female:hover {
    background: rgba(236, 72, 153, 0.25);
}

.gender-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.gender-label {
    margin-left: 2px;
}

/* Компактная форма в 2 колонки */
.contact-form-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
    margin-bottom: 10px;
}

.form-field-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 8px 10px;
    background: var(--surface-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.form-field-inline:focus-within {
    background: var(--surface-primary);
    border-color: var(--border-light);
}

.field-icon {
    font-size: var(--font-size-base);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.field-icon svg {
    width: 16px;
    height: 16px;
}

.field-input {
    flex: 1;
    padding: 0;
    font-size: var(--font-size-sm);
    border: none;
    background: transparent;
    color: var(--text-primary);
    outline: none;
}

.field-input::placeholder {
    color: var(--text-muted);
}

/* Phone field with messenger buttons */
.phone-field-with-messengers {
    position: relative;
}

.messenger-buttons {
    display: flex;
    gap: var(--spacing-1);
    margin-left: 4px;
    flex-shrink: 0;
}

.messenger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition: all 0.15s ease;
    opacity: 0.7;
}

.messenger-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.messenger-btn.whatsapp {
    color: #25D366;
    background: rgba(37, 211, 102, 0.1);
}

.messenger-btn.whatsapp:hover {
    background: rgba(37, 211, 102, 0.2);
}

.messenger-btn.telegram {
    color: #0088cc;
    background: rgba(0, 136, 204, 0.1);
}

.messenger-btn.telegram:hover {
    background: rgba(0, 136, 204, 0.2);
}

.messenger-btn svg {
    width: 16px;
    height: 16px;
}

/* Add/Remove phone buttons */
.add-phone-btn,
.remove-phone-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    margin-left: 4px;
}

.add-phone-btn {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.add-phone-btn:hover {
    background: rgba(34, 197, 94, 0.25);
}

.remove-phone-btn {
    background: rgba(220, 38, 38, 0.15);
    color: var(--primary);
}

.remove-phone-btn:hover {
    background: rgba(220, 38, 38, 0.25);
}

/* Secondary phone icon (more faded) */
.field-icon-secondary {
    opacity: 0.6;
}

/* Phone duplicates warning */
.phone-duplicates-warning {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: var(--radius-md);
    padding: 10px;
    margin-top: 8px;
}

.duplicates-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--warning);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: 8px;
}

.duplicates-header svg {
    flex-shrink: 0;
}

.duplicates-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.duplicates-close:hover {
    color: var(--text-primary);
}

.duplicates-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.duplicate-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: 8px 10px;
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}

.duplicate-item:hover {
    background: var(--surface-hover);
}

.duplicate-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    min-width: 0;
}

.duplicate-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.duplicate-position {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.duplicate-customer {
    flex-shrink: 0;
}

.same-customer-badge {
    font-size: var(--font-size-2xs);
    font-weight: 500;
    color: var(--success);
    background: rgba(34, 197, 94, 0.15);
    padding: 3px 8px;
    border-radius: var(--radius-xs);
}

.other-customer-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.other-customer-link:hover {
    color: var(--primary);
}

.duplicates-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.btn-ignore-duplicates {
    font-size: var(--font-size-xs);
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-ignore-duplicates:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

/* Phone action popup (контекстное меню) */
.phone-action-popup {
    position: fixed;
    z-index: 9999;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    min-width: 180px;
    overflow: hidden;
}

.phone-action-header {
    padding: 10px 14px;
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Monaco', monospace;
}

.phone-action-list {
    padding: 6px 0;
}

.phone-action-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.1s ease;
    text-align: left;
}

.phone-action-item:hover {
    background: var(--surface-hover);
}

.phone-action-item svg {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.phone-action-item.whatsapp svg {
    color: #25d366;
}

.phone-action-item.telegram svg {
    color: #0088cc;
}

.phone-action-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

/* Contact phone action (кликабельный элемент) */
.contact-phone-action {
    cursor: pointer;
    transition: all 0.15s ease;
}

.contact-phone-action:hover {
    color: var(--primary) !important;
}

.contact-phone-action:hover svg {
    stroke: var(--primary);
}

/* Position dropdown (должности) */
.position-field-with-dropdown {
    position: relative;
}

.position-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
}

.position-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s ease;
}

.position-item:last-child {
    border-bottom: none;
}

.position-item:hover,
.position-item.selected {
    background: rgba(220, 38, 38, 0.08);
}

.position-item.add-custom {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--primary);
    font-weight: 500;
    border-top: 1px solid var(--border);
}

.position-item.add-custom svg {
    flex-shrink: 0;
}

/* Footer row: роли + кнопки */
.contact-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

.contact-roles-inline {
    display: flex;
    gap: var(--spacing-2);
}

.contact-add-actions-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.btn-text-sm {
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.btn-text-sm:hover {
    background: var(--surface-tertiary);
    color: var(--text-primary);
}

.btn-primary-sm {
    padding: 6px 14px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    background: var(--primary);
    border: none;
    color: white;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.btn-primary-sm:hover:not(:disabled) {
    background: var(--primary-dark);
}

.btn-primary-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .contact-form-grid {
        grid-template-columns: 1fr;
    }

    .contact-picker-contacts {
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }

    .contact-roles {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }

    .contact-form-compact {
        grid-template-columns: 1fr;
    }

    .contact-footer-row {
        flex-direction: column;
        gap: var(--spacing-3);
        align-items: stretch;
    }

    .contact-roles-inline {
        justify-content: center;
    }

    .contact-add-actions-inline {
        justify-content: flex-end;
    }
}

/* ============================================================================
   CONTACT CARD V2 — Apple/Lebedev Style (компактная inline-редактируемая)
   ============================================================================ */

.contact-card-v2 {
    padding: 12px 14px;
    background: var(--surface-secondary);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

/* Rows */
.cc-row {
    display: flex;
    align-items: center;
    min-height: 24px;
}

/* Header row: имя + бейджи + переключатель */
.cc-header {
    gap: var(--spacing-2);
    margin-bottom: 2px;
}

.cc-name-wrap {
    flex: 1;
    min-width: 0;
}

.cc-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: var(--radius-xs);
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-name:hover {
    background: var(--surface-hover);
    color: var(--primary);
}

.cc-name-input {
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    padding: 2px 4px;
    background: var(--surface-primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    outline: none;
}

/* Name edit wrapper (для относительного позиционирования dropdown) */
.cc-name-edit-wrap {
    position: relative;
    width: 100%;
}

/* Name suggestions dropdown (DaData FIO autocomplete) */
.cc-name-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--surface-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
    max-height: 200px;
    overflow-y: auto;
}

.cc-name-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.cc-name-suggestion:hover,
.cc-name-suggestion.selected {
    background: var(--surface-hover);
}

.cc-name-suggestion.selected {
    background: var(--primary-light, rgba(239, 68, 68, 0.1));
}

.cc-sugg-name {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    flex: 1;
}

.cc-sugg-gender {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin-left: 8px;
    opacity: 0.7;
}

/* Badges */
.cc-badges {
    display: flex;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

.cc-badge {
    padding: 2px 6px;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--radius-xs);
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--surface-tertiary);
    color: var(--text-tertiary);
}

.cc-badge:hover {
    background: var(--surface-hover);
}

.cc-badge.active {
    color: white;
}

.cc-badge-lpr.active {
    background: #8b5cf6;
}

.cc-badge-primary.active {
    background: var(--success);
}

/* Switch contact button */
.cc-switch-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: var(--surface-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.cc-switch-btn:hover {
    background: var(--surface-hover);
}

.cc-switch-btn svg {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
}

/* Кнопка добавления дополнительного телефона */
.cc-add-phone-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 1px dashed var(--border-secondary);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-tertiary);
    margin-left: 4px;
}

.cc-add-phone-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary);
    color: var(--primary);
}

/* Дополнительный телефон */
.cc-phone-additional {
    margin-top: 2px;
}

.cc-phone-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-right: 4px;
    font-style: italic;
}

/* Position row */
.cc-position-row {
    position: relative;
}

.cc-position {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: var(--radius-xs);
    transition: background 0.15s ease, color 0.15s ease;
}

.cc-position:hover {
    background: var(--surface-hover);
    color: var(--primary);
}

.cc-position.empty {
    color: var(--text-tertiary);
    font-style: italic;
}

/* Position dropdown */
.cc-position-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 200px;
    max-width: 280px;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    margin-top: 4px;
    overflow: hidden;
}

.cc-position-search {
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--surface-secondary);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    outline: none;
}

.cc-position-search::placeholder {
    color: var(--text-tertiary);
}

.cc-position-list {
    max-height: 160px;
    overflow-y: auto;
}

.cc-position-item {
    padding: 8px 10px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.1s ease;
}

.cc-position-item:hover {
    background: var(--surface-hover);
}

.cc-position-add {
    padding: 8px 10px;
    font-size: var(--font-size-sm);
    color: var(--primary);
    font-weight: 500;
    cursor: pointer;
    border-top: 1px solid var(--border);
    transition: background 0.1s ease;
}

.cc-position-add:hover {
    background: rgba(220, 38, 38, 0.08);
}

/* Phone row */
.cc-phone-row {
    gap: var(--spacing-2);
}

.cc-phone {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Monaco', monospace;
    cursor: pointer;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: var(--radius-xs);
    transition: background 0.15s ease;
}

.cc-phone:hover {
    background: var(--surface-hover);
    color: var(--primary);
}

.cc-phone.empty {
    color: var(--text-tertiary);
    font-family: inherit;
    font-weight: 400;
    font-style: italic;
}

.cc-messengers {
    display: flex;
    gap: var(--spacing-1);
    margin-left: auto;
}

.cc-msg {
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    opacity: 0.6;
}

.cc-msg:hover {
    opacity: 1;
    background: var(--surface-hover);
}

.cc-msg svg {
    width: 16px;
    height: 16px;
}

.cc-msg.whatsapp svg {
    color: #25d366;
}

.cc-msg.telegram svg {
    color: #0088cc;
}

/* Field rows (email, telegram) */
.cc-field-row {
    gap: var(--spacing-2);
}

.cc-field-icon {
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.cc-field-value {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: var(--radius-xs);
    transition: background 0.15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-field-value:hover {
    background: var(--surface-hover);
}

.cc-field-value.empty {
    color: var(--text-tertiary);
    font-style: italic;
}

/* Inline input (shared) */
.cc-inline-input {
    padding: 2px 6px;
    font-size: var(--font-size-sm);
    background: var(--surface-primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    outline: none;
    width: 100%;
    max-width: 200px;
}

/* Add field buttons */
.cc-add-field-row {
    gap: var(--spacing-2);
    margin-top: 4px;
}

.cc-add-field-btn {
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-tertiary);
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cc-add-field-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(220, 38, 38, 0.05);
}

/* Contacts picker dropdown */
.cc-contacts-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    min-width: 220px;
    max-width: 300px;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.3);
    margin-top: 6px;
    overflow: hidden;
}

.cc-contacts-header {
    padding: 10px 12px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border);
    background: var(--surface-secondary);
}

.cc-contacts-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
}

.cc-contact-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.cc-contact-option:hover {
    background: var(--surface-hover);
}

.cc-contact-option.selected {
    background: rgba(220, 38, 38, 0.08);
}

.cc-contact-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--surface-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cc-contact-info {
    flex: 1;
    min-width: 0;
}

.cc-contact-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-contact-position {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-contact-check {
    width: 16px;
    height: 16px;
    color: var(--primary);
    flex-shrink: 0;
}

/* Contact delete button */
.cc-contact-delete {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    opacity: 0;
    transition: all 0.15s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.cc-contact-option:hover .cc-contact-delete {
    opacity: 1;
}

.cc-contact-delete:hover {
    color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

.cc-contacts-add {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
    transition: background 0.1s ease;
}

.cc-contacts-add:hover {
    background: rgba(220, 38, 38, 0.08);
}

.cc-contacts-add svg {
    width: 14px;
    height: 14px;
}

/* Context menu v2 */
.cc-context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 160px;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    padding: 4px 0;
}

.cc-ctx-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    padding: 8px 14px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.1s ease;
    text-align: left;
}

.cc-ctx-item:hover {
    background: var(--surface-hover);
}

.cc-ctx-item svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cc-ctx-item.whatsapp svg { color: #25d366; }
.cc-ctx-item.telegram svg { color: #0088cc; }
.cc-ctx-item.danger { color: var(--primary); }
.cc-ctx-item.danger svg { color: var(--primary); }

.cc-ctx-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* Email & Telegram field styles */
.cc-email,
.cc-telegram {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: var(--radius-xs);
    transition: background 0.15s ease;
}

.cc-email:hover,
.cc-telegram:hover {
    background: var(--surface-hover);
}

.cc-telegram {
    color: #0088cc;
}

/* Field group with messengers */
.cc-field-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    width: 100%;
}

/* Position empty state */
.cc-position-empty {
    padding: 12px 10px;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

/* Contacts dropdown option styles */
.cc-opt-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--border);
    flex-shrink: 0;
}

.cc-opt-dot.active {
    background: var(--primary);
}

.cc-opt-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.cc-opt-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-opt-pos {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.cc-opt-badges {
    display: flex;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

.cc-opt-badge {
    padding: 2px 5px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.cc-opt-badge.lpr {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

/* Contact add button in dropdown */
.cc-contact-add {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
    transition: background 0.1s ease;
}

.cc-contact-add:hover {
    background: rgba(220, 38, 38, 0.08);
}

/* Context menu items wrapper */
.cc-ctx-items {
    display: flex;
    flex-direction: column;
}

/* WhatsApp and Telegram messenger link colors */
.cc-msg.wa svg {
    color: #25d366;
}

.cc-msg.tg svg {
    color: #0088cc;
}

/* Mobile for v2 card */
@media (max-width: 480px) {
    .contact-card-v2 {
        padding: 10px 12px;
    }

    .cc-name {
        font-size: var(--font-size-base);
    }

    .cc-phone {
        font-size: var(--font-size-sm);
    }

    .cc-messengers {
        display: none;
    }
}

/* =============================================================================
   DOOR QUOTE EDITOR
   ============================================================================= */

/* Alpine.js - скрываем элементы с x-cloak до инициализации */
[x-cloak] { display: none !important; }

/* Quote Editor Layout */
.quote-editor {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--spacing-4);
    min-height: calc(100vh - 200px);
}

@media (max-width: 1200px) {
    .quote-editor {
        grid-template-columns: 1fr;
    }

    .quote-sidebar {
        order: -1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }

    .quote-sidebar .sidebar-section:last-child {
        grid-column: span 2;
    }
}

/* Tablet (768px - 1200px) */
@media (max-width: 1024px) {
    .quote-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-3);
    }

    .quote-header-actions {
        justify-content: flex-end;
    }

    .doors-table th:nth-child(6),
    .doors-table td:nth-child(6),
    .doors-table th:nth-child(9),
    .doors-table td:nth-child(9) {
        display: none;
    }

    .opening-selector {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (до 768px) */
@media (max-width: 768px) {
    .quote-editor {
        gap: var(--spacing-2);
    }

    .quote-sidebar {
        grid-template-columns: 1fr;
    }

    .quote-sidebar .sidebar-section:last-child {
        grid-column: span 1;
    }

    .system-selector {
        flex-wrap: wrap;
    }

    .system-chip {
        flex: 1 0 45%;
        text-align: center;
    }

    /* Скрываем колонки на mobile */
    .doors-table th:nth-child(5),
    .doors-table td:nth-child(5),
    .doors-table th:nth-child(7),
    .doors-table td:nth-child(7) {
        display: none;
    }

    /* Крупные tap-зоны */
    .btn, .module-btn, .qs-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .module-toggle {
        padding: 12px;
    }

    /* Drawer на весь экран */
    .door-drawer {
        width: 100%;
    }

    .opening-selector {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }

    .opening-option {
        padding: var(--spacing-3);
    }

    .opening-icon {
        width: 50px;
        height: 60px;
    }
}

/* Small Mobile (до 480px) */
@media (max-width: 480px) {
    .quote-number {
        font-size: var(--font-size-xl);
    }

    .quote-header-actions {
        flex-wrap: wrap;
    }

    .quote-header-actions .btn {
        flex: 1 0 45%;
    }

    /* Таблица как карточки */
    .doors-table thead {
        display: none;
    }

    .doors-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2);
        padding: var(--spacing-3);
        margin-bottom: var(--spacing-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }

    .doors-table tbody td {
        padding: var(--spacing-1);
        border: none;
    }

    .doors-table tbody td:first-child {
        grid-column: span 2;
        font-weight: 600;
    }

    .doors-table tbody td:last-child {
        grid-column: span 2;
        justify-content: flex-end;
    }
}

/* Header Section */
.quote-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--border);
}

.quote-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.quote-number {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--text-primary);
}

.quote-status-badge {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
}

.quote-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* Icon sizes */
.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md {
    width: 20px;
    height: 20px;
}

/* Autosave icon — только иконка (Ильяхов) */
.autosave-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: default;
}

/* Status chip — компактный статус */
.status-chip {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.status-chip.status-draft { background: #f3f4f6; color: var(--text-muted); border-color: #d1d5db; }
.status-chip.status-sent { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.status-chip.status-paid { background: #dcfce7; color: #15803d; border-color: #86efac; }
.status-chip.status-in_work { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.status-chip.status-ready { background: #d1fae5; color: #047857; border-color: #6ee7b7; }
.status-chip.status-shipped { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; }
.status-chip.status-cancelled { background: #fee2e2; color: var(--danger); border-color: #fca5a5; }

/* Legacy .dropdown — moved to core/components.css as alias */

/* System Selector */
.system-selector {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.system-chip {
    padding: 8px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 500;
}

.system-chip:hover {
    border-color: var(--primary);
}

.system-chip.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

/* Door Grid */
.doors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-3);
}

/* Door Card */
.door-card {
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3);
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.door-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.door-card.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.door-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-2);
}

.door-code {
    font-weight: 600;
    font-size: var(--font-size-md);
}

.door-room {
    font-size: var(--font-size-base);
    color: var(--text-muted);
}

.door-dimensions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: var(--spacing-2) 0;
}

.door-dimension {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    min-width: 60px;
}

.door-dimension-label {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.door-dimension-value {
    font-size: var(--font-size-base);
    font-weight: 600;
}

.door-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
    margin-top: var(--spacing-2);
}

.door-feature {
    padding: 2px 8px;
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.door-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-2);
    border-top: 1px solid var(--border);
}

.door-price-value {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.door-margin {
    font-size: var(--font-size-sm);
}

/* Add Door Card */
.add-door-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    background: var(--surface-secondary);
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.add-door-card:hover {
    border-color: var(--primary);
    background: var(--surface-primary);
}

.add-door-card svg {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-2);
}

.add-door-card span {
    font-size: var(--font-size-base);
    color: var(--text-muted);
}

/* Quote Sidebar */
.quote-sidebar {
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.sidebar-section {
    margin-bottom: var(--spacing-4);
}

.sidebar-section-title {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-2);
    font-weight: 600;
}

/* Quote Summary */
.quote-summary {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
}

.summary-row.total {
    border-top: 1px solid var(--border);
    margin-top: var(--spacing-2);
    padding-top: var(--spacing-2);
    font-weight: 600;
    font-size: var(--font-size-lg);
}

.summary-label {
    color: var(--text-muted);
}

/* Profile Info */
.profile-info {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
}

.profile-info-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: var(--font-size-base);
}

.profile-info-label {
    color: var(--text-muted);
}

.profile-info-value {
    font-weight: 500;
}

/* Door Editor Drawer */
.door-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    height: 100vh;
    background: var(--surface-primary);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
}

.door-drawer.open {
    transform: translateX(0);
}

.door-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.door-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.door-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--border);
}

.door-drawer-content {
    padding: var(--spacing-4);
    overflow-y: auto;
    height: calc(100vh - 140px);
}

.door-drawer-footer {
    display: flex;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    border-top: 1px solid var(--border);
    background: var(--surface-secondary);
}

/* Dimension Input Group */
.dimension-input-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
}

/* Opening Calculation */
.opening-calc {
    margin-top: var(--spacing-2);
    padding: var(--spacing-2);
    background: var(--surface-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.opening-calc span:first-child {
    color: var(--text-muted);
}

.opening-calc span:nth-child(2) {
    font-weight: 600;
}

/* Opening Selector (4 варианта) */
.opening-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
}

.opening-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2);
    background: var(--surface-secondary);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.opening-option:hover {
    border-color: var(--primary);
    background: var(--surface-tertiary);
}

.opening-option.active {
    border-color: var(--primary);
    background: var(--primary-muted);
    color: var(--primary);
}

.opening-icon {
    width: 40px;
    height: 50px;
    color: var(--text-muted);
}

.opening-option.active .opening-icon {
    color: var(--primary);
}

.opening-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

.opening-option.active .opening-label {
    color: var(--primary);
}

/* Opening Code Visual */
.opening-visual {
    display: flex;
    justify-content: center;
    padding: var(--spacing-4);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    margin: var(--spacing-3) 0;
}

.opening-visual svg {
    width: 100px;
    height: 120px;
}

/* Module Toggles */
.module-toggles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2);
}

.module-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 8px 12px;
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.module-toggle:hover {
    border-color: var(--primary);
}

.module-toggle.active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.module-toggle input {
    display: none;
}

/* Mini Summary */
.mini-summary {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
}

.mini-stat {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.mini-stat strong {
    color: var(--text-primary);
    font-weight: 600;
}

.mini-stat.total {
    margin-left: auto;
    color: var(--primary);
}

.mini-stat.total strong {
    color: var(--primary);
}

/* Table Toolbar */
.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin-top: var(--spacing-2);
}

.toolbar-group {
    display: flex;
    gap: var(--spacing-2);
}

.toolbar-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* Keyboard hints */
.kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 0.7rem;
    background: var(--surface-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 0 var(--border);
    margin-right: 4px;
}

.btn-icon-sm {
    width: 14px;
    height: 14px;
}

/* Doors Table */
.doors-table {
    width: 100%;
    border-collapse: collapse;
}

.doors-table th {
    background: var(--surface-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.doors-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.doors-table tbody tr {
    transition: background var(--transition-fast);
}

.doors-table tbody tr:hover {
    background: var(--surface-secondary);
}

.doors-table .row-selected {
    background: var(--primary-light) !important;
}

/* Cell Editable */
.cell-editable {
    cursor: pointer;
    position: relative;
}

.cell-editable:hover {
    background: rgba(var(--primary-rgb), 0.05);
}

.cell-editable::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 1px dashed transparent;
    border-radius: var(--radius-xs);
    transition: border-color var(--transition-fast);
    pointer-events: none;
}

.cell-editable:hover::after {
    border-color: var(--primary);
}

/* Cell Warning */
.cell-value-with-warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.cell-warning {
    font-size: var(--font-size-sm);
    cursor: help;
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Mini Opening Icon */
.cell-opening {
    text-align: center;
}

.opening-mini-icon {
    width: 18px;
    height: 24px;
    vertical-align: middle;
}

/* Cell Input */
.cell-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: inherit;
    background: var(--surface-primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.cell-input:focus {
    outline: none;
}

/* Cell Select */
.cell-select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: inherit;
    background: var(--surface-primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

/* Module Badge */
.module-badge {
    display: inline-block;
    padding: 2px 6px;
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 600;
    margin-right: 2px;
}

/* Cell Code */
.cell-code {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Button Icon in table */
.btn-icon {
    padding: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.btn-icon:hover {
    background: var(--surface-secondary);
}

/* Auto-save status indicator */
.autosave-status {
    display: flex;
    align-items: center;
    margin-right: var(--spacing-3);
    font-size: 0.8rem;
}

.autosave-status span {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.autosave-status .status-saved {
    color: var(--success);
}

.autosave-status .status-pending {
    color: var(--warning);
}

.autosave-status .status-saving {
    color: var(--primary);
}

.autosave-status .status-error {
    color: var(--danger);
}

/* Spin animation for saving indicator */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* ==========================================================================
   Save Indicator (clickable, reusable)
   Usage: <button class="save-indicator" @click="forceSave()">...</button>
   ========================================================================== */

.save-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--success);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.save-indicator:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.save-indicator:disabled {
    cursor: wait;
}

.save-indicator svg {
    flex-shrink: 0;
}

/* Saving state */
.save-indicator--saving {
    color: var(--primary);
}

.save-indicator--saving .save-indicator__spinner {
    animation: spin 1s linear infinite;
}

/* Dirty/unsaved state */
.save-indicator--dirty {
    color: var(--warning);
}

.save-indicator--dirty:hover {
    background: rgba(var(--warning-rgb, 245, 158, 11), 0.1);
    border-color: var(--warning);
}

/* Saved check animation */
@keyframes save-check {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.save-indicator:not(.save-indicator--saving):not(.save-indicator--dirty) svg {
    animation: save-check 0.3s ease;
}

/* ==========================================================================
   Status Dropdown (order status selector)
   ========================================================================== */

.status-dropdown {
    position: relative;
    display: inline-flex;
}

.status-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.status-dropdown__trigger:hover {
    filter: brightness(0.95);
}

.status-dropdown__trigger:disabled {
    cursor: wait;
    opacity: 0.7;
}

.status-dropdown__trigger:focus {
    outline: none;
}

.status-dropdown__arrow {
    opacity: 0.5;
    transition: transform 0.2s ease;
}

.status-dropdown__arrow.rotate-180 {
    transform: rotate(180deg);
}

.status-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--spacing-1);
    min-width: 240px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    overflow: hidden;
    /* Убедимся что фон непрозрачный */
    isolation: isolate;
}

.status-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    text-align: left;
    background-color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.status-dropdown__item:hover:not(:disabled) {
    background-color: #f3f4f6;
}

.status-dropdown__item:disabled {
    cursor: default;
}

.status-dropdown__item:focus {
    outline: none;
}

.status-dropdown__item--active {
    background-color: #f9fafb;
    font-weight: 500;
}

.status-dropdown__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.status-dropdown__check {
    margin-left: auto;
    color: var(--success);
}

/* Status colors (применяются к trigger и items) */
.status-draft {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.status-approval {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(59, 130, 246);
}

.status-in_production {
    background: rgba(168, 85, 247, 0.1);
    color: rgb(168, 85, 247);
}

.status-ready_to_ship {
    background: rgba(34, 197, 94, 0.1);
    color: rgb(34, 197, 94);
}

.status-partially_shipped {
    background: rgba(245, 158, 11, 0.1);
    color: rgb(245, 158, 11);
}

.status-shipped {
    background: rgba(20, 184, 166, 0.1);
    color: rgb(20, 184, 166);
}

.status-documents_signed {
    background: rgba(107, 114, 128, 0.1);
    color: rgb(107, 114, 128);
}

.status-cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: rgb(239, 68, 68);
}

/* Items inherit color but have solid white background */
.status-dropdown__item.status-draft,
.status-dropdown__item.status-approval,
.status-dropdown__item.status-in_production,
.status-dropdown__item.status-ready_to_ship,
.status-dropdown__item.status-partially_shipped,
.status-dropdown__item.status-shipped,
.status-dropdown__item.status-documents_signed,
.status-dropdown__item.status-cancelled {
    background-color: #ffffff;
}

.status-dropdown__item.status-draft:hover:not(:disabled),
.status-dropdown__item.status-approval:hover:not(:disabled),
.status-dropdown__item.status-in_production:hover:not(:disabled),
.status-dropdown__item.status-ready_to_ship:hover:not(:disabled),
.status-dropdown__item.status-partially_shipped:hover:not(:disabled),
.status-dropdown__item.status-shipped:hover:not(:disabled),
.status-dropdown__item.status-documents_signed:hover:not(:disabled),
.status-dropdown__item.status-cancelled:hover:not(:disabled) {
    background-color: #f3f4f6;
}

/* Transitions for Alpine.js */
.transition-enter {
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.transition-enter-start {
    opacity: 0;
    transform: translateY(-4px);
}
.transition-enter-end {
    opacity: 1;
    transform: translateY(0);
}
.transition-leave {
    transition: opacity 0.1s ease, transform 0.1s ease;
}
.transition-leave-start {
    opacity: 1;
    transform: translateY(0);
}
.transition-leave-end {
    opacity: 0;
    transform: translateY(-4px);
}

/* Quick-select for dimensions */
.cell-dimension {
    position: relative;
}

.quick-select-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.cell-input-sm {
    width: 60px;
    padding: 2px 4px;
    font-size: 0.8rem;
}

.quick-select-buttons {
    display: flex;
    gap: var(--spacing-1);
}

.qs-btn {
    padding: 2px 6px;
    font-size: 0.65rem;
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.qs-btn:hover {
    border-color: var(--primary);
    background: var(--surface-primary);
}

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

/* Module buttons in table */
.cell-modules {
    display: flex;
    gap: var(--spacing-1);
    flex-wrap: nowrap;
}

.module-btn {
    padding: 2px 4px;
    font-size: 0.6rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    opacity: 0.4;
}

.module-btn:hover {
    opacity: 1;
    border-color: var(--primary);
}

.module-btn.active {
    opacity: 1;
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

/* Specification table in drawer */
.spec-table-wrapper {
    overflow-x: auto;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.spec-table th {
    background: var(--surface-secondary);
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.spec-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
}

.spec-table tfoot td {
    padding: 8px;
    background: var(--surface-secondary);
}

/* Compatibility status */
.compat-status {
    margin-top: 4px;
    font-size: var(--font-size-sm);
}

.compat-status.compat-ok {
    color: var(--success);
}

.compat-status.compat-warn {
    color: var(--warning);
}

.compat-status.compat-error {
    color: var(--danger);
}

/* ========================================
   Cutting Preview (Визуализация раскроя)
   ======================================== */

.cutting-section {
    margin-top: 24px;
    padding: 16px;
    background: var(--surface-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

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

.cutting-header h3 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.cutting-toggle {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.cutting-summary {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: 16px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.cutting-summary .stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.cutting-summary .stat strong {
    color: var(--text-primary);
    font-weight: 600;
}

.cutting-summary .waste-good {
    color: var(--success);
}

.cutting-summary .waste-ok {
    color: var(--warning);
}

.cutting-summary .waste-bad {
    color: var(--danger);
}

/* Blank (хлыст) */
.blank-card {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--surface-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.blank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: var(--font-size-sm);
}

.blank-title {
    font-weight: 600;
    color: var(--text-primary);
}

.blank-util {
    color: var(--text-muted);
}

.blank-util strong {
    color: var(--text-primary);
}

/* Визуальная полоса хлыста */
.blank-bar {
    height: 32px;
    background: var(--surface-tertiary);
    border-radius: var(--radius-sm);
    display: flex;
    overflow: hidden;
    position: relative;
}

.blank-bar-item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: #fff;
    background: var(--primary);
    border-right: 1px solid var(--surface-primary);
    min-width: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
}

.blank-bar-item:nth-child(odd) {
    background: var(--primary);
}

.blank-bar-item:nth-child(even) {
    background: var(--primary-dark);
}

.blank-bar-waste {
    height: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    background: repeating-linear-gradient(
        45deg,
        var(--surface-tertiary),
        var(--surface-tertiary) 4px,
        var(--border) 4px,
        var(--border) 8px
    );
}

/* Легенда под полосой */
.blank-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-top: 8px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.blank-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.blank-legend-item .label {
    font-weight: 500;
    color: var(--text-secondary);
}

.blank-legend-item .length {
    color: var(--text-muted);
}

/* Кнопка печати */
.cutting-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.cutting-actions .btn {
    font-size: var(--font-size-sm);
}

/* Loading state */
.cutting-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: var(--font-size-base);
}

.cutting-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: var(--radius-full);
    margin-right: 8px;
    animation: spin 1s linear infinite;
}

/* Empty state */
.cutting-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: var(--font-size-base);
}

/* ============================================
   Cost & Profit Deviation Indicators
   Показ изменений себестоимости и прибыли
   ============================================ */

/* Базовый стиль индикатора отклонения */
.cost-deviation,
.profit-deviation {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    margin-left: 4px;
    vertical-align: middle;
    cursor: help;
    white-space: nowrap;
}

/* Себестоимость выросла (плохо) */
.cost-deviation.cost-up {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Себестоимость снизилась (хорошо) */
.cost-deviation.cost-down {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Прибыль выросла (хорошо) */
.profit-deviation.profit-up {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Прибыль упала (плохо) */
.profit-deviation.profit-down {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Алерт о устаревших ценах */
.cost-alert-banner {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.cost-alert-banner .alert-icon {
    color: var(--warning);
    flex-shrink: 0;
}

.cost-alert-banner .alert-text {
    flex: 1;
    font-size: var(--font-size-base);
    color: var(--text);
}

.cost-alert-banner .alert-count {
    font-weight: 600;
    color: #d97706;
}

.cost-alert-banner .alert-action {
    font-size: var(--font-size-sm);
    color: #b45309;
    text-decoration: underline;
    cursor: pointer;
}

.cost-alert-banner .alert-action:hover {
    color: #92400e;
}

/* Подсветка строки при клике на "Показать" */
.cost-highlight-row {
    animation: costHighlightPulse 0.5s ease-in-out 3;
}

@keyframes costHighlightPulse {
    0%, 100% {
        background: var(--bg-secondary);
    }
    50% {
        background: rgba(251, 191, 36, 0.2);
    }
}

/* ========================================
   Quote Editor V2 — Block-based UI

   Apple-inspired: Clean, focused, one primary action
   Lebedev: Function over form
   Ilyahov: Remove unnecessary, focus on essential
   ======================================== */

/* Layout: Single column, stacked blocks */
.quote-editor-v2 {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--spacing-4);
}

/* Block container */
.quote-block {
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
    transition: box-shadow var(--transition-fast);
}

.quote-block:hover {
    box-shadow: var(--shadow-sm);
}

/* Block header with step number */
.quote-block-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-secondary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.block-number {
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.block-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.block-summary {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.block-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* Block content */
.quote-block-content {
    padding: var(--spacing-4);
}

/* Locked state (waiting for previous step) */
.quote-block.block-locked {
    opacity: 0.5;
    pointer-events: none;
}

.quote-block.block-locked .quote-block-content {
    display: none;
}

.block-hint {
    padding: var(--spacing-4);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-base);
}

/* ----------------------------------------
   Delivery Stage (Block 2 - Что отгружаем)
   ---------------------------------------- */

.delivery-stages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-3);
}

.delivery-stage-option {
    display: flex;
    align-items: flex-start;
    padding: var(--spacing-3);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--surface-primary);
}

.delivery-stage-option:hover {
    border-color: var(--primary);
    background: var(--surface-secondary);
}

.delivery-stage-option.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-primary));
}

.delivery-stage-option input[type="radio"] {
    display: none;
}

.delivery-stage-option .stage-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.delivery-stage-option .stage-icon {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-1);
}

.delivery-stage-option .stage-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.delivery-stage-option .stage-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Mobile: 2 columns */
@media (max-width: 768px) {
    .delivery-stages {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----------------------------------------
   Customer Picker (Block 1)
   ---------------------------------------- */

.customer-picker-wrapper {
    position: relative;
}

.customer-search-wrapper {
    position: relative;
}

.search-input-group {
    position: relative;
}

.search-input-group .search-icon {
    position: absolute;
    left: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
}

.customer-search-input {
    width: 100%;
    padding: var(--spacing-3);
    padding-left: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    background: var(--surface-secondary);
    transition: all var(--transition-fast);
}

.customer-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-muted);
}

/* Search results dropdown */
.search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.search-result-item:hover,
.search-result-item.selected {
    background: var(--surface-secondary);
}

.result-type-badge {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.result-type-badge.type-company {
    background: var(--primary-muted);
    color: var(--primary);
}

.result-type-badge.type-contact {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.result-info {
    flex: 1;
    min-width: 0;
}

.result-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.result-details {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Selected customer card */
.selected-customer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3);
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.customer-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.customer-avatar {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.customer-details {
    display: flex;
    flex-direction: column;
}

.customer-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.customer-company {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.btn-clear {
    padding: var(--spacing-2);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.btn-clear:hover {
    background: var(--surface-tertiary);
    color: var(--destructive);
}

.btn-clear svg {
    width: 16px;
    height: 16px;
}

/* ----------------------------------------
   System + Coating (Block 2)
   ---------------------------------------- */

.system-row,
.coating-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.system-row:last-child,
.coating-row:last-child {
    margin-bottom: 0;
}

.block-label {
    min-width: 80px;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* System chips (radio buttons styled) */
.system-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.system-chip {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border);
    border-radius: 100px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    background: var(--surface-primary);
}

.system-chip:hover {
    border-color: var(--primary);
}

.system-chip.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.system-chip input[type="radio"] {
    display: none;
}

/* Coating selects inline */
.coating-selects {
    display: flex;
    gap: var(--spacing-2);
    flex: 1;
}

.coating-selects select {
    min-width: 120px;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--surface-primary);
}

/* Color preview */
.coating-preview {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.color-swatch {
    width: 24px;
    height: 16px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
}

/* ----------------------------------------
   Profiles Row (Block 3)
   ---------------------------------------- */

.profiles-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
}

@media (max-width: 768px) {
    .profiles-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.profile-select {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.profile-select label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-select select {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--surface-primary);
}

.compat-ok {
    color: var(--success);
    font-size: 0.7rem;
    margin-top: 2px;
}

/* ----------------------------------------
   Collapsible Sections
   ---------------------------------------- */

.collapsible-sections {
    margin-top: var(--spacing-4);
    border-top: 1px solid var(--border);
    padding-top: var(--spacing-3);
}

.collapsible {
    border-bottom: 1px solid var(--border);
}

.collapsible:last-child {
    border-bottom: none;
}

.collapsible-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: left;
    transition: color var(--transition-fast);
}

.collapsible-trigger:hover {
    color: var(--primary);
}

.collapsible-summary {
    margin-left: auto;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: 400;
}

.collapsible-content {
    padding: var(--spacing-2) 0 var(--spacing-3);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-2);
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.85rem;
    cursor: pointer;
}

/* ----------------------------------------
   Doors Table (Block 4) — Compact
   ---------------------------------------- */

.mini-stats {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.doors-table-v2 {
    width: 100%;
    border-collapse: collapse;
}

.doors-table-v2 th,
.doors-table-v2 td {
    padding: var(--spacing-2) var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.doors-table-v2 th {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--surface-secondary);
}

.doors-table-v2 tbody tr:hover {
    background: var(--surface-secondary);
}

.doors-table-v2 tbody tr.has-override {
    background: rgba(251, 191, 36, 0.08);
}

/* Inline inputs in table */
.input-inline {
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    padding: var(--spacing-1);
    width: 100%;
    font-size: 0.85rem;
    transition: border-color var(--transition-fast);
}

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

.input-inline.input-sm {
    width: 60px;
}

.input-inline.input-xs {
    width: 40px;
    text-align: center;
}

.select-inline {
    background: transparent;
    border: none;
    padding: var(--spacing-1);
    font-size: 0.85rem;
    cursor: pointer;
}

/* Size cell */
.cell-size {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-variant-numeric: tabular-nums;
}

.cell-size span {
    color: var(--text-muted);
}

/* Direction cell */
.cell-direction {
    font-size: 0.9rem;
    white-space: nowrap;
    color: var(--text-muted);
}

/* Price cell */
.cell-price {
    font-weight: 500;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Actions cell */
.cell-actions {
    display: flex;
    gap: var(--spacing-1);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.doors-table-v2 tbody tr:hover .cell-actions {
    opacity: 1;
}

.btn-icon-sm {
    padding: var(--spacing-1);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.btn-icon-sm:hover {
    background: var(--surface-tertiary);
    color: var(--text-primary);
}

.btn-icon-sm.btn-danger:hover {
    color: var(--destructive);
}

.btn-icon-sm svg {
    width: 14px;
    height: 14px;
}

/* Override indicator */
.override-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(251, 191, 36, 0.15);
    color: #d97706;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
}

/* ----------------------------------------
   Totals Block (Block 5)
   ---------------------------------------- */

.quote-block-totals {
    background: var(--surface-secondary);
}

.totals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-6);
}

@media (max-width: 640px) {
    .totals-grid {
        grid-template-columns: 1fr;
    }
}

.totals-prices .total-row,
.totals-economics .econ-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-1) 0;
    font-size: 0.9rem;
}

.total-row-main {
    font-weight: 600;
    font-size: 1.1rem;
    border-top: 1px solid var(--border);
    margin-top: var(--spacing-2);
    padding-top: var(--spacing-2);
}

.econ-pct {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.margin-indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    margin-left: var(--spacing-2);
}

.margin-indicator.margin-ok { background: var(--success); }
.margin-indicator.margin-warn { background: var(--warning); }
.margin-indicator.margin-bad { background: var(--danger); }

.totals-actions {
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--border);
}

/* ----------------------------------------
   Door Drawer V2 — Right side panel
   ---------------------------------------- */

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.door-drawer-v2 {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 90vw;
    background: var(--surface-primary);
    box-shadow: var(--shadow-md);
    z-index: 201;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
}

.door-drawer-v2.open {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.drawer-header h3 {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin: 0;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-4);
}

.drawer-section {
    margin-bottom: var(--spacing-5);
}

.drawer-section h4 {
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-3);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-3);
}

.form-group-sm {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.form-group-sm label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.form-group-sm input,
.form-group-sm select,
.form-group-sm textarea {
    width: 100%;
    padding: var(--spacing-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.toggle-label input[type="checkbox"] {
    width: auto;
    accent-color: var(--primary);
}

/* Modern Toggle Switch (iOS-style) */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    cursor: pointer;
    user-select: none;
}

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

.toggle-switch-track {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: var(--radius-lg);
    transition: background 0.2s ease;
}

.toggle-switch input:checked + .toggle-switch-track {
    background: var(--primary);
}

.toggle-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: var(--radius-full);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.toggle-switch input:checked + .toggle-switch-track::after {
    transform: translateX(20px);
}

.toggle-switch-label {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
}

/* Dark mode for toggle switch */
html[data-theme="dark"] .toggle-switch-track {
    background: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .toggle-switch input:checked + .toggle-switch-track {
    background: var(--primary);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .toggle-switch-track {
        background: rgba(255, 255, 255, 0.2);
    }

    html[data-theme="auto"] .toggle-switch input:checked + .toggle-switch-track {
        background: var(--primary);
    }
}

.drawer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4);
    border-top: 1px solid var(--border);
    background: var(--surface-secondary);
    flex-shrink: 0;
}

.door-price-preview {
    font-size: 0.9rem;
}

.door-price-preview strong {
    font-size: 1.1rem;
    color: var(--primary);
}

/* ----------------------------------------
   Hinge Preview — Visual representation
   ---------------------------------------- */

.hinge-preview {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
}

.hinge-preview-bar {
    width: 16px;
    height: 120px;
    background: var(--border);
    border-radius: var(--radius-sm);
    position: relative;
    flex-shrink: 0;
}

.hinge-mark {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 4px;
    background: var(--primary);
    border-radius: var(--radius-xs);
}

.hinge-preview-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

/* ----------------------------------------
   Gaps Preview — Visual door frame
   ---------------------------------------- */

.gaps-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.gaps-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-3);
}

.gaps-row-top,
.gaps-row-bottom {
    justify-content: center;
}

.gaps-row-top .form-group-sm,
.gaps-row-bottom .form-group-sm {
    width: 100px;
}

.gaps-row-middle {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-3);
    align-items: center;
}

.gaps-preview {
    flex-shrink: 0;
}

.gap-visual {
    width: 80px;
    height: 120px;
    border: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    position: relative;
    background: var(--surface-secondary);
}

.gap-label {
    position: absolute;
    font-size: 0.65rem;
    color: var(--text-muted);
    background: var(--surface-primary);
    padding: 0 2px;
    white-space: nowrap;
}

.gap-label.top {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.gap-label.bottom {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.gap-label.left {
    left: -4px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
}

.gap-label.right {
    right: -4px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: right center;
}

/* ----------------------------------------
   Checkbox Grid — Component options
   ---------------------------------------- */

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-2);
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.85rem;
    cursor: pointer;
}

.checkbox-grid input[type="checkbox"] {
    accent-color: var(--primary);
}

/* ----------------------------------------
   Processing Section — Box & Edge settings
   ---------------------------------------- */

.processing-section {
    padding: var(--spacing-2) 0;
}

.processing-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-2);
}

.margin-override {
    padding: var(--spacing-2);
    background: var(--surface-tertiary);
    border-radius: var(--radius-sm);
}

/* ----------------------------------------
   Cutting Drawer — Profile cutting preview
   ---------------------------------------- */

.cutting-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 95vw;
    background: var(--surface-primary);
    box-shadow: var(--shadow-md);
    z-index: 201;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
}

.cutting-drawer.open {
    transform: translateX(0);
}

.cutting-loading,
.cutting-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-8);
    color: var(--text-muted);
    text-align: center;
}

.cutting-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-3);
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
}

.stat-item.stat-warn {
    background: rgba(245, 158, 11, 0.1);
}

.stat-value {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--text-primary);
}

.stat-warn .stat-value {
    color: #d97706;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cutting-blanks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.blank-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-3);
}

.blank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2);
}

.blank-profile {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.blank-util {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.blank-bar {
    display: flex;
    height: 32px;
    background: var(--surface-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-2);
}

.blank-used {
    display: flex;
    background: color-mix(in srgb, var(--primary) 15%, transparent);
}

.blank-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 100%;
    background: var(--primary);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    border-right: 1px solid rgba(255,255,255,0.3);
    cursor: default;
    overflow: hidden;
}

.blank-item:last-child {
    border-right: none;
}

.blank-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}

.blank-waste {
    background: repeating-linear-gradient(
        45deg,
        var(--surface-tertiary),
        var(--surface-tertiary) 5px,
        var(--border) 5px,
        var(--border) 10px
    );
}

.blank-details {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.blank-waste-mm {
    color: #d97706;
}

/* Spinner */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

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

/* ============================================
   ROW HIGHLIGHT ANIMATIONS (from pricing/base.html)
   ============================================ */

/* Pulse эффект - МЯГКАЯ версия для новых/обновлённых строк */
.highlight-new {
    animation: pulse-soft 3s ease-in-out forwards;
}

@keyframes pulse-soft {
    0% {
        background-color: rgba(34, 197, 94, 0.18);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
    15% {
        background-color: rgba(34, 197, 94, 0.2);
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1);
    }
    40% {
        background-color: rgba(34, 197, 94, 0.12);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Утилитный класс для скрытия */
.hidden {
    display: none !important;
}

/* ============================================
   PRICELIST DOMAIN TABS
   ============================================ */

.pricelist-domain-tabs {
    display: flex;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-4);
    padding: 4px;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    width: fit-content;
}

.pricelist-domain-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: all 0.15s ease;
}

.pricelist-domain-tab:hover {
    background: var(--surface-tertiary);
    color: var(--text-primary);
}

.pricelist-domain-tab.active {
    background: var(--surface-primary);
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pricelist-domain-tab .tab-icon {
    font-size: var(--font-size-md);
}

.pricelist-domain-tab .tab-label {
    white-space: nowrap;
}

.pricelist-domain-divider {
    width: 1px;
    background: var(--border-secondary);
    margin: 8px 4px;
}

@media (max-width: 640px) {
    .pricelist-domain-tabs {
        width: 100%;
    }

    .pricelist-domain-tab {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
    }

    .pricelist-domain-tab .tab-label {
        display: none;
    }

    .pricelist-domain-tab .tab-icon {
        font-size: var(--font-size-xl);
    }
}

/* ============================================
   MINI PROGRESS BAR (from quotes list)
   ============================================ */

.production-progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.progress-bar-mini {
    flex: 1;
    height: 6px;
    background: var(--surface-tertiary);
    border-radius: var(--radius-xs);
    overflow: hidden;
    min-width: 60px;
}
.progress-fill-mini {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-xs);
    transition: width 0.3s ease;
}
.progress-text-mini {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    min-width: 32px;
}

/* ============================================
   OVERFLOW FIXES FOR DROPDOWN MENUS
   ============================================ */

/* Разрешаем overflow для dropdown в фильтрах и таблицах */
.card.overflow-visible,
.card-header.overflow-visible,
.card-content.overflow-visible,
.table-wrapper.overflow-visible,
.table.overflow-visible {
    overflow: visible !important;
}

/* Mobile kr-* components (kr-sheet, kr-tabs-scroll, kr-fab, kr-glass,
   kr-action-sheet, kr-dot, kr-pill) — moved to core/components.css */

/* ============================================
   CUTTING MODULE — Модуль раскроя профилей
   ============================================ */

:root {
    /* Углы реза */
    --cut-angle-45: #fef3cd;
    --cut-angle-90: #f8f9fa;
    --cut-angle-indicator: #28a745;

    /* Отходы */
    --waste-good: #28a745;
    --waste-ok: #ffc107;
    --waste-bad: #dc3545;
    --waste-fill: #f8d7da;

    /* Хлыст */
    --blank-bg: #f8f9fa;
    --blank-border: #dee2e6;
    --kerf-color: #6c757d;

    /* Фрезеровки */
    --milling-hinge: #4dabf7;
    --milling-lock: #f76707;
    --milling-strike: #fab005;

    /* Оператор */
    --operator-btn-height: 120px;
    --operator-font-size: 24px;
}

/* Контейнер хлыста */
.cutting-blank {
    background: var(--blank-bg);
    border: 1px solid var(--blank-border);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-4, 16px);
    margin-bottom: var(--spacing-4, 16px);
    overflow-x: auto;
}

.cutting-blank__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3, 12px);
    font-weight: 600;
}

.cutting-blank__title {
    font-size: var(--font-size-md, 16px);
    color: var(--text-primary);
}

.cutting-blank__waste {
    font-size: var(--font-size-sm, 14px);
    padding: var(--spacing-1, 4px) var(--spacing-2, 8px);
    border-radius: var(--radius-sm, 4px);
}

.cutting-blank__waste--good {
    background: rgba(40, 167, 69, 0.1);
    color: var(--waste-good);
}

.cutting-blank__waste--ok {
    background: rgba(255, 193, 7, 0.1);
    color: var(--waste-ok);
}

.cutting-blank__waste--bad {
    background: rgba(220, 53, 69, 0.1);
    color: var(--waste-bad);
}

/* Деталь на хлысте */
.cutting-part {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--text-primary);
    border-radius: var(--radius-xs, 2px);
    min-height: 60px;
    position: relative;
    vertical-align: top;
}

.cutting-part--angle-45 {
    background: var(--cut-angle-45);
}

.cutting-part__label {
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    color: var(--text-primary);
}

.cutting-part__length {
    font-size: var(--font-size-xs, 12px);
    color: var(--text-muted);
}

.cutting-part__milling {
    position: absolute;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.cutting-part__milling--hinge {
    background: var(--milling-hinge);
}

.cutting-part__milling--lock {
    background: var(--milling-lock);
}

/* Отход */
.cutting-waste {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--waste-fill);
    border: 1px dashed var(--text-muted);
    border-radius: var(--radius-xs, 2px);
    min-height: 60px;
    color: var(--text-muted);
    font-size: var(--font-size-xs, 12px);
}

/* Индикатор угла 45° */
.cutting-angle-indicator {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.cutting-angle-indicator--left {
    top: 0;
    left: 0;
    border-width: 8px 8px 0 0;
    border-color: var(--cut-angle-indicator) transparent transparent transparent;
}

.cutting-angle-indicator--right {
    top: 0;
    right: 0;
    border-width: 0 8px 8px 0;
    border-color: transparent var(--cut-angle-indicator) transparent transparent;
}

/* Метрики раскроя */
.cutting-metrics {
    display: flex;
    gap: var(--spacing-4, 16px);
    margin-bottom: var(--spacing-6, 24px);
    flex-wrap: wrap;
}

.cutting-metric {
    text-align: center;
    padding: var(--spacing-4, 16px) var(--spacing-6, 24px);
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    min-width: 120px;
}

.cutting-metric__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.cutting-metric__value--good {
    color: var(--waste-good);
}

.cutting-metric__value--ok {
    color: var(--waste-ok);
}

.cutting-metric__value--bad {
    color: var(--waste-bad);
}

.cutting-metric__label {
    font-size: var(--font-size-xs, 12px);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--spacing-1, 4px);
}

/* Статус задания */
.cutting-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 8px);
    padding: var(--spacing-1, 4px) var(--spacing-3, 12px);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-sm, 14px);
    font-weight: 500;
}

.cutting-status--draft {
    background: rgba(108, 117, 125, 0.1);
    color: var(--text-muted);
}

.cutting-status--optimized {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
}

.cutting-status--in_progress {
    background: rgba(255, 193, 7, 0.1);
    color: var(--waste-ok);
}

.cutting-status--completed {
    background: rgba(40, 167, 69, 0.1);
    color: var(--waste-good);
}

.cutting-status--cancelled {
    background: rgba(220, 53, 69, 0.1);
    color: var(--waste-bad);
}

/* Режим оператора */
.cutting-operator {
    padding: var(--spacing-4, 16px);
}

.cutting-operator__progress {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-6, 24px);
}

.cutting-operator__progress-bar {
    height: 100%;
    background: var(--primary);
    transition: width 0.3s ease;
}

.cutting-operator__step {
    text-align: center;
    padding: var(--spacing-8, 32px);
}

.cutting-operator__instruction {
    font-size: var(--operator-font-size);
    font-weight: 600;
    margin-bottom: var(--spacing-6, 24px);
    line-height: 1.4;
}

.cutting-operator__value {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--spacing-4, 16px);
}

.cutting-operator__btn {
    width: 100%;
    height: var(--operator-btn-height);
    font-size: var(--operator-font-size);
    font-weight: 600;
    border-radius: var(--radius-lg, 12px);
    border: none;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.cutting-operator__btn:active {
    transform: scale(0.98);
}

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

.cutting-operator__btn--secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* SVG визуализация */
.cutting-svg-container {
    width: 100%;
    overflow-x: auto;
    padding: var(--spacing-2, 8px) 0;
}

.cutting-svg-container svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Список заданий */
.cutting-list__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-4, 16px);
    padding: var(--spacing-4, 16px);
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.cutting-list__item:hover {
    background: var(--bg-secondary);
}

.cutting-list__item:last-child {
    border-bottom: none;
}

.cutting-list__name {
    flex: 1;
    font-weight: 500;
}

.cutting-list__meta {
    color: var(--text-muted);
    font-size: var(--font-size-sm, 14px);
}

/* Форма создания */
.cutting-form__items {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.cutting-form__item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
    gap: var(--spacing-2, 8px);
    padding: var(--spacing-3, 12px);
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}

.cutting-form__item:last-child {
    border-bottom: none;
}

.cutting-form__item-header {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: var(--font-size-sm, 14px);
}

.cutting-form__add-btn {
    width: 100%;
    padding: var(--spacing-3, 12px);
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md, 8px);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: var(--spacing-3, 12px);
}

.cutting-form__add-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Dark theme */
html[data-theme="dark"] .cutting-blank {
    background: var(--surface-secondary, #2a2a2a);
    border-color: var(--border-color);
}

html[data-theme="dark"] .cutting-part {
    background: var(--surface-primary, #1a1a1a);
    border-color: var(--text-muted);
}

html[data-theme="dark"] .cutting-part--angle-45 {
    background: rgba(254, 243, 205, 0.2);
}

html[data-theme="dark"] .cutting-waste {
    background: rgba(248, 215, 218, 0.2);
}

html[data-theme="dark"] .cutting-metric {
    background: var(--surface-primary, #1a1a1a);
    border-color: var(--border-color);
}