/*
 * Thème custom Vikunja, injecté par nginx (sub_filter, voir README).
 * Reskin aux couleurs Hornetpath « La Ruche » : accent miel/ember, échelle
 * de gris bleu marine en sombre et cire chaude en clair. Vikunja pilote
 * tout par variables CSS : on override la teinte primaire et les gris des
 * DEUX modes, puis on polit quelques composants.
 * Rollback : retirer le <link> du sub_filter nginx, rien d'autre à défaire.
 * Réf. tokens : site/css/tokens.css (source du design system).
 */

/* ══ Accent Hornetpath : miel/ember, remplace le bleu natif de Vikunja ══
   Les règles ci-dessous s'y réfèrent via var(--primary) et le triplet
   var(--primary-h/s/l). Texte posé sur un aplat miel = --on-ember, et
   JAMAIS du blanc (contraste insuffisant). ─────────────────────────── */
:root {
  --primary: #cf860d;            /* miel profond, lisible sur fond clair */
  --primary-h: 37;
  --primary-s: 88%;
  --primary-l: 43%;
  --primary-dark: #a86c08;
  --primary-light: #f5a623;
  --link: var(--primary);
  --on-ember: #1a1206;
}

.dark {
  --primary: #f5a623;            /* miel clair, lisible sur fond marine */
  --primary-h: 37;
  --primary-s: 91%;
  --primary-l: 55%;
  --primary-dark: #e0890c;
  --primary-light: #fbc650;
  --on-ember: #1a1206;
}

/* ── Mode clair : cire chaude Hornetpath (ce n'est PAS l'inverse du
   sombre : fond crème #f7f1e3, jamais gris). ──────────────────────── */
:root {
  --grey-50-hsl: 44, 60%, 98%;    /* cream #fffdf7 : surfaces hautes */
  --grey-100-hsl: 40, 46%, 93%;   /* paper #f7f1e3 : fond de page */
  --grey-200: hsl(43, 48%, 88%);
  --grey-300: hsl(43, 42%, 83%);  /* line #e7dcc0 : filets */
  --grey-400: hsl(43, 28%, 66%);
  --grey-500-hsl: 41, 16%, 37%;   /* fog #6f6650 : texte secondaire */
  --grey-600: hsl(40, 18%, 28%);
  --grey-700: hsl(38, 20%, 20%);
  --grey-800: hsl(32, 24%, 14%);
  --grey-900-hsl: 218, 47%, 16%;  /* ink #16233c : texte principal */
  --site-background: hsl(40, 46%, 93%);
  --card-border-color: hsl(43, 42%, 83%);
  --shadow-sm: 0 1px 2px hsla(40, 30%, 20%, .05), 0 10px 26px -18px hsla(40, 30%, 20%, .22);
  --shadow-md: 0 18px 44px -26px hsla(40, 30%, 20%, .3);
}

/* ── Mode sombre : bleu marine profond Hornetpath, hiérarchie nette ── */
.dark {
  --grey-50-hsl: 219, 46%, 10%;   /* paper #0d1524 : fond de page */
  --grey-100-hsl: 220, 44%, 15%;  /* cream #16223a : panneaux */
  --grey-200: hsl(221, 40%, 21%); /* mist #1f2d49 : survol */
  --grey-300: hsl(220, 36%, 28%); /* line #2d3e60 : filets */
  --grey-400: hsl(221, 24%, 45%);
  --grey-500-hsl: 222, 27%, 67%;  /* fog #93a3c4 : texte secondaire */
  --grey-600: hsl(222, 40%, 80%);
  --grey-700: hsl(222, 55%, 88%);
  --grey-800: hsl(222, 70%, 93%);
  --grey-900-hsl: 222, 76%, 96%;  /* ink #eef3fd : texte principal */
  --site-background: hsl(219, 46%, 10%);
  --card-border-color: hsl(220, 34%, 26%);
  --shadow-sm: 0 3px 10px hsla(220, 50%, 3%, .5);
  --shadow-md: 0 8px 24px hsla(220, 50%, 3%, .55);
}

/* ── Densité : l'UI Vikunja est dimensionnée large, on dézoome tout ──
   Tout le design est en rem : abaisser la racine resserre uniformément
   (16px -> 14px, équivalent d'un zoom navigateur à ~87%). */
html {
  font-size: 14px !important;
}

/* ── Espacements : resserrés, sans tasser ─────────────────────────── */
:root,
.dark {
  --card-content-padding: 1rem;
}

/* Kanban : colonnes un peu plus étroites et rapprochées.
   Ne surtout pas toucher aux colonnes repliées (.is-collapsed : rotation
   + marge négative) ni au bouton "nouvelle colonne". */
.bucket:not(.is-collapsed):not(.new-bucket) {
  inline-size: 280px !important;
  margin: 0 .75rem 0 0 !important;
}

.bucket .tasks .task {
  margin-block-end: .5rem !important;
}

/* ── Header : le logo ne colle pas le haut, SANS déborder ──────────
   La hauteur passe par --navbar-height : le layout (has-navbar-fixed-top,
   offsets kanban...) consomme cette variable, donc tout suit. */
:root,
.dark {
  --navbar-height: 4.75rem;
}

.logo {
  margin-block-start: 1.25rem;
}

/* ── Logo Hornetpath ───────────────────────────────────────────────
   Le logo est remplace par window.CUSTOM_LOGO_URL (injecte par le
   theme-proxy, voir deploy/theme-proxy.conf). Notre marque est plus
   large que haute (ratio ~3.5:1) la ou celle de Vikunja est presque
   carree : sans ces regles, le conteneur l'etirerait. */
img.logo {
  block-size: auto !important;
  inline-size: auto !important;
  max-block-size: 2.6rem;
  max-inline-size: 100%;
  object-fit: contain;
}

/* Menu lateral : la place est comptee, on reduit un peu. */
.menu-container img.logo,
.navbar img.logo {
  max-block-size: 2.1rem;
}

/* ── Typo : Inter pour le texte, IBM Plex Mono pour le code ────────
   Toutes auto-hébergées (voir nginx, alias /custom-fonts/).

   Le corps de texte était en JetBrains Mono. C'était le seul endroit du
   parc où le monospace portait de la prose : le SSO et la base de
   connaissances sont en Inter, et la charte réserve le mono aux
   métadonnées (chemins, compteurs, identifiants). Vikunja s'aligne donc.
   Pour revenir en arrière : remettre la pile JetBrains dans la règle
   `body` ci-dessous, les deux .ttf sont toujours dans deploy/fonts/. */
@font-face {
  font-family: "Inter";
  src: url("/custom-fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/custom-fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/custom-fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/custom-fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/custom-fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/custom-fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Le mono marque les données, il n'est pas décoratif. */
code,
pre,
kbd,
samp,
.task-id,
.identifier {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
}

/* ── Coins arrondis et surfaces ───────────────────────────────────── */
.card,
.box,
.modal-content,
.notification {
  border-radius: 14px !important;
}

.button,
.input,
.textarea,
.select select {
  border-radius: 10px !important;
}

.button.is-primary {
  box-shadow: 0 4px 14px hsla(var(--primary-h), var(--primary-s), 40%, .35);
}

/* Texte sur aplat miel : toujours l'encre sombre, jamais du blanc. */
.button.is-primary,
.button.is-primary:hover,
.button.is-primary:focus,
.button.is-primary.is-focused,
.tag.is-primary {
  color: var(--on-ember, #1a1206) !important;
}

/* Liens et éléments de teinte primaire : le miel, avec un survol plus vif. */
a.is-primary,
.has-text-primary {
  color: var(--primary) !important;
}

/* ── Kanban : colonnes aérées, cartes nettes ──────────────────────── */
.bucket {
  border-radius: 14px !important;
  background: hsla(var(--grey-100-hsl), .75) !important;
}

.bucket .tasks .task,
.kanban .task {
  border-radius: 10px !important;
  border: 1px solid var(--card-border-color);
  box-shadow: 0 1px 4px hsla(229, 40%, 3%, .3);
  transition: transform .12s ease, box-shadow .12s ease;
}

.bucket .tasks .task:hover,
.kanban .task:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px hsla(229, 40%, 3%, .45);
}

/* Titres des cartes : lisibles au premier coup d'oeil */
.bucket .tasks .task h3,
.kanban .task h3 {
  font-family: inherit !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: var(--text-strong) !important;
  line-height: 1.35;
}

/* Gantt : libellés des barres lisibles eux aussi */
.gantt-bar-text {
  font-size: .95rem !important;
  font-weight: 700 !important;
}

.gantt-bar {
  border-radius: 6px !important;
}

/* Gantt : rendre la manipulation moins pénible.
   Les poignées de redimensionnement sont des <rect> SVG de 6px seulement,
   quasi impossibles à attraper. On les élargit et on les affiche en
   permanence (la géométrie SVG est surchargeable en CSS sur les
   navigateurs modernes). */
.gantt-resize-handle {
  width: 11px !important;
  opacity: 1 !important;
  fill: var(--primary) !important;
  stroke: var(--white) !important;
  stroke-width: 1.5 !important;
  cursor: col-resize !important;
}

.gantt-resize-left {
  transform: translateX(-3px);
}

.gantt-resize-right {
  transform: translateX(3px);
}

.gantt-resize-handle:hover {
  width: 13px !important;
  filter: brightness(1.15);
}

/* Barre : zone de grab plus évidente au survol */
.gantt-bar {
  cursor: grab;
}

.gantt-bar:hover {
  opacity: 1 !important;
  filter: brightness(1.08);
}

/* ── Labels : pastilles lisibles ──────────────────────────────────── */
.tag {
  border-radius: 999px !important;
  font-weight: 600;
}

/* ── Menu latéral et navbar : fondus dans le fond ─────────────────── */
.navbar {
  background: hsla(var(--grey-50-hsl), .85) !important;
  backdrop-filter: blur(8px);
}

.menu-container,
.namespace-container {
  background: hsl(var(--grey-50-hsl)) !important;
}

/* ── Login : centre la carte, masque le bruit ─────────────────────── */
.link-share-container .box,
.auth-form {
  border-radius: 16px !important;
}

/* ══ Création et édition de tâches ═════════════════════════════════ */

/* Vue détail : plus large, mieux respirée */
.task-view {
  max-inline-size: 1100px;
  margin-inline: auto;
}

.task-view .heading .input,
.task-view h1.title .input,
.task-view .title.input {
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  line-height: 1.25;
  border-radius: 10px !important;
}

/* Éditeur de texte (description, commentaires) : pas de toolbar du tout.
   Tout passe par la commande "/" (titres, listes, code, image...) et le
   markdown à la volée (**gras**, - liste, # titre). */
.editor-toolbar {
  display: none !important;
}

/* Lecture : le contenu s'affiche nu, sans boîte ni hauteur minimum
   (les commentaires et descriptions ne traînent plus un grand vide). */
.tiptap__editor {
  border: none !important;
  background: transparent !important;
  min-block-size: 0 !important;
  padding: .15rem 0 !important;
  margin-block-start: 0 !important;
}

/* Édition (double-clic) : là, la vraie zone de saisie apparaît */
.tiptap__editor.tiptap__editor-is-edit-enabled {
  border: 1px solid var(--card-border-color) !important;
  border-radius: 10px !important;
  background: hsla(var(--grey-100-hsl), .45) !important;
  min-block-size: 8rem !important;
  padding: .9rem 1rem !important;
}

.tiptap__editor.tiptap__editor-is-edit-enabled:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px hsla(var(--primary-h), var(--primary-s), var(--primary-l), .2) !important;
}

/* Actions de l'éditeur (Edit / Save) : pastille discrète alignée à
   droite, raccord avec le bloc, qui s'affirme au survol. */
.tiptap__editor-actions {
  display: flex;
  justify-content: flex-end;
  margin-block-start: .35rem !important;
}

.done-edit {
  background: transparent !important;
  color: var(--primary) !important;
  border: 1px solid var(--card-border-color) !important;
  border-radius: 999px !important;
  padding: .15rem .85rem !important;
  font-size: .8rem !important;
  font-weight: 600;
  box-shadow: none !important;
  transition: all .12s ease;
}

.done-edit:hover {
  border-color: var(--primary) !important;
  background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .12) !important;
  text-decoration: none !important;
}

/* Titre et champs simples : focus visible */
.task-view .input:focus,
.task-view .textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px hsla(var(--primary-h), var(--primary-s), var(--primary-l), .25) !important;
}

/* Colonne d'actions (Ajouter un label, une date, etc.) : boutons nets */
.action-buttons .button {
  border-radius: 10px !important;
  background: hsla(var(--grey-100-hsl), .8) !important;
  border: 1px solid var(--card-border-color) !important;
  transition: border-color .12s ease, transform .12s ease;
}

.action-buttons .button:hover {
  border-color: var(--primary) !important;
  transform: translateX(2px);
}

/* Commentaires : bulles lisibles */
.task-view .comment .content {
  background: hsla(var(--grey-100-hsl), .6);
  border-radius: 10px;
  padding: .6rem .9rem;
}

/* Ajout rapide (kanban, liste) : champ visible, pas un fil discret */
.task-add .add-task-textarea,
.add-task__field .textarea {
  border-radius: 10px !important;
  background: hsla(var(--grey-100-hsl), .9) !important;
  border: 1px solid var(--card-border-color) !important;
  min-block-size: 2.7rem;
}

.task-add .add-task-textarea:focus,
.add-task__field .textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px hsla(var(--primary-h), var(--primary-s), var(--primary-l), .25) !important;
}

.task-add .add-task-button,
.task-add .button {
  border-radius: 10px !important;
}

/* Bouton d'aide Quick Add Magic : visible, couleur accent */
.quick-add-magic-trigger-btn {
  color: var(--primary) !important;
  opacity: 1 !important;
}

/* Sélecteurs (labels, assignés) et datepicker : raccord avec le reste */
.multiselect,
.multiselect .input-wrapper {
  border-radius: 10px !important;
}

.datepicker__quick-select-date {
  border-radius: 8px !important;
}

/* ══ Fond de page Hornetpath ═══════════════════════════════════════
   Motif nid-d'abeille + halo miel + halo bleu, en fixed. Sans ce fond,
   la page n'est pas Hornetpath. Vikunja peint son fond sur `.app-content`
   et consorts via --site-background : on le laisse translucide pour que
   le motif traverse. ─────────────────────────────────────────────── */
body {
  background-color: var(--site-background);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%2316233c' fill-opacity='0.055' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v11.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1100px 700px at 84% -18%, rgb(207 134 13 / .14), rgb(207 134 13 / 0) 60%),
    radial-gradient(950px 680px at -14% 112%, rgb(56 118 224 / .1), rgb(56 118 224 / 0) 60%);
  background-attachment: fixed;
}

.dark body,
body.dark {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%23f5a623' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v11.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1100px 700px at 84% -18%, rgb(245 166 35 / .13), rgb(245 166 35 / 0) 60%),
    radial-gradient(950px 680px at -14% 112%, rgb(56 118 224 / .16), rgb(56 118 224 / 0) 60%),
    radial-gradient(650px 480px at 52% 30%, rgb(13 21 36 / .5), rgb(13 21 36 / 0) 65%);
}

/* Le conteneur principal laisse voir le fond au lieu de le recouvrir. */
.app-content,
#app > .app-container,
.content-auth {
  background: transparent !important;
}

/* ══ Focus clavier ═════════════════════════════════════════════════
   Un seul style dans tout le parc : anneau miel, offset 2px. ─────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
}

/* ══ Préférences système ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .bucket .tasks .task:hover,
  .kanban .task:hover,
  .action-buttons .button:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .navbar {
    background: hsl(var(--grey-50-hsl)) !important;
    backdrop-filter: none !important;
  }
}

@media print {
  body {
    background-image: none !important;
    background-color: #fff !important;
  }
}