/* ════════════════════════════════════════════════════════════════════════
   FASE 6.A — Admin Chrome Unification (2026-05-08)
   ────────────────────────────────────────────────────────────────────────
   The Stabilize-phase audit (5 admin-page screenshots) showed inconsistent
   page banners — different gradients per route because legacy
   .platforma-welcome-section reads tenant-theme variables.

   On /admin/* surfaces (SuperAdmin chrome, NOT tenant workspace) the
   correct visual language is the FASE 5 design-system "platform" gradient
   — Platforma-rød, never tinted by tenant theme.

   Strategy: scope to body[data-area="admin"] (set by _Layout.cshtml from
   RouteData["area"]). Tenant workspace and public website are unaffected.

   This file is purely additive — original .platforma-welcome-section
   declarations in platforma-dashboard.css remain intact for tenant chrome
   + legacy callsites. Cascade order: tokens → dashboard → admin-chrome.
   ──────────────────────────────────────────────────────────────────────── */

/* ─── 6.A.1 Banner gradient unification ────────────────────────────── */
body[data-area="admin"] .platforma-welcome-section {
    /* Always platform-red on admin chrome — drift-proof against tenant
       theme variables. Uses the FASE 5 design-system token directly. */
    background: var(--platforma-page-banner-platform);

    /* Subtle inner ring for premium-card feel (matches PageBanner ViewComponent) */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
                0 12px 32px -16px rgba(212, 33, 61, 0.45);

    /* Restore breathing room on wide viewports — old 2rem padding looked
       cramped at desktop widths. clamp keeps mobile compact. */
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* ─── 6.A.2 Typography hierarchy ──────────────────────────────────── */
/* Legacy .platforma-welcome-title was hardcoded to 1.75rem. Bind to the
   FASE 5 display scale so admin headings match the design-system page. */
body[data-area="admin"] .platforma-welcome-title {
    font-size: var(--platforma-text-display-2, clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem));
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem 0;
}

body[data-area="admin"] .platforma-welcome-subtitle {
    font-size: var(--platforma-text-body-lg, 1.125rem);
    line-height: 1.5;
    opacity: 0.92;
    margin: 0;
    max-width: 64ch;
}

/* ─── 6.A.3 Optional overline (FASE 6 opt-in convention) ──────────── */
/* Pages can prepend <span class="platforma-welcome-overline">CATEGORY</span>
   above .platforma-welcome-title for a category label (PLATFORM / TENANT
   KONTEKST / GDPR / ATTENTION). Matches the design-system PageBanner.    */
.platforma-welcome-overline {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 0.5rem;
}

/* ─── 6.A.4 KPI strip inside admin welcome (FASE 6 opt-in) ───────── */
/* Pages can append <div class="platforma-welcome-stats">…</div> with
   stat tiles — same pattern as design-system PageBanner.                 */
.platforma-welcome-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2.5rem);
    margin-top: clamp(1rem, 2vw, 1.5rem);
    padding-top: clamp(0.75rem, 2vw, 1.25rem);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.platforma-welcome-stats__item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 6rem;
}

.platforma-welcome-stats__value {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.platforma-welcome-stats__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.78;
}

/* ─── 6.C Table polish (admin chrome) ─────────────────────────────── */
/* Plain admin tables looked unstyled in audit screenshots. Apply premium
   defaults — sticky header, zebra rows, hover state, tabular numerics on
   numeric columns marked with .platforma-tabular.                         */
body[data-area="admin"] .platforma-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--platforma-white, #fff);
    border: 1px solid var(--platforma-surface-line, var(--platforma-gray-200, #e5e7eb));
    border-radius: var(--platforma-radius, 8px);
    overflow: hidden;
    font-size: 0.9375rem;
}

body[data-area="admin"] .platforma-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--platforma-gray-50, #f9fafb);
    color: var(--platforma-ink-muted, var(--platforma-gray-700, #374151));
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--platforma-surface-line, var(--platforma-gray-200, #e5e7eb));
    white-space: nowrap;
}

body[data-area="admin"] .platforma-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--platforma-gray-100, #f3f4f6);
    color: var(--platforma-ink-strong, var(--platforma-gray-900, #111827));
    vertical-align: top;
}

body[data-area="admin"] .platforma-table tbody tr:last-child td {
    border-bottom: none;
}

body[data-area="admin"] .platforma-table tbody tr:hover td {
    background: var(--platforma-gray-50, #f9fafb);
}

body[data-area="admin"] .platforma-table .platforma-tabular,
body[data-area="admin"] .platforma-table td.platforma-tabular,
body[data-area="admin"] .platforma-table th.platforma-tabular {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Empty-state row inside admin tables (consistent visual when no data) */
body[data-area="admin"] .platforma-table .platforma-table-empty {
    text-align: center;
    color: var(--platforma-ink-muted, var(--platforma-gray-500, #6b7280));
    padding: 2rem 1rem;
    font-style: italic;
}

/* ─── 6.A.5 Welcome actions row alignment ─────────────────────────── */
/* The actions row (right side of welcome-section) needs whitespace polish
   so buttons don't collide with stat tiles when both are present.        */
body[data-area="admin"] .platforma-welcome-actions {
    align-self: flex-start;
}

/* ─── FASE 9.C — Admin table responsive (<768px) ──────────────────── */
/* Audit screenshots showed admin tables overflow horizontally on phones,
   pushing content under the sidebar. Wrap each .platforma-table in an
   overflow-x scroll container at narrow viewports so users can swipe.

   Pattern: parent .platforma-table-scroll holds the table; styling
   below makes the scroll affordance visible (subtle right-edge fade).   */
body[data-area="admin"] .platforma-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--platforma-radius, 8px);
}

@media (max-width: 768px) {
    body[data-area="admin"] .platforma-table-scroll {
        /* Hint that there's more content to scroll horizontally */
        background: linear-gradient(to right, transparent 0%, transparent 92%, rgba(0, 0, 0, 0.04) 100%);
    }

    body[data-area="admin"] .platforma-table {
        min-width: 640px; /* preserves column widths inside the scroll viewport */
    }

    /* On very narrow phones, welcome-section stats wrap naturally — but
       reduce gap so they don't overflow the right edge.                    */
    body[data-area="admin"] .platforma-welcome-stats {
        gap: 1rem;
    }

    body[data-area="admin"] .platforma-welcome-section {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    /* Welcome banner gets even tighter on phones — suppress the box-shadow
       glow so it doesn't bleed under the screen edge.                      */
    body[data-area="admin"] .platforma-welcome-section {
        box-shadow: none;
        padding: 1.25rem;
    }

    body[data-area="admin"] .platforma-welcome-stats__value {
        font-size: 1.375rem;
    }
}