/* Notioneers App-Basis v1.7.1 – theme.css: daisyUI-Theme «notioneers» (Design: docs/design/HANDOVER.md, Werte: docs/design/basis.css).
   Läuft unter Weg A (CDN) und Weg B (Build) gleich: reines CSS, kein Tailwind-Processing.
   Overrides liegen in denselben Ebenen wie daisyUI (utilities.daisyui.l1…): Grundform in l1.l2.l3, Varianten in l1.l2, Hover in l1.
   So gewinnen Grössen (btn-sm), Varianten und Tailwind-Klassen in den Seiten weiterhin. */

@font-face { font-family: "TWK Lausanne"; font-weight: 300; font-display: swap; src: url("fonts/TWKLausanne-300.woff2") format("woff2"); }
@font-face { font-family: "TWK Lausanne"; font-weight: 400; font-display: swap; src: url("fonts/TWKLausanne-400.woff2") format("woff2"); }

[data-theme="notioneers"] {
  color-scheme: light;
  --color-base-100: #FFFFFF;
  --color-base-200: #F2F4F2;  /* halo: Seite, Hover */
  --color-base-300: #E3E6E3;  /* Rahmen */
  --color-base-content: #00340D;  /* depth */
  --color-primary: #00340D;
  --color-primary-content: #71F08D;  /* bloom */
  --color-secondary: #A0F5AE;  /* ease: Hero */
  --color-secondary-content: #00340D;
  --color-accent: #07DC5B;  /* pulse: nur Live-Indikator */
  --color-accent-content: #00340D;
  --color-neutral: #00340D;
  --color-neutral-content: #FFFFFF;
  --color-info: #0F5C75;
  --color-info-content: #FFFFFF;
  --color-success: #178A45;
  --color-success-content: #FFFFFF;
  --color-warning: #8C6A04;
  --color-warning-content: #FFFFFF;
  --color-error: #8E1A14;
  --color-error-content: #FFFFFF;
  --radius-selector: 9999px;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --size-selector: 0.25rem;
  --size-field: 0.275rem;  /* Felder und Buttons 44 px (Beli: lieber etwas grösser als 40) */
  --border: 1px;
  --depth: 0;
  --noise: 0;
  --root-bg: var(--color-base-200);

  /* Zusätzliche Tokens (nicht daisyUI). In der Shell als Tailwind-Klasse mit Variable, z. B. text-(--color-stone). */
  --color-mist: #DEECDC;      /* nur Status «Aktiv» */
  --color-divider: #ECEFEC;   /* Zeilen in Listen und Tabellen */
  --color-veil: #D1E2D1;      /* nur Icon-Flächen */
  --color-root: #405143;      /* Hinweise, Eyebrows, Tabellenkopf */
  --color-stone: #5E6B5F;     /* Zweittext, inaktive Navigation */
  --color-shade: #0B1E0F;     /* Hover Primär */
  --color-ease-alt: #E1FFE3;  /* Toast-Icon */
  --color-green-ui: #49B841;  /* Tab-Linie, Toggle an */
  --color-segment: #E9ECE9;   /* Segment-Fläche */
  --color-loader-line: #3FF68C; /* nur Linie im Notioneers-Loader */
  --color-aeris-light: #C1E2F1;  --color-aeris-label: #0F5C75;
  --color-nimbus-light: #DAD8FF; --color-nimbus-label: #3938C2;
  --color-muse-light: #F0D8FF;   --color-muse-label: #6A0DA5;
  --color-coral-light: #FFD2D2;  --color-coral-label: #8E1A14;
  --color-solea-light: #FFF4D0;  --color-solea-label: #8C6A04;
  --color-cove-light: #F5DBCB;   --color-cove-label: #7A2C08;
  /* Pastell-Mitteltöne (base, aus Invest): Farbpunkt, Kategorien, Diagramme */
  --color-aeris-base: #9ED8F0; --color-nimbus-base: #928EFF; --color-muse-base: #D7A0F0;
  --color-coral-base: #E8A7A9; --color-solea-base: #FDE49A; --color-rose-base: #F5C2D8;
  --color-dot-border: color-mix(in oklab, var(--color-base-content) 25%, transparent);
  --radius-sm: 0.375rem;   /* Buttons, Tags, Segment-Einträge */
  --radius-tile: 0.625rem; /* Kacheln mit eckiger Ecke unten links (App-Icon, Avatar, Listen-Icon) */
  --radius-hero: 1.25rem;  /* Hero, Dialog */
}

@layer base {
  [data-theme="notioneers"] {
    font-family: "TWK Lausanne", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    font-weight: 300;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }
  [data-theme="notioneers"] body { font-size: 0.9375rem; }
  [data-theme="notioneers"] :where(h1, h2, h3, h4, h5, h6, b, strong) { font-weight: 400; }
  /* Lucide-Icons feiner (1.5 statt 2), passend zur Schrift 300 */
  [data-theme="notioneers"] svg[stroke="currentColor"] { stroke-width: 1.5; }
}

/* Mobil: Felder, Buttons, Schalter etwas grösser (48 statt 44 px) */
@media (max-width: 767px) {
  [data-theme="notioneers"] { --size-field: 0.3rem; --size-selector: 0.3rem; }
}

/* ── Grundform der Komponenten ── */
@layer utilities.daisyui.l1.l2.l3 {
  /* Buttons: weiss mit grauem Rahmen, Radius 6, Gewicht 400 */
  [data-theme="notioneers"] .btn {
    --radius-field: var(--radius-sm);
    --fontsize: 0.9375rem;
    font-weight: 400;
    text-shadow: none;
  }
  /* Nur gefüllte Buttons: daisyUI legt outline/ghost/… in dieselbe Ebene, darum ausnehmen */
  [data-theme="notioneers"] .btn:not(.btn-outline, .btn-dash, .btn-ghost, .btn-link, .btn-soft) {
    --btn-bg: var(--btn-color, var(--color-base-100));
    --btn-border: var(--btn-color, var(--color-base-300));
  }

  /* Felder: Rahmen grau, Fokus = Rahmen depth + Ring depth 10 % */
  [data-theme="notioneers"] :is(.input, .select, .textarea, .file-input) {
    --input-color: var(--color-base-300);
    --font-size-min: 0.9375rem;
    box-shadow: none;
  }
  [data-theme="notioneers"] :is(.input, .select, .textarea):is(:focus, :focus-within) {
    --input-color: var(--color-base-content);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-base-content) 10%, transparent);
    outline: none;
  }
  [data-theme="notioneers"] :is(.input, .textarea)::placeholder,
  [data-theme="notioneers"] .input input::placeholder { color: var(--color-stone); }
  [data-theme="notioneers"] .label { color: var(--color-base-content); font-size: 0.875rem; font-weight: 400; }
  /* Formular: Luft zwischen den Feldern, Legende als Abschnittstitel */
  [data-theme="notioneers"] .fieldset { font-size: 0.9375rem; gap: 0.5rem; }
  [data-theme="notioneers"] .fieldset > label.label { margin-top: 0.75rem; }
  [data-theme="notioneers"] .fieldset-legend { font-size: 1rem; font-weight: 400; padding-bottom: 0; }
  [data-theme="notioneers"] .checkbox { border-radius: 0.25rem; }
  [data-theme="notioneers"] .checkbox:not(:checked, :indeterminate) { --input-color: var(--color-base-300); }

  /* Toggle: Spur grau, an = grün, Knopf immer weiss */
  [data-theme="notioneers"] .toggle {
    --input-color: var(--color-base-300);
    background-color: var(--color-base-300);
    border-color: transparent;
    color: var(--color-base-100); /* Knopf = currentColor */
    box-shadow: none;
  }
  [data-theme="notioneers"] .toggle:before { box-shadow: none; }
  [data-theme="notioneers"] .toggle:focus-visible { outline-color: var(--color-base-content); }
  [data-theme="notioneers"] .toggle:is(:checked, [aria-checked="true"]) { background-color: var(--color-green-ui); --input-color: var(--color-green-ui); }

  /* Kbd: klein, weiss, Rahmen grau */
  [data-theme="notioneers"] .kbd {
    --size: 1.25rem;
    border: 1px solid var(--color-base-300);
    border-radius: var(--radius-sm);
    background-color: var(--color-base-100);
    color: var(--color-stone);
    font-size: 0.6875rem;
    box-shadow: none;
  }

  /* Sidebar-Navigation (menu): Eintrag 42 px, inaktiv stone, aktiv/hover halo + depth; Gruppen als Eyebrow */
  [data-theme="notioneers"] .menu {
    --menu-active-bg: var(--color-base-200);
    --menu-active-fg: var(--color-base-content);
    font-size: 0.9375rem;
  }
  [data-theme="notioneers"] .menu :where(li:not(.menu-title) > :is(a, button, summary)) {
    min-height: 2.625rem;
    padding-inline: 0.75rem;
    gap: 0.625rem;
    color: var(--color-stone);
  }
  [data-theme="notioneers"] .menu :where(li:not(.menu-title) > :is(a, button, summary)):hover,
  [data-theme="notioneers"] .menu :where(li > .menu-active) {
    background-color: var(--color-base-200);
    color: var(--color-base-content);
  }
  [data-theme="notioneers"] .menu .menu-active { font-weight: 400; }
  [data-theme="notioneers"] .menu-title {
    padding: 1rem 0.75rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-root);
  }

  /* Breadcrumbs: 13 px root, Trenner «/» */
  [data-theme="notioneers"] .breadcrumbs { font-size: 0.8125rem; color: var(--color-root); }
  [data-theme="notioneers"] .breadcrumbs > ul > li + :before {
    content: "/";
    width: auto;
    height: auto;
    rotate: none;
    border: 0;
    margin-inline: 0.5rem;
  }

  /* Subtabs (tabs-border): 15 px, inaktiv root, aktiv 400 mit grüner Linie 3 px */
  [data-theme="notioneers"] .tabs-border > .tab {
    --tab-p: 0px;
    --tab-border-color: transparent;
    height: auto;
    padding-block: 0.75rem 0.875rem;
    margin-inline-end: 1.75rem;
    font-size: 0.9375rem;
  }
  [data-theme="notioneers"] .tabs-border > .tab:before { border-radius: 0; }

  /* Segment (tabs-box): graue Fläche ohne Rahmen, Eintrag 36 px, aktiv neutral */
  [data-theme="notioneers"] .tabs-box {
    background-color: var(--color-segment);
    border-radius: 0.625rem;
    gap: 2px;
    box-shadow: none;
  }
  [data-theme="notioneers"] .tabs-box > .tab {
    --tab-height: 2.25rem;
    --tab-p: 1rem;
    border-radius: var(--radius-sm);
    color: var(--color-root);
  }

  /* Badge: Status-Grösse 28 px, 14 px/400; Tag/Typ-Tag stellen Höhe und Radius in der Shell um */
  [data-theme="notioneers"] .badge {
    --size: 1.75rem;
    padding-inline: 0.75rem;
    gap: 0.4375rem;
    font-size: 0.875rem;
    font-weight: 400;
    white-space: nowrap;
  }

  /* Karte: Rahmen grau, Titel 400 */
  [data-theme="notioneers"] .card-title { font-size: 1rem; font-weight: 400; }

  /* Tabelle: Kopf 12 px Versalien root, Zellen 18/24, Hairlines, Hover halo */
  [data-theme="notioneers"] .table { font-size: 0.9375rem; }
  [data-theme="notioneers"] .table :where(th, td) { padding: 1.125rem 1.5rem; }
  [data-theme="notioneers"] .table :where(thead) {
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-root);
  }
  [data-theme="notioneers"] .table :where(thead th) { padding-block: 1rem; font-weight: inherit; } /* Browser setzt th fett */
  [data-theme="notioneers"] .table :where(thead tr, tbody tr:not(:last-child)) { border-bottom-color: var(--color-divider); }
  [data-theme="notioneers"] .table :where(tbody tr):hover { background-color: var(--color-base-200); }

  /* Liste: Zeile ≥ 72 px, Hairline zwischen Zeilen */
  [data-theme="notioneers"] .list-row {
    min-height: 4.5rem;
    padding: 1rem 1.5rem;
    align-items: center;
    border-radius: 0;
  }
  [data-theme="notioneers"] .list > :not(:last-child).list-row:after { border-color: var(--color-divider); inset-inline: 0; }

  /* Kennzahl: Wert 30 px/400 tabular, Label 14 px root */
  [data-theme="notioneers"] .stat-title { font-size: 0.875rem; color: var(--color-root); }
  [data-theme="notioneers"] .stat-value { font-size: 1.875rem; font-weight: 400; font-variant-numeric: tabular-nums; }
  [data-theme="notioneers"] .stat-desc { font-size: 0.8125rem; color: var(--color-stone); }

  /* Alert: Radius 10, Icon oben links; neutral = weiss + Rahmen */
  [data-theme="notioneers"] .alert {
    border-radius: 0.625rem;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
    font-size: 0.9375rem;
    --alert-border-color: var(--color-base-300);
    background-color: var(--alert-color, var(--color-base-100));
    box-shadow: none;
    background-image: none;
  }

  /* Dialog: Radius 20 */
  [data-theme="notioneers"] .modal-box { --radius-box: var(--radius-hero); box-shadow: none; }
}

/* ── Varianten ── */
@layer utilities.daisyui.l1.l2 {
  [data-theme="notioneers"] .btn-ghost { --btn-bg: transparent; --btn-border: transparent; }
  [data-theme="notioneers"] .btn-outline.btn-error { --btn-border: var(--color-coral-light); }
  [data-theme="notioneers"] .card-border { border-color: var(--color-base-300); }
  [data-theme="notioneers"] .input-ghost:is(:focus, :focus-within) { --input-color: transparent; background-color: transparent; box-shadow: none; }

  /* Inaktive Tabs: root statt daisyUI-50 %, damit sie klickbar wirken und nicht deaktiviert */
  [data-theme="notioneers"] :is(.tabs-border, .tabs-box) > .tab:not(.tab-active, [aria-selected="true"], [aria-current="page"], :checked, label:has(:checked)) {
    color: var(--color-root);
  }
  /* Aktiver Subtab: Linie grün, Text depth */
  [data-theme="notioneers"] .tabs-border > .tab:is(.tab-active, [aria-selected="true"], [aria-current="page"]) {
    --tab-border-color: var(--color-green-ui);
    color: var(--color-base-content);
    font-weight: 400;
  }
  [data-theme="notioneers"] .tabs-border > .tab:is(.tab-active, [aria-selected="true"], [aria-current="page"]):before { color: var(--color-green-ui); }
  /* Aktives Segment: neutral */
  [data-theme="notioneers"] .tabs-box > .tab:is(.tab-active, [aria-selected="true"], [aria-current="page"], :checked) {
    --tab-bg: var(--color-neutral);
    color: var(--color-neutral-content);
    font-weight: 400;
    box-shadow: none;
  }
}

@layer utilities.daisyui.l1 {
  /* Fokus per Tastatur: feiner Ring wie bei Feldern statt dickem Rahmen (z. B. Schliessen-Knopf beim Öffnen eines Dialogs) */
  [data-theme="notioneers"] .btn:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--color-base-content) 25%, transparent);
    outline-offset: 2px;
  }
  [data-theme="notioneers"] .alert-soft { --alert-border-color: transparent; } /* daisyUI zeichnet sonst einen grauen Rand um die Farbfläche */
  [data-theme="notioneers"] .alert-soft.alert-info { background: var(--color-aeris-light); color: var(--color-aeris-label); }
  [data-theme="notioneers"] .alert-soft.alert-success { background: var(--color-ease-alt); color: var(--color-base-content); }
  [data-theme="notioneers"] .alert-soft.alert-warning { background: var(--color-solea-light); color: var(--color-solea-label); }
  [data-theme="notioneers"] .alert-soft.alert-error { background: var(--color-coral-light); color: var(--color-coral-label); }

  /* Hover: Standard halo, Primär shade, Löschen coral-light */
  @media (hover: hover) {
    [data-theme="notioneers"] .btn:hover { --btn-bg: var(--btn-color, var(--color-base-200)); }
    [data-theme="notioneers"] .btn-primary:hover { --btn-bg: var(--color-shade); --btn-border: var(--color-shade); }
    [data-theme="notioneers"] .btn-ghost:hover { --btn-border: transparent; }
    [data-theme="notioneers"] .btn-outline.btn-error:hover { --btn-bg: var(--color-coral-light); --btn-border: var(--color-coral-light); --btn-fg: var(--color-error); color: var(--color-error); }
  }
}

/* tag_select(): nicht gewählter Tag neutral und gestrichelt. Ohne Ebene, damit es die Farbklassen von tag() schlägt. */
[data-theme="notioneers"] .tag-select > .badge { cursor: pointer; }
[data-theme="notioneers"] .tag-select > input:not(:checked) + .badge {
  background-color: var(--color-base-100);
  border: 1px dashed var(--color-base-300);
  color: var(--color-stone);
}
[data-theme="notioneers"] .tag-select > input:not(:checked) + .badge:hover { border-color: var(--color-stone); }
[data-theme="notioneers"] .tag-select > input:focus-visible + .badge { outline: 2px solid var(--color-base-content); outline-offset: 2px; }

/* brand_loader(): Notioneers-N zeichnet sich selbst (Depth-Kachel, Linie, dann Bloom-Fläche). */
[data-theme="notioneers"] .brand-loader {
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  border-radius: 1rem 1rem 1rem 0;
  background: var(--color-primary);
}
[data-theme="notioneers"] .brand-loader svg { width: 5.125rem; height: 5.125rem; }
[data-theme="notioneers"] .brand-loader path {
  fill: var(--color-primary-content);
  stroke: var(--color-loader-line);
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  animation: brand-loader-draw 3.4s ease-in-out infinite;
}
@keyframes brand-loader-draw {
  0%   { stroke-dashoffset: 1400; fill-opacity: 0; opacity: 1; }
  38%  { stroke-dashoffset: 0;    fill-opacity: 0; }
  50%  { stroke-dashoffset: 0;    fill-opacity: 1; }
  90%  { stroke-dashoffset: 0;    fill-opacity: 1; opacity: 1; }
  100% { stroke-dashoffset: 0;    fill-opacity: 1; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="notioneers"] .brand-loader path { animation: none; fill-opacity: 1; stroke-dashoffset: 0; }
}