/* ══════════════════════════════════════════════════════════════
   Public Viewer — CSS для публичной страницы панели аналитики
   Sprint 14.6.3 — Public Viewer Layout
   Sprint 14.6.3.1 — Compact header + logo + adaptive grid
   Sprint 14.6.4 — Runtime Public Viewer: ScoreCard, LineChart, states
   ══════════════════════════════════════════════════════════════ */

:root {
    --pv-bg: #f8f9fa;
    --pv-surface: #ffffff;
    --pv-border: #e5e7eb;
    --pv-text: #1f2937;
    --pv-text-secondary: #6b7280;
    --pv-brand: #2563eb;
    --pv-brand-soft: #eef2ff;
    --pv-brand-soft-text: #3641b7;
    --pv-shadow: 0 2px 10px rgba(20, 30, 60, .04);
    --pv-skeleton-base: #e5e7eb;
    --pv-skeleton-shine: #f3f4f6;
    --pv-tile-title: #374151;
    --pv-error: #dc2626;
    --pv-success: #059669;
}

[data-bs-theme="dark"] {
    --pv-bg: #111827;
    --pv-surface: #1f2937;
    --pv-border: #374151;
    --pv-text: #f9fafb;
    --pv-text-secondary: #9ca3af;
    --pv-brand: #3b82f6;
    --pv-brand-soft: rgba(59, 130, 246, .16);
    --pv-brand-soft-text: #93c5fd;
    --pv-shadow: 0 2px 14px rgba(0, 0, 0, .35);
    --pv-skeleton-base: #374151;
    --pv-skeleton-shine: #4b5563;
    --pv-tile-title: #e5e7eb;
    --pv-error: #ef4444;
    --pv-success: #10b981;
}

html, body {
    background: var(--pv-bg);
    color: var(--pv-text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* ─── Body layout ─── */
.pv-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    min-width: 0;
}

/* ─── Header ─── */
.pv-header {
    background: var(--pv-surface);
    border-bottom: 1px solid var(--pv-border);
    padding: 10px 0;
}
.pv-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.pv-header__title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--pv-text);
    word-break: break-word;
    min-width: 0;
}

/* ─── Logo ─── */
.logo-full {
    flex: 0 0 auto;
}
.logo-full img {
    display: block;
    width: auto;
    max-height: 40px;
}

.logo-short {
    display: none;
}
.logo-short img {
    display: block;
    width: auto;
    max-height: 40px;
}


/* ─── Public Viewer Filters ─── */
.pv-filter-toolbar {
    padding: 16px 0 8px;
}

.pv-filter-toolbar .ap-dashboard-filters {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.625rem;
    padding: 0 0 0.5rem;
    margin: 0;
    border: 0;
    flex-wrap: wrap;
}

.pv-filter-toolbar .ap-dashboard-filters [data-dashboard-canonical-filters] {
    display: flex;
    align-items: flex-end;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.pv-filter-toolbar .ap-dashboard-filters__group {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    min-width: 0;
}

.pv-filter-toolbar .ap-dashboard-filters__label {
    color: var(--pv-text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.2;
}

.pv-filter-toolbar .ap-dashboard-filters__select {
    min-width: 130px;
    height: 30px;
    padding: 0.1875rem 1.75rem 0.1875rem 0.5rem;
    border: 1px solid var(--pv-border);
    border-radius: 0.375rem;
    background-color: var(--pv-surface);
    color: var(--pv-text);
    font-size: 0.8125rem;
    line-height: 1.2;
}

.pv-filter-toolbar .ap-dashboard-filters__select:focus {
    outline: none;
    border-color: var(--pv-brand);
}

.pv-filter-toolbar .ap-dashboard-filter-dropdown__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 160px;
    text-align: left;
}

.pv-filter-toolbar .ap-dashboard-filter-dropdown__toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-filter-toolbar .ap-dashboard-filter-dropdown__menu {
    min-width: 220px;
    max-height: 280px;
    padding: 0.375rem;
    overflow-y: auto;
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
}

.pv-filter-toolbar .ap-dashboard-filter-dropdown__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.375rem;
    color: var(--pv-text);
    font-size: 0.8125rem;
    cursor: pointer;
}

.pv-filter-toolbar .ap-dashboard-filter-dropdown__option:hover {
    background: var(--pv-bg);
}

.pv-filter-toolbar .ap-dashboard-filter-dropdown__option .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.pv-filter-toolbar .ap-dashboard-filters__group--fixed .ap-dashboard-filters__label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pv-filter-toolbar .ap-dashboard-filters__lock {
    font-size: 0.6875rem;
    line-height: 1;
    cursor: help;
    opacity: 0.65;
}

.pv-filter-toolbar .ap-dashboard-filters__fixed-control {
    display: flex;
    align-items: center;
    min-width: 130px;
    cursor: default;
    opacity: 0.72;
}

/* ─── Dashboard Area ─── */
.pv-dashboard {
    padding: 0 0 48px 0;
    flex: 1 0 auto;
}
.pv-dashboard__container {
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-radius: 10px;
    min-height: 400px;
    padding: 32px;
}

/* ─── Empty State ─── */
.pv-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    color: var(--pv-text-secondary);
}
.pv-empty-state__icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}
.pv-empty-state__text {
    font-size: 1rem;
    margin: 0;
}

/* ─── CSS Grid для плашек ─── */
.pv-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

/* ─── Tile ─── */
.pv-tile {
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 140px;
}
.pv-tile__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.pv-tile__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pv-tile-title);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pv-tile__type-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--pv-text-secondary);
    background: var(--pv-bg);
    border: 1px solid var(--pv-border);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}
.pv-tile__body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

/* ─── Tile states ─── */
.pv-tile--error {
    border-color: var(--pv-error);
}
.pv-tile--empty .pv-tile__body,
.pv-tile--unavailable .pv-tile__body,
.pv-tile--missing .pv-tile__body {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── State text ─── */
.pv-tile__state-text {
    font-size: 0.875rem;
    color: var(--pv-text-secondary);
    text-align: center;
}
.pv-tile__state-text--error {
    color: var(--pv-error);
}

/* ─── Render target ─── */
.pv-tile__render-target {
    width: 100%;
    height: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   SCORECARD
   ══════════════════════════════════════════════════════════════ */

.pv-scorecard {
    text-align: center;
    width: 100%;
}
.pv-scorecard__value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--pv-text);
    word-break: break-word;
}
.pv-scorecard__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--pv-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════
   SKELETON
   ══════════════════════════════════════════════════════════════ */

.pv-skeleton {
    background: var(--pv-skeleton-base);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.pv-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--pv-skeleton-shine) 50%,
        transparent 100%
    );
    animation: pv-shine 2s ease-in-out infinite;
}
@keyframes pv-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.pv-skeleton__line {
    height: 12px;
    background: var(--pv-skeleton-base);
    border-radius: 3px;
    margin: 8px 0;
}
.pv-skeleton__line--short {
    width: 60%;
}
.pv-skeleton__line--long {
    width: 80%;
}

/* scorecard — крупное число */
.pv-skeleton--scorecard {
    height: 48px;
    width: 40%;
    border-radius: 6px;
}

/* line — линия */
.pv-skeleton--line {
    height: 100%;
    min-height: 80px;
    border-radius: 6px;
    position: relative;
}
.pv-skeleton--line::before {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    height: 2px;
    background: var(--pv-skeleton-shine);
    border-radius: 1px;
}

/* bar — столбцы */
.pv-skeleton--bar {
    height: 100%;
    min-height: 80px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 8px 12px;
    background: transparent;
}
.pv-skeleton--bar::after {
    display: none;
}
.pv-skeleton--bar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--pv-border);
}

/* table — строки таблицы */
.pv-skeleton--table {
    height: 100%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
    padding: 4px 0;
}
.pv-skeleton--table::after {
    display: none;
}

/* donut/pie — круг */
.pv-skeleton--donut {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.pv-skeleton--donut::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: var(--pv-surface);
    border-radius: 50%;
    z-index: 1;
}

/* funnel — ступени */
.pv-skeleton--funnel {
    height: 100%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent;
    padding: 8px 12px;
}
.pv-skeleton--funnel::after {
    display: none;
}

/* unknown / универсальный */
.pv-skeleton--unknown {
    height: 100%;
    min-height: 60px;
    border-radius: 6px;
}

/* unavailable / missing */
.pv-skeleton--unavailable {
    height: 0;
    background: transparent;
}
.pv-skeleton--unavailable::after {
    display: none;
}

/* ─── Footer ─── */
.pv-footer {
    background: var(--pv-surface);
    border-top: 1px solid var(--pv-border);
    padding: 16px 0;
    flex-shrink: 0;
}
.pv-footer__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--pv-text-secondary);
}
.pv-footer__brand {
    font-weight: 600;
    color: var(--pv-brand);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 992px) {
    .pv-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
    }
    .pv-dashboard__container {
        padding: 24px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .pv-header__title {
        font-size: 1rem;
    }

    .logo-full {
        display: none;
    }

    .logo-short {
        display: block;
    }

    .logo-short img {
        display: block;
        width: auto;
        max-height: 32px;
    }

    .pv-dashboard__container {
        padding: 16px;
        min-height: 300px;
    }

    .pv-dashboard-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .pv-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .pv-tile {
        width: 100%;
        min-height: 160px;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .pv-scorecard__value {
        font-size: 1.5rem;
    }

    .pv-filter-toolbar .ap-dashboard-filters,
    .pv-filter-toolbar .ap-dashboard-filters [data-dashboard-canonical-filters] {
        align-items: stretch;
        flex-direction: column;
    }

    .pv-filter-toolbar .ap-dashboard-filters__group,
    .pv-filter-toolbar .ap-dashboard-filter-dropdown__toggle,
    .pv-filter-toolbar .ap-dashboard-filters__select {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY: reduced motion
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .pv-skeleton::after,
    .pv-skeleton--bar .pv-skeleton-bar::after,
    .pv-skeleton--table .pv-skeleton-row::after,
    .pv-skeleton--funnel .pv-skeleton-step::after {
        animation: none;
    }
}

.pv-container {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 576px) {
    .pv-container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Sprint 14.6.11: public-authorized drill-down disabled (allow_drilldown=false).
   Backend всё равно fail-closed (403); здесь — только снятие визуального
   интерактива с существующих триггеров, без форка renderer'а. */
.ap-money-stuck--drilldown-disabled [data-drilldown-population] {
    pointer-events: none;
    cursor: default;
}

.ap-money-stuck--drilldown-disabled .ap-money-stuck__action-arrow,
.ap-money-stuck--drilldown-disabled .ap-money-stuck__kpi-arrow {
    display: none;
}

/* ═══════════════════════════════════════════════════════
   Sprint 14.6.13.1 — Snapshot Mode (Public Viewer)
   Presentation-only: публичный chrome скрывается, данные и layout
   панели сохраняются. Селекторы активны только при snapshot state
   на #pv-runtime-root (Public Viewer snapshot root).
   ═══════════════════════════════════════════════════════ */

/* Public Viewer chrome: header/footer/filter toolbar.
   :has() позволяет скрыть siblings snapshot root без правки layout. */
.pv-body:has(#pv-runtime-root.is-dashboard-snapshot) .pv-header,
.pv-body:has(#pv-runtime-root.is-dashboard-snapshot) .pv-footer,
.pv-body:has(#pv-runtime-root.is-dashboard-snapshot) .pv-filter-toolbar {
    display: none !important;
}

/* Drill-down overlay/backdrop — сервисный интерактив, в snapshot не показывается. */
#pv-runtime-root.is-dashboard-snapshot [data-drilldown-overlay],
#pv-runtime-root.is-dashboard-snapshot [data-drilldown-backdrop] {
    display: none !important;
}

/* Drill-down affordance: аналитическое содержимое сохраняется,
   убирается только интерактивность. */
#pv-runtime-root.is-dashboard-snapshot [data-drilldown-population] {
    cursor: default;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   DEMO (Sprint DEMO.1) — каталог и toolbar панели.
   Только токены темы Public Viewer; никаких хардкод-цветов,
   чтобы light/dark переключались через data-bs-theme.
   ══════════════════════════════════════════════════════════════ */

.demo-toolbar {
    border-bottom: 1px solid var(--pv-border);
    background: var(--pv-surface);
    padding: 10px 0;
}

.demo-toolbar .pv-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.demo-toolbar__back {
    color: var(--pv-brand);
    font-weight: 600;
    text-decoration: none;
}

.demo-toolbar__back:hover {
    text-decoration: underline;
}

.demo-toolbar__hint {
    margin-left: auto;
    color: var(--pv-text-secondary);
    font-size: 12px;
}

.demo-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--pv-brand-soft);
    color: var(--pv-brand-soft-text);
    font-size: 12px;
    font-weight: 600;
}

.demo-intro {
    margin: 24px 0 28px;
}

.demo-intro__title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: var(--pv-text);
}

.demo-intro__text {
    margin: 0 0 12px;
    max-width: 760px;
    color: var(--pv-text-secondary);
}

.demo-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.demo-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border: 1px solid var(--pv-border);
    border-radius: 14px;
    background: var(--pv-surface);
    box-shadow: var(--pv-shadow);
}

.demo-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--pv-text);
}

.demo-card__text {
    margin: 0;
    flex: 1 1 auto;
    color: var(--pv-text-secondary);
    font-size: 14px;
}

.demo-card__link {
    align-self: flex-start;
    margin-top: 4px;
    font-weight: 600;
    color: var(--pv-brand);
    text-decoration: none;
}

.demo-card__link:hover {
    text-decoration: underline;
}