:root {
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #93c5fd;
  --color-secondary: #6b7280;
  --color-secondary-dark: #4b5563;
  --color-success: #10b981;
  --color-success-dark: #059669;
  --color-error: #ef4444;
  --color-error-dark: #dc2626;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
  --color-bg: #ffffff;
  --color-bg-light: #f9fafb;
  --color-text: #1f2937;
  --color-text-light: #6b7280;
  --color-text-lighter: #9ca3af;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --badge-custom-color: #6b7280;
  --preview-color: #6b7280;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;
  --radius-base: 0.375rem;
  --radius-md: 0.5rem;
  --radius-full: 9999px;
  --transition-fast: 150ms ease-in-out;
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --topbar-height: 60px;
  --loading-opacity: 0.6;
  --topbar-height-mobile: 90px;

  /* iOS Safe Areas */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;

  /* iOS оптимізація рендерингу */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Запобігання масштабуванню на iOS при фокусі */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  padding: 0;
  padding-top: var(--safe-area-inset-top);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg-light);
  overflow-x: clip;
  min-height: 100vh;
}

/* ==========================================================================
   Запобігання розривів HTML тегів та небажаних переносів тексту
   ========================================================================== */

/* Запобігання розривів для навігації, кнопок, лейблів */
nav a,
button,
.button,
.btn,
.label,
.badge,
.tag,
.nav-item,
.dropdown__item,
.topbar__nav-link {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Безпечний перенос для текстового контенту */
p,
.text-content,
.description,
.content,
.message__text,
.comment-text,
.short-comment-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Покращений перенос з дефісами для заголовків */
h1,
h2,
h3,
h4,
h5,
h6 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
}

/* Спеціальна обробка для URL та email */
a[href^="http"],
a[href^="mailto"],
a[href^="tel"],
.url,
.email,
.telegram-link,
.website-link {
  word-break: break-all;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Flex/Grid контейнери - дозволяють дочірнім елементам стискатися */
.flex-container,
.grid-container,
[class*="flex"],
[class*="grid"] {
  min-width: 0;
}

/* Flex елементи, які містять текст, що може переноситися */
.flex-item,
[class*="flex"]>* {
  min-width: 0;
}

/* ==========================================================================
   Адаптивні правила для мобільних пристроїв
   ========================================================================== */

@media (max-width: 767px) {

  /* На мобільних дозволяємо перенос для довгих текстів */
  a[href^="http"],
  a[href^="mailto"],
  a[href^="tel"],
  .url,
  .email,
  .telegram-link,
  .website-link {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }

  /* Але залишаємо nowrap для критичних елементів */
  nav a,
  button,
  .button,
  .btn,
  .label,
  .badge,
  .tag,
  .nav-item,
  .dropdown__item,
  .topbar__nav-link {
    white-space: nowrap;
  }

  /* Заголовки на мобільних - дозволяємо перенос з дефісами */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
  }

  /* Додати padding-top до main content для topbar */
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }

  body {
    padding-top: 0;
  }

  .main-content,
  #main-content {
    padding-top: 0;
  }

  /* Контроль для всіх flex та grid контейнерів */
  [class*="flex"],
  [class*="grid"],
  .filters,
  .form-grid,
  .form-grid-2,
  .card,
  .modal__content {
    max-width: 100%;
    overflow-x: hidden;
  }
}