/* ==========================================================
   ADMIN - Basis-Layout & globale Komponenten

   Diese Datei wird von JEDER Admin-Seite geladen (inkl. Login) und ist
   die Heimat der Admin-Design-Tokens. Sie wird im Frontend NICHT geladen –
   Änderungen hier wirken sich ausschließlich auf den Adminbereich aus.
   ========================================================== */

/* ── Design-Tokens ────────────────────────────────────────────────────────
   Ein System statt Streuwerten: 3 Radien, 2 Schatten, 6 Schriftgrößen,
   5 Abstände und EINE Akzentfarbe. Die Sidebar-Tokens (--admin-sidebar-*,
   --admin-text-*) liegen weiterhin in admin-navigation.css; die Namen hier
   sind bewusst kollisionsfrei (--admin-ink-*, --admin-line-*). */
:root {
    /* Akzent – einheitlich (löst #667eea / #3b82f6 / #2563eb ab) */
    --admin-accent:        #3b82f6;
    --admin-accent-strong: #2563eb;   /* Hover / aktiv */
    --admin-accent-soft:   #eff6ff;   /* getönte Hover-Flächen */
    --admin-ring:          rgba(59,130,246,.18);

    /* Flächen */
    --admin-bg:            #f1f5f9;
    --admin-surface:       #ffffff;
    --admin-surface-alt:   #f8fafc;

    /* Linien */
    --admin-line:          #e2e8f0;
    --admin-line-soft:     #f1f5f9;
    --admin-line-strong:   #cbd5e1;

    /* Text */
    --admin-ink:           #1e293b;
    --admin-ink-head:      #0f172a;
    --admin-ink-muted:     #64748b;
    --admin-ink-soft:      #94a3b8;

    /* Radien – 3 Stufen (vorher 12 verschiedene) */
    --admin-r-sm:          4px;
    --admin-r:             6px;
    --admin-r-lg:          8px;
    --admin-r-pill:        999px;

    /* Schatten – 2 Stufen (vorher 20 verschiedene) */
    --admin-sh-sm:         0 1px 2px rgba(15,23,42,.06);
    --admin-sh:            0 1px 3px rgba(15,23,42,.08);

    /* Schriftgrößen – 6 Stufen (vorher 22) */
    --admin-fs-xs:         .75rem;
    --admin-fs-sm:         .8125rem;
    --admin-fs-base:       .875rem;
    --admin-fs-md:         1rem;
    --admin-fs-lg:         1.25rem;
    --admin-fs-xl:         1.5rem;

    /* Abstände – 5 Stufen (vorher 42 verschiedene padding-Werte) */
    --admin-sp-1:          .25rem;
    --admin-sp-2:          .5rem;
    --admin-sp-3:          .75rem;
    --admin-sp-4:          1rem;
    --admin-sp-5:          1.25rem;
}

/* ── Layout ───────────────────────────────────────────────────────────── */
/* KEIN Flexbox hier: Die Sidebar ist position:fixed (aus dem Fluss genommen)
   und der Content wird per margin-left (admin-navigation.css) daneben gesetzt.
   Ein zusätzliches display:flex + flex:1 führte zu Überlauf/Layout-Sprung
   beim Ein-/Ausklappen, weil ein Flex-Child standardmäßig nicht unter seine
   Inhaltsbreite schrumpft. */
.admin-wrapper {
    display: block;
    min-height: 100vh;
    background: var(--admin-bg);
}

/* ── Content Area ─────────────────────────────────────────────────────── */
.admin-content-area {
    display: flex;          /* nur für die INTERNE vertikale Anordnung (Topbar + Seiteninhalt) */
    flex-direction: column;
    min-width: 0;           /* verhindert Überlauf durch breite Inhalte (z. B. Tabellen) */
    min-height: 100vh;
    background: var(--admin-bg);
    /* margin-left is handled by admin-navigation.css */
}

/* ── Top Bar ──────────────────────────────────────────────────────────── */
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--admin-surface);
    border-bottom: 1px solid var(--admin-line);
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 var(--admin-sp-5);
    gap: var(--admin-sp-4);
    box-shadow: var(--admin-sh-sm);
}

.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--admin-sp-3);
    flex: 1;
}

.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--admin-sp-4);
}

.topbar-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: #475569;
    padding: var(--admin-sp-1);
    border-radius: var(--admin-r);
    line-height: 1;
    font-size: var(--admin-fs-lg);
    transition: background .15s;
}
.topbar-toggle:hover { background: var(--admin-line-soft); color: var(--admin-ink); }

.topbar-title {
    font-size: var(--admin-fs-base);
    font-weight: 600;
    color: var(--admin-ink);
}

.topbar-logout {
    display: inline-flex;
    align-items: center;
    gap: var(--admin-sp-1);
    padding: var(--admin-sp-1) var(--admin-sp-3);
    background: var(--admin-surface-alt);
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-r);
    color: var(--admin-ink-muted);
    text-decoration: none;
    font-size: var(--admin-fs-base);
    font-weight: 500;
    transition: all .15s;
}
.topbar-logout:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

/* ── Page Content ─────────────────────────────────────────────────────── */
.admin-page-content {
    padding: var(--admin-sp-5);
    flex: 1;
}

/* ── Stats Grid ───────────────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--admin-sp-4);
    margin-bottom: var(--admin-sp-5);
}

.stat-card {
    background: var(--admin-surface);
    padding: var(--admin-sp-5);
    border-radius: var(--admin-r-lg);
    box-shadow: var(--admin-sh);
    border: 1px solid var(--admin-line-soft);
    display: flex;
    gap: var(--admin-sp-4);
    align-items: flex-start;
    transition: box-shadow .15s, border-color .15s;
}
.stat-card:hover { box-shadow: var(--admin-sh); border-color: var(--admin-line); }

.stat-card h3 {
    color: var(--admin-ink-muted);
    font-size: var(--admin-fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 var(--admin-sp-1);
}

.stat-card .number {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--admin-ink-head);
    line-height: 1;
}

/* ── Content Section ──────────────────────────────────────────────────── */
.content-section {
    background: var(--admin-surface);
    padding: var(--admin-sp-5);
    border-radius: var(--admin-r-lg);
    box-shadow: var(--admin-sh);
    border: 1px solid var(--admin-line-soft);
    margin-bottom: var(--admin-sp-4);
}

/* ── Admin Header Strip ───────────────────────────────────────────────── */
.admin-header {
    background: var(--admin-surface);
    padding: var(--admin-sp-5);
    border-radius: var(--admin-r-lg);
    box-shadow: var(--admin-sh);
    border: 1px solid var(--admin-line-soft);
    margin-bottom: var(--admin-sp-4);
}
.admin-header h1 { margin: 0; font-size: var(--admin-fs-xl); color: var(--admin-ink-head); font-weight: 700; }
.admin-header p  { margin: var(--admin-sp-1) 0 0; color: var(--admin-ink-muted); font-size: var(--admin-fs-base); }

/* ── Section Header / Title ───────────────────────────────────────────── */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--admin-sp-4);
}
.section-title {
    font-size: var(--admin-fs-base);
    font-weight: 600;
    color: var(--admin-ink);
    margin: 0 0 var(--admin-sp-4);
}

/* ── Tables ───────────────────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: var(--admin-sp-2) var(--admin-sp-4);
    text-align: left;
    border-bottom: 1px solid var(--admin-line-soft);
}

th {
    background: var(--admin-surface-alt);
    font-weight: 600;
    color: var(--admin-ink-muted);
    font-size: var(--admin-fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid var(--admin-line);
}

.admin-table,
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--admin-fs-base);
}

.admin-table th,
.data-table th {
    background: var(--admin-surface-alt);
    padding: var(--admin-sp-2) var(--admin-sp-4);
    text-align: left;
    font-size: var(--admin-fs-xs);
    font-weight: 600;
    color: var(--admin-ink-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid var(--admin-line);
    white-space: nowrap;
}

.admin-table td,
.data-table td {
    padding: var(--admin-sp-3) var(--admin-sp-4);
    border-bottom: 1px solid var(--admin-line-soft);
    vertical-align: middle;
    color: #374151;
}

.admin-table tr:last-child td,
.data-table tr:last-child td { border-bottom: none; }

.admin-table tbody tr:hover td,
.data-table tbody tr:hover td { background: var(--admin-surface-alt); }

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--admin-sp-1);
    padding: .15rem var(--admin-sp-2);
    border-radius: var(--admin-r-pill);
    font-size: var(--admin-fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.badge-success   { background: #dcfce7; color: #15803d; }
.badge-warning   { background: #fef9c3; color: #a16207; }
.badge-secondary { background: var(--admin-line-soft); color: #475569; }
.badge-info      { background: #dbeafe; color: #1d4ed8; }
.badge-green     { background: #dcfce7; color: #15803d; }
.badge-red       { background: #fee2e2; color: #b91c1c; }
.badge-purple    { background: #f3e8ff; color: #7c3aed; }
.badge-gray      { background: var(--admin-line-soft); color: #475569; }
.badge-danger    { background: #fee2e2; color: #b91c1c; }

/* ── Buttons (Admin-Overrides) ────────────────────────────────────────────
   Das generische .btn-System liegt in styles-enhanced.css (Frontend UND
   Admin). Hier ausschließlich die Admin-Anpassung: einheitlicher Akzent und
   etwas kompaktere Maße. Da diese Datei nur im Admin geladen wird, bleibt das
   Frontend davon unberührt. .btn-outline/.btn-lg sind hier die EINZIGE
   Admin-Definition (früher zusätzlich abweichend in admin-content.css). */
.btn {
    padding: var(--admin-sp-1) var(--admin-sp-3);
    border-radius: var(--admin-r);
    font-size: var(--admin-fs-base);
}

.btn-primary       { background: var(--admin-accent);        border-color: var(--admin-accent); }
.btn-primary:hover { background: var(--admin-accent-strong); border-color: var(--admin-accent-strong); }

.btn-outline {
    background: var(--admin-surface);
    border: 1px solid var(--admin-line);
    color: var(--admin-ink-muted);
}
.btn-outline:hover {
    border-color: var(--admin-accent);
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
}

.btn-sm { padding: .15rem var(--admin-sp-2);   font-size: var(--admin-fs-sm); border-radius: var(--admin-r-sm); }
.btn-lg { padding: var(--admin-sp-2) var(--admin-sp-5); font-size: var(--admin-fs-md); border-radius: var(--admin-r-lg); }

/* ── Action Groups ────────────────────────────────────────────────────── */
.action-buttons,
.action-group {
    display: flex;
    gap: var(--admin-sp-1);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Form Controls ────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--admin-sp-4); }

.form-group label {
    display: block;
    margin-bottom: var(--admin-sp-2);
    font-weight: 500;
    font-size: var(--admin-fs-base);
    color: var(--admin-ink);
}

.form-control {
    width: 100%;
    padding: var(--admin-sp-2) var(--admin-sp-3);
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-r);
    font-size: var(--admin-fs-base);
    color: var(--admin-ink);
    background: var(--admin-surface);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.form-control:focus {
    outline: none;
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 3px var(--admin-ring);
}
.form-control:hover:not(:focus) { border-color: var(--admin-line-strong); }

textarea.form-control { min-height: 110px; resize: vertical; }
select.form-control   { cursor: pointer; }

/* ── Alerts ───────────────────────────────────────────────────────────── */
.alert {
    padding: var(--admin-sp-3) var(--admin-sp-4);
    border-radius: var(--admin-r);
    margin-bottom: var(--admin-sp-4);
    font-size: var(--admin-fs-base);
    line-height: 1.5;
}

.alert-success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-left: 3px solid #16a34a;
}

.alert-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-left: 3px solid #dc2626;
}

.alert-info {
    background: var(--admin-accent-soft);
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-left: 3px solid var(--admin-accent);
}

/* ── Category Tag ─────────────────────────────────────────────────────── */
.category-tag {
    display: inline-block;
    padding: .15rem var(--admin-sp-2);
    background: var(--admin-line-soft);
    color: #475569;
    border-radius: var(--admin-r-sm);
    font-size: var(--admin-fs-sm);
    font-weight: 500;
}

/* ── Utility ──────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--admin-ink-soft); }

/* ── Login Page ───────────────────────────────────────────────────────── */
.login-container {
    max-width: 400px;
    margin: 5rem auto;
    padding: 2rem;
    background: var(--admin-surface);
    border-radius: var(--admin-r-lg);
    box-shadow: var(--admin-sh);
    border: 1px solid var(--admin-line);
}
.login-container h2 {
    text-align: center;
    font-size: var(--admin-fs-xl);
    color: var(--admin-ink-head);
    margin-bottom: var(--admin-sp-5);
    font-weight: 700;
}

.login-form input {
    width: 100%;
    padding: var(--admin-sp-2) var(--admin-sp-3);
    margin-bottom: var(--admin-sp-4);
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-r);
    font-size: var(--admin-fs-md);
    color: var(--admin-ink);
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.login-form input:focus {
    outline: none;
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 3px var(--admin-ring);
}

.login-form button {
    width: 100%;
    padding: var(--admin-sp-2);
    background: var(--admin-accent);
    color: white;
    border: none;
    border-radius: var(--admin-r);
    font-size: var(--admin-fs-md);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.login-form button:hover { background: var(--admin-accent-strong); }

.error {
    color: #b91c1c;
    margin-bottom: var(--admin-sp-4);
    padding: var(--admin-sp-2) var(--admin-sp-4);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--admin-r);
    font-size: var(--admin-fs-base);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .admin-topbar { padding: 0 var(--admin-sp-4); }
    .topbar-toggle { display: flex; }
    .admin-page-content { padding: var(--admin-sp-4); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--admin-sp-3); }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
}