/**
 * ShadowUI Density – globale kompakte Skala (Mobile-first, TikTok-ähnliche Dichte).
 * Wird als letztes Stylesheet geladen und wirkt app-weit auf Shell, Buttons und Cards.
 */

:root {
    --ss-density-scale: 0.9;
    --ss-text-xs: clamp(0.58rem, 0.56rem + 0.1vw, 0.68rem);
    --ss-text-sm: clamp(0.64rem, 0.62rem + 0.14vw, 0.74rem);
    --ss-text-base: clamp(0.72rem, 0.68rem + 0.18vw, 0.82rem);
    --ss-text-md: clamp(0.78rem, 0.74rem + 0.22vw, 0.9rem);
    --ss-text-lg: clamp(0.88rem, 0.82rem + 0.28vw, 1rem);
    --ss-text-xl: clamp(0.98rem, 0.92rem + 0.35vw, 1.14rem);
    --ss-text-2xl: clamp(1.08rem, 1rem + 0.45vw, 1.28rem);
    --ss-text-3xl: clamp(1.2rem, 1.08rem + 0.6vw, 1.48rem);
    --ss-space-1: clamp(2px, 0.15vw, 4px);
    --ss-space-2: clamp(4px, 0.3vw, 6px);
    --ss-space-3: clamp(6px, 0.45vw, 8px);
    --ss-space-4: clamp(8px, 0.55vw, 10px);
    --ss-space-5: clamp(10px, 0.7vw, 12px);
    --ss-btn-h-xs: clamp(28px, 7vw, 32px);
    --ss-btn-h-sm: clamp(32px, 7.5vw, 36px);
    --ss-btn-h-md: clamp(36px, 8vw, 40px);
    --ss-btn-h-lg: clamp(40px, 8.8vw, 44px);
    --ss-radius-sm: 8px;
    --ss-radius-md: 10px;
    --ss-radius-lg: 12px;
    --ss-radius-pill: 999px;
    --ss-control-min-height: var(--ss-btn-h-md);
    --ss-wallet-chip-height: var(--ss-btn-h-md);
    --ss-wallet-chip-compact-height: var(--ss-btn-h-sm);
}

html {
    font-size: clamp(13px, 12px + 0.22vw, 15px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: var(--ss-text-base);
    line-height: 1.38;
}

body :where(h1) {
    font-size: var(--ss-text-3xl);
    line-height: 1.12;
    margin: 0 0 var(--ss-space-3);
}

body :where(h2) {
    font-size: var(--ss-text-2xl);
    line-height: 1.16;
    margin: 0 0 var(--ss-space-2);
}

body :where(h3) {
    font-size: var(--ss-text-xl);
    line-height: 1.2;
    margin: 0 0 var(--ss-space-2);
}

body :where(h4, h5, h6) {
    font-size: var(--ss-text-lg);
    line-height: 1.22;
}

body :where(p, li, label, small) {
    font-size: inherit;
    line-height: 1.42;
}

/* === Globale Buttons & Controls === */
:where(
    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    .neon-button,
    .ghost-button,
    .neon-btn,
    .pulse-btn,
    .admin-btn,
    .btn-scan,
    .btn-reset,
    .upload-next,
    .upload-back,
    .upload-submit,
    .contact-submit,
    .ads-submit,
    .subscribe-btn,
    .ticket-link,
    .placeholder-return-btn,
    .feed-switch__btn,
    .landing-search-btn,
    .su-btn-auth,
    .su-btn-plus,
    .legal-button,
    .legal-card a,
    .legal-process-grid a,
    .legal-side-panel__links a,
    .legal-request__form button,
    .legal-consent__docs a,
    .feed-filter-btn,
    .report-inbox-page__refresh,
    .su-top-action
) {
    min-height: var(--ss-btn-h-sm) !important;
    padding: 0 clamp(10px, 2.4vw, 14px) !important;
    font-size: var(--ss-text-sm) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    border-radius: var(--ss-radius-pill, 999px) !important;
    transition-duration: 120ms !important;
}

:where(
    button:active,
    .btn:active,
    .su-link:active,
    .feed-action:active,
    .su-top-action:active
) {
    transform: scale(0.97);
}

:where(input, select, textarea) {
    min-height: var(--ss-btn-h-sm);
    padding: var(--ss-space-2) var(--ss-space-3);
    font-size: var(--ss-text-sm);
    border-radius: var(--ss-radius-md);
}

/* === Unified Shell === */
.su-link {
    min-height: var(--ss-btn-h-md);
    padding: 4px 10px 4px 6px;
    gap: 7px;
    font-size: var(--ss-text-sm);
}

.su-link__icon {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
}

.su-nav--compact .su-link {
    min-height: var(--ss-btn-h-sm);
    padding: 3px 8px 3px 5px;
}

.su-nav--compact .su-link__icon {
    width: 22px;
    height: 22px;
}

.su-topbar {
    padding: 6px 8px;
}

.su-top-action {
    min-height: var(--ss-btn-h-sm);
    padding: 0 8px;
    font-size: var(--ss-text-xs);
}

.su-top-action__text {
    font-size: var(--ss-text-xs);
}

.su-search input {
    min-height: var(--ss-btn-h-md);
    font-size: var(--ss-text-sm);
}

.su-content {
    padding: clamp(6px, 1.2vw, 10px);
}

.su-wallet-chip,
.su-wallet-chip--compact {
    min-height: var(--ss-btn-h-sm);
}

.ss-wallet-chip__label {
    font-size: var(--ss-text-xs);
}

.ss-wallet-chip__balance {
    font-size: var(--ss-text-sm);
}

.feed-switch__btn {
    min-height: var(--ss-btn-h-sm) !important;
    padding: 0 11px !important;
    font-size: var(--ss-text-xs) !important;
}

.su-bottom-nav {
    min-height: 52px;
    padding: 4px;
}

.su-bottom-nav__item {
    min-height: 40px;
    font-size: var(--ss-text-xs);
    padding-inline: 5px;
}

/* === Feed (kompakter, TikTok-näher) === */
.feed-action {
    width: clamp(52px, 7.2vw, 62px) !important;
    min-height: 54px !important;
    padding: 5px 4px 6px !important;
    gap: 2px !important;
    border-radius: 12px !important;
}

.feed-action__glyph {
    font-size: 0.95rem !important;
}

.feed-action__label {
    font-size: 0.48rem !important;
    letter-spacing: 0.06em;
}

.feed-action__count {
    font-size: 0.62rem !important;
}

.feed-actions {
    gap: 8px;
    bottom: 118px;
}

.feed-topbar {
    padding: 6px 8px 4px;
}

.feed-headline__title {
    font-size: var(--ss-text-lg);
}

.feed-headline__sub,
.feed-mode-hint {
    font-size: var(--ss-text-xs);
}

/* === Legal (Sidepanel & Dokumente) === */
.legal-side-panel {
    padding: 10px 10px 12px;
    border-radius: var(--ss-radius-lg);
    top: 72px;
}

.legal-side-panel h2 {
    font-size: var(--ss-text-md);
    margin: 0 0 var(--ss-space-2);
}

.legal-side-panel__links {
    gap: 4px;
}

.legal-side-panel__links a {
    min-height: var(--ss-btn-h-xs) !important;
    padding: 5px 8px !important;
    border-radius: var(--ss-radius-sm) !important;
    font-size: var(--ss-text-xs) !important;
    font-weight: 700 !important;
    justify-content: space-between;
    gap: 6px;
}

.legal-side-panel__links a span {
    font-size: var(--ss-text-xs);
    line-height: 1.2;
}

.legal-side-panel__links a small {
    font-size: 0.52rem;
    opacity: 0.62;
    letter-spacing: 0.04em;
}

.legal-side-panel__notice {
    margin-top: 8px;
    padding: 8px;
    font-size: var(--ss-text-xs);
}

.legal-side-panel__notice p {
    font-size: var(--ss-text-xs);
    line-height: 1.35;
    margin: 4px 0 0;
}

.legal-button,
.legal-card a,
.legal-process-grid a,
.legal-request__form button {
    min-height: var(--ss-btn-h-sm) !important;
    padding: 0 12px !important;
}

.legal-card,
.legal-process-grid article {
    min-height: 0;
    padding: 12px;
    gap: 10px;
    border-radius: var(--ss-radius-lg);
}

.legal-card h2,
.legal-process-grid h2,
.legal-document__body h2 {
    font-size: var(--ss-text-lg);
}

.legal-consent__docs a {
    min-height: 48px !important;
    padding: 8px 10px !important;
}

.legal-document__header h1 {
    font-size: var(--ss-text-2xl);
}

.legal-document__body {
    font-size: var(--ss-text-sm);
}

.legal-document__body p,
.legal-document__item-note {
    font-size: var(--ss-text-sm);
    line-height: 1.4;
}

.legal-hero__actions {
    gap: 6px;
    margin-top: 12px;
}

/* === Cards, Panels, Modals === */
:where(
    .card,
    .panel,
    .modal-content,
    .report-inbox-card,
    .ticket-kpi-card,
    .legal-card
) {
    border-radius: var(--ss-radius-lg);
}

.report-inbox-page__head {
    padding: 10px 12px;
}

.report-inbox-page__head h1 {
    font-size: var(--ss-text-xl);
}

.report-inbox-card {
    padding: 8px 10px;
}

/* === Sehr kleine Displays === */
@media (max-width: 420px) {
    html {
        font-size: 12.5px;
    }

    .su-link {
        min-height: 34px;
        font-size: var(--ss-text-xs);
    }

    .feed-action {
        width: 50px !important;
        min-height: 50px !important;
    }

    .legal-side-panel__links a {
        min-height: 30px !important;
        padding: 4px 7px !important;
    }

    .legal-side-panel__links a small {
        display: none;
    }
}

/* === Desktop: etwas luftiger, aber weiterhin kompakt === */
@media (min-width: 1200px) {
    html {
        font-size: 14px;
    }

    .su-link {
        min-height: 38px;
    }

    .feed-action {
        width: 58px !important;
        min-height: 56px !important;
    }
}