/* 🍎 Apple UI — ГЛОБАЛЬНИЙ шар стилю CRM (скіл apple-design; власник 2026-07-19: «стиль за
   замовчуванням на всі розділи»). Підключається ОСТАННІМ і перекриває базові класи style.css:
   body-типографіка, .card, .btn, .data-table, модалки, інпути — тому КОЖЕН екран на цих класах
   (і кожен майбутній) отримує стиль автоматично. Сторінки з власними системами (deep-navy
   .mdash-*, cabinet .cck-*) не зачіпаються — інші класи.
   Принципи: response на pointer-down (§1), transform/opacity-анімації зі spring-кривою (§4,11),
   translucent chrome (§12), tracking/tabular-nums (§15), reduced-* (§14). */

/* ── Типографіка (§15): системний шрифт, size-specific tracking ── */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-optical-sizing: auto;
}
h1, h2, h3, .page-title { letter-spacing: -0.015em; line-height: 1.12; }
.page-title { font-weight: 800; }
.hero-num {
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 800; line-height: 1.02; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.hero-num small { font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--text-muted, #888); }
.data-table td, .data-table th, td.r, th.r { font-variant-numeric: tabular-nums; }

/* ── Липкий напівпрозорий заголовок сторінки — контент скролиться під ним (§12) ── */
.page-header {
    position: sticky; top: 56px; z-index: 5;   /* під sticky-topbar */
    background: color-mix(in srgb, var(--bg-primary, #f6f7f6) 76%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    margin-bottom: 6px; padding-top: 6px; padding-bottom: 8px;
}
.page-header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; pointer-events: none;
    background: linear-gradient(color-mix(in srgb, var(--bg-primary, #f6f7f6) 50%, transparent), transparent);
}

/* ── Поверхні: картки з м'якою глибиною ── */
.card {
    border-radius: 13px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #000) 6%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: box-shadow 180ms ease;
}
.card[onclick], .card.tap { cursor: pointer; transition: transform 140ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 180ms ease; }
.card[onclick]:hover, .card.tap:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .07), 0 8px 22px rgba(0, 0, 0, .05); }
.card[onclick]:active, .card.tap:active { transform: scale(0.988); }

/* ── Кнопки: миттєвий press-відгук на pointer-down (§1) ── */
.btn, button.btn {
    border-radius: 10px;
    transition: transform 100ms ease-out, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.btn:active { transform: scale(0.96); }
.btn:disabled:active { transform: none; }
/* генеричні дрібні кнопки (inline-стилі сторінок): хоч press-відгук */
button { transition: transform 100ms ease-out; }
button:active { transform: scale(0.96); }
button:disabled:active { transform: none; }

/* ── Сегмент-контрол (глобальний; таб-бари сторінок) ── */
.seg {
    display: inline-flex; gap: 2px; flex-wrap: wrap;
    background: color-mix(in srgb, var(--text-primary, #222) 7%, transparent);
    border-radius: 12px; padding: 3px;
}
.seg-btn {
    appearance: none; border: 0; cursor: pointer;
    padding: 6px 13px; border-radius: 9px;
    font: 600 13px/1.2 inherit; letter-spacing: 0.005em;
    color: var(--text-secondary, #555); background: transparent;
    transition: transform 100ms ease-out, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.seg-btn:hover { color: var(--text-primary, #222); }
.seg-btn:active { transform: scale(0.96); }
.seg-btn.on {
    color: var(--text-primary, #222);
    background: var(--bg-card, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 4px 14px rgba(0, 0, 0, .06);
}

/* ── Чипи статусів (глобальні) ── */
.chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
    border-radius: 999px; padding: 2.5px 9px; white-space: nowrap;
}
.chip.ok   { background: color-mix(in srgb, #22a04b 14%, transparent); color: #157a38; }
.chip.warn { background: color-mix(in srgb, #d97706 14%, transparent); color: #a35505; }
.chip.info { background: color-mix(in srgb, #2563eb 12%, transparent); color: #1d4ed8; }
.chip.mut  { background: color-mix(in srgb, var(--text-primary, #000) 8%, transparent); color: var(--text-secondary, #555); }
.chip.bad  { background: color-mix(in srgb, #dc2626 12%, transparent); color: #b91c1c; }
.chip.viol { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #6d28d9; }

/* ── Поля вводу: focus-ring ── */
input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="search"],
input[type="email"], input[type="password"], select, textarea {
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent, #2e7d32) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2e7d32) 16%, transparent);
}

/* ── Таблиці: м'якший поділ, hover-підсвітка рядків ── */
.data-table th { border-bottom-width: 1px; }
.data-table tbody tr { transition: background 120ms ease; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--text-primary, #000) 3%, transparent); }

/* ── Модалка: scrim + «матеріалізація» поверхні (scale+blur разом, §12) ── */
.modal-overlay:not(.hidden) {
    background: color-mix(in srgb, #000 34%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: uiFade 200ms ease;
}
.modal-overlay:not(.hidden) .modal-content, .modal-overlay:not(.hidden) #modalContent {
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14), 0 24px 64px rgba(0, 0, 0, .18);
    animation: uiPop 300ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes uiFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiPop { from { opacity: 0; transform: scale(0.965) translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Розкривні блоки (глобальний reveal — той самий шлях назад, §7) ── */
.reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-4px); transform-origin: top;
    transition: grid-template-rows 320ms cubic-bezier(0.32, 0.72, 0, 1), opacity 240ms ease, transform 320ms cubic-bezier(0.32, 0.72, 0, 1); }
.reveal.open { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
.reveal > div { overflow: hidden; min-height: 0; }

/* контент сторінки: коротке проявлення при переході (лише opacity/transform) */
.page.active .page-content { animation: uiEnter 240ms cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes uiEnter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Доступність (§14) ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .card[onclick]:active, .card.tap:active, .btn:active, button:active, .seg-btn:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .page-header, .trs-chrome { background: var(--bg-primary, #f6f7f6); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .modal-overlay:not(.hidden) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .card { border-color: color-mix(in srgb, var(--text-primary, #000) 35%, transparent); }
    .chip { outline: 1px solid currentColor; }
}

/* ============================================================================
   🧭 ФІРМОВІ ТАБ-БАРИ → СЕГМЕНТ-КОНТРОЛ (власник 2026-07-19: «як у Казначействі,
   скрізь»). Перестил ІСНУЮЧИХ класів — Кабінет (.cck-tabs), НП, картка компанії
   (.comp-tab-btn) оновлюються без правок розмітки.
   ========================================================================== */
.cck-tabs {
    display: inline-flex; gap: 2px; flex-wrap: wrap;
    background: color-mix(in srgb, var(--novo-text, #0F172A) 7%, transparent);
    border-radius: 12px; padding: 3px;
}
.cck-tab {
    border-radius: 9px !important;
    padding: 7px 13px;
    color: var(--text-secondary);
    transition: transform 100ms ease-out, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.cck-tab:active { transform: scale(0.96); }
.cck-tab:hover:not(.is-on) { background: transparent; color: var(--text-primary); }
.cck-tab.is-on {
    background: var(--bg-secondary, #fff);
    color: var(--text-primary) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 4px 14px rgba(15, 23, 42, .06);
}

#pageCompanyDetail .comp-tabs, .comp-tabs {
    display: inline-flex !important; gap: 2px; flex-wrap: wrap;
    background: color-mix(in srgb, var(--novo-text, #0F172A) 7%, transparent);
    border-radius: 12px; padding: 3px;
}
#pageCompanyDetail .comp-tab-btn {
    border: 0 !important; background: transparent !important;
    border-radius: 9px !important; box-shadow: none !important;
    color: var(--text-secondary) !important;
    transition: transform 100ms ease-out, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
#pageCompanyDetail .comp-tab-btn:hover { transform: none; color: var(--c, var(--text-primary)) !important; box-shadow: none !important; }
#pageCompanyDetail .comp-tab-btn:active { transform: scale(0.96); }
#pageCompanyDetail .comp-tab-btn.is-on {
    background: var(--bg-secondary, #fff) !important;
    color: var(--c, var(--text-primary)) !important;   /* фірмовий колір вкладки лишається */
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 4px 14px rgba(15, 23, 42, .06) !important;
}

/* ============================================================================
   🎨 DEEP NAVY — УНІВЕРСАЛЬНО НА ВСІ СТОРІНКИ (розширення navy-pages.css, який
   покривав 7 сторінок; м'які base-правила — локальні css сторінок перекривають)
   ========================================================================== */
.page .page-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--novo-text, #0F172A); }
.page .stat-card, .page .stats-grid > div {
    background: var(--novo-surface, #fff);
    border: 1px solid var(--novo-border, #E2E8F0);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: transform .12s ease, box-shadow .15s ease;
}
.page .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 4px 12px rgba(15, 23, 42, .08)); }
.page .stat-value { font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.page .stat-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--novo-text-muted, #64748B); }
.page .filters-bar, .page .filter-bar {
    background: var(--novo-surface, #fff);
    border: 1px solid var(--novo-border, #E2E8F0);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.page .data-table thead th {
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
    color: var(--novo-text-muted, #64748B);
    background: var(--novo-surface-soft, #F1F5F9);
}
.page .data-table thead th:first-child { border-top-left-radius: 8px; }
.page .data-table thead th:last-child { border-top-right-radius: 8px; }

/* ============================================================================
   🧭 ДОБИВКА 2026-07-19 (власник: «не всі розділи оновлені») — решта таб-систем
   CRM перестилюється у сегмент-контрол/капсули БЕЗ правок розмітки.
   ========================================================================== */
/* CLM (договори) + телефонія: підкреслення-таби → сегмент */
.clm-tabs {
    display: inline-flex !important; gap: 2px; flex-wrap: wrap;
    background: color-mix(in srgb, var(--novo-text, #0F172A) 7%, transparent);
    border-radius: 12px !important; padding: 3px !important;
    border-bottom: 0 !important;
}
.clm-tab {
    border-radius: 9px !important; border: 0 !important; margin-bottom: 0 !important;
    background: transparent !important; color: var(--text-secondary) !important;
    font-weight: 600 !important;
    transition: transform 100ms ease-out, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.clm-tab:active { transform: scale(0.96); }
.clm-tab:hover:not(.active) { color: var(--text-primary) !important; }
.clm-tab.active {
    background: var(--bg-secondary, #fff) !important;
    color: var(--text-primary) !important;
    border-bottom: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 4px 14px rgba(15, 23, 42, .06);
}

/* Competitor Sales: заливні кнопки → сегмент */
.cs-tabs {
    display: inline-flex !important; gap: 2px; flex-wrap: wrap;
    background: color-mix(in srgb, var(--novo-text, #0F172A) 7%, transparent);
    border-radius: 12px; padding: 3px;
}
.cs-tab { border: 0 !important; background: transparent !important; border-radius: 9px !important; font-weight: 600; color: var(--text-secondary) !important;
    transition: transform 100ms ease-out, background 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.cs-tab:active { transform: scale(0.96); }
.cs-tab.active { background: var(--bg-secondary, #fff) !important; color: var(--text-primary) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 4px 14px rgba(15, 23, 42, .06); }

/* Проєкти */
.prj-tabs {
    display: inline-flex !important; gap: 2px; flex-wrap: wrap;
    background: color-mix(in srgb, var(--novo-text, #0F172A) 7%, transparent);
    border-radius: 12px; padding: 3px;
}
.prj-tab { border: 0 !important; border-radius: 9px !important; }
.prj-tab:hover { background: transparent; color: var(--text-primary); }
.prj-tab:active { transform: scale(0.96); }
.prj-tab.is-on { background: var(--novo-surface, #fff); color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 4px 14px rgba(15, 23, 42, .06); }

/* Глобальні капсули-фільтри (періоди/сортування/дні) і плитки-фільтри */
.pill {
    appearance: none; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--text-primary, #000) 12%, transparent);
    background: var(--bg-secondary, #fff); color: var(--text-primary, #222);
    border-radius: 999px; padding: 5px 12px;
    font: 600 12px/1.2 inherit;
    transition: transform 100ms ease-out, background 160ms ease, border-color 160ms ease;
}
.pill:hover { border-color: color-mix(in srgb, var(--text-primary, #000) 26%, transparent); }
.pill:active { transform: scale(0.95); }
.pill.on { background: var(--accent, #2563EB); border-color: var(--accent, #2563EB); color: #fff; }
.tile-sel { cursor: pointer; user-select: none; }
.tile-sel.on { box-shadow: 0 0 0 2px var(--accent, #2563EB) inset, 0 1px 2px rgba(15, 23, 42, .05); border-color: transparent !important; }