/* lewkAi brand overlay for Vikunja — injected by nginx, no fork.
   Source of truth: lewkai.com nav logo + lewkai-site/app/globals.css tokens.
   Re-check after every Vikunja upgrade: selectors come from the compiled app. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  /* lewkAi accent #1a56db -> hsl(221, 79%, 48%) */
  --primary-h: 221deg;
  --primary-s: 79%;
  --primary-l: 48%;
  --lewkai-fg: #1A1A1A;
  --lewkai-gradient: linear-gradient(135deg, #00ff88 0%, #00ccff 100%);
}

html, body, button, input, select, textarea, .button {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1, h2, h3, .title, .subtitle {
  font-family: 'Space Grotesk', 'Outfit', sans-serif;
  letter-spacing: -0.02em;
}

/* ---- Logo ------------------------------------------------------------- */
/* Hide whatever the bundled logo draws, paint the lewkAi mark instead,
   then add the wordmark with ::after on the HTML parent (so the webfont
   applies — an SVG used as a background cannot load external fonts). */
svg.logo { background: url('/brand/mark.svg') no-repeat center / contain; }
svg.logo > * { display: none !important; }

a.logo, a.logo-link, div.logo {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  inline-size: auto !important;
}
a.logo > svg, a.logo-link > svg {
  inline-size: 30px !important; block-size: 30px !important;
  width: 30px !important; height: 30px !important;
}
div.logo > svg.logo {
  inline-size: 48px !important; block-size: 48px !important;
  width: 48px !important; height: 48px !important;
}
a.logo::after, a.logo-link::after, div.logo::after {
  content: 'lewkAi';
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lewkai-fg);
  font-size: 1.5rem;
}
div.logo::after { font-size: 2rem; }

/* ---- Vikunja's own artwork ------------------------------------------- */
/* Page background stays neutral so the mark reads; the gradient is used
   only on the login card's side panel, the way lewkai.com uses it. */
.no-auth-wrapper { background-image: none !important; background: #FAFAFA !important; }
.no-auth-wrapper .image,
section.image { background-image: var(--lewkai-gradient) !important; }
.offline { background-image: var(--lewkai-gradient) !important; }

/* "Using Vikunja installation at ..." on the login screen */
.api-url-info { display: none !important; }

/* The top navbar logo is a mobile-only element in Vikunja; do not let the
   flex rule above resurrect it on desktop next to the sidebar logo. */
@media (min-width: 770px) { a.logo-link { display: none !important; } }

/* Sidebar footer credit — hidden rather than reworded, see the install log
   for the AGPL note on attribution. */
.menu-bottom-link, a[href*="vikunja.io"] { display: none !important; }