/* BS theme for Vikunja — palette taken from TradeBook dark UI (screenshots 06-10.2026).
   Injected by nginx sub_filter; remove the <link> to roll back. */

/* ---------- common: accent = TradeBook indigo, success = TradeBook green ---------- */
html:root {
  --primary-h: 236deg !important;
  --primary-s: 88% !important;
  --primary-l: 64% !important;
  --success-h: 150deg !important;
  --success-s: 52% !important;
  --success-l: 42% !important;
}

/* ---------- dark: TradeBook ---------- */
html.dark {
  /* surfaces */
  --site-background: #0b0c13 !important;          /* page background */
  --grey-50-hsl: 225, 22%, 11% !important;        /* cards, panels  ~#151821 */
  --grey-100-hsl: 226, 22%, 15% !important;       /* hover, inputs  ~#1d2130 */
  --grey-200: #262b3b !important;                 /* borders, code bg */
  --grey-300: #6f7486 !important;                 /* light text, tags */
  --grey-400: #8b90a0 !important;
  --grey-500-hsl: 226, 10%, 62% !important;       /* muted text */
  --grey-600: #c9ccd6 !important;
  --grey-700: #dfe1e8 !important;
  --grey-800: #e8eaf0 !important;                 /* main text */
  --grey-900-hsl: 228, 33%, 97% !important;       /* strong text */

  --primary-h: 236deg !important;
  --primary-s: 100% !important;
  --primary-l: 75% !important;                    /* #7e86ff — TradeBook logo / links */
  --switch-view-active-background: hsl(236deg, 70%, 58%) !important;

  --card-border-color: rgba(255, 255, 255, .06) !important;
  --input-background-color: #12141d !important;
  --input-border-color: #262b3b !important;
  --border: #262b3b !important;
  --border-light: #1d2130 !important;

  --menu-item-active-background-color: #252a52 !important;   /* TradeBook active nav */
  --menu-item-active-color: #ffffff !important;
  --menu-item-hover-background-color: #1a1e2c !important;

  --success-l: 50% !important;
}

/* sidebar a touch darker than cards, like TradeBook */
.dark .menu-container,
.dark .namespace-container { background: #0f121b !important; }
.dark .navbar { background: #0b0c13 !important; border-bottom: 1px solid #171a24; }

/* cards with soft border + radius like TradeBook */
.dark .card,
.dark .kanban .bucket .card,
.dark .task-view .card { border: 1px solid rgba(255,255,255,.06); }

.dark .kanban .bucket { background: #0f121b; border: 1px solid #171a24; }
.dark .kanban .bucket .card { background: #161a23; }

/* Gantt in dark */
.dark .g-gantt-chart,
.dark .gantt-chart { background: #0f121b !important; }
.dark .g-timeunit,
.dark .g-upper-timeunit { background: #151821 !important; color: #c9ccd6 !important; border-color: #262b3b !important; }
.dark .g-gantt-row:nth-child(odd) { background: #12151e !important; }
.dark .g-gantt-row:nth-child(even) { background: #0f121b !important; }

/* explicit computed colours (Vikunja computes them from -h/-s/-l at :root) */
html:root {
  --primary: hsla(236deg, 88%, 64%, 1) !important;
  --primary-hsl: 236deg, 88%, 64% !important;
}
html.dark {
  --primary: #7e86ff !important;
  --primary-hsl: 236deg, 100%, 75% !important;
  --grey-50: #151821 !important;
  --grey-100: #1d2130 !important;
  --grey-500: #8b90a0 !important;
  --grey-900: #f5f6fa !important;
  --white: #151821 !important;
  --scheme-main: #151821 !important;
  --scheme-main-bis: #1d2130 !important;
  --scheme-main-ter: #1d2130 !important;
  --text: #e8eaf0 !important;
  --text-strong: #f5f6fa !important;
  --text-light: #8b90a0 !important;
  --link: #7e86ff !important;
  --success: #3cb478 !important;
}
html.dark .button.is-primary { background-color: #5b63f0 !important; color: #fff !important; }
html.dark .button.is-primary:hover { background-color: #6b73ff !important; }
html.dark .switch-view .switch-view-button.is-active { background: #5b63f0 !important; color: #fff !important; }

/* Gantt rows: soften alternating bands */
html.dark .project-gantt .bg-row { background: #0f121b !important; }
html.dark .project-gantt .bg-row-alt { background: #131722 !important; }
html.dark .project-gantt .gantt-timeline,
html.dark .project-gantt .gantt-timeline-months,
html.dark .project-gantt .gantt-timeline-days { background: #151821 !important; }

/* Mobile home list: long project names squeezed task titles to ~20px */
@media (max-width: 768px) {
  .single-task .tasktext,
  .single-task .tasktext > span.is-inline-flex { flex-wrap: wrap !important; }
  .single-task .tasktext > span.is-inline-flex { width: 100%; }
  .single-task .task-glance-trigger { flex: 1 1 100% !important; min-width: 0; }
  .single-task .task-glance-trigger .task-link { width: auto !important; white-space: normal; }
}