/* =============================================================================
 * freund-systems.de — custom.css
 * 6 Themes × 2 Modi (Dark + Light)
 * =========================================================================== */

/* ── DARK THEMES ──────────────────────────────────────────────────────────── */

:root,
[data-theme="tokyo-night-dark"] {
    --th-bg: #1a1b26; --th-bg-dark: #16161e; --th-bg-hl: #292e42;
    --th-border: #3b4261; --th-fg: #c0caf5; --th-fg-dim: #a9b1d6;
    --th-comment: #565f89; --th-accent: #7aa2f7; --th-accent-dim: #3d59a1;
    --th-secondary: #9d7cd8; --th-tertiary: #bb9af7; --th-green: #9ece6a;
    --th-orange: #ff9e64; --th-red: #f7768e; --th-yellow: #e0af68;
    --th-cyan: #7dcfff; --th-teal: #1abc9c;
}

[data-theme="kanagawa-dark"] {
    --th-bg: #1F1F28; --th-bg-dark: #16161D; --th-bg-hl: #2A2A37;
    --th-border: #363646; --th-fg: #DCD7BA; --th-fg-dim: #C8C093;
    --th-comment: #727169; --th-accent: #7E9CD8; --th-accent-dim: #4A5975;
    --th-secondary: #957FB8; --th-tertiary: #938AA9; --th-green: #76946A;
    --th-orange: #FFA066; --th-red: #C34043; --th-yellow: #DCA561;
    --th-cyan: #7FB4CA; --th-teal: #6A9589;
}

[data-theme="catppuccin-dark"] {
    --th-bg: #1e1e2e; --th-bg-dark: #181825; --th-bg-hl: #313244;
    --th-border: #45475a; --th-fg: #cdd6f4; --th-fg-dim: #bac2de;
    --th-comment: #6c7086; --th-accent: #89b4fa; --th-accent-dim: #45475a;
    --th-secondary: #cba6f7; --th-tertiary: #f5c2e7; --th-green: #a6e3a1;
    --th-orange: #fab387; --th-red: #f38ba8; --th-yellow: #f9e2af;
    --th-cyan: #89dceb; --th-teal: #94e2d5;
}

[data-theme="rose-pine-dark"] {
    --th-bg: #191724; --th-bg-dark: #1f1d2e; --th-bg-hl: #26233a;
    --th-border: #403d52; --th-fg: #e0def4; --th-fg-dim: #908caa;
    --th-comment: #6e6a86; --th-accent: #31748f; --th-accent-dim: #28394d;
    --th-secondary: #c4a7e7; --th-tertiary: #ebbcba; --th-green: #9ccfd8;
    --th-orange: #ea9a97; --th-red: #eb6f92; --th-yellow: #f6c177;
    --th-cyan: #9ccfd8; --th-teal: #3e8fb0;
}

[data-theme="gruvbox-dark"] {
    --th-bg: #282828; --th-bg-dark: #1d2021; --th-bg-hl: #3c3836;
    --th-border: #504945; --th-fg: #ebdbb2; --th-fg-dim: #d5c4a1;
    --th-comment: #928374; --th-accent: #83a598; --th-accent-dim: #427b58;
    --th-secondary: #d3869b; --th-tertiary: #b8bb26; --th-green: #b8bb26;
    --th-orange: #fe8019; --th-red: #fb4934; --th-yellow: #fabd2f;
    --th-cyan: #8ec07c; --th-teal: #689d6a;
}

[data-theme="nord-dark"] {
    --th-bg: #2e3440; --th-bg-dark: #242933; --th-bg-hl: #3b4252;
    --th-border: #4c566a; --th-fg: #eceff4; --th-fg-dim: #d8dee9;
    --th-comment: #616e88; --th-accent: #88c0d0; --th-accent-dim: #4c7a8a;
    --th-secondary: #b48ead; --th-tertiary: #81a1c1; --th-green: #a3be8c;
    --th-orange: #d08770; --th-red: #bf616a; --th-yellow: #ebcb8b;
    --th-cyan: #8fbcbb; --th-teal: #5e81ac;
}

/* ── LIGHT THEMES (mit hohem Kontrast) ────────────────────────────────────── */
/*    --th-fg:      fast schwarz (Titel)                                      */
/*    --th-fg-dim:  dunkelgrau (Sekundärtext, Links)                          */
/*    --th-comment: mittelgrau (Beschreibungen) — min. 4.5:1 Kontrast        */

[data-theme="tokyo-night-light"] {
    --th-bg: #d5d6db; --th-bg-dark: #e1e2e7; --th-bg-hl: #c4c5cb;
    --th-border: #a8a9b0; --th-fg: #1a1b2e; --th-fg-dim: #343854;
    --th-comment: #4e526e; --th-accent: #2e7de9; --th-accent-dim: #7aa0d4;
    --th-secondary: #6a3daa; --th-tertiary: #7e4ec7; --th-green: #3d6324;
    --th-orange: #944c00; --th-red: #d41a55; --th-yellow: #6e5530;
    --th-cyan: #005f7d; --th-teal: #0d7260;
}

[data-theme="kanagawa-light"] {
    --th-bg: #f2ecbc; --th-bg-dark: #f6f0c3; --th-bg-hl: #e4d99a;
    --th-border: #c5be8e; --th-fg: #2a2a36; --th-fg-dim: #43434f;
    --th-comment: #5e5e56; --th-accent: #3b5480; --th-accent-dim: #6a85ab;
    --th-secondary: #4e3a6e; --th-tertiary: #5e4d72; --th-green: #516b3a;
    --th-orange: #a85800; --th-red: #a02e38; --th-yellow: #5c5730;
    --th-cyan: #3a6e82; --th-teal: #436058;
}

[data-theme="catppuccin-light"] {
    --th-bg: #e6e9ef; --th-bg-dark: #eff1f5; --th-bg-hl: #ccd0da;
    --th-border: #adb0be; --th-fg: #1e1e36; --th-fg-dim: #3c3f52;
    --th-comment: #5c5f73; --th-accent: #1755cc; --th-accent-dim: #5a72a8;
    --th-secondary: #6e2cc4; --th-tertiary: #c4409e; --th-green: #2d8220;
    --th-orange: #d04e00; --th-red: #b00a2e; --th-yellow: #b87818;
    --th-cyan: #037da5; --th-teal: #107a80;
}

[data-theme="rose-pine-light"] {
    --th-bg: #faf4ed; --th-bg-dark: #fffaf3; --th-bg-hl: #f0e6dc;
    --th-border: #cec8c4; --th-fg: #26233a; --th-fg-dim: #44415a;
    --th-comment: #625e78; --th-accent: #1a5568; --th-accent-dim: #4d7f90;
    --th-secondary: #6e5a8a; --th-tertiary: #b05e5a; --th-green: #3e7580;
    --th-orange: #b05e5a; --th-red: #93456a; --th-yellow: #c07e20;
    --th-cyan: #3e7580; --th-teal: #1a5568;
}

[data-theme="gruvbox-light"] {
    --th-bg: #fbf1c7; --th-bg-dark: #f9f5d7; --th-bg-hl: #e8dca4;
    --th-border: #bfb38b; --th-fg: #282828; --th-fg-dim: #3c3836;
    --th-comment: #5a534a; --th-accent: #2e6445; --th-accent-dim: #5a8a6a;
    --th-secondary: #752e58; --th-tertiary: #626006; --th-green: #626006;
    --th-orange: #8f2e00; --th-red: #7d0004; --th-yellow: #935e0e;
    --th-cyan: #2e6445; --th-teal: #044e5e;
}

[data-theme="nord-light"] {
    --th-bg: #e5e9f0; --th-bg-dark: #eceff4; --th-bg-hl: #d4dae4;
    --th-border: #b0b8c6; --th-fg: #1e2430; --th-fg-dim: #2e3440;
    --th-comment: #4c566a; --th-accent: #3e6690; --th-accent-dim: #6888a8;
    --th-secondary: #904e88; --th-tertiary: #3e6690; --th-green: #6d8e5a;
    --th-orange: #a8624a; --th-red: #984248; --th-yellow: #b89a52;
    --th-cyan: #5a8e8a; --th-teal: #3e6690;
}

/* ── HINTERGRUND ──────────────────────────────────────────────────────────── */

body,
#page_container,
#page_container > div,
main,
body > div {
    background-color: var(--th-bg-dark) !important;
    background-image: none !important;
}

/* ── SCHRIFTEN ────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

body {
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: var(--th-fg) !important;
}

code, pre, .font-mono {
    font-family: 'JetBrains Mono', monospace !important;
}

/* ── GLOBALE TEXT-FARBEN ──────────────────────────────────────────────────── */

body #page_container *:not(svg *):not([class*="bg-"]):not(input) {
    color: var(--th-fg) !important;
}

body #page_container .service a span + span,
body #page_container .service p,
body #page_container [class*="text-xs"],
body #page_container [class*="text-theme-500"],
body #page_container [class*="text-theme-300"] {
    color: var(--th-comment) !important;
}

body #information-widgets,
body #information-widgets * {
    color: var(--th-fg) !important;
}

#information-widgets {
    background: var(--th-bg) !important;
    border: 1px solid var(--th-border) !important;
    border-radius: 8px !important;
}

.information-widget-greeting span {
    font-weight: 600;
    color: var(--th-fg) !important;
}

.information-widget-resource .bg-theme-500 {
    background-color: var(--th-accent) !important;
}

.information-widget-resource span,
.information-widget-resource div {
    color: var(--th-fg-dim) !important;
}

body #information-widgets input::placeholder {
    color: var(--th-comment) !important;
}

/* ── SERVICE CARDS ────────────────────────────────────────────────────────── */

#page_container .service {
    background: var(--th-bg) !important;
    border: 1px solid var(--th-border) !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#page_container .service:hover {
    border-color: var(--th-accent) !important;
    box-shadow: 0 0 16px color-mix(in srgb, var(--th-accent) 20%, transparent);
    transform: translateY(-2px);
}

/* ── TABS ─────────────────────────────────────────────────────────────────── */

#tabs-container {
    background: var(--th-bg) !important;
    border: 1px solid var(--th-border) !important;
    border-radius: 8px !important;
}

#tabs-container button {
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 600; letter-spacing: 0.06em; font-size: 0.8rem !important;
    color: var(--th-comment) !important;
    transition: all 0.2s ease;
}

#tabs-container button:hover { color: var(--th-accent) !important; }

#tabs-container button[class*="bg-"] {
    background: var(--th-bg-hl) !important;
    color: var(--th-accent) !important;
    border: 1px solid var(--th-accent-dim) !important;
}

/* ── GRUPPEN-HEADER ───────────────────────────────────────────────────────── */

body .text-theme-800,
body h2[class*="text-theme"],
body section h2,
body [class*="text-theme-800"] {
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; font-size: 0.7rem !important;
    color: var(--th-secondary) !important;
}

/* ── STATUS DOTS ──────────────────────────────────────────────────────────── */

div[class*="bg-emerald"], div[class*="bg-green"] {
    background-color: var(--th-accent) !important;
    box-shadow: 0 0 6px color-mix(in srgb, var(--th-accent) 40%, transparent);
    animation: pulse-th 2.5s ease-in-out infinite;
}

@keyframes pulse-th { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

div[class*="bg-red"], div[class*="bg-orange"] {
    background-color: var(--th-red) !important;
    box-shadow: 0 0 6px color-mix(in srgb, var(--th-red) 40%, transparent);
}

/* ── SEARCH ───────────────────────────────────────────────────────────────── */

input[type="text"], input[type="search"] {
    background: var(--th-bg-hl) !important;
    border: 1px solid var(--th-border) !important;
    color: var(--th-fg) !important;
    border-radius: 6px !important;
}

input[type="text"]:focus, input[type="search"]:focus {
    border-color: var(--th-secondary) !important;
    box-shadow: 0 0 8px color-mix(in srgb, var(--th-secondary) 25%, transparent) !important;
    outline: none !important;
}

/* ── BOOKMARKS ────────────────────────────────────────────────────────────── */

body li[class*="bookmark"] a,
body li[class*="bookmark"] span {
    color: var(--th-fg-dim) !important;
}

body li[class*="bookmark"]:hover a,
body li[class*="bookmark"]:hover span {
    color: var(--th-cyan) !important;
}

body h2[class*="bookmark"],
body .bookmark-group-title,

body li[class*="bookmark"] a span,
body li[class*="bookmark"] a div,
body li[class*="bookmark"] [class*="text-right"],
body li[class*="bookmark"] [class*="justify-end"] span,
body li[class*="bookmark"] span:last-child {
    color: var(--th-comment) !important;
}
body section > div > h2 {

body li[class*="bookmark"] a span,
body li[class*="bookmark"] a div,
body li[class*="bookmark"] [class*="text-right"],
body li[class*="bookmark"] [class*="justify-end"] span,
body li[class*="bookmark"] span:last-child {
    color: var(--th-comment) !important;
}
    color: var(--th-secondary) !important;

body li[class*="bookmark"] a span,
body li[class*="bookmark"] a div,
body li[class*="bookmark"] [class*="text-right"],
body li[class*="bookmark"] [class*="justify-end"] span,
body li[class*="bookmark"] span:last-child {
    color: var(--th-comment) !important;
}
}

/* ── LINKS ────────────────────────────────────────────────────────────────── */

a { color: var(--th-fg-dim) !important; transition: color 0.2s ease; }
a:hover { color: var(--th-accent) !important; }

/* ── SCROLLBAR ────────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--th-bg-dark); }
::-webkit-scrollbar-thumb { background: var(--th-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--th-accent-dim); }

/* ── ERRORS ───────────────────────────────────────────────────────────────── */

.widget-error, [class*="error"], [class*="Error"] {
    background: color-mix(in srgb, var(--th-red) 8%, transparent) !important;
    border-color: var(--th-red) !important;
}

[class*="error"] span, [class*="Error"] span {
    color: var(--th-red) !important;
}

footer, footer * { color: var(--th-comment) !important; }

/* ── THEME SWITCHER UI ────────────────────────────────────────────────────── */

#theme-switcher {
    position: fixed; bottom: 16px; left: 16px; z-index: 10000;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}

#theme-toggle-btn {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--th-bg-hl); border: 1px solid var(--th-border);
    color: var(--th-secondary) !important; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; transition: all 0.2s ease;
}

#theme-toggle-btn:hover {
    border-color: var(--th-accent); background: var(--th-bg); transform: scale(1.05);
}

#theme-panel {
    display: none; background: var(--th-bg); border: 1px solid var(--th-border);
    border-radius: 8px; padding: 6px; margin-bottom: 4px; min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

#theme-panel.open { display: block; }

#mode-toggle {
    display: flex; margin: 0 4px 6px;
    border: 1px solid var(--th-border); border-radius: 5px; overflow: hidden;
}

#mode-toggle button {
    flex: 1; padding: 5px 0; border: none; background: transparent;
    color: var(--th-comment) !important; cursor: pointer;
    font-family: 'Exo 2', sans-serif; font-size: 11px; font-weight: 500;
    transition: all 0.15s ease;
}

#mode-toggle button:hover { color: var(--th-fg-dim) !important; }
#mode-toggle button.active { background: var(--th-bg-hl); color: var(--th-accent) !important; }

.theme-divider { height: 1px; background: var(--th-border); margin: 2px 4px 4px; }

.theme-option {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; border: none; background: transparent;
    color: var(--th-fg-dim) !important; cursor: pointer; border-radius: 4px;
    width: 100%; text-align: left;
    font-family: 'Exo 2', sans-serif; font-size: 11px; font-weight: 500;
    letter-spacing: 0.03em; transition: all 0.15s ease;
}

.theme-option:hover { background: var(--th-bg-hl); color: var(--th-fg) !important; }
.theme-option.active { color: var(--th-accent) !important; background: var(--th-bg-hl); }

.theme-dot {
    width: 14px; height: 14px; border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.2); flex-shrink: 0;
}

.theme-dot[data-t="tokyo-night"]  { background: #7aa2f7; }
.theme-dot[data-t="kanagawa"]     { background: #7E9CD8; }
.theme-dot[data-t="catppuccin"]   { background: #cba6f7; }
.theme-dot[data-t="rose-pine"]    { background: #c4a7e7; }
.theme-dot[data-t="gruvbox"]      { background: #d3869b; }
.theme-dot[data-t="nord"]         { background: #88c0d0; }

/* ── INFO-BAR OBEN (Greeting, DateTime, Search, Wetter) ───────────────────── */

/* Gesamte Bar */
body > div > div > div:first-child,
#information-widgets,
[class*="information-widget"] {
    background: var(--th-bg) !important;
}

/* Greeting Text */
body [class*="information-widget-greeting"] *,
body [class*="widget-greeting"] * {
    color: var(--th-fg) !important;
}

/* DateTime */
body [class*="information-widget-datetime"] *,
body [class*="widget-datetime"] * {
    color: var(--th-accent) !important;
}

/* Wetter */
body [class*="information-widget-openmeteo"] *,
body [class*="information-widget-weather"] * {
    color: var(--th-fg-dim) !important;
}

/* Such-Button (G) */
body [class*="information-widget-search"] button,
body [class*="widget-search"] button {
    background: var(--th-accent-dim) !important;
    color: var(--th-fg) !important;
    border: 1px solid var(--th-border) !important;
}

/* API-Fehler Badge */
body [class*="error"] *,
body [class*="Error"] * {
    color: var(--th-red) !important;
}