/* Pastebin – Dark Theme, passend zu den Mockups */
:root{
  --bg:#0B0D12; --surface:#12151C; --surface-alt:#1A1F29; --code-bg:#0E1015;
  --border:#262B35; --border-soft:#1C2028;
  --text:#E7E9EE; --text-dim:#C4CAD6; --muted:#8A93A6; --faint:#5A6376;
  --accent:#2DD4BF; --accent-ink:#06110F; --accent-soft:rgba(45,212,191,.10);
  --warn:#FBBF24; --warn-soft:rgba(251,191,36,.08);
  --danger:#F87171; --danger-soft:rgba(248,113,113,.08);
  --purple:#A78BFA; --purple-soft:rgba(167,139,250,.14);
  --radius:10px;
}
*{box-sizing:border-box}
html{width:100%; overflow-x:hidden}
body{
  margin:0; width:100%; overflow-x:hidden; background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:14px; line-height:1.5;
}
code,pre,.mono{font-family:'IBM Plex Mono',monospace}
a{color:var(--accent); text-decoration:none}
a:hover{color:#5EEAD4; text-decoration:underline}

.container{max-width:1100px; margin:0 auto; padding:0 24px}

.topbar{
  min-height:56px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px 16px; padding:12px 24px; border-bottom:1px solid var(--border-soft);
}
.brand{display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',monospace; font-weight:600}
.brand .mark{width:26px;height:26px;border-radius:7px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center; flex-shrink:0}
.topbar nav{display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; font-size:13px; color:var(--muted)}
.topbar nav > *{margin-right:14px}
.topbar nav > *:last-child{margin-right:0}

/* Für schlichte Text-Reihen ("von X · Datum · ... Aufrufe"), die sich nur
   auf flex gap verlassen würden - manche eingebetteten WebViews (z.B. in
   Firmen-Software) unterstützen gap in Flexbox nicht zuverlässig. */
.meta-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
.meta-row > *{margin-right:14px}
.meta-row > *:last-child{margin-right:0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:38px; padding:0 16px; border-radius:8px; border:1px solid transparent;
  font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;
}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:#5EEAD4; text-decoration:none}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text-dim)}
.btn-danger{background:transparent; color:var(--danger); border-color:transparent}
.btn-small{height:30px; padding:0 12px; font-size:12px}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px}

label.field-label{display:block; font-size:12px; font-weight:500; color:var(--muted); margin-bottom:6px}
input[type=text],input[type=password],input[type=search],select,textarea{
  width:100%; height:40px; padding:0 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:14px; font-family:inherit;
}
textarea{height:auto; padding:12px; font-family:'IBM Plex Mono',monospace; resize:vertical}
::placeholder{color:var(--faint)}
.field{margin-bottom:16px}

.badge{display:inline-block; font-size:11px; font-weight:600; padding:3px 8px; border-radius:5px}
.badge-public{background:var(--accent-soft); color:var(--accent)}
.badge-unlisted{background:var(--warn-soft); color:var(--warn)}
.badge-private{background:var(--purple-soft); color:var(--purple)}
.badge-role-admin{background:var(--purple-soft); color:var(--purple)}
.badge-role-user{background:var(--accent-soft); color:var(--accent)}
.badge-lang{background:rgba(255,255,255,.06); color:var(--text-dim); font-family:'IBM Plex Mono',monospace}

.alert{display:flex; gap:8px; padding:12px; border-radius:8px; font-size:12px; line-height:1.5}
.alert-warn{background:var(--warn-soft); border:1px solid rgba(251,191,36,.25); color:#C9AE6C}
.alert-danger{background:var(--danger-soft); border:1px solid rgba(248,113,113,.28); color:#F3A7A7}

table{width:100%; border-collapse:collapse}
th{text-align:left; padding:10px 16px; font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); white-space:nowrap}
td{padding:11px 16px; font-size:13px; color:var(--text-dim); border-bottom:1px solid var(--border-soft)}
tr:hover td{background:#161A22}

/* Tabellen scrollen INNERHALB ihrer eigenen Box statt die ganze Seite
   horizontal aufzureißen - das war der Bug auf schmalen Bildschirmen. */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
.table-scroll table{min-width:560px}

.codebox{border-radius:10px; border:1px solid var(--border); background:var(--code-bg); overflow:hidden}
.codebox-head{height:34px; display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:0 12px; background:var(--surface); border-bottom:1px solid var(--border)}
.codebox pre{margin:0; padding:16px; overflow:auto; font-size:13px; line-height:1.7; max-width:100%}

.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tab{height:32px; padding:0 14px; border-radius:7px; font-size:13px; font-weight:500; cursor:pointer; border:1px solid var(--border); background:transparent; color:#9098A8; font-family:inherit; white-space:nowrap}
.tab.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}

.sidebar{width:208px; flex-shrink:0; background:#0E1015; border-right:1px solid var(--border-soft); padding:20px 14px; display:flex; flex-direction:column; min-height:100vh}
.sidebar a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px; color:#9098A8; font-size:13px; font-weight:500}
.sidebar a.active{background:var(--accent-soft); color:var(--accent); font-weight:600}
.admin-layout{display:flex}
.admin-main{flex-grow:1; min-width:0; padding:24px 28px}

.center-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}

/* --- Mobile (Telefon-Breite) --- */
@media (max-width: 640px){
  .container{padding:0 16px}
  .topbar{padding:10px 16px}
  .card{padding:16px}
  .admin-layout{flex-direction:column}
  .admin-main{padding:16px}
  /* Admin-Sidebar wird zur horizontal scrollbaren Leiste statt fixer
     208px-Spalte, die sonst dem Inhalt den halben Bildschirm wegnimmt. */
  .sidebar{
    width:100%; min-height:auto; flex-direction:row; align-items:center;
    overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;
    border-right:none; border-bottom:1px solid var(--border-soft); padding:10px 12px;
  }
  .sidebar > div:first-child{display:none} /* "ADMIN"-Label spart Platz */
  .sidebar a{flex-shrink:0}
  .sidebar div[style*="flex-grow"]{display:none} /* Spacer-Div der Sidebar */
}