/* ===========================================================================
   onfluid Theme für Vikunja v2.5.x   ·   v3
   ---------------------------------------------------------------------------
   Drei Ebenen:
     A) Design-Tokens  – Override der ~349 Variablen, die Vikunja selbst setzt
     B) Fundament      – Rendering, Farbschema, Flächen-Tiefe
     C) Komponenten    – dort, wo Vikunja hart verdrahtet (radius:4px,
                         Quicksand-Font, Prioritäten als bloßer Farbtext)

   Spezifitäts-Trick: Vikunja nutzt Vue-Scoped-CSS (`.task[data-v-a9810b5a]`,
   Spezifität 0,2,0). Ein einfaches `.task` würde verlieren – deshalb die
   Verdopplung `.task.task`: gleiche Spezifität, aber diese Datei lädt später.
   Die data-v-Hashes werden NIE referenziert, die ändern sich pro Build.

   Gestalterische Leitlinie: Zurückhaltung plus drei präzise Momente –
   das Abhaken, der Primary-Button, die Papier-Fläche. Kein Weihnachtsbaum.

   CI: Navy #0A2540 · Green #1D5A48 · Mint #7BC4A4 · Cream #FAF8F3 · Blue #267BD9
   Version: 3   (bei Änderung ?v= in nginx.conf hochzählen)
   =========================================================================== */

@font-face {
	font-family: 'DM Sans onfluid';
	src: url('/theme-assets/fonts/dm-sans-latin.woff2') format('woff2');
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
	               U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   A) TOKENS — LIGHT
   =========================================================================== */
:root {
	color-scheme: light;

	--of-navy: #0A2540;
	--of-green: #1D5A48;
	--of-mint: #7BC4A4;
	--of-cream: #FAF8F3;
	--of-blue: #267BD9;
	--of-tint: 10, 37, 64;               /* Navy als rgb – für Schatten */

	/* ---------- Akzent ---------- */
	--primary-h: 162deg;
	--primary-s: 51%;
	--primary-l: 26%;
	--primary-dark-l: 18%;
	--primary-light-l: 94%;
	--primary-invert-l: 100%;

	--link-h: 162deg;
	--link-s: 51%;
	--link-l: 26%;
	--link-dark-l: 20%;
	--link-light-l: 94%;
	--link-visited: #1D5A48;

	/* ---------- Status ----------
	   Vikunja-Default war Signalrot (H3 S100 L61) und Warnorange. Auf Cream
	   wirkt das nach Baustelle. Gedeckt und wärmer bleibt genauso eindeutig. */
	--danger-h: 6deg;      --danger-s: 66%;  --danger-l: 51%;
	--danger-dark-l: 38%;  --danger-light-l: 95%;  --danger-text-l: 42%;
	--warning-h: 32deg;    --warning-s: 78%; --warning-l: 47%;
	--warning-dark-l: 34%; --warning-light-l: 95%;
	--success-h: 156deg;   --success-s: 46%; --success-l: 36%;
	--success-dark-l: 26%; --success-light-l: 94%;
	--info-h: 212deg;      --info-s: 70%;    --info-l: 46%;
	--info-dark-l: 34%;    --info-light-l: 95%;

	/* ---------- Flächen ---------- */
	--site-background: #FAF8F3;
	--scheme-main-bis: #FDFCFA;
	--scheme-main-ter: #F5F1E9;
	--background: #F2EEE6;

	/* ---------- Text ---------- */
	--text-strong: #0A2540;
	--text: #33475B;
	--text-light: #6B7C8F;
	--text-muted: #6B7C8F;

	/* ---------- Kanten ---------- */
	--border: #E7E1D5;
	--border-light: #F0EBE1;
	--border-hover: #C9BFAD;
	--card-border-color: #EBE5D9;

	/* ---------- Radien ---------- */
	--radius-small: 8px;
	--radius: 12px;
	--radius-large: 18px;
	--of-r-card: 14px;
	--of-r-control: 10px;
	--of-r-pill: 999px;

	/* ---------- Schatten: Navy-getönt, mehrstufig ---------- */
	--shadow-xs: 0 1px 2px rgba(var(--of-tint), .05), 0 1px 3px rgba(var(--of-tint), .04);
	--shadow-sm: 0 2px 6px rgba(var(--of-tint), .06), 0 1px 3px rgba(var(--of-tint), .05);
	--shadow-md: 0 8px 24px rgba(var(--of-tint), .09), 0 2px 8px rgba(var(--of-tint), .05);
	--shadow-lg: 0 20px 56px rgba(var(--of-tint), .14), 0 6px 16px rgba(var(--of-tint), .07);
	/* farbiger Schatten für den Primary-Button – der Trick, der teuer aussieht */
	--of-glow: 0 6px 20px hsla(var(--primary-h), var(--primary-s), var(--primary-l), .30);

	/* ---------- Typografie ---------- */
	--family-primary: 'DM Sans onfluid', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--family-sans-serif: var(--family-primary);
	--body-family: var(--family-primary);
	--title-family: var(--family-primary);
	--subtitle-family: var(--family-primary);
	--font-family-base: var(--family-primary);

	/* ---------- Sidebar ---------- */
	--sidebar-width: 292px;
	--menu-item-radius: 10px;
	--menu-item-color: #33475B;
	--menu-item-hover-background-color: rgba(29, 90, 72, .07);
	--menu-item-hover-color: #0A2540;
	--menu-item-active-background-color: rgba(29, 90, 72, .11);
	--menu-item-active-color: #1D5A48;
	--menu-list-link-padding: .55em .8em;
	--menu-label-color: #97A3AF;
	--menu-label-letter-spacing: .13em;
	--menu-list-border-left: 1px solid #E7E1D5;
	--logo-text-color: #0A2540;

	/* ---------- Kleinteile ---------- */
	--tag-background-color: #EFEADF;
	--tag-color: #33475B;
	--tag-radius: var(--of-r-pill);
	--progress-bar-background-color: #E7E1D5;
	--progress-value-background-color: var(--primary);
	--grey-200: #E7E1D5;
	--grey-300: #CFC6B6;
}

/* ===========================================================================
   A) TOKENS — DARK
   --white über H/S/L setzen, nicht direkt: Vikunja rechnet Focus-Ringe daraus.
   =========================================================================== */
.dark {
	color-scheme: dark;
	--of-tint: 0, 0, 0;

	--primary-h: 154deg;
	--primary-s: 40%;
	--primary-l: 62%;
	--primary-dark-l: 48%;
	--primary-light-l: 24%;
	--primary-invert-l: 8%;

	--link-h: 154deg;
	--link-s: 40%;
	--link-l: 64%;
	--link-dark-l: 50%;
	--link-visited: #7BC4A4;

	--danger-l: 62%;   --danger-text-l: 68%;  --danger-light-l: 22%;
	--warning-l: 58%;  --warning-light-l: 22%;
	--success-l: 52%;  --success-light-l: 20%;
	--info-l: 58%;     --info-light-l: 22%;

	--white-h: 210deg;
	--white-s: 73%;
	--white-l: 14.5%;
	--grey-50-hsl: 210, 73%, 14.5%;
	--grey-50: hsl(var(--grey-50-hsl));

	--site-background: #061A2C;
	--background: #10314F;
	--scheme-main-bis: #0E2C48;
	--scheme-main-ter: #12385A;

	--text-strong: #FAF8F3;
	--text: #C6D4E2;
	--text-light: #8DA2B8;
	--text-muted: #8DA2B8;

	--border: #1A405F;
	--border-light: #143351;
	--border-hover: #23557E;
	--card-border-color: rgba(123, 196, 164, .16);

	--shadow-lg: 0 24px 64px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .35);
	--of-glow: 0 6px 22px hsla(var(--primary-h), var(--primary-s), 45%, .40);

	--menu-item-color: #C6D4E2;
	--menu-item-hover-background-color: rgba(123, 196, 164, .10);
	--menu-item-hover-color: #FAF8F3;
	--menu-item-active-background-color: rgba(123, 196, 164, .15);
	--menu-item-active-color: #7BC4A4;
	--menu-label-color: #6E8399;
	--menu-list-border-left: 1px solid #1A405F;
	--logo-text-color: #FAF8F3;

	--tag-background-color: #14395B;
	--tag-color: #C6D4E2;
	--progress-bar-background-color: #14395B;
	--grey-200: #1A405F;
	--grey-300: #24557E;
}

/* ===========================================================================
   B) FUNDAMENT
   =========================================================================== */

/* Schrift durchsetzen – Vikunja verdrahtet in der Sidebar hart "Quicksand". */
body,
button, input, select, textarea,
.button, .input, .textarea, .select select,
.top-menu .menu-list li,
.menu-list a,
h1, h2, h3, h4, .title, .subtitle {
	font-family: var(--family-primary) !important;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* native Auswahl-Elemente (Checkbox, Radio, Range) im Akzent */
	accent-color: hsl(var(--primary-hsl));
}

/* Ziffern tabellarisch – Daten, Zähler und Kürzel stehen sonst unruhig */
time, .dueDate, .task-identifier, .task-glance-meta, .number, td, th {
	font-variant-numeric: tabular-nums;
}

/* Headlines: enger, ausbalancierter Umbruch */
h1, h2, h3, .title {
	letter-spacing: -0.018em;
	text-wrap: balance;
}

/* Papier statt Farbfläche: ein kaum sichtbarer Verlauf gibt der Cream-Fläche
   Tiefe. Ohne das wirkt jede große einfarbige Fläche tot. */
.app-container,
.app-container.has-background {
	background-image:
		radial-gradient(1200px 600px at 15% -5%, rgba(123, 196, 164, .10), transparent 60%),
		radial-gradient(900px 500px at 100% 0%, rgba(38, 123, 217, .06), transparent 55%);
	background-attachment: fixed;
}

.dark .app-container,
.dark .app-container.has-background {
	background-image:
		radial-gradient(1100px 560px at 12% -8%, rgba(123, 196, 164, .09), transparent 60%),
		radial-gradient(900px 500px at 100% 0%, rgba(38, 123, 217, .10), transparent 55%);
}

/* Navbar: leicht durchscheinend statt Blockfläche */
.navbar.navbar {
	background-color: hsla(var(--white-h), var(--white-s), var(--white-l), .82);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--border-light);
	box-shadow: none;
}

/* Grundton der Bewegung */
.button, .card, .task, .tag, .menu-list a,
.dropdown-content, .input, .textarea, .favorite {
	transition: background-color .16s ease, border-color .16s ease,
	            box-shadow .2s cubic-bezier(.2, .7, .3, 1),
	            transform .2s cubic-bezier(.2, .7, .3, 1), color .16s ease;
}

/* ===========================================================================
   C) KOMPONENTEN
   =========================================================================== */

/* ---------------------------------------------------------------------------
   MOMENT 1 — DAS ABHAKEN
   Vikunja bringt bereits eine SVG-Stroke-Animation mit, lässt sie aber in
   Grau auslaufen. Mit Akzentfarbe und einem kurzen Puls wird daraus der
   befriedigendste Klick der App.
   --------------------------------------------------------------------------- */
.fancy-checkbox__icon {
	--stroke-color: #C2C9D2;
}

.dark .fancy-checkbox__icon {
	--stroke-color: #3E5A76;
}

.fancy-checkbox input:checked + .fancy-checkbox__icon {
	--stroke-color: hsl(var(--primary-hsl));
	animation: of-check-pop .34s cubic-bezier(.2, 1.5, .4, 1);
}

@keyframes of-check-pop {
	0%   { transform: scale(1); }
	42%  { transform: scale(1.22); }
	100% { transform: scale(1); }
}

.fancy-checkbox input:focus-visible + .fancy-checkbox__icon,
.fancy-checkbox input:focus + .fancy-checkbox__icon {
	border-radius: 7px;
	box-shadow: 0 0 0 3px hsla(var(--primary-hsl), .35);
}

/* ---------------------------------------------------------------------------
   MOMENT 2 — DER PRIMARY-BUTTON
   Flache Fläche + grauer Schatten = Bootstrap 2013. Feiner Verlauf, farbiger
   Schatten in der Akzentfarbe, Lift beim Hover.
   --------------------------------------------------------------------------- */
.button.button {
	border-radius: var(--of-r-control);
	font-weight: 600;
	letter-spacing: .005em;
	border-color: var(--border);
}

.button.button:hover {
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

.button.button:active {
	transform: translateY(0);
	box-shadow: var(--shadow-xs);
}

.button.is-primary.is-primary {
	border-color: transparent;
	background-image: linear-gradient(
		180deg,
		hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 6%)),
		hsl(var(--primary-hsl))
	);
	box-shadow: 0 1px 2px rgba(var(--of-tint), .16),
	            inset 0 1px 0 hsla(0, 0%, 100%, .12);
}

.button.is-primary.is-primary:hover {
	box-shadow: var(--of-glow), inset 0 1px 0 hsla(0, 0%, 100%, .16);
	transform: translateY(-1px);
}

.button.button:focus,
.button.button:focus-visible {
	outline: 2px solid hsl(var(--primary-hsl));
	outline-offset: 2px;
}

.button.is-small.is-small { border-radius: var(--radius-small); }

/* ---------------------------------------------------------------------------
   MOMENT 3 — PRIORITÄTEN
   Vikunja rendert sie als bloßen farbigen Text. Daraus werden Badges.
   --------------------------------------------------------------------------- */
.high-priority.high-priority,
.not-so-high.not-so-high {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .16em .64em .2em;
	border-radius: var(--of-r-pill);
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .015em;
	line-height: 1.35;
	white-space: nowrap;
}

.high-priority.high-priority {
	background: hsla(var(--danger-h), var(--danger-s), var(--danger-l), .12);
	color: hsl(var(--danger-h), var(--danger-s), var(--danger-text-l));
	box-shadow: inset 0 0 0 1px hsla(var(--danger-h), var(--danger-s), var(--danger-l), .26);
}

.not-so-high.not-so-high {
	background: hsla(var(--warning-h), var(--warning-s), var(--warning-l), .14);
	color: hsl(var(--warning-h), var(--warning-s), var(--warning-dark-l));
	box-shadow: inset 0 0 0 1px hsla(var(--warning-h), var(--warning-s), var(--warning-l), .28);
}

.dark .not-so-high.not-so-high {
	color: hsl(var(--warning-h), var(--warning-s), 72%);
}

.task[data-is-overdue] .dueDate.dueDate,
.task[data-is-overdue] .dueDate.dueDate time {
	color: hsl(var(--danger-h), var(--danger-s), var(--danger-text-l));
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   AUFGABEN-ZEILEN
   --------------------------------------------------------------------------- */
.task.task {
	border-radius: var(--of-r-control);
	padding: .5rem .6rem;
	border: 2px solid transparent;
}

/* Hover schiebt die Zeile minimal an – reagiert spürbar, ohne zu zappeln */
.task.task:hover {
	background-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .06);
	transform: translateX(2px);
}

.dark .task.task:hover {
	background-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .10);
}

.task.task:has(:focus-visible),
.task.task:focus {
	box-shadow: 0 0 0 3px hsla(var(--primary-hsl), .32);
}

.task-identifier.task-identifier {
	letter-spacing: .02em;
	color: var(--text-light);
	font-weight: 600;
}

.task-title.task-title { font-weight: 600; }

/* Favoriten-Stern: Vikunja nimmt --warning, das ist jetzt der ruhigere Amber */
.favorite.is-favorite { color: hsl(var(--warning-h), var(--warning-s), var(--warning-l)); }
.favorite:hover { transform: scale(1.15); }

/* Kanban-Karten – Vikunja setzt hier 4px mit !important */
.kanban .tasks .task.task {
	border-radius: var(--of-r-card) !important;
	box-shadow: var(--shadow-xs);
}

.kanban .tasks .task.task:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   KARTEN & OVERLAYS
   --------------------------------------------------------------------------- */
.card.card {
	border-radius: var(--of-r-card);
	border: 1px solid var(--card-border-color);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.card.card .card-header {
	border-radius: var(--of-r-card) var(--of-r-card) 0 0;
	box-shadow: none;
	border-bottom: 1px solid var(--border-light);
}

.card.card .card-header-title {
	font-weight: 700;
	color: var(--text-strong);
	letter-spacing: -.01em;
}

.dropdown-content,
.notifications .notifications-list,
.task-glance-tooltip,
.quick-actions,
.v-popper--theme-dropdown .v-popper__inner,
.v-popper--theme-tooltip .v-popper__inner {
	border-radius: var(--of-r-card) !important;
	box-shadow: var(--shadow-lg) !important;
}

.modal-content .card,
.message, .message-wrapper {
	border-radius: var(--of-r-card);
}

/* Login-Screen – der erste Eindruck, auch wenn man ihn selten sieht */
.noauth-container {
	border-radius: var(--radius-large) !important;
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--card-border-color);
}

/* ---------------------------------------------------------------------------
   SIDEBAR
   Aktives Item: linker Akzentbalken statt Vollfläche.
   --------------------------------------------------------------------------- */
.menu-list a {
	border-radius: var(--menu-item-radius);
	font-weight: 500;
}

.menu-list a.is-active {
	font-weight: 700;
	box-shadow: inset 3px 0 0 0 hsl(var(--primary-hsl));
}

.menu .menu-list li > div:hover { background: transparent; }

.menu-label {
	font-weight: 700;
	text-transform: uppercase;
	font-size: .68rem;
}

/* Projekt-Farbpunkte etwas präsenter */
.color-bubble { box-shadow: 0 0 0 2px hsla(var(--white-h), var(--white-s), var(--white-l), .9); }

/* ---------------------------------------------------------------------------
   FORMULARE
   --------------------------------------------------------------------------- */
.input, .textarea, .select select {
	border-radius: var(--of-r-control);
}

.input:focus, .textarea:focus, .select select:focus {
	box-shadow: 0 0 0 3px hsla(var(--primary-hsl), .16);
	border-color: hsl(var(--primary-hsl));
}

/* ---------------------------------------------------------------------------
   LABELS, KLEINTEILE
   --------------------------------------------------------------------------- */
.tag:not(body) {
	border-radius: var(--of-r-pill);
	padding-inline: .74em;
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .012em;
}

.progress-bar { border-radius: var(--of-r-pill); overflow: hidden; }

/* Avatar mit feinem Ring statt harter Kante */
.avatar {
	box-shadow: 0 0 0 2px hsla(var(--white-h), var(--white-s), var(--white-l), 1),
	            0 0 0 3px hsla(var(--primary-h), var(--primary-s), var(--primary-l), .22);
}

/* Logo: die Wortmarke ist 431×173 (2,5:1) und zweizeilig – Vikunjas Deckel von
   168×48 lässt "consulting" zu klein werden. NUR in Navbar/Sidebar aufweiten:
   global gilt `.logo` auch für den Login-Screen (dort 100px hoch), den würde
   ein pauschales !important zusammenstauchen. */
.navbar .logo,
.top-menu .logo {
	max-inline-size: 196px !important;
	max-block-size: 44px !important;
	object-fit: contain;
}

/* Scrollbars im CI statt Systemgrau */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .22);
	border-radius: var(--of-r-pill);
	border: 2px solid transparent;
	background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
	background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .42);
	background-clip: content-box;
}

::selection {
	background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .22);
	color: var(--text-strong);
}

/* ---------------------------------------------------------------------------
   Barrierefreiheit
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.button, .card, .task, .tag, .menu-list a,
	.dropdown-content, .input, .textarea, .favorite {
		transition: none;
	}
	.button.button:hover,
	.task.task:hover,
	.favorite:hover,
	.kanban .tasks .task.task:hover {
		transform: none;
	}
	.fancy-checkbox input:checked + .fancy-checkbox__icon {
		animation: none;
	}
}