/* ============================================================
   SBIT.ZONE theme for Vikunja (kanban.sbit.zone)
   Source of truth: design.sbit.zone tokens v0.3.1
   Injected by the nginx sidecar; fonts/logo served same-origin.
   Hard rules honored: every value resolves to an SBIT token.
   Blue = signal/focus · Amber = ownership/value · near-black = field.
   ============================================================ */

/* ---- webfonts (same-origin, from /sbit-assets/fonts) ---- */
@font-face{font-family:"Space Grotesk";src:url("/sbit-assets/fonts/SpaceGrotesk-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/sbit-assets/fonts/SpaceGrotesk-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url("/sbit-assets/fonts/Inter-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/sbit-assets/fonts/IBMPlexMono-Medium.ttf") format("truetype");font-weight:500;font-display:swap}

:root{
  /* SBIT tokens */
  --sbit-ink-900:#0B0E11; --sbit-ink-800:#11161B; --sbit-ink-700:#171F26;
  --sbit-ink-600:#222C35; --sbit-ink-500:#2E3A45;
  --sbit-text-hi:#E8EEF3; --sbit-text-mid:#A7B4BF; --sbit-text-lo:#6B7A86;
  --sbit-signal:#8AD8FF; --sbit-signal-hi:#C7ECFF; --sbit-signal-dim:#256FAD;
  --sbit-value:#F5A524; --sbit-success:#3FB950; --sbit-danger:#F85149;
  --sbit-font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --sbit-font-body:"Inter",system-ui,sans-serif;
  --sbit-font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* --- map onto Bulma/Vikunja core vars --- */
  --primary:var(--sbit-signal); --primary-h:200; --primary-s:100%; --primary-l:77%; --primary-a:1;
  --primary-invert:var(--sbit-ink-900);
  --link:var(--sbit-signal); --link-h:200; --link-s:100%; --link-l:77%;
  --link-invert:var(--sbit-ink-900);
  --family-primary:var(--sbit-font-body);
  --family-secondary:var(--sbit-font-display);
  --family-code:var(--sbit-font-mono);

  --site-background:var(--sbit-ink-900);
  --scheme-main:var(--sbit-ink-800);
  --scheme-main-bis:var(--sbit-ink-700);
  --scheme-main-ter:var(--sbit-ink-700);
  --scheme-invert:var(--sbit-text-hi);
  --background:var(--sbit-ink-700);
  --border:var(--sbit-ink-600); --border-light:var(--sbit-ink-600);
  --text:var(--sbit-text-mid); --text-strong:var(--sbit-text-hi); --text-light:var(--sbit-text-lo);
  --body-color:var(--sbit-text-mid);

  /* grey ramp -> ink/text so cards, borders, labels follow the brand */
  --grey-50:var(--sbit-ink-800); --grey-100:var(--sbit-ink-700); --grey-200:var(--sbit-ink-600);
  --grey-300:var(--sbit-ink-500); --grey-400:var(--sbit-text-lo); --grey-500:var(--sbit-text-lo);
  --grey-600:var(--sbit-text-mid); --grey-700:var(--sbit-text-mid); --grey-800:var(--sbit-text-hi);
  --grey-900:var(--sbit-text-hi);

  --info:var(--sbit-signal); --success:var(--sbit-success);
  --warning:var(--sbit-value); --danger:var(--sbit-danger);
}

/* force the dark scheme look regardless of the user's light/dark toggle */
html,body,#app{background:var(--sbit-ink-900)!important;color:var(--sbit-text-mid);
  font-family:var(--sbit-font-body)!important}

/* headings + brand voice in display font */
h1,h2,h3,.title,.card-title,.task-detail .heading,.namespace-title{font-family:var(--sbit-font-display)!important;color:var(--sbit-text-hi)}

/* app shell: navbar + side menu = control surfaces */
.navbar,.menu-container,#menu,.namespace-container{background:var(--sbit-ink-800)!important;
  border-color:var(--sbit-ink-600)!important}
.menu a,.namespace-container .menu a{color:var(--sbit-text-mid)!important}
.menu a:hover,.menu a.router-link-active{color:var(--sbit-text-hi)!important;background:var(--sbit-ink-700)!important}
.menu a.router-link-active{box-shadow:inset 3px 0 0 var(--sbit-signal)!important}

/* content surfaces: cards, boxes, panels = ink-800 with hairline borders */
.card,.box,.content,.taskitem,.task,.kanban .bucket,.bucket,
.list-view,.table,.modal-content,.dropdown-content,.notification{
  background:var(--sbit-ink-800)!important;color:var(--sbit-text-mid);
  border:1px solid var(--sbit-ink-600)!important;border-radius:8px}

/* Bulma white utility surfaces -> ink (panels/boxes) */
.has-background-white,.has-background-white-bis,.has-background-light,.has-background-grey-lighter{
  background-color:var(--sbit-ink-800)!important;color:var(--sbit-text-mid)!important}

/* project overview cards (REAL classes) — minimal touch, keep Vikunja layout intact,
   just darken the card surface (project colour) + keep the title legible */
.project-grid-item,.project-card{min-height:96px!important}
.project-card{border:1px solid var(--sbit-ink-600)!important;border-radius:8px!important;
  box-shadow:0 1px 4px rgba(0,0,0,.45)!important;overflow:hidden!important}
.project-card .project-background{filter:brightness(.42) saturate(.85)!important}
.project-title{color:#EAF1F6!important;font-family:var(--sbit-font-display)!important;
  text-shadow:0 1px 3px rgba(0,0,0,.65)!important}

/* empty-state + helper text were too faint */
.nothing,.has-text-grey,.has-text-grey-light,.has-text-grey-lighter{color:var(--sbit-text-mid)!important}

/* kanban — REAL classes: .kanban-bucket-container/.bucket/.bucket-header/.bucket-footer/.new-bucket */
/* full-width: buckets share all available width evenly; current 300px = MIN width */
.kanban-bucket-container{width:100%!important}
.bucket{background:var(--sbit-ink-800)!important;border:1px solid var(--sbit-ink-600)!important;border-radius:8px!important;
  flex:1 1 300px!important;min-inline-size:300px!important;inline-size:auto!important;max-inline-size:none!important}
.bucket-header{font-family:var(--sbit-font-display)!important;color:var(--sbit-text-hi)!important}
.bucket .task,.bucket .kanban-card{background:var(--sbit-ink-700)!important;
  border:1px solid var(--sbit-ink-600)!important;border-radius:6px!important;color:var(--sbit-text-mid)!important}
/* "+ BUCKET ERSTELLEN" was a full-width column — make it a compact button at the start */
.new-bucket{width:auto!important;min-width:0!important;max-width:240px!important;flex:0 0 auto!important;
  align-self:flex-start!important;background:transparent!important;border:none!important;
  box-shadow:none!important;padding:2px 0!important}
.new-bucket .button,.new-bucket input{width:auto!important;background:var(--sbit-ink-700)!important;
  border:1px solid var(--sbit-ink-600)!important;color:var(--sbit-text-hi)!important;border-radius:6px!important}

/* primary actions = signal with dark text */
.button.is-primary,.button.is-link{background:var(--sbit-signal)!important;color:var(--sbit-ink-900)!important;
  border-color:var(--sbit-signal)!important;font-family:var(--sbit-font-display);border-radius:4px}
.button.is-primary:hover,.button.is-link:hover{background:var(--sbit-signal-hi)!important}
.button{border-radius:4px}
a{color:var(--sbit-signal)}
a:hover{color:var(--sbit-signal-hi)}

/* focus + selected = signal rail */
:focus-visible,input:focus,textarea:focus,select:focus,.input:focus{
  outline:2px solid var(--sbit-signal)!important;border-color:var(--sbit-signal)!important;box-shadow:none!important}

/* form fields */
.input,.textarea,select,.select select{background:var(--sbit-ink-900)!important;
  color:var(--sbit-text-hi)!important;border:1px solid var(--sbit-ink-600)!important;border-radius:4px}

/* mono for labels/metadata/dates */
.label,.tag,.created,.date,.time,.task-id,code,kbd{font-family:var(--sbit-font-mono)}
.tag{border-radius:999px}

/* priority/value highlight = amber (ownership/value) */
.priority-label.high,.is-warning,.tag.is-warning{color:var(--sbit-value)!important}

/* ---- logo swap: Vikunja logo is an inline SVG in the bundle; hide it hard + paint ours ---- */
/* do NOT force display (that would un-hide Vikunja's responsive duplicate logos).
   keep natural layout: just paint our logo + make the original SVG invisible. */
.logo{
  background:url("/sbit-assets/logo.svg") left center/contain no-repeat!important;
  background-color:transparent!important;
  min-width:150px!important;min-height:32px!important;overflow:hidden!important;
  font-size:0!important;color:transparent!important}
.logo>*{visibility:hidden!important}

/* scrollbars on brand */
*::-webkit-scrollbar-thumb{background:var(--sbit-ink-500)}
*::-webkit-scrollbar-track{background:var(--sbit-ink-900)}

/* 'create bucket' relocated into the view-switcher toolbar (by theme.js) */
/* the toolbar is justify-content:space-between -> pack everything left so FILTER + bucket sit together */
.switch-view-container{justify-content:flex-start!important;gap:.6rem!important}
.switch-view{display:inline-flex!important;align-items:center!important;flex-wrap:wrap!important}
.new-bucket[data-sbit-relocated]{margin:0 0 0 8px!important;max-width:none!important;width:auto!important;
  display:inline-flex!important;align-items:center!important;vertical-align:middle!important;
  padding:0!important;flex:0 0 auto!important}
.new-bucket[data-sbit-relocated] .button,.new-bucket[data-sbit-relocated] input{
  height:32px!important;font-size:13px!important}