/* Tableaux de bord et widgets — voir static/js/views/dashboard.js et static/js/charts.js
   Couleurs : variables CSS uniquement (palette et mode sombre). Propriétés logiques (inline-start/end)
   pour la lecture de droite à gauche. */

/* ---------- onglets et grille ---------- */
.dash-tabs { margin-bottom: 16px; }
.dash-tabs .tab { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.dash-tabs .tab svg { width: 15px; height: 15px; }
/* « dense » : un widget étroit remonte combler le trou laissé en fin de ligne par un widget plus large */
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; grid-auto-flow: row dense; }
.dash-empty { grid-column: 1 / -1; }
.dc-sort { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.dc-sort select { width: auto; }
.dc-sector { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dtf .mono, .dash-row .mono { white-space: nowrap; }

/* ---------- widget ---------- */
.dw { grid-column: span 6; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column; }
.dw-s { grid-column: span 3; }
.dw-t { grid-column: span 4; }
.dw-m { grid-column: span 6; }
.dw-l { grid-column: span 8; }
.dw-xl { grid-column: span 12; }
.dw-h { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border-bottom: 1px solid var(--line-2); cursor: grab; user-select: none; }
.dw-h h3 { flex: 1; font-size: 14px; font-weight: 650; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-grip { color: var(--muted); opacity: .55; display: inline-flex; }
.dw-grip svg { width: 14px; height: 14px; }
.dw-h:hover .dw-grip { opacity: 1; }
.dw-tools { display: inline-flex; align-items: center; gap: 4px; cursor: default; }
.dw-tools .btn.icon { padding: 5px; }
.dw-tools .btn svg { width: 14px; height: 14px; }
.dw-b { padding: 14px 16px; min-height: 96px; min-width: 0; }
.dw-b.tight { padding: 0; }
.dw.loading .dw-reload svg { animation: dw-spin .8s linear infinite; }
@keyframes dw-spin { to { transform: rotate(360deg); } }
.dw-more { margin-top: 10px; display: flex; justify-content: center; }
.dw-foot { margin-top: 10px; font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.dw-err { text-align: center; padding: 18px 10px; color: var(--muted); display: grid; justify-items: center; gap: 6px; }
.dw-err > svg { width: 26px; height: 26px; color: var(--danger); }
.dw-err b { color: var(--ink); }

/* glisser-déposer (SortableJS en mode « fallback ») */
.dw-ghost { opacity: .35; outline: 2px dashed var(--brand); outline-offset: -2px; }
.dw-chosen { box-shadow: var(--shadow-lg); }
.dw-drag, .sortable-fallback { opacity: .92 !important; box-shadow: var(--shadow-lg); cursor: grabbing; }

@media (max-width: 1280px) {
  .dw-s, .dw-t { grid-column: span 6; }
  .dw-l { grid-column: span 12; }
}
@media (max-width: 900px) {
  .dash-grid { gap: 12px; }
  .dw, .dw-s, .dw-t, .dw-m, .dw-l, .dw-xl { grid-column: 1 / -1; }
}

/* ---------- squelettes ---------- */
.sk { background: linear-gradient(90deg, var(--line-2) 25%, var(--surface-2) 45%, var(--line-2) 65%); background-size: 300% 100%;
  animation: sk-shine 1.3s ease-in-out infinite; border-radius: 6px; }
@keyframes sk-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk-line { height: 12px; margin: 9px 0; }
.sk-line:nth-child(3n+2) { width: 82%; } .sk-line:nth-child(3n) { width: 64%; }
.sk-block { height: 170px; }
.sk-row { display: grid; gap: 12px; }
.sk-row.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sk-row.k4 .sk { height: 92px; }
.sk-row.cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sk-row.cards .sk { height: 150px; }
@media (max-width: 900px) { .sk-row.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- éléments communs ---------- */
.dchip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 650;
  background: var(--line-2); color: var(--ink-2); white-space: nowrap; line-height: 1.5; }
.dchip i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dchip.p-P1, .dchip.sev-high { background: var(--danger); color: #fff; }
.dchip.p-P2, .dchip.sev-medium { background: var(--warn); color: #fff; }
.dchip.p-P3 { background: var(--caution); color: #2b2300; }
.dchip.p-P4, .dchip.sev-low { background: var(--info); color: #fff; }
.dchip.late { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.dchip.soon { background: transparent; color: var(--warn); border: 1px solid var(--warn); }
.dchip.far { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.dash-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.dash-seg button { border: 0; background: var(--surface); color: var(--muted); font-size: 11.5px; padding: 3px 9px; cursor: pointer; font-weight: 600; }
.dash-seg button + button { border-inline-start: 1px solid var(--line); }
.dash-seg button.on { background: var(--brand-100); color: var(--brand-600); }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 7px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.dash-list li:last-child .dash-row { border-bottom: 0; }
a.dash-row:hover, .dash-row.link:hover { background: var(--surface-2); text-decoration: none; }
.dash-row .grow { flex: 1; min-width: 0; }
.dash-row .ttl { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row .meta { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.dash-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

/* ---------- KPI ---------- */
.dk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dk { --tone: var(--brand); display: grid; gap: 4px; padding: 13px 14px; border: 1px solid var(--line-2); border-inline-start: 4px solid var(--tone);
  border-radius: 9px; color: var(--ink); text-decoration: none; background: var(--surface); transition: background .15s, transform .15s, box-shadow .15s; }
.dk:hover { background: var(--surface-2); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); }
.dk-danger { --tone: var(--danger); } .dk-warn { --tone: var(--warn); } .dk-ok { --tone: var(--ok); } .dk-caution { --tone: var(--caution); } .dk-grey { --tone: var(--grey); }
.dk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dk-l { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.dk-ico { color: var(--tone); display: inline-flex; }
.dk-mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.dk-v { font-size: 30px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dk-v small { font-size: 16px; font-weight: 650; margin-inline-start: 2px; color: var(--muted); }
.dk-s { font-size: 12px; color: var(--muted); }
@media (max-width: 1100px) { .dk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dk-grid { grid-template-columns: 1fr; } }

/* ---------- alertes ---------- */
.da-sev { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--info); box-shadow: 0 0 0 3px var(--line-2); }
.da-sev.sev-high { background: var(--danger); } .da-sev.sev-medium { background: var(--warn); }
.da-sev.read { background: var(--line); box-shadow: none; }
.dash-row.unread .ttl { color: var(--brand-600); }

/* ---------- échéances ---------- */
.dd-date { width: 44px; flex-shrink: 0; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 3px 0; background: var(--surface-2); line-height: 1.1; }
.dd-date b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.dd-date span { font-size: 10px; color: var(--muted); text-transform: uppercase; }

/* ---------- missions ---------- */
.dm-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(120px, 1fr) 64px; gap: 14px; align-items: center; padding: 10px 6px;
  border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none; border-radius: 7px; }
.dm-row:last-child { border-bottom: 0; }
.dm-row:hover { background: var(--surface-2); text-decoration: none; }
.dm-title { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 2px 0; }
.dm-pl { display: flex; justify-content: space-between; color: var(--muted); margin: 2px 0; }
.dm-pl b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dm-ring { text-align: center; font-size: 10.5px; }
@media (max-width: 620px) { .dm-row { grid-template-columns: 1fr 64px; } .dm-prog { display: none; } }

/* ---------- raccourcis ---------- */
.dsc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.dsc { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  background: var(--surface); font-weight: 600; font-size: 12.5px; cursor: pointer; text-decoration: none; text-align: start; }
.dsc:hover { border-color: var(--brand); color: var(--brand-600); background: var(--brand-50); text-decoration: none; }
.dsc svg { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; }
.dsc.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.dsc.primary svg { color: #fff; }
.dsc-h { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin: 4px 0 2px; }

/* ---------- constats et plans d'action ---------- */
.dtf { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dtf th { text-align: start; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.dtf td { padding: 8px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.dtf tr.link { cursor: pointer; }
.dtf tr.link:hover td { background: var(--surface-2); }
.dtf .req { font-weight: 600; }
.dtf .act { color: var(--muted); font-size: 11.5px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-scroll { overflow-x: auto; }

/* ---------- radar ---------- */
.drd-top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.drd-top select { flex: 1; min-width: 140px; }
.drd-chart { display: flex; justify-content: center; }
.drd-chart .ch-radar { max-width: 100%; height: auto; }

/* ---------- clients ---------- */
.dc-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.dc-toolbar .search { flex: 1; min-width: 200px; max-width: 360px; }
.dc-toolbar .search input { width: 100%; }
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.dc-card { display: grid; gap: 10px; text-align: start; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink); cursor: pointer; font: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
.dc-card:hover, .dc-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--brand); outline: none; }
.dc-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-body { display: flex; align-items: center; gap: 12px; }
.dc-trend { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dc-trend .ch-spark { width: 100%; max-width: 150px; height: auto; }
.dc-delta { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.dc-delta.up { color: var(--ok); } .dc-delta.down { color: var(--danger); } .dc-delta.flat { color: var(--muted); }
.dc-foot { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--muted); }
.dc-foot .dchip.maj { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.dc-foot .dchip.min { background: transparent; color: var(--warn); border: 1px solid var(--warn); }
.drk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; }
.drk h4 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 8px; }
@media (max-width: 900px) { .drk { grid-template-columns: 1fr; } }

/* vue détaillée d'un client (tiroir) */
.dcd-kpis { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.dcd-kpi { display: grid; gap: 2px; }
.dcd-kpi b { font-size: 20px; font-variant-numeric: tabular-nums; }
.dcd-kpi span { font-size: 11.5px; color: var(--muted); }
.dcd-sec { margin-top: 18px; }
.dcd-sec h4 { font-size: 13px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.dcd-sec .ch-trend { width: 100%; height: auto; }
.dcd-occ { display: flex; gap: 4px; flex-wrap: wrap; }

/* personnalisation */
.dcz-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.dcz-row { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.dcz-row.off { background: var(--surface-2); }
.dcz-row.off .dcz-name { color: var(--muted); }
.dcz-lbl { flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; margin: 0; }
.dcz-name { font-weight: 600; font-size: 13px; }
.dcz-lbl .small { margin-inline-start: auto; }

/* ---------- graphiques (charts.js) ---------- */
/* géométrie des graphiques toujours de gauche à droite, y compris en arabe : sans cela, les ancrages de texte
   « start » s'inversent et les étiquettes sortent du cadre (constaté sur la carte de chaleur) */
.ch { display: block; max-width: 100%; height: auto; overflow: visible; font-family: var(--font); direction: ltr; unicode-bidi: isolate; }
.ch text { font-family: var(--font); }
.ch-ring, .ch-gauge { flex-shrink: 0; }
.ch-count { font-variant-numeric: tabular-nums; }
.ch-stacked, .ch-heatmap { width: 100%; }
.ch-hm-row.link { cursor: pointer; }
.ch-hm-row.link:hover rect:first-child { fill: var(--surface-2); }
.ch-hbars { display: grid; gap: 7px; }
.ch-hbar { display: grid; grid-template-columns: minmax(90px, 1.3fr) minmax(60px, 2fr) auto; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink); text-decoration: none; border-radius: 6px; padding: 2px 4px; }
.ch-hbar.link { cursor: pointer; }
.ch-hbar.link:hover { background: var(--surface-2); text-decoration: none; }
.ch-hbar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-hbar-t, .ch-prog { height: 8px; background: var(--line-2); border-radius: 6px; overflow: hidden; display: block; }
.ch-hbar-t > i, .ch-prog > i { display: block; height: 100%; border-radius: 6px; }
.ch-hbar-v { font-weight: 650; font-variant-numeric: tabular-nums; min-width: 38px; text-align: end; }
.ch-prog { height: 6px; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--ink-2); margin-top: 6px; }
.ch-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ch-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ch-tl { list-style: none; margin: 0; padding: 0; position: relative; border-inline-start: 2px solid var(--line-2); margin-inline-start: 6px; }
.ch-tl-i { position: relative; padding: 0 0 12px 0; padding-inline-start: 16px; }
.ch-tl-dot { position: absolute; inset-inline-start: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.tl-top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.tl-sum { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; overflow-wrap: anywhere; }

/* animations d'entrée : état initial, puis .ca-in (voir charts.js) */
.ca-dash { transition: stroke-dashoffset .7s cubic-bezier(.33, 1, .68, 1); }
.ca-grow-x { transform: scaleX(0); transform-origin: left center; transition: transform .7s cubic-bezier(.33, 1, .68, 1); }
[dir="rtl"] .ca-grow-x { transform-origin: right center; }
.ca-grow-y { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.33, 1, .68, 1); }
.ca-scale { transform: scale(0); transform-box: view-box; transition: transform .7s cubic-bezier(.33, 1, .68, 1); }
.ca-fade { opacity: 0; transition: opacity .45s ease-out; }
.ca-grow-x.ca-in, .ca-grow-y.ca-in, .ca-scale.ca-in { transform: none; }
.ca-fade.ca-in { opacity: 1; }
.ca-still { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ca-dash, .ca-grow-x, .ca-grow-y, .ca-scale, .ca-fade, .dk, .dc-card { transition: none !important; }
  .sk, .dw.loading .dw-reload svg { animation: none; }
  .dk:hover, .dc-card:hover { transform: none; }
}