/* Seavelo dashboard skin. Overrides MagicAI's design variables (light and dark) plus a few
   global details. It changes appearance only; no feature, script or layout logic is touched. */

:root {
  /* Brand */
  --primary: 250 74% 54%;            /* #5133E0 */
  --primary-foreground: 0 0% 100%;
  --secondary: 250 86% 97%;          /* #F4F2FE */
  --secondary-foreground: 245 32% 15%;
  --accent: 250 74% 54%;
  --accent-foreground: 0 0% 100%;
  --gradient-from: 250 80% 72%;
  --gradient-via: 250 74% 62%;
  --gradient-to: 250 74% 54%;

  /* Neutrals */
  --background: 0 0% 100%;
  --foreground: 245 15% 28%;
  --heading-foreground: 245 32% 15%; /* #1C1A33 */
  --border: 250 20% 92%;
  --label: 248 10% 45%;
  --surface: 250 40% 97%;
  --surface-light: 250 50% 98.5%;
  --clay: 250 40% 97%;
  --input-foreground: 245 32% 15%;
  --shadow: 0 6px 16px -8px rgb(28 26 51 / 12%);

  /* Navigation */
  --navbar-foreground: 248 10% 40%;
  --navbar-background-hover: var(--primary);
  --navbar-foreground-hover: var(--primary);
  --navbar-background-active: var(--primary);
  --navbar-foreground-active: var(--primary);

  /* Type */
  --font-body: 'Familjen Grotesk';
  --font-heading: 'Familjen Grotesk';
  --headings-font-weight: 600;
  --headings-letter-spacing: -0.015em;

  /* Shape */
  --button-rounded: 0.625rem;
  --card-rounded: 1rem;
  --input-rounded: calc(0.625rem * var(--input-rounded-multiplier, 1));
  --dropdown-rounded: 0.75rem;

  /* Older (Tabler) variables still used by some pages */
  --tblr-primary: #5133E0;
  --tblr-primary-rgb: 81, 51, 224;
  --tblr-body-color: #3B3950;
  --tblr-muted: #6B6880;
  --lqd-heading-color: #1C1A33;
  --lqd-heading-color-rgb: 28, 26, 51;
  --lqd-vertical-nav-link-color: #5F5C75;
  --lqd-header-search-bg: #F6F5FB;
  --lqd-shadow-color: rgb(28 26 51 / 7%);
}

.theme-dark,
body.theme-dark {
  --primary: 250 74% 64%;
  --primary-foreground: 0 0% 100%;
  --secondary: 250 45% 84%;
  --secondary-foreground: 245 32% 12%;
  --accent: 250 74% 64%;
  --gradient-from: 250 80% 76%;
  --gradient-via: 250 74% 68%;
  --gradient-to: 250 74% 64%;

  --background: 247 25% 9%;          /* ink-tinted dark */
  --foreground: 250 15% 85%;
  --heading-foreground: 0 0% 100%;
  --heading-background: 247 22% 13%;
  --border: 247 15% 18%;
  --label: 250 10% 62%;
  --surface: 247 22% 12%;
  --surface-light: 247 18% 17%;
  --clay: 247 22% 12%;
  --input-foreground: 250 15% 90%;

  --navbar-foreground: 250 10% 72%;
  --navbar-foreground-hover: 250 90% 80%;
  --navbar-foreground-active: 250 90% 80%;

  --tblr-primary: #7B63EE;
  --tblr-primary-rgb: 123, 99, 238;
  --tblr-body-bg: #13121C;
  --tblr-body-bg-rgb: 19, 18, 28;
  --tblr-bg-surface: #1A1926;
  --lqd-heading-color: #fff;
  --lqd-heading-color-rgb: 255, 255, 255;
  --lqd-header-search-bg: #1C1B29;
}

/* Global details */
/* MagicAI sets fonts with the .font-body / .font-heading classes and a compiled heading font,
   so the font has to be applied at that level (body.font-body outranks .font-body). */
body, body.font-body, .font-body { font-family: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
.font-heading, h1, h2, h3, h4, h5, h6 { font-family: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* Keep code blocks and icon fonts untouched */
code, kbd, pre, samp, .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Dashboard home: tidy the section tabs under the welcome title.
   Hide later tabs that point to the same anchor as an earlier one ("AI Assistant", "Overview" -> #all),
   and hide tabs whose section isn't on the page (they reappear automatically if it is). */
body.page-user .lqd-filter-list li:has(a[href="#all"]) ~ li:has(a[href="#all"]) { display: none !important; }
body.page-user:not(:has(#team)) .lqd-filter-list li:has(a[href="#team"]),
body.page-user:not(:has(#plan)) .lqd-filter-list li:has(a[href="#plan"]),
body.page-user:not(:has(#recent)) .lqd-filter-list li:has(a[href="#recent"]),
body.page-user:not(:has(#documents)) .lqd-filter-list li:has(a[href="#documents"]),
body.page-user:not(:has(#templates)) .lqd-filter-list li:has(a[href="#templates"]) { display: none !important; }
::selection { background: #FFF0A8; color: #1C1A33; }
h1, h2, h3, h4 { letter-spacing: -0.015em; }
:focus-visible { outline-color: hsl(var(--primary)); }

/* Seavelo quick-start row on the dashboard home */
.sv-quick { margin: 1.25rem 0 0; }
.sv-quick__title { margin: 0 0 0.875rem; font-size: 1.125rem; font-weight: 600; color: hsl(var(--heading-foreground)); letter-spacing: -0.015em; }
.sv-quick__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; }
.sv-quick__item {
  display: flex; flex-direction: column; gap: 0.25rem; min-height: 44px;
  padding: 1rem 1.125rem; border-radius: 1rem; text-decoration: none !important;
  background: hsl(var(--background)); border: 1px solid hsl(var(--border));
  transition: border-color .15s, background-color .15s, transform .1s;
}
.sv-quick__item:hover { border-color: hsl(var(--primary) / 0.45); background: hsl(var(--surface)); }
.sv-quick__item:active { transform: translateY(1px); }
.sv-quick__icon { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; background: hsl(var(--secondary)); color: hsl(var(--primary)); margin-bottom: 0.5rem; }
.theme-dark .sv-quick__icon { background: hsl(var(--surface-light)); color: hsl(var(--navbar-foreground-active)); }
.sv-quick__icon svg { width: 1.125rem; height: 1.125rem; }
.sv-quick__name { font-size: 0.9375rem; font-weight: 600; color: hsl(var(--heading-foreground)); }
.sv-quick__desc { font-size: 0.8125rem; color: hsl(var(--label)); line-height: 1.4; }
@media (max-width: 480px) { .sv-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .sv-quick__desc { display: none; } }
@media (prefers-reduced-motion: reduce) { .sv-quick__item { transition: none; } }

/* ---------- v4: softer, roomier dashboard ---------- */

/* Soft lavender canvas behind the content (cards stay white on top). Scrolls with the page:
   fixed backgrounds stutter on phones and iOS ignores them. */
:root {
  --sv-canvas: 250 45% 98.5%;
  --sv-glow-1: 255 92% 93%;
  --sv-glow-2: 222 92% 95%;
  --sv-glow-3: 280 80% 96%;
  --sv-card-border: 250 30% 92%;
  --sv-ring: var(--primary);
}
.theme-dark {
  --sv-canvas: 247 25% 8%;
  --sv-glow-1: 255 60% 22%;
  --sv-glow-2: 230 55% 20%;
  --sv-glow-3: 247 25% 8%;
  --sv-card-border: 247 15% 18%;
}
.lqd-page-content-wrap {
  background:
    radial-gradient(1100px 560px at 88% -8%, hsl(var(--sv-glow-1) / 0.9), transparent 62%),
    radial-gradient(900px 520px at -6% 28%, hsl(var(--sv-glow-2) / 0.8), transparent 60%),
    radial-gradient(900px 600px at 60% 105%, hsl(var(--sv-glow-3) / 0.75), transparent 60%),
    hsl(var(--sv-canvas));
}

/* Larger, rounder cards with a soft shadow */
.lqd-card.lqd-card-outline,
.lqd-card.lqd-card-outline-shadow,
.lqd-card.lqd-card-solid,
.lqd-card.lqd-card-shadow {
  border-radius: 1.25rem;
  border-color: hsl(var(--sv-card-border));
  background-color: hsl(var(--background));
  box-shadow: 0 1px 2px rgb(28 26 51 / 4%), 0 22px 44px -30px rgb(28 26 51 / 28%);
}
.theme-dark .lqd-card.lqd-card-outline,
.theme-dark .lqd-card.lqd-card-outline-shadow,
.theme-dark .lqd-card.lqd-card-solid,
.theme-dark .lqd-card.lqd-card-shadow {
  border-color: hsl(var(--sv-card-border));
  background-color: hsl(247 22% 11% / 0.92);
  box-shadow: 0 22px 44px -30px rgb(0 0 0 / 60%);
}
/* Dashboard home only: more breathing room inside cards */
body.page-user .lqd-card .lqd-card-body.lqd-card-md { padding: 1.75rem 2rem; }
body.page-user .lqd-card .lqd-card-body.lqd-card-lg { padding: 2.25rem 2.5rem; }
body.page-user .lqd-card .lqd-card-head { padding: 1.125rem 2rem; }
@media (max-width: 640px) {
  body.page-user .lqd-card .lqd-card-body.lqd-card-md,
  body.page-user .lqd-card .lqd-card-body.lqd-card-lg { padding: 1.5rem 1.25rem; }
  body.page-user .lqd-card .lqd-card-head { padding: 1rem 1.25rem; }
}

/* Section headings with a tinted icon badge (badge added by dashboard.js) */
.sv-head { display: inline-flex !important; align-items: center; gap: 0.75rem; }
.sv-badge {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 0.75rem;
  background: hsl(var(--secondary)); color: hsl(var(--primary));
}
.theme-dark .sv-badge { background: hsl(var(--surface-light)); color: hsl(var(--navbar-foreground-active)); }
.sv-badge svg { width: 1.125rem; height: 1.125rem; }

/* Credits as the centrepiece of the plan card (shared-credit accounts) */
#plan :has(> strong.text-\[2em\]) {
  display: grid; place-items: center; align-content: center; gap: 0.35rem;
  width: 11.5rem; height: 11.5rem; margin: 1.25rem auto 1.5rem; border-radius: 50%;
  font-size: 0.875rem; color: hsl(var(--label));
  background:
    radial-gradient(closest-side, hsl(var(--background)) 84%, transparent 85%),
    hsl(var(--sv-ring));
  box-shadow: 0 18px 36px -26px hsl(var(--sv-ring) / 0.6);
}
#plan :has(> strong.text-\[2em\]) > strong.text-\[2em\] {
  font-size: 2.5rem !important; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: hsl(var(--heading-foreground)) !important;
}
@media (max-width: 640px) {
  #plan :has(> strong.text-\[2em\]) { width: 9.5rem; height: 9.5rem; }
  #plan :has(> strong.text-\[2em\]) > strong.text-\[2em\] { font-size: 2rem !important; }
}

/* Roomier lists and tables on the dashboard home */
body.page-user .lqd-docs-list > * { padding-top: 0.9rem; padding-bottom: 0.9rem; }
body.page-user .lqd-card table th { font-weight: 600; color: hsl(var(--label)); }
body.page-user .lqd-card table th,
body.page-user .lqd-card table td { padding-top: 0.9rem; padding-bottom: 0.9rem; }
body.page-user .lqd-posts-item { border-radius: 1rem; }