:root {
    /* Background & surfaces  */
    --bg: #1a1a1b;           
    --surface: #202122;     
    --surface-2: #68696c;    
    --inset: #24262b;        

    /* Text */
    --text: #eef0f4;         
    --text-2: #c7ccd6;      
    --muted: #aab1bd;         
    --heading: #9c9ea2;      

    /* Borders */
    --border: #434445;
    --border-2: #404244;

    /* Accent */
    --accent: #db1032;     
    --accent-2: #ff93a4;      
    --accent-contrast: #1f2023;

    /* OK */
    --ok-bg: #25352d;
    --ok-border: #4fb981;
    
    /* Löschen Button */
    --danger-bg: rgba(206,11,11,0.35);
    --danger-border: rgba(255,6,0,0.6);

    /* Buttons */
    --btn-bg: #2b2d31;
    --btn-bg-hover: #454950;
    --btn-text: #fdfdfd;
    --btn-border: #818181;

    /* Focus ring */
    --focus: rgba(255,123,144,0.46);
    
    /* Scope */
    --scope-bg: #a1c117;
    --scope-border: #784587;
    
    /* Command */
    --command-bg: #407d3b;
    --command-border: #bb04f0;
    
    /* User Logged-in-as */
    --command-bg: #181bc1;
    --command-border: #1b8c9f;
    
    /* Fonts */
    --font-white: #ffffff;
    --font-dark: #0d0d0d;
    --link-branding: #4ab8e2;
    
    /* Badges */
    --badge-green: rgb(43,159,27);
    --badge-turkis: rgb(41,145,124);
    --badge-red: rgb(190,10,10);
    --badge-orange: rgb(190,107,10);
    --badge-lila: rgb(186,10,190);
    --badge-branding: rgb(30,30,30);
    --badge-settings: rgb(30,30,30);
}


/* Base */
body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

/* Topbar */
.topbar {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;

    /* 🔴 NEU */
    z-index: 5000;
    isolation: isolate;
}

.brand {
    font-weight: 800;
    margin-right: 10px;
    color: var(--heading);
}

/* Navigation */
a.nav {
    color: var(--text);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
}

a.nav:hover {
    background: var(--surface-2);
    border-color: var(--border);
}

a.nav.active {
    background: var(--btn-bg);
    border-color: var(--btn-bg-hover);
    color: var(--heading);
}

/* Layout */
.wrap {
    max-width: 90%;
    margin: 0 auto;
    padding: 18px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.card table {
    min-width: 50px; 
}

/* Headings */
h2 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: var(--heading);
}

h3 {
    margin: 14px 0 8px 0;
    font-size: 15px;
    color: var(--heading);
}

.muted {
    color: var(--muted);
    font-size: 13px;
}

.mini {
    font-size: 12px;
    color: var(--text-2);
}

/* Form elements */
input {
    background: var(--inset);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
}

input:focus {
    outline: none;
    border-color: var(--border-2);
    box-shadow: 0 0 0 3px var(--focus);
}

button {
    background: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
}

button:hover {
    background: var(--btn-bg-hover);
}

/* Utility */
.row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.right {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border-bottom: 1px solid var(--border);
    padding: 10px 8px;
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--text-2);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Pills & states */
.pill {
    display: inline-block;
    padding: 4px 8px rgba(255,124,144,0.42);
    border-radius: 999px;
    border: 1px solid rgba(255, 122, 144, 0.35);
    background: rgba(255, 122, 144, 0.12);
    color: var(--heading);
    font-size: 12px;
}

.pill.ok {
    border-color: rgba(79, 185, 129, 0.55);
    background: var(--ok-bg);
    color: #d9f4e6;
}

.danger {
    background-color: var(--danger-bg);
    border-color: var(--danger-border);
    
}
.pill .danger {
    border-color: rgba(17,17,17,0.95);
    background: var(--danger-bg);
    color: #ffd7dc;
}

/* Width helpers */
.w120 { width: 120px; }
.w160 { width: 160px; }
.w240 { width: 240px; }
.w360 { width: 360px; }

/* Pagination */
.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

/* Misc */
form.inline {
    display: inline;
}

code {
    background: var(--inset);
    border: 1px solid var(--border);
    padding: 2px 6px;
    border-radius: 8px;
    color: var(--text);
}

/* Channel Name status Bot autorisierungs badge */
.channelNameBadge {
    background-color: var(--badge-turkis);
    color: var(--font-dark);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 5px 3px 5px;
    border-radius: 7px;
}

.channelNameBadgeAktiv {
    background-color: var(--badge-green);
    color: var(--font-white);
    font-size: 12px;
    padding: 3px 8px 4px 8px;
    border-radius: 7px;
}
    
}
.channelNameBadgeInaktiv {
    border-color: rgba(17,17,17,0.95);
    background: var(--danger-bg);
    color: #ffd7dc;
    border: 1px solid var(--border);
    border-radius: 16px;
}

.mini a {
    color: var(--font-white);
    border: 1px solid rgba(255,255,255,0.29);
    border-radius: 7px;
    padding: 3px 8px 4px 8px;
}

.channelAuthBadgeAutorisiert {
    background-color: var(--badge-green);
    color: var(--font-white);
    font-size: 12px;
    padding: 3px 8px 4px 8px;
    border-radius: 7px;
}
    
}
.channelAuthBadgeUnautorisiert {
    border-color: rgba(17,17,17,0.95);
    background: var(--danger-bg);
    color: #ffd7dc;
    border: 1px solid var(--border);
    border-radius: 16px;
}


/* Commands scope und command badge */
.scopeBadgeGlobal {
    background-color: var(--badge-orange);
    color: var(--font-white);
    font-size: 12px;
    padding: 2px 5px 3px 5px;
    border-radius: 7px;
}

.scopeBadgeChannel {
    background-color: var(--badge-turkis);
    color: var(--font-dark);
    font-size: 12px;
    padding: 2px 5px 3px 5px;
    border-radius: 7px;
}

.commandBadgeAktiv {
    background-color: var(--badge-turkis);
    color: var(--font-dark);
    font-weight: 600;
    padding: 2px 5px 3px 5px;
    font-size: 12px;
    border-radius: 7px;
}

.commandBadgeInaktiv {
    background-color: var(--badge-red);
    color: var(--font-white);
    font-weight: 600;
    font-size: 12px;
    padding: 2px 5px 3px 5px;
    border-radius: 7px;
}


/* Commands scope und command badge */
.adminUserIdBadge {
    background-color: var(--badge-lila);
    color: var(--font-white);
    font-size: 12px;
    padding: 2px 5px 3px 5px;
    border-radius: 7px;
}


/* Header Logout angemldet als und reload */
.reloadButton button {
    color: red;
    position: relative;
    top: 8px;
}

.logoutButton button {
    color: green;
    position: relative;
    top: 8px;
}

.loggedInAs {
    background-color: var(--badge-green);
    color: var(--font-white);
    font-size: 12px;
    padding: 3px 8px 4px 8px;
    border-radius: 7px;
}

/* ---------------- Dropdown Menü: Einstellungen ---------------- */

.nav-dd {
    position: relative;
    display: inline-block;
}

/* Wir nutzen button im gleichen Look wie a.nav */
.nav-dd-toggle {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
}

.nav-dd-toggle:hover {
    background: var(--surface-2);
    border-color: var(--border);
}

.nav-dd.active .nav-dd-toggle {
    background: var(--btn-bg);
    border-color: var(--btn-bg-hover);
    color: var(--heading);
}

.nav-dd-menu {
    position: absolute;
    top: 44px;
    left: 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 6px;
    display: none;
    z-index: 9000;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.nav-dd.open .nav-dd-menu {
    display: block;
}

.nav-dd-menu a.nav {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
}

.nav-dd-menu a.nav:hover {
    background: var(--surface-2);
    border-color: var(--border);
}


/* ---------------- Footer (zentriert & untereinander) ---------------- */

.footer {
    margin-top: 18px;
    padding: 14px 14px;
    border-top: 1px solid var(--border);

    display: flex;
    flex-direction: column;   /* ← untereinander */
    align-items: center;      /* ← horizontal zentriert */
    justify-content: center;  /* ← vertikal */

    gap: 6px;

    color: var(--muted);
    font-size: 12px;
}

/* ===============================
   Copyright (CSS-only)
   =============================== */
.footerCopyright a {
    color: var(--link-branding);
    text-decoration: none;
}

/* ===============================
   Version (CSS-only)
   =============================== */
.footerVersion {
    background-color: var(--badge-branding);
    color: var(--font-white);
    font-size: 12px;
    padding: 2px 5px 3px 5px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.68);
    margin-top: 5px;
}


/* ---------------- Branding (Topbar Logo) ---------------- */

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brandLogo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 8px;
}

.brandTitle {
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* ---------------- Branding Preview ---------------- */

.previewRow {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.previewImg {
    max-height: 56px;
    max-width: 240px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    background: var(--surface);
}

.previewFavicon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    background: var(--surface);
}

/* ============================
   Custom CSS Editor (lokal)
   ============================ */

.cssEditor {
    position: relative;
    width: 100%;
    min-height: 420px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}

/* Highlight-Layer */
.cssEditor pre {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 12px 12px;
    overflow: auto;
    white-space: pre;
    font-size: 13px;
    line-height: 1.4;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Input-Layer (Text unsichtbar, Caret sichtbar) */
.cssEditor textarea {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 12px 12px;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;

    color: transparent;         /* Text unsichtbar */
    caret-color: var(--text);   /* Cursor sichtbar */

    overflow: auto;
    white-space: pre;
    font-size: 13px;
    line-height: 1.4;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Selektieren soll trotzdem sichtbar sein */
.cssEditor textarea::selection {
    background: rgba(120, 140, 255, 0.35);
}

/* Token-Farben (keine festen Farben nötig, aber hier minimal lesbar) */
.tok-comment { opacity: 0.7; font-style: italic; }
.tok-string { opacity: 0.95; }
.tok-color { font-weight: 600; }
.tok-number { opacity: 0.95; }
.tok-at { font-weight: 700; }
.tok-important { font-weight: 800; }
.tok-pseudo { font-weight: 700; }
.tok-prop { font-weight: 700; }
.tok-selector { font-weight: 700; }
.tok-punct { opacity: 0.8; }

/* --- FIX: Custom CSS Editor ohne Highlight nutzen (Text wieder sichtbar) --- */
#cssHighlight { display: none !important; }
.cssEditor pre { display: none !important; }

/* textarea war vorher oft transparent, damit nur das pre sichtbar ist */
#cssInput, .cssEditor textarea {
  color: var(--text) !important;
  caret-color: var(--text) !important;
}

.badgeBotLogin {
    background-color: var(--badge-settings);
    color: var(--font-white);
    font-size: 12px;
    padding: 2px 5px 3px 5px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.68);
    margin-top: 50px;
}

.badgeBotID {
    background-color: var(--badge-settings);
    color: var(--font-white);
    font-size: 12px;
    padding: 2px 5px 3px 5px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.68);
    margin-top: 50px;
}

.badgeWebhook {
    background-color: var(--badge-settings);
    color: var(--font-white);
    font-size: 12px;
    padding: 2px 5px 3px 5px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.68);
    margin-top: 50px;
}

.deleteBTN {
    background-color: var(--danger-bg);
    border-color: var(--danger-border);
}

.safeBTN {
    background-color: var(--btn-bg);
    border-color: var(--badge-green);
    color: var(--font-white);
    margin-right: 5px;
}


/* ===============================
   Commands: Aktionen in 1 Zeile
   =============================== */

/* Container: niemals umbrechen */
.commandActionsRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Update-Form: alles in einer Zeile, darf schrumpfen */
.commandUpdateForm {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0; /* wichtig: erlaubt schrumpfen */
  flex: 1 1 auto; /* nimmt verfügbaren Platz */
}

/* Inputs dürfen schrumpfen statt umbrechen */
.commandUpdateForm input {
  min-width: 0;
}

/* Delete-Form bleibt immer rechts */
.commandDeleteForm {
  flex: 0 0 auto;
}

tr {
  border-bottom: 1px solid var(--border) !important;
}


.channelAuthBadgeUnautorisiert {
    background-color: var(--badge-red);
    color: var(--font-white);
    font-size: 12px;
    padding: 3px 8px 4px 8px;
    border-radius: 7px;
}

.channelConnectBTN {
    background-color: var(--btn-bg);
    border: 1px solid var(--link-branding);
    color: var(--font-white);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 8px 8px 8px;
    border-radius: 7px;
}