/* ============================================================
   Vikunja — "Apple-grade Minimal" theme   (nginx sub_filter inject)
   Cesta A · v3 · indigo accent · graphite dark · restraint
   Anti-slop: tinted neutrals, hairline borders, no bounce easing,
   restrained radius, deliberate type scale.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  /* restrained radius (Apple-ish, not bubbly) */
  --radius: 10px;
  --radius-small: 8px;
  --radius-large: 14px;
  --radius-rounded: 9999px;
  --card-radius: 16px;

  /* indigo accent (light) */
  --primary-h: 243deg; --primary-s: 70%; --primary-l: 60%; --primary-a: 1;
  --link-h: 243deg;    --link-s: 70%;    --link-l: 60%;    --link-a: 1;

  /* typography */
  --family-primary: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body-family:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* refined light surfaces */
  --background: #f5f5f7;
  --scheme-main-bis: #fbfbfd;
  --scheme-main-ter: #f0f0f3;

  /* neutral hairline + depth tokens (work light & dark) */
  --sm-border: rgba(130,140,165,.16);
  --sm-border-strong: rgba(130,140,165,.26);
  --sm-hover:  rgba(130,140,165,.10);
  --sm-shadow: 0 1px 2px rgba(12,14,22,.06), 0 8px 24px -14px rgba(12,14,22,.30);
  --sm-shadow-pop: 0 12px 40px -12px rgba(12,14,22,.40);
}

/* ---- DARK: navy -> neutral graphite + indigo accent ---- */
:root.dark {
  /* desaturate the dark base scale toward Apple graphite */
  --grey-50-hsl: 222, 8%, 8%;      /* app background  ~#131418 */
  --grey-100-hsl: 222, 7%, 13%;    /* cards / surfaces ~#1f2024 */
  /* keep indigo accent in dark (override Vikunja's bright blue) */
  --primary-h: 243deg; --primary-s: 68%; --primary-l: 67%;
  --link-h: 243deg;    --link-s: 68%;    --link-l: 70%;
  --card-border-color: rgba(255,255,255,.07);
  --sm-border: rgba(255,255,255,.075);
  --sm-border-strong: rgba(255,255,255,.14);
  --sm-hover: rgba(255,255,255,.055);
  --sm-shadow: 0 1px 2px rgba(0,0,0,.30), 0 10px 30px -16px rgba(0,0,0,.55);
  --sm-shadow-pop: 0 14px 44px -12px rgba(0,0,0,.65);
}

/* ---- Typography ---- */
html, body, button, input, select, textarea,
.button, .input, .textarea, .title, .subtitle, h1, h2, h3 {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { letter-spacing: -0.012em; }
.title { font-weight: 700 !important; letter-spacing: -0.025em !important; }
.subtitle { font-weight: 500 !important; letter-spacing: -0.015em !important; }
h1,h2,h3 { letter-spacing: -0.02em; }

/* ---- Buttons (flat, calm, no bounce) ---- */
.button {
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  border: 1px solid var(--sm-border);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
.button:hover { filter: brightness(1.04); }
.button:active { filter: brightness(.97); }
.button.is-primary { border-color: transparent; box-shadow: none !important; }
.button.is-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 18px -8px hsla(var(--primary-h), var(--primary-s), var(--primary-l), .5) !important; }

/* ---- Cards / boxes / tiles ---- */
.card, .box, a.card, .panel, .project-grid a {
  border-radius: 16px !important;
  border: 1px solid var(--sm-border) !important;
  box-shadow: var(--sm-shadow) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
a.card:hover, .project-grid a:hover {
  border-color: var(--sm-border-strong) !important;
  box-shadow: var(--sm-shadow-pop) !important;
}

/* ---- Inputs ---- */
.input, .textarea, .select select {
  border-radius: 10px !important;
  border: 1px solid var(--sm-border) !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
.input:focus, .textarea:focus, .select select:focus {
  border-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l)) !important;
  box-shadow: 0 0 0 3.5px hsla(var(--primary-h), var(--primary-s), var(--primary-l), .20) !important;
}

/* ---- Sidebar / menu ---- */
.menu-list a {
  border-radius: 9px !important;
  margin: 1px 0;
  transition: background-color .16s ease, color .16s ease !important;
}
.menu-list a:hover { background-color: var(--sm-hover) !important; }
.menu-list a.router-link-active, .menu-list a.is-active {
  background-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .15) !important;
  color: hsl(var(--primary-h), var(--primary-s), 74%) !important;
  font-weight: 600 !important;
}

/* ---- Tasks ---- */
.tasks .task, .task-list .task, .single-task {
  border-radius: 11px !important;
  transition: background-color .16s ease !important;
}
.tasks .task:hover { background-color: var(--sm-hover) !important; }

/* ---- Dropdowns / modals / popups ---- */
.dropdown-content, .modal-content, .modal-card, .card.has-no-shadow {
  border-radius: 16px !important;
  border: 1px solid var(--sm-border) !important;
  overflow: hidden;
  box-shadow: var(--sm-shadow-pop) !important;
}

/* ---- Tags / pills ---- */
.tag { border-radius: 9999px !important; font-weight: 600; letter-spacing: -0.005em; }

/* ---- Navbar ---- */
.navbar { box-shadow: inset 0 -1px 0 var(--sm-border) !important; }

/* ---- Scrollbars (subtle, neutral) ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(140,148,168,.4) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(140,148,168,.38); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(140,148,168,.6); background-clip: content-box; }

/* ---- Misc rounding sweep ---- */
.notification, .message, .dropdown-item, .image.is-rounded { border-radius: 11px !important; }
.modal-card-head { border-radius: 16px 16px 0 0 !important; }
.modal-card-foot { border-radius: 0 0 16px 16px !important; }