/* Oil Wells Map - Main Styles */

/* Import Component Styles */
@import url('./panels.css');
@import url('./workspace.css');
@import url('./toolbar.css');
@import url('./context-panel.css');

/* ========================================
   ГЛОБАЛЬНАЯ ДИЗАЙН-СИСТЕМА
   ======================================== */

/* CSS Custom Properties - Масштабируемая дизайн-система */
:root {
  /* ========================================
     БАЗОВЫЙ РАЗМЕР ШРИФТА - ОСНОВА МАСШТАБИРОВАНИЯ
     ======================================== */
  --base-font-size: 12px; /* Базовый размер шрифта - изменяйте только это значение */
  
  /* Основные цвета из Figma */
  --color-primary: #0078d2;
  --color-primary-hover: #106ebe;
  --color-primary-light: #deecf9;
  
  --color-secondary: #33617d;
  --color-secondary-hover: #2f5e7b;
  --color-secondary-light: #f5f8fa;
  
  --color-success: #107c10;
  --color-warning: #ff8c00;
  --color-error: #d13438;
  --color-info: #0078d4;
  
  /* Нейтральные цвета из Figma */
  --color-white: #ffffff;
  --color-gray-50: #f5f8fa;
  --color-gray-100: #edf2f5;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #ccd9e0;
  --color-gray-400: #b8cad5;
  --color-gray-500: #a6b1b8;
  --color-gray-600: #94a3b8;
  --color-gray-700: #64748b;
  --color-gray-800: #475569;
  --color-gray-900: #002033;
  
  /* Семантические цвета */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-100);
  --bg-tertiary: var(--color-gray-50);
  
  --text-primary: var(--color-gray-900);
  --text-secondary: rgba(0, 32, 51, 0.6);
  --text-muted: var(--color-gray-500);
  --text-accent: var(--color-secondary);
  
  --border-color: var(--color-gray-300);
  --border-color-hover: var(--color-gray-300);
  --border-color-focus: var(--color-primary);

  --grid-color: var(--color-gray-900);
  
  /* Цвета для рабочего окна и карты */
  --workspace-bg: var(--bg-secondary);                    /* Фон рабочего окна */
  --grid-line-color: var(--color-gray-300);   /* Цвет линий сетки */
  --well-color: #002033;                      /* Цвет скважин */
  --well-stroke-color: #002033;              /* Цвет обводки скважин */
  --well-label-color: #1e293b;               /* Цвет подписей скважин */
  --well-radius: 5px;                        /* Радиус иконки скважины (в пикселях) */
  
  /* Параметры endpoint траектории скважины */
  --trajectory-endpoint-radius: 3px;         /* Радиус точки endpoint (в пикселях) */
  --trajectory-endpoint-radius-hover: 3px;   /* Радиус точки endpoint при hover (в пикселях) */
  --trajectory-endpoint-hit-tolerance: 16px; /* Кликабельная область endpoint (в пикселях) */
  --trajectory-line-hit-tolerance: 8px;      /* Кликабельная область линии траектории (в пикселях) */
  --trajectory-endpoint-color: var(--well-color); /* Цвет точки endpoint */
  --trajectory-endpoint-color-hover: #FFFFFF; /* Цвет точки endpoint при hover */
  --trajectory-endpoint-stroke-color: #2563eb; /* Цвет обводки endpoint при hover */
  --trajectory-endpoint-stroke-width: 2px;   /* Толщина обводки endpoint при hover */
  --object-fill-color: #2563eb;              /* Цвет заливки объектов */
  --object-stroke-color: #1d4ed8;            /* Цвет обводки объектов */
  --line-color: #2563eb;                     /* Цвет линий */
  
  /* ========================================
     МАСШТАБИРУЕМЫЕ РАЗМЕРЫ И ОТСТУПЫ
     Все размеры привязаны к базовому размеру шрифта
     ======================================== */
  
  /* Отступы (пропорциональные базовому размеру) */
  --spacing-xs: calc(var(--base-font-size) * 0.286);   /* 4px при 14px */
  --spacing-sm: calc(var(--base-font-size) * 0.571);   /* 8px при 14px */
  --spacing-md: calc(var(--base-font-size) * 0.857);   /* 12px при 14px */
  --spacing-lg: calc(var(--base-font-size) * 1.143);   /* 16px при 14px */
  --spacing-xl: calc(var(--base-font-size) * 1.714);   /* 24px при 14px */
  --spacing-2xl: calc(var(--base-font-size) * 2.286);  /* 32px при 14px */
  --spacing-3xl: calc(var(--base-font-size) * 3.429);  /* 48px при 14px */
  
  /* Размеры компонентов (пропорциональные базовому размеру) */
  --panel-width-settings: calc(var(--base-font-size) * 34.286); /* 480px при 14px */
  --panel-width-formatting: calc(var(--base-font-size) * 22.857); /* 320px при 14px */
  --panel-width-default: calc(var(--base-font-size) * 20); /* 280px при 14px */
  --panel-width-collapsed: calc(var(--base-font-size) * 3.429); /* 48px при 14px */
  --toolbar-height: calc(var(--base-font-size) * 3.429); /* 48px при 14px */
  --header-height: calc(var(--base-font-size) * 4.286); /* 60px при 14px */
  
  /* Радиусы скругления (пропорциональные базовому размеру) */
  --radius-sm: calc(var(--base-font-size) * 0.286);    /* 4px при 14px */
  --radius-md: calc(var(--base-font-size) * 0.429);     /* 6px при 14px */
  --radius-lg: calc(var(--base-font-size) * 0.571);    /* 8px при 14px */
  --radius-xl: calc(var(--base-font-size) * 0.857);    /* 12px при 14px */
  
  /* Тени (пропорциональные базовому размеру) */
  --shadow-sm: 0 calc(var(--base-font-size) * 0.071) calc(var(--base-font-size) * 0.143) 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 calc(var(--base-font-size) * 0.286) calc(var(--base-font-size) * 0.429) -1px rgb(0 0 0 / 0.1), 0 calc(var(--base-font-size) * 0.143) calc(var(--base-font-size) * 0.286) -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 calc(var(--base-font-size) * 0.714) calc(var(--base-font-size) * 1.071) -3px rgb(0 0 0 / 0.1), 0 calc(var(--base-font-size) * 0.286) calc(var(--base-font-size) * 0.429) -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 calc(var(--base-font-size) * 1.429) calc(var(--base-font-size) * 1.786) -5px rgb(0 0 0 / 0.1), 0 calc(var(--base-font-size) * 0.571) calc(var(--base-font-size) * 0.714) -6px rgb(0 0 0 / 0.1);
  
  /* Переходы */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* ========================================
     МАСШТАБИРУЕМАЯ ТИПОГРАФИКА
     ======================================== */
  
  --font-family-sans: 'TT Fellows Variable', 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  
  /* Размеры шрифтов (пропорциональные базовому размеру) */
  --text-xs: calc(var(--base-font-size) * 0.857);      /* 12px при 14px */
  --text-sm: var(--base-font-size);                    /* 14px при 14px */
  --text-base: calc(var(--base-font-size) * 1.143);    /* 16px при 14px */
  --text-lg: calc(var(--base-font-size) * 1.286);      /* 18px при 14px */
  --text-xl: calc(var(--base-font-size) * 1.429);      /* 20px при 14px */
  --text-2xl: calc(var(--base-font-size) * 1.714);     /* 24px при 14px */
  --text-3xl: calc(var(--base-font-size) * 2.143);     /* 30px при 14px */
  
  /* Высота строк */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  
  /* Толщина шрифтов */
  --font-weight-normal: 400;
  --font-weight-medium: 460;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* ========================================
     РАЗМЕРЫ КОМПОНЕНТОВ ИНТЕРФЕЙСА
     ======================================== */
  
  /* Высоты элементов (пропорциональные базовому размеру) */
  --input-height: calc(var(--base-font-size) * 2.286);     /* 32px при 14px */
  --input-height-small: calc(var(--base-font-size) * 1.714); /* 24px при 14px */
  --button-height: calc(var(--base-font-size) * 2.286);    /* 32px при 14px */
  --button-height-small: calc(var(--base-font-size) * 1.714); /* 24px при 14px */
  --checkbox-size: calc(var(--base-font-size) * 1.143);    /* 16px при 14px */
  --tab-height: calc(var(--base-font-size) * 2.286);       /* 32px при 14px */
  
  /* Отступы внутри элементов */
  --input-padding-x: calc(var(--base-font-size) * 0.643); /* 9px при 14px */
  --input-padding-y: calc(var(--base-font-size) * 0.286); /* 4px при 14px */
  --button-padding-x: calc(var(--base-font-size) * 0.857); /* 12px при 14px */
  --button-padding-y: calc(var(--base-font-size) * 0.286); /* 4px при 14px */
  
  /* Размеры иконок */
  --icon-size-sm: calc(var(--base-font-size) * 0.5);    /* 12px при 14px */
  --icon-size-md: calc(var(--base-font-size) * 1);    /* 16px при 14px */
  --icon-size-lg: calc(var(--base-font-size) * 1);    /* 20px при 14px */
}

/* ========================================
   БАЗОВЫЕ СТИЛИ
   ======================================== */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-sans);
    background-color: var(--bg-tertiary);
    overflow: hidden;
    color: var(--text-primary);
    line-height: var(--leading-normal);
}

/* Map Container */
.map-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    cursor: grab;
    background-color: #ecf1f4;
    /* Account for fixed axis labels */
    padding: 30px 60px;
    box-sizing: border-box;
}

.map-container:active {
    cursor: grabbing;
}

.map-content {
    position: absolute;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    background-color: #ecf1f4;
}

/* Grid System */
.grid-overlay {
    position: fixed;
    top: 30px;
    left: 60px;
    right: 60px;
    bottom: 30px;
    pointer-events: none;
    z-index: 50;
}

.grid-canvas {
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

/* Axis Labels */
.axis-labels {
    position: fixed;
    font-size: 12px;
    color: rgba(0, 32, 51, 0.8);
    font-weight: 400;
    user-select: none;
    z-index: 100;
    background-color: rgba(236, 241, 244, 0.9);
    backdrop-filter: blur(2px);
}

.x-axis-top {
    top: 0;
    left: 60px;
    right: 60px;
    height: 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 32, 51, 0.2);
}

.x-axis-bottom {
    bottom: 0;
    left: 60px;
    right: 60px;
    height: 30px;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(0, 32, 51, 0.2);
}

.y-axis-left {
    left: 0;
    top: 30px;
    bottom: 30px;
    width: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px 8px;
    border-right: 1px solid rgba(0, 32, 51, 0.2);
}

.y-axis-right {
    right: 0;
    top: 30px;
    bottom: 30px;
    width: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 8px;
    border-left: 1px solid rgba(0, 32, 51, 0.2);
}

.axis-label {
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.8);
}

/* Wells */
.wells-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.well {
    position: absolute;
    width: 10px;
    height: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.well:hover {
    transform: scale(1.2);
    z-index: 10;
}

.well-icon {
    width: 100%;
    height: 100%;
    background-color: #002033;
    border-radius: 50%;
    position: relative;
    border: 2px solid #002033;
}

.well-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 12px;
    background-color: #002033;
}

.well-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 2px;
    background-color: #002033;
}

.well-label {
    position: absolute;
    top: -15px;
    left: 22px;
    font-size: 12px;
    color: #000;
    white-space: nowrap;
    font-weight: 400;
    background-color: rgba(236, 241, 244, 0.9);
    padding: 2px 4px;
    border-radius: 2px;
}

.well-trajectory {
    position: absolute;
    stroke: #002033;
    stroke-width: 2;
    fill: none;
    pointer-events: none;
}

/* Controls */
.controls {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.control-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 1);
}

/* Info Panel */
.zoom-info {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    border: 1px solid #ccc;
}

/* ========================================
   ОСНОВНАЯ КОМПОНОВКА ПРИЛОЖЕНИЯ
   ======================================== */

/* Основной контейнер приложения */
.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  gap: 0;
}

/* Панель настроек */
.panel--settings {
  flex: 0 0 min(25vw, 480px);
  min-width: 25vw;
  max-width: 480px;
}

/* Рабочее окно */
.workspace {
  flex: 1 1 auto;
  min-width: 0; /* Позволяет сжиматься */
}

/* Панель форматирования */
.panel--formatting {
  flex: 0 0 min(15vw, 320px);
  min-width: 15vw;
  max-width: 320px;
}

/* Варианты компоновки при скрытых панелях */
.app-container--no-settings .panel--settings {
  display: none;
}

.app-container--no-formatting .panel--formatting {
  display: none;
}

.app-container--no-panels .panel--settings,
.app-container--no-panels .panel--formatting {
  display: none;
}

/* ========================================
   ИНФОРМАЦИЯ О ВЕРСИИ ПРИЛОЖЕНИЯ
   ======================================== */

.version-info {
  position: fixed;
  bottom: var(--spacing-md);
  right: var(--spacing-md);
  z-index: 9999;
  pointer-events: none;
  user-select: none;
}

.version-info__content {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-color);
  padding: var(--spacing-xs) var(--spacing-sm);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 80px;
}

.version-info__version {
  font-size: calc(var(--base-font-size) * 0.714);
  line-height: 1;
}

.version-info__date {
  font-size: calc(var(--base-font-size) * 0.714);
  line-height: 1;
}

/* ========================================
   СТИЛИ ДЛЯ МАССОВОГО РЕДАКТИРОВАНИЯ
   ======================================== */

/* Стили для полей с разными значениями */
.context-panel__field--mixed {
  background-color: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.3);
}

.context-panel__field--mixed:focus {
  background-color: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.5);
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
}

/* Стили для заголовка при множественном выборе */
.context-panel__title--multi {
  color: var(--text-primary);
  font-weight: 600;
}

/* Стили для счетчика выбранных объектов */
.context-panel__selection-count {
  display: inline-block;
  background: var(--primary-color);
  color: white;
  font-size: calc(var(--base-font-size) * 0.714);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: var(--spacing-xs);
  min-width: 20px;
  text-align: center;
}

/* ========================================
   СТИЛИ ДЛЯ ТУЛТИПА ТРАЕКТОРИИ
   ======================================== */

.trajectory-tooltip {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}

.trajectory-tooltip__content {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  padding: 2px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 80px;
}

.trajectory-tooltip__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trajectory-tooltip__row:last-child {
  margin-bottom: 0;
}

.trajectory-tooltip__label {
  color: rgba(255, 255, 255, 0.8);
  font-size: calc(var(--base-font-size) * 0.857);
  margin-right: 8px;
}

.trajectory-tooltip__value {
  color: #ffffff;
  font-size: calc(var(--base-font-size) * 0.857);
  font-family: monospace;
}