/* ON/TARGET reskin for tasks.ontarget.cz — injected via nginx sub_filter.
   Vikunja toggles :root.light / :root.dark and builds its palette from
   --grey-N (Tailwind-style scale) + Bulma's own CSS custom properties.
   We redefine both scales per theme, then tidy a few components.
   Rollback: drop the sub_filter block in /etc/nginx/sites-available/vikunja. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap');

/* ---------- palette: light (also the default before the app stamps a class) ---------- */
:root,
:root.light {
  --grey-50:  #FAF8F3;
  --grey-100: #F1EEE6;
  --grey-200: #DAD3C3;
  --grey-300: #C9C0AC;
  --grey-400: #7A7160;
  --grey-500: #6B6350;
  --grey-600: #57503F;
  --grey-700: #403A2E;
  --grey-800: #2B2720;
  --grey-900: #211E18;

  --background: #FAF8F3;
  --scheme-main: #FFFFFF;
  --scheme-main-bis: #FAF8F3;
  --scheme-main-ter: #F1EEE6;
  --text: #57503F;
  --text-strong: #211E18;
  --text-light: #6B6350;
  --border: #E4DFD2;
  --border-light: #E4DFD2;
  --border-hover: #948565;
  --link: #211E18;
  --link-hover: #211E18;
  --link-focus-border: #8F5A16;
  --primary: #211E18;
  --primary-invert: #FAF8F3;
  --danger: #A5402D;
  --warning: #8F5A16;

  --body-family: 'Geist', 'Open Sans', Helvetica, Arial, sans-serif;

  --ot-border-interactive: #948565; /* 3.4:1 on paper, 3.6:1 on white */
  --ot-focus: #8F5A16;
  --ot-hover: #F3EFE6;
}

/* ---------- palette: dark ---------- */
:root.dark {
  --grey-50:  #17140F;
  --grey-100: #1C1912;
  --grey-200: #3D3626;
  --grey-300: #4A4230;
  --grey-400: #8F866D;
  --grey-500: #A89F86;
  --grey-600: #C7BEA6;
  --grey-700: #D9D2C2;
  --grey-800: #E9E3D3;
  --grey-900: #F3EEE1;

  --background: #17140F;
  --scheme-main: #201C15;
  --scheme-main-bis: #17140F;
  --scheme-main-ter: #1C1912;
  --text: #C7BEA6;
  --text-strong: #F3EEE1;
  --text-light: #8F866D;
  --border: #34301F;
  --border-light: #34301F;
  --border-hover: #7A6E50;
  --link: #F3EEE1;
  --link-hover: #F3EEE1;
  --link-focus-border: #E0A24C;
  --primary: #F3EEE1;
  --primary-invert: #17140F;
  --danger: #E28066;
  --warning: #E0A24C;

  --ot-border-interactive: #7A6E50; /* 3.4:1 on dark surface */
  --ot-focus: #E0A24C;
  --ot-hover: #2B261C;
}

/* ---------- typography: one family everywhere ---------- */
html, body, button, input, textarea, select {
  font-family: var(--body-family) !important;
}

.title, .subtitle, .heading, .card-header-title,
.project-title, .task-heading, .menu-label,
h1, h2, h3, h4 {
  font-family: var(--body-family) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--grey-900);
}

h2.title { font-size: 1.35rem; }
h3.title { font-size: 1.1rem; }

/* ---------- shell: navbar + sidebar ---------- */
.navbar {
  border-bottom: 1px solid var(--grey-200);
}

.menu-container {
  border-right: 1px solid var(--grey-200);
}

.menu-list a,
.list-menu-link {
  font-size: 15px;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  border-radius: 6px;
  color: var(--grey-700);
}

.menu-list a:hover,
.list-menu-link:hover {
  background: var(--ot-hover);
  color: var(--grey-900);
}

.list-menu-link.router-link-exact-active,
.menu-list a.router-link-exact-active {
  background: var(--grey-200);
  color: var(--grey-900);
  font-weight: 500;
}

/* wordmark: swap the stock llama SVG for the ON/TARGET text mark */
.logo-link {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 12px;
}

.logo-link svg.logo {
  /* visually hidden, not display:none — keeps the link's accessible name */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.logo-link::after {
  content: 'ON/TARGET';
  font-family: var(--body-family);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.06em;
  color: var(--grey-900);
  white-space: nowrap;
}

/* ---------- cards & task rows: flat, divider-based ---------- */
.card {
  box-shadow: none !important;
  border: 1px solid var(--grey-200) !important;
  border-radius: 8px !important;
}

.single-task.task {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 8px !important;
  /* divider via inset shadow — survives whatever resets border */
  box-shadow: inset 0 -1px 0 var(--grey-200) !important;
}

/* (no :last-child exception — Vikunja wraps every row in its own div,
   so :last-child would match all of them) */

.single-task.task:hover {
  background: var(--ot-hover);
}

.tasktext {
  font-size: 15px;
}

.single-task .task-project,
.single-task .project-name {
  color: var(--grey-500);
}

.fancy-checkbox {
  border-color: var(--ot-border-interactive) !important;
}

/* ---------- inputs & buttons ---------- */
.input, .textarea, .select select,
.add-task-textarea {
  border-color: var(--ot-border-interactive) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.input:focus, .textarea:focus, .add-task-textarea:focus {
  border-color: var(--grey-900) !important;
}

/* editable task title (h1.title.input) stays borderless until hover/focus */
.title.input,
h1.input {
  border-color: transparent !important;
  padding-left: 0 !important;
}

.title.input:hover,
.title.input:focus,
h1.input:hover,
h1.input:focus {
  border-color: var(--ot-border-interactive) !important;
}

/* Vikunja uppercases small buttons; plain case reads better */
.button, .base-button.button {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* ---------- task detail: reading column + quiet action menu ---------- */
.task-view {
  width: 100%; /* parent is flex; without this the column % widths collapse to content size */
  max-width: 1120px;
  margin: 0 auto;
  padding: 4px 24px 48px;
}

.task-view .back-button {
  font-size: 13px;
  color: var(--grey-500);
}

.task-view .heading h1.title.input {
  font-size: 1.6rem;
  line-height: 1.25;
}

.task-view nav.subtitle {
  font-size: 14px;
  color: var(--grey-600);
  margin-bottom: 8px;
}

.task-view .columns.mbs-2 {
  margin-top: 16px;
}

/* main column */
.task-view .detail-content {
  flex: 1 1 auto !important;   /* take what the 280px action column leaves */
  width: auto !important;
  max-width: none !important;
}

.task-view .task-section-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--grey-700);
  margin: 28px 0 10px;
}

.task-view .description .tiptap__wrapper,
.task-view .tiptap__task-description {
  font-size: 15px;
  line-height: 1.6;
}

.task-view .details.content.description {
  background: var(--scheme-main);
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  padding: 16px 20px;
}

.task-view .description .task-section-title {
  margin-top: 0;
}

.task-view .tiptap__editor-actions {
  margin-top: 8px;
}

.task-view .comments .media.comment {
  background: var(--scheme-main);
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  padding: 12px 16px;
}

/* right column: menu list instead of a wall of white buttons */
.task-view .action-buttons {
  flex: 0 0 280px !important;
  max-width: 280px !important;
  width: 280px !important;
  padding-left: 28px;
  border-left: 1px solid var(--grey-200);
}

.task-view .action-buttons .button {
  display: flex !important;
  width: 100% !important;
  justify-content: flex-start !important;
  gap: 8px;
  min-height: 32px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 8px !important;
  margin: 0 0 1px !important;
  height: auto;
  color: var(--grey-700) !important;
  font-size: 14px !important;
}

.task-view .action-buttons .button:hover {
  background: var(--ot-hover) !important;
  color: var(--grey-900) !important;
}

.task-view .action-buttons .button .icon {
  color: var(--grey-500);
}

/* the "mark as done" button stays the one filled control */
.task-view .action-buttons > .button:first-child {
  background: var(--grey-900) !important;
  color: var(--grey-50) !important;
  margin-bottom: 12px !important;
  padding: 9px 12px !important;
}

.task-view .action-buttons > .button:first-child .icon {
  color: inherit;
}

.task-view .action-buttons .button.is-danger,
.task-view .action-buttons .button.has-text-danger {
  color: var(--danger) !important;
}

.task-view .action-heading {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-500) !important;
  margin: 18px 0 4px 8px !important;
}

.task-view .action-buttons p.created {
  text-align: left !important;
  font-size: 12px;
  color: var(--grey-500);
  margin-top: 20px;
  padding-left: 8px;
}

@media (max-width: 768px) {
  .task-view .action-buttons {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
    padding-left: 0;
    border-left: 0;
    margin-top: 24px;
  }
}

/* comment/description editor toolbar: one slim row */
.task-view .editor-toolbar {
  padding: 4px 6px;
  gap: 0;
}

.task-view .editor-toolbar__button {
  width: 26px !important;
  min-width: 26px !important; /* Vikunja sets min-width:32px, which overrides width */
  height: 26px !important;
  margin: 0 1px 0 0 !important;
  padding: 0 !important;
}

.task-view .editor-toolbar__button .icon {
  font-size: 12px;
}

/* ---------- keyboard focus (token overrides mute Bulma's own ring) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.base-button:focus-visible {
  outline: 2px solid var(--ot-focus);
  outline-offset: 2px;
}