/* NePornu skin for Vikunja: Asana-like charcoal chrome, white/graphite canvas, blue accent */
:root {
	--np-chrome: #2e2e30;
	--np-chrome-hover: rgba(255, 255, 255, .08);
	--np-chrome-active: rgba(255, 255, 255, .14);
	--np-chrome-border: #424244;
	--np-chrome-text: #f5f4f3;
	--np-chrome-muted: #a2a0a2;
	--np-canvas: #ffffff;
	--np-surface: #ffffff;
	--np-border: #e8e6e6;
	--np-row-hover: #f6f5f5;
	--np-text: #1e1f21;
	--np-muted: #6d6e6f;
	--primary-h: 220deg;
	--primary-s: 60%;
	--primary-l: 55%;
}
html.dark {
	--np-chrome: #2e2e30;
	--np-canvas: #1e1f21;
	--np-surface: #252628;
	--np-border: #3a3b3d;
	--np-row-hover: #2a2b2d;
	--np-text: #f5f4f3;
	--np-muted: #a2a0a2;
	--primary-l: 62%;
}

html, body, button, input, select, textarea, .button, .input, .title, .subtitle {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
html, body, .app-container { background: var(--np-canvas) !important; }
body { color: var(--np-text); -webkit-font-smoothing: antialiased; }

/* top bar */
.navbar {
	background: var(--np-chrome) !important;
	color: var(--np-chrome-text) !important;
	border-bottom: 1px solid var(--np-chrome-border);
	box-shadow: none !important;
}
.navbar, .navbar a, .navbar .base-button, .navbar .project-title, .navbar h1, .navbar .icon, .navbar .username {
	color: var(--np-chrome-text) !important;
}
.navbar .project-title, .navbar h1 { font-weight: 600 !important; font-size: 1.15rem !important; letter-spacing: -.01em; }
.navbar .menu-show-button span, .navbar .menu-show-button::before, .navbar .menu-show-button::after { background: var(--np-chrome-text) !important; }

/* logo: transparent NePornu mask tinted with the current text colour */
svg.logo { display: none !important; }
.logo-link { color: var(--np-chrome-text) !important; }
.logo-link::before, :has(> svg.logo)::before {
	content: "";
	display: block;
	background-color: currentColor;
	-webkit-mask: url("/np-brand/logo.png") center / contain no-repeat;
	mask: url("/np-brand/logo.png") center / contain no-repeat;
}
.logo-link::before { width: 104px; height: 44px; }
.logo-link :has(> svg.logo)::before { display: none; }
:has(> svg.logo)::before { width: 180px; height: 76px; margin: 0 auto 1.5rem; }

/* sidebar */
.menu-container {
	background: var(--np-chrome) !important;
	color: var(--np-chrome-text) !important;
	border-right: 1px solid var(--np-chrome-border);
	box-shadow: none !important;
}
.menu-container a, .menu-container .base-button, .menu-container .menu-label,
.menu-container .list-menu-title, .menu-container .icon, .menu-container .menu-item-icon,
.menu-container .collapse-project-button, .menu-container .color-bubble + span {
	color: var(--np-chrome-text) !important;
}
.menu-container .menu-label, .menu-container .menu-bottom-link, .menu-container .collapse-project-button { color: var(--np-chrome-muted) !important; }
.menu-container .menu-list a, .menu-container .list-menu-link {
	border-radius: 6px !important;
	transition: background .12s ease;
}
.menu-container .menu-list a:hover, .menu-container .list-menu-link:hover,
.menu-container .list-menu:hover > .list-menu-link { background: var(--np-chrome-hover) !important; }
.menu-container .router-link-exact-active, .menu-container .router-link-active.list-menu-link,
.menu-container a.is-active { background: var(--np-chrome-active) !important; color: #fff !important; }
.menu-container .menu-list-dropdown-trigger, .menu-container .dropdown-trigger .icon { color: var(--np-chrome-muted) !important; }
.menu-container ::-webkit-scrollbar-thumb { background: #4a4a4c; }

/* view switcher: Asana-style underline tabs */
.switch-view {
	background: transparent !important;
	box-shadow: none !important;
	border-bottom: 1px solid var(--np-border);
	border-radius: 0 !important;
	padding: 0 !important;
	gap: .25rem;
}
.switch-view .switch-view-button, .switch-view a, .switch-view .base-button {
	background: transparent !important;
	color: var(--np-muted) !important;
	border-radius: 0 !important;
	border-bottom: 2px solid transparent;
	padding: .55rem .8rem !important;
	font-weight: 500;
	box-shadow: none !important;
}
.switch-view .is-active, .switch-view .router-link-active, .switch-view [aria-current] {
	color: var(--np-text) !important;
	border-bottom-color: var(--np-text) !important;
}

/* cards & lists */
.card, .list-view .card, .kanban .bucket, .table-view .card, .gantt-container {
	background: var(--np-surface) !important;
	border: 1px solid var(--np-border) !important;
	box-shadow: none !important;
	border-radius: 8px !important;
}
.tasks .single-task, .tasks .task {
	border-radius: 0 !important;
	border-bottom: 1px solid var(--np-border);
}
.tasks .single-task:hover, .tasks .task:hover { background: var(--np-row-hover) !important; }
.kanban .bucket { background: transparent !important; border: none !important; }
.kanban .bucket .task, .kanban-card, .kanban .card {
	background: var(--np-surface) !important;
	border: 1px solid var(--np-border) !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06) !important;
}
.kanban .bucket .task:hover, .kanban-card:hover { border-color: #c4c2c2 !important; }
html.dark .kanban .bucket .task:hover, html.dark .kanban-card:hover { border-color: #5a5b5d !important; }
.tag { border-radius: 999px !important; font-weight: 500; }

/* inputs & buttons */
.input, .textarea, .select select, .multiselect .input-wrapper {
	border-radius: 6px !important;
	box-shadow: none !important;
	border-color: var(--np-border) !important;
	background: var(--np-surface) !important;
	color: var(--np-text) !important;
}
.button { border-radius: 6px !important; box-shadow: none !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
.button.is-primary { background: hsl(var(--primary-h), var(--primary-s), var(--primary-l)) !important; }
/* kanban columns */
.kanban .bucket { background: var(--np-row-hover) !important; border-radius: 10px !important; }

/* list view (main view): full-width Asana-like rows */
.list-view.is-max-width-desktop { max-width: none !important; }
.list-view .card { border: none !important; background: transparent !important; }
.list-view .card-content { padding: 0 !important; }
.tasks .single-task {
	padding: .5rem .75rem !important;
	margin: 0 !important;
	border-bottom: 1px solid var(--np-border) !important;
}
.tasks .single-task .task-link { color: var(--np-text) !important; font-size: .92rem; font-weight: 400; }
.tasks .single-task.is-done .task-link, .tasks .is-done .tasktext { color: var(--np-muted) !important; }
.tasks .tag { font-size: .72rem !important; padding: .1rem .5rem !important; }
.tasks .favorite, .tasks .handle { opacity: 0; transition: opacity .12s; }
.tasks .single-task:hover .favorite, .tasks .single-task:hover .handle, .tasks .favorite.is-favorite { opacity: 1; }

/* round Asana-style completion check */
.tasks .fancy-checkbox__icon {
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border: 1.5px solid #a2a0a2;
	border-radius: 50%;
	background: transparent center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23a2a0a2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tasks .fancy-checkbox__icon path, .tasks .fancy-checkbox__icon polyline { display: none; }
.tasks .fancy-checkbox:hover .fancy-checkbox__icon {
	border-color: #58a182;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%2358a182' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tasks .fancy-checkbox input:checked + .fancy-checkbox__icon {
	background-color: #58a182;
	border-color: #58a182;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* login (shown after logout): single clean card, no llama, no stock photo */
.no-auth-wrapper {
	background: var(--np-canvas) !important;
	justify-content: center;
	padding-block-end: 4rem !important;
}
.no-auth-wrapper > .logo {
	block-size: auto !important;
	margin: 0 auto 1.75rem !important;
	color: var(--np-text);
}
.no-auth-wrapper > .logo::before { width: 160px; height: 66px; margin: 0 auto 2rem; }
.noauth-container {
	max-inline-size: 420px !important;
	min-block-size: 0 !important;
	background: var(--np-surface) !important;
	border: 1px solid var(--np-border);
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06) !important;
}
.noauth-container .image, .noauth-container .api-config { display: none !important; }
.noauth-container .content {
	inline-size: 100% !important;
	padding: 2.25rem 2rem 1.75rem !important;
	text-align: center;
}
.noauth-container .title {
	margin-block-end: 1.75rem !important;
	color: var(--np-text) !important;
	font-size: 1.6rem !important;
	font-weight: 600 !important;
	letter-spacing: -.02em;
}
.noauth-container .title::after {
	content: "Do úkolů a projektů NePornu se přihlásíš svým účtem @nepornu.cz.";
	display: block;
	margin-block-start: .5rem;
	color: var(--np-muted);
	font-size: .95rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
}
.noauth-container .button.is-outlined {
	display: flex !important;
	gap: .75rem;
	align-items: center;
	justify-content: center;
	block-size: auto !important;
	padding: .7rem 1rem !important;
	background: var(--np-surface) !important;
	border: 1px solid var(--np-border) !important;
	border-radius: 8px !important;
	color: var(--np-text) !important;
	font-size: .95rem !important;
}
.noauth-container .button.is-outlined:hover { background: var(--np-row-hover) !important; }
.noauth-container .button.is-outlined::before {
	content: "";
	inline-size: 18px;
	block-size: 18px;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E");
}

/* task completion celebrations (nepornu.js) */
.np-celebrate { position: fixed; inset: 0; z-index: 10000; overflow: hidden; pointer-events: none; }
.np-celebrate span { position: absolute; left: 0; top: 0; line-height: 1; will-change: transform, opacity; user-select: none; }
.np-celebrate .np-bit { border-radius: 2px; }