/* KKRI Brain : correctifs et compléments des bases de données (chargé après app.css). */

/* ---------- Échéances ---------- */
.date-v { white-space: nowrap; }
.date-v.late { color: #df2f4a; font-weight: 600; }
.date-v.today { color: var(--accent, #6161ff); font-weight: 600; }

/* ---------- Badge du bouton Filtrer / Trier ---------- */
.db-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent, #6161ff); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.chip.chip-off { background: var(--bg-soft, #f6f7fb); color: var(--muted, #676879); border: 1px dashed var(--line-strong, #d0d4e4); }

/* ---------- États vides ---------- */
.db-empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; color: var(--muted, #676879); }
.db-empty-state p { margin: 0; font-weight: 500; }

/* ---------- Relations : puces tronquées dans les cellules ---------- */
.rel-chip .rel-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td .rel-list { flex-wrap: nowrap !important; overflow: hidden; }
.td .rel-chip { max-width: 100%; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-p .rel-chip, .lst-props .rel-chip { max-width: 100%; min-width: 0; }
.opt-item.rel-create { color: var(--accent, #6161ff); font-weight: 600; border-top: 1px solid var(--line, #e6e9ef); }

/* ---------- Ombre de défilement horizontal du tableau ---------- */
.tbl-outer { position: relative; }
.tbl-outer::after, .tbl-outer::before { content: ''; position: absolute; top: 0; bottom: 6px; width: 18px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 5; }
.tbl-outer::after { right: 0; background: linear-gradient(to left, rgba(50, 51, 56, .14), rgba(50, 51, 56, 0)); }
.tbl-outer::before { left: 0; width: 0; }
.tbl-outer.scroll-r::after { opacity: 1; }

/* ---------- Pied de tableau (calculs) ---------- */
.tr.calc-row { border-bottom: 1px solid var(--line, #e6e9ef); background: #fff; }
.tr.calc-row:hover { background: #fff; }
.tr.calc-row .td.calc { min-height: 30px; justify-content: flex-end; gap: 6px; font-size: 12.5px; color: var(--muted, #676879); border-right-color: transparent; }
.tr.calc-row .td.calc.sticky { justify-content: flex-start; background: #fff; }
.tr.calc-row .td.calc:hover { background: var(--bg-hover, #eceff8); }
.calc-ph { opacity: 0; font-size: 12px; color: var(--faint, #9699a6); }
.calc-l { text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; color: var(--faint, #9699a6); font-weight: 600; }
.calc-v { color: var(--text, #323338); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Calendrier : lignes sans date ---------- */
.cal-nodate { margin-top: 12px; border: 1px solid var(--line, #e6e9ef); border-radius: 10px; padding: 0 10px; background: #fff; }
.cal-nodate.over { background: var(--accent-soft, #ebebff); }
.cal-nodate summary { cursor: pointer; padding: 9px 2px; font-weight: 600; font-size: 14px; color: var(--muted, #676879); }
.cal-nodate-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px; }
.cal-nodate-list .cal-chip { max-width: 240px; }
.cal-nodate-hint { font-size: 12px; color: var(--faint, #9699a6); padding-bottom: 10px; }

/* ---------- Accessibilité : focus clavier ---------- */
.tr[tabindex]:focus-visible, .card:focus-visible, .lst-row:focus-visible, .gal-card:focus-visible, .gal-add:focus-visible, .cal-chip:focus-visible, .td.calc:focus-visible, .tr.add-row:focus-visible {
  outline: 2px solid var(--accent, #6161ff); outline-offset: -2px;
}
.card:focus-visible, .gal-card:focus-visible { outline-offset: 2px; }

/* ---------- Barre d'outils : onglets sur une ligne dédiée (<= 1100px) ---------- */
@media (max-width: 1100px) {
  .db-bar { flex-wrap: wrap; row-gap: 2px; }
  .db-tabs { flex: 1 1 100%; }
  .db-tools { flex: 1 1 100%; justify-content: flex-end; padding: 4px 0; }
}

/* ---------- Mobile (<= 820px) ---------- */
@media (max-width: 820px) {
  .db { max-width: 100%; min-width: 0; }
  .db-bar { flex-wrap: wrap; }
  .db-tabs { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 24px; }
  .db-tabs::-webkit-scrollbar { display: none; }
  .db-tools { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; gap: 2px; min-width: 0; }
  .db-tool .lbl { display: none; }
  .db-tool { padding: 6px 8px; }
  .db-search { flex: 1 1 120px; min-width: 0; }
  .db-search input { width: 100%; min-width: 0; }
  .new-split { margin-left: auto; flex: none; }
  .db-chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .db-chips .chip { flex: none; }
  .cal-day { min-height: 74px; }
  .cal-chip { font-size: 11px; padding: 1px 4px; }
  .board { max-width: 100%; }
  .tbl-wrap { max-width: 100%; }
}
@media (max-width: 380px) {
  .new-split .lbl-new { display: none; }
}

/* =====================================================================
   Lot 2 : sélecteur de date, pied de tableau, mobile, lisibilité
   ===================================================================== */

/* ---------- Sélecteur de date maison ---------- */
.dp-pop { overflow: visible; max-height: none; }
.dp { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.dp-top { display: flex; flex-direction: column; gap: 3px; }
.dp-text { width: 100%; padding: 7px 10px; border: 1px solid var(--line-strong, #d0d4e4); border-radius: 6px; outline: none; font: inherit; font-size: 14px; background: #fff; }
.dp-text:focus { border-color: var(--accent, #6161ff); box-shadow: 0 0 0 3px var(--accent-soft, #ebebff); }
.dp-text.err { border-color: #df2f4a; box-shadow: 0 0 0 3px rgba(223, 47, 74, .12); }
.dp-text.shake { animation: dp-shake .25s; }
@keyframes dp-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.dp-hint { min-height: 16px; font-size: 12px; color: var(--faint, #9699a6); padding-left: 2px; }
.dp-hint.ok { color: var(--muted, #676879); }
.dp-hint.err { color: #df2f4a; }
.dp-head { display: flex; align-items: center; justify-content: space-between; }
.dp-month { font-weight: 700; font-size: 14px; text-transform: capitalize; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { font-size: 11px; font-weight: 600; color: var(--faint, #9699a6); text-align: center; padding: 2px 0 4px; }
.dp-day { height: 32px; border-radius: 8px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text, #323338); background: transparent; display: grid; place-items: center; cursor: pointer; border: 0; }
.dp-day:hover { background: var(--bg-hover, #eceff8); }
.dp-day.other { color: var(--faint, #9699a6); }
.dp-day.today { color: var(--accent, #6161ff); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--accent, #6161ff); }
.dp-day.sel { background: var(--accent, #6161ff); color: #fff; font-weight: 700; box-shadow: none; }
.dp-day.cur:not(.sel) { background: var(--accent-soft, #ebebff); }
.dp-day:focus-visible { outline: 2px solid var(--accent, #6161ff); outline-offset: 1px; }
.dp-quick { display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--line, #e6e9ef); padding-top: 8px; }
.dp-q { padding: 4px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--text, #323338); background: var(--bg-soft, #f6f7fb); border: 1px solid var(--line, #e6e9ef); cursor: pointer; }
.dp-q:hover { background: var(--accent-soft, #ebebff); border-color: #c9c9ff; color: var(--accent-dark, #4c4cdf); }
.dp-sub { display: flex; align-items: center; gap: 8px; }
.dp-sub .dp-hint { flex: 1; min-width: 0; }
.dp-q.danger { flex: none; padding: 2px 6px; font-size: 12px; color: #df2f4a; background: transparent; border-color: transparent; }
.dp-quick .dp-q { flex: 1 1 auto; text-align: center; }
.dp-q.danger:hover { background: rgba(223, 47, 74, .08); color: #df2f4a; border-color: transparent; }
.flt-date { white-space: nowrap; }
@media (hover: none) { .dp-day { height: 40px; } .dp-q { padding: 9px 12px; } .dp-nav { min-width: 40px; min-height: 40px; } }

/* ---------- Pied de tableau : total compact et discret ---------- */
.tr.calc-row .td.calc { min-height: 26px; padding-top: 0; padding-bottom: 0; font-size: 12px; }
.tr.calc-total { border-top: 1px solid var(--line, #e6e9ef); border-bottom: 0; }
/* « Calculer » : au survol seulement avec une souris */
@media (hover: hover) {
  .tr.calc-row:hover .calc-ph { opacity: 1; }
}
.td.calc:focus-visible .calc-ph { opacity: 1; }
@media (hover: none) {
  .calc-ph { opacity: 0; }
  .tr.calc-total .calc-ph { opacity: .55; }
}

/* ---------- Lignes terminées : titre en gris ---------- */
.tr.is-done .td.title .t, .lst-row.is-done .t { color: var(--muted, #676879); text-decoration: line-through; text-decoration-color: rgba(103, 104, 121, .45); text-decoration-thickness: 1px; }
.card.is-done .card-t, .gal-card.is-done .card-t, .cal-item.is-done .t { color: var(--muted, #676879); }

/* ---------- Relations : « +N » dans les cellules ---------- */
.rel-more { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--accent-soft, #ebebff); color: var(--accent-dark, #4c4cdf); font-size: 12px; font-weight: 700; border: 0; cursor: pointer; }
.rel-more:hover { background: #dcdcff; }
.td .rel-list { align-items: center; }

/* ---------- Kanban : colonnes 260px, indice de défilement ---------- */
.col { width: 260px; }
.board-outer { position: relative; }
.board-outer::after { content: ''; position: absolute; top: 0; right: 0; bottom: 16px; width: 22px; pointer-events: none; opacity: 0; transition: opacity .15s; background: linear-gradient(to left, rgba(50, 51, 56, .14), rgba(50, 51, 56, 0)); border-radius: 0 12px 12px 0; }
.board-outer.scroll-r::after { opacity: 1; }
.card.is-done { opacity: .85; }

/* ---------- Galerie : carte compacte sans couverture ---------- */
.gal-card.no-cover .gal-body { padding: 12px 14px; }
.gal-card .card-t { align-items: center; }
.gal-ico { font-size: 18px; line-height: 1; flex: none; }
.gal-cover { height: 96px; }
.gal-add { min-height: 64px; }

/* ---------- Vue liste : colonnes alignées ---------- */
.lst-row .t { flex: 1 1 auto; }
.lst-props { flex: none; gap: 12px; min-width: 0; overflow: hidden; }
.lst-props > * { flex: none; }
.lst-props > .lp { width: var(--lpw, 120px); min-width: 0; overflow: hidden; display: inline-flex; align-items: center; white-space: nowrap; text-overflow: ellipsis; }
.lst-props > .lp > * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lst-props > .lp:last-child { min-width: 96px; justify-content: flex-end; text-align: right; }
.lst-props .rel-list { flex-wrap: nowrap !important; overflow: hidden; }
.lst .grp-h { padding-left: 2px; }
.lst-add .td { width: auto; }
.lst-more { flex: none; }
@media (hover: hover) and (min-width: 600px) { .lst-more { display: none; } }

/* ---------- Calendrier : zone « Sans date » toujours visible ---------- */
.cal-nodate summary { display: flex; align-items: center; gap: 8px; list-style: none; }
.cal-nodate summary::-webkit-details-marker { display: none; }
.cal-nodate summary .gc { color: var(--faint, #9699a6); font-weight: 500; font-size: 13px; }
.cal-nodate-tip { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--faint, #9699a6); }
.cal-nodate.empty { border-style: dashed; background: transparent; }
.cal-nodate.empty summary { cursor: default; padding: 6px 2px; }
.cal-nodate.over { border-color: var(--accent, #6161ff); border-style: solid; }

/* ---------- Base intégrée dans une page : onglets jamais tronqués ---------- */
.blk-db .db-bar { flex-wrap: wrap; }
.blk-db .db-tabs { flex: 1 1 auto; flex-wrap: wrap; overflow-x: auto; overflow-y: hidden; min-width: 0; -webkit-mask-image: none; mask-image: none; padding-right: 0; row-gap: 0; }
.blk-db .db-tab { flex: none; max-width: none; }
.blk-db .db-tools { flex: 0 1 auto; margin-left: auto; }

/* ---------- Téléphone (< 600px) ---------- */
@media (max-width: 599px) {
  .lst-row { flex-wrap: wrap; row-gap: 4px; padding: 10px 8px; align-items: flex-start; }
  .lst-row .t { flex: 1 1 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
  .lst-row .pg-ico { margin-top: 1px; }
  .lst-props { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; padding-left: 28px; overflow: visible; }
  .lst-props > .lp { width: auto; max-width: 100%; }
  .lst-props > .lp:last-child { min-width: 0; justify-content: flex-start; }
  .lst-props > .lp-empty { display: none; }
  .lst-props .rel-list { flex-wrap: wrap !important; }
  .lst-more { order: 2; margin: -8px -6px -8px 0; }
  .lst-props { order: 3; }
  .db-body > .lst .grp-h { position: static; padding-top: 12px; }

  .cal-day { min-height: 48px; padding: 3px 2px; align-items: center; cursor: pointer; }
  .cal-num { align-self: center; padding: 1px 5px; font-size: 13px; }
  .cal-day.picked { background: var(--accent-soft, #ebebff); }
  .cal-day.picked .cal-num { box-shadow: inset 0 0 0 1.5px var(--accent, #6161ff); }
  .cal-day.today.picked .cal-num { box-shadow: none; }
  .cal-dow { padding: 6px 2px; text-align: center; font-size: 11px; }
  .cal-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 0 2px; max-width: 100%; }
  .cal-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .cal-dots-more { font-size: 9px; color: var(--muted, #676879); line-height: 7px; }
  .cal-head .m { min-width: 0; flex: 1; font-size: 16px; }
  .cal-nodate-tip { display: none; }
}
.cal-daylist { margin-top: 12px; border: 1px solid var(--line, #e6e9ef); border-radius: 10px; background: #fff; overflow: hidden; }
.cal-daylist-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--line, #e6e9ef); background: var(--bg-soft, #f6f7fb); }
.cal-daylist-t { font-weight: 700; font-size: 14px; }
.cal-daylist-t::first-letter { text-transform: uppercase; }
.cal-daylist-h .gc { color: var(--faint, #9699a6); font-size: 13px; }
.cal-daylist-h .grow { flex: 1; }
.cal-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 44px; border-bottom: 1px solid var(--line, #e6e9ef); cursor: pointer; }
.cal-item:last-child { border-bottom: 0; }
.cal-item:active, .cal-item:hover { background: var(--bg-soft, #f6f7fb); }
.cal-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cal-item .cal-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cal-item .pill { flex: none; max-width: 40%; }
.cal-daylist-empty { padding: 14px 12px; color: var(--faint, #9699a6); font-size: 14px; }
.cal-item:focus-visible, .cal-day[tabindex]:focus-visible { outline: 2px solid var(--accent, #6161ff); outline-offset: -2px; }

/* ---------- Cibles tactiles >= 40px (écrans tactiles) ---------- */
@media (hover: none) {
  .db-tool { min-height: 40px; min-width: 40px; justify-content: center; }
  .db .icon-btn, .db .grp-h .chev, .lst-more { min-width: 40px; min-height: 40px; }
  .td .open-btn { display: inline-flex; min-height: 40px; min-width: 40px; justify-content: center; padding: 0 10px; }
  .db .todo-box { position: relative; }
  .db .todo-box::after { content: ''; position: absolute; inset: -12px; }
  .td { min-height: 40px; }
  .db-tab { min-height: 40px; }
  .chip .icon-btn { min-width: 32px; min-height: 32px; }
  .rel-more { min-height: 32px; min-width: 36px; }
  .col-add, .tr.add-row .td { min-height: 44px; }
  .db .th .rs { width: 16px; right: -8px; }
}