/* ==========================================================================
   EES Engineering Theme für Twenty CRM (crm.ees-engineering.de) — v2
   Markenfarbe #0a3f8f aus dem EES-Logo (ees-engineering.de).
   Injiziert via nginx sub_filter; liegt auf dem Host unter
   /var/www/crm-custom/ees-theme.css und übersteht Container-Updates.
   Nur stabile Anker (data-*/aria-*), getestet mit Twenty v2.22.0.
   ========================================================================== */

:root {
  --ees-navy: #0a3f8f;            /* EES-Logo-Blau */
  --ees-navy-deep: #083273;
  --ees-accent: var(--ees-navy);
  --ees-accent-contrast: #ffffff;
  --ees-tint-04: rgba(10, 63, 143, 0.04);
  --ees-tint-08: rgba(10, 63, 143, 0.08);
  --ees-tint-14: rgba(10, 63, 143, 0.14);
  --ees-tint-20: rgba(10, 63, 143, 0.20);
  --ees-border: #c7d3e8;
  --ees-sidebar-bg: #e3eaf7;
  --ees-sidebar-border: #b6c6e2;
  --ees-panel-bg: #f4f7fc;
  --ees-card-bg: #ffffff;
}

html.dark {
  --ees-accent: #5b8ae0;          /* aufgehelltes EES-Blau für dunklen Grund */
  --ees-accent-contrast: #0b1526;
  --ees-tint-04: rgba(91, 138, 224, 0.06);
  --ees-tint-08: rgba(91, 138, 224, 0.12);
  --ees-tint-14: rgba(91, 138, 224, 0.18);
  --ees-tint-20: rgba(91, 138, 224, 0.26);
  --ees-border: #2b3852;
  --ees-sidebar-bg: #0f1930;
  --ees-sidebar-border: #37476b;
  --ees-panel-bg: #0d1420;
  --ees-card-bg: #151d2d;
}

/* --------------------------------------------------------------------------
   1) Sidebar: klar erkennbar in EES-Blau getönt, mit Trennkante
   -------------------------------------------------------------------------- */
[data-click-outside-id='navigation-drawer'] {
  background: var(--ees-sidebar-bg) !important;
  border-right: 1px solid var(--ees-sidebar-border);
}

/* Aktiver Navigationspunkt: gefüllt in EES-Blau, weiße Schrift + Icon */
[data-click-outside-id='navigation-drawer'] [aria-selected='true'] {
  background: var(--ees-accent) !important;
  box-shadow: none;
}
[data-click-outside-id='navigation-drawer'] [aria-selected='true'],
[data-click-outside-id='navigation-drawer'] [aria-selected='true'] * {
  color: var(--ees-accent-contrast) !important;
}

/* Hover auf inaktiven Navigationspunkten */
[data-click-outside-id='navigation-drawer'] [aria-selected='false']:hover {
  background: var(--ees-tint-08) !important;
}

/* --------------------------------------------------------------------------
   2) Tabellen & Karten: Zeilentrennung + unübersehbare Zustände
   -------------------------------------------------------------------------- */
[data-selectable-id] {
  border-bottom: 1px solid var(--ees-border);
}

[data-selectable-id]:hover {
  background: var(--ees-tint-08);
}

/* Aktive Zeile/Karte (Tastatur-Fokus): Tönung + kräftiger Balken links */
[data-active='true'] {
  background: var(--ees-tint-14) !important;
  box-shadow: inset 3px 0 0 0 var(--ees-accent);
}

/* Per Checkbox ausgewählte Zeilen/Karten */
[data-selected='true'] {
  background: var(--ees-tint-20) !important;
  box-shadow: inset 3px 0 0 0 var(--ees-accent);
}

/* --------------------------------------------------------------------------
   3) Seitenkopf & rechtes Panel
   -------------------------------------------------------------------------- */
[data-testid='top-bar-title'] {
  font-weight: 700 !important;
  color: var(--ees-accent) !important;
  border-bottom: 3px solid var(--ees-accent);
  padding-bottom: 2px;
}

/* Command-Menü / rechtes Seitenpanel: blaue Abschlusskante */
[data-click-outside-id='command-menu'] {
  border-left: 3px solid var(--ees-accent) !important;
}

/* --------------------------------------------------------------------------
   4) Bedienelemente: Fokus, Checkboxen, Textauswahl in Markenfarbe
   -------------------------------------------------------------------------- */
input:focus-visible,
textarea:focus-visible,
[contenteditable='true']:focus-visible {
  outline: 2px solid var(--ees-accent) !important;
  outline-offset: -1px;
  border-radius: 4px;
}

input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--ees-navy);
}

::selection {
  background: var(--ees-tint-20);
}

/* --------------------------------------------------------------------------
   5) Detailbereich (rechtes Panel): Sektionen als klar getrennte Karten
   -------------------------------------------------------------------------- */
/* Panel-Hintergrund leicht getönt, damit sich die Karten abheben */
[data-click-outside-id='command-menu'] {
  background: var(--ees-panel-bg) !important;
}

/* Jede Sektion (Fields, Company, Opportunities, Lists, …) als Karte */
[data-widget-id] {
  border: 1px solid var(--ees-border) !important;
  border-radius: 8px;
  background: var(--ees-card-bg) !important;
}

/* Feldgruppen-Überschriften (General, Work, Social, System, …):
   Kapitälchen in EES-Blau mit Trennlinie darunter */
[data-widget-id] header {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  border-bottom: 1px solid var(--ees-border);
  padding-bottom: 4px;
  margin-top: 10px;
}
[data-widget-id] header,
[data-widget-id] header * {
  color: var(--ees-accent) !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   6) Scrollbalken
   -------------------------------------------------------------------------- */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: var(--ees-border);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--ees-accent);
}