/*
  Eigene Anpassungen, geladen nach dem App-Stylesheet.

  Farbschema Petrol. Die Farben stehen nur in den drei Variablen-Blöcken
  (hell, „Dunkel“, „System“ bei dunklem Betriebssystem); alle Regeln weiter
  unten verwenden nur Variablen und gelten für beide Modi.
*/

:root {
  color-scheme: light;
  --bg: #f3f6f7;
  --surface: #ffffff;
  --surface-2: #f6f9fa;
  --border: #dde7ea;
  --border-2: #c5d5da;
  --primary: #0e7490;
  --primary-hover: #155e75;
  --primary-light: #d5f1f5;
  --primary-lighter: #ecf9fb;
  --accent: #c2410c;
  --accent-light: #ffedd5;
  --text-1: #0f1d22;
  --text-2: #3d4f56;
  --text-3: #5f7178;
  --btn-primary-bg: #0e7490;
  --btn-primary-hover: #155e75;
  --focus-ring: rgba(14, 116, 144, .18);
  --tag-high-bg: #ffe4e6;
  --tag-high-fg: #be123c;
  --tag-closed-bg: #eef2f3;
  --tag-closed-fg: #3d4f56;
  --placeholder: #8a9aa0;
  --overlay: rgba(15, 29, 34, .5);
  --font-smoothing: antialiased;
}

:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #0d1417;
  --surface: #152024;
  --surface-2: #1c2a2f;
  --border: #2a3b41;
  --border-2: #3a5058;
  --primary: #4fd1e0;
  --primary-hover: #7ee0eb;
  --primary-light: #123e47;
  --primary-lighter: #102f36;
  --accent: #fdba74;
  --accent-light: #3d2614;
  --success: #6ee7a0;
  --success-light: #143a28;
  --warning: #fcd34d;
  --warning-light: #3d3112;
  --danger: #fca5a5;
  --danger-light: #4a1d1f;
  --info: #93c5fd;
  --info-light: #172f52;
  --text-1: #f3f7f8;
  --text-2: #d8e3e6;
  --text-3: #b0c0c5;
  --btn-primary-bg: #0e7490;
  --btn-primary-hover: #0b5f75;
  --focus-ring: rgba(79, 209, 224, .25);
  --tag-high-bg: #4a1f2c;
  --tag-high-fg: #fda4af;
  --tag-closed-bg: #253339;
  --tag-closed-fg: #d8e3e6;
  --placeholder: #8fa1a7;
  --overlay: rgba(0, 0, 0, .7);
  --font-smoothing: auto;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --bg: #0d1417;
    --surface: #152024;
    --surface-2: #1c2a2f;
    --border: #2a3b41;
    --border-2: #3a5058;
    --primary: #4fd1e0;
    --primary-hover: #7ee0eb;
    --primary-light: #123e47;
    --primary-lighter: #102f36;
    --accent: #fdba74;
    --accent-light: #3d2614;
    --success: #6ee7a0;
    --success-light: #143a28;
    --warning: #fcd34d;
    --warning-light: #3d3112;
    --danger: #fca5a5;
    --danger-light: #4a1d1f;
    --info: #93c5fd;
    --info-light: #172f52;
    --text-1: #f3f7f8;
    --text-2: #d8e3e6;
    --text-3: #b0c0c5;
    --btn-primary-bg: #0e7490;
    --btn-primary-hover: #0b5f75;
    --focus-ring: rgba(79, 209, 224, .25);
    --tag-high-bg: #4a1f2c;
    --tag-high-fg: #fda4af;
    --tag-closed-bg: #253339;
    --tag-closed-fg: #d8e3e6;
    --placeholder: #8fa1a7;
    --overlay: rgba(0, 0, 0, .7);
    --font-smoothing: auto;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,.5);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
  }
}

/* Schrift: im Dunkelmodus ohne Kantenglättung „antialiased“, die helle Schrift sonst dünn macht */
body { -webkit-font-smoothing: var(--font-smoothing); }

/* Stellen, an denen das App-Stylesheet Lila oder helle Farben fest eingebaut hat */
.brand-icon,
.login-brand-icon { background: linear-gradient(135deg, #0e7490, #14b8a6); box-shadow: 0 4px 12px rgba(14, 116, 144, .3); }
.sidebar { box-shadow: none; }
.login-bg {
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(14, 116, 144, .10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(20, 184, 166, .08) 0%, transparent 60%),
    var(--bg);
}
.login-card { box-shadow: var(--shadow-lg); }
.btn-primary,
.assigned-count,
.update-badge { background: var(--btn-primary-bg); color: #fff; box-shadow: none; }
.btn-primary:hover:not(:disabled) { background: var(--btn-primary-hover); box-shadow: 0 4px 12px rgba(14, 116, 144, .3); }
.btn-secondary:hover:not(:disabled) { background: var(--border-2); }
.btn-secondary .btn-spinner,
.btn-ghost .btn-spinner,
.btn-outline .btn-spinner { border-color: rgba(14, 116, 144, .3); border-top-color: var(--primary); }
.input-field:focus,
.comment-input:focus { background: var(--surface); box-shadow: 0 0 0 3px var(--focus-ring); }
.modal-overlay { background: var(--overlay); }
.project-avatar.large { background: var(--primary-light); }
.sparkline-tooltip { background: var(--surface-2); }
[data-tooltip]:hover:after { color: var(--bg); }
input::placeholder,
textarea::placeholder { color: var(--placeholder); }
select option { background: var(--surface); color: var(--text-1); }
thead th { color: var(--text-2); }

/* Etiketten: kräftiger und etwas fetter */
.tag { font-weight: 600; }
.tag-closed { background: var(--tag-closed-bg); color: var(--tag-closed-fg); }
.tag-high { background: var(--tag-high-bg); color: var(--tag-high-fg); }
.tag-role-lead { background: var(--primary-light); color: var(--primary); }

/* Art eines Eintrags: Bug oder Aufgabe */
.tag.tag-type-bug,
.tag.tag-type-task {
  background: transparent;
  border: 1px solid currentColor;
  padding: 1px 8px;
  font-size: .7rem;
  flex-shrink: 0;
}
.tag-type-bug { color: var(--accent); }
.tag-type-task { color: var(--primary); }

/* Deaktivierte Buttons */
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Kategorie eines Eintrags (z. B. „Kalender“) */
.tag.tag-category {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border-2);
  padding: 1px 8px;
  font-size: .7rem;
  flex-shrink: 0;
}
.cat-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.cat-row:last-child { border-bottom: none; }