/* Keys · Passwortmanager der Schattendatenbank. Design wie Website v25 / OPHANIM-Apps. Petrol, kein Gelb. */
:root, .theme_dark, .theme_light {
  --color-transparent-hover: rgb(237 234 227 / 0.04);
  --color-shadow: 0 0 0;
  --color-background: 20 20 21;
  --color-background-alt: 11 12 14;
  --color-background-alt2: 16 18 21;
  --color-background-alt3: 22 24 28;
  --color-background-alt4: 11 12 14;
  --color-primary-100: 13 44 47;
  --color-primary-300: 11 93 99;
  --color-primary-600: 92 195 198;
  --color-primary-700: 127 210 212;
  --color-secondary-100: 29 32 37;
  --color-secondary-300: 62 66 72;
  --color-secondary-500: 140 140 140;
  --color-secondary-600: 180 180 180;
  --color-secondary-700: 237 234 227;
  --color-info-100: 13 44 47;
  --color-info-600: 92 195 198;
  --color-info-700: 127 210 212;
  --color-warning-100: 52 32 22;
  --color-warning-600: 208 138 99;
  --color-warning-700: 232 176 146;
  --color-danger-100: 58 20 22;
  --color-danger-600: 224 87 74;
  --color-danger-700: 240 140 130;
  --color-success-100: 13 44 47;
  --color-success-600: 92 195 198;
  --color-success-700: 127 210 212;
  --color-notification-100: 13 44 47;
  --color-notification-600: 92 195 198;
  --color-text-main: 237 234 227;
  --color-text-muted: 160 158 152;
  --color-text-contrast: 11 12 14;
  --color-text-alt2: 237 234 227;
  --color-text-code: 92 195 198;
  --color-marketing-logo: 237 234 227;
  --color-illustration-outline: 92 195 198;
  --color-illustration-bg-primary: 13 44 47;
  --color-illustration-bg-secondary: 22 24 28;
  --color-illustration-bg-tertiary: 29 32 37;
  --color-illustration-tertiary: 11 93 99;
  --color-illustration-logo: 92 195 198;
  --avatar-bg: transparent;
  --keys-accent: #5cc3c6;
  --keys-accent-deep: #0b5d63;
  --keys-ink: #EDEAE3;
  --keys-bg: #0B0C0E;
  --keys-line: rgba(237,234,227,.09);
  --keys-line-2: rgba(237,234,227,.17);
  --color-brand-050: #e9f3f3; --color-brand-100: #cfe8e9; --color-brand-200: #a6d9db; --color-brand-300: #7fd2d4;
  --color-brand-400: #5cc3c6; --color-brand-500: #2f9a9e; --color-brand-600: #137a80; --color-brand-700: #0b5d63;
  --color-brand-800: #084a4f; --color-brand-900: #063a3e; --color-brand-950: #062a2d;
  --color-yellow-050: #fbf1eb; --color-yellow-100: #f5dccd; --color-yellow-200: #ecc0a6; --color-yellow-300: #e2a27f;
  --color-yellow-400: #d08a63; --color-yellow-500: #b96f4a; --color-yellow-600: #a35d3b; --color-yellow-700: #8e5238;
  --color-yellow-800: #6f3f2b; --color-yellow-900: #522f20; --color-yellow-950: #341d14;
  --color-border-focus: #5cc3c6;
  --color-bg-primary: #141415; --color-bg-secondary: #101215; --color-bg-tertiary: #16181C; --color-bg-quaternary: #1D2025;
  --color-fg-heading: #EDEAE3; --color-fg-body: #DAD6CE; --color-fg-body-subtle: #A09E98;
  --color-fg-brand: #5cc3c6; --color-fg-brand-strong: #7fd2d4; --color-fg-brand-soft: #a6d9db;
  --color-border-base: rgba(237,234,227,.17); --color-border-muted: rgba(237,234,227,.09); --color-border-light: rgba(237,234,227,.09);
  --color-border-brand: #5cc3c6;
  --color-bg-warning: #d08a63; --color-fg-warning: #d08a63; --color-border-warning: #d08a63;
  --color-bg-brand-soft: rgba(92,195,198,.12); --color-bg-brand-softer: rgba(92,195,198,.06); --color-bg-brand-medium: rgba(92,195,198,.22);
  --color-bg-hover: rgba(237,234,227,.05);
  color-scheme: dark;
}

html, body, bit-layout, app-root {
  background: var(--keys-bg) !important;
  color: var(--keys-ink) !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .tw-h1, .tw-text-3xl, app-vault-header h1, bit-header h1 {
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--keys-ink) !important;
}

/* Feiner Petrol-Schein oben, wie die OPHANIM-Anmeldung. */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 1px; z-index: 2147483000; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(92,195,198,.7), transparent);
}

/* Karten und Flächen. */
bit-layout main, app-vault, app-vault-header { background: var(--keys-bg) !important; }
.tw-bg-background, bit-dialog section, .tw-rounded-xl.tw-border, auth-anon-layout .tw-rounded-xl,
bit-section, bit-card, .tw-border-secondary-300.tw-rounded-xl {
  border-color: var(--keys-line) !important;
}
auth-anon-layout .tw-rounded-xl, bit-dialog > section, .cdk-overlay-pane .tw-rounded-xl {
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.45) !important;
}
#bit-side-nav {
  background: #101215 !important;
  border-right: 1px solid var(--keys-line) !important;
}
#bit-side-nav a, #bit-side-nav button { color: var(--keys-ink) !important; }
#bit-side-nav a.tw-bg-primary-300, #bit-side-nav [aria-current="page"] {
  background: rgba(92,195,198,.12) !important;
  color: var(--keys-accent) !important;
}

/* Primärknöpfe: weiß mit dunkler Schrift. */
[bitbutton][buttontype="primary"], button.tw-bg-primary-600, a.tw-bg-primary-600,
button[type="submit"].tw-bg-primary-600, button.tw-btn-primary,
#newItemDropdown, .qhek-mobile-bottom-bar .qhek-btn-new {
  background: #FFFFFF !important;
  color: #0B0C0E !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 999px !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  box-shadow: none !important;
}
[bitbutton][buttontype="primary"]:hover, button.tw-bg-primary-600:hover, #newItemDropdown:hover {
  background: #EDEAE3 !important; border-color: #EDEAE3 !important;
}
[bitbutton][buttontype="primary"] *, button.tw-bg-primary-600 *, #newItemDropdown * { color: #0B0C0E !important; }
[bitbutton][buttontype="primary"][disabled], [bitbutton][buttontype="primary"][aria-disabled="true"] {
  background: rgba(255,255,255,.55) !important; border-color: transparent !important;
}
/* Zweitknöpfe: Linie, Pille. */
[bitbutton]:not([buttontype="primary"]):not(.tw-bg-primary-600):not([buttontype="unstyled"]) {
  border-radius: 999px !important;
  border-color: var(--keys-line-2) !important;
  background: transparent !important;
  color: var(--keys-ink) !important;
}

/* Eingaben: Rahmen und Fokus über die Farbvariablen. */
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background-color: var(--keys-accent-deep) !important;
  border-color: var(--keys-accent) !important;
}

/* Links und Akzente. */
a, .tw-text-primary-600, a.tw-text-primary-600 { color: var(--keys-accent) !important; }
a:hover { color: #7fd2d4 !important; }

/* Kontingent-Anzeige. */
.qhek-quota-chip, #qhek-quota-chip-root {
  background: #101215 !important; color: var(--keys-ink) !important;
  border: 1px solid var(--keys-line-2) !important; border-radius: 999px !important;
}
.qhek-quota-chip__fill, #qhek-quota-chip-root .m > span { background: var(--keys-accent) !important; }
.qhek-quota-chip__bar, #qhek-quota-chip-root .m { background: var(--keys-line-2) !important; }
.qhek-quota-chip__value, .qhek-quota-chip .c, #qhek-quota-chip-root .c, #qhek-quota-chip-root .k,
.qhek-quota-chip__label { color: var(--keys-ink) !important; }

/* Tabellen / Listen. */
bit-table tr, app-vault-items tr, bit-table th, bit-table td { border-color: var(--keys-line) !important; }
bit-table tr:hover, app-vault-items tr:hover { background: rgba(92,195,198,.05) !important; }

/* Kein Gelb: Warnflächen in Kupfer. */
.tw-bg-warning-600 { background-color: rgb(208 138 99) !important; }
.tw-text-warning-600 { color: rgb(208 138 99) !important; }

/* Kontingent nur einmal zeigen. */
app-vault:has(.qhek-quota-chip) #qhek-quota-chip-root { display: none !important; }
/* Kontomarke in Petrol. */
bit-avatar { --avatar-bg: #0b5d63 !important; --avatar-bg-hover: #084a4f !important; }
bit-avatar svg text { fill: #FFFFFF !important; }