/* Composants communs (CSS pur : la version CDN de Tailwind ne traite pas @apply dans les fichiers externes) */
[x-cloak] { display: none !important; }
/* Les éléments de grille peuvent rétrécir sous la largeur de leur contenu (graphiques, tableaux) */
.grid > * { min-width: 0; }

:root {
  --brand: #15803d;
  --brand-dark: #166534;
  --sun: #facc15;
  --ink: #0f161d;
}

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: .5rem; padding: .5rem .9rem; font-size: .875rem; font-weight: 500; line-height: 1.25rem; border: 1px solid transparent; cursor: pointer; transition: background .15s, box-shadow .15s, color .15s; white-space: nowrap; }
.btn svg { width: 1rem; height: 1rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-sun:hover { background: #eab308; }
.btn-light { background: #fff; color: #334155; border-color: #e2e8f0; }
.btn-light:hover { background: #f8fafc; }
.btn-danger { background: #fff; color: #e11d48; border-color: #fecdd3; }
.btn-danger:hover { background: #fff1f2; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1f2933; }
.btn-sm { padding: .3rem .6rem; font-size: .8rem; }
.btn-icon { padding: .4rem; }

/* Cartes */
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: .9rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid #f1f5f9; }
.card-title { font-weight: 600; color: #0f172a; font-size: .95rem; }
.card-body { padding: 1.1rem; }

/* Formulaires */
.label { display: block; font-size: .8rem; font-weight: 500; color: #475569; margin-bottom: .3rem; }
.input, .select, .textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: .5rem; padding: .5rem .7rem; font-size: .875rem; background: #fff; color: #0f172a; outline: none; transition: border .15s, box-shadow .15s; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(21, 128, 61, .15); }
.input-sm { padding: .3rem .5rem; font-size: .8rem; }
.textarea { min-height: 90px; }
.checkbox { width: 1rem; height: 1rem; accent-color: var(--brand); }
.help { font-size: .75rem; color: #64748b; margin-top: .25rem; }

/* Tableaux */
.table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.table th { text-align: left; font-weight: 500; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: #64748b; background: #f8fafc; padding: .6rem 1rem; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.table td { padding: .7rem 1rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.table tbody tr:hover { background: #f8fafc; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* KPI */
.kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: .9rem; padding: 1rem 1.1rem; }
.kpi-label { font-size: .75rem; color: #64748b; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: .75rem; color: #64748b; margin-top: .15rem; }

/* Onglets */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid #e2e8f0; overflow-x: auto; }
.tab { padding: .6rem .9rem; font-size: .875rem; color: #64748b; border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; }
.tab:hover { color: #0f172a; }
.tab.active { color: var(--brand); border-color: var(--brand); font-weight: 500; }

/* Kanban */
.kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.kanban-col { flex: 0 0 280px; background: #f1f5f9; border-radius: .9rem; display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.kanban-col-header { padding: .75rem .9rem; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .85rem; }
.kanban-list { padding: 0 .6rem .6rem; overflow-y: auto; min-height: 60px; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.kanban-card { background: #fff; border: 1px solid #e2e8f0; border-radius: .6rem; padding: .7rem; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.kanban-card:hover { border-color: #86efac; }
.sortable-ghost { opacity: .4; }

/* Rôles (classes fixes pour éviter les classes dynamiques non détectées) */
.role-rose { background: #ffe4e6; color: #9f1239; }
.role-sky { background: #e0f2fe; color: #075985; }
.role-violet { background: #ede9fe; color: #5b21b6; }
.role-amber { background: #fef3c7; color: #92400e; }
.role-emerald { background: #d1fae5; color: #065f46; }
.role-orange { background: #ffedd5; color: #9a3412; }
.role-teal { background: #ccfbf1; color: #115e59; }
.role-slate { background: #f1f5f9; color: #334155; }

.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

.empty { padding: 2.5rem 1rem; text-align: center; color: #94a3b8; font-size: .875rem; }

/* Timeline */
.timeline-item { position: relative; padding-left: 1.75rem; padding-bottom: 1rem; }
.timeline-item::before { content: ''; position: absolute; left: .45rem; top: 1.4rem; bottom: 0; width: 2px; background: #e2e8f0; }
.timeline-item:last-child::before { display: none; }
.timeline-dot { position: absolute; left: 0; top: .2rem; width: 1rem; height: 1rem; border-radius: 9999px; background: #dcfce7; border: 2px solid var(--brand); }

/* ------------------------------------------------------------------
   Vue mobile : chaque ligne de tableau devient une carte.
   Les libellés (data-label) sont posés par public/js/app.js à partir des <th>.
   Exclure un tableau : classe "no-cards" (ex. matrice des permissions).
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  table.table-cards { min-width: 0 !important; display: block; }
  table.table-cards thead { display: none; }
  table.table-cards tbody, table.table-cards tfoot { display: block; padding: .5rem; }
  table.table-cards tr {
    display: block; position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: .8rem;
    padding: .55rem .85rem; margin-bottom: .6rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  }
  table.table-cards tbody tr:hover { background: #fff; }
  table.table-cards tr[onclick] { cursor: pointer; }
  table.table-cards tr[onclick]:active { background: #f0fdf4; }
  /* Grille : libellé à gauche, valeur(s) empilée(s) à droite */
  table.table-cards td {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; justify-items: end;
    padding: .3rem 0; border: 0; text-align: right; min-width: 0; width: auto !important; white-space: normal;
  }
  table.table-cards td > * { grid-column: 2; max-width: 100%; }
  table.table-cards td::before {
    content: attr(data-label); grid-column: 1; grid-row: 1 / span 12; align-self: center; justify-self: start; max-width: 9rem; text-align: left;
    font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: #64748b;
  }
  table.table-cards td:not([data-label])::before, table.table-cards td[data-label=""]::before { display: none; }
  table.table-cards td:not([data-label]), table.table-cards td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  table.table-cards td:not([data-label]) > *, table.table-cards td[data-label=""] > * { grid-column: 1; }
  table.table-cards td .truncate { max-width: 100%; }
  /* Première cellule renseignée = titre de la carte */
  table.table-cards td.cell-title {
    display: block; justify-items: start; text-align: left !important; font-size: .95rem; padding-bottom: .5rem; margin-bottom: .2rem; border-bottom: 1px solid #f1f5f9;
  }
  table.table-cards td.cell-title::before { display: none; }
  table.table-cards td.cell-title > * { margin-left: 0; text-align: left; justify-content: flex-start; }
  /* Cellules vides : inutile de les afficher */
  table.table-cards td.cell-empty { display: none; }
  /* Lignes pleine largeur (sections, totaux, messages vides) */
  table.table-cards td[colspan] { display: block; justify-items: start; text-align: left; }
  table.table-cards td[colspan]::before { display: none; }
  table.table-cards tr:has(> td[colspan]:only-child) { padding: .4rem .85rem; }
  table.table-cards tr:has(> td.empty) { border-style: dashed; box-shadow: none; }
  /* Cellules contenant des champs de saisie (éditeurs de lignes) : libellé au-dessus */
  table.table-cards td:has(input:not([type=checkbox]):not([type=radio]), select, textarea) {
    display: flex; flex-direction: column; align-items: stretch; gap: .25rem; text-align: left;
  }
  table.table-cards td:has(input:not([type=checkbox]):not([type=radio]), select, textarea)::before { max-width: none; align-self: flex-start; }
  /* Éditeurs de lignes : la désignation en pleine largeur, les champs chiffrés 2 par 2 */
  table.table-cards tbody tr:has(input:not([type=checkbox]):not([type=radio])) { display: flex; flex-wrap: wrap; column-gap: .75rem; }
  table.table-cards tbody tr:has(input:not([type=checkbox]):not([type=radio])) > td { flex: 1 1 100%; }
  table.table-cards tbody tr:has(input:not([type=checkbox]):not([type=radio])) > td:has(input:not([type=checkbox]):not([type=radio]), select):not(.cell-title):not([colspan]) { flex: 1 1 40%; }
  table.table-cards td .input, table.table-cards td .select, table.table-cards td .textarea, table.table-cards td input { max-width: 100%; }
  .table-wrap:has(> table.table-cards) { overflow-x: visible; }

  /* Filtres repliables (bouton injecté par app.js) */
  form.filters-collapsible.filters-closed { display: none !important; }
  .filters-toggle { display: flex !important; }

  /* Ajustements généraux mobile */
  .card-header { flex-wrap: wrap; }
  .kpi-value { font-size: 1.1rem; word-break: break-word; }
  .kpi { padding: .8rem .9rem; }
  .kanban { scroll-snap-type: x mandatory; margin: 0 -1rem; padding: 0 1rem 1rem; }
  .kanban-col { flex-basis: 85vw; scroll-snap-align: start; max-height: none; }
  .tabs, .overflow-x-auto, nav { scrollbar-width: none; }
  .tabs::-webkit-scrollbar, .overflow-x-auto::-webkit-scrollbar, nav::-webkit-scrollbar { display: none; }
  .btn { padding: .5rem .75rem; }
}

/* KPI : 2 par ligne sur téléphone au lieu d'un empilement */
@media (max-width: 639px) {
  .grid:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .grid:has(> .kpi) > .kpi .kpi-label { font-size: .65rem; }
  .grid:has(> .kpi) > .kpi .kpi-sub { font-size: .7rem; }
}
.filters-toggle { display: none; }

/* Impression */
@media print {
  aside, header, footer, .no-print { display: none !important; }
  .lg\:pl-64 { padding-left: 0 !important; }
}