/* ============================================================
   Memoro Design Tokens
   Zentrale CSS-Variablen für Brand, Neutrals, Semantic-States,
   Radii, Spacing, Shadow. Wird VOR allen seitenspezifischen CSS-
   Dateien geladen. Alle Seiten ziehen aus dieser einen Quelle.

   Konvention:
   --brand-*     : Markenfarben (Primary, Accent)
   --neutral-*   : Hintergründe, Text, Border (graue Skala)
   --state-*     : Erfolgs-/Warn-/Fehler-Farben
   --radius-*    : Border-Radius-Stufen
   --space-*     : Spacing-Stufen (Margin, Padding)
   --shadow-*    : Schatten-Stufen
   --layout-*    : Fest-Größen (Sidebar, Header, Tap-Min)

   Hex-Werte werden NICHT direkt verwendet – immer var(--…).
   ============================================================ */

:root {
    /* === Brand ============================================== */
    /* Brand-Blau ist die EINZIGE Primary-Farbe.
       Solid #226CEA + Gradient #62B7F9 → #226CEA.
       Lila ist nur noch Tier-Farbe für den "Plus"-Chip. */
    --brand-primary:         #226CEA;
    --brand-primary-hover:   #1A57BD;
    --brand-primary-dark:    #1A57BD;
    --brand-primary-light:   #62B7F9;
    --brand-primary-soft:    rgba(34, 108, 234, 0.1);
    --brand-primary-softer:  rgba(34, 108, 234, 0.05);
    --brand-tint:            #EAF2FE;     /* heller Brand-Hintergrund */
    --brand-tint-soft:       #F4F8FF;     /* noch heller, fast weiß */

    /* Accent – jetzt nur noch für Plus-Tier-Chip & vereinzelte Highlights */
    --brand-accent:          #6E55E0;
    --brand-accent-strong:   #5A41C9;
    --brand-accent-soft:     rgba(110, 85, 224, 0.1);
    --brand-accent-softer:   rgba(110, 85, 224, 0.05);

    /* Signatur-Gradient – Brand-CTA (jetzt Brand-Blau) */
    --brand-gradient:        linear-gradient(135deg, #62B7F9 0%, #226CEA 100%);
    --brand-gradient-hover:  linear-gradient(135deg, #52A7E9 0%, #1A57BD 100%);

    /* === Neutrals =========================================== */
    --neutral-bg:            #f7f8fa;   /* Page-Background */
    --neutral-bg-soft:       #f8fafc;   /* leicht abgehobene Surface (Inputs, Stats) */
    --neutral-surface:       #ffffff;   /* Cards, Modals, Panels */
    --neutral-text:          #1e293b;   /* Standard-Textfarbe */
    --neutral-text-strong:   #0f172a;   /* Headlines */
    --neutral-text-muted:    #64748b;   /* Sekundärtext, Subtitel */
    --neutral-text-subtle:   #94a3b8;   /* Hints, Placeholder */
    --neutral-border:        #e2e8f0;   /* Standard-Border */
    --neutral-border-strong: #cbd5e1;   /* Hover-Border, Dividers */

    /* === State / Semantic =================================== */
    --state-success:         #10b981;
    --state-success-soft:    rgba(16, 185, 129, 0.12);
    --state-success-bg:      #ecfdf5;
    --state-warning:         #f59e0b;
    --state-warning-soft:    rgba(245, 158, 11, 0.18);
    --state-warning-bg:      #fffbeb;
    --state-danger:          #ef4444;
    --state-danger-strong:   #dc2626;
    --state-danger-soft:     rgba(239, 68, 68, 0.1);
    --state-danger-bg:       #fef2f2;
    --state-danger-border:   #fecaca;
    --state-info:            #2563eb;
    --state-info-soft:       rgba(37, 99, 235, 0.1);
    --state-info-bg:         #eff6ff;
    --state-info-border:     #bfdbfe;

    /* === Radius ============================================= */
    --radius-xs:             0.375rem;  /* 6px – Tags, kleine Pills */
    --radius-sm:             0.5rem;    /* 8px – kleine Buttons, Inputs */
    --radius-md:             0.75rem;   /* 12px – Standard-Cards */
    --radius-lg:             1rem;      /* 16px – große Cards, Modals */
    --radius-xl:             1.5rem;    /* 24px – Hero, große Panels */
    --radius-pill:           999px;     /* Pills, Toggles, runde Buttons */

    /* === Spacing ============================================ */
    --space-xs:              0.25rem;
    --space-sm:              0.5rem;
    --space-md:              1rem;
    --space-lg:              1.5rem;
    --space-xl:              2.5rem;
    --space-2xl:             4rem;

    /* === Shadow ============================================= */
    --shadow-xs:             0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:             0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-md:             0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg:             0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    --shadow-xl:             0 24px 48px rgba(15, 23, 42, 0.18);
    --shadow-brand:          0 2px 4px rgba(34, 108, 234, 0.25), 0 8px 22px rgba(34, 108, 234, 0.20);

    /* === Layout ============================================= */
    --layout-sidebar-w:      16rem;
    --layout-header-h:       5rem;
    --layout-content-max:    80rem;     /* 1280px */
    --layout-narrow-max:     40rem;     /* 640px – Wizard, Auth */
    --layout-tap-min:        44px;

    /* === Motion ============================================= */
    --transition-fast:       0.15s ease;
    --transition:            0.2s ease;
    --transition-slow:       0.3s ease;
}

/* ============================================================
   Toast – globale, wiederverwendbare Feedback-Komponente.
   Wird ueber render_toast_root() ans Ende des <body> geschrieben,
   wenn $_SESSION['toast'] gesetzt ist. Auto-Dismiss nach 4.5s.
   ============================================================ */
.toast {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    transform: translate(-50%, 1rem);
    z-index: 300;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: min(20rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    padding: 0.75rem 0.85rem 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: var(--neutral-surface);
    border: 1px solid var(--neutral-border);
    box-shadow: var(--shadow-lg);
    color: var(--neutral-text);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast--show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
}

.toast__message {
    flex: 1;
    min-width: 0;
}

.toast__close {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: transparent;
    color: var(--neutral-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 0.4rem;
    padding: 0;
}

.toast__close:hover {
    background: var(--neutral-bg);
    color: var(--neutral-text);
}

/* Typ-Varianten – linker Akzent + Icon-Farbe */
.toast--success {
    border-left: 4px solid var(--state-success);
}
.toast--success .toast__icon {
    background: var(--state-success);
}
.toast--success .toast__icon::before { content: "✓"; }

.toast--info {
    border-left: 4px solid var(--state-info);
}
.toast--info .toast__icon {
    background: var(--state-info);
}
.toast--info .toast__icon::before { content: "i"; font-style: italic; }

.toast--warning {
    border-left: 4px solid var(--state-warning);
}
.toast--warning .toast__icon {
    background: var(--state-warning);
}
.toast--warning .toast__icon::before { content: "!"; }

.toast--error {
    border-left: 4px solid var(--state-danger);
}
.toast--error .toast__icon {
    background: var(--state-danger);
}
.toast--error .toast__icon::before { content: "✕"; }

/* Auf Smartphones: Toast über die volle Breite, am unteren Rand mit Safe-Area */
@media (max-width: 480px) {
    .toast {
        left: 0.75rem;
        right: 0.75rem;
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        transform: translateY(1rem);
        min-width: 0;
        max-width: none;
    }
    .toast--show {
        transform: translateY(0);
    }
}

/* ============================================================
   Back-Pill — EIN globales Zurück-Navigations-Muster.
   jede Sub-Seite (Kontoeinstellungen,
   Account-Billing, Event-Detail, Event-Bearbeiten, etc.)
   nutzt dieselbe Pille. Token-basiert, kein Hardcode.
   ============================================================ */
.back-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 1rem 0 0.75rem;
    background: var(--neutral-surface);
    border-radius: var(--radius-pill);
    border: 1px solid var(--neutral-border);
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--neutral-text);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.back-pill:hover,
.back-pill:focus-visible {
    background: var(--neutral-bg-soft);
    border-color: var(--neutral-border-strong);
    color: var(--neutral-text-strong);
    transform: translateX(-1px);
    outline: none;
}

.back-pill__icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* ============================================================
   Upgrade-Card — EIN vereinheitlichtes Muster für Upgrade-Prompts.
   Ersetzt das alte gestrichelte Empty-State + den grauen Inline-
   Hinweis. Hat zwei Varianten: voll (Card) und kompakt (inline).
   ============================================================ */
.upgrade-card {
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--brand-tint);
    background: linear-gradient(180deg, var(--brand-tint-soft) 0%, var(--neutral-surface) 60%);
    box-shadow: var(--shadow-xs);
}

.upgrade-card__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.upgrade-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--brand-gradient);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 1px 2px rgba(34, 108, 234, 0.3);
}

.upgrade-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--neutral-text-strong);
    margin: 0 0 0.375rem;
}

.upgrade-card__body {
    font-size: 0.875rem;
    color: var(--neutral-text-muted);
    line-height: 1.5;
    margin: 0 0 1rem;
}

.upgrade-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 48px;
    padding: 0 1.125rem;
    border-radius: var(--radius-md);
    background: var(--brand-gradient);
    color: #fff;
    border: 0;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-brand);
    cursor: pointer;
    transition: filter 0.15s;
}

.upgrade-card__cta:hover {
    filter: brightness(1.04);
}

/* Kompakt-Variante: für Inline-Hints in Listen/Sektionen */
.upgrade-card--compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: var(--radius-md);
    background: var(--brand-tint-soft);
    border: 1px solid var(--brand-tint);
    box-shadow: none;
}

.upgrade-card--compact .upgrade-card__icon {
    width: 32px;
    height: 32px;
}

.upgrade-card--compact .upgrade-card__title {
    font-size: 0.8125rem;
    margin: 0 0 0.125rem;
}

.upgrade-card--compact .upgrade-card__body {
    font-size: 0.75rem;
    margin: 0;
}

.upgrade-card--compact .upgrade-card__cta {
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    color: var(--brand-primary);
    box-shadow: none;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ============================================================
   Tarif-Chip — wiederverwendbar, ein Style pro Tier
   ============================================================ */
.tarif-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 0.625rem;
    border-radius: var(--radius-pill);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
}

.tarif-chip--free {
    background: var(--neutral-bg-soft);
    color: var(--neutral-text);
    border-color: var(--neutral-border);
}

.tarif-chip--starter {
    background: #EEF6FF;
    color: var(--brand-primary);
    border-color: #D6E6FB;
}

.tarif-chip--plus {
    background: #EFE9FE;
    color: var(--brand-accent);
    border-color: #DCD0FB;
}

.tarif-chip--pro {
    background: var(--brand-gradient);
    color: #fff;
    border-color: transparent;
}

.tarif-chip--md {
    height: 26px;
    padding: 0 0.75rem;
    font-size: 0.75rem;
}