/**
 * Responsive Styles
 * Адаптивные стили для автоматической подстройки элементов
 */

/* ==========================================
   ROOT VARIABLES (установляются ResponsiveManager)
   ========================================== */

:root {
  --viewport-width: 100vw;
  --viewport-height: 100vh;
  --breakpoint: sm;
  --is-mobile: 1;
  --is-portrait: 1;
  --safe-area-top: env(safe-area-inset-top, 0);
  --safe-area-bottom: env(safe-area-inset-bottom, 0);
  --safe-area-left: env(safe-area-inset-left, 0);
  --safe-area-right: env(safe-area-inset-right, 0);
}

/* ==========================================
   BREAKPOINT CLASSES (добавляются на body)
   ========================================== */

body.bp-xs {
  --device-type: mobile;
}

body.bp-sm {
  --device-type: mobile;
}

body.bp-md {
  --device-type: tablet;
}

body.bp-lg {
  --device-type: desktop;
}

body.bp-xl {
  --device-type: desktop;
}

body.orientation-portrait {
  --orientation: portrait;
}

body.orientation-landscape {
  --orientation: landscape;
}

/* ==========================================
   ADAPTIVE PADDING
   ========================================== */

body.bp-xs .adaptive-padding {
  padding: 8px;
}

body.bp-sm .adaptive-padding {
  padding: 12px;
}

body.bp-md .adaptive-padding {
  padding: 16px;
}

body.bp-lg .adaptive-padding {
  padding: 20px;
}

body.bp-xl .adaptive-padding {
  padding: 24px;
}

/* ==========================================
   ADAPTIVE MARGINS
   ========================================== */

body.bp-xs .adaptive-margin {
  margin: 4px;
}

body.bp-sm .adaptive-margin {
  margin: 8px;
}

body.bp-md .adaptive-margin {
  margin: 12px;
}

body.bp-lg .adaptive-margin {
  margin: 16px;
}

body.bp-xl .adaptive-margin {
  margin: 20px;
}

/* ==========================================
   ADAPTIVE FONT SIZES
   ========================================== */

body.bp-xs .adaptive-text-sm {
  font-size: 12px;
}

body.bp-xs .adaptive-text {
  font-size: 13px;
}

body.bp-xs .adaptive-text-lg {
  font-size: 15px;
}

body.bp-sm .adaptive-text-sm {
  font-size: 13px;
}

body.bp-sm .adaptive-text {
  font-size: 14px;
}

body.bp-sm .adaptive-text-lg {
  font-size: 16px;
}

body.bp-md .adaptive-text-sm {
  font-size: 14px;
}

body.bp-md .adaptive-text {
  font-size: 15px;
}

body.bp-md .adaptive-text-lg {
  font-size: 17px;
}

body.bp-lg .adaptive-text-sm {
  font-size: 14px;
}

body.bp-lg .adaptive-text {
  font-size: 16px;
}

body.bp-lg .adaptive-text-lg {
  font-size: 18px;
}

body.bp-xl .adaptive-text-sm {
  font-size: 15px;
}

body.bp-xl .adaptive-text {
  font-size: 17px;
}

body.bp-xl .adaptive-text-lg {
  font-size: 19px;
}

/* ==========================================
   ADAPTIVE GAPS (для flexbox/grid)
   ========================================== */

body.bp-xs .adaptive-gap {
  gap: 6px;
}

body.bp-sm .adaptive-gap {
  gap: 8px;
}

body.bp-md .adaptive-gap {
  gap: 12px;
}

body.bp-lg .adaptive-gap {
  gap: 16px;
}

body.bp-xl .adaptive-gap {
  gap: 20px;
}

/* ==========================================
   ADAPTIVE LAYOUTS
   ========================================== */

/* Стеклянный layout для мобилей */
body.bp-xs .stacked-layout,
body.bp-sm .stacked-layout {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

/* Two-column layout для планшетов */
body.bp-md .two-column-layout {
  display: grid !important;
  grid-template-columns: 250px 1fr;
  gap: 16px;
}

/* Multi-column layout для десктопов */
body.bp-lg .multi-column-layout,
body.bp-xl .multi-column-layout {
  display: grid !important;
  grid-template-columns: 200px 1fr 250px;
  gap: 20px;
}

/* ==========================================
   HIDE/SHOW CLASSES ДЛЯ BREAKPOINTS
   ========================================== */

/* Показать только на мобиле */
.show-mobile {
  display: none !important;
}

body.bp-xs .show-mobile,
body.bp-sm .show-mobile {
  display: block !important;
}

/* Показать только на планшете */
.show-tablet {
  display: none !important;
}

body.bp-md .show-tablet {
  display: block !important;
}

/* Показать только на десктопе */
.show-desktop {
  display: none !important;
}

body.bp-lg .show-desktop,
body.bp-xl .show-desktop {
  display: block !important;
}

/* Скрыть на мобиле */
.hide-mobile {
  display: block !important;
}

body.bp-xs .hide-mobile,
body.bp-sm .hide-mobile {
  display: none !important;
}

/* Скрыть на планшете */
.hide-tablet {
  display: block !important;
}

body.bp-md .hide-tablet {
  display: none !important;
}

/* Скрыть на десктопе */
.hide-desktop {
  display: block !important;
}

body.bp-lg .hide-desktop,
body.bp-xl .hide-desktop {
  display: none !important;
}

/* ==========================================
   ADAPTIVE CONTAINERS
   ========================================== */

.adaptive-container {
  width: 100%;
  max-width: calc(var(--viewport-width) * 0.95);
  margin: 0 auto;
  padding: var(--safe-area-left) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-top);
}

body.bp-sm .adaptive-container {
  max-width: calc(var(--viewport-width) * 0.9);
}

body.bp-md .adaptive-container {
  max-width: 720px;
}

body.bp-lg .adaptive-container {
  max-width: 960px;
}

body.bp-xl .adaptive-container {
  max-width: 1200px;
}

/* ==========================================
   SAFE AREA PADDING (для notched devices)
   ========================================== */

.safe-top {
  padding-top: max(var(--safe-area-top), 8px);
}

.safe-bottom {
  padding-bottom: max(var(--safe-area-bottom), 8px);
}

.safe-left {
  padding-left: max(var(--safe-area-left), 8px);
}

.safe-right {
  padding-right: max(var(--safe-area-right), 8px);
}

.safe-all {
  padding: max(var(--safe-area-top), 8px)
           max(var(--safe-area-right), 8px)
           max(var(--safe-area-bottom), 8px)
           max(var(--safe-area-left), 8px);
}

/* ==========================================
   ADAPTIVE BUTTON SIZES
   ========================================== */

body.bp-xs button.adaptive,
body.bp-sm button.adaptive {
  padding: 10px 16px;
  min-height: 44px; /* Для сенсорных устройств */
  font-size: 14px;
}

body.bp-md button.adaptive {
  padding: 12px 20px;
  min-height: 48px;
  font-size: 15px;
}

body.bp-lg button.adaptive,
body.bp-xl button.adaptive {
  padding: 12px 24px;
  min-height: 44px;
  font-size: 16px;
}

/* ==========================================
   ADAPTIVE INPUT SIZES
   ========================================== */

body.bp-xs input.adaptive,
body.bp-sm input.adaptive,
body.bp-xs textarea.adaptive,
body.bp-sm textarea.adaptive {
  padding: 12px;
  font-size: 16px; /* Предотвращает зум на iOS */
  min-height: 44px;
}

body.bp-md input.adaptive,
body.bp-md textarea.adaptive {
  padding: 12px 16px;
  font-size: 15px;
  min-height: 42px;
}

body.bp-lg input.adaptive,
body.bp-xl input.adaptive,
body.bp-lg textarea.adaptive,
body.bp-xl textarea.adaptive {
  padding: 12px 16px;
  font-size: 15px;
  min-height: 40px;
}

/* ==========================================
   ADAPTIVE TOUCH TARGETS (мин 44x44px)
   ========================================== */

body.bp-xs [role='button'].adaptive,
body.bp-sm [role='button'].adaptive {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================
   ADAPTIVE MODAL DIALOGS
   ========================================== */

body.bp-xs .modal.adaptive,
body.bp-sm .modal.adaptive {
  width: 95vw;
  max-width: none;
  max-height: 90vh;
  border-radius: 12px;
}

body.bp-md .modal.adaptive {
  width: 90vw;
  max-width: 600px;
  max-height: 85vh;
}

body.bp-lg .modal.adaptive,
body.bp-xl .modal.adaptive {
  width: 80vw;
  max-width: 800px;
  max-height: 80vh;
}

/* ==========================================
   ADAPTIVE SCROLLING
   ========================================== */

.adaptive-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling на iOS */
}

body.bp-xs .adaptive-scroll,
body.bp-sm .adaptive-scroll {
  max-height: calc(100vh - 80px);
}

body.bp-md .adaptive-scroll {
  max-height: calc(100vh - 100px);
}

body.bp-lg .adaptive-scroll,
body.bp-xl .adaptive-scroll {
  max-height: calc(100vh - 120px);
}

/* ==========================================
   ADAPTIVE GRID/FLEX ITEMS
   ========================================== */

/* Grid колонки для разных размеров */
body.bp-xs .adaptive-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 8px;
}

body.bp-sm .adaptive-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

body.bp-md .adaptive-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

body.bp-lg .adaptive-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

body.bp-xl .adaptive-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* ==========================================
   PORTRAIT-SPECIFIC STYLES
   ========================================== */

body.bp-xs.orientation-portrait {
  --header-height: 50px;
}

body.bp-xs.orientation-landscape {
  --header-height: 40px;
}

/* ==========================================
   UTILITY CLASSES ДЛЯ ДЕБАГА
   ========================================== */

.debug-viewport::before {
  content: "Breakpoint: " attr(data-breakpoint) " | Size: " attr(data-width) "x" attr(data-height);
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #0f0;
  padding: 8px 12px;
  font-size: 10px;
  font-family: monospace;
  border-radius: 4px;
  z-index: 9999;
}