/* Design G: workbench layout in the corporate design of konferenzregie.de, dark like the website.
   Avada palette of the website: color1 #F7BB30 (accent), color2 #3F444B (anthracite), color3 #62666C,
   color4 #C8CACC, color5 #FFFFFF, color7 #E1E3E5, color8 #515B69.
   Darker shades of #3F444B for bars and header. Red Hat Display + Source Sans 3. Logo: triangle. */
:root {
  color-scheme: dark;
  --ground: #3F444B;          /* color2 */
  --sidebar: #34383E;         /* darker than color2 */
  --list: #42474E;
  --surface: #4A4F57;
  --line: #555B63;
  --border: #62666C;         /* color3 */
  --text: #FFFFFF;           /* color5 */
  --muted: #C8CACC;          /* color4 */
  --accent: #F7BB30;         /* color1 */
  --on-accent: #2A2D31;
  --accent-soft: rgba(247, 187, 48, .14);
  --accent-text: #F7BB30;    /* readable on dark background */
  --success: #4CC76B;        /* green for confirmations and check marks */
  --success-soft: rgba(76, 199, 107, .22);
  --danger: #FF8A80;
  --skel: #5C6168; --skel-light: #51565D; --avatar: #585D65;
  --dark: #2A2D31; --dark-2: #515B69; /* color8 */
  --body-font: 'Source Sans 3', system-ui, sans-serif;
  --heading-font: 'Red Hat Display', system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(0,0,0,.25);
}
:focus-visible { outline-color: var(--accent); }
kbd { background: var(--dark); border-color: var(--border); color: var(--muted); }

/* Brand block with triangle logo */
.sidebar { padding-top: 0; border-right-color: #2E3136; }
.sidebar .brand { margin: 0 -14px 16px; padding: 0 20px; height: 64px; display: flex; align-items: center; gap: 12px; background: var(--dark); color: #fff; font-size: 20px; font-weight: 700; letter-spacing: .01em; }
.brand::before { content: ""; width: 34px; height: 34px; flex-shrink: 0; background: url("../images/logo-triangle.svg") center / contain no-repeat; }
.command-button { background: var(--ground); color: var(--muted); }

/* Navigation */
.nav svg { color: var(--muted); }
.nav:hover { background: rgba(255,255,255,.05); }
.nav[aria-current] { background: var(--accent-soft); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.nav[aria-current] svg { color: var(--accent); }
.dot { background: var(--accent); }

/* Content */
.list { border-right-color: #34383E; }
.search, .chip { background: var(--surface); }
.row:hover { background: rgba(255,255,255,.05); }
.detail { background: var(--ground); }
.btn { background: transparent; border-color: var(--border); }
.btn:hover { border-color: var(--muted); }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.entry .node { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.entry .stroke { background: var(--line); }
.step { color: var(--accent); }
.page h1, dialog h2, .wizard-head h2 { font-weight: 700; }
.card { background: var(--list); border-color: var(--line); }
.card h2 { color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }

/* Dialogs and tiles */
dialog { background: var(--surface); box-shadow: 0 24px 70px rgba(0,0,0,.5); }
dialog::backdrop { background: rgba(20,22,25,.6); }
.field input, .field textarea { background: var(--ground); border-color: var(--border); }
.tile { background: var(--ground); border-color: var(--border); }
.tile input:is([type="checkbox"], [type="radio"]) { background: var(--ground); border-color: var(--muted); }
.tile input:is([type="checkbox"], [type="radio"]):checked { background: var(--accent); border-color: var(--accent); }
.tile:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.wizard-foot { background: var(--surface); }
.command:hover, .command:focus-visible { background: var(--accent-soft); }
.photo { border-color: var(--border); }

@media (max-width: 1023px) {
  .topbar { background: var(--dark); color: #fff; border-bottom: 1px solid #2E3136; }
  .topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
  .topbar .brand::before { width: 28px; height: 28px; }
  .topbar .btn { background: var(--dark-2); border-color: var(--border); color: #fff; }
  .bottom-nav { background: var(--dark); border-top-color: #2E3136; }
  .bottom-nav :is(a, button)[aria-current] { color: var(--accent); }
  .bottom-nav :is(a, button) { position: relative; }
  .bottom-nav :is(a, button)[aria-current]::before { content: ""; position: absolute; top: 0; width: 32px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
}