/* First90 — шар дизайну (Пакет 5А, п.1).
   Один файл. Це контракт для гілки dyzain/ekrany: імена змінних і класів
   не міняти. Референс — docs/design/*.dc.html (верстка 1440px).
   Лежить у web/public/design/, бо nginx і збірка віддають лише web/public;
   у продукті шлях /design/design.css. */

/* Шрифти (Пакет 7A, дизайн v2): заголовки — Bricolage Grotesque 600,
   текст — Hanken Grotesk 400/500/600. Обидва зі свого сервера (чужі сервери
   шрифтів заборонені, web-build-check п.10). У Hanken на Google Fonts немає
   базової кирилиці — лише латиниця й цифри; кирилиця, як і в самих макетах
   (вони тягнуть той самий Google Fonts), падає на системний шрифт. */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/design/bricolage-600.woff2") format("woff2");
}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url("/design/hanken-400.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;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url("/design/hanken-500.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;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url("/design/hanken-600.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;}

:root{
  /* поверхні й текст */
  --f90-bg:#F6F4EE;            /* фон сторінки (v2) */
  --f90-surface:#FFFFFF;       /* картки */
  --f90-surface-2:#FBFAF6;     /* вторинна поверхня: меню, поля, рядки */
  --f90-ink:#1F2A24;           /* текст */
  --f90-muted:#6B7470;         /* другорядний текст */
  --f90-hint:#8A9088;          /* підказки, дрібне */
  --f90-line:#ECE8DD;          /* рамка картки й лінії (v2) */
  --f90-line-soft:#ECE8DD;     /* м'які лінії між рядками */
  --f90-field:#D5D0C3;         /* рамки полів і кнопок */
  /* акцент і стани */
  --f90-accent:#2F6B4F;
  --f90-accent-soft:#E6EFE9;
  --f90-accent-ink:#1F4A36;
  --f90-warn:#D9A441;
  --f90-warn-soft:#FBF3E1;
  --f90-warn-ink:#6A4A08;
  --f90-orange:#B86B2F;        /* «плану немає», «не в плані» */
  --f90-danger:#B8412F;
  --f90-danger-soft:#FBEDEA;
  --f90-danger-ink:#7A2A1D;
  --f90-honey:#D9A441;         /* аватар */
  --f90-blue:#3A5A8C;
  --f90-blue-soft:#E8EEF7;
  --f90-violet:#534AB7;
  --f90-violet-soft:#EEEDFE;
  /* відділи (кольорові блоки дерева, плитки бази знань) */
  --f90-d-sales:#8A5A0B;   --f90-d-sales-soft:#FBF3E1;
  --f90-d-stock:#3B6D11;   --f90-d-stock-soft:#EAF2E1;
  --f90-d-mkt:#0F6E56;     --f90-d-mkt-soft:#E1F2EC;
  --f90-d-fin:#534AB7;     --f90-d-fin-soft:#EEEDFE;
  --f90-d-care:#3A5A8C;    --f90-d-care-soft:#E8EEF7;
  --f90-d-all:#6B7470;     --f90-d-all-soft:#F6F4EE;
  /* висоти каркаса */
  --f90-top-h:64px;
  --f90-nav-w:232px;
  /* радіуси */
  --f90-r-card:16px;
  --f90-r-ctl:10px;
  --f90-r-item:8px;
  /* шрифти */
  --f90-font-head:'Bricolage Grotesque',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f90-font-body:'Hanken Grotesk',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- каркас ---------- */
/* .f90-shell — уся сторінка: меню зліва + вміст. */
.f90-shell{
  display:flex;
  min-height:100vh;
  background:var(--f90-bg);
  color:var(--f90-ink);
  font-family:var(--f90-font-body);
  font-size:15px;
  line-height:1.5;
}

/* ---------- ліве меню ---------- */
.f90-nav{
  width:232px;
  flex-shrink:0;
  box-sizing:border-box;
  padding:28px 16px 24px;
  display:flex;
  flex-direction:column;
  gap:4px;
  border-right:1px solid var(--f90-line);
  background:var(--f90-surface-2);
}
.f90-nav__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:var(--f90-r-item);
  color:var(--f90-ink);
  text-decoration:none;
  font-size:15px;
  cursor:pointer;
  background:none;
  border:0;
  text-align:left;
  font-family:inherit;
}
.f90-nav__item:hover{background:var(--f90-surface);}
.f90-nav__item--active,
.f90-nav__item--active:hover{
  background:var(--f90-accent-soft);
  color:var(--f90-accent);
  font-weight:600;
}
/* Картка користувача внизу меню, під лінією. */
.f90-nav__user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 12px 0;
  margin-top:8px;
  border-top:1px solid var(--f90-line);
}

/* ---------- вміст ---------- */
.f90-main{
  flex-grow:1;
  box-sizing:border-box;
  padding:30px 48px 40px;
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}

/* Шапка сторінки: h1 + підзаголовок зліва, дії справа. */
.f90-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.f90-page-head h1{
  margin:0;
  font-family:var(--f90-font-head);
  font-weight:600;
  font-size:28px;
  line-height:1.2;
  letter-spacing:0;
}
.f90-page-head .f90-sub{color:var(--f90-muted);font-size:14px;margin-top:2px;}
.f90-page-head__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

h2.f90-h2,.f90-h2{
  margin:0;
  font-family:var(--f90-font-head);
  font-weight:600;
  font-size:22px;
  line-height:1.2;
}
.f90-h3{
  margin:0;
  font-family:var(--f90-font-head);
  font-weight:600;
  font-size:18px;
  line-height:1.2;
}

/* ---------- картка ---------- */
.f90-card{
  box-sizing:border-box;
  background:var(--f90-surface);
  border:1px solid var(--f90-line);
  border-radius:var(--f90-r-card);
  padding:18px 20px;
}

/* ---------- бічна панель груп (Налаштування) і дерево ---------- */
.f90-side{
  width:264px;
  flex-shrink:0;
  box-sizing:border-box;
  padding:16px 12px;
  background:var(--f90-surface);
  border:1px solid var(--f90-line);
  border-radius:var(--f90-r-card);
  display:flex;
  flex-direction:column;
  gap:2px;
  align-self:flex-start;
}
.f90-side__group{
  padding:14px 12px 4px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--f90-hint);
}
.f90-side__group:first-child{padding-top:10px;}
.f90-side__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 12px;
  border-radius:var(--f90-r-item);
  color:var(--f90-ink);
  text-decoration:none;
  font-size:15px;
  cursor:pointer;
  background:none;
  border:0;
  text-align:left;
  font-family:inherit;
}
.f90-side__item:hover{background:var(--f90-surface-2);}
.f90-side__item--active,
.f90-side__item--active:hover{
  background:var(--f90-accent-soft);
  color:var(--f90-accent);
  font-weight:600;
}

/* Дерево «відділ → функція → пункт» (Плани, Навчання, Процеси).
   Кладеться всередину .f90-side; відділ — це .f90-side__group. */
.f90-tree{display:flex;flex-direction:column;gap:1px;}
.f90-tree__item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:8px 10px;
  border-radius:var(--f90-r-item);
  text-decoration:none;
  color:var(--f90-ink);
  cursor:pointer;
  background:none;
  border:0;
  text-align:left;
  font-family:inherit;
  font-size:14px;
}
.f90-tree__item:hover{background:var(--f90-surface-2);}
.f90-tree__item--active,
.f90-tree__item--active:hover{background:var(--f90-accent-soft);color:var(--f90-accent-ink);}
.f90-tree__item--active .f90-tree__name{font-weight:600;}
.f90-tree__name{font-weight:500;display:block;}
.f90-tree__meta{font-size:12px;color:var(--f90-hint);display:block;}
.f90-tree__meta--warn{color:var(--f90-orange);}
/* вкладеність: пункт під функцією */
.f90-tree__item--sub{padding-left:30px;}

/* ---------- таблиця (grid-рядки, як у макетах) ---------- */
.f90-table{display:flex;flex-direction:column;min-width:0;}
.f90-table__head{
  display:grid;
  gap:12px;
  align-items:center;
  padding:6px 12px 10px;
  border-bottom:1px solid var(--f90-line);
  font-size:13px;
  color:var(--f90-muted);
}
.f90-row{
  display:grid;
  gap:12px;
  align-items:center;
  padding:12px;
  border-bottom:1px solid var(--f90-line-soft);
  border-radius:var(--f90-r-item);
}
.f90-row:last-child{border-bottom:0;}
.f90-row--active{background:var(--f90-accent-soft);}
.f90-row--click{cursor:pointer;}
.f90-row--click:hover{background:var(--f90-surface-2);}
.f90-row--active.f90-row--click:hover{background:var(--f90-accent-soft);}

/* ---------- кнопки ---------- */
.f90-btn{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 16px;
  border:1px solid var(--f90-field);
  border-radius:var(--f90-r-ctl);
  background:var(--f90-surface);
  color:var(--f90-ink);
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
}
.f90-btn:hover{border-color:var(--f90-accent);color:var(--f90-accent-ink);}
.f90-btn--primary,
.f90-btn--primary:hover{
  border:none;
  background:var(--f90-accent);
  color:#FFFFFF;
  font-weight:600;
  padding:0 20px;
}
.f90-btn--primary:hover{background:var(--f90-accent-ink);}
.f90-btn--ghost{border-color:transparent;background:transparent;color:var(--f90-muted);}
.f90-btn--ghost:hover{border-color:transparent;background:var(--f90-surface-2);color:var(--f90-ink);}
.f90-btn--sm{height:36px;padding:0 12px;font-size:13px;border-radius:var(--f90-r-item);}
.f90-btn--danger{color:var(--f90-danger);}
.f90-btn--danger:hover{border-color:var(--f90-danger);color:var(--f90-danger);}
.f90-btn:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- пігулки-фільтри ---------- */
.f90-pill{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 14px;
  border:1px solid var(--f90-field);
  border-radius:999px;
  background:var(--f90-surface);
  color:var(--f90-ink);
  font-family:inherit;
  font-size:14px;
  font-weight:400;
  white-space:nowrap;
  cursor:pointer;
}
.f90-pill:hover{border-color:var(--f90-accent);}
.f90-pill--active,
.f90-pill--active:hover{
  border-color:var(--f90-accent);
  background:var(--f90-accent-soft);
  color:var(--f90-accent-ink);
  font-weight:600;
}

/* ---------- крапка стану ---------- */
.f90-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--f90-accent);
  flex-shrink:0;
  vertical-align:middle;
}
.f90-dot--ok{background:var(--f90-accent);}
.f90-dot--warn{background:var(--f90-warn);}
.f90-dot--danger{background:var(--f90-danger);}
.f90-dot--muted{background:var(--f90-hint);}
/* помаранч «плану немає» — окремий випадок warn */
.f90-dot--orange{background:var(--f90-orange);}

/* ---------- метрика (лічильники Огляду) ---------- */
.f90-metric{
  box-sizing:border-box;
  padding:16px 20px;
  background:var(--f90-surface);
  border:1px solid var(--f90-line);
  border-radius:var(--f90-r-card);
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.f90-metric__label{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--f90-muted);
}
.f90-metric__num{
  font-family:var(--f90-font-head);
  font-weight:600;
  font-size:30px;
  line-height:1.1;
  color:var(--f90-ink);
}
.f90-metric__num--warn{color:var(--f90-orange);}
.f90-metric__num--danger{color:var(--f90-danger);}
.f90-metric__num--ok{color:var(--f90-accent-ink);}
.f90-metric__hint{font-size:13px;color:var(--f90-hint);}

/* ---------- поля ---------- */
.f90-input{
  box-sizing:border-box;
  height:44px;
  padding:0 14px;
  border:1px solid var(--f90-field);
  border-radius:var(--f90-r-ctl);
  background:var(--f90-surface-2);
  color:var(--f90-ink);
  font-family:inherit;
  font-size:15px;
}
.f90-input:focus{outline:2px solid var(--f90-accent-soft);border-color:var(--f90-accent);}
textarea.f90-input{height:auto;padding:12px 14px;line-height:1.5;resize:vertical;}
.f90-check{width:18px;height:18px;accent-color:var(--f90-accent);flex-shrink:0;cursor:pointer;}

/* ---------- права шухляда ---------- */
.f90-drawer{
  position:fixed;
  top:0;right:0;bottom:0;
  z-index:60;
  width:clamp(320px,28vw,400px);
  box-sizing:border-box;
  background:var(--f90-surface);
  border-left:1px solid var(--f90-line);
  box-shadow:-14px 0 40px rgba(31,42,36,.16);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  padding:22px;
}
/* Шухляда як вбудована панель праворуч (Команда, Навчання): без фіксації. */
.f90-drawer--inline{
  position:static;
  z-index:auto;
  box-shadow:none;
  border:1px solid var(--f90-line);
  border-radius:var(--f90-r-card);
  flex-shrink:0;
}

/* ---------- порожній стан: три рядки ---------- */
.f90-empty{
  text-align:center;
  padding:44px 20px;
  border:1px dashed var(--f90-field);
  border-radius:var(--f90-r-card);
  color:var(--f90-muted);
}
.f90-empty__title{
  font-family:var(--f90-font-head);
  font-weight:600;
  font-size:17px;
  color:var(--f90-ink);
  margin-bottom:4px;
}
.f90-empty__hint{font-size:14px;color:var(--f90-hint);margin-bottom:12px;}

/* ---------- телефон: одна колонка на 390px ---------- */
@media (max-width:700px){
  .f90-shell{flex-direction:column;}
  .f90-nav{
    width:auto;
    border-right:0;
    border-bottom:1px solid var(--f90-line);
    padding:12px 16px;
  }
  .f90-main{padding:18px 16px 32px;gap:14px;}
  .f90-page-head{align-items:flex-start;flex-direction:column;}
  .f90-page-head h1{font-size:24px;}
  /* .f90-side стає верхнім згортуваним меню: згорнута панель показує лише
     активний пункт; клас .is-open (ставить гілка екранів) розгортає всі. */
  .f90-side{width:auto;align-self:stretch;}
  .f90-side:not(.is-open) .f90-side__group,
  .f90-side:not(.is-open) .f90-side__item:not(.f90-side__item--active),
  .f90-side:not(.is-open) .f90-tree__item:not(.f90-tree__item--active){display:none;}
  .f90-side:not(.is-open) .f90-side__item--active::after,
  .f90-side:not(.is-open) .f90-tree__item--active::after{
    content:"▾";
    margin-left:auto;
    color:var(--f90-hint);
    font-size:12px;
  }
  /* шухляда — повноекранний лист знизу */
  .f90-drawer{
    width:auto;
    left:0;
    top:auto;
    max-height:92vh;
    border-left:0;
    border-top:1px solid var(--f90-line);
    border-radius:var(--f90-r-card) var(--f90-r-card) 0 0;
    box-shadow:0 -14px 40px rgba(31,42,36,.2);
  }
  .f90-drawer--inline{
    position:static;
    max-height:none;
    width:auto;
    border:1px solid var(--f90-line);
    border-radius:var(--f90-r-card);
    box-shadow:none;
  }
  /* таблиці: рядок перетікає в колонку */
  .f90-table__head{display:none;}
  .f90-row{grid-template-columns:1fr !important;gap:6px;padding:12px 10px;}
  /* кнопки в шапці сторінки — на всю ширину не тягнемо, лише переносимо */
  .f90-page-head__actions{width:100%;}
}

/* =====================================================================
   Пакет 7A — дизайн v2 («НАПРЯМ 2»): каркас і компоненти.
   Референс — docs/design/*.html (Ohliad2 — каркас). Розміри: база 14px,
   h1 28px, заголовок картки 18px.
   ===================================================================== */

/* ---------- верхня панель 64px ---------- */
.f90-top{
  position:sticky;top:0;z-index:30;
  height:var(--f90-top-h);
  box-sizing:border-box;
  display:flex;align-items:center;gap:12px;
  padding:0 28px 0 0;
  background:var(--f90-surface);
  border-bottom:1px solid var(--f90-line);
  font-family:var(--f90-font-body);
  font-size:14px;
}
.f90-top__logo{
  width:var(--f90-nav-w);flex-shrink:0;box-sizing:border-box;
  display:flex;align-items:center;gap:10px;padding-left:24px;
  font-family:var(--f90-font-head);font-weight:600;font-size:22px;letter-spacing:-0.02em;
  color:var(--f90-ink);text-decoration:none;cursor:pointer;
}
.f90-top__logo b{color:var(--f90-accent);font-weight:600;}
.f90-top__plat{font-family:var(--f90-font-body);font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 8px;border-radius:6px;background:var(--f90-honey);color:#3A2A05;}
.f90-top__grow{flex-grow:1;}
.f90-search{position:relative;width:420px;min-width:240px;max-width:40vw;flex-shrink:1;}
.f90-search__box{
  display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;box-sizing:border-box;
  border-radius:10px;background:var(--f90-bg);color:var(--f90-hint);
}
.f90-search__box input{border:none;background:transparent;outline:none;width:100%;color:var(--f90-ink);font:inherit;font-size:14px;}
.f90-search__pop{
  position:absolute;top:46px;left:0;right:0;z-index:50;max-height:420px;overflow-y:auto;
  background:var(--f90-surface);border:1px solid var(--f90-line);border-radius:12px;
  box-shadow:0 14px 40px rgba(31,42,36,.14);padding:6px;
}
.f90-search__grp{padding:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--f90-hint);}
.f90-search__item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:8px 10px;border:0;border-radius:8px;background:none;text-align:left;font:inherit;color:var(--f90-ink);cursor:pointer;}
.f90-search__item:hover,.f90-search__item.is-cur{background:var(--f90-accent-soft);}
.f90-search__item small{margin-left:auto;color:var(--f90-hint);font-size:12px;white-space:nowrap;}
.f90-search__empty{padding:14px 10px;color:var(--f90-muted);font-size:13px;}
.f90-filter{position:relative;}
.f90-filter__btn,.f90-iconbtn{
  display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;box-sizing:border-box;
  border:1px solid var(--f90-line);border-radius:10px;background:var(--f90-surface);color:var(--f90-ink);
  font:inherit;font-size:14px;white-space:nowrap;cursor:pointer;
}
.f90-filter__btn:hover,.f90-iconbtn:hover{border-color:var(--f90-accent);}
.f90-filter__btn .f90-caret{color:var(--f90-hint);}
.f90-filter__pop,.f90-user__pop{
  position:absolute;top:46px;right:0;z-index:50;min-width:200px;
  background:var(--f90-surface);border:1px solid var(--f90-line);border-radius:12px;
  box-shadow:0 14px 40px rgba(31,42,36,.14);padding:6px;
}
.f90-filter__opt,.f90-user__opt{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;padding:8px 10px;border:0;border-radius:8px;background:none;text-align:left;font:inherit;font-size:14px;color:var(--f90-ink);cursor:pointer;white-space:nowrap;}
.f90-filter__opt:hover,.f90-user__opt:hover{background:var(--f90-bg);}
.f90-filter__opt.is-on{background:var(--f90-accent-soft);color:var(--f90-accent-ink);font-weight:600;}
.f90-iconbtn{position:relative;width:40px;padding:0;justify-content:center;color:var(--f90-muted);}
.f90-gs-btn{display:none;}
@media (max-width:840px){ .f90-gs-btn{display:flex;} }
.f90-iconbtn__dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--f90-danger);}
.f90-user{position:relative;display:flex;align-items:center;gap:10px;padding:4px 6px;border-radius:10px;cursor:pointer;min-width:0;}
.f90-user:hover{background:var(--f90-bg);}
.f90-ava{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--f90-honey);color:#3A2A05;font-weight:600;font-size:13px;}
.f90-ava img{width:100%;height:100%;object-fit:cover;}
.f90-user__txt{display:flex;flex-direction:column;min-width:0;line-height:1.3;}
.f90-user__name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}
.f90-user__role{font-size:12px;color:var(--f90-hint);white-space:nowrap;display:flex;align-items:center;gap:4px;}
.f90-user #topCoName{position:relative;display:inline-flex;align-items:center;}
.f90-user .cosw-btn{border:none;background:none;padding:0;gap:4px;color:inherit;font-size:12px;line-height:1.3;border-radius:0;}
.f90-user .cosw-btn:hover{background:none;color:var(--f90-ink);}
.f90-user .cosw-btn .cosw-ava{display:none;}
.f90-user .cosw-btn .cosw-name{font-size:12px;font-weight:400;color:inherit;}
.f90-user .cosw-btn.cosw-solo[disabled]{cursor:inherit;}
.f90-user .cosw-menu{top:24px;right:auto;left:0;}
.f90-user__pop{min-width:220px;}
.f90-user__sep{height:1px;background:var(--f90-line);margin:4px 6px;}
.f90-asadmin{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--f90-accent);background:var(--f90-accent-soft);color:var(--f90-accent-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}

/* ---------- ліве меню v2 (232px, біле, групи) ---------- */
.f90-navgrp{padding:10px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--f90-hint);}
.f90-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:10px;background:var(--f90-danger);color:#FFFFFF;font-size:12px;font-weight:600;line-height:1;margin-left:auto;}
.f90-firstrun{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:12px;background:var(--f90-accent-soft);margin:8px 0 6px;position:relative;}
.f90-firstrun__t{font-weight:600;font-size:13px;color:var(--f90-accent-ink);padding-right:18px;}
.f90-firstrun__bar{height:5px;border-radius:3px;background:#FFFFFF;overflow:hidden;}
.f90-firstrun__bar i{display:block;height:100%;border-radius:3px;background:var(--f90-accent);}
.f90-firstrun a,.f90-firstrun__go{font-size:12px;font-weight:500;color:var(--f90-accent);cursor:pointer;text-decoration:none;background:none;border:0;padding:0;text-align:left;font-family:inherit;}
.f90-firstrun__x{position:absolute;top:8px;right:8px;width:22px;height:22px;border:0;border-radius:6px;background:none;color:var(--f90-accent-ink);cursor:pointer;font-size:13px;line-height:1;}
.f90-firstrun__x:hover{background:rgba(255,255,255,.6);}

/* ---------- заголовки ---------- */
.f90-h1{margin:0;font-family:var(--f90-font-head);font-weight:600;font-size:28px;line-height:1.2;}
.f90-card__title{margin:0;font-family:var(--f90-font-head);font-weight:600;font-size:18px;line-height:1.25;}
.f90-card__sub{font-size:13px;color:var(--f90-hint);}
.f90-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px;}
.f90-card__head a,.f90-link{font-size:13px;font-weight:500;color:var(--f90-accent);text-decoration:none;cursor:pointer;white-space:nowrap;}
.f90-link:hover,.f90-card__head a:hover{color:var(--f90-accent-ink);}

/* ---------- метрика з іконкою і трендом (Огляд, Аналітика) ---------- */
.f90-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.f90-kpi{box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--f90-surface);border:1px solid var(--f90-line);border-radius:var(--f90-r-card);min-width:0;}
.f90-kpi__ic{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--f90-accent-soft);color:var(--f90-accent-ink);}
.f90-kpi__ic--danger{background:var(--f90-danger-soft);color:var(--f90-danger-ink);}
.f90-kpi__ic--warn{background:var(--f90-warn-soft);color:var(--f90-warn-ink);}
.f90-kpi__ic--blue{background:var(--f90-blue-soft);color:var(--f90-blue);}
.f90-kpi__ic--violet{background:var(--f90-violet-soft);color:var(--f90-violet);}
.f90-kpi__body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.f90-kpi__num{font-family:var(--f90-font-head);font-weight:600;font-size:28px;line-height:1.1;}
.f90-kpi__lbl{font-size:14px;color:var(--f90-ink);}
.f90-kpi__trend{font-size:12px;font-weight:500;color:var(--f90-muted);}
.f90-kpi__trend--up{color:var(--f90-accent);}
.f90-kpi__trend--bad{color:var(--f90-danger);}

/* ---------- вкладки-сегменти ---------- */
.f90-seg{display:inline-flex;gap:2px;padding:4px;border-radius:12px;background:var(--f90-surface);border:1px solid var(--f90-line);}
.f90-seg__btn{height:34px;padding:0 14px;border:0;border-radius:9px;background:none;color:var(--f90-muted);font:inherit;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;}
.f90-seg__btn:hover{color:var(--f90-ink);}
.f90-seg__btn--on,.f90-seg__btn--on:hover{background:var(--f90-accent-soft);color:var(--f90-accent-ink);font-weight:600;}

/* ---------- тумблер ---------- */
.f90-toggle{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0;cursor:pointer;}
.f90-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.f90-toggle i{position:absolute;inset:0;border-radius:11px;background:#D5D0C3;transition:background .15s;pointer-events:none;}
.f90-toggle i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;transition:transform .15s;}
.f90-toggle input:checked+i{background:var(--f90-accent);}
.f90-toggle input:checked+i::after{transform:translateX(18px);}
.f90-toggle input:focus-visible+i{outline:2px solid var(--f90-accent);outline-offset:2px;}

/* ---------- мітки-пігулки стану ---------- */
.f90-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--f90-accent-soft);color:var(--f90-accent-ink);}
.f90-tag--ok{background:var(--f90-accent-soft);color:var(--f90-accent-ink);}
.f90-tag--danger{background:var(--f90-danger-soft);color:var(--f90-danger-ink);}
.f90-tag--warn{background:var(--f90-warn-soft);color:var(--f90-warn-ink);}
.f90-tag--blue{background:var(--f90-blue-soft);color:var(--f90-blue);}
.f90-tag--muted{background:var(--f90-bg);color:var(--f90-muted);}

/* ---------- смужка прогресу ---------- */
.f90-bar{height:8px;border-radius:4px;background:var(--f90-line);overflow:hidden;flex-grow:1;min-width:40px;}
.f90-bar i{display:block;height:100%;border-radius:4px;background:var(--f90-accent);}
.f90-bar--warn i{background:var(--f90-warn);}
.f90-bar--danger i{background:var(--f90-danger);}

/* ---------- кольорові відділи (дерево, плитки) ---------- */
.f90-dept{--dc:var(--f90-d-all);--dcs:var(--f90-d-all-soft);}
.f90-dept--sales{--dc:var(--f90-d-sales);--dcs:var(--f90-d-sales-soft);}
.f90-dept--stock{--dc:var(--f90-d-stock);--dcs:var(--f90-d-stock-soft);}
.f90-dept--mkt{--dc:var(--f90-d-mkt);--dcs:var(--f90-d-mkt-soft);}
.f90-dept--fin{--dc:var(--f90-d-fin);--dcs:var(--f90-d-fin-soft);}
.f90-dept--care{--dc:var(--f90-d-care);--dcs:var(--f90-d-care-soft);}
.f90-deptblock{border-radius:12px;background:var(--dcs);padding:10px 12px;margin-bottom:8px;}
.f90-deptblock__name{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--dc);}
.f90-deptblock__name::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--dc);flex-shrink:0;}
.f90-deptchip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:7px;background:var(--dcs);color:var(--dc);font-size:12px;font-weight:600;white-space:nowrap;}

/* ---------- телефон ---------- */
@media (max-width:840px){
  .f90-top{padding:0 12px 0 8px;gap:8px;}
  .f90-top__logo{width:auto;padding-left:4px;font-size:19px;}
  .f90-search{display:none;}
  body.gs-open .f90-search{display:block;position:fixed;top:64px;left:0;right:0;width:auto;max-width:none;padding:8px 12px;background:var(--f90-surface);border-bottom:1px solid var(--f90-line);z-index:45;}
  body.gs-open .f90-search__pop{top:56px;left:12px;right:12px;}
  .f90-filter{display:none;}
  .f90-user__name,.f90-user__role #rolePill,.f90-user__role>span:nth-child(2){display:none;}
  .f90-user .cosw-name{max-width:96px;overflow:hidden;text-overflow:ellipsis;}
  .f90-asadmin{padding:0 8px;}
  .f90-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:520px){
  .f90-kpis{grid-template-columns:1fr;}
  .f90-top{gap:6px;padding-right:8px;}
  .f90-user{gap:6px;padding:4px 2px;}
  .f90-user .cosw-name{max-width:60px;}
}