/* Theme "Jira Cloud" pour Vikunja - injecte par le conteneur skin (nginx sub_filter)
   Deux palettes : claire (par defaut) et sombre (quand Vikunja a la classe html.dark,
   reglage Parametres > Apparence de chaque utilisateur). */

:root {
  --j-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  --j-bg: #F7F8F9;          /* fond de page */
  --j-surface: #FFFFFF;     /* cartes, barres, champs */
  --j-surface-2: #F1F2F4;   /* survol, boutons neutres */
  --j-surface-3: #DCDFE4;   /* survol appuye */
  --j-border: #DCDFE4;
  --j-border-light: #EBECF0;
  --j-text: #172B4D;
  --j-text-2: #44546F;
  --j-text-3: #626F86;
  --j-primary: #0C66E4;
  --j-primary-hover: #0055CC;
  --j-primary-soft: #E9F2FF;
  --j-focus: #388BFF;
  --j-success: #22A06B;
  --j-shadow: 0 1px 1px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.31);
  --j-shadow-card: 0 1px 1px rgba(9,30,66,.2);
  --j-shadow-pop: 0 8px 12px rgba(9,30,66,.15), 0 0 1px rgba(9,30,66,.31);
  --j-selection: #CCE0FF;
}
html.dark {
  --j-bg: #1D2125;
  --j-surface: #22272B;
  --j-surface-2: #2C333A;
  --j-surface-3: #38414A;
  --j-border: #38414A;
  --j-border-light: #2C333A;
  --j-text: #B6C2CF;
  --j-text-2: #9FADBC;
  --j-text-3: #8C9BAB;
  --j-primary: #579DFF;
  --j-primary-hover: #85B8FF;
  --j-primary-soft: #1C2B41;
  --j-focus: #85B8FF;
  --j-success: #4BCE97;
  --j-shadow: 0 0 0 1px #38414A;
  --j-shadow-card: 0 1px 1px rgba(3,4,4,.5);
  --j-shadow-pop: 0 8px 12px rgba(3,4,4,.6), 0 0 1px #38414A;
  --j-selection: #09326C;
}

/* Variables Vikunja / Bulma remappees sur la palette Jira */
:root, html.light, html.dark {
  --family-primary: var(--j-font) !important;
  --body-family: var(--j-font) !important;
  --primary: var(--j-primary) !important;
  --primary-dark: var(--j-primary-hover) !important;
  --primary-light: var(--j-primary-soft) !important;
  --link: var(--j-primary) !important;
  --link-hover: var(--j-primary-hover) !important;
  --text: var(--j-text) !important;
  --text-strong: var(--j-text) !important;
  --text-light: var(--j-text-3) !important;
  --site-background: var(--j-bg) !important;
  --scheme-main: var(--j-surface) !important;
  --scheme-main-bis: var(--j-bg) !important;
  --scheme-main-ter: var(--j-surface-2) !important;
  --background: var(--j-bg) !important;
  --border: var(--j-border) !important;
  --border-light: var(--j-border-light) !important;
  --radius: 3px !important; --radius-small: 3px !important; --radius-large: 3px !important;
  --card-background: var(--j-surface) !important;
  --card-border-color: var(--j-border) !important;
  --card-shadow: var(--j-shadow) !important;
  --menu-item-active-background-color: var(--j-primary-soft) !important;
  --menu-item-active-color: var(--j-primary) !important;
  --menu-item-hover-background-color: var(--j-surface-2) !important;
  --menu-item-hover-color: var(--j-text) !important;
  --menu-item-radius: 3px !important;
  --input-radius: 3px !important;
  --input-background-color: var(--j-surface) !important;
  --input-border-color: var(--j-border) !important;
  --input-focus-border-color: var(--j-focus) !important;
  --grey-100: var(--j-bg) !important; --grey-200: var(--j-surface-2) !important; --grey-300: var(--j-border) !important;
  --grey-500: var(--j-text-3) !important; --grey-600: var(--j-text-3) !important;
  --grey-700: var(--j-text-2) !important; --grey-800: var(--j-text) !important; --grey-900: var(--j-text) !important;
}
body, .app-container, .app-content { background: var(--j-bg) !important; color: var(--j-text) !important; font-family: var(--j-font) !important; }
h1, h2, h3, .title, .subtitle, .project-title, .menu-list a { font-family: var(--j-font) !important; letter-spacing: 0 !important; color: var(--j-text) !important; }
p, li, span, td, label, .content { color: inherit; }

/* Barre du haut */
.navbar { background: var(--j-surface) !important; border-bottom: 1px solid var(--j-border) !important; box-shadow: none !important; height: 56px !important; min-height: 56px !important; }
.navbar .project-title { font-weight: 600 !important; font-size: 1.1rem !important; color: var(--j-text) !important; }
.navbar .navbar-end, .navbar .navbar-end a, .navbar .username { color: var(--j-text-2) !important; }

/* Barre laterale */
.menu-container { background: var(--j-surface) !important; border-right: 1px solid var(--j-border) !important; top: 56px !important; }
.menu-container .menu-label { color: var(--j-text-3) !important; font-size: .7rem !important; letter-spacing: .04em !important; text-transform: uppercase !important; font-weight: 700 !important; }
.menu-list a { color: var(--j-text-2) !important; font-weight: 500 !important; font-size: .9rem !important; border-radius: 3px !important; padding: .45rem .6rem !important; }
.menu-list a:hover { background: var(--j-surface-2) !important; color: var(--j-text) !important; }
.menu-list a.router-link-active, .menu-list a.is-active { background: var(--j-primary-soft) !important; color: var(--j-primary) !important; font-weight: 600 !important; }
.menu-container .menu-list .color-bubble { border-radius: 3px !important; }

/* Cartes */
.card, .box { background: var(--j-surface) !important; border: 1px solid var(--j-border) !important; border-radius: 3px !important; box-shadow: var(--j-shadow) !important; color: var(--j-text) !important; }
.card-header { background: var(--j-surface) !important; border-bottom: 1px solid var(--j-border-light) !important; box-shadow: none !important; }
.card-header-title { color: var(--j-text) !important; font-weight: 600 !important; font-size: .95rem !important; }
.card-content { color: var(--j-text) !important; }

/* Boutons */
.button, .base-button.button { border-radius: 3px !important; font-weight: 500 !important; box-shadow: none !important; font-family: var(--j-font) !important; }
.button.is-primary { background: var(--j-primary) !important; color: #fff !important; border: none !important; }
html.dark .button.is-primary { color: #1D2125 !important; }
.button.is-primary:hover { background: var(--j-primary-hover) !important; }
.button:not(.is-primary):not(.is-danger):not(.is-success) { background: var(--j-surface-2) !important; color: var(--j-text) !important; border: none !important; }
.button:not(.is-primary):not(.is-danger):not(.is-success):hover { background: var(--j-surface-3) !important; }
.button.is-success { background: var(--j-success) !important; color: #fff !important; }
html.dark .button.is-success { color: #1D2125 !important; }

/* Selecteur de vues en onglets */
.switch-view { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; border-bottom: 2px solid var(--j-border) !important; padding: 0 !important; gap: .25rem !important; }
.switch-view .switch-view-button { background: transparent !important; color: var(--j-text-2) !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important; margin-bottom: -2px !important; padding: .5rem .9rem !important; font-weight: 500 !important; }
.switch-view .switch-view-button:hover { color: var(--j-primary) !important; background: var(--j-surface-2) !important; }
.switch-view .switch-view-button.is-active { background: transparent !important; color: var(--j-primary) !important; border-bottom: 2px solid var(--j-primary) !important; font-weight: 600 !important; }

/* Champs */
.input, .textarea, .select select, .filter-container .input { border: 2px solid var(--j-border) !important; border-radius: 3px !important; box-shadow: none !important; background: var(--j-surface) !important; color: var(--j-text) !important; font-family: var(--j-font) !important; }
.input::placeholder, .textarea::placeholder { color: var(--j-text-3) !important; }
.input:focus, .textarea:focus, .select select:focus { border-color: var(--j-focus) !important; box-shadow: none !important; }
.filter-container { padding-bottom: .5rem !important; }

/* Liste de taches */
.tasks .task { background: var(--j-surface) !important; border: 1px solid var(--j-border) !important; border-radius: 3px !important; margin-bottom: .35rem !important; padding: .45rem .75rem !important; box-shadow: none !important; }
.tasks .task:hover { background: var(--j-surface-2) !important; }
.tasks .task .tasktext, .tasks .task a { color: var(--j-text) !important; font-weight: 500 !important; }
.tasks .task.done .tasktext, .tasks .task.done a { color: var(--j-text-3) !important; }
.task .fancycheckbox, .fancy-checkbox { accent-color: var(--j-primary) !important; }

/* Etiquettes en lozenges */
.tag { border-radius: 3px !important; font-size: .68rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .02em !important; padding: .1rem .4rem !important; height: auto !important; line-height: 1.4 !important; }

/* Kanban */
.kanban .bucket, .kanban-bucket-container .bucket, .bucket { background: var(--j-bg) !important; border: 1px solid var(--j-border) !important; border-radius: 3px !important; box-shadow: none !important; }
.bucket .bucket-header, .bucket .title.input, .bucket h2, .bucket .title { color: var(--j-text-3) !important; font-size: .75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .04em !important; background: transparent !important; border: none !important; }
.bucket .task, .kanban .task, .kanban-card { background: var(--j-surface) !important; border: 1px solid var(--j-border) !important; border-radius: 3px !important; box-shadow: var(--j-shadow-card) !important; color: var(--j-text) !important; }
.bucket .task:hover, .kanban .task:hover { background: var(--j-surface-2) !important; }
.bucket .task .task-id, .task-id { color: var(--j-text-3) !important; font-weight: 500 !important; font-family: var(--j-font) !important; }
.bucket .bucket-footer, .bucket-footer { background: transparent !important; }

/* Detail d'une tache */
.task-view .heading h1, .task-view h1.title, h1.title { color: var(--j-text) !important; font-weight: 500 !important; font-size: 1.5rem !important; }
.task-view .action-buttons .button, .action-buttons .button { background: var(--j-surface-2) !important; color: var(--j-text) !important; text-transform: none !important; font-weight: 500 !important; justify-content: flex-start !important; }
.task-view .action-buttons .button:hover { background: var(--j-surface-3) !important; }
.task-view .action-buttons .button.is-success, .action-buttons .done-button { background: var(--j-success) !important; }
.task-view .details .title, .task-view .detail-title { color: var(--j-text-3) !important; font-size: .75rem !important; text-transform: uppercase !important; font-weight: 700 !important; letter-spacing: .04em !important; }
.task-view .heading, .task-view .subtitle, .task-view .subtitle a { color: var(--j-text-2) !important; }

/* Editeur de texte et commentaires */
.tiptap, .ProseMirror, .editor, .comments .comment .content { background: var(--j-surface) !important; color: var(--j-text) !important; }
.editor-toolbar, .tiptap__editor-toolbar, .editor .toolbar { background: var(--j-surface) !important; border-color: var(--j-border) !important; }

/* Tableaux */
.table { background: var(--j-surface) !important; color: var(--j-text) !important; }
.table thead th { color: var(--j-text-3) !important; font-size: .75rem !important; text-transform: uppercase !important; letter-spacing: .04em !important; border-bottom: 2px solid var(--j-border) !important; background: var(--j-surface) !important; }
.table td { border-color: var(--j-border-light) !important; color: var(--j-text) !important; }
.table tr:hover td { background: var(--j-surface-2) !important; }

/* Divers */
a { color: var(--j-primary); }
.notification, .message { border-radius: 3px !important; }
.dropdown-content, .modal-card, .modal-card-body, .modal-content .card { background: var(--j-surface) !important; color: var(--j-text) !important; border-radius: 3px !important; box-shadow: var(--j-shadow-pop) !important; }
.dropdown-item { color: var(--j-text) !important; }
.dropdown-item:hover { background: var(--j-surface-2) !important; }
::selection { background: var(--j-selection); }

/* Pliage des sous-taches (script jira-theme.js) */
.jira-toggle { background: transparent !important; border: 0 !important; width: auto !important; height: 28px !important; min-width: 28px !important; padding: 0 .35rem !important; margin: 0 .55rem 0 -.2rem !important; cursor: pointer; color: var(--j-text-3) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle; line-height: 1; border-radius: 3px !important; box-shadow: none !important; flex: none !important; }
.jira-toggle:hover { background: var(--j-surface-3) !important; }
.jira-toggle svg { transform: rotate(90deg); transition: transform .15s ease; }
.jira-toggle.is-collapsed svg { transform: rotate(0deg); }
.jira-toggle:hover { color: var(--j-primary) !important; }
.jira-toggle.is-collapsed::after { content: attr(data-count); font-size: .65rem; font-weight: 700; color: var(--j-text-3); background: var(--j-surface-2); border-radius: 3px; padding: 0 .3rem; margin-left: .35rem; }
.jira-collapsed > .subtask-nested { display: none !important; }

/* Pas de case a cocher dans les listes de taches (comme Jira : on termine depuis la fiche) */
.tasks .task.single-task .base-checkbox, .tasks .task.single-task .fancy-checkbox, .tasks .task.single-task .fancycheckbox { display: none !important; }

/* Pas d'etoile "favori" sur les lignes de taches ni sur les cartes Kanban */
.tasks .task.single-task .favorite, .bucket .task .favorite, .kanban .task .favorite { display: none !important; }

/* Pas d'avatar de l'assigne sur les lignes de taches ni sur les cartes Kanban (visible dans la fiche) */
.tasks .task.single-task .assignees-list, .bucket .task .assignees-list, .kanban .task .assignees-list, .bucket .task .assignees, .kanban .task .assignees { display: none !important; }

/* Etiquettes toujours sur une ligne sous le titre de la tache (vue Liste) */
.tasks .task.single-task .tasktext { display: block !important; }
.tasks .task.single-task .tasktext > .label-wrapper { display: flex !important; flex-wrap: wrap !important; gap: .25rem !important; margin: .3rem 0 0 0 !important; }

/* Filtre par etiquette en un clic (script jira-theme.js) */
#jira-label-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .5rem 0 .25rem 0; }
.jira-label-bar-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--j-text-3); margin-right: .25rem; }
.jira-label-chip { --chip: var(--j-text-3); display: inline-flex; align-items: center; gap: .3rem; height: 26px; padding: 0 .6rem; border: 1px solid var(--j-border) !important; border-radius: 999px !important; background: var(--j-surface) !important; color: var(--j-text-2) !important; font: 600 .75rem var(--j-font) !important; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; box-shadow: none !important; }
.jira-label-chip:hover { background: var(--j-surface-2) !important; color: var(--j-text) !important; }
.jira-label-chip.is-active { background: var(--j-primary-soft) !important; border-color: var(--j-primary) !important; color: var(--j-primary) !important; }
.jira-chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chip); flex: none; }
.jira-chip-count { font-size: .65rem; font-weight: 700; color: var(--j-text-3); background: var(--j-surface-2); border-radius: 999px; padding: 0 .35rem; line-height: 1.5; }
.jira-label-chip.is-active .jira-chip-count { background: var(--j-primary); color: #fff; }
html.dark .jira-label-chip.is-active .jira-chip-count { color: #1D2125; }
.task .tag { cursor: pointer; }
.task .tag:hover { filter: brightness(1.1); outline: 2px solid var(--j-primary); outline-offset: 1px; }
.jira-filtered-out { display: none !important; }
.switch-view-container { flex-wrap: wrap !important; }
#jira-label-bar { flex: 1 1 100% !important; order: 10; margin-top: .6rem !important; }