/* CYA Suite Standard Theme - aus dem Suite Hub abgeleitet. */
:root {
  --cya-suite-bg: #070b14;
  --cya-suite-panel: rgba(11, 18, 32, 0.88);
  --cya-suite-panel-strong: rgba(14, 23, 38, 0.94);
  --cya-suite-text: #f5f7fb;
  --cya-suite-muted: #a8b3c7;
  --cya-suite-line: rgba(148, 163, 184, 0.22);
  --cya-suite-cyan: #67e8f9;
  --cya-suite-purple: #8b5cf6;
  --cya-suite-pink: #f472b6;
  --cya-suite-green: #34d399;
  --cya-suite-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  color-scheme: dark;
}

html {
  min-height: 100%;
  background: var(--cya-suite-bg);
}

body {
  min-height: 100vh;
  color: var(--cya-suite-text);
  background:
    linear-gradient(rgba(103, 232, 249, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(139, 92, 246, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(circle at 10% 8%, rgba(20, 184, 166, 0.18), transparent 32%),
    radial-gradient(circle at 86% 4%, rgba(139, 92, 246, 0.28), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(244, 114, 182, 0.14), transparent 38%),
    linear-gradient(135deg, #07111d 0%, #090c18 48%, #130d24 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 50% -10%, rgba(103, 232, 249, 0.12), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.22));
}

.cya-suite-brand-badge {
  position: fixed;
  top: 16px;
  left: 18px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(230px, calc(100vw - 36px));
  padding: 8px 12px;
  border: 1px solid rgba(103, 232, 249, 0.25);
  border-radius: 999px;
  background: rgba(7, 11, 20, 0.76);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}

.cya-suite-brand-badge img {
  display: block;
  width: 96px;
  max-height: 34px;
  object-fit: contain;
}

.cya-suite-brand-badge span {
  color: var(--cya-suite-muted);
  font: 700 11px/1.1 system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

body:has(.cya-suite-brand-badge) {
  padding-top: max(72px, env(safe-area-inset-top, 0px)) !important;
}

header, main, section, article, aside, nav, form, dialog, .card, .panel, .container, .content, .app, #app, #root {
  border-color: var(--cya-suite-line);
}

button, .button, a.button, input[type="button"], input[type="submit"] {
  border-radius: 999px;
  border-color: rgba(139, 92, 246, 0.42);
  box-shadow: 0 8px 22px rgba(139, 92, 246, 0.16);
}

input, textarea, select {
  border-radius: 12px;
  border-color: rgba(148, 163, 184, 0.28);
}

@media (max-width: 720px) {
  .cya-suite-brand-badge {
    position: sticky;
    top: 8px;
    left: 8px;
    margin: 8px;
    width: fit-content;
  }
  body:has(.cya-suite-brand-badge) {
    padding-top: 0 !important;
  }
}

/* CYA Suite: echte Suite-Optik statt pauschal alles weiß. */
body {
  color: #e5ecf8 !important;
  background-color: var(--cya-suite-bg) !important;
}

body, main, .app, #app, #root {
  color: #e5ecf8 !important;
}

/* Panels/Karten wie im Suite Hub: dunkel, Glas, helle Schrift. */
.panel, .card, .container, .content, .box, .tile, .widget, .modal, dialog,
.metrics article, .video-card, .feed-card, .event-card, .stream-card, .day-plan-card,
.category-column, .callback-box, .form-panel, .toolbar-panel,
.admin-grid > *, .media-card, .project-card, .lounge-card {
  color: #e5ecf8 !important;
  background: linear-gradient(180deg, rgba(14, 23, 38, 0.94), rgba(8, 13, 25, 0.91)) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32) !important;
}

/* Headings klar weiß, Fließtext bewusst gedämpft statt alles knallweiß. */
h1, h2, h3, h4, h5, h6,
.panel h1, .panel h2, .panel h3,
.card h1, .card h2, .card h3,
.video-card h3, .feed-card h3, .event-card h3,
.metrics strong, strong, label, legend {
  color: #ffffff !important;
}

p, small, .lead, .muted,
.panel p, .panel small,
.card p, .card small,
.video-card p, .feed-card p, .event-card p,
.section-header p, .toolbar-panel p,
.metrics span, .category-column-head span,
.server-status {
  color: #a8b3c7 !important;
}

a { color: #8ee7ff !important; }

button, .button, a.button, input[type="button"], input[type="submit"],
.tab, .filter, .video-priority-filter, .stream-filter, .media-type-filter, .category-filter {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.42), rgba(139, 92, 246, 0.48)) !important;
  border: 1px solid rgba(139, 92, 246, 0.48) !important;
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.18) !important;
}

button.secondary, .secondary,
.tab:not(.is-active), .filter:not(.is-active), .video-priority-filter:not(.is-active),
.stream-filter:not(.is-active), .media-type-filter:not(.is-active), .category-filter:not(.is-active) {
  background: rgba(15, 23, 42, 0.86) !important;
  color: #dbe7ff !important;
}

input, textarea, select {
  background: rgba(5, 9, 18, 0.88) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, 0.34) !important;
}

input::placeholder, textarea::placeholder { color: #7f8da6 !important; }

.badge, .pill, .tag, code, pre {
  color: #e5ecf8 !important;
  background-color: rgba(15, 23, 42, 0.82) !important;
}

/* Main Site: alter Mint/Amber-Zurück-Button im Suite-Kontrast, ohne App-Layout zu ändern. */
.back-to-top {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(8, 47, 73, 0.94), rgba(88, 28, 135, 0.92)) !important;
  border: 1px solid rgba(103, 232, 249, 0.42) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(139, 92, 246, 0.22) !important;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.96), rgba(124, 58, 237, 0.94)) !important;
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.48), 0 0 0 4px rgba(103, 232, 249, 0.14) !important;
}