/* Pages « Exploitation » et messages de l'admin refondue (29/10/2026, design_handoff_admin 2b, 2c, 2d, 2e, 3b) :
   Messages de contact, Recherches effectuées, Tâches planifiées, Sauvegardes, Serveur. Chargé après admin-shell.css. */

/* ---------- Cartes de synthèse ---------- */
.kx-cards { display: grid; gap: 12px; flex: 0 0 auto; }
.kx-cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kx-cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kx-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 13px; min-width: 0; box-sizing: border-box; }
.kx-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #6F675E; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kx-big b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #221E1A; }
.kx-big span { font-size: 12.5px; font-weight: 700; color: #6F675E; }
.kx-bar { display: flex; align-items: center; gap: 8px; width: 100%; }
.kx-bar > i { flex: 1; height: 7px; border-radius: 4px; background: #EDE8E1; overflow: hidden; display: block; }
.kx-bar > i > s { display: block; height: 100%; background: #2E9E5B; text-decoration: none; }
.kx-bar.warn > i > s { background: #F0A11E; }
.kx-bar.bad > i > s { background: #C1272D; }
.kx-bar > b { font-size: 12.5px; min-width: 38px; text-align: right; color: #221E1A; font-weight: 800; }
.kx-sub2 { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: #6F675E; }
.kx-sub2 b { color: #221E1A; }

/* ---------- Barre de filtres ---------- */
.kx-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.kx-search { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; width: 230px; box-sizing: border-box; color: #8A8178; }
.kx-search:focus-within { border-color: #0B5C6B; }
.kx-search svg { width: 14px; height: 14px; flex: 0 0 auto; }
.kx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 13px Archivo, sans-serif; color: #221E1A; height: 100%; padding: 0; }
.kx-search input::placeholder { color: #8A8178; }
.kx-sel { height: 34px; border-radius: 9px; border: 1px solid var(--line); padding: 0 30px 0 11px; font: 600 13px Archivo, sans-serif; color: #3A342E; cursor: pointer; -webkit-appearance: none; appearance: none; box-sizing: border-box; max-width: 100%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F675E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 12px; }
.kx-sel.on { border-color: #F3C98B; background-color: #FDF3E1; color: #8A5A07; }
.kx-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line); background: #fff; font: 600 13px Archivo, sans-serif; color: #3A342E; cursor: pointer; white-space: nowrap; box-sizing: border-box; }
.kx-chip svg { width: 12px; height: 12px; }
.kx-chip.on { border-color: #F3C98B; background: #FDF3E1; color: #8A5A07; }

/* ---------- Tableaux ---------- */
.table-wrap.kx-t { overflow: auto; max-height: calc(100vh - var(--kx-off, 290px)); min-height: 120px; }
.kx-t table { table-layout: fixed; white-space: normal; width: 100%; font-size: 13.5px; color: #4E4740; border-collapse: collapse; }
.kx-t thead th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; text-align: left; line-height: 1.25; white-space: normal; overflow-wrap: break-word; }
.kx-t thead th:first-child, .kx-t tbody td:first-child { padding-left: 16px; }
.kx-t tbody td { padding: 6px 12px; height: 42px; box-sizing: border-box; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid #F1ECE5; }
.kx-t tbody tr:last-child td { border-bottom: 0; }
.kx-t tbody tr[data-open] { cursor: pointer; }
.kx-t tbody tr[data-open]:hover { background: #FBF9F6; }
.kx-t tbody tr.ka-sel, .kx-t tbody tr.ka-sel:hover { background: #FDEEF3; box-shadow: inset 3px 0 0 #E01B5D; }
.kx-t td.r, .kx-t th.r { text-align: right; }
.kx-t td.wrap { white-space: normal; line-height: 1.3; }
.kx-t td .ka-2l b { font-weight: 700; color: #221E1A; }
.kx-t td .ka-2l .ka-sub { font-size: 12px; }
.kx-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.35; }
.kx-t td a.kx-lnk, a.kx-lnk, button.kx-lnk { color: #0B7387; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; font-size: 13.5px; font-family: Archivo, sans-serif; cursor: pointer; }
.kx-t td a.kx-lnk:hover, a.kx-lnk:hover, button.kx-lnk:hover { text-decoration: underline; }
button.kx-lnk.strong { font-weight: 800; }
button.kx-lnk:disabled { opacity: .5; cursor: default; }
.kx-t tbody td.kx-empty { height: 80px; text-align: center; color: #8A8178; }
.kx-more { display: flex; justify-content: center; padding: 10px; border-top: 1px solid #F1ECE5; }
.kx-dim { color: #A39A90; }

/* points d'état */
.kx-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #B9AFA3; vertical-align: middle; flex: 0 0 auto; }
.kx-dot.g { background: #1F8A4C; } .kx-dot.o { background: #B7700A; } .kx-dot.r { background: #C1272D; }
.kx-yes { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.kx-yes.g { color: #1F8A4C; } .kx-yes.o { color: #B7700A; } .kx-yes.r { color: #C1272D; }
.kx-yes i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* case « Traité » (messages de contact) */
.kx-chk { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1; }
.kx-chk input { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: #0B5C6B; }
.kx-chk small { font-size: 11px; color: #8A8178; font-weight: 600; letter-spacing: .02em; }
.kx-chk .ro { width: 18px; height: 18px; border: 1.5px solid #B9AFA3; border-radius: 4px; display: grid; place-items: center; box-sizing: border-box; }
.kx-chk .ro.on { background: #0B5C6B; border-color: #0B5C6B; }
.kx-chk .ro svg { width: 12px; height: 12px; display: none; }
.kx-chk .ro.on svg { display: block; }
.kx-t tr.kx-done td { opacity: .62; }
.kx-t tr.kx-done td:first-child { opacity: 1; }

/* ---------- Panneau de détail : blocs ---------- */
.kx-box { padding: 12px; border-radius: 11px; background: #F4F1EC; font-size: 13.5px; line-height: 1.6; color: #3A342E; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.kx-box.mono { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; }
.kx-tip { font-size: 12.5px; line-height: 1.5; color: #4E4740; padding: 10px 12px; border-radius: 10px; background: #FDF3E1; }
.kx-kv { display: flex; flex-direction: column; }
.kx-kv > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; font-size: 13px; padding: 6px 0; border-top: 1px solid #F1ECE5; }
.kx-kv > div:first-child { border-top: 0; }
.kx-kv > div > span { color: #6F675E; }
.kx-kv > div > b { font-weight: 600; color: #221E1A; min-width: 0; overflow-wrap: anywhere; }
.kx-list { display: flex; flex-direction: column; }
.kx-list > div { display: grid; grid-template-columns: 78px minmax(0, 1fr) 54px; gap: 8px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid #F1ECE5; }
.kx-list > div > span:first-child { color: #6F675E; }
.kx-list > div > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-list > div > b { text-align: right; }
.kx-pdet { margin: 0; }
.kx-pdet summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: #0B7387; }
.kx-pdet pre { margin: 8px 0 0; padding: 10px 12px; background: #F4F1EC; border-radius: 10px; font-size: 11px; line-height: 1.45; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; }

/* ---------- Tâches planifiées : détail ---------- */
.kx-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.kx-rapport details { border-top: 1px solid #F1ECE5; padding: 6px 0; }
.kx-rapport details:first-child { border-top: 0; }
.kx-rapport summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #221E1A; display: flex; align-items: center; gap: 8px; }
.kx-rapport ul { margin: 6px 0 2px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.kx-rapport li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: #4E4740; }
.kx-rapport li .kx-dot { margin-top: 5px; width: 8px; height: 8px; }
.kx-rapport .kx-dot.gray { background: #B9AFA3; }
.kx-flash { padding: 10px 14px; border-radius: 10px; background: #E5F1F3; color: #0B5C6B; font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.kx-flash.bad { background: #FBE3E6; color: #C1272D; }
.kx-log { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 6px 0; }
.kx-log > div { display: grid; grid-template-columns: 138px minmax(0, 220px) minmax(0, 1fr); gap: 12px; padding: 7px 16px; border-bottom: 1px solid #F1ECE5; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; line-height: 1.5; color: #4E4740; }
.kx-log > div:last-child { border-bottom: 0; }
.kx-log > div b { font-weight: 600; color: #221E1A; overflow-wrap: anywhere; }
.kx-log > div.hl { background: #FDEEF3; }
.kx-log-lines { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 12px 16px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; line-height: 1.6; color: #4E4740; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Sauvegardes : principes ---------- */
.kx-pr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.kx-pc { display: flex; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.kx-pc > span { width: 26px; height: 26px; border-radius: 50%; background: #E5F1F3; color: #0B5C6B; font-weight: 800; font-size: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.kx-pc.warn > span { background: #FDF3E1; color: #8A5A07; }
.kx-pc > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kx-pc b { font-size: 14px; color: #221E1A; }
.kx-pc p { margin: 0; font-size: 13px; line-height: 1.5; color: #4E4740; }

/* ---------- Serveur ---------- */
.kx-ov { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); gap: 12px; align-items: start; }
.kx-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.kx-stack i { display: block; min-width: 2px; }
.kx-leg { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; border-top: 1px solid #F1ECE5; }
.kx-leg > i { width: 10px; height: 10px; border-radius: 3px; }
.kx-leg > b { text-align: right; }
.kx-net-top { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: #6F675E; flex-wrap: wrap; }
.kx-net-top .sw { display: inline-flex; align-items: center; gap: 6px; }
.kx-net-top .sw i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.kx-net-top b { color: #221E1A; }
.kx-chart { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: 150px 18px; column-gap: 8px; }
.kx-chart.tall { grid-template-rows: 190px 18px; }
.kx-chart .ya { position: relative; }
.kx-chart .ya span { position: absolute; right: 0; transform: translateY(50%); font-size: 11px; color: #8A8178; white-space: nowrap; }
.kx-chart .pl { position: relative; border-bottom: 1px solid var(--line); min-width: 0; }
.kx-chart .pl > i.gl { position: absolute; left: 0; right: 0; border-top: 1px dashed #EDE8E1; }
.kx-chart .bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; }
.kx-chart .bars > span { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 1px; min-width: 0; }
.kx-chart .bars > span i { flex: 1; border-radius: 2px 2px 0 0; min-height: 0; }
.kx-chart .xa { display: flex; gap: 4px; grid-column: 2; }
.kx-chart .xa span { flex: 1; text-align: center; font-size: 11px; color: #8A8178; white-space: nowrap; overflow: visible; }
.kx-chart svg.ln { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kx-chart .tt { position: absolute; z-index: 5; pointer-events: none; background: #221E1A; color: #fff; font-size: 11.5px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; transform: translate(-50%, -110%); top: 0; display: none; }
.kx-chart .xa.ln { display: block; position: relative; height: 18px; }
.kx-chart .xa.ln span { position: absolute; transform: translateX(-50%); flex: none; }
.kx-hw > div { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #F1ECE5; font-size: 13px; }
.kx-hw > div:first-child { border-top: 0; }
.kx-hw > div > span { color: #6F675E; }
.kx-hw > div > b { color: #221E1A; font-weight: 600; }
.kx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.kx-warnline { font-size: 12.5px; color: #8A5A07; background: #FDF3E1; border-radius: 10px; padding: 8px 12px; flex: 0 0 auto; }
.kx-rel { font-size: 12.5px; color: #6F675E; }

@media (max-width: 1280px) {
  .kx-ov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-ov > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .kx-cards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-two, .kx-grid2, .kx-pr { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .kx-cards.c3, .kx-cards.c4, .kx-ov { grid-template-columns: minmax(0, 1fr); }
  .kx-search { width: 100%; }
  .kx-t table { min-width: 640px; }
}