/* MedScore Cabinet — дизайн-фундамент.
   Manrope variable (self-hosted, cyrillic+latin) + утилиты + мобильные
   паттерны (off-canvas сайдбар, таблицы→карточки). Палитра/токены —
   в base.html (:root, shadcn zinc); компонентная тема — skin-shadcn.css. */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- KPI-типографика (canon: крупное semibold число + спокойный лейбл) ---- */
.kpi-number {
    font-size: 1.9rem;
    line-height: 2.2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
}
.kpi-label {
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ---- Карточки: спокойный ховер бордером (без подъёма) ---- */
.card-hover { transition: border-color .15s ease, box-shadow .15s ease; }
.card-hover:hover { box-shadow: var(--shadow-card); border-color: #d4d4d8; }
.dark .card-hover:hover { box-shadow: var(--shadow-card); border-color: #3f3f46; }

/* ---- Skeleton-шиммер (pulsing, не серые плашки) ---- */
@keyframes skeleton-pulse { 0%,100% { opacity: .45; } 50% { opacity: .9; } }
.skeleton {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    background: linear-gradient(90deg, rgb(161 161 170 / .15), rgb(161 161 170 / .28), rgb(161 161 170 / .15));
    border-radius: 8px;
}

/* ---- Спарклайн-контейнер в KPI-карте ---- */
.kpi-spark { height: 38px; margin: 2px -6px -8px; }
.kpi-spark .apexcharts-canvas { margin: 0 auto; }

/* ---- ApexCharts: шрифт темы (цвета тултипов — в skin-shadcn.css) ---- */
.apexcharts-tooltip { font-family: 'Manrope', system-ui, sans-serif !important; }
.apexcharts-text, .apexcharts-legend-text { font-family: 'Manrope', system-ui, sans-serif !important; }

/* =====================  МОБИЛЬНЫЕ ПАТТЕРНЫ  ===================== */

/* ---- Off-canvas сайдбар на < lg ---- */
@media (max-width: 1023.98px) {
    #sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: 17rem !important;
        transform: translateX(-105%);
        transition: transform .22s cubic-bezier(.4,0,.2,1);
    }
    html.sb-open #sidebar { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,.45); }
    /* десктопный collapse не действует на мобиле */
    html.sb-collapsed #sidebar .sb-label,
    html.sb-collapsed #sidebar .sb-only-expanded { display: revert; }
    html.sb-collapsed #sidebar .sb-logo { display: flex; }
    /* бургер внутри сайдбара прячем — на мобиле свой в шапке */
    #sidebar .sb-burger { display: none; }
    /* оверлей */
    #sb-overlay {
        position: fixed; inset: 0; z-index: 55;
        background: rgb(0 0 0 / .5);
        opacity: 0; pointer-events: none;
        transition: opacity .22s ease;
    }
    html.sb-open #sb-overlay { opacity: 1; pointer-events: auto; }
}
@media (min-width: 1024px) {
    #mobile-topbar { display: none; }
    #sb-overlay { display: none; }
}

/* ---- Таблицы → карточки на мобиле (.t-cards + td[data-label]) ---- */
@media (max-width: 767.98px) {
    table.t-cards thead { display: none; }
    table.t-cards, table.t-cards tbody { display: block; width: 100%; }
    table.t-cards tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 12px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(144,180,206,.25);
    }
    table.t-cards td {
        display: flex;
        flex-direction: column;
        padding: 4px 0 !important;
        text-align: left !important;
        border: none !important;
    }
    table.t-cards td[data-label]::before {
        content: attr(data-label);
        font-size: 0.6875rem;
        font-weight: 500;
        color: rgb(var(--hue-muted));
        margin-bottom: 1px;
    }
    table.t-cards td.t-span { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 6px; }
    table.t-cards td:empty { display: none; }
}

/* ---- Count-up: цифры не прыгают по ширине ---- */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ---- Снижение motion для accessibility ---- */
@media (prefers-reduced-motion: reduce) {
    .card-hover, #sidebar, #sb-overlay { transition: none !important; }
    .skeleton { animation: none; }
}