/* =============================================================================
   Phishin Design System — "Clean Professional SaaS"
   (m3-adminui-design-system)

   Ein leichtgewichtiges, framework-freies Design-System: Tokens + Basis-Element-
   Styles + Komponenten-Klassen (.ph-*). Bewusst KEIN Bootstrap/Tailwind — nur
   CSS-Variablen + Klassen, damit Tenant-Branding spaeter nur Tokens ueberschreibt.

   Konventionen:
   - Tokens:        --ph-*           (Single Source of Truth)
   - Komponenten:   .ph-*            (z.B. .ph-btn, .ph-card, .ph-table)
   - Kompatibilitaet: alte --phishin-* / .phishin-* Namen sind Aliase auf die Tokens.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    /* Farb-Primitive */
    --ph-bg:              #f7f8fa;
    --ph-surface:         #ffffff;
    --ph-surface-2:       #f1f3f6;
    --ph-surface-3:       #e9edf2;
    --ph-border:          #e4e7ec;
    --ph-border-strong:   #d0d5dd;

    --ph-fg:              #101828;
    /* a11y (#131): muted/subtle auf >= 4.5:1 (WCAG AA) gegen alle Surfaces angehoben.
       muted #667085→#565e70 (war 4.23:1 auf surface-3); subtle #98a2b3→#5d6675 (war 2.58:1 auf weiss). */
    --ph-fg-muted:        #565e70;
    --ph-fg-subtle:       #5d6675;
    --ph-fg-on-accent:    #ffffff;

    --ph-accent:          #4f46e5;
    --ph-accent-hover:    #4338ca;
    --ph-accent-active:   #3730a3;
    --ph-accent-subtle:   #eef2ff;
    --ph-accent-ring:     rgba(79, 70, 229, 0.35);

    --ph-success:         #067647;
    --ph-success-subtle:  #ecfdf3;
    --ph-warning:         #b54708;
    --ph-warning-subtle:  #fffaeb;
    --ph-danger:          #d92d20;
    --ph-danger-hover:    #b42318;
    --ph-danger-subtle:   #fef3f2;
    --ph-info:            #175cd3;
    --ph-info-subtle:     #eff8ff;

    /* Typografie */
    --ph-font-sans: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ph-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Consolas", monospace;

    --ph-text-xs:   0.75rem;    /* 12 */
    --ph-text-sm:   0.8125rem;  /* 13 */
    --ph-text-base: 0.875rem;   /* 14 — SaaS-Default */
    --ph-text-md:   0.9375rem;  /* 15 */
    --ph-text-lg:   1.125rem;   /* 18 */
    --ph-text-xl:   1.375rem;   /* 22 */
    --ph-text-2xl:  1.75rem;    /* 28 */

    --ph-fw-regular:  400;
    --ph-fw-medium:   500;
    --ph-fw-semibold: 600;
    --ph-fw-bold:     700;

    /* Spacing (4px-Basis) */
    --ph-space-1: 0.25rem;
    --ph-space-2: 0.5rem;
    --ph-space-3: 0.75rem;
    --ph-space-4: 1rem;
    --ph-space-5: 1.5rem;
    --ph-space-6: 2rem;
    --ph-space-7: 3rem;

    /* Radii */
    --ph-radius-sm:   6px;
    --ph-radius-md:   8px;
    --ph-radius-lg:   12px;
    --ph-radius-full: 999px;

    /* Schatten (weich) */
    --ph-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
    --ph-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.08);
    --ph-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12);

    /* Layout */
    --ph-sidebar-width: 252px;
    --ph-topbar-height: 56px;
    --ph-content-max:   1180px;

    /* Kompatibilitaets-Aliase (alte Namen) */
    --phishin-bg:        var(--ph-bg);
    --phishin-surface:   var(--ph-surface);
    --phishin-border:    var(--ph-border);
    --phishin-fg:        var(--ph-fg);
    --phishin-fg-muted:  var(--ph-fg-muted);
    --phishin-accent:    var(--ph-accent);
    --phishin-accent-fg: var(--ph-fg-on-accent);
    --phishin-danger:    var(--ph-danger);
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--ph-font-sans);
    font-size: var(--ph-text-base);
    line-height: 1.5;
    color: var(--ph-fg);
    background: var(--ph-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0 0 var(--ph-space-3); font-weight: var(--ph-fw-semibold); color: var(--ph-fg); line-height: 1.3; }
h1 { font-size: var(--ph-text-2xl); letter-spacing: -0.01em; }
h2 { font-size: var(--ph-text-xl); letter-spacing: -0.01em; }
h3 { font-size: var(--ph-text-lg); }
h4 { font-size: var(--ph-text-md); }
p  { margin: 0 0 var(--ph-space-4); }

a { color: var(--ph-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, samp, .ph-mono {
    font-family: var(--ph-font-mono);
    font-size: 0.92em;
}
:not(pre) > code {
    background: var(--ph-surface-2);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-sm);
    padding: 0.1em 0.4em;
    color: var(--ph-fg);
}

hr { border: none; border-top: 1px solid var(--ph-border); margin: var(--ph-space-5) 0; }

:focus-visible { outline: 2px solid var(--ph-accent); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.ph-btn,
button:not(.ph-unstyled) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ph-space-2);
    font-family: inherit;
    font-size: var(--ph-text-base);
    font-weight: var(--ph-fw-medium);
    line-height: 1.2;
    padding: 0.5rem 0.9rem;
    border-radius: var(--ph-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
    white-space: nowrap;
    user-select: none;
}

/* Default-Button (primary) */
.ph-btn,
.ph-btn--primary,
button:not(.ph-unstyled):not(.ph-btn--secondary):not(.ph-btn--ghost):not(.ph-btn--danger) {
    background: var(--ph-accent);
    color: var(--ph-fg-on-accent);
    box-shadow: var(--ph-shadow-sm);
}
.ph-btn:hover,
.ph-btn--primary:hover,
button:not(.ph-unstyled):not(.ph-btn--secondary):not(.ph-btn--ghost):not(.ph-btn--danger):hover {
    background: var(--ph-accent-hover);
}

.ph-btn--secondary {
    background: var(--ph-surface);
    color: var(--ph-fg);
    border-color: var(--ph-border-strong);
    box-shadow: var(--ph-shadow-sm);
}
.ph-btn--secondary:hover { background: var(--ph-surface-2); }

.ph-btn--ghost {
    background: transparent;
    color: var(--ph-fg-muted);
    box-shadow: none;
}
.ph-btn--ghost:hover { background: var(--ph-surface-2); color: var(--ph-fg); }

.ph-btn--danger {
    background: var(--ph-danger);
    color: #fff;
    box-shadow: var(--ph-shadow-sm);
}
.ph-btn--danger:hover { background: var(--ph-danger-hover); }

.ph-btn--sm { padding: 0.35rem 0.65rem; font-size: var(--ph-text-sm); }
.ph-btn--block { width: 100%; }

button:disabled,
.ph-btn:disabled,
.ph-btn.is-disabled {
    background: var(--ph-surface-3);
    color: var(--ph-fg-subtle);
    border-color: transparent;
    box-shadow: none;
    cursor: not-allowed;
}

/* ---------- Forms ---------- */
label { display: block; font-size: var(--ph-text-sm); font-weight: var(--ph-fw-medium); color: var(--ph-fg); }

input:not([type=checkbox]):not([type=radio]):not(.ph-unstyled),
select:not(.ph-unstyled),
textarea:not(.ph-unstyled),
.ph-input {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: var(--ph-text-base);
    color: var(--ph-fg);
    background: var(--ph-surface);
    border: 1px solid var(--ph-border-strong);
    border-radius: var(--ph-radius-md);
    padding: 0.5rem 0.7rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}
input:not([type=checkbox]):not([type=radio]):not(.ph-unstyled):focus,
select:not(.ph-unstyled):focus,
textarea:not(.ph-unstyled):focus,
.ph-input:focus {
    outline: none;
    border-color: var(--ph-accent);
    box-shadow: 0 0 0 3px var(--ph-accent-ring);
}
input::placeholder, textarea::placeholder { color: var(--ph-fg-subtle); }

.ph-field { margin-bottom: var(--ph-space-4); }
.ph-field > label { margin-bottom: var(--ph-space-2); }
.ph-field__hint { margin-top: var(--ph-space-1); font-size: var(--ph-text-xs); color: var(--ph-fg-muted); }

/* ---------- Cards ---------- */
.ph-card {
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-sm);
}
.ph-card__header {
    padding: var(--ph-space-4) var(--ph-space-5);
    border-bottom: 1px solid var(--ph-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ph-space-3);
}
.ph-card__title { font-size: var(--ph-text-md); font-weight: var(--ph-fw-semibold); margin: 0; }
.ph-card__body { padding: var(--ph-space-5); }
.ph-card__footer {
    padding: var(--ph-space-4) var(--ph-space-5);
    border-top: 1px solid var(--ph-border);
    background: var(--ph-surface-2);
    border-radius: 0 0 var(--ph-radius-lg) var(--ph-radius-lg);
}

/* ---------- Stat-Cards (Dashboard) ---------- */
.ph-stat {
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-sm);
    padding: var(--ph-space-5);
}
.ph-stat__label { font-size: var(--ph-text-sm); color: var(--ph-fg-muted); font-weight: var(--ph-fw-medium); margin: 0 0 var(--ph-space-2); }
.ph-stat__value { font-size: var(--ph-text-2xl); font-weight: var(--ph-fw-bold); letter-spacing: -0.02em; line-height: 1.1; }
.ph-stat__meta  { margin-top: var(--ph-space-2); font-size: var(--ph-text-xs); color: var(--ph-fg-subtle); }

/* ---------- Tables ---------- */
.ph-table { width: 100%; border-collapse: collapse; font-size: var(--ph-text-base); }
.ph-table thead th {
    text-align: left;
    font-size: var(--ph-text-xs);
    font-weight: var(--ph-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ph-fg-muted);
    padding: var(--ph-space-3) var(--ph-space-4);
    border-bottom: 1px solid var(--ph-border);
    background: var(--ph-surface-2);
    white-space: nowrap;
}
.ph-table tbody td {
    padding: var(--ph-space-3) var(--ph-space-4);
    border-bottom: 1px solid var(--ph-border);
    vertical-align: middle;
}
.ph-table tbody tr:last-child td { border-bottom: none; }
.ph-table tbody tr:hover { background: var(--ph-surface-2); }
.ph-table--card { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-lg); overflow: hidden; box-shadow: var(--ph-shadow-sm); }

/* ---------- Badges / Status ---------- */
.ph-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--ph-text-xs);
    font-weight: var(--ph-fw-medium);
    line-height: 1;
    padding: 0.3em 0.6em;
    border-radius: var(--ph-radius-full);
    background: var(--ph-surface-3);
    color: var(--ph-fg-muted);
    white-space: nowrap;
}
.ph-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ph-badge--success { background: var(--ph-success-subtle); color: var(--ph-success); }
.ph-badge--warning { background: var(--ph-warning-subtle); color: var(--ph-warning); }
.ph-badge--danger  { background: var(--ph-danger-subtle);  color: var(--ph-danger); }
.ph-badge--info    { background: var(--ph-info-subtle);    color: var(--ph-info); }
.ph-badge--accent  { background: var(--ph-accent-subtle);  color: var(--ph-accent); }
.ph-badge--neutral { background: var(--ph-surface-3);      color: var(--ph-fg-muted); }
.ph-badge--plain::before { display: none; }

/* ---------- Alerts ---------- */
.ph-alert,
.alert {
    display: flex;
    gap: var(--ph-space-3);
    padding: var(--ph-space-3) var(--ph-space-4);
    border-radius: var(--ph-radius-md);
    border: 1px solid var(--ph-border);
    background: var(--ph-surface-2);
    font-size: var(--ph-text-base);
    margin-bottom: var(--ph-space-4);
}
.ph-alert--info,    .alert-info    { background: var(--ph-info-subtle);    border-color: #b2ddff; color: #0b4a8f; }
.ph-alert--success                 { background: var(--ph-success-subtle); border-color: #abefc6; color: #085d3a; }
.ph-alert--warning, .alert-warning { background: var(--ph-warning-subtle); border-color: #fedf89; color: #93370d; }
.ph-alert--danger,  .alert-danger, .alert-error { background: var(--ph-danger-subtle); border-color: #fecdca; color: #912018; }

/* ---------- Page-Header ---------- */
.ph-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ph-space-4);
    margin-bottom: var(--ph-space-5);
    flex-wrap: wrap;
}
.ph-page-header__titles { min-width: 0; }
.ph-page-header h1 { margin: 0; }
.ph-page-header__subtitle { color: var(--ph-fg-muted); font-size: var(--ph-text-md); margin: var(--ph-space-1) 0 0; }
.ph-page-header__actions { display: flex; gap: var(--ph-space-2); flex-shrink: 0; }

/* ---------- Utilities ---------- */
.ph-stack    { display: flex; flex-direction: column; gap: var(--ph-space-4); }
.ph-row      { display: flex; gap: var(--ph-space-3); align-items: center; }
.ph-row--wrap{ flex-wrap: wrap; }
.ph-grid     { display: grid; gap: var(--ph-space-4); }
.ph-grid--cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ph-spacer   { flex: 1 1 auto; }
.ph-muted    { color: var(--ph-fg-muted); }
.ph-subtle   { color: var(--ph-fg-subtle); }
.ph-text-sm  { font-size: var(--ph-text-sm); }
.ph-text-xs  { font-size: var(--ph-text-xs); }
.ph-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-error, .phishin-error { color: var(--ph-danger); font-weight: var(--ph-fw-semibold); }

/* Inline-Hilfe (#74): dezenter „?"-Trigger + Popover. */
.ph-help { position: relative; display: inline-flex; vertical-align: middle; }
.ph-help__trigger {
    width: 1.15rem; height: 1.15rem; padding: 0; margin-left: 0.25rem;
    border: 1px solid var(--ph-border-strong); border-radius: var(--ph-radius-full);
    background: var(--ph-surface); color: var(--ph-fg-muted);
    font-size: var(--ph-text-xs); line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ph-help__trigger:hover,
.ph-help__trigger[aria-expanded="true"] { color: var(--ph-accent); border-color: var(--ph-accent); }
.ph-help__popover {
    position: absolute; top: 1.6rem; left: 0; z-index: 30;
    width: max-content; max-width: 22rem;
    background: var(--ph-surface); color: var(--ph-fg);
    border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md);
    box-shadow: var(--ph-shadow-lg);
    padding: 0.6rem 0.75rem; font-size: var(--ph-text-sm); font-weight: 400;
    text-align: left; white-space: normal;
}

.ph-help__more { display: inline-block; margin-top: 0.5rem; color: var(--ph-accent); font-weight: var(--ph-fw-semibold); }

/* Kontext-Hilfe-Einstieg in der Topbar (#81). */
.ph-topbar__help {
    width: 1.6rem; height: 1.6rem; border-radius: var(--ph-radius-full);
    border: 1px solid var(--ph-border); background: var(--ph-surface); color: var(--ph-fg-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--ph-text-sm); text-decoration: none;
}
.ph-topbar__help:hover { color: var(--ph-accent); border-color: var(--ph-accent); }

/* Hilfe-Center (#74): Sidebar (Suche + Themenliste) + Inhaltsbereich. */
.help-center { display: grid; grid-template-columns: 16rem 1fr; gap: 1.25rem; align-items: start; }
.help-center__search {
    width: 100%; box-sizing: border-box; padding: 0.5rem 0.7rem; margin-bottom: 0.75rem;
    border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md);
    background: var(--ph-surface); color: var(--ph-fg); font-size: var(--ph-text-sm);
}
.help-center__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.help-center__item {
    width: 100%; text-align: left; padding: 0.4rem 0.6rem; cursor: pointer;
    border: 0; background: transparent; color: var(--ph-fg);
    border-radius: var(--ph-radius-sm); font-size: var(--ph-text-sm);
}
.help-center__item:hover { background: var(--ph-surface-2); }
.help-center__item.active { background: var(--ph-accent-subtle); color: var(--ph-accent); font-weight: var(--ph-fw-semibold); }
.help-center__content {
    background: var(--ph-surface); border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-md); padding: 1rem 1.25rem; max-width: 48rem;
}
.help-center__content h1 { font-size: var(--ph-text-xl); margin-top: 0; }
.help-center__content h2 { font-size: var(--ph-text-lg); margin-top: 1.25rem; }
.help-center__content code { background: var(--ph-surface-2); padding: 0.05rem 0.3rem; border-radius: var(--ph-radius-sm); }
.help-center__langs { display: flex; gap: 0.25rem; margin-bottom: 0.5rem; }
.help-center__lang {
    flex: 1; padding: 0.3rem 0.4rem; cursor: pointer; font-size: var(--ph-text-xs);
    border: 1px solid var(--ph-border); background: var(--ph-surface);
    color: var(--ph-fg-muted); border-radius: var(--ph-radius-sm);
}
.help-center__lang.active { background: var(--ph-accent-subtle); color: var(--ph-accent); border-color: var(--ph-accent); font-weight: var(--ph-fw-semibold); }

/* ---------- App-Shell ---------- */
.ph-shell {
    display: grid;
    grid-template-columns: var(--ph-sidebar-width) 1fr;
    grid-template-rows: var(--ph-topbar-height) 1fr;
    grid-template-areas: "sidebar topbar" "sidebar main";
    min-height: 100vh;
}

.ph-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: var(--ph-space-3);
    padding: 0 var(--ph-space-5);
    background: var(--ph-surface);
    border-bottom: 1px solid var(--ph-border);
    position: sticky;
    top: 0;
    z-index: 20;
}
.ph-topbar__title { font-size: var(--ph-text-md); font-weight: var(--ph-fw-semibold); color: var(--ph-fg); }

.ph-sidebar {
    grid-area: sidebar;
    background: var(--ph-surface);
    border-right: 1px solid var(--ph-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.ph-brand {
    display: flex;
    align-items: center;
    gap: var(--ph-space-2);
    height: var(--ph-topbar-height);
    padding: 0 var(--ph-space-5);
    border-bottom: 1px solid var(--ph-border);
    flex-shrink: 0;
}
.ph-brand__mark {
    width: 28px; height: 28px;
    border-radius: var(--ph-radius-md);
    background: linear-gradient(135deg, var(--ph-accent), #7c73ff);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: var(--ph-fw-bold); font-size: var(--ph-text-md);
    flex-shrink: 0;
}
.ph-brand__name { font-weight: var(--ph-fw-semibold); font-size: var(--ph-text-md); letter-spacing: -0.01em; }
.ph-brand__name span { color: var(--ph-fg-subtle); font-weight: var(--ph-fw-regular); }

/* Tenant-Branding-Logo-Slot (Fallback "Phishin") */
.phishin-logo-slot { display: inline-flex; align-items: center; }
.phishin-logo-slot img, .phishin-logo-slot svg { max-height: 28px; width: auto; }

.ph-nav { padding: var(--ph-space-4) var(--ph-space-3); flex: 1; }
.ph-nav__group + .ph-nav__group { margin-top: var(--ph-space-5); }
.ph-nav__group-label {
    font-size: var(--ph-text-xs);
    font-weight: var(--ph-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ph-fg-subtle);
    padding: 0 var(--ph-space-3);
    margin-bottom: var(--ph-space-2);
}
.ph-nav__link {
    display: flex;
    align-items: center;
    gap: var(--ph-space-3);
    padding: 0.5rem var(--ph-space-3);
    border-radius: var(--ph-radius-md);
    color: var(--ph-fg-muted);
    font-weight: var(--ph-fw-medium);
    font-size: var(--ph-text-base);
    text-decoration: none;
    transition: background-color .1s ease, color .1s ease;
}
.ph-nav__link:hover { background: var(--ph-surface-2); color: var(--ph-fg); text-decoration: none; }
.ph-nav__link.active { background: var(--ph-accent-subtle); color: var(--ph-accent); font-weight: var(--ph-fw-semibold); }
.ph-nav__icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }

.ph-content { grid-area: main; padding: var(--ph-space-6); width: 100%; }
.ph-content__inner { max-width: var(--ph-content-max); margin: 0 auto; }

/* User-Menu / Topbar-Chip */
.ph-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ph-space-2);
    padding: 0.3rem 0.6rem;
    border-radius: var(--ph-radius-full);
    background: var(--ph-surface-2);
    border: 1px solid var(--ph-border);
    font-size: var(--ph-text-sm);
    color: var(--ph-fg);
}
.ph-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--ph-accent-subtle); color: var(--ph-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: var(--ph-fw-semibold); font-size: var(--ph-text-xs);
    flex-shrink: 0;
}

/* ---------- Demo-Banner (rendert oben im Content) ---------- */
.phishin-demo-banner {
    display: flex;
    gap: var(--ph-space-2);
    background: var(--ph-warning-subtle);
    color: #93370d;
    border: 1px solid #fedf89;
    border-radius: var(--ph-radius-md);
    padding: var(--ph-space-3) var(--ph-space-4);
    font-size: var(--ph-text-sm);
    margin-bottom: var(--ph-space-5);
}

/* ---------- Login (EmptyLayout) ---------- */
.empty-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ph-space-5);
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--ph-accent-subtle), transparent 60%),
        var(--ph-bg);
}
.login-card { width: 100%; max-width: 400px; box-shadow: var(--ph-shadow-lg); }
.login-card__body { padding: var(--ph-space-6); }
.login-brand { display: flex; align-items: center; gap: var(--ph-space-2); margin-bottom: var(--ph-space-5); }
.login-title { margin: 0 0 var(--ph-space-1); font-size: var(--ph-text-xl); }
.login-subtitle { margin: 0 0 var(--ph-space-5); font-size: var(--ph-text-sm); }
.login-divider { display: flex; align-items: center; gap: var(--ph-space-3); margin: var(--ph-space-5) 0; color: var(--ph-fg-subtle); font-size: var(--ph-text-xs); }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--ph-border); }
.sso-buttons { display: flex; flex-direction: column; gap: var(--ph-space-2); }
.sso-buttons form { margin: 0; }

/* ---------- Message-Pages (Zugriff verweigert / Nicht gefunden / Fehler) ---------- */
.ph-message-page {
    max-width: 32rem;
    margin: var(--ph-space-7) auto;
    padding: var(--ph-space-6);
    text-align: center;
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-sm);
}
.ph-message-page__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--ph-space-4);
    border-radius: 999px;
    background: var(--ph-accent-subtle);
    color: var(--ph-accent);
}
.ph-message-page__icon svg { width: 1.6rem; height: 1.6rem; }
.ph-message-page--error .ph-message-page__icon { background: var(--ph-warning-subtle); color: #93370d; }
.ph-message-page h1 { font-size: var(--ph-text-xl); margin: 0 0 var(--ph-space-2); }
.ph-message-page p { color: var(--ph-fg-muted); margin: 0 0 var(--ph-space-5); }
.ph-message-page__meta { font-size: var(--ph-text-sm); }
.ph-message-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ph-space-2);
    justify-content: center;
}

/* ---------- Dashboard ---------- */
.dash-section-title { font-size: var(--ph-text-md); font-weight: var(--ph-fw-semibold); margin: var(--ph-space-6) 0 var(--ph-space-3); }
.dash-section-title:first-of-type { margin-top: var(--ph-space-2); }

.dash-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ph-space-3);
    padding: var(--ph-space-5);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.dash-action:hover { text-decoration: none; border-color: var(--ph-accent); box-shadow: var(--ph-shadow-md); transform: translateY(-1px); }
.dash-action__title { font-weight: var(--ph-fw-semibold); color: var(--ph-fg); margin-bottom: var(--ph-space-1); }
.dash-action__desc { font-size: var(--ph-text-sm); }
.dash-action__arrow { color: var(--ph-accent); font-size: var(--ph-text-lg); flex-shrink: 0; }

.dash-area {
    display: flex;
    flex-direction: column;
    gap: var(--ph-space-1);
    padding: var(--ph-space-4) var(--ph-space-5);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.dash-area:hover { text-decoration: none; border-color: var(--ph-border-strong); box-shadow: var(--ph-shadow-md); }
.dash-area__title { font-weight: var(--ph-fw-semibold); color: var(--ph-fg); }

/* ---------- Onboarding-Wizard ---------- */
.onb-steps ol { display: flex; flex-wrap: wrap; gap: var(--ph-space-2); list-style: none; padding: 0; margin: 0 0 var(--ph-space-5); }
.onb-steps li { flex: 1 1 8rem; }
.onb-step-btn {
    display: flex; align-items: center; gap: var(--ph-space-2); width: 100%;
    padding: var(--ph-space-2) var(--ph-space-3);
    border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md);
    background: var(--ph-surface); color: var(--ph-fg-muted); cursor: pointer; text-align: left;
}
.onb-steps li.active .onb-step-btn { border-color: var(--ph-accent); color: var(--ph-fg); box-shadow: var(--ph-shadow-sm); }
.onb-steps li.done .onb-step-btn { color: var(--ph-fg); }
.onb-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 999px; flex-shrink: 0;
    background: var(--ph-surface-2); color: var(--ph-fg-muted); font-size: var(--ph-text-sm); font-weight: var(--ph-fw-semibold);
}
.onb-steps li.active .onb-step-num { background: var(--ph-accent); color: var(--ph-fg-on-accent); }
.onb-steps li.done .onb-step-num { background: var(--ph-success, #12b76a); color: #fff; }
.onb-step-label { font-size: var(--ph-text-sm); font-weight: var(--ph-fw-medium); }
.onb-panel { padding: var(--ph-space-5); margin-bottom: var(--ph-space-4); }
.onb-section h2 { margin-top: 0; font-size: var(--ph-text-lg); }
.onb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--ph-space-3); margin: var(--ph-space-4) 0; }
.onb-grid label { display: flex; flex-direction: column; gap: var(--ph-space-1); font-size: var(--ph-text-sm); font-weight: var(--ph-fw-medium); }
.onb-grid .onb-wide { grid-column: 1 / -1; }
.onb-check { display: flex; flex-direction: row !important; align-items: center; gap: var(--ph-space-2); }
.onb-actions { display: flex; flex-wrap: wrap; gap: var(--ph-space-2); margin-top: var(--ph-space-2); }
.onb-nav { display: flex; justify-content: space-between; gap: var(--ph-space-2); }
.onb-sep { border: none; border-top: 1px solid var(--ph-border); margin: var(--ph-space-5) 0; }
.onb-status { font-size: var(--ph-text-sm); font-weight: var(--ph-fw-medium); padding: 0.2rem 0.6rem; border-radius: var(--ph-radius-md); }
.onb-status--open { background: var(--ph-warning-subtle); color: #93370d; }
.onb-status--done { background: var(--ph-accent-subtle); color: var(--ph-accent); }
.onb-feedback { margin: var(--ph-space-3) 0 0; padding: var(--ph-space-2) var(--ph-space-3); border-radius: var(--ph-radius-md); font-size: var(--ph-text-sm); }
.onb-feedback--ok { background: var(--ph-accent-subtle); color: var(--ph-accent); }
.onb-feedback--error { background: var(--ph-danger-subtle, #fee4e2); color: var(--ph-danger, #b42318); }
.onb-feedback--info { background: var(--ph-surface-2); color: var(--ph-fg-muted); }

/* ---------- 2FA-QR-Code (Enrollment) ---------- */
.tfa-qr {
    display: inline-block;
    margin: var(--ph-space-3) 0;
    padding: var(--ph-space-3);
    background: #ffffff;
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-md);
    line-height: 0;
}
.tfa-qr svg { display: block; width: 200px; height: 200px; }

/* ---------- Auswahl-Liste + Content-Editor (Vorlagen/Landing-Pages) ---------- */
.ph-select-list { list-style: none; padding: 0; margin: 0 0 var(--ph-space-4); display: flex; flex-direction: column; gap: var(--ph-space-1); }
.ph-select-list__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ph-space-3);
    width: 100%; text-align: left; cursor: pointer;
    padding: var(--ph-space-3) var(--ph-space-4);
    background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md);
}
.ph-select-list__item:hover { border-color: var(--ph-border-strong); background: var(--ph-surface-2); }
.ph-select-list li.is-selected .ph-select-list__item { border-color: var(--ph-accent); box-shadow: 0 0 0 1px var(--ph-accent); }

.content-editor { padding: var(--ph-space-5); margin-bottom: var(--ph-space-5); }
.content-editor .locale-section {
    border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md);
    padding: var(--ph-space-4); margin: var(--ph-space-3) 0;
    display: flex; flex-direction: column; gap: var(--ph-space-2);
}
.content-editor .locale-section legend { font-weight: var(--ph-fw-semibold); padding: 0 var(--ph-space-2); }
.content-editor .locale-section label { display: flex; flex-direction: column; gap: var(--ph-space-1); font-size: var(--ph-text-sm); font-weight: var(--ph-fw-medium); }
.content-editor .locale-section textarea { font-family: var(--ph-font-mono); }
.content-editor__actions { margin-top: var(--ph-space-3); }

/* =============================================================================
   Legacy-Kompatibilitaet — die 35 Bestandsseiten nutzen .phishin-*-Klassen, die
   im alten Theme ungestylt waren. Wir mappen sie auf das neue Design-System,
   damit alle Seiten ohne Markup-Aenderung modernisiert werden.
   ========================================================================== */

/* Buttons (bare <button> wird bereits global gestylt; .phishin-button deckt <a> ab) */
a.phishin-button {
    display: inline-flex; align-items: center; gap: var(--ph-space-2);
    background: var(--ph-accent); color: var(--ph-fg-on-accent);
    font-weight: var(--ph-fw-medium); font-size: var(--ph-text-base);
    padding: 0.5rem 0.9rem; border-radius: var(--ph-radius-md);
    text-decoration: none; box-shadow: var(--ph-shadow-sm);
}
a.phishin-button:hover { background: var(--ph-accent-hover); text-decoration: none; }

/* Danger-Modifier auf Buttons */
button.phishin-danger, a.phishin-button.phishin-danger { background: var(--ph-danger); color: #fff; }
button.phishin-danger:hover, a.phishin-button.phishin-danger:hover { background: var(--ph-danger-hover); }

/* Button-as-Link */
button.phishin-button-link {
    background: none; border: none; box-shadow: none; padding: 0;
    color: var(--ph-accent); font-weight: var(--ph-fw-medium); cursor: pointer;
    text-decoration: none;
}
button.phishin-button-link:hover { background: none; color: var(--ph-accent-hover); text-decoration: underline; }

/* Cards (oft auf <fieldset>/<section>) */
.phishin-card {
    display: block;
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-sm);
    padding: var(--ph-space-5);
    margin: 0 0 var(--ph-space-5);
    min-inline-size: 0;
}
.phishin-card > legend {
    font-weight: var(--ph-fw-semibold); font-size: var(--ph-text-md);
    padding: 0 var(--ph-space-2); margin-left: calc(-1 * var(--ph-space-2));
}
.phishin-card.phishin-warning { background: var(--ph-warning-subtle); border-color: #fedf89; }

/* Toolbar */
.phishin-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--ph-space-2);
    margin-bottom: var(--ph-space-4);
}

/* Tables */
.phishin-table {
    width: 100%; border-collapse: collapse; font-size: var(--ph-text-base);
    background: var(--ph-surface); border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-lg); overflow: hidden; box-shadow: var(--ph-shadow-sm);
}
.phishin-table thead th {
    text-align: left; font-size: var(--ph-text-xs); font-weight: var(--ph-fw-semibold);
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--ph-fg-muted);
    padding: var(--ph-space-3) var(--ph-space-4); background: var(--ph-surface-2);
    border-bottom: 1px solid var(--ph-border); white-space: nowrap;
}
.phishin-table tbody td { padding: var(--ph-space-3) var(--ph-space-4); border-bottom: 1px solid var(--ph-border); }
.phishin-table tbody tr:last-child td { border-bottom: none; }
.phishin-table tbody tr:hover { background: var(--ph-surface-2); }
.phishin-row-bot { background: var(--ph-warning-subtle); }
.phishin-row-bot:hover { background: #fef0c7 !important; }

/* Pills / Badges */
.phishin-pill {
    display: inline-flex; align-items: center; font-size: var(--ph-text-xs);
    font-weight: var(--ph-fw-medium); padding: 0.25em 0.6em; border-radius: var(--ph-radius-full);
    background: var(--ph-surface-3); color: var(--ph-fg-muted);
}

/* Inline-Tint-Bloecke */
.phishin-info, .phishin-share-banner {
    background: var(--ph-info-subtle); border: 1px solid #b2ddff; color: #0b4a8f;
    border-radius: var(--ph-radius-md); padding: var(--ph-space-3) var(--ph-space-4);
    margin-bottom: var(--ph-space-4);
}
p.phishin-warning {
    background: var(--ph-warning-subtle); border: 1px solid #fedf89; color: #93370d;
    border-radius: var(--ph-radius-md); padding: var(--ph-space-3) var(--ph-space-4);
    margin-bottom: var(--ph-space-4);
}
p.phishin-danger, .phishin-danger:not(button):not(a) { color: var(--ph-danger); font-weight: var(--ph-fw-medium); }

/* Feld-Zeile: Eingabe-Control + zugehoeriger Button auf einer Linie (z.B. Plan-Datum + Planen,
   Freigabe-Notiz). Haelt das Control bei seiner Aktion statt zwischen fremden Buttons. */
.phishin-field-row {
    display: flex;
    gap: var(--ph-space-3);
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: var(--ph-space-3);
}
.phishin-field-row > label { display: flex; flex-direction: column; gap: var(--ph-space-1); }

/* Hint / List */
.phishin-hint { color: var(--ph-fg-muted); font-size: var(--ph-text-sm); }
.phishin-list { margin: 0; padding-left: var(--ph-space-5); }
.phishin-list li { margin-bottom: var(--ph-space-1); }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
    .ph-shell {
        grid-template-columns: 1fr;
        grid-template-rows: var(--ph-topbar-height) auto 1fr;
        grid-template-areas: "topbar" "sidebar" "main";
    }
    .ph-sidebar { height: auto; position: static; border-right: none; border-bottom: 1px solid var(--ph-border); }
    .ph-brand { display: none; }
    .ph-nav { display: flex; flex-wrap: wrap; gap: var(--ph-space-1); padding: var(--ph-space-3); }
    .ph-nav__group + .ph-nav__group { margin-top: 0; }
    .ph-nav__group-label { display: none; }
    .ph-content { padding: var(--ph-space-4); }
}