/* ===== ADMINER – gleicher Look wie style.css ===== */

/* ── RESET & BASE ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #0f0f13;
    --surface: #1a1a24;
    --surface-hover: #22222f;
    --border: rgba(255,255,255,0.07);
    --text: #e8e8f0;
    --text-muted: #8888a8;
    --radius: 16px;
    --transition: 0.25s ease;
    --accent: #6366f1;
    --wrap-max: 900px;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem 4rem;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ── BACKGROUND ───────────────────────────────── */
@keyframes bgShift {
    0%   { opacity:1; transform:scale(1)    translate(0,0); }
    33%  { opacity:.85; transform:scale(1.15) translate(2%,3%); }
    66%  { opacity:.9;  transform:scale(1.08) translate(-3%,-2%); }
    100% { opacity:1; transform:scale(1)    translate(0,0); }
}

.background-blur {
    position:fixed; inset:-25%; z-index:-1; pointer-events:none;
    background:
        radial-gradient(ellipse 60% 40% at 20% 10%, rgba(99,102,241,.18), transparent),
        radial-gradient(ellipse 50% 40% at 80% 80%, rgba(14,165,233,.13), transparent),
        radial-gradient(ellipse 40% 30% at 60% 40%, rgba(168,85,247,.08), transparent);
    animation: bgShift 12s ease-in-out infinite;
}

#particle-canvas {
    position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
}

/* ── ORBS ─────────────────────────────────────── */
.orb {
    position:fixed; border-radius:50%; pointer-events:none; z-index:-1;
    filter:blur(70px); opacity:0;
    animation:orbFloat var(--dur,18s) ease-in-out infinite var(--delay,0s);
}
.orb-1 { width:320px;height:320px; background:radial-gradient(circle,rgba(99,102,241,.25),transparent 70%); top:-80px;left:-80px;  --dur:20s;--delay:0s; }
.orb-2 { width:260px;height:260px; background:radial-gradient(circle,rgba(14,165,233,.2), transparent 70%); bottom:5%;right:-60px; --dur:17s;--delay:-6s; }
.orb-3 { width:200px;height:200px; background:radial-gradient(circle,rgba(168,85,247,.18),transparent 70%); top:45%;left:-40px;  --dur:23s;--delay:-11s;}
.orb-4 { width:180px;height:180px; background:radial-gradient(circle,rgba(236,72,153,.15), transparent 70%); top:20%;right:-30px; --dur:19s;--delay:-4s; }
@keyframes orbFloat {
    0%  {opacity:0;  transform:translate(0,0)       scale(1); }
    10% {opacity:1;}
    50% {opacity:1;  transform:translate(20px,25px) scale(1.08); }
    90% {opacity:1;}
    100%{opacity:0;  transform:translate(0,0)       scale(1); }
}

/* Grid lines */
body::before {
    content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* ── LAYOUT ───────────────────────────────────── */
.wrap {
    width: 100%;
    max-width: var(--wrap-max);
}

/* Full width nur für die Tabellen-Ansicht */
.wrap.wrap--wide {
    max-width: 1400px;
}

.wrap.wrap--full {
    max-width: 100%;
}

/* ── ANIMATIONS ───────────────────────────────── */
@keyframes fadeDown {
    from { opacity:0; transform:translateY(-20px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes shimmerText {
    from { background-position:0% center; }
    to   { background-position:200% center; }
}

/* ── HEADER ───────────────────────────────────── */
.admin-header {
    text-align:center;
    margin-bottom: 2.5rem;
    margin-top: 1.5rem;
    animation: fadeDown .7s ease both;
}

@keyframes avatarPulse {
    0%,100% { box-shadow:0 0 0 4px rgba(99,102,241,.2),0 0 20px rgba(99,102,241,.1); }
    50%     { box-shadow:0 0 0 8px rgba(99,102,241,.12),0 0 40px rgba(99,102,241,.2); }
}

.admin-avatar {
    width:72px; height:72px; border-radius:50%;
    background:linear-gradient(135deg,#6366f1,#0ea5e9);
    display:flex; align-items:center; justify-content:center;
    font-size:1.6rem; font-weight:700;
    margin:0 auto 1rem;
    animation:avatarPulse 3s ease-in-out infinite;
    transition:transform .3s ease;
    cursor:default; user-select:none;
}
.admin-avatar:hover { transform:scale(1.08) rotate(6deg); }

.admin-title {
    font-size: clamp(1.5rem,3.5vw,2.2rem);
    font-weight:700;
    background:linear-gradient(90deg,#e8e8f0 0%,#6366f1 40%,#0ea5e9 60%,#e8e8f0 100%);
    background-size:200% auto;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    letter-spacing:-.5px;
    animation:shimmerText 5s linear infinite;
}

.admin-subtitle {
    color:var(--text-muted);
    margin-top:.4rem;
    font-size:.95rem;
    animation: fadeDown .9s ease .3s both;
}

/* ── PILL / TAG ───────────────────────────────── */
.pill {
    display:inline-block;
    font-size:.72rem; font-weight:600;
    text-transform:uppercase; letter-spacing:1px;
    color:var(--text-muted);
    background:rgba(255,255,255,.06);
    border:1px solid var(--border);
    padding:3px 10px; border-radius:999px;
    vertical-align:middle; margin-left:8px;
}

/* ── CARD ─────────────────────────────────────── */
.card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.4rem 1.6rem;
    position:relative;
    overflow:hidden;
    animation: fadeUp .5s ease both;
}
.card::before {
    content:''; position:absolute; inset:0; border-radius:var(--radius);
    opacity:0; transition:opacity var(--transition);
    background:linear-gradient(135deg,rgba(99,102,241,.07),transparent 60%);
    pointer-events:none;
}
.card:hover::before { opacity:1; }

/* ── GRID LAYOUT ──────────────────────────────── */
.admin-grid {
    display:grid;
    grid-template-columns:240px 1fr;
    gap:16px;
    align-items:start;
}
@media(max-width:700px){ .admin-grid{ grid-template-columns:1fr; } }

/* ── TYPOGRAPHY ───────────────────────────────── */
h2 {
    font-size:1rem; font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase; letter-spacing:1.2px;
    margin-bottom:.75rem;
    padding-bottom:.5rem;
    border-bottom:1px solid var(--border);
}
h3 {
    font-size:.95rem; font-weight:600; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:1px;
    margin-bottom:.6rem;
}
a  { color:#93c5fd; text-decoration:none; }
a:hover { text-decoration:underline; }
.muted { color:var(--text-muted); font-size:.88rem; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85em;
       background:rgba(255,255,255,.06); border:1px solid var(--border); padding:1px 5px; border-radius:5px; }

hr { border:0; border-top:1px solid var(--border); margin:1.2rem 0; }

/* ── FORM ─────────────────────────────────────── */
label {
    display:block;
    font-size:.82rem; font-weight:600; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.8px;
    margin-bottom:.35rem;
}
input, textarea, select {
    width:100%; padding:10px 14px;
    border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    color:var(--text);
    font-family:inherit; font-size:.95rem;
    outline:none;
    transition:border-color var(--transition), box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus {
    border-color:rgba(99,102,241,.7);
    box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
textarea { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; resize:vertical; }

/* ── SELECT DROPDOWN ──────────────────────────── */
select {
    appearance:none;
    -webkit-appearance:none;
    padding-right:2.6rem;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238888a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px 16px;
    cursor:pointer;
}
select:focus {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
select option {
    background:var(--surface);
    color:var(--text);
    padding:8px 12px;
}
select option:checked {
    background:rgba(99,102,241,.25);
    color:#a5b4fc;
}

/* ── NUMBER INPUT (Port) ──────────────────────── */
input[type=number] {
    appearance:textfield;
    -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance:none;
    appearance:none;
    margin:0;
}
.field-port {
    position:relative;
}
.field-port input[type=number] {
    padding-right:2.8rem;
}
.field-port__spinners {
    position:absolute;
    right:8px; top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; gap:2px;
}
.field-port__spinners button {
    width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.07);
    border:1px solid var(--border);
    border-radius:6px;
    color:var(--text-muted);
    cursor:pointer; font-size:.7rem; line-height:1;
    padding:0;
    transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.field-port__spinners button:hover {
    background:rgba(99,102,241,.2);
    border-color:rgba(99,102,241,.4);
    color:#a5b4fc;
}

.field { margin-bottom:1rem; }

/* ── BUTTONS ──────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:10px 18px; border-radius:var(--radius);
    border:1px solid rgba(255,255,255,.12);
    cursor:pointer; font-size:.9rem; font-weight:600; letter-spacing:.2px;
    background:linear-gradient(135deg,rgba(99,102,241,.9),rgba(14,165,233,.65));
    color:#fff;
    text-decoration:none;
    transition:transform var(--transition), filter var(--transition), box-shadow var(--transition);
    box-shadow:0 4px 18px rgba(99,102,241,.25);
    white-space:nowrap;
}
.btn:hover  { filter:brightness(1.1); transform:translateY(-1px); text-decoration:none; }
.btn:active { transform:translateY(1px); }

.btn-sm { padding:7px 12px; font-size:.82rem; border-radius:10px; }

.btn-ghost {
    background:rgba(255,255,255,.06);
    border:1px solid var(--border);
    box-shadow:none;
}
.btn-ghost:hover { background:rgba(255,255,255,.1); filter:none; }

/* ── TABS ─────────────────────────────────────── */
.tabs { display:flex; gap:6px; margin-bottom:1.4rem; }
.tab {
    padding:8px 18px; border-radius:10px; font-size:.88rem; font-weight:600;
    border:1px solid var(--border);
    background:rgba(255,255,255,.04); color:var(--text-muted);
    text-decoration:none; transition:background var(--transition), color var(--transition), border-color var(--transition);
    cursor:pointer;
}
.tab:hover { background:rgba(255,255,255,.08); color:var(--text); text-decoration:none; }
.tab.active {
    background:rgba(99,102,241,.18); border-color:rgba(99,102,241,.4);
    color:#a5b4fc;
}

/* ── NOTICE / ALERTS ──────────────────────────── */
.notice {
    padding:10px 14px; border-radius:12px; font-size:.88rem;
    border:1px solid var(--border); margin-bottom:1rem;
}
.notice-ok  { background:rgba(34,197,94,.1);  border-color:rgba(34,197,94,.25); color:#86efac; }
.notice-err { background:rgba(239,68,68,.09); border-color:rgba(239,68,68,.25); color:#fca5a5; }

/* ── NAV LIST (Tabellenliste) ─────────────────── */
.nav-list { list-style:none; }
.nav-list li { margin:3px 0; }
.nav-list a {
    display:block; padding:8px 12px; border-radius:12px;
    color:var(--text-muted); font-size:.88rem;
    border:1px solid transparent;
    transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.nav-list a:hover { background:var(--surface-hover); color:var(--text); text-decoration:none; }
.nav-list a.active {
    background:rgba(99,102,241,.12);
    border-color:rgba(99,102,241,.25);
    color:#a5b4fc;
}

/* ── TABLE ────────────────────────────────────── */
.table-scroll {
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border-radius:12px;
}

/* dezente Scrollbar (Chromium/Edge) */
.table-scroll::-webkit-scrollbar { height:10px; }
.table-scroll::-webkit-scrollbar-track { background:rgba(255,255,255,.03); border-radius:999px; }
.table-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:999px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background:rgba(99,102,241,.25); }

.db-table {
    width:100%;
    min-width:max-content;
    border-collapse:collapse;
    font-size:.85rem;
    overflow:hidden;
}
.db-table thead th {
    padding:9px 10px; text-align:left;
    font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
    color:var(--text-muted);
    background:rgba(255,255,255,.03);
    border-bottom:1px solid var(--border);
}
.db-table tbody td {
    padding:9px 10px;
    border-bottom:1px solid var(--border);
    vertical-align:top;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.82rem;
    color:var(--text);
    word-break:break-word;
    max-width:280px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.db-table tbody tr:hover td { background:rgba(255,255,255,.025); }
.db-table tbody tr:last-child td { border-bottom:none; }
.null-val { color:var(--text-muted); font-style:italic; font-size:.8rem; }

/* ── PAGINATION ───────────────────────────────── */
.pagination { display:flex; gap:8px; margin-top:12px; align-items:center; }

/* ── TOP BAR ──────────────────────────────────── */
.top-bar {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-bottom:1.4rem;
    flex-wrap:wrap;
}
.top-bar-left { display:flex; align-items:center; gap:10px; }
.top-bar-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── LOGIN CARD CENTERED ──────────────────────── */
.login-wrap {
    width:100%; max-width:420px;
    margin:0 auto;
    animation: fadeUp .5s ease both;
}

/* ── BACK LINK ────────────────────────────────── */
.back-link {
    display:inline-flex; align-items:center; gap:5px;
    color:var(--text-muted); font-size:.85rem;
    margin-bottom:1.2rem;
}
.back-link:hover { color:var(--text); text-decoration:none; }

@media(max-width:480px) {
    body { padding:1.2rem .75rem 3rem; }
    .admin-grid { grid-template-columns:1fr; }
}