/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/sg-inter-a375c31d.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/sg-inter-13755630.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/sg-inter-da72a9f7.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/sg-inter-3b78c6fa.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/sg-inter-f059b71e.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/sg-inter-b6db4a06.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/sg-inter-6ab57b19.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/assets/sg-manrope-19d45c9a.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/assets/sg-manrope-d0354d66.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/assets/sg-manrope-22ce7659.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/assets/sg-manrope-ca6830bd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/assets/sg-manrope-7965cb05.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/assets/sg-manrope-bcbadccc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
   Squaregram — шар дизайну поверх зібраного Tailwind.
   Вантажиться ПІСЛЯ index-*.css, тому перевизначає його змінні
   та утиліти. Нічого не ламає структурно: тільки типографіка,
   палітра, поверхні, стани й дрібна моторика.
   Вимкнути = прибрати <link> з index.html.
   ============================================================ */

/* ---------- 1. Змінні теми ---------- */
:root, :host {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-display: "Manrope", var(--font-sans);

  /* Нейтралі — прохолодніші й м'якші, щоб білі картки читались як обʼєми */
  --color-gray-50:  #f7f9fc;
  --color-gray-100: #eff3f8;
  --color-gray-200: #e3e9f1;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #93a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #4b5a6d;
  --color-gray-700: #3a4757;
  --color-gray-800: #232f3d;
  --color-gray-900: #141c27;

  /* Бренд: той самий блакитний, але з чистішими краями шкали */
  --color-brand-50:  #eff8fe;
  --color-brand-100: #d7eefc;
  --color-brand-200: #aeddf7;
  --color-brand-300: #74c5ef;
  --color-brand-400: #3aabe7;
  --color-brand-500: #1999d6;
  --color-brand-600: #0f7cb4;
  --color-brand-700: #0d6392;
  --color-brand-800: #0c5175;
  --color-brand-900: #0b4361;

  /* Радіуси — трохи м'якші, без «мильності» */
  --radius-md:  .4375rem;
  --radius-lg:  .625rem;
  --radius-xl:  .875rem;
  --radius-2xl: 1.125rem;
  --radius-3xl: 1.5rem;

  /* Статусні кольори — одна родина з брендом: менше кислоти, більше паперу.
     Плашки в застосунку будуються з <колір>-50/100 + <колір>-600/700. */
  --color-green-50:#eef8f2;   --color-green-100:#dcf0e5;
  --color-green-600:#178051;  --color-green-700:#146c46;
  --color-emerald-50:#eef8f3; --color-emerald-100:#d9f0e6;
  --color-emerald-600:#0f7f5c; --color-emerald-700:#0d6b4e;
  --color-amber-50:#fdf7eb;   --color-amber-100:#faedd2;
  --color-amber-600:#b4770c;  --color-amber-700:#8f5d08;
  --color-orange-50:#fdf4ee;  --color-orange-100:#fae4d4;
  --color-red-50:#fdf1f1;     --color-red-100:#fadedf;
  --color-red-600:#cc3a42;    --color-red-700:#a82b33;
  --color-rose-50:#fdf1f3;    --color-rose-100:#fadee3;
  --color-sky-50:#eff7fe;     --color-sky-100:#d9edfb;
  --color-blue-50:#eff4fe;    --color-blue-100:#dde8fb;
  --color-indigo-50:#f0f1fe;  --color-indigo-100:#e0e3fb;
  --color-violet-50:#f4f1fe;  --color-violet-100:#e7e1fb;
  --color-purple-50:#f6f1fd;  --color-purple-100:#ebe1fa;
  --color-teal-50:#eef8f8;    --color-teal-100:#d9f0f0;

  --sg-line: #e6ebf2;
  --sg-ring: rgba(25,153,214,.18);
}

/* ---------- 2. Типографіка ---------- */
/* У власному base-шарі застосунку body жорстко прибитий до системного стека —
   перебиваємо тим самим селектором із пізнішого файлу. */
html, body, button, input, select, textarea { font-family: var(--font-sans); }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}
:where(h1, h2) { font-family: var(--font-display); letter-spacing: -.021em; }
:where(.text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl) { letter-spacing: -.022em; }
:where(.text-lg) { letter-spacing: -.012em; }
:where(.text-xs, .text-\[11px\], .text-\[10px\]) { letter-spacing: .004em; }
/* Цифри у стовпчик — суми й кількості перестають «стрибати» */
:where(table, .tabular-nums, td, th) { font-variant-numeric: tabular-nums; }

::selection { background: #cfe9fa; color: #0b405e; }

/* ---------- 3. Поверхні ---------- */
/* Картка без власної тіні отримує м'яку багатошарову */
:where(.bg-white):where(.rounded-xl, .rounded-2xl, .rounded-3xl):not([class*="shadow"]) {
  box-shadow: 0 1px 2px rgba(18,35,58,.045), 0 8px 20px -14px rgba(18,35,58,.16);
}
.shadow-sm { --tw-shadow: 0 1px 2px rgba(18,35,58,.05), 0 1px 1px rgba(18,35,58,.03); }
.shadow    { --tw-shadow: 0 1px 2px rgba(18,35,58,.05), 0 4px 12px -6px rgba(18,35,58,.14); }
.shadow-md { --tw-shadow: 0 2px 4px rgba(18,35,58,.05), 0 10px 24px -10px rgba(18,35,58,.18); }
.shadow-lg { --tw-shadow: 0 4px 8px rgba(18,35,58,.05), 0 18px 38px -16px rgba(18,35,58,.22); }
.shadow-xl { --tw-shadow: 0 8px 16px rgba(18,35,58,.06), 0 28px 56px -22px rgba(18,35,58,.26); }
.shadow-2xl{ --tw-shadow: 0 12px 24px rgba(18,35,58,.08), 0 44px 80px -28px rgba(18,35,58,.34); }

/* Розділові лінії — тонші за відчуттям */
.border-gray-100 { border-color: #eef2f7; }
.border-gray-200 { border-color: var(--sg-line); }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #eef2f7; }

/* Шапка на вузьких екранах — скло замість глухої білої смуги.
   :not(.sgw) — щоб не зачепити темну шапку лендінга /welcome, який
   рендериться таким самим #root > div > header. */
#root > div:not(.sgw) > header {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-bottom-color: rgba(18,35,58,.08);
}

/* ---------- 4. Керування: кнопки, поля, перемикачі ---------- */
:where(button, a, [role="button"], summary) {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease,
              box-shadow .2s ease, opacity .16s ease, transform .12s ease;
}
:where(button, [role="button"]):active:not(:disabled) { transform: translateY(.5px); }

/* Первинна кнопка: легкий верхній відблиск + власна тінь */
:where(button, a).bg-brand-500,
:where(button, a).bg-brand-600 {
  background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 62%);
  box-shadow: 0 1px 1px rgba(11,64,94,.18), 0 8px 18px -10px rgba(25,153,214,.65);
}
:where(button, a).bg-brand-500:hover:not(:disabled),
:where(button, a).bg-brand-600:hover:not(:disabled) {
  box-shadow: 0 1px 1px rgba(11,64,94,.2), 0 12px 24px -10px rgba(25,153,214,.8);
}
:where(button, a).bg-brand-500:disabled { box-shadow: none; }

:where(input, textarea, select) {
  font-family: inherit;
  transition: border-color .16s ease, box-shadow .2s ease, background-color .16s ease;
}
:where(input, textarea):focus,
:where(select):focus { outline: none; }
:where(input, textarea, select).border-gray-200:focus,
:where(input, textarea, select).border-gray-300:focus {
  border-color: var(--color-brand-400);
  box-shadow: 0 0 0 3.5px var(--sg-ring);
}
::placeholder { color: #9aa9bb; }

/* Видима фокус-рамка для клавіатури — і тільки для неї */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-brand-400);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Прапорці й перемикачі — у бренд */
input[type="checkbox"], input[type="radio"], input[type="range"], progress {
  accent-color: var(--color-brand-500);
}
input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; cursor: pointer; }

/* ---------- 4b. Бічне меню — темна рейка ---------- */
/* Найпомітніша зміна в застосунку: робоче полотно лишається світлим, а
   навігація йде в темне — так рейка не свариться з контентом за увагу. */
aside.border-r.bg-white {
  background: linear-gradient(180deg, #0e1724 0%, #121d2d 52%, #0c1420 100%);
  border-right-color: rgba(255,255,255,.07);
  box-shadow: 1px 0 0 rgba(255,255,255,.04), 12px 0 32px -22px rgba(6,12,20,.9);
}
/* Усі тайлвіндові сірі/лінії всередині рейки читаємо навпаки */
aside.bg-white :where([class*="border-gray-"]) { border-color: rgba(255,255,255,.09); }
aside.bg-white :where([class*="text-gray-"])   { color: #a4b4c7; }
aside.bg-white .text-gray-800,
aside.bg-white .text-gray-900                  { color: #eef4fb; }
aside.bg-white .text-brand-700                 { color: #ffffff; }
aside.bg-white .text-brand-600\/80             { color: #7cc6ee; }

/* Логотип і картка користувача */
aside.bg-white > div:first-child { border-bottom-color: rgba(255,255,255,.08); }
aside.bg-white [class*="from-brand-50"] {
  background-image: none;
  background-color: rgba(255,255,255,.06);
  --tw-ring-color: rgba(255,255,255,.1);
}
aside.bg-white img[class*="ring-white"] { --tw-ring-color: rgba(255,255,255,.22); }

/* Пункти меню */
aside nav a, aside nav button { position: relative; }
aside nav a:hover, aside nav button:hover {
  background-color: rgba(255,255,255,.07);
  color: #ffffff;
}
aside nav a.bg-brand-50, aside nav button.bg-brand-50 {
  background-color: rgba(25,153,214,.2);
  background-image: linear-gradient(90deg, rgba(25,153,214,.3), rgba(25,153,214,.1));
  box-shadow: inset 0 0 0 1px rgba(79,216,255,.22);
  color: #ffffff;
}
aside nav a.bg-brand-50::before, aside nav button.bg-brand-50::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: #4fd8ff; box-shadow: 0 0 10px rgba(79,216,255,.8);
}
/* заголовки груп */
aside nav .uppercase { letter-spacing: .1em; color: #7f93aa; }
/* іконка-плитка біля назви групи */
aside nav > div > button > span:first-child {
  background-image: none;
  background-color: rgba(255,255,255,.07);
  --tw-ring-color: rgba(255,255,255,.1);
}

/* Низ рейки: CRM і вихід */
aside.bg-white > div:last-child { border-top-color: rgba(255,255,255,.08); }
aside.bg-white > div:last-child a:hover {
  background-color: rgba(25,153,214,.22); color: #ffffff;
}
aside.bg-white > div:last-child button:hover {
  background-color: rgba(214,70,78,.2); color: #ffb9b9;
}

/* Власна смуга прокрутки в темній рейці */
aside nav { scrollbar-color: #33455b transparent; }
aside nav::-webkit-scrollbar-thumb { background: #33455b; background-clip: padding-box; }
aside nav::-webkit-scrollbar-thumb:hover { background: #46607d; background-clip: padding-box; }

/* ---------- 4d. Аватари ---------- */
/* Колір аватара приходить інлайном (background: rgb(...)), тож поверх нього
   кладемо напівпрозорий градієнт — звідси !important саме на background-image. */
span.inline-flex.rounded-full.text-white {
  background-image: linear-gradient(150deg, rgba(255,255,255,.26), rgba(255,255,255,0) 54%, rgba(0,0,0,.12)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(18,35,58,.16);
}

/* ---------- 4e. Плашки-фільтри й таби ---------- */
:where(button)[class*="rounded-full"][class*="border-gray"] {
  background-color: #fff;
  box-shadow: 0 1px 1.5px rgba(18,35,58,.04);
}
:where(button)[class*="rounded-full"][class*="border-gray"]:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 1px 3px rgba(18,35,58,.09);
}

/* ---------- 4c. Таблиці ---------- */
table { border-collapse: separate; border-spacing: 0; }
thead th {
  font-weight: 600; color: #5a6b80; letter-spacing: .01em;
  background: #f6f8fc;
}
tbody tr { transition: background-color .14s ease; }
tbody tr:hover { background-color: #f7fafd; }

/* ---------- 5. Смуги прокрутки ---------- */
* { scrollbar-width: thin; scrollbar-color: #c3d0de transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #c8d4e2; border-radius: 99px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #a7b8cb; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 6. Дрібна моторика ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}