/* ==========================================================================
   Tasks24 brand overlay — theme.css
   Injected via nginx sub_filter before </head>, on top of the stock
   Vikunja 0.24.6 SPA (Vue + Bulma). No markup access — pure CSS.
   Selectors below are grounded against the actual v0.24.6 frontend source
   (go-vikunja/vikunja tag v0.24.6), not guessed.
   See docs/PLAN-2026-07-12-tasks24-rebrand.md (WO-2).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette re-skin — CSS custom-property overrides
   Vikunja's Bulma vars resolve at compute time via var() chains, e.g.
   --link: var(--primary); --button-hover-color: var(--link-hover, ...);
   --menu-item-active-background-color: var(--link, ...). Overriding the
   decomposed h/s/l/a fields (NOT the composite --primary/--link) lets
   Bulma's own calc()-based hover/active/focus shades recompute correctly
   from the new hue instead of mixing old-hue shadows with a new base color.
   --danger/--success/--warning are untouched on purpose.
   -------------------------------------------------------------------------- */
:root {
	/* coral #F0603E, decomposed */
	--primary-h: 11.5deg;
	--primary-s: 85.6%;
	--primary-l: 59.2%;
	--primary-a: 1;

	/* --link normally aliases --primary, but --link-light/-dark and the
	   input/button focus-ring shadows read --link-h/-s/-l directly, so it
	   needs the same values or focus rings stay the old blue. */
	--link-h: 11.5deg;
	--link-s: 85.6%;
	--link-l: 59.2%;
	--link-a: 1;

	--site-background: #FFF7EE;
	--text: #26202E;
	--text-strong: #26202E;
	--text-light: #7C7488;
}

/* --------------------------------------------------------------------------
   2. Targeted selectors for stragglers the variable cascade might miss
   (mostly reinforcement — .button.is-primary etc. already resolve to the
   new --primary via var(), these are the belt-and-suspenders per the spec).
   -------------------------------------------------------------------------- */
.button.is-primary,
.add-task-button {
	background-color: var(--primary);
	border-color: transparent;
}

a {
	color: var(--link);
}

.menu-list a.router-link-exact-active,
.navbar-item.router-link-exact-active {
	color: var(--primary);
}

/* --------------------------------------------------------------------------
   3. Logo swap — hide the stock artwork, paint brand/logo.svg in its place
   at a fixed box so layout doesn't shift. Three real render locations in
   0.24.6: desktop navbar (.logo-link), the mobile off-canvas nav
   (.top-menu > .logo), and the login/no-auth screen (.no-auth-wrapper > .logo).
   The innermost <svg class="logo"> is what actually draws the llama mark.
   -------------------------------------------------------------------------- */
.navbar .logo-link,
.menu-container .top-menu > .logo,
.no-auth-wrapper > .logo {
	width: 168px;
	height: 48px;
	background-image: url('/brand/logo.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.navbar .logo-link svg,
.menu-container .top-menu > .logo svg,
.no-auth-wrapper > .logo svg {
	visibility: hidden;
}

/* --------------------------------------------------------------------------
   4. Animations — transform/opacity/box-shadow only, GPU-friendly.
   -------------------------------------------------------------------------- */

/* Kanban cards: hover lift + elevated shadow */
.bucket .task {
	cursor: grab;
	transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.bucket .task:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md, 0 10px 20px rgba(10, 10, 10, .12), 0 3px 6px rgba(10, 10, 10, .08));
}

.bucket .task:active {
	cursor: grabbing;
}

/* Entry: staggered fade-up, capped at 8 children.
   .tasks is the draggable list container in both the kanban view
   (ul.tasks per bucket) and the plain project-list view (ul.tasks). */
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tasks > *:nth-child(-n+8) {
	animation: fadeUp 260ms ease-out both;
}

.tasks > *:nth-child(1) { animation-delay: 0ms; }
.tasks > *:nth-child(2) { animation-delay: 40ms; }
.tasks > *:nth-child(3) { animation-delay: 80ms; }
.tasks > *:nth-child(4) { animation-delay: 120ms; }
.tasks > *:nth-child(5) { animation-delay: 160ms; }
.tasks > *:nth-child(6) { animation-delay: 200ms; }
.tasks > *:nth-child(7) { animation-delay: 240ms; }
.tasks > *:nth-child(8) { animation-delay: 280ms; }

/* Modals / task-detail overlay: scale-fade in */
@keyframes modalPopIn {
	from {
		opacity: 0;
		transform: scale(.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes modalMaskFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.modal-mask {
	animation: modalMaskFadeIn 150ms ease-out both;
}

.modal-content {
	animation: modalPopIn 180ms ease-out both;
}

/* Done-checkbox toggle: brief scale pop */
@keyframes checkPop {
	0% { transform: scale(1); }
	50% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

.fancy-checkbox input:checked + .fancy-checkbox__icon {
	animation: checkPop 240ms ease-out;
}

/* Kanban card's "Done" badge (Done.vue) mounts fresh via v-if, same pop */
.is-done {
	animation: checkPop 240ms ease-out;
}

/* Buttons: quick color/press feedback */
.button {
	transition: background-color 100ms ease-out, transform 100ms ease-out;
}

.button:active {
	transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   5. Respect reduced-motion — disables everything added above. Non-negotiable.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}