/* SW tools -- Kleid fuer IT-Tools (Fork sharevb, GPL-3.0).
   Aenderungsschicht nach GPL-3.0 Abschnitt 5: diese Datei aendert das
   Aussehen, nicht den Code der Sammlung (README.md in diesem Ordner).

   Wie IT-Tools seine Farben setzt, und warum hier fast alles !important ist:
   - Naive UI erzeugt seine Styles zur Laufzeit (css-render) und setzt die
     Farben je Komponente als Inline-Variablen (style="--n-color: ...").
     Eine Regel mit !important schlaegt eine Inline-Deklaration ohne.
   - Die eigenen c-*-Komponenten (c-button, c-card, c-input-text, c-link)
     binden ihre Farben per Vue v-bind als Inline-Variablen mit Hash-Namen
     (--v3d870419). Die Namen wechseln mit jedem Build; deshalb werden hier
     die Eigenschaften selbst ueberschrieben, nicht die Variablen.
   - Ein Primaerknopf (c-button type="primary") hat keine eigene Klasse; er
     ist nur an seiner Flaechenfarbe im Inline-Style erkennbar:
     primary.colorFaded = #18a0582f (themes-*.js des Releases, hell und
     dunkel gleich). Die reine Primaerfarbe #1ea54c taugt nicht, sie steht
     als Fokusfarbe in JEDEM c-button. Nach einem Update pruefen.
   Gemessen und gebaut fuer den dunklen Modus; /kleid/it-tools-dunkel.js
   erzwingt ihn. */

html,
body,
html.dark,
html.dark body {
  background-color: var(--swk-bg) !important;
  color-scheme: dark;
}

body {
  font-family: var(--swk-font) !important;
  color: var(--swk-text-muted);
}

button,
input,
select,
.category-button {
  font-family: inherit;
}

/* --- Rahmen: Layout, Seitenleiste, Kopf --------------------------------- */

.n-layout {
  --n-color: var(--swk-bg) !important;
  --n-text-color: var(--swk-text-muted) !important;
}

.n-layout-sider {
  --n-color: var(--swk-surface) !important;
  --n-border-color: var(--swk-border) !important;
  --n-toggle-button-color: var(--swk-card) !important;
  --n-toggle-button-border: 1px solid var(--swk-border) !important;
  --n-toggle-button-icon-color: var(--swk-text-muted) !important;
}

.n-scrollbar {
  --n-scrollbar-color: var(--swk-scrollbar) !important;
  --n-scrollbar-color-hover: var(--swk-scrollbar-hover) !important;
}

/* Kopf der Seitenleiste: gruener Verlauf (SVG) weg, Titel in Cabinet
   Grotesk auf der Leistenflaeche. Name "IT-Tools" bleibt: Herkunft. */
.hero-wrapper {
  background: var(--swk-surface);
  border-bottom: 1px solid var(--swk-border);
}
.hero-wrapper > svg,
.hero-wrapper .gradient {
  display: none !important;
}
.hero-wrapper .text-wrapper {
  color: var(--swk-text) !important;
}
.hero-wrapper .text-wrapper .title {
  font-family: var(--swk-font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.hero-wrapper .text-wrapper .divider {
  background-color: var(--swk-border) !important;
}
.hero-wrapper .text-wrapper .subtitle {
  color: var(--swk-text-muted);
}

/* Kategorien der Seitenleiste */
.category-button {
  color: var(--swk-text-muted) !important;
  border-radius: var(--swk-radius-md);
}
.category-button:hover {
  color: var(--swk-text) !important;
  background-color: var(--swk-card-hover) !important;
}
.category-button.category-active {
  color: var(--swk-text) !important;
  background-color: var(--swk-card) !important;
  box-shadow: inset 2px 0 0 var(--swk-accent);
}

/* Fusszeile der Leiste (Version, Copyright Corentin Thomasset) bleibt
   sichtbar: Copyright-Vermerk und Quellort (GPL-3.0 Abschnitte 5 und 7). */
.footer {
  color: var(--swk-text-faint) !important;
}

/* Fremde Bedienelemente:
   - "Kauf mir einen Kaffee": Spende an den Fork-Autor, keine Funktion
     der Werkzeuge, wirkt auf einer SW-labs-Seite wie unsere Bitte.
   - GitHub-Knopf im Kopf: Navigation weg von der Seite, keine Funktion.
     Der Quellort steht weiter in der Fusszeile und unter /lizenzen/.
   - Hell/Dunkel-Schalter: das Kleid ist nur dunkel gebaut.
   Nicht ausgeblendet: "Ueber" (/about, nennt Lizenz und Autor) und die
   Fusszeile mit Copyright. */
a.support-button,
.navbar a.c-button[href*="buymeacoffee.com"],
.navbar a.c-button[href^="https://github.com/"],
.navbar button.c-button[aria-label*="dunkl"],
.navbar button.c-button[aria-label*="dark" i] {
  display: none !important;
}
/* Leere Tooltip-Huellen der ausgeblendeten Knoepfe nicht als Luecke stehen lassen. */
.navbar [inline-block=""]:has(> div > a[href*="buymeacoffee.com"]),
.navbar [inline-block=""]:has(> div > a[href^="https://github.com/"]) {
  display: none !important;
}

/* Tooltips der Knoepfe */
.navbar .bg-black,
.bg-black {
  background-color: var(--swk-card-hover) !important;
  color: var(--swk-text) !important;
  border: 1px solid var(--swk-border);
}

/* --- Ueberschriften ------------------------------------------------------ */

.n-h,
h1,
h2,
h3 {
  font-family: var(--swk-font-display) !important;
  color: var(--swk-text) !important;
  --n-bar-color: var(--swk-accent) !important;
}
.n-h1 {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
.tool-header .separator {
  background-color: var(--swk-border) !important;
}
.tool-header .description,
.n-p,
.n-text {
  color: var(--swk-text-muted) !important;
}

/* --- Karten -------------------------------------------------------------- */

.c-card {
  background-color: var(--swk-card) !important;
  border-color: var(--swk-border) !important;
  border-radius: var(--swk-radius-xl) !important;
}
.c-card-title {
  color: var(--swk-text) !important;
  font-weight: 600 !important;
}
.n-card {
  --n-color: var(--swk-card) !important;
  --n-color-modal: var(--swk-card) !important;
  --n-color-embedded: var(--swk-surface) !important;
  --n-border-color: var(--swk-border) !important;
  --n-title-text-color: var(--swk-text) !important;
  --n-text-color: var(--swk-text-muted) !important;
  --n-border-radius: var(--swk-radius-xl) !important;
}

/* Links als Huelle (Kacheln, Kopf der Leiste) erben die Schrift; sonst
   steht das Link-Blau des Browsers im dunklen Modus darunter. */
a.it-tool-link,
a.hero-wrapper,
.n-layout-sider a:not(.c-link) {
  color: inherit !important;
}

/* Werkzeugkacheln auf der Startseite (c-card als Link) */
a:hover > .c-card,
.c-card:hover {
  border-color: var(--swk-btn-secondary-border-hover) !important;
}
.c-card .title,
.c-card .name {
  color: var(--swk-text) !important;
  font-family: var(--swk-font-display);
}
.c-card .description {
  color: var(--swk-text-muted) !important;
}
.c-card .n-icon {
  color: var(--swk-text-muted);
}

/* --- Knoepfe ------------------------------------------------------------- */

/* c-button, Standardart: ruhige Sekundaerflaeche. */
.c-button:not(.circle) {
  background: var(--swk-btn-secondary-bg) !important;
  color: var(--swk-text) !important;
  border: 1px solid var(--swk-btn-secondary-border) !important;
  border-radius: var(--swk-radius-md) !important;
  box-shadow: var(--swk-btn-secondary-shadow);
  font-weight: 500;
}
.c-button:not(.circle):hover {
  background: var(--swk-btn-secondary-bg-hover) !important;
  border-color: var(--swk-btn-secondary-border-hover) !important;
}
.c-button.circle {
  background-color: transparent !important;
  color: var(--swk-text-muted) !important;
}
.c-button.circle:hover {
  background-color: var(--swk-card-hover) !important;
  color: var(--swk-text) !important;
}
.c-button:focus-visible,
.c-button:focus {
  outline: none !important;
  box-shadow: var(--swk-focus-ring) !important;
}

/* c-button type="primary": nur an primary.colorFaded im Inline-Style
   erkennbar (siehe Kopf). Die Handlung, also Amber. Die Text-Variante
   (Flaeche transparent) bekommt nur Amber-Schrift. */
.c-button[style*="18a0582f" i]:not(.circle):not([style*="transparent"]) {
  background: var(--swk-btn-primary-bg) !important;
  color: var(--swk-btn-primary-text) !important;
  border-color: var(--swk-btn-primary-border) !important;
  box-shadow: var(--swk-btn-primary-shadow) !important;
}
.c-button[style*="18a0582f" i]:not(.circle):not([style*="transparent"]):hover {
  background: var(--swk-btn-primary-bg-hover) !important;
}
.c-button[style*="18a0582f" i][style*="transparent"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
  color: var(--swk-accent) !important;
}

/* Naive-UI-Knoepfe */
.n-button {
  --n-font-family: var(--swk-font) !important;
  --n-border-radius: var(--swk-radius-md) !important;
}
.n-button--default-type {
  --n-color: var(--swk-card) !important;
  --n-color-hover: var(--swk-card-hover) !important;
  --n-color-pressed: var(--swk-field) !important;
  --n-color-focus: var(--swk-card-hover) !important;
  --n-text-color: var(--swk-text) !important;
  --n-text-color-hover: var(--swk-text) !important;
  --n-text-color-pressed: var(--swk-text) !important;
  --n-text-color-focus: var(--swk-text) !important;
  --n-border: 1px solid var(--swk-btn-secondary-border) !important;
  --n-border-hover: 1px solid var(--swk-btn-secondary-border-hover) !important;
  --n-border-pressed: 1px solid var(--swk-btn-secondary-border-hover) !important;
  --n-border-focus: 1px solid var(--swk-accent) !important;
  --n-ripple-color: var(--swk-accent) !important;
}
.n-button--primary-type,
.n-button--info-type,
.n-button--success-type {
  --n-color: var(--swk-btn-primary-flat) !important;
  --n-color-hover: var(--swk-accent-bright) !important;
  --n-color-pressed: var(--swk-accent) !important;
  --n-color-focus: var(--swk-accent-bright) !important;
  --n-text-color: var(--swk-btn-primary-text) !important;
  --n-text-color-hover: var(--swk-btn-primary-text) !important;
  --n-text-color-pressed: var(--swk-btn-primary-text) !important;
  --n-text-color-focus: var(--swk-btn-primary-text) !important;
  --n-border: 1px solid var(--swk-btn-primary-border) !important;
  --n-border-hover: 1px solid var(--swk-btn-primary-border) !important;
  --n-border-pressed: 1px solid var(--swk-btn-primary-border) !important;
  --n-border-focus: 1px solid var(--swk-btn-primary-border) !important;
  --n-ripple-color: var(--swk-accent) !important;
}
.n-button--primary-type.n-button--secondary,
.n-button--primary-type.n-button--quaternary,
.n-button--primary-type.n-button--tertiary,
.n-button--primary-type.n-button--ghost {
  --n-text-color: var(--swk-accent) !important;
  --n-text-color-hover: var(--swk-accent-bright) !important;
  --n-color: var(--swk-accent-dim) !important;
  --n-color-hover: var(--swk-accent-mid) !important;
}

/* --- Formulare ----------------------------------------------------------- */

/* c-input-text: Feld und Textarea */
.c-input-text .input-wrapper {
  background-color: var(--swk-field) !important;
  border: 1px solid var(--swk-border) !important;
  border-radius: var(--swk-radius-md) !important;
}
.c-input-text .input-wrapper:hover {
  border-color: var(--swk-btn-secondary-border-hover) !important;
}
.c-input-text .input-wrapper:focus-within {
  background-color: var(--swk-field) !important;
  border-color: var(--swk-accent) !important;
  box-shadow: 0 0 0 2px var(--swk-accent-dim);
}
.c-input-text .input,
.c-input-text textarea,
.c-input-text input {
  color: var(--swk-text) !important;
  caret-color: var(--swk-accent);
}
.c-input-text .input::placeholder {
  color: var(--swk-text-faint) !important;
}
.c-input-text .label,
.n-form-item-label,
.n-form-item-label__text,
.c-select .label,
label {
  color: var(--swk-text-muted) !important;
}

/* c-select */
.c-select .c-select-input,
.c-select > div:not(.label) {
  border-radius: var(--swk-radius-md) !important;
}
.c-select [class*="select-input"],
.c-select .c-select-input {
  background-color: var(--swk-field) !important;
  border: 1px solid var(--swk-border) !important;
  color: var(--swk-text) !important;
}

/* c-link: Text statt Gruen, Unterstrich als Signal */
.c-link {
  color: var(--swk-text) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--swk-text-faint) !important;
  text-underline-offset: 3px;
}
.c-link:hover {
  text-decoration-color: var(--swk-accent) !important;
}

/* Naive-UI-Eingaben */
.n-input,
.n-input-number .n-input {
  --n-color: var(--swk-field) !important;
  --n-color-focus: var(--swk-field) !important;
  --n-color-disabled: var(--swk-card) !important;
  --n-text-color: var(--swk-text) !important;
  --n-placeholder-color: var(--swk-text-faint) !important;
  --n-caret-color: var(--swk-accent) !important;
  --n-border: 1px solid var(--swk-border) !important;
  --n-border-hover: 1px solid var(--swk-btn-secondary-border-hover) !important;
  --n-border-focus: 1px solid var(--swk-accent) !important;
  --n-box-shadow-focus: 0 0 0 2px var(--swk-accent-dim) !important;
  --n-border-radius: var(--swk-radius-md) !important;
  --n-loading-color: var(--swk-accent) !important;
  --n-icon-color: var(--swk-text-muted) !important;
}
.n-base-selection {
  --n-color: var(--swk-field) !important;
  --n-color-active: var(--swk-field) !important;
  --n-text-color: var(--swk-text) !important;
  --n-placeholder-color: var(--swk-text-faint) !important;
  --n-caret-color: var(--swk-accent) !important;
  --n-border: 1px solid var(--swk-border) !important;
  --n-border-hover: 1px solid var(--swk-btn-secondary-border-hover) !important;
  --n-border-active: 1px solid var(--swk-accent) !important;
  --n-border-focus: 1px solid var(--swk-accent) !important;
  --n-box-shadow-active: 0 0 0 2px var(--swk-accent-dim) !important;
  --n-box-shadow-focus: 0 0 0 2px var(--swk-accent-dim) !important;
  --n-box-shadow-hover: none !important;
  --n-border-radius: var(--swk-radius-md) !important;
  --n-arrow-color: var(--swk-text-muted) !important;
  --n-loading-color: var(--swk-accent) !important;
}
.n-base-select-menu {
  --n-color: var(--swk-card) !important;
  --n-option-text-color: var(--swk-text-muted) !important;
  --n-option-text-color-active: var(--swk-accent) !important;
  --n-option-text-color-pressed: var(--swk-accent) !important;
  --n-option-check-color: var(--swk-accent) !important;
  --n-option-color-pending: var(--swk-card-hover) !important;
  --n-option-color-active-pending: var(--swk-card-hover) !important;
  --n-border-radius: var(--swk-radius-md) !important;
}
.n-switch {
  --n-rail-color: var(--swk-border) !important;
  --n-rail-color-active: var(--swk-accent) !important;
  --n-button-color: var(--swk-text) !important;
  --n-box-shadow-focus: 0 0 0 2px var(--swk-accent-mid) !important;
  --n-loading-color: var(--swk-accent) !important;
}
.n-checkbox {
  --n-color-checked: var(--swk-accent) !important;
  --n-border-checked: 1px solid var(--swk-accent) !important;
  --n-border-focus: 1px solid var(--swk-accent) !important;
  --n-box-shadow-focus: 0 0 0 2px var(--swk-accent-dim) !important;
  --n-check-mark-color: var(--swk-btn-primary-text) !important;
  --n-text-color: var(--swk-text-muted) !important;
}
.n-radio,
.n-radio-group {
  --n-dot-color-active: var(--swk-accent) !important;
  --n-box-shadow-active: inset 0 0 0 1px var(--swk-accent) !important;
  --n-box-shadow-focus: inset 0 0 0 1px var(--swk-accent), 0 0 0 2px var(--swk-accent-dim) !important;
  --n-box-shadow-hover: inset 0 0 0 1px var(--swk-accent) !important;
  --n-button-text-color-active: var(--swk-accent) !important;
  --n-button-border-color-active: var(--swk-accent) !important;
  --n-text-color: var(--swk-text-muted) !important;
}
.n-slider {
  --n-fill-color: var(--swk-accent) !important;
  --n-fill-color-hover: var(--swk-accent-bright) !important;
  --n-rail-color: var(--swk-border) !important;
  --n-rail-color-hover: var(--swk-border) !important;
  --n-handle-color: var(--swk-text) !important;
  --n-dot-border-active: 2px solid var(--swk-accent) !important;
}
.n-tabs {
  --n-tab-text-color: var(--swk-text-muted) !important;
  --n-tab-text-color-active: var(--swk-text) !important;
  --n-tab-text-color-hover: var(--swk-text) !important;
  --n-bar-color: var(--swk-accent) !important;
  --n-tab-border-color: var(--swk-border) !important;
  --n-tab-color: var(--swk-surface) !important;
  --n-tab-color-segment: var(--swk-card-hover) !important;
  --n-color-segment: var(--swk-surface) !important;
  --n-pane-text-color: var(--swk-text-muted) !important;
}
.n-tag {
  --n-border-radius: var(--swk-radius-sm) !important;
}
.n-progress {
  --n-fill-color: var(--swk-accent) !important;
  --n-rail-color: var(--swk-border) !important;
}
.n-spin-body,
.n-base-loading {
  --n-color: var(--swk-accent) !important;
}

/* --- Menue der Seitenleiste (Werkzeuge einer Kategorie) ----------------- */

.n-menu {
  --n-item-text-color: var(--swk-text-muted) !important;
  --n-item-text-color-hover: var(--swk-text) !important;
  --n-item-icon-color: var(--swk-text-faint) !important;
  --n-item-icon-color-hover: var(--swk-text) !important;
  --n-item-color-hover: var(--swk-card-hover) !important;
  --n-item-text-color-active: var(--swk-text) !important;
  --n-item-text-color-active-hover: var(--swk-text) !important;
  --n-item-icon-color-active: var(--swk-accent) !important;
  --n-item-icon-color-active-hover: var(--swk-accent) !important;
  --n-item-color-active: var(--swk-accent-dim) !important;
  --n-item-color-active-hover: var(--swk-accent-dim) !important;
  --n-item-color-active-collapsed: var(--swk-accent-dim) !important;
  --n-item-text-color-child-active: var(--swk-text) !important;
  --n-item-text-color-child-active-hover: var(--swk-text) !important;
  --n-item-icon-color-child-active: var(--swk-accent) !important;
  --n-item-icon-color-child-active-hover: var(--swk-accent) !important;
  --n-arrow-color: var(--swk-text-faint) !important;
  --n-arrow-color-hover: var(--swk-text) !important;
  --n-arrow-color-active: var(--swk-accent) !important;
  --n-arrow-color-active-hover: var(--swk-accent) !important;
  --n-arrow-color-child-active: var(--swk-accent) !important;
  --n-arrow-color-child-active-hover: var(--swk-accent) !important;
  --n-border-radius: var(--swk-radius-md) !important;
  --n-font-size: 14px !important;
}

/* --- Popups, Modale, Hinweise ------------------------------------------- */

.n-popover,
.n-dropdown-menu,
.n-modal,
.n-dialog {
  --n-color: var(--swk-card) !important;
  --n-text-color: var(--swk-text) !important;
  --n-border-radius: var(--swk-radius-lg) !important;
}
.n-dropdown-menu {
  --n-option-color-hover: var(--swk-card-hover) !important;
  --n-option-color-active: var(--swk-accent-dim) !important;
  --n-option-text-color-active: var(--swk-accent) !important;
}
.c-modal,
.c-modal .modal,
[class*="c-modal"] .content {
  background-color: var(--swk-card) !important;
  border: 1px solid var(--swk-border);
  border-radius: var(--swk-radius-xl) !important;
}
.n-alert {
  --n-border-radius: var(--swk-radius-md) !important;
}

/* Codebloecke behalten Monospace. Editoren (CodeMirror, Monaco) setzen
   ihre Schrift selbst und messen damit Zeichenbreiten -- nicht anfassen. */
pre,
code,
.n-code,
.font-mono,
.\!font-mono {
  font-family: var(--swk-font-mono) !important;
}

/* Rollbalken */
* {
  scrollbar-color: var(--swk-scrollbar) transparent;
}