/*
 * Theme "Studio" for Vikunja - Baglioni Andrea Web Agency.
 * Tokens from the Stitch design sheet: dark-first, Space Grotesk, blue #2b4bee -> cyan gradient.
 * Vikunja styles are scoped (class + data-v attribute), so component rules use !important.
 */

/* ---------- Font (self-hosted, no Google requests) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url(/brand/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url(/brand/fonts/space-grotesk-latin.woff2) format('woff2');
  font-weight: 300 700;
  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;
}

/* ---------- Tokens ---------- */
html:root {
  --brand-blue: #2b4bee;
  --brand-blue-light: #4f6ef7;
  --brand-cyan: #00f0ff;
  --brand-gradient: linear-gradient(135deg, #2b4bee 0%, #00d2ff 100%);
  --brand-soft-gradient: linear-gradient(180deg, rgba(43, 75, 238, .15) 0%, rgba(0, 240, 255, .02) 100%);
  --brand-font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-card: 16px;
  --radius-control: 10px;
  --radius-small: 6px;
  --hairline: rgba(15, 23, 42, .08);
  --surface-hover: #f1f5f9;
  --focus-ring: 0 0 0 1px var(--brand-cyan), 0 0 12px rgba(0, 240, 255, .2);
  --glass-shadow: 0 10px 30px -12px rgba(15, 23, 42, .18);

  /* Vikunja primary = #2b4bee */
  --primary-h: 230deg;
  --primary-s: 85%;
  --primary-l: 55%;
  --link-h: 230deg;

  /* Light mode mapping */
  --site-background: #f8fafc;
  --text-strong: #0f172a;
  --text-muted: #64748b;
  --card-border-color: #e2e8f0;
}

html:root.dark {
  --primary-h: 230deg;
  --primary-s: 85%;
  --primary-l: 64%;

  /* Surfaces: canvas #0a0a0f, cards #161622, hover #202030 */
  --grey-50-hsl: 240, 21%, 11%;
  --grey-100-hsl: 240, 20%, 5%;
  --grey-200: #26263a;
  --grey-300: #64748b;
  --grey-400: #7c8799;
  --grey-500-hsl: 215, 20%, 65%;
  --grey-600: #cbd5e1;
  --grey-700: #e2e8f0;
  --grey-800: #e2e8f0;
  --grey-900-hsl: 210, 40%, 96%;
  --site-background: #0a0a0f;
  --scheme-main-bis: #1b1b29;
  --scheme-main-ter: #1b1b29;
  --table-row-hover-background-color: #202030;
  --dropdown-item-hover-background-color: #202030;
  --button-text-hover-background-color: #202030;
  --card-border-color: rgba(255, 255, 255, .08);
  --border: rgba(255, 255, 255, .08);
  --border-light: rgba(255, 255, 255, .05);
  --text-muted: #94a3b8;
  --text-strong: #f1f5f9;

  --hairline: rgba(255, 255, 255, .08);
  --surface-1: #11111a;
  --surface-2: #161622;
  --surface-hover: #202030;
  --glass-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5), inset 0 1px 0 0 rgba(255, 255, 255, .06);
}

/* ---------- Base ---------- */
html body,
html body :not(code):not(pre):not(kbd):not(samp) {
  font-family: var(--brand-font) !important;
}
html body { -webkit-font-smoothing: antialiased; }
html .title, html h1, html h2, html h3 { letter-spacing: -.02em; font-weight: 600 !important; }
html ::selection { background: rgba(0, 240, 255, .25); }
html.dark { color-scheme: dark; }
html.dark * { scrollbar-width: thin; scrollbar-color: #26263a transparent; }

html.dark .app-container,
html.dark .app-content {
  background:
    radial-gradient(900px 500px at 75% -10%, rgba(43, 75, 238, .12), transparent 60%),
    radial-gradient(700px 400px at 0% 110%, rgba(0, 240, 255, .05), transparent 60%),
    #0a0a0f !important;
}

/* ---------- Top bar ---------- */
html.dark .navbar {
  background: rgba(17, 17, 26, .85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}

/* ---------- Sidebar ---------- */
html .menu-container {
  border-inline-end: 1px solid var(--hairline);
}
html.dark .menu-container { background: var(--surface-1) !important; }
html .menu-container .menu-list a,
html .menu-container .menu-list .list-menu-link > a {
  border-radius: var(--radius-control) !important;
  transition: background .15s ease, color .15s ease;
}
html .menu-container .menu-list a:hover { background: var(--surface-hover) !important; }
html .menu-container .menu-list a.router-link-exact-active,
html .menu-container .menu-list a.is-active {
  background: var(--brand-soft-gradient) !important;
  box-shadow: inset 0 0 0 1px rgba(79, 110, 247, .35);
  color: var(--brand-blue-light) !important;
}
html .menu-label {
  font-size: 11px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}
html .menu-bottom-link { display: none !important; }

/* ---------- Cards & containers ---------- */
html .card,
html .project-card,
html .noauth-container,
html .modal-content > .card,
html .task-view,
html .show-tasks .card {
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--glass-shadow) !important;
  overflow: hidden;
}
html.dark .card,
html.dark .project-card,
html.dark .noauth-container,
html.dark .task-view {
  background: var(--surface-2) !important;
}
html .card-header { box-shadow: none !important; border-bottom: 1px solid var(--hairline); }

/* Project cards: accent bar on top, lift on hover */
html .project-card { position: relative; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
html .project-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-gradient);
  opacity: .9;
  z-index: 1;
}
html .project-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, .25) !important;
}

/* ---------- Buttons ---------- */
html .button { border-radius: var(--radius-control) !important; font-weight: 500 !important; letter-spacing: .01em; text-transform: none !important; }
html .button.is-primary:not(.is-outlined):not(.is-text) {
  background: var(--brand-gradient) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 4px 16px -4px rgba(43, 75, 238, .45);
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
html .button.is-primary:not(.is-outlined):not(.is-text):hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -4px rgba(43, 75, 238, .55);
}
html .button.is-primary:not(.is-outlined):not(.is-text):active { transform: none; filter: brightness(.95); }
html .button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--site-background), 0 0 0 4px var(--brand-cyan) !important; }
html .button[disabled] { opacity: .4; filter: grayscale(.5); }

/* ---------- Inputs ---------- */
html .input,
html .textarea,
html .select select,
html .add-task-textarea,
html .multiselect .input-wrapper {
  border-radius: var(--radius-control) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html.dark .input,
html.dark .textarea,
html.dark .select select,
html.dark .add-task-textarea,
html.dark .multiselect .input-wrapper {
  background: var(--surface-2) !important;
  color: #f1f5f9 !important;
}
html .input:hover, html .textarea:hover, html .add-task-textarea:hover { border-color: rgba(127, 140, 160, .35) !important; }
html .input:focus, html .textarea:focus, html .select select:focus, html .add-task-textarea:focus,
html .input:focus-within, html .multiselect .input-wrapper:focus-within {
  border-color: var(--brand-cyan) !important;
  box-shadow: var(--focus-ring) !important;
}
html .input::placeholder, html .textarea::placeholder { color: #64748b !important; }

/* ---------- Task lists ---------- */
html .tasks .task,
html .single-task {
  border-radius: var(--radius-control) !important;
  transition: background .12s ease;
}
html .tasks .task:hover,
html .single-task:hover { background: var(--surface-hover) !important; }
html .task-identifier, html .task-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

/* ---------- Kanban ---------- */
html .kanban .bucket {
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--hairline);
  overflow: hidden;
}
html.dark .kanban .bucket,
html.dark .kanban .bucket .task-item { background: var(--surface-1) !important; }
html .kanban .bucket .bucket-header { padding-top: .75rem; }
html .kanban .bucket .bucket-name { font-weight: 600; letter-spacing: -.01em; }
html .kanban .bucket .tasks .task {
  border-radius: 12px !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: transform .12s ease, border-color .12s ease;
}
html.dark .kanban .bucket .tasks .task { background: var(--surface-2) !important; }
html .kanban .bucket .tasks .task:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 240, 255, .25) !important;
}
html .kanban .bucket-footer .button { border: 1px dashed var(--hairline) !important; background: transparent !important; }

/* ---------- Tags, labels, pills ---------- */
html .tag {
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
  padding-inline: .6em !important;
}
html .avatar, html .user .avatar, html .assignees-list img { border-radius: 9999px !important; }

/* ---------- Dropdowns & modals ---------- */
html .dropdown-content {
  border-radius: 12px !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45) !important;
  overflow: hidden;
}
html.dark .dropdown-content { background: var(--surface-2) !important; }
html .modal-mask {
  background: rgba(10, 10, 15, .75) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html .modal-content { border-radius: var(--radius-card) !important; }

/* ---------- Login (no-auth pages) ---------- */
html .no-auth-wrapper {
  background:
    radial-gradient(800px 500px at 50% 0%, rgba(43, 75, 238, .18), transparent 65%),
    radial-gradient(600px 400px at 100% 100%, rgba(0, 240, 255, .06), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--site-background) !important;
}
html .noauth-container {
  max-inline-size: 460px !important;
  min-block-size: 0 !important;
  margin-inline: auto;
}
html .no-auth-wrapper { justify-content: center !important; min-block-size: 100dvh; }
html .noauth-container section.image,
html .noauth-container .image { display: none !important; }
html .noauth-container > main.content {
  flex: 1 1 100% !important;
  inline-size: 100% !important;
  max-inline-size: none !important;
  padding: 2.25rem 2.25rem 2rem !important;
  display: block !important;
}
html .noauth-container > main.content > div,
html .noauth-container > main.content form,
html .noauth-container > main.content form > div { inline-size: 100% !important; max-inline-size: none !important; }
html .noauth-container > main.content::before {
  content: 'Baglioni Andrea \00b7  Task manager';
  display: table;
  margin: 0 auto 1rem;
  padding: .3rem .8rem;
  border-radius: 9999px;
  border: 1px solid rgba(0, 240, 255, .25);
  background: rgba(0, 240, 255, .06);
  color: var(--brand-cyan);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html .noauth-container .title { font-size: 28px !important; text-align: center; margin-bottom: 1.5rem !important; }
html .noauth-container .button.is-primary { inline-size: 100%; min-block-size: 44px; font-size: 15px !important; }

/* ---------- Mascots & default chrome ---------- */
html .llama-cool,
html .offline .llama,
html img[src*="llama"] { display: none !important; }

/* Login and navbar: no API server selector, no logo */
html .api-config,
html .no-auth-wrapper .logo,
html img.logo {
  display: none !important;
}