/* ============================================================================
   AXIS rebrand — custom CSS for Chatwoot v3.16.0.
   Подключается через mounted vueapp.html.erb (<link href="/axis-custom.css">).

   Покрывает три слоя Chatwoot:
     1. CSS variables `--w-25` .. `--w-900` (старая палитра, наследовалась из SCSS)
     2. Tailwind utility classes `.bg-woot-N` / `.text-woot-N` / `.border-woot-N`
        / `.ring-woot-N` / `.fill-woot-N` / `.hover:bg-woot-N` (компилируются
        Tailwind'ом из tailwind.config.js, оттенки слегка отличаются от --w-N)
     3. Hardcoded #1f93ff в vue-datepicker (`.mx-*` классы)
     4. Common Tailwind blue (links, focus rings) + iris-9/10 (Radix solid)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* AXIS primary palette, base = #3F598B (rgb 63 89 139)             */
  --axis-25:  #F4F6FA;  --axis-25-rgb:  244 246 250;
  --axis-50:  #EBF0F8;  --axis-50-rgb:  235 240 248;
  --axis-75:  #DCE3EE;  --axis-75-rgb:  220 227 238;
  --axis-100: #C7D2E4;  --axis-100-rgb: 199 210 228;
  --axis-200: #A1B3CD;  --axis-200-rgb: 161 179 205;
  --axis-300: #7B94B7;  --axis-300-rgb: 123 148 183;
  --axis-400: #5774A0;  --axis-400-rgb: 87 116 160;
  --axis-500: #3F598B;  --axis-500-rgb: 63 89 139;
  --axis-600: #344A73;  --axis-600-rgb: 52 74 115;
  --axis-700: #2A3D5E;  --axis-700-rgb: 42 61 94;
  --axis-800: #1F2D45;  --axis-800-rgb: 31 45 69;
  --axis-900: #131D2D;  --axis-900-rgb: 19 29 45;

  /* Перебиваем chatwoot --w-N (legacy SCSS palette) */
  --w-25:  var(--axis-25);
  --w-50:  var(--axis-50);
  --w-75:  var(--axis-75);
  --w-100: var(--axis-100);
  --w-200: var(--axis-200);
  --w-300: var(--axis-300);
  --w-400: var(--axis-400);
  --w-500: var(--axis-500);
  --w-600: var(--axis-600);
  --w-700: var(--axis-700);
  --w-800: var(--axis-800);
  --w-900: var(--axis-900);
}

/* --- Шрифт --------------------------------------------------------------- */
html,
body,
button,
input,
textarea,
select,
.app-wrapper,
.dashboard-app,
.modal-container,
[id="app"] {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* ===========================================================================
   Tailwind utility classes — Chatwoot компилирует `woot` цвета как hex literals.
   Перебиваем точечно для каждого оттенка через !important + RGB триплет (чтобы
   --tw-bg-opacity / --tw-text-opacity / --tw-border-opacity продолжали работать).
   =========================================================================== */

/* Backgrounds */
.bg-woot-25  { background-color: rgb(var(--axis-25-rgb)  / var(--tw-bg-opacity, 1)) !important; }
.bg-woot-50  { background-color: rgb(var(--axis-50-rgb)  / var(--tw-bg-opacity, 1)) !important; }
.bg-woot-75  { background-color: rgb(var(--axis-75-rgb)  / var(--tw-bg-opacity, 1)) !important; }
.bg-woot-100 { background-color: rgb(var(--axis-100-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-woot-200 { background-color: rgb(var(--axis-200-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-woot-300 { background-color: rgb(var(--axis-300-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-woot-400 { background-color: rgb(var(--axis-400-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-woot-500 { background-color: rgb(var(--axis-500-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-woot-600 { background-color: rgb(var(--axis-600-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-woot-700 { background-color: rgb(var(--axis-700-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-woot-800 { background-color: rgb(var(--axis-800-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-woot-900 { background-color: rgb(var(--axis-900-rgb) / var(--tw-bg-opacity, 1)) !important; }

.hover\:bg-woot-100:hover { background-color: rgb(var(--axis-100-rgb) / var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-woot-200:hover { background-color: rgb(var(--axis-200-rgb) / var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-woot-300:hover { background-color: rgb(var(--axis-300-rgb) / var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-woot-400:hover { background-color: rgb(var(--axis-400-rgb) / var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-woot-500:hover { background-color: rgb(var(--axis-500-rgb) / var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-woot-600:hover { background-color: rgb(var(--axis-600-rgb) / var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-woot-700:hover { background-color: rgb(var(--axis-700-rgb) / var(--tw-bg-opacity, 1)) !important; }

/* Text */
.text-woot-25  { color: rgb(var(--axis-25-rgb)  / var(--tw-text-opacity, 1)) !important; }
.text-woot-50  { color: rgb(var(--axis-50-rgb)  / var(--tw-text-opacity, 1)) !important; }
.text-woot-75  { color: rgb(var(--axis-75-rgb)  / var(--tw-text-opacity, 1)) !important; }
.text-woot-100 { color: rgb(var(--axis-100-rgb) / var(--tw-text-opacity, 1)) !important; }
.text-woot-200 { color: rgb(var(--axis-200-rgb) / var(--tw-text-opacity, 1)) !important; }
.text-woot-300 { color: rgb(var(--axis-300-rgb) / var(--tw-text-opacity, 1)) !important; }
.text-woot-400 { color: rgb(var(--axis-400-rgb) / var(--tw-text-opacity, 1)) !important; }
.text-woot-500 { color: rgb(var(--axis-500-rgb) / var(--tw-text-opacity, 1)) !important; }
.text-woot-600 { color: rgb(var(--axis-600-rgb) / var(--tw-text-opacity, 1)) !important; }
.text-woot-700 { color: rgb(var(--axis-700-rgb) / var(--tw-text-opacity, 1)) !important; }
.text-woot-800 { color: rgb(var(--axis-800-rgb) / var(--tw-text-opacity, 1)) !important; }
.text-woot-900 { color: rgb(var(--axis-900-rgb) / var(--tw-text-opacity, 1)) !important; }

.hover\:text-woot-500:hover { color: rgb(var(--axis-500-rgb) / var(--tw-text-opacity, 1)) !important; }
.hover\:text-woot-600:hover { color: rgb(var(--axis-600-rgb) / var(--tw-text-opacity, 1)) !important; }
.hover\:text-woot-700:hover { color: rgb(var(--axis-700-rgb) / var(--tw-text-opacity, 1)) !important; }

/* Borders */
.border-woot-25  { border-color: rgb(var(--axis-25-rgb)  / var(--tw-border-opacity, 1)) !important; }
.border-woot-50  { border-color: rgb(var(--axis-50-rgb)  / var(--tw-border-opacity, 1)) !important; }
.border-woot-75  { border-color: rgb(var(--axis-75-rgb)  / var(--tw-border-opacity, 1)) !important; }
.border-woot-100 { border-color: rgb(var(--axis-100-rgb) / var(--tw-border-opacity, 1)) !important; }
.border-woot-200 { border-color: rgb(var(--axis-200-rgb) / var(--tw-border-opacity, 1)) !important; }
.border-woot-300 { border-color: rgb(var(--axis-300-rgb) / var(--tw-border-opacity, 1)) !important; }
.border-woot-400 { border-color: rgb(var(--axis-400-rgb) / var(--tw-border-opacity, 1)) !important; }
.border-woot-500 { border-color: rgb(var(--axis-500-rgb) / var(--tw-border-opacity, 1)) !important; }
.border-woot-600 { border-color: rgb(var(--axis-600-rgb) / var(--tw-border-opacity, 1)) !important; }
.border-woot-700 { border-color: rgb(var(--axis-700-rgb) / var(--tw-border-opacity, 1)) !important; }
.border-woot-800 { border-color: rgb(var(--axis-800-rgb) / var(--tw-border-opacity, 1)) !important; }
.border-woot-900 { border-color: rgb(var(--axis-900-rgb) / var(--tw-border-opacity, 1)) !important; }

/* Focus rings */
.ring-woot-300 { --tw-ring-color: rgb(var(--axis-300-rgb) / var(--tw-ring-opacity, 1)) !important; }
.ring-woot-400 { --tw-ring-color: rgb(var(--axis-400-rgb) / var(--tw-ring-opacity, 1)) !important; }
.ring-woot-500 { --tw-ring-color: rgb(var(--axis-500-rgb) / var(--tw-ring-opacity, 1)) !important; }
.ring-woot-600 { --tw-ring-color: rgb(var(--axis-600-rgb) / var(--tw-ring-opacity, 1)) !important; }
.focus\:ring-woot-500:focus { --tw-ring-color: rgb(var(--axis-500-rgb) / var(--tw-ring-opacity, 1)) !important; }

/* SVG fill (icons) */
.fill-woot-400 { fill: rgb(var(--axis-400-rgb)) !important; }
.fill-woot-500 { fill: rgb(var(--axis-500-rgb)) !important; }
.fill-woot-600 { fill: rgb(var(--axis-600-rgb)) !important; }

/* ===========================================================================
   Tailwind default blue (links, focus rings некоторых форм)
   =========================================================================== */
.bg-blue-50  { background-color: rgb(var(--axis-50-rgb)  / var(--tw-bg-opacity, 1)) !important; }
.bg-blue-100 { background-color: rgb(var(--axis-100-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-blue-500 { background-color: rgb(var(--axis-500-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-blue-600 { background-color: rgb(var(--axis-600-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-blue-700 { background-color: rgb(var(--axis-700-rgb) / var(--tw-bg-opacity, 1)) !important; }
.text-blue-500 { color: rgb(var(--axis-500-rgb) / var(--tw-text-opacity, 1)) !important; }
.text-blue-600 { color: rgb(var(--axis-600-rgb) / var(--tw-text-opacity, 1)) !important; }
.text-blue-700 { color: rgb(var(--axis-700-rgb) / var(--tw-text-opacity, 1)) !important; }
.border-blue-500 { border-color: rgb(var(--axis-500-rgb) / var(--tw-border-opacity, 1)) !important; }
.border-blue-600 { border-color: rgb(var(--axis-600-rgb) / var(--tw-border-opacity, 1)) !important; }
.hover\:bg-blue-600:hover { background-color: rgb(var(--axis-600-rgb) / var(--tw-bg-opacity, 1)) !important; }
.hover\:text-blue-700:hover { color: rgb(var(--axis-700-rgb) / var(--tw-text-opacity, 1)) !important; }

/* ===========================================================================
   Radix iris (используется в "solid" кнопках через bg-n-solid-X в новом UI)
   =========================================================================== */
:root {
  --iris-9: 63 89 139;    /* base */
  --iris-10: 52 74 115;   /* darker */
  --iris-11: 42 61 94;
  --iris-3: 235 240 248;
  --iris-4: 220 227 238;
}

/* ===========================================================================
   Nice UI (`.n-*` классы) — основной design system Chatwoot v3+.
   Это самое важное: кнопки "Создать ...", ссылки "Настроить" — все на n-brand.
   Brand color compiled into utility classes как #2781f6 hex literals.
   =========================================================================== */

:root {
  --text-blue: var(--axis-500-rgb);   /* legacy --text-blue, который пользует .bg-n-blue-text */
}

/* Backgrounds */
.bg-n-brand {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--axis-500-rgb) / var(--tw-bg-opacity, 1)) !important;
}
.bg-n-blue-text {
  background-color: rgb(var(--axis-500-rgb)) !important;
}
.hover\:bg-n-brand:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--axis-600-rgb) / var(--tw-bg-opacity, 1)) !important;
}
.hover\:bg-n-brand\/20:hover {
  background-color: rgb(var(--axis-500-rgb) / 0.2) !important;
}

/* Text */
.text-n-brand {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--axis-500-rgb) / var(--tw-text-opacity, 1)) !important;
}
.text-n-blue-text,
.hover\:text-n-blue-text:hover {
  color: rgb(var(--axis-500-rgb)) !important;
}
.hover\:text-n-brand:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--axis-500-rgb) / var(--tw-text-opacity, 1)) !important;
}

/* Borders */
.border-n-brand,
.focus\:border-n-brand:focus {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--axis-500-rgb) / var(--tw-border-opacity, 1)) !important;
}

/* Ring (focus outlines) */
.ring-n-brand,
.focus\:ring-n-brand:focus {
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(var(--axis-500-rgb) / var(--tw-ring-opacity, 1)) !important;
}

/* Fill (SVG icons) */
.fill-n-brand {
  fill: rgb(var(--axis-500-rgb)) !important;
}

/* ===========================================================================
   Tailwind primary-* палитра (Chatwoot v3.16 использует её на страницах
   настроек / admin форм) — компилирует CSS-vars `--color-primary-N` (RGB
   triplets) + utility classes `.bg-primary-*`/`.text-primary-*`.
   =========================================================================== */

:root {
  --color-primary-25:  var(--axis-25-rgb);
  --color-primary-50:  var(--axis-50-rgb);
  --color-primary-75:  var(--axis-75-rgb);
  --color-primary-100: var(--axis-100-rgb);
  --color-primary-200: var(--axis-200-rgb);
  --color-primary-300: var(--axis-300-rgb);
  --color-primary-400: var(--axis-400-rgb);
  --color-primary-500: var(--axis-500-rgb);
  --color-primary-600: var(--axis-600-rgb);
  --color-primary-700: var(--axis-700-rgb);
  --color-primary-800: var(--axis-800-rgb);
  --color-primary-900: var(--axis-900-rgb);
}

.bg-primary,
.bg-primary-500 { background-color: rgb(var(--axis-500-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-primary-600 { background-color: rgb(var(--axis-600-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-primary-700 { background-color: rgb(var(--axis-700-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-primary-100 { background-color: rgb(var(--axis-100-rgb) / var(--tw-bg-opacity, 1)) !important; }
.bg-primary-50  { background-color: rgb(var(--axis-50-rgb)  / var(--tw-bg-opacity, 1)) !important; }

.text-primary,
.text-primary-500 { color: rgb(var(--axis-500-rgb) / var(--tw-text-opacity, 1)) !important; }
.text-primary-600,
.hover\:text-primary-600:hover { color: rgb(var(--axis-600-rgb) / var(--tw-text-opacity, 1)) !important; }
.text-primary-700 { color: rgb(var(--axis-700-rgb) / var(--tw-text-opacity, 1)) !important; }

.border-primary,
.border-primary-500 { border-color: rgb(var(--axis-500-rgb) / var(--tw-border-opacity, 1)) !important; }
.border-primary-300 { border-color: rgb(var(--axis-300-rgb) / var(--tw-border-opacity, 1)) !important; }
.border-primary-600 { border-color: rgb(var(--axis-600-rgb) / var(--tw-border-opacity, 1)) !important; }

.focus\:ring-primary-500:focus { --tw-ring-color: rgb(var(--axis-500-rgb) / var(--tw-ring-opacity, 1)) !important; }

/* ===========================================================================
   Capstone UI (`--cap-primary` HSL) — settings tabs, formfields, focus rings.
   AXIS #3F598B ≈ hsl(220, 38%, 40%); foreground остаётся почти белым.
   =========================================================================== */

:root {
  --cap-primary: 220 38% 40%;
  --cap-primary-foreground: 0 0% 100%;
}

/* ===========================================================================
   Vue Router active link (.router-link-active) — активная вкладка в Settings.
   В оригинале — 3 фоновых слоя + цвет текста через hsl(--cap-primary).
   =========================================================================== */

.router-link-active {
  background-color: rgb(var(--axis-50-rgb)) !important;
  color: rgb(var(--axis-500-rgb)) !important;
}
a.router-link-active,
.router-link-active a {
  color: rgb(var(--axis-500-rgb)) !important;
}

/* Opacity вариант Nice UI (10% alpha) */
.bg-n-brand\/10 { background-color: rgb(var(--axis-500-rgb) / 0.1) !important; }

/* ===========================================================================
   Legacy Chatwoot SCSS button component (`.button.primary` / `.button.clear`
   / `.button.hollow` / `.button.link`) — самая древняя система кнопок,
   которая до сих пор используется на многих страницах settings.
   Цвета захардкожены как #3b9eff hex literals (Tailwind woot-500 hex).

   ВАЖНО: семантические варианты .button.alert / .success / .warning /
   .secondary НЕ трогаем — они должны оставаться красными/зелёными/жёлтыми.
   =========================================================================== */

/* Default .button (без модификаторов) — primary AXIS fill */
.button {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--axis-500-rgb) / var(--tw-bg-opacity, 1)) !important;
  color: #fff !important;
}
.button:hover {
  background-color: rgb(var(--axis-600-rgb) / var(--tw-bg-opacity, 1)) !important;
}

/* .button.primary — то же что default, но явно */
.button.primary {
  background-color: rgb(var(--axis-500-rgb) / var(--tw-bg-opacity, 1)) !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.button.primary:hover {
  background-color: rgb(var(--axis-600-rgb) / var(--tw-bg-opacity, 1)) !important;
}

/* .button.clear — text-only link-style */
.button.clear {
  background-color: transparent !important;
  color: rgb(var(--axis-500-rgb) / var(--tw-text-opacity, 1)) !important;
}
.button.clear:hover,
.button.clear:hover:hover {
  background-color: rgb(var(--axis-50-rgb) / var(--tw-bg-opacity, 1)) !important;
  color: rgb(var(--axis-600-rgb) / var(--tw-text-opacity, 1)) !important;
}

/* .button.hollow — outline-style */
.button.hollow {
  background-color: transparent !important;
  border-color: rgb(var(--axis-500-rgb) / var(--tw-border-opacity, 1)) !important;
  color: rgb(var(--axis-500-rgb) / var(--tw-text-opacity, 1)) !important;
}
.button.hollow:hover {
  background-color: rgb(var(--axis-50-rgb) / var(--tw-bg-opacity, 1)) !important;
}

/* Чтобы внутренний <span class="button__content"> не оставался дефолтным цветом */
.button.clear .button__content,
.button.hollow .button__content {
  color: inherit !important;
}
.button.primary .button__content,
.button .button__content {
  color: #fff !important;
}

/* ===========================================================================
   vue-datepicker (`.mx-*` классы) — Chatwoot тащит #1f93ff hardcoded из npm-либы.
   =========================================================================== */
.mx-btn:hover {
  border-color: var(--axis-500) !important;
  color: var(--axis-500) !important;
}
.mx-calendar-content .cell.active {
  background-color: var(--axis-500) !important;
  color: #fff !important;
}
.mx-calendar-content .cell.in-range {
  background-color: var(--axis-50) !important;
}
.mx-time-column .mx-time-item.active,
.mx-time-option.active {
  color: var(--axis-500) !important;
}