/* Спільна шапка Express Retool (редизайн 11.09.2026) — підключають застосунки: PriceTool, Виплата Дроп, Додавання товарів, Реєстри.
   Джерело правди для CRM — той самий блок у index.html (<style>); тут копія для сторінок поза CRM. */
/* ── ШАПКА, редизайн 11.09.2026 (ті самі кольори: slate-900 + жовтий акцент) ── */
#crm-header {
  background: linear-gradient(180deg, #0f172a 0%, #111c33 100%);
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -18px rgba(2, 6, 23, .9);
}
#crm-header .crm-brand-mark {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, #fde047, #f59e0b); color: #0f172a; font-size: 14px;
  box-shadow: 0 4px 12px -4px rgba(250, 204, 21, .7), inset 0 1px 0 rgba(255,255,255,.35);
}
#crm-header .crm-brand-text { font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: #f8fafc; }
#crm-header .crm-brand-accent { color: #facc15; margin-left: 1px; }
#crm-header .crm-nav-sep { width: 1px; height: 22px; background: rgba(148,163,184,.22); margin: 0 6px 0 2px; flex-shrink: 0; }
/* кнопки розділів: «пігулки» з м'яким світлим ховером; активна — тепле підсвічування + жовта риска знизу */
:where(#crm-topnav .crm-nav-btn) { color: #cbd5e1; }
#crm-topnav .crm-nav-btn {
  position: relative; display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
  padding: 7px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; line-height: 1;
  letter-spacing: .005em; background: transparent; border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
#crm-topnav .crm-nav-btn i { font-size: 13px; width: 15px; text-align: center; opacity: .92; }
#crm-topnav .crm-nav-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.06); }
:where(#crm-topnav .crm-nav-btn:hover) { color: #fff; }
#crm-topnav .crm-nav-btn:active { transform: translateY(1px); }
#crm-topnav .crm-nav-btn.is-active { background: rgba(250, 204, 21, .10); border-color: rgba(250, 204, 21, .22); }
:where(#crm-topnav .crm-nav-btn.is-active) { color: #fde68a; }
#crm-topnav .crm-nav-btn.is-active i { opacity: 1; }
#crm-topnav .crm-nav-btn.is-active::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -8px; height: 2px; border-radius: 2px;
  background: #facc15; box-shadow: 0 0 10px rgba(250,204,21,.6);
}
@media (min-width: 1280px) { #crm-topnav .crm-nav-btn { padding: 7px 11px; } }
/* права частина: круглі іконки-кнопки, «чипи» курсу й користувача */
#crm-header .crm-icon-btn {
  width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  color: #cbd5e1; transition: background-color .15s, color .15s;
}
#crm-header .crm-icon-btn:hover { background: rgba(255,255,255,.08); color: #fde047; }
#crm-header .crm-chip {
  height: 32px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: background-color .15s, border-color .15s;
}
#crm-header .crm-chip:hover { background: rgba(255,255,255,.08); border-color: rgba(148,163,184,.3); }
#crm-header .crm-chip-input { border: 0; border-bottom: 1px dashed rgba(250,204,21,.45); padding: 0 2px; }
#crm-header .crm-chip-input:focus { border-bottom-style: solid; }
#crm-header .crm-user-chip { padding-left: 4px; }
#crm-header .crm-avatar {
  width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  font-weight: 800; font-size: 11px; color: #fff;
  background: linear-gradient(135deg, #3b82f6, #6366f1); box-shadow: 0 0 0 2px rgba(15,23,42,.9), 0 0 0 3px rgba(99,102,241,.45);
}
#crm-header .user-dropdown { border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(2,6,23,.6); overflow: hidden; margin-top: 8px; }
#crm-header .user-dropdown a { transition: background-color .12s; }
/* бургер на телефоні — у тому ж стилі */
#crm-header .md\:hidden.w-9 { border-radius: 9px; }
/* у застосунках розділи — посилання <a>, поточний застосунок — .is-active без переходу */
#crm-topnav a.crm-nav-btn { text-decoration: none; }
#crm-topnav span.crm-nav-btn.is-active { cursor: default; }

/* ── БІЧНА ПАНЕЛЬ ЗАСТОСУНКІВ (редизайн 11.09.2026): CRM, PriceTool, Виплата Дроп, Додавання товарів ── */
aside.crm-apps {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-right: 1px solid rgba(148, 163, 184, .28);
  box-shadow: 12px 0 28px -24px rgba(2, 6, 23, .45) !important;
}
.dark aside.crm-apps {
  background: linear-gradient(180deg, #1e293b 0%, #111c33 100%);
  border-right-color: rgba(148, 163, 184, .14);
  box-shadow: 12px 0 28px -20px rgba(0, 0, 0, .7) !important;
}
aside.crm-apps .crm-apps-head { padding-top: 14px; padding-bottom: 6px; }
aside.crm-apps .crm-apps-head > span { font-size: 10.5px; letter-spacing: .14em; color: #94a3b8; }
.dark aside.crm-apps .crm-apps-head > span { color: #64748b; }
aside.crm-apps .crm-apps-toggle {
  width: 28px; height: 28px; border-radius: 999px;
  background: rgba(148, 163, 184, .14); color: #64748b;
  transition: background-color .15s, color .15s, transform .15s;
}
aside.crm-apps .crm-apps-toggle:hover { background: rgba(250, 204, 21, .22); color: #0f172a; transform: scale(1.06); }
.dark aside.crm-apps .crm-apps-toggle { background: rgba(148, 163, 184, .12); color: #94a3b8; }
.dark aside.crm-apps .crm-apps-toggle:hover { background: rgba(250, 204, 21, .18); color: #fde68a; }
aside.crm-apps .crm-apps-list { gap: 3px; padding-left: 8px; padding-right: 8px; }
/* рядок застосунку */
aside.crm-apps .crm-app-item {
  position: relative; border-radius: 12px; padding-top: 6px; padding-bottom: 6px;
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
aside.crm-apps .crm-app-item:hover { transform: translateX(2px); }
aside.crm-apps .crm-app-item:active { transform: translateX(2px) scale(.99); }
/* плитка-іконка: та сама градієнтна палітра, м'якша тінь, «скляний» відблиск, збільшується при наведенні */
aside.crm-apps .crm-app-tile {
  width: 36px; height: 36px; border-radius: 11px;
  box-shadow: 0 8px 16px -8px rgba(2, 6, 23, .5), inset 0 1px 0 rgba(255, 255, 255, .38) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
aside.crm-apps .crm-app-item:hover .crm-app-tile { transform: scale(1.07); box-shadow: 0 12px 20px -8px rgba(2, 6, 23, .55), inset 0 1px 0 rgba(255,255,255,.45) !important; }
aside.crm-apps .crm-app-label { font-size: 13px; font-weight: 600; letter-spacing: .004em; }
/* поточний застосунок (бейдж-span у застосунках) — жовта риска зліва, як активний розділ у шапці */
aside.crm-apps .crm-app-item.is-current { box-shadow: inset 3px 0 0 #facc15; }
aside.crm-apps .crm-app-item.is-current .crm-app-tile { box-shadow: 0 0 0 2px rgba(250, 204, 21, .55), 0 8px 16px -8px rgba(2,6,23,.5) !important; }
/* згорнута панель (64px): плитки по центру, без зсуву при наведенні */
aside.crm-apps.w-16 .crm-app-item:hover { transform: none; }
aside.crm-apps.w-16 .crm-app-item { border-radius: 12px; }