/*
 * UCP Panel — eigenes Design über Tabler.
 * Farben laufen ausschließlich über Variablen: :root = hell,
 * [data-bs-theme=dark] = dunkel. Die Seiten selbst nutzen weiter die
 * Tabler-Klassen; dieses Stylesheet gibt ihnen das Panel-Aussehen.
 */

/* ---------- Tokens: hell ---------- */
:root,
[data-bs-theme=light] {
  --panel-accent: #4f46e5;
  --panel-accent-rgb: 79, 70, 229;
  --panel-accent-strong: #4338ca;
  --panel-accent-soft: rgba(79, 70, 229, .09);
  --panel-accent-text: #4338ca;

  --panel-bg: #f5f6fa;
  --panel-bg-rgb: 245, 246, 250;
  --panel-surface: #ffffff;
  --panel-surface-rgb: 255, 255, 255;
  --panel-surface-2: #f8f9fc;
  --panel-surface-3: #f1f3f8;
  --panel-border: #e4e7ef;
  --panel-border-strong: #d5d9e4;
  --panel-text: #0f172a;
  --panel-text-muted: #64748b;
  --panel-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --panel-shadow-lg: 0 12px 32px -12px rgba(15, 23, 42, .18);

  --panel-sidebar-bg: #ffffff;
  --panel-sidebar-text: #475569;
  --panel-sidebar-heading: #94a3b8;
  --panel-sidebar-hover: #f1f3f8;
  --panel-code-bg: #f1f3f8;

  --tblr-primary: var(--panel-accent);
  --tblr-primary-rgb: var(--panel-accent-rgb);
  --tblr-primary-darken: var(--panel-accent-strong);
  --tblr-primary-lt: var(--panel-accent-soft);
  --tblr-primary-fg: #ffffff;
  --tblr-link-color: var(--panel-accent-text);
  --tblr-link-color-rgb: 67, 56, 202;
  --tblr-link-hover-color: var(--panel-accent-strong);

  --tblr-body-bg: var(--panel-bg);
  --tblr-body-bg-rgb: var(--panel-bg-rgb);
  --tblr-body-color: var(--panel-text);
  --tblr-secondary-color: var(--panel-text-muted);
  --tblr-secondary: var(--panel-text-muted);
  --tblr-bg-surface: var(--panel-surface);
  --tblr-bg-surface-secondary: var(--panel-surface-2);
  --tblr-bg-surface-tertiary: var(--panel-surface-3);
  --tblr-border-color: var(--panel-border);
  --tblr-border-color-translucent: var(--panel-border);
  --tblr-border-radius: .5rem;
  --tblr-border-radius-sm: .375rem;
  --tblr-border-radius-lg: .75rem;
  --tblr-box-shadow-card: var(--panel-shadow);
  --tblr-shadow-card: var(--panel-shadow);
}

/* ---------- Tokens: dunkel ---------- */
[data-bs-theme=dark] {
  --panel-accent: #6366f1;
  --panel-accent-rgb: 99, 102, 241;
  --panel-accent-strong: #4f46e5;
  --panel-accent-soft: rgba(129, 140, 248, .14);
  --panel-accent-text: #a5b4fc;

  --panel-bg: #0b0f19;
  --panel-bg-rgb: 11, 15, 25;
  --panel-surface: #121826;
  --panel-surface-rgb: 18, 24, 38;
  --panel-surface-2: #0f1421;
  --panel-surface-3: #182033;
  --panel-border: #222b3d;
  --panel-border-strong: #2e3950;
  --panel-text: #e2e8f0;
  --panel-text-muted: #8b98ad;
  --panel-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --panel-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .6);

  --panel-sidebar-bg: #0d121e;
  --panel-sidebar-text: #a3afc2;
  --panel-sidebar-heading: #5d6a80;
  --panel-sidebar-hover: #161d2d;
  --panel-code-bg: #182033;

  --tblr-link-color-rgb: 165, 180, 252;
  --tblr-emphasis-color: #f8fafc;
  --tblr-secondary-bg: var(--panel-surface-3);
  --tblr-tertiary-bg: var(--panel-surface-2);
  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */
html { scroll-padding-top: 5rem; }
body {
  background: var(--panel-bg);
  color: var(--panel-text);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
::selection { background: rgba(var(--panel-accent-rgb), .22); }
a { text-underline-offset: 2px; }
code {
  color: var(--panel-accent-text);
  background: var(--panel-code-bg);
  padding: .1em .35em;
  border-radius: .3rem;
  font-size: .85em;
}
pre code { padding: 0; background: none; color: inherit; }
.text-secondary, .text-muted, .form-hint { color: var(--panel-text-muted) !important; }
hr { border-color: var(--panel-border); opacity: 1; }

/* ---------- Seitenleiste ---------- */
.navbar-vertical.navbar-expand-lg {
  background: var(--panel-sidebar-bg) !important;
  border-right: 1px solid var(--panel-border);
  box-shadow: none;
  scrollbar-width: thin;
  overflow-y: auto;
}
.navbar-vertical .navbar-brand {
  padding: 1.1rem 1.25rem .9rem;
  justify-content: flex-start;
  width: 100%;
}
.panel-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--panel-text) !important;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  text-decoration: none;
}
.panel-brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: .55rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #ec4899 120%);
  box-shadow: 0 4px 12px -4px rgba(99, 102, 241, .6);
}
.panel-brand-sub {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  color: var(--panel-text-muted);
  letter-spacing: .02em;
  margin-top: -.15rem;
}
.navbar-vertical .navbar-nav { padding: 0 .75rem; gap: 1px; }
.navbar-vertical .nav-section {
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--panel-sidebar-heading);
  padding: 1.1rem .75rem .4rem;
}
.navbar-vertical .nav-link {
  color: var(--panel-sidebar-text) !important;
  border-radius: .5rem;
  padding: .5rem .75rem !important;
  font-weight: 500;
  transition: background-color .15s, color .15s;
}
.navbar-vertical .nav-link:hover {
  background: var(--panel-sidebar-hover);
  color: var(--panel-text) !important;
}
.navbar-vertical .nav-link-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: .65rem;
  opacity: .8;
  color: inherit;
}
.navbar-vertical .nav-link-icon svg { width: 1.15rem; height: 1.15rem; }
.navbar-vertical .nav-item.active > .nav-link {
  background: var(--panel-accent-soft);
  color: var(--panel-accent-text) !important;
  font-weight: 600;
}
.navbar-vertical .nav-item.active > .nav-link .nav-link-icon { opacity: 1; }
.navbar-vertical .nav-item.active > .nav-link::before { display: none; }
.navbar-vertical .navbar-toggler { border-color: var(--panel-border); }

/* ---------- Kopfleiste ---------- */
.panel-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 3.75rem;
  padding: 0 1.5rem;
  background: rgba(var(--panel-bg-rgb), .82);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--panel-border);
}
.panel-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 26rem;
}
.panel-search svg {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--panel-text-muted);
  pointer-events: none;
}
.panel-search .form-control {
  padding-left: 2.2rem;
  background: var(--panel-surface);
  border-color: var(--panel-border);
  border-radius: .55rem;
  height: 2.25rem;
}
.panel-search kbd {
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .68rem;
  background: var(--panel-surface-3);
  color: var(--panel-text-muted);
  border: 1px solid var(--panel-border);
  box-shadow: none;
  padding: .05rem .35rem;
}
.panel-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.panel-theme-switch {
  display: inline-flex;
  padding: .2rem;
  gap: .15rem;
  background: var(--panel-surface-3);
  border: 1px solid var(--panel-border);
  border-radius: .6rem;
}
.panel-theme-switch button {
  border: 0;
  background: transparent;
  color: var(--panel-text-muted);
  width: 1.85rem;
  height: 1.65rem;
  border-radius: .45rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.panel-theme-switch button:hover { color: var(--panel-text); }
.panel-theme-switch button[aria-pressed=true] {
  background: var(--panel-surface);
  color: var(--panel-text);
  box-shadow: var(--panel-shadow);
}
.panel-user {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem .25rem .25rem;
  border-radius: .6rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--panel-text);
  font-weight: 500;
}
.panel-user:hover { background: var(--panel-surface-3); border-color: var(--panel-border); }
.panel-avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .8rem;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* ---------- Seiteninhalt ---------- */
.page-wrapper { background: var(--panel-bg); }
.page-body { margin-top: 1.5rem; margin-bottom: 2.5rem; }
.page-body > .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; max-width: 110rem; }

/* Tabler 1.4 zentriert .page-header — im Panel links mit Aktionen rechts */
.page-header {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin: 0 0 1.5rem !important;
  min-height: 0;
  text-align: left;
}
.page-header:not(.d-flex) { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--panel-text);
  line-height: 1.25;
}
.page-header > * { min-width: 0; max-width: 100%; }
.page-title { flex-wrap: wrap; gap: .35rem; overflow-wrap: anywhere; }
.page-title .badge { font-size: .72rem; vertical-align: middle; }
@media (max-width: 575.98px) {
  .page-title { font-size: 1.2rem; }
}
.page-pretitle {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--panel-text-muted);
  margin-bottom: .2rem;
}
.page-pretitle a { color: var(--panel-text-muted); text-decoration: none; }
.page-pretitle a:hover { color: var(--panel-accent-text); }

/* ---------- Karten ---------- */
.card {
  background: var(--panel-surface);
  border: 1px solid var(--panel-border);
  border-radius: .875rem;
  box-shadow: var(--panel-shadow);
  --tblr-card-border-radius: .875rem;
  --tblr-card-inner-border-radius: calc(.875rem - 1px);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--panel-border);
  padding: .9rem 1.25rem;
  min-height: 3.25rem;
}
.card-title { font-size: .95rem; font-weight: 650; letter-spacing: -.005em; color: var(--panel-text); }
.card-body { padding: 1.25rem; }
.card-footer { background: var(--panel-surface-2); border-top: 1px solid var(--panel-border); }
.card-sm > .card-body { padding: 1rem 1.1rem; }
.card .subheader {
  font-size: .7rem;
  letter-spacing: .07em;
  color: var(--panel-text-muted);
}
.card.border-warning { border-color: rgba(245, 159, 0, .45) !important; }
.card.border-danger { border-color: rgba(214, 57, 57, .45) !important; }
.row-cards { --tblr-gutter-y: 1rem; --tblr-gutter-x: 1rem; }
h4, .h4 { font-weight: 650; letter-spacing: -.005em; }

/* Reiterleiste in Karten (z. B. Site-Details): Unterstrich-Stil, scrollbar */
.card-header:has(> .card-header-tabs) { padding-bottom: 0; padding-top: .35rem; min-height: 0; }
.card-header-tabs {
  background: transparent !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  margin: 0 -.5rem;
  border: 0;
  gap: .15rem;
}
.card-header-tabs::-webkit-scrollbar { display: none; }
.card-header-tabs .nav-link {
  white-space: nowrap;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--panel-text-muted);
  font-weight: 500;
  padding: .8rem .75rem .7rem;
  margin-bottom: -1px;
}
.card-header-tabs .nav-link:hover { color: var(--panel-text); }
.card-header-tabs .nav-link.active {
  color: var(--panel-accent-text);
  border-bottom-color: var(--panel-accent) !important;
  font-weight: 600;
}

/* ---------- Tabellen & Listen ---------- */
.table {
  --tblr-table-bg: transparent;
  --tblr-table-hover-bg: var(--panel-surface-2);
  color: var(--panel-text);
  border-color: var(--panel-border);
}
.table > :not(caption) > * > * { border-bottom-color: var(--panel-border); padding: .65rem .85rem; }
.table thead th {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--panel-text-muted);
  background: var(--panel-surface-2) !important;
  border-bottom: 1px solid var(--panel-border) !important;
  white-space: nowrap;
}
.table tbody tr { transition: background-color .12s; }
.table-hover tbody tr:hover > *, .card-table tbody tr:hover > * { background: var(--panel-surface-2); }
.card-table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
.card-table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }
.list-group-item { background: transparent; border-color: var(--panel-border); color: var(--panel-text); }
.list-group-item-action:hover { background: var(--panel-surface-2); }

/* ---------- Formulare & Buttons ---------- */
.form-control, .form-select {
  background-color: var(--panel-surface);
  border-color: var(--panel-border-strong);
  color: var(--panel-text);
  border-radius: .5rem;
}
.form-control::placeholder { color: var(--panel-text-muted); opacity: .75; }
.form-control:focus, .form-select:focus {
  border-color: rgba(var(--panel-accent-rgb), .7);
  box-shadow: 0 0 0 .2rem rgba(var(--panel-accent-rgb), .18);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--panel-surface-3); }
.form-label { font-weight: 600; font-size: .82rem; color: var(--panel-text); }
.input-group-text { background: var(--panel-surface-3); border-color: var(--panel-border-strong); color: var(--panel-text-muted); }
.form-check-input { border-color: var(--panel-border-strong); }
.form-check-input:checked { background-color: var(--panel-accent); border-color: var(--panel-accent); }
.form-selectgroup-label { border-color: var(--panel-border-strong); border-radius: .6rem; }
.form-selectgroup-input:checked + .form-selectgroup-label {
  border-color: var(--panel-accent);
  color: var(--panel-accent-text);
  background: var(--panel-accent-soft);
}

.btn {
  border-radius: .5rem;
  font-weight: 550;
  --tblr-btn-box-shadow: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:not([class*=btn-]):not(.btn-close),
.btn.btn-secondary,
.btn.btn-outline-secondary {
  --tblr-btn-bg: var(--panel-surface);
  --tblr-btn-color: var(--panel-text);
  --tblr-btn-border-color: var(--panel-border-strong);
  --tblr-btn-hover-bg: var(--panel-surface-3);
  --tblr-btn-hover-color: var(--panel-text);
  --tblr-btn-hover-border-color: var(--panel-border-strong);
  --tblr-btn-active-bg: var(--panel-surface-3);
  --tblr-btn-active-border-color: var(--panel-border-strong);
}
.btn-primary {
  --tblr-btn-bg: var(--panel-accent);
  --tblr-btn-hover-bg: var(--panel-accent-strong);
  --tblr-btn-active-bg: var(--panel-accent-strong);
  box-shadow: 0 1px 2px rgba(var(--panel-accent-rgb), .25), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn-ghost-secondary { color: var(--panel-text-muted); }
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--panel-accent-rgb), .3); }

/* ---------- Hinweise, Badges, Fortschritt ---------- */
.alert {
  border-radius: .7rem;
  border: 1px solid var(--panel-border);
  background: var(--panel-surface);
  box-shadow: none;
}
.alert-success { border-color: rgba(47, 179, 68, .35); background: rgba(47, 179, 68, .07); }
.alert-warning { border-color: rgba(245, 159, 0, .4); background: rgba(245, 159, 0, .08); }
.alert-danger { border-color: rgba(214, 57, 57, .4); background: rgba(214, 57, 57, .07); }
.alert-info { border-color: rgba(var(--panel-accent-rgb), .35); background: var(--panel-accent-soft); }
.alert.alert-important.alert-warning { background: #b45309; border-color: #b45309; color: #fff; }
.badge { font-weight: 600; border-radius: .4rem; letter-spacing: .01em; }
.progress { background: var(--panel-surface-3); border-radius: 99px; }
.progress-bar { border-radius: 99px; }
.empty { padding: 2.5rem 1rem; }

/* Dropdowns & Modals */
.dropdown-menu {
  background: var(--panel-surface);
  border: 1px solid var(--panel-border);
  border-radius: .7rem;
  box-shadow: var(--panel-shadow-lg);
  padding: .35rem;
}
.dropdown-item { border-radius: .45rem; color: var(--panel-text); padding: .45rem .7rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--panel-surface-3); color: var(--panel-text); }
.dropdown-divider { border-color: var(--panel-border); }
.modal-content {
  background: var(--panel-surface);
  border: 1px solid var(--panel-border);
  border-radius: 1rem;
  box-shadow: var(--panel-shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--panel-border); }

/* Breadcrumbs (Dateibrowser) */
.breadcrumb-item a { text-decoration: none; }

/* Code-Blöcke / Job-Logs bleiben dunkel und gut lesbar */
pre {
  border-radius: .7rem;
  border: 1px solid var(--panel-border);
}

/* CodeMirror im Dunkelmodus */
[data-bs-theme=dark] .CodeMirror {
  background: var(--panel-surface-2);
  color: #e2e8f0;
}
[data-bs-theme=dark] .CodeMirror-gutters { background: var(--panel-surface); border-right-color: var(--panel-border); }
[data-bs-theme=dark] .CodeMirror-linenumber { color: #5d6a80; }
[data-bs-theme=dark] .CodeMirror-cursor { border-left-color: #e2e8f0; }
[data-bs-theme=dark] .CodeMirror-selected,
[data-bs-theme=dark] .CodeMirror-focused .CodeMirror-selected { background: rgba(99, 102, 241, .3); }
[data-bs-theme=dark] .cm-s-default .cm-keyword { color: #c792ea; }
[data-bs-theme=dark] .cm-s-default .cm-string { color: #c3e88d; }
[data-bs-theme=dark] .cm-s-default .cm-comment { color: #697a96; }
[data-bs-theme=dark] .cm-s-default .cm-variable,
[data-bs-theme=dark] .cm-s-default .cm-variable-2 { color: #82aaff; }
[data-bs-theme=dark] .cm-s-default .cm-def { color: #ffcb6b; }
[data-bs-theme=dark] .cm-s-default .cm-number { color: #f78c6c; }
[data-bs-theme=dark] .cm-s-default .cm-tag { color: #f07178; }
[data-bs-theme=dark] .cm-s-default .cm-attribute { color: #ffcb6b; }
[data-bs-theme=dark] .cm-s-default .cm-property { color: #89ddff; }
[data-bs-theme=dark] .cm-s-default .cm-meta,
[data-bs-theme=dark] .cm-s-default .cm-qualifier { color: #89ddff; }

/* ---------- Mobil ---------- */
@media (max-width: 991.98px) {
  .navbar-vertical.navbar-expand-lg { border-right: 0; border-bottom: 1px solid var(--panel-border); }
  .navbar-vertical .navbar-brand { padding: .75rem 1rem; width: auto; }
  .panel-topbar { padding: 0 1rem; position: static; }
  .panel-search kbd, .panel-user-name { display: none; }
  .page-body > .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- Anmeldeseiten ---------- */
.panel-auth {
  min-height: 100vh;
  background:
    radial-gradient(60rem 30rem at 15% -10%, rgba(99, 102, 241, .16), transparent 60%),
    radial-gradient(50rem 30rem at 110% 110%, rgba(236, 72, 153, .10), transparent 60%),
    var(--panel-bg);
}
.panel-auth .card { box-shadow: var(--panel-shadow-lg); }