:root {
  --navy: #07182d;
  --navy-2: #0b2943;
  --cyan: #22c5d8;
  --cyan-dark: #087f91;
  --ink: #102033;
  --muted: #5f7082;
  --line: #dfe7ef;
  --soft: #f4f7fa;
  --white: #fff;
  --danger: #dc3545;
  --success: #16875f;
  --shadow: 0 12px 35px rgba(18, 45, 70, .08);
  --radius: 15px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--soft); }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--soft);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.bo-loader {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  color: var(--muted);
  background: #f7f9fc;
  font-size: 13px;
  font-weight: 700;
}
.bo-loader-mark {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: var(--navy);
  box-shadow: 0 18px 40px rgba(7, 24, 45, .22);
}
.bo-loader-mark img { width: 64px; height: 64px; object-fit: contain; border-radius: 16px; }

.bo-app { min-height: 100vh; display: grid; grid-template-columns: 254px minmax(0, 1fr); }
.bo-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 254px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px 18px 18px;
  color: #d7e2ed;
  background:
    radial-gradient(circle at 15% 100%, rgba(34, 197, 216, .16), transparent 21rem),
    var(--navy);
}
.bo-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 9px;
  color: #fff;
  text-decoration: none;
}
.bo-brand img { width: 195px; height: auto; }
.bo-brand span { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .18); color: #67ddeb; font-size: 12px; font-weight: 800; }
.bo-nav { display: grid; gap: 7px; margin-top: 38px; }
.bo-nav-label { padding: 0 12px 7px; color: #758ca1; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.bo-nav-item {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #9db0c2;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}
.bo-nav-item span { font-size: 13px; font-weight: 700; }
.bo-nav-item b {
  min-width: 23px;
  padding: 3px 6px;
  border-radius: 20px;
  color: #a8bdcf;
  background: rgba(255, 255, 255, .07);
  font-size: 10px;
  text-align: center;
}
.bo-nav-item:hover { color: #fff; background: rgba(255, 255, 255, .055); }
.bo-nav-item.is-active { color: #fff; border-color: rgba(55, 213, 231, .16); background: linear-gradient(90deg, rgba(34, 197, 216, .2), rgba(34, 197, 216, .07)); }
.bo-nav-item.is-active svg { color: #5ce0ee; }
.bo-nav-item.is-active b { color: #062d36; background: #6de1ec; }
.bo-sidebar-foot { display: grid; gap: 12px; margin-top: auto; }
.bo-site-return {
  min-height: 44px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid rgba(103, 221, 235, .2);
  border-radius: 11px;
  color: #b9d3df;
  background: rgba(34, 197, 216, .08);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.bo-site-return:hover {
  color: #fff;
  border-color: rgba(103, 221, 235, .42);
  background: rgba(34, 197, 216, .16);
  transform: translateY(-1px);
}
.bo-site-return:focus-visible { outline: 2px solid #67ddeb; outline-offset: 2px; }
.bo-site-return svg { width: 17px; height: 17px; transform: rotate(180deg); }
.bo-maintenance-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 0;
  color: #738da3;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}
.bo-maintenance-link:hover { color: #fff; }
.bo-maintenance-link svg { width: 16px; height: 16px; }
.bo-admin-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
}
.bo-admin-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #073743; background: #61dce8; font-weight: 900; }
.bo-admin-card > div:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.bo-admin-card strong { overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.bo-admin-card small { color: #7790a6; font-size: 10px; }
.bo-admin-card button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #8da3b5; background: transparent; cursor: pointer; }
.bo-admin-card button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.bo-admin-card button svg { width: 17px; height: 17px; }

.bo-main { grid-column: 2; min-width: 0; }
.bo-topbar {
  position: sticky;
  top: 0;
  z-index: 21;
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 34px;
  border-bottom: 1px solid rgba(219, 228, 237, .9);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
}
.bo-topbar > div:nth-child(2) { flex: 1; }
.bo-topbar p { margin: 0 0 3px; color: var(--cyan-dark); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bo-topbar h1 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.bo-topbar-actions { display: flex; align-items: center; gap: 11px; }
.bo-system-status { display: inline-flex; align-items: center; gap: 7px; color: #617387; font-size: 11px; font-weight: 700; }
.bo-system-status i { width: 7px; height: 7px; border-radius: 50%; background: #22b983; box-shadow: 0 0 0 4px rgba(34, 185, 131, .1); }
.bo-system-status.is-compatible i { background: #f29b19; box-shadow: 0 0 0 4px rgba(242, 155, 25, .12); }
.bo-icon-button, .bo-mobile-menu {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.bo-icon-button:hover { color: var(--cyan-dark); border-color: #a8dce2; }
.bo-icon-button svg, .bo-mobile-menu svg { width: 17px; height: 17px; }
.bo-mobile-menu { display: none; }
.bo-content { max-width: 1550px; margin: 0 auto; padding: 30px 34px 48px; }
.bo-view { display: grid; gap: 22px; }

.bo-welcome {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 34px 38px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 20%, rgba(50, 211, 228, .25), transparent 20rem),
    linear-gradient(125deg, #08192e, #0c2c48 68%, #0b5b6a 145%);
  box-shadow: 0 20px 46px rgba(7, 24, 45, .16);
}
.bo-welcome::after { content: ""; position: absolute; right: -100px; bottom: -180px; width: 360px; height: 360px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255, 255, 255, .025), 0 0 0 110px rgba(255, 255, 255, .018); }
.bo-welcome > * { position: relative; z-index: 1; }
.bo-eyebrow { color: #5ddde9; font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.bo-welcome-identity { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.bo-welcome-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  color: #073743;
  background: linear-gradient(135deg, #7ce7f0, #3bc8d8);
  box-shadow: 0 10px 24px rgba(23, 183, 201, .2);
  font-size: 16px;
  font-weight: 900;
}
.bo-welcome h2 { max-width: 680px; margin: 0 0 7px; font-size: clamp(27px, 2.7vw, 39px); line-height: 1.08; letter-spacing: -.045em; }
.bo-welcome p { max-width: 650px; margin: 0; color: #afc2d2; font-size: 14px; line-height: 1.65; }
.bo-welcome p strong { color: #e8f7f9; font-weight: 800; }
.bo-welcome-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 21px; }
.bo-welcome-metrics button {
  min-width: 116px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 11px;
  color: #bed0de;
  background: rgba(255, 255, 255, .065);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.bo-welcome-metrics button:hover { border-color: rgba(93, 221, 233, .36); background: rgba(255, 255, 255, .11); transform: translateY(-1px); }
.bo-welcome-metrics button:focus-visible { outline: 2px solid #5ddde9; outline-offset: 2px; }
.bo-welcome-metrics strong { color: #fff; font-size: 18px; letter-spacing: -.03em; }
.bo-welcome-metrics span { font-size: 10.5px; font-weight: 750; white-space: nowrap; }
.bo-welcome-actions { display: grid; gap: 10px; min-width: 190px; }

.bo-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.bo-button:hover { transform: translateY(-1px); }
.bo-button svg { width: 17px; height: 17px; }
.bo-button-primary { color: #052b34; background: linear-gradient(135deg, #65dce8, #26c2d4); box-shadow: 0 8px 18px rgba(34, 197, 216, .2); }
.bo-button-accent { color: #052d35; background: #5cdae6; }
.bo-button-light { color: #fff; border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .095); }
.bo-button-ghost { color: #536578; border-color: var(--line); background: #fff; }
.bo-button-danger { color: #fff; background: #d93c4b; }
.bo-button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.bo-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bo-kpi { min-height: 110px; display: flex; align-items: center; gap: 15px; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius); color: inherit; background: #fff; box-shadow: 0 8px 25px rgba(18, 45, 70, .055); font: inherit; text-align: left; }
.bo-kpi[data-kpi-action] { position: relative; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.bo-kpi[data-kpi-action]:hover { transform: translateY(-2px); border-color: #bdd9e2; box-shadow: 0 13px 28px rgba(18, 45, 70, .1); }
.bo-kpi[data-kpi-action]:focus-visible { outline: 3px solid rgba(34, 197, 216, .24); outline-offset: 2px; border-color: var(--cyan); }
.bo-kpi[data-kpi-action]:active { transform: translateY(0); }
.bo-kpi-icon { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: #236de0; background: #eaf1ff; }
.bo-kpi-icon.violet { color: #7657d8; background: #f0ecff; }
.bo-kpi-icon.amber { color: #d87b12; background: #fff2dd; }
.bo-kpi-icon.red { color: #d43c4b; background: #ffe9ec; }
.bo-kpi-icon svg { width: 22px; height: 22px; }
.bo-kpi > div { display: grid; gap: 4px; }
.bo-kpi strong { font-size: 29px; letter-spacing: -.05em; }
.bo-kpi small { color: var(--muted); font-size: 11px; font-weight: 700; }
.bo-kpi-arrow { width: 16px; height: 16px; margin-left: auto; color: #9aabb8; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease, color .16s ease; }
.bo-kpi[data-kpi-action]:hover .bo-kpi-arrow { color: var(--cyan-dark); transform: translateX(3px); }

.bo-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bo-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 26px rgba(18, 45, 70, .055); }
.bo-panel-head { min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid #e8eef4; }
.bo-panel-head > div { min-width: 0; display: flex; align-items: center; gap: 12px; }
.bo-panel-head h3 { margin: 0 0 3px; font-size: 14px; }
.bo-panel-head p { margin: 0; color: var(--muted); font-size: 10px; }
.bo-panel-head > button { display: flex; align-items: center; gap: 4px; padding: 7px; border: 0; color: var(--cyan-dark); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.bo-panel-head > button svg { width: 14px; height: 14px; }
.bo-section-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; color: #2575df; background: #eaf2ff; }
.bo-section-icon.amber { color: #cf7917; background: #fff1dc; }
.bo-section-icon svg { width: 18px; height: 18px; }
.bo-company-preview, .bo-ticket-preview { min-height: 232px; display: grid; align-content: start; }
.bo-preview-row { width: 100%; min-height: 70px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px 17px; border: 0; border-bottom: 1px solid #edf1f5; background: #fff; text-align: left; cursor: pointer; }
.bo-preview-row:last-child { border-bottom: 0; }
.bo-preview-row:hover { background: #f7fbfc; }
.bo-preview-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--navy-2); font-size: 13px; font-weight: 900; }
.bo-preview-copy { min-width: 0; display: grid; gap: 3px; }
.bo-preview-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.bo-preview-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.bo-preview-meta { display: grid; justify-items: end; gap: 3px; color: var(--muted); font-size: 9px; }
.bo-preview-meta b { color: var(--ink); font-size: 13px; }

.bo-view-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bo-search { min-width: 260px; flex: 1; position: relative; }
.bo-search svg { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; color: #8291a2; transform: translateY(-50%); }
.bo-search input, .bo-select {
  width: 100%;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  outline: 0;
}
.bo-search input { padding: 0 14px 0 42px; }
.bo-search input:focus, .bo-select:focus { border-color: #7fd6df; box-shadow: 0 0 0 3px rgba(34, 197, 216, .1); }
.bo-select { width: auto; min-width: 190px; padding: 0 35px 0 13px; font-size: 12px; font-weight: 700; }
.bo-master-detail { min-height: calc(100vh - 185px); display: grid; grid-template-columns: minmax(340px, .72fr) minmax(0, 1.35fr); gap: 17px; align-items: start; }
.bo-list-panel, .bo-detail-panel { min-height: 600px; }
.bo-detail-panel { position: sticky; top: 108px; }
.bo-mobile-ticket-nav { display: none; }
.bo-list-heading { min-height: 61px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; border-bottom: 1px solid #e8eef4; }
.bo-list-heading strong { font-size: 13px; }
.bo-list-heading span { min-width: 27px; padding: 4px 7px; border-radius: 20px; color: #0c7381; background: #e3f8fa; font-size: 10px; font-weight: 850; text-align: center; }
.bo-company-list, .bo-ticket-list { max-height: calc(100vh - 248px); overflow-y: auto; }
.bo-company-row, .bo-ticket-row {
  width: 100%;
  display: grid;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.bo-company-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
.bo-ticket-row { position: relative; grid-template-columns: 38px minmax(0, 1fr) auto; padding-left: 19px; }
.bo-ticket-row::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--company-solid, var(--line));
}
.bo-company-row:hover, .bo-ticket-row:hover, .bo-company-row.is-selected, .bo-ticket-row.is-selected { background: #f3fafb; }
.bo-company-row.is-selected { box-shadow: inset 3px 0 var(--cyan); }

/* ─── Badge SLA (delai de premiere reponse) ─────────────────────────────────── */
.bo-sla { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 9px; font-weight: 850; white-space: nowrap; }
.bo-sla svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bo-sla.is-ok { border-color: #cfe0ee; background: #f2f7fb; color: #46617d; }
.bo-sla.is-soon { border-color: #f6dfae; background: #fdf5e5; color: #96660c; }
.bo-sla.is-breached { border-color: #f2c3ca; background: #fdeef0; color: #b32639; animation: bo-sla-pulse 2.4s ease-in-out infinite; }
.bo-sla.is-paused { border-color: #dde5ed; background: #f4f7fa; color: #6b7c8d; }
.bo-sla.is-met { border-color: #b6e6c8; background: #e9f9ef; color: #17794a; }
.bo-sla.is-compact { padding: 3px 7px; }
@keyframes bo-sla-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }

/* ─── Prise en charge des tickets ───────────────────────────────────────────── */
.bo-scope-tabs { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #f4f7fa; }
.bo-scope-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 10.5px; font-weight: 750; cursor: pointer; transition: background .15s ease, color .15s ease; white-space: nowrap; }
.bo-scope-tabs button:hover { color: var(--ink); }
.bo-scope-tabs button.is-active { background: #fff; color: var(--cyan-dark); box-shadow: 0 1px 3px rgba(16, 32, 51, .1); }
.bo-scope-tabs b { min-width: 17px; padding: 1px 5px; border-radius: 999px; background: #e3f8fa; color: #0c7381; font-size: 9px; font-weight: 850; }
.bo-scope-tabs button.is-active b { background: #d9f3f6; }

.bo-ticket-assignee { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 700; }
.bo-ticket-assignee svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-ticket-assignee.is-mine { color: var(--cyan-dark); }
.bo-ticket-assignee.is-free { color: #c07a12; }

.bo-assign { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding: 11px 14px; border: 1px solid #bfe7ec; border-radius: 11px; background: #f4fcfd; }
.bo-assign.is-free { border-color: #f2ddb4; background: #fdf8ec; }
.bo-assign.is-mine { border-color: #a5dbe2; background: #eafbfc; }
.bo-assign-info { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 10.5px; font-weight: 600; }
.bo-assign-info svg { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-assign.is-free .bo-assign-info svg { stroke: #c07a12; }
.bo-assign.is-mine .bo-assign-info svg, .bo-assign .bo-assign-info svg { stroke: var(--cyan-dark); }
.bo-assign-actions { display: flex; align-items: center; gap: 7px; }
.bo-assign-take { padding: 8px 14px; font-size: 11px; }

@media (max-width: 700px) {
  .bo-scope-tabs { width: 100%; justify-content: space-between; }
  .bo-assign { flex-direction: column; align-items: stretch; }
}

/* ─── Cloche de notifications ───────────────────────────────────────────────── */
.bo-notif { position: relative; }
.bo-notif-trigger { position: relative; }
.bo-notif-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: #d14357; color: #fff; font-size: 9px; font-weight: 850; }
.bo-notif.is-open .bo-notif-trigger { color: var(--cyan-dark); border-color: #a8dce2; }

.bo-notif-panel { position: absolute; z-index: 60; top: calc(100% + 9px); right: 0; width: 390px; max-width: calc(100vw - 24px); border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 18px 42px rgba(16, 32, 51, .17); overflow: hidden; }
.bo-notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #eef2f6; }
.bo-notif-head strong { font-size: 12px; }
.bo-notif-head-actions { display: flex; align-items: center; gap: 8px; }
.bo-notif-sound { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--cyan-dark); cursor: pointer; }
.bo-notif-sound.is-off { color: #9aa8b5; }
.bo-notif-sound svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-notif-readall { border: 0; background: transparent; color: var(--cyan-dark); font-size: 9.5px; font-weight: 800; cursor: pointer; }
.bo-notif-readall:hover { text-decoration: underline; }

.bo-notif-list { max-height: 400px; overflow-y: auto; }
.bo-notif-item { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 12px; border: 0; border-bottom: 1px solid #edf2f5; background: #fff; box-shadow: inset 3px 0 var(--notif-company, var(--cyan-dark)); text-align: left; cursor: pointer; }
.bo-notif-item:last-child { border-bottom: 0; }
.bo-notif-item:hover { background: #f6f9fb; }
.bo-notif-item.is-unread { background: #f7fbfc; }
.bo-notif-company { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--notif-company, #087f91) 22%, transparent); border-radius: 10px; color: var(--notif-company-text, #087080); background: var(--notif-company-bg, #d9f3f6); font-size: 10px; font-weight: 900; letter-spacing: .02em; }
.bo-notif-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #eef5f9; color: var(--cyan-dark); }
.bo-notif-item.is-unread .bo-notif-icon { background: #d9f3f6; }
.bo-notif-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-notif-copy { display: grid; gap: 4px; min-width: 0; }
.bo-notif-title { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bo-notif-title strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.bo-notif-title small { flex: 0 0 auto; color: #8a98a6; font-size: 8.5px; white-space: nowrap; }
.bo-notif-context { min-width: 0; display: flex; align-items: center; gap: 7px; }
.bo-notif-context b { min-width: 0; overflow: hidden; color: #526578; font-size: 9.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.bo-notif-kind { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 999px; color: #087080; background: #dff4f6; font-size: 8px; font-style: normal; font-weight: 850; }
.bo-notif-kind svg { width: 10px; height: 10px; }
.bo-notif-kind.is-voice { color: #7a4d05; background: #fff0ca; }
.bo-notif-kind.is-image { color: #6046a2; background: #eee9ff; }
.bo-notif-kind.is-file { color: #405d75; background: #eaf0f4; }
.bo-notif-kind.is-alert { color: #b23442; background: #ffe9ec; }
.bo-notif-kind.is-status { color: #16714f; background: #e5f7ef; }
.bo-notif-preview { display: -webkit-box; overflow: hidden; color: #24394c; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bo-notif-item.is-unread .bo-notif-title strong { font-weight: 900; }
.bo-notif-empty { margin: 0; padding: 26px 14px; color: var(--muted); font-size: 10.5px; text-align: center; }

@media (max-width: 560px) {
  .bo-notif-panel { position: fixed; top: 62px; right: 8px; left: 8px; width: auto; max-width: none; }
  .bo-notif-head { padding: 10px 11px; }
  .bo-notif-item { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; padding: 9px 10px; }
  .bo-notif-company { width: 34px; height: 34px; }
  .bo-notif-title strong { font-size: 11.5px; }
  .bo-notif-context b { font-size: 10px; }
  .bo-notif-kind { font-size: 8.5px; }
  .bo-notif-preview { font-size: 10.5px; -webkit-line-clamp: 1; }
}

/* ─── Equipe de support ─────────────────────────────────────────────────────── */
.bo-staff-intro { display: flex; align-items: center; gap: 12px; }
.bo-staff-intro h2 { margin: 0 0 2px; font-size: 16px; }
.bo-staff-intro p { margin: 0; color: var(--muted); font-size: 10.5px; }

.bo-role-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin: 14px 0; }
.bo-role-card { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.bo-role-card strong { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; }
.bo-role-card strong svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-role-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.bo-role-card.is-admin { border-color: #c9d9ea; background: #f5f9fd; }
.bo-role-card.is-admin strong { color: #2a5b91; }
.bo-role-card.is-technician { border-color: #bfe7ec; background: #f4fcfd; }
.bo-role-card.is-technician strong { color: var(--cyan-dark); }
.bo-role-card.is-viewer { border-color: #dde5ed; background: #f7f9fb; }
.bo-role-card.is-viewer strong { color: #6b7c8d; }

.bo-staff-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid #edf1f5; }
.bo-staff-row:last-child { border-bottom: 0; }
.bo-staff-row.is-inactive { opacity: .6; }
.bo-staff-copy { display: grid; gap: 2px; min-width: 0; }
.bo-staff-copy strong { font-size: 11.5px; }
.bo-staff-copy small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-staff-me { padding: 1px 6px; border-radius: 999px; background: #e3f8fa; color: #0c7381; font-size: 8.5px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.bo-staff-role { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 9.5px; font-weight: 850; white-space: nowrap; }
.bo-staff-role svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-staff-role.is-admin { background: #e8f1fb; color: #2a5b91; }
.bo-staff-role.is-technician { background: #e3f8fa; color: var(--cyan-dark); }
.bo-staff-role.is-viewer { background: #f1f4f7; color: #6b7c8d; }
.bo-staff-stat { display: grid; justify-items: center; }
.bo-staff-stat b { font-size: 13px; }
.bo-staff-stat small { color: var(--muted); font-size: 8.5px; }
.bo-staff-actions { display: flex; align-items: center; gap: 7px; }
.bo-small-button.is-danger:hover { color: #d14357; border-color: #efbec4; }
.bo-small-button[disabled] { opacity: .45; cursor: not-allowed; }
.bo-staff-role-hint { margin: 0; padding: 9px 12px; border-radius: 9px; background: #f4f7fa; color: var(--muted); font-size: 10px; line-height: 1.55; }

.bo-security-zone { margin-top: 14px; overflow: hidden; border-color: #f0c8ce; }
.bo-security-zone details { display: block; }
.bo-security-zone summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  background: #fffafb;
}
.bo-security-zone summary::-webkit-details-marker { display: none; }
.bo-security-zone summary > span:nth-child(2) { display: grid; gap: 2px; }
.bo-security-zone summary strong { font-size: 12px; color: #9f2f40; }
.bo-security-zone summary small { color: var(--muted); font-size: 10px; }
.bo-security-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #bd4052;
  background: #fdecef;
}
.bo-security-icon svg, .bo-security-chevron { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-security-chevron { color: #9aa8b5; transition: transform .18s ease; }
.bo-security-zone details[open] .bo-security-chevron { transform: rotate(90deg); }
.bo-security-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-top: 1px solid #f5dce0;
  background: #fff;
}
.bo-security-content > div { display: grid; gap: 4px; }
.bo-security-content strong { font-size: 11.5px; }
.bo-security-content p { margin: 0; max-width: 680px; color: var(--muted); font-size: 10px; line-height: 1.55; }

@media (max-width: 720px) {
  .bo-security-content { align-items: stretch; flex-direction: column; }
  .bo-security-content .bo-button { width: 100%; justify-content: center; }
}

/* Compte en lecture seule : on retire les actions d'ecriture de l'interface.
   La securite reelle reste appliquee cote serveur. */
body[data-staff-role="viewer"] .bo-button-primary,
body[data-staff-role="viewer"] .bo-intervention-form,
body[data-staff-role="viewer"] .bo-remote-actions,
body[data-staff-role="viewer"] [data-fiche-edit-rustdesk],
body[data-staff-role="viewer"] [data-new-company],
body[data-staff-role="viewer"] [data-detail-edit],
body[data-staff-role="viewer"] [data-detail-delete],
body[data-staff-role="viewer"] [data-detail-new-user],
body[data-staff-role="viewer"] [data-new-asset],
body[data-staff-role="viewer"] [data-user-action] { display: none !important; }

body[data-staff-role="technician"] [data-new-company],
body[data-staff-role="technician"] [data-detail-delete],
body[data-staff-role="technician"] [data-detail-edit],
body[data-staff-role="technician"] [data-detail-new-user],
body[data-staff-role="technician"] [data-user-action] { display: none !important; }

@media (max-width: 900px) {
  .bo-role-legend { grid-template-columns: 1fr; }
  .bo-staff-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 9px; }
  .bo-staff-role, .bo-staff-stat, .bo-staff-actions { grid-column: 2; justify-self: start; }
}

/* ─── Selecteur de societe (menu deroulant) ─────────────────────────────────── */
.bo-companies-stage { min-height: calc(100vh - 185px); }
.bo-companies-stage .bo-detail-panel { min-height: 600px; }

.bo-company-switcher { position: relative; flex: 1 1 420px; max-width: 560px; }
.bo-switcher-trigger { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease; }
.bo-switcher-trigger:hover { border-color: #a8dce2; }
.bo-company-switcher.is-open .bo-switcher-trigger { border-color: var(--cyan-dark); box-shadow: 0 0 0 3px rgba(8, 127, 145, .12); }
.bo-switcher-current { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; }
.bo-switcher-copy { display: grid; gap: 2px; min-width: 0; }
.bo-switcher-copy strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-switcher-copy small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-switcher-caret { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .2s ease; }
.bo-company-switcher.is-open .bo-switcher-caret { transform: rotate(-90deg); }

.bo-switcher-panel { position: absolute; z-index: 40; top: calc(100% + 7px); left: 0; right: 0; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 18px 42px rgba(16, 32, 51, .16); overflow: hidden; }
.bo-switcher-search { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid #eef2f6; }
.bo-switcher-search svg { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-switcher-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 12px; outline: 0; }
.bo-switcher-count { flex: 0 0 auto; min-width: 24px; padding: 3px 7px; border-radius: 20px; background: #e3f8fa; color: #0c7381; font-size: 9.5px; font-weight: 850; text-align: center; }
.bo-switcher-panel .bo-company-list { max-height: 380px; overflow-y: auto; }
.bo-switcher-panel .bo-company-row { border-bottom: 1px solid #f2f5f8; box-shadow: inset 3px 0 var(--company-solid, transparent); }
.bo-switcher-panel .bo-company-row:last-child { border-bottom: 0; }

/* ─── Contrats : formule + echeance + etat ──────────────────────────────────── */
.bo-contract-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 9px; font-weight: 850; white-space: nowrap; }
.bo-contract-chip b { font-weight: 850; }
.bo-contract-chip i { font-style: normal; font-weight: 700; opacity: .8; }
.bo-contract-chip.is-active { border-color: #b6e6c8; background: #e9f9ef; color: #17794a; }
.bo-contract-chip.is-soon { border-color: #f6dfae; background: #fdf5e5; color: #96660c; }
.bo-contract-chip.is-expired { border-color: #f2c3ca; background: #fdeef0; color: #b32639; }
.bo-contract-chip.is-unknown, .bo-contract-chip.is-none { border-color: #dde5ed; background: #f4f7fa; color: #6b7c8d; }

/* Le titre doit pouvoir grandir pour que le bandeau contrat s'aligne a droite. */
.bo-detail-title { flex: 1 1 auto; }
.bo-contract-banner { display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 9px 14px; border: 1px solid transparent; border-radius: 12px; }
.bo-contract-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .7); }
.bo-contract-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-contract-copy { display: grid; gap: 2px; }
.bo-contract-copy strong { font-size: 12px; font-weight: 850; }
.bo-contract-copy small { font-size: 9.5px; font-weight: 700; opacity: .85; }
.bo-contract-banner.is-active { border-color: #b6e6c8; background: #e9f9ef; color: #17794a; }
.bo-contract-banner.is-soon { border-color: #f6dfae; background: #fdf5e5; color: #96660c; }
.bo-contract-banner.is-expired { border-color: #f2c3ca; background: #fdeef0; color: #b32639; }
.bo-contract-banner.is-unknown, .bo-contract-banner.is-none { border-color: var(--line); background: #f6f8fa; color: #6b7c8d; }

/* ─── Acces rapide aux utilisateurs ─────────────────────────────────────────── */
.bo-people-row { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; transition: background .15s ease; }
.bo-people-row:hover { background: #f3fafb; }
.bo-people-copy { display: grid; gap: 1px; min-width: 0; }
.bo-people-copy strong { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-people-copy small { color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-people-arrow { display: grid; place-items: center; opacity: 0; transition: opacity .15s ease; }
.bo-people-arrow svg { width: 13px; height: 13px; fill: none; stroke: var(--cyan-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-people-row:hover .bo-people-arrow { opacity: 1; }
.bo-dash-people.is-clickable li { padding: 0; border: 0; }
.bo-role.is-off { background: #f1f4f7; color: #8494a3; }
.bo-people-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--cyan-dark); font-size: 9.5px; font-weight: 800; cursor: pointer; }
.bo-people-more:hover { border-color: #a8dce2; background: #f3fafb; }
.bo-people-more svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.bo-user-row.is-highlighted { animation: bo-user-flash 2.2s ease; }
@keyframes bo-user-flash {
  0%, 100% { background: transparent; box-shadow: none; }
  15%, 55% { background: #eafbfc; box-shadow: inset 3px 0 var(--cyan-dark); }
}
.bo-ticket-row.is-selected { background: #f3fafb; }
.bo-ticket-row.is-selected::before { width: 4px; }
.bo-company-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--navy-2); font-size: 14px; font-weight: 900; }
.bo-ticket-avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 10px; font-size: 12px; font-weight: 900;
}
.bo-company-row-copy, .bo-ticket-row-copy { min-width: 0; display: grid; gap: 3px; }
.bo-company-row-copy strong, .bo-ticket-row-copy strong {
  overflow: hidden; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis;
  white-space: nowrap;
}
.bo-company-row-copy span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.bo-ticket-company { overflow: hidden; font-size: 10.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; }
.bo-ticket-row-meta { display: flex; align-items: baseline; gap: 6px; overflow: hidden; color: var(--muted); font-size: 10.5px; }
.bo-ticket-row-meta b { overflow: hidden; color: #33465a; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.bo-ticket-row-meta i { flex: 0 0 auto; font-style: normal; }
.bo-ticket-row-meta i::before { content: "·"; margin-right: 6px; }
.bo-ticket-row-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.bo-company-row-stats { display: flex; gap: 9px; }
.bo-mini-stat { display: grid; justify-items: center; gap: 1px; min-width: 38px; }
.bo-mini-stat b { font-size: 13px; }
.bo-mini-stat small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.bo-empty-state { min-height: 500px; display: grid; place-content: center; justify-items: center; padding: 40px; color: var(--muted); text-align: center; }
.bo-empty-state > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; color: #2b8190; background: #e8f7f9; }
.bo-empty-state h3 { margin: 16px 0 6px; color: var(--ink); font-size: 15px; }
.bo-empty-state p { max-width: 330px; margin: 0; font-size: 11px; line-height: 1.6; }
.bo-empty-state.compact { min-height: 190px; }

.bo-detail { display: grid; }
.bo-detail-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px; border-bottom: 1px solid #e8eef4; }
.bo-detail-title { display: flex; gap: 13px; align-items: center; min-width: 0; }
.bo-detail-title .bo-company-avatar { width: 48px; height: 48px; }
.bo-detail-title h2 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.035em; }
.bo-detail-title p { margin: 0; color: var(--muted); font-size: 10px; }
.bo-detail-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.bo-small-button { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: #526578; background: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.bo-small-button:hover { color: var(--cyan-dark); border-color: #a9dae0; }
.bo-small-button.danger:hover { color: var(--danger); border-color: #efb8bf; background: #fff7f8; }
.bo-small-button svg { width: 14px; height: 14px; }
.bo-detail-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 16px 20px; background: #f8fafc; }
.bo-detail-kpi { display: grid; gap: 3px; padding: 12px; border: 1px solid #e5ebf1; border-radius: 10px; background: #fff; }
.bo-detail-kpi strong { font-size: 18px; }
.bo-detail-kpi small { color: var(--muted); font-size: 9px; }
.bo-detail-section { display: grid; gap: 11px; padding: 19px 21px; border-top: 1px solid #edf1f5; }
.bo-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bo-detail-section h3 { margin: 0; font-size: 12px; }
.bo-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bo-info-item { min-width: 0; display: grid; gap: 3px; padding: 10px 11px; border-radius: 9px; background: #f6f8fa; }
.bo-info-item small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
.bo-info-item strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.bo-user-list { display: grid; gap: 7px; }
.bo-user-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid #e7edf2; border-radius: 9px; }
.bo-user-row.is-inactive { opacity: .55; }
.bo-user-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #5140b5; background: #efedff; font-size: 11px; font-weight: 900; }
.bo-user-copy {
  min-width: 0; display: grid; gap: 2px;
  padding: 4px 6px; margin: -4px -6px;
  border: 0; border-radius: 7px; background: none; text-align: left; cursor: pointer;
  transition: background .15s ease;
}
.bo-user-copy:hover { background: #eef8fa; }
.bo-user-copy:hover strong { color: var(--cyan-dark); text-decoration: underline; }
.bo-user-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.bo-user-copy small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.bo-role { padding: 4px 7px; border-radius: 20px; color: #1d619b; background: #e8f2ff; font-size: 8px; font-weight: 850; }
.bo-role.manager { color: #6245b5; background: #f0ebff; }
.bo-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.bo-row-actions button { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #e2e8ee; border-radius: 7px; color: #6b7d8f; background: #fff; cursor: pointer; }
.bo-row-actions button:hover { color: var(--cyan-dark); border-color: #a9dbe1; }
.bo-row-actions button.danger:hover { color: var(--danger); border-color: #efb5bd; }
.bo-row-actions svg { width: 13px; height: 13px; }

.bo-ticket-row-top { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.bo-ticket-ref { color: #738497; font: 700 9px ui-monospace, SFMono-Regular, Consolas, monospace; }
.bo-badge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 7px; border-radius: 20px; color: #53687b; background: #eef2f6; font-size: 8px; font-weight: 850; }
.bo-badge.open { color: #a45c05; background: #fff0d8; }
.bo-badge.critical { color: #c23241; background: #ffe7ea; }
.bo-badge.done { color: #16714f; background: #e5f7ef; }
.bo-ticket-detail-head { padding: 22px; border-bottom: 1px solid #e8eef4; }
.bo-ticket-detail-head h2 { margin: 9px 0 8px; font-size: 20px; letter-spacing: -.03em; }
.bo-ticket-detail-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.bo-ticket-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.bo-ticket-meta span { padding: 5px 8px; border-radius: 7px; color: #617487; background: #f3f6f8; font-size: 9px; font-weight: 700; }
.bo-ticket-meta-company { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.bo-ticket-meta-company i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.bo-initial-message {
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: 13px;
  padding: 14px 16px 15px 19px;
  overflow: hidden;
  border: 1px solid #cfc4f4;
  border-left: 5px solid #6f50c9;
  border-radius: 12px;
  background: #f7f4ff;
  box-shadow: 0 5px 16px rgba(83, 59, 157, .07);
}
.bo-initial-message::after {
  content: "";
  position: absolute;
  top: -28px;
  right: -24px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(111, 80, 201, .06);
  pointer-events: none;
}
.bo-initial-message-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px 12px; }
.bo-initial-message-badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border-radius: 999px; color: #fff; background: #6f50c9; font-size: 10px; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; }
.bo-initial-message-head small { color: #76699b; font-size: 10px; font-weight: 750; }
.bo-ticket-detail-head .bo-initial-message p { position: relative; z-index: 1; color: #342c4d; font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.bo-initial-attachments { position: relative; z-index: 1; display: grid; gap: 9px; margin-top: 2px; padding-top: 12px; border-top: 1px solid #cfe8dd; }
.bo-initial-attachments-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px 12px; }
.bo-initial-attachments-head > span { display: inline-flex; width: fit-content; padding: 4px 9px; border-radius: 999px; color: #fff; background: #16875f; font-size: 9px; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; }
.bo-initial-attachments-head small { color: #4d7666; font-size: 10px; font-weight: 750; }
.bo-intervention-form { display: grid; grid-template-columns: 1fr 180px; gap: 10px; padding: 20px; border-top: 1px solid #e8eef4; background: #fafbfd; }
.bo-intervention-form h3 { grid-column: 1 / -1; margin: 0 0 3px; font-size: 12px; }
.bo-intervention-form label { display: grid; gap: 6px; color: #54677a; font-size: 9px; font-weight: 800; }
.bo-intervention-form label.full, .bo-intervention-form .bo-form-status, .bo-intervention-form .bo-button, .bo-intervention-form .bo-voice { grid-column: 1 / -1; }
.bo-intervention-form input, .bo-intervention-form select, .bo-intervention-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; color: var(--ink); background: #fff; outline: 0; }
.bo-intervention-form input, .bo-intervention-form select { height: 41px; }
.bo-intervention-form textarea { resize: vertical; }
/* ─── Piece jointe de la reponse ────────────────────────────────────────────── */
.bo-intervention-file { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border: 1px dashed #b8dce2; border-radius: 10px; background: #f8fdfe; }
.bo-intervention-file.is-dragover { border-color: var(--cyan-dark, #087f91); background: #eaf9fb; box-shadow: 0 0 0 3px rgba(34, 197, 216, .12); }
.bo-file-pick { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 10px; border: 0; border-radius: 8px; color: var(--cyan-dark, #087f91); background: #e4f7f9; cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; }
.bo-file-pick:hover { background: #d5f1f4; }
.bo-file-paste { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid #b8dce2; border-radius: 8px; color: var(--cyan-dark, #087f91); background: #fff; cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; }
.bo-file-paste:hover { border-color: var(--cyan-dark, #087f91); background: #f1fcfd; }
.bo-file-pick svg, .bo-file-paste svg, .bo-file-clear svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-file-pick span { max-width: min(420px, 60vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-file-clear { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: #a35c67; background: #fbecef; cursor: pointer; }
.bo-file-clear:hover { color: #8b3040; background: #f7dce2; }
.bo-intervention-file small { flex-basis: 100%; color: var(--muted); font-size: 9px; font-weight: 650; }
/* ─── Reponse vocale (formulaire intervention) ──────────────────────────────── */
.bo-voice-idle, .bo-voice-recording, .bo-voice-preview { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.bo-voice-idle { border-style: dashed; }
.bo-voice-label { color: var(--muted); font-size: 10px; font-weight: 700; }
.bo-voice-label strong { color: var(--cyan-dark); }
.bo-voice-mic, .bo-voice-stop, .bo-voice-icon-btn { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer; transition: filter .15s ease, background .15s ease, transform .1s ease; }
.bo-voice-mic:active, .bo-voice-stop:active { transform: scale(.94); }
.bo-voice-mic svg, .bo-voice-stop svg, .bo-voice-icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-voice-mic { background: linear-gradient(135deg, var(--cyan-dark), var(--cyan)); color: #fff; }
.bo-voice-mic:hover { filter: brightness(1.08); }
.bo-voice-stop { background: var(--cyan-dark); color: #fff; }
.bo-voice-icon-btn { background: transparent; color: #9aa8b5; }
.bo-voice-icon-btn.is-danger:hover { background: #fdf0f2; color: #d14357; }
.bo-voice-recording { border-color: #f0c7cd; background: #fffafb; }
.bo-voice-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #d14357; animation: bo-voice-blink 1.1s ease-in-out infinite; }
@keyframes bo-voice-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.bo-voice-timer { flex: 0 0 auto; min-width: 34px; color: var(--ink); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bo-voice-wave { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; height: 22px; overflow: hidden; }
.bo-voice-wave span { flex: 1 1 auto; min-width: 2px; height: 12%; border-radius: 2px; background: #a5dbe2; transition: height .08s linear; }
.bo-voice-preview { border-color: #bfe7ec; background: #f4fcfd; }
.bo-voice-ready { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--cyan-dark); font-size: 10px; font-weight: 800; }
.bo-voice-ready svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-voice-audio { flex: 1 1 auto; height: 32px; min-width: 0; }

/* Messages : ton chaud pour le client, bleu/technique pour l'equipe. */
.bo-timeline-item.is-client { border-color: #f0c77f; border-left-color: #d98212; background: #fff9ed; }
.bo-timeline-item.is-client::before { background: #d98212; box-shadow: 0 0 0 3px #fff0cf; }
.bo-timeline-item.is-client .bo-message-role { color: #9b5a05; background: #ffedc9; }
.bo-timeline-item.is-staff { border-color: #addce5; border-left-color: #087f91; background: #f0fbfd; }
.bo-timeline-item.is-staff::before { background: #087f91; box-shadow: 0 0 0 3px #d9f3f6; }
.bo-timeline-item.is-staff .bo-message-role { color: #087080; background: #d8f2f5; }
.bo-timeline-head { display: grid; gap: 5px; }
.bo-message-role { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; }
.bo-timeline-file { min-width: 0; max-width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; margin: 3px 0; padding: 9px 10px; border: 1px solid #b8dfcf; border-radius: 10px; color: #205f4b; background: #f1faf6; font-size: 10.5px; font-weight: 750; text-decoration: none; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.bo-timeline-file:hover { border-color: #68b798; background: #e5f6ee; box-shadow: 0 4px 12px rgba(22, 135, 95, .1); }
.bo-timeline-file-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 4px 7px; border-radius: 999px; color: #fff; background: #16875f; font-size: 9px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.bo-timeline-file-badge svg { flex: 0 0 auto; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-timeline-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bo-timeline-audio { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; margin: 4px 0; padding: 8px 10px; border: 1px solid currentColor; border-radius: 10px; }
.bo-timeline-audio span { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.bo-timeline-audio svg { flex: 0 0 auto; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-timeline-audio audio { width: 100%; height: 30px; min-width: 0; }
.bo-timeline-item.is-client .bo-timeline-audio { color: #a76208; border-color: #efcc90; background: #fff3d8; }
.bo-timeline-item.is-staff .bo-timeline-audio { color: #087080; border-color: #a9dbe4; background: #ddf4f7; }

/* ─── Pieces jointes du ticket (fichiers + note vocale) ─────────────────────── */
.bo-attachments { display: grid; gap: 9px; }
.bo-attachment-audio { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid #efcc90; border-radius: 10px; background: #fff8e9; }
.bo-attachment-audio-head { display: inline-flex; align-items: center; gap: 7px; color: #a76208; font-size: 10px; font-weight: 800; }
.bo-attachment-audio-head svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-attachment-audio audio { display: block; width: 100%; min-width: 0; max-width: 100%; height: 34px; }
.bo-attachment-dl { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: var(--muted); font-size: 9px; font-weight: 700; text-decoration: none; }
.bo-attachment-dl svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-attachment-dl:hover { color: var(--cyan-dark, #087f91); }

.bo-attachment { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid #b8dfcf; border-radius: 10px; background: #f1faf6; color: #205f4b; text-decoration: none; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.bo-attachment:hover { border-color: #68b798; background: #e5f6ee; box-shadow: 0 4px 12px rgba(22, 135, 95, .1); }
.bo-attachment-type { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 4px 7px; border-radius: 999px; color: #fff; background: #16875f; font-size: 9px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.bo-attachment-type svg { flex: 0 0 auto; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bo-attachment-copy { display: grid; gap: 2px; min-width: 0; }
.bo-attachment-copy strong { overflow: hidden; color: #205f4b; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.bo-attachment-copy small { color: #5d7e70; font-size: 9px; }
.bo-initial-attachments .bo-attachment-audio { border-color: #b8dfcf; background: #f1faf6; }
.bo-initial-attachments .bo-attachment-audio-head { color: #16875f; }

.bo-timeline { display: grid; gap: 14px; }
.bo-timeline-item { position: relative; display: grid; gap: 9px; padding: 15px 18px 14px 21px; border: 1px solid #dce5ec; border-left-width: 5px; border-radius: 13px; background: #f8fafb; box-shadow: 0 4px 14px rgba(28, 51, 74, .045); }
.bo-timeline-item::before { content: ""; position: absolute; left: -6px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: #8fa0af; box-shadow: 0 0 0 3px #eef2f5; }
.bo-timeline-item strong { color: #17283a; font-size: 13px; line-height: 1.35; }
.bo-timeline-item p { margin: 0; color: #3f5367; font-size: 13px; line-height: 1.68; white-space: pre-wrap; overflow-wrap: anywhere; }
.bo-timeline-item small { padding-top: 8px; border-top: 1px solid rgba(91, 117, 139, .14); color: #718498; font-size: 10.5px; font-weight: 650; }

.bo-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.bo-modal-backdrop { position: absolute; inset: 0; background: rgba(4, 16, 30, .62); backdrop-filter: blur(5px); }
.bo-modal-card { position: relative; z-index: 1; width: min(680px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; border: 1px solid rgba(255, 255, 255, .65); border-radius: 18px; background: #fff; box-shadow: 0 28px 80px rgba(4, 16, 30, .28); }
.bo-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 22px; }
.bo-modal-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin: -2px 0 7px; padding-bottom: 16px; border-bottom: 1px solid #e8eef4; }
.bo-modal-head span { color: var(--cyan-dark); font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.bo-modal-head h2 { margin: 4px 0 0; font-size: 21px; letter-spacing: -.035em; }
.bo-modal-head > button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
.bo-modal-head > button svg { width: 16px; height: 16px; }
.bo-form label { min-width: 0; display: grid; gap: 6px; color: #536679; font-size: 10px; font-weight: 800; }
.bo-form label em { color: var(--danger); font-style: normal; }
.bo-form input, .bo-form select, .bo-form textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; color: var(--ink); background: #fff; outline: 0; }
.bo-form input, .bo-form select { height: 42px; }
.bo-form textarea { resize: vertical; }
.bo-form input:focus, .bo-form select:focus, .bo-form textarea:focus { border-color: #6fd1dc; box-shadow: 0 0 0 3px rgba(34, 197, 216, .1); }
.bo-form .full { grid-column: 1 / -1; }
.bo-toggle { display: flex !important; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px !important; }
.bo-toggle input { width: 17px; height: 17px; padding: 0; accent-color: var(--cyan-dark); }
.bo-password-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.bo-password-row button { padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--cyan-dark); background: #f4fbfc; font-size: 10px; font-weight: 850; cursor: pointer; }
.bo-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 7px; }
.bo-form-status { padding: 10px 12px; border-radius: 9px; color: #1b6b52; background: #e9f7f1; font-size: 10px; font-weight: 750; }
.bo-form-status.error { color: #a62f3b; background: #ffedef; }
.bo-access-result { display: grid; gap: 9px; padding: 14px; border: 1px solid #b9e6d7; border-radius: 10px; background: #effaf6; }
.bo-access-result strong { color: #17664f; font-size: 11px; }
.bo-access-result code { overflow-wrap: anywhere; color: #315f51; font-size: 10px; }
.bo-access-result button { width: fit-content; padding: 7px 9px; border: 1px solid #aad9ca; border-radius: 7px; color: #17664f; background: #fff; font-size: 9px; font-weight: 800; cursor: pointer; }
.bo-access-mobile { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 13px; align-items: center; padding: 11px; border: 1px solid #cde8df; border-radius: 10px; background: #fff; }
.bo-access-mobile img { width: 118px; height: 118px; border: 1px solid #e2ece8; border-radius: 8px; }
.bo-access-mobile div { min-width: 0; display: grid; gap: 6px; }
.bo-access-mobile b { color: #153d4a; font-size: 11px; }
.bo-access-mobile span { color: #58716a; font-size: 9px; line-height: 1.5; }
.bo-access-mobile a { width: fit-content; color: #147989; font-size: 9px; font-weight: 850; text-decoration: none; }
@media (max-width: 520px) {
  .bo-access-mobile { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .bo-access-mobile a { justify-self: center; }
}
.bo-danger-note { display: flex; gap: 12px; padding: 14px; border: 1px solid #f1c3c8; border-radius: 10px; color: #8f2e38; background: #fff3f4; }
.bo-danger-note svg { flex: 0 0 auto; }
.bo-danger-note strong { font-size: 11px; }
.bo-danger-note p { margin: 4px 0 0; font-size: 9px; line-height: 1.55; }

/* ─── Rapports mensuels ─────────────────────────────────────────────────────── */
.bo-report-toolbar { display: grid; gap: 16px; padding: 20px 22px; }
.bo-report-toolbar-head { display: flex; align-items: center; gap: 12px; }
.bo-report-toolbar-head h3 { margin: 0 0 3px; font-size: 16px; }
.bo-report-toolbar-head p { margin: 0; color: var(--muted); font-size: 12px; }
.bo-report-fields { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto; gap: 12px; align-items: end; }
.bo-report-fields label { min-width: 0; display: grid; gap: 6px; color: #536679; font-size: 12px; font-weight: 800; }
.bo-report-fields .bo-select { width: 100%; min-width: 0; }
.bo-report-composer { display: grid; gap: 14px; padding: 16px; border: 1px solid #dce7ed; border-radius: 13px; background: #f8fbfc; }
.bo-report-composer-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.bo-report-composer-head > div { display: grid; gap: 3px; }
.bo-report-composer-head strong { font-size: 13px; }
.bo-report-composer-head small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.bo-report-composer-head > label, .bo-report-detail-options label { min-width: 0; display: grid; gap: 6px; color: #536679; font-size: 11px; font-weight: 800; }
.bo-report-composer-head .bo-select { width: 260px; min-width: 0; }
.bo-report-sections { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.bo-report-sections legend { grid-column: 1 / -1; margin-bottom: 2px; color: #536679; font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.bo-report-sections label { position: relative; min-width: 0; cursor: pointer; }
.bo-report-sections input { position: absolute; opacity: 0; pointer-events: none; }
.bo-report-sections span { min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 7px 9px; border: 1px solid #dce6ec; border-radius: 9px; color: #607285; background: #fff; font-size: 10.5px; font-weight: 750; text-align: center; transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease; }
.bo-report-sections input:checked + span { border-color: #8fd3dc; color: #087384; background: #eaf9fb; box-shadow: inset 0 0 0 1px rgba(34, 197, 216, .12); }
.bo-report-sections input:focus-visible + span { outline: 3px solid rgba(34, 197, 216, .2); outline-offset: 2px; }
.bo-report-detail-options { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.bo-report-detail-options .bo-select { width: 100%; min-width: 0; }
.bo-report-selection-note { margin: 0; padding: 10px 12px; border-radius: 9px; color: #496071; background: #eef6f8; font-size: 11px; line-height: 1.5; }
.bo-report-shell { min-width: 0; }
.bo-report-shell > .bo-empty-state { padding: 60px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }

.bo-report-doc { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); color: var(--ink); }
.bo-rep-cover { padding: 34px 38px 30px; color: #e8f4f7; background: radial-gradient(circle at 88% 0%, rgba(34, 197, 216, .3), transparent 24rem), var(--navy); }
.bo-rep-cover-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.bo-rep-brand { display: flex; align-items: center; gap: 10px; }
.bo-rep-brand img { width: 205px; height: auto; padding: 5px 8px; border-radius: 7px; background: #fff; object-fit: contain; }
.bo-rep-brand span { padding: 4px 9px; border-radius: 7px; background: rgba(255, 255, 255, .12); font-size: 11px; font-weight: 850; }
.bo-rep-eyebrow { color: #7fe2ee; font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.bo-rep-cover h1 { margin: 0; color: #fff; font-size: 33px; letter-spacing: -.035em; line-height: 1.15; }
.bo-rep-period { margin: 6px 0 24px; color: #9fd7e2; font-size: 15px; font-weight: 700; }
.bo-rep-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
.bo-rep-meta > div { min-width: 0; }
.bo-rep-meta dt { color: #86b4c4; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bo-rep-meta dd { overflow: hidden; margin: 3px 0 0; color: #fff; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.bo-rep-section { padding: 26px 38px; border-top: 1px solid #eaeff4; }
.bo-rep-section h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 17px; letter-spacing: -.02em; }
.bo-rep-section h2 > span { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: #0b6b7a; background: #e2f7fa; font-size: 12px; font-weight: 900; }
.bo-rep-section h2 em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 600; }
.bo-rep-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bo-rep-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bo-rep-kpi { display: grid; gap: 3px; padding: 14px; border: 1px solid #e5ebf1; border-radius: 11px; background: #f9fbfc; }
.bo-rep-kpi strong { font-size: 22px; letter-spacing: -.04em; }
.bo-rep-kpi small { color: var(--muted); font-size: 11px; font-weight: 700; }
.bo-rep-kpi em { color: var(--cyan-dark); font-size: 10.5px; font-style: normal; font-weight: 750; }
.bo-rep-note { margin: 16px 0 0; padding: 14px 16px; border-left: 3px solid var(--cyan); border-radius: 0 9px 9px 0; color: #3c5062; background: #f4fafb; font-size: 12.5px; line-height: 1.65; }

.bo-rep-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.bo-rep-table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 4px; font-size: 12px; }
.bo-rep-table th { padding: 9px 10px; border-bottom: 1.5px solid #dae3eb; color: #47596b; font-size: 10px; font-weight: 850; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.bo-rep-table th, .bo-rep-table td { min-width: 0; overflow-wrap: anywhere; }
.bo-rep-table td { padding: 10px; border-bottom: 1px solid #edf1f5; vertical-align: top; }
.bo-rep-table tbody tr:last-child td { border-bottom: 0; }
.bo-rep-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bo-rep-table td strong { display: block; font-size: 12px; }
.bo-rep-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.bo-rep-table td.bar { min-width: 0; }
.bo-rep-bar-cell { min-width: 0; display: flex; align-items: center; gap: 8px; }
.bo-rep-table td.bar b { min-width: 34px; color: #47596b; font-size: 11px; text-align: right; }
.bo-rep-bar { min-width: 0; flex: 1; height: 7px; overflow: hidden; border-radius: 20px; background: #e8eef3; }
.bo-rep-bar i { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg, #43cddc, #1c95a8); }
.bo-rep-empty { padding: 12px 0; color: var(--muted); font-size: 11.5px; font-style: italic; }

.bo-rep-user { margin-bottom: 18px; border: 1px solid #e5ebf1; border-radius: 12px; overflow: hidden; }
.bo-rep-user:last-child { margin-bottom: 0; }
.bo-rep-user-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #f6f9fb; }
.bo-rep-user-head strong { display: block; font-size: 14px; }
.bo-rep-user-head small { color: var(--muted); font-size: 11.5px; }
.bo-rep-user-stats { display: flex; flex-wrap: wrap; gap: 7px; }
.bo-rep-user-stats span { padding: 5px 9px; border: 1px solid #e2e9ef; border-radius: 20px; color: #4d6072; background: #fff; font-size: 11px; font-weight: 700; }
.bo-rep-user-stats b { color: var(--ink); font-weight: 900; }
.bo-rep-user > .bo-rep-empty { padding: 14px 16px; }

.bo-rep-ticket { padding: 16px; border-top: 1px solid #edf1f5; }
.bo-rep-ticket-head { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.bo-rep-ref { padding: 4px 8px; border-radius: 6px; color: #0b6b7a; background: #e3f8fa; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 800; }
.bo-rep-ticket h4 { margin: 9px 0 7px; font-size: 14.5px; letter-spacing: -.015em; }
.bo-rep-ticket-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.bo-rep-ticket-meta span { padding: 4px 8px; border-radius: 6px; color: #5c6f81; background: #f4f7f9; font-size: 10.5px; font-weight: 700; }
.bo-rep-ticket-desc { margin: 10px 0 0; color: #435668; font-size: 12px; line-height: 1.65; white-space: pre-line; }
.bo-rep-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; }
.bo-rep-chips b { color: #47596b; font-size: 10.5px; font-weight: 850; }
.bo-rep-chip { padding: 4px 8px; border: 1px solid #dce6ec; border-radius: 20px; color: #46596b; background: #fff; font-size: 10.5px; font-weight: 700; }
.bo-rep-steps { display: grid; gap: 10px; margin: 12px 0 0; padding: 0 0 0 22px; }
.bo-rep-steps li { position: relative; padding: 0; list-style: none; }
.bo-rep-steps li::before { content: counter(list-item); position: absolute; left: -22px; top: 0; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--cyan-dark); font-size: 9px; font-weight: 900; }
.bo-rep-step-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.bo-rep-step-head strong { font-size: 12.5px; }
.bo-rep-step-head span { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.bo-rep-steps p { margin: 4px 0 3px; color: #47596b; font-size: 12px; line-height: 1.6; white-space: pre-line; }
.bo-rep-steps small { color: #8b9aa8; font-size: 10.5px; }
.bo-rep-inline-note { margin-top: 10px; padding: 9px 11px; border-radius: 8px; color: #47596b; background: #f6f9fb; font-size: 11.5px; line-height: 1.55; }
.bo-rep-inline-note b { color: var(--ink); }

.bo-rep-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 38px; border-top: 1px solid #eaeff4; background: #f8fafc; }
.bo-rep-footer strong { display: block; font-size: 12px; }
.bo-rep-footer span { color: var(--muted); font-size: 11px; }
.bo-rep-confidential { padding: 5px 10px; border: 1px solid #e2e9ef; border-radius: 20px; background: #fff; font-size: 10.5px !important; font-weight: 750; }

.bo-toast-region { position: fixed; z-index: 200; right: 22px; bottom: 22px; display: grid; gap: 9px; }
.bo-toast { min-width: 280px; max-width: 390px; display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1px solid #dbe6ed; border-radius: 11px; color: #284458; background: #fff; box-shadow: 0 15px 40px rgba(9, 32, 54, .17); font-size: 10px; font-weight: 750; animation: toastIn .2s ease; }
.bo-toast.success { border-color: #b8e4d4; color: #17674f; }
.bo-toast.error { border-color: #f0bbc1; color: #a72e3a; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* Readability pass: comfortable sizes for daily backoffice use. */
.bo-nav-label, .bo-topbar p, .bo-eyebrow { font-size: 11px; }
.bo-nav-item span { font-size: 14px; }
.bo-nav-item b, .bo-admin-card small { font-size: 11px; }
.bo-admin-card strong, .bo-maintenance-link, .bo-system-status { font-size: 12px; }
.bo-button, .bo-select { font-size: 13px; }
.bo-kpi small { font-size: 12px; }
.bo-panel-head h3 { font-size: 16px; }
.bo-panel-head p { font-size: 12px; line-height: 1.5; }
.bo-preview-copy strong, .bo-company-row-copy strong, .bo-ticket-row-copy strong { font-size: 13px; }
.bo-preview-copy small, .bo-company-row-copy span, .bo-ticket-row-copy span { font-size: 11.5px; line-height: 1.45; }
.bo-ticket-company { font-size: 11px; }
.bo-ticket-row-meta { font-size: 11.5px; }
.bo-preview-meta { font-size: 10.5px; }
.bo-list-heading strong { font-size: 14px; }
.bo-mini-stat small { font-size: 9.5px; }
.bo-empty-state p, .bo-detail-title p { font-size: 11.5px; }
.bo-small-button { font-size: 12px; }
.bo-detail-kpi small { font-size: 10.5px; }
.bo-detail-section h3 { font-size: 14px; }
.bo-info-item small { font-size: 10px; }
.bo-info-item strong { font-size: 12.5px; }
.bo-user-copy strong { font-size: 12.5px; }
.bo-user-copy small { font-size: 11px; }
.bo-role, .bo-badge { font-size: 10px; }
.bo-ticket-detail-head p { font-size: 12.5px; }
.bo-ticket-meta span { font-size: 11px; }
.bo-intervention-form h3 { font-size: 14px; }
.bo-intervention-form label, .bo-form label { font-size: 12px; }
.bo-form input, .bo-form select, .bo-form textarea, .bo-intervention-form input, .bo-intervention-form select, .bo-intervention-form textarea { font-size: 13px; }
.bo-timeline-item strong { font-size: 13px; }
.bo-timeline-item p { font-size: 13px; }
.bo-timeline-item small { font-size: 10.5px; }
.bo-modal-head span { font-size: 10.5px; }
.bo-form-status, .bo-access-result strong { font-size: 12px; }
.bo-access-result code { font-size: 11.5px; line-height: 1.6; }
.bo-danger-note strong { font-size: 12px; }
.bo-danger-note p { font-size: 11px; }

@media (max-width: 1120px) {
  .bo-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-master-detail { grid-template-columns: minmax(310px, .9fr) minmax(0, 1.2fr); }
  .bo-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-detail-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bo-sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  .bo-app { display: block; }
  .bo-sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 12px 0 35px rgba(4, 16, 30, .25); }
  body.menu-open .bo-sidebar { transform: translateX(0); }
  .bo-main { grid-column: auto; }
  .bo-mobile-menu { display: grid; }
  .bo-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
    display: none;
    background: rgba(7, 24, 45, .45);
    opacity: 0;
    transition: opacity .2s ease;
  }
  body.menu-open .bo-sidebar-backdrop { display: block; opacity: 1; }
  .bo-overview-grid, .bo-master-detail { grid-template-columns: 1fr; }
  .bo-detail-panel { position: static; }
  .bo-list-panel, .bo-detail-panel { min-height: auto; }
  .bo-company-list, .bo-ticket-list { max-height: 520px; }
  .bo-ticket-layout:not(.is-detail-open) > [data-ticket-detail] { display: none; }
  .bo-ticket-layout.is-detail-open > .bo-list-panel { display: none; }
  body.ticket-detail-open [data-view="tickets"] > .bo-view-toolbar,
  body.ticket-detail-open [data-view="tickets"] > [data-ticket-user-filter] { display: none; }
  .bo-mobile-ticket-nav {
    position: relative;
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 16px;
    padding: 5px;
    border: 1px solid #cbe2e7;
    border-radius: 10px;
    color: var(--cyan-dark);
    background: #f6fbfc;
    box-shadow: none;
    font-size: 11px;
    font-weight: 850;
  }
  .bo-mobile-ticket-back, .bo-mobile-ticket-step { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; color: inherit; background: transparent; cursor: pointer; }
  .bo-mobile-ticket-back { gap: 7px; padding: 0 8px; font: inherit; font-weight: 850; }
  .bo-mobile-ticket-nav > span { display: flex; gap: 3px; }
  .bo-mobile-ticket-step { width: 36px; }
  .bo-mobile-ticket-back:hover, .bo-mobile-ticket-step:hover { background: #dff5f7; }
  .bo-mobile-ticket-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
  .bo-mobile-ticket-back svg, .bo-mobile-ticket-step:first-child svg { transform: rotate(180deg); }
}

@media (max-width: 650px) {
  .bo-topbar { min-height: 74px; padding: 14px 16px; }
  .bo-topbar h1 { font-size: 19px; }
  .bo-system-status { display: none; }
  .bo-content { padding: 18px 14px 35px; }
  .bo-welcome { min-height: 0; grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .bo-welcome h2 { font-size: 27px; }
  .bo-welcome-avatar { width: 44px; height: 44px; border-radius: 12px; }
  .bo-welcome-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 17px; }
  .bo-welcome-metrics button { min-width: 0; display: grid; gap: 1px; padding: 9px 8px; }
  .bo-welcome-metrics strong { font-size: 17px; }
  .bo-welcome-metrics span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; }
  .bo-welcome-actions { min-width: 0; grid-template-columns: 1fr; }
  .bo-kpi-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .bo-kpi { min-height: 92px; padding: 14px; }
  .bo-kpi-icon { width: 39px; height: 39px; }
  .bo-kpi strong { font-size: 23px; }
  .bo-view-toolbar { align-items: stretch; flex-direction: column; }
  .bo-search { min-width: 0; }
  .bo-view-toolbar .bo-button, .bo-select { width: 100%; }
  .bo-form { grid-template-columns: 1fr; padding: 18px; }
  .bo-form .full, .bo-modal-head { grid-column: 1; }
  .bo-modal { padding: 10px; }
  .bo-modal-card { max-height: calc(100vh - 20px); border-radius: 14px; }
  .bo-info-grid { grid-template-columns: 1fr; }
  .bo-user-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .bo-role { display: none; }
  .bo-detail-hero { flex-direction: column; }
  .bo-detail-actions { justify-content: flex-start; }
  .bo-intervention-form { grid-template-columns: 1fr; }
  .bo-intervention-form h3, .bo-intervention-form label.full, .bo-intervention-form .bo-form-status, .bo-intervention-form .bo-button { grid-column: 1; }
  .bo-timeline-audio { grid-template-columns: 1fr; }
  .bo-content { width: 100%; min-width: 0; }
  .bo-welcome { width: 100%; padding: 20px 16px; gap: 16px; }
  .bo-welcome h2 { max-width: 100%; font-size: 24px; }
  .bo-welcome p { font-size: 12px; }
  .bo-welcome-actions { width: 100%; min-width: 0; }
  .bo-kpi { min-width: 0; gap: 9px; padding: 12px; }
  .bo-kpi-icon { width: 34px; height: 34px; border-radius: 10px; }
  .bo-kpi-icon svg { width: 18px; height: 18px; }
  .bo-kpi strong { font-size: 21px; }
  .bo-kpi small { font-size: 9px; line-height: 1.25; }
  .bo-panel-head { padding: 13px 12px; }
  .bo-panel-head > div { min-width: 0; }
  .bo-panel-head h3, .bo-panel-head p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bo-preview-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; }
  .bo-preview-avatar { width: 32px; height: 32px; border-radius: 9px; font-size: 11px; }
  .bo-preview-meta { max-width: 74px; }
}

@media (max-width: 1120px) {
  .bo-report-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-report-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bo-rep-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-rep-kpis, .bo-rep-kpis.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-rep-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .bo-report-fields { grid-template-columns: 1fr; }
  .bo-report-toolbar { padding: 16px; }
  .bo-report-composer-head { align-items: stretch; flex-direction: column; }
  .bo-report-composer-head .bo-select { width: 100%; }
  .bo-report-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-report-detail-options { grid-template-columns: 1fr; }
  .bo-rep-cover { padding: 24px 20px; }
  .bo-rep-cover h1 { font-size: 25px; }
  .bo-rep-section, .bo-rep-footer { padding: 20px 18px; }
  .bo-rep-kpis, .bo-rep-kpis.three { grid-template-columns: 1fr 1fr; }
  .bo-rep-table { font-size: 11px; }
  .bo-rep-table td.bar { display: table-cell; }
  .bo-rep-table td.bar .bo-rep-bar { display: none; }
}

/* ═══ Fiches machines ═══════════════════════════════════════════════════════ */

/* La vue fiches machines utilise toute la largeur disponible pour le document. */
body[data-view="machines"] .bo-content { max-width: 1840px; }

.bo-machine-company-picker { padding: 20px; }
.bo-machine-picker-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.bo-machine-picker-head > div { display: grid; gap: 2px; }
.bo-machine-picker-head > div > span { color: var(--cyan-dark); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.bo-machine-picker-head h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.bo-machine-picker-head p { margin: 0; color: var(--muted); font-size: 11px; }
.bo-machine-company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.bo-machine-company-card {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.bo-machine-company-card:hover { border-color: #b7dbe2; box-shadow: 0 8px 20px rgba(18, 45, 70, .08); transform: translateY(-1px); }
.bo-machine-company-card.is-selected { border-color: #77d6e0; background: #effbfc; box-shadow: inset 0 0 0 1px rgba(34, 197, 216, .14); }
.bo-machine-company-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.bo-machine-company-card > .bo-company-avatar { width: 38px; height: 38px; border-radius: 10px; font-size: 12px; }
.bo-machine-company-card strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.bo-machine-company-card small { overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.bo-machine-company-card > svg { width: 15px; height: 15px; color: #9baeba; }
.bo-machine-company-card:focus-visible { outline: 3px solid rgba(34, 197, 216, .22); outline-offset: 2px; }
.bo-machine-workspace { display: grid; gap: 22px; }
.bo-machine-workspace[hidden] { display: none; }
.bo-machine-selection-bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 14px 9px 16px;
  border: 1px solid #cce9ed;
  border-radius: 12px;
  background: #f2fbfc;
}
.bo-machine-selection-bar > div { display: grid; gap: 1px; }
.bo-machine-selection-bar span { color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.bo-machine-selection-bar strong { color: var(--navy); font-size: 14px; }
.bo-machine-selection-bar button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 0; border-radius: 8px; color: var(--cyan-dark); background: transparent; font-size: 10.5px; font-weight: 800; cursor: pointer; }
.bo-machine-selection-bar button:hover { background: #dff5f7; }
.bo-machine-selection-bar button svg { width: 14px; height: 14px; }
.bo-machine-toolbar { flex-wrap: wrap; gap: 10px; }
.bo-machine-kpis { margin-bottom: 4px; }
.bo-machine-layout { align-items: start; grid-template-columns: 286px minmax(0, 1fr); gap: 15px; }
.bo-machine-layout .bo-list-panel { min-height: auto; position: sticky; top: 108px; }

.bo-machine-list { display: flex; flex-direction: column; gap: 2px; padding: 6px; overflow-y: auto; max-height: calc(100vh - 300px); }
.bo-machine-user-group { display: grid; gap: 2px; }
.bo-machine-user-group + .bo-machine-user-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid #edf1f5; }
.bo-machine-user-head { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px 9px; color: #567084; }
.bo-machine-user-head svg { width: 14px; height: 14px; }
.bo-machine-user-head strong { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.bo-machine-user-head span { min-width: 20px; padding: 2px 6px; border-radius: 999px; color: #087080; background: #e3f8fa; font-size: 8.5px; font-weight: 850; text-align: center; }
.bo-machine-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 11px;
  border: 0; border-radius: 11px;
  background: transparent; text-align: left; cursor: pointer;
  transition: background .15s ease;
}
.bo-machine-row:hover { background: var(--soft); }
.bo-machine-row.is-active { background: #e7f6f9; box-shadow: inset 3px 0 0 var(--cyan-dark); }
.bo-machine-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #b8c6d2; }
.bo-machine-dot.is-good { background: var(--success); }
.bo-machine-dot.is-warning { background: #d68910; }
.bo-machine-dot.is-critical { background: var(--danger); }
.bo-machine-main { flex: 1; min-width: 0; display: block; }
.bo-machine-company {
  display: block; margin-bottom: 1px;
  color: var(--cyan-dark); font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bo-machine-main strong { display: block; font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-machine-main small { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-machine-meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.bo-machine-meta em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.bo-machine-alert {
  display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #fdece9; color: var(--danger);
  font-size: 11px; font-weight: 800; font-style: normal;
}

/* ═══ Offres & services (vitrine client) ════════════════════════════════════ */

.bo-promo-toolbar { align-items: flex-start; }
.bo-promo-title { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.bo-promo-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }

.bo-promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
.bo-promo-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 15px; background: #fff;
  overflow: hidden; cursor: pointer;
  box-shadow: 0 2px 10px rgba(18, 45, 70, .04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bo-promo-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 14px 34px rgba(18, 45, 70, .12); }
.bo-promo-card.is-off { opacity: .62; }

.bo-promo-visual { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #eef4f8, #dfeaf1); }
.bo-promo-visual img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bo-promo-noimage { position: absolute; inset: 0; display: grid; place-items: center; color: #9fb2c1; }
.bo-promo-noimage svg { width: 34px; height: 34px; }
.bo-promo-badge {
  position: absolute; top: 11px; left: 11px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--accent); color: #06202b;
  font-size: 11px; font-weight: 850; letter-spacing: .02em;
}
.bo-promo-live {
  position: absolute; top: 11px; right: 11px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(16, 32, 51, .78); color: #fff;
  font-size: 10.5px; font-weight: 750; backdrop-filter: blur(4px);
}
.bo-promo-live.is-on { background: rgba(22, 135, 95, .9); }

.bo-promo-body { flex: 1; display: grid; gap: 6px; padding: 15px 16px 12px; }
.bo-promo-body h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.bo-promo-body p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.bo-promo-meta { display: grid; gap: 5px; margin-top: 4px; }
.bo-promo-meta span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11.5px; }
.bo-promo-meta svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--accent); }

.bo-promo-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-top: 1px solid #eef2f6; background: #fafcfd; }
.bo-promo-order { color: var(--muted); font-size: 11px; font-weight: 700; }

/* Zone de depot du visuel dans la modale */
.bo-promo-upload { display: grid; gap: 9px; justify-items: start; }
.bo-promo-dropzone {
  position: relative; display: block; width: 100%;
  min-height: 220px; overflow: hidden;
  border: 2px dashed var(--line); border-radius: 14px;
  background: var(--soft); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.bo-promo-dropzone:hover { border-color: var(--cyan-dark); background: #f2fbfc; }
.bo-promo-dropzone img { width: 100%; height: auto; object-fit: contain; display: block; }
.bo-promo-dropzone-inner {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: 18px; text-align: center;
}
.bo-promo-dropzone-inner svg { width: 30px; height: 30px; color: var(--cyan-dark); }
.bo-promo-dropzone-inner b { font-size: 13px; }
.bo-promo-dropzone-inner small { max-width: 340px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }

@media (max-width: 700px) {
  .bo-promo-grid { grid-template-columns: 1fr; }
}

/* ═══ Tableau de bord societe (fiche client) ════════════════════════════════ */

/* Le tableau de bord client a besoin de largeur : on elargit la page et on
   resserre la colonne de gauche, comme pour les fiches machines. */
body[data-view="companies"] .bo-content { max-width: 1840px; }
body[data-view="companies"] .bo-master-detail { grid-template-columns: 322px minmax(0, 1fr); }

.bo-detail-kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bo-detail-kpi.is-danger { border-color: #f4c6cc; background: #fff7f8; }
.bo-detail-kpi.is-danger strong { color: var(--danger); }

.bo-dash-tabs {
  display: flex; gap: 4px; overflow-x: auto;
  padding: 0 16px; border-bottom: 1px solid #e8eef4; background: #fff;
}
.bo-dash-tab {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 13px 13px 11px;
  border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--muted);
  font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.bo-dash-tab svg { width: 16px; height: 16px; }
.bo-dash-tab:hover { color: var(--ink); }
.bo-dash-tab.is-active { color: var(--cyan-dark); border-bottom-color: var(--cyan-dark); }

.bo-dash-body { padding: 18px; }
.bo-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 13px; }

.bo-dash-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 17px; border: 1px solid #e7edf3; border-radius: 13px; background: #fff; }
.bo-dash-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bo-dash-card h4 { margin: 0; font-size: 13.5px; letter-spacing: -.01em; }
.bo-dash-card header p { margin: 3px 0 0; color: var(--muted); font-size: 11.5px; }

.bo-dash-bars { display: grid; gap: 8px; }
.bo-dash-bar-row { display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(0, 2fr) 32px; align-items: center; gap: 10px; font-size: 12px; }
.bo-dash-bar-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-dash-bar { display: block; height: 7px; border-radius: 999px; background: #eef2f6; overflow: hidden; }
.bo-dash-bar b { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: var(--cyan-dark); }
.bo-dash-bar.good b { background: var(--success); }
.bo-dash-bar.warning b { background: #d68910; }
.bo-dash-bar.critical b { background: var(--danger); }
.bo-dash-bar.unknown b { background: #b8c6d2; }
.bo-dash-bar-row em { font-style: normal; font-size: 12px; font-weight: 800; text-align: right; }

.bo-dash-alerts { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.bo-dash-alerts li {
  display: grid; gap: 2px;
  padding: 9px 12px; border-left: 3px solid #d68910; border-radius: 0 9px 9px 0;
  background: #fdf8ef; font-size: 12px; cursor: pointer;
}
.bo-dash-alerts li:hover { filter: brightness(.98); }
.bo-dash-alerts li.is-critical { border-left-color: var(--danger); background: #fdf1f0; }
.bo-dash-alerts li b { font-size: 12.5px; }
.bo-dash-alerts li span { color: #5b6d7e; }
.bo-dash-ok { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 13px; border-radius: 10px; color: var(--success); background: #eef9f4; font-size: 12.5px; font-weight: 650; }
.bo-dash-ok svg { width: 16px; height: 16px; flex: 0 0 auto; }
.bo-dash-empty { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.bo-dash-note { margin: 0; color: #5b6d7e; font-size: 12.5px; line-height: 1.55; }

.bo-dash-tickets { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bo-dash-tickets li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 4px 10px; padding: 9px 12px;
  border: 1px solid #e9eef3; border-radius: 10px; background: #fff; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.bo-dash-tickets li:hover { border-color: #b6dfe6; background: #f6fcfd; }
.bo-dash-tickets li strong { overflow: hidden; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.bo-dash-tickets li small { grid-column: 2; color: var(--muted); font-size: 11px; }
.bo-dash-tickets li .bo-ticket-ref { grid-row: span 2; }
.bo-dash-tickets.is-full li { grid-template-columns: auto minmax(0, 1fr) auto auto; }

.bo-dash-people { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.bo-dash-people li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.bo-dash-people li > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.bo-dash-people strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.bo-dash-people small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.bo-tab-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bo-tab-toolbar .bo-button { min-height: 38px; padding: 0 15px; font-size: 12.5px; }

.bo-parc-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.bo-parc-summary span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid #e7edf3; border-radius: 10px; background: #fff; color: var(--muted); font-size: 12px; }
.bo-parc-summary svg { width: 16px; height: 16px; color: var(--cyan-dark); }
.bo-parc-summary b { color: var(--ink); font-size: 14px; font-weight: 800; }

.bo-parc-table-wrap { overflow-x: auto; border: 1px solid #e7edf3; border-radius: 13px; background: #fff; }
.bo-parc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bo-parc-table th { padding: 11px 13px; border-bottom: 1.5px solid var(--line); color: var(--muted); font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; text-align: left; white-space: nowrap; }
.bo-parc-table td { padding: 11px 13px; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
.bo-parc-table tr:last-child td { border-bottom: 0; }
.bo-parc-table tbody tr:hover { background: #f8fbfc; }
.bo-parc-table td strong { display: block; font-size: 12.5px; font-weight: 650; }
.bo-parc-table td small { display: block; color: var(--muted); font-size: 11px; }
.bo-parc-table td.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px; }
.bo-parc-table td.right { text-align: right; white-space: nowrap; }
.bo-parc-table td.right .bo-row-actions { justify-content: flex-end; }
.bo-parc-table td small { margin-top: 1px; }
.bo-parc-type { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #eef2f6; color: #4a5c6d; font-size: 11px; font-weight: 700; }
.bo-parc-status { display: inline-block; margin-right: 5px; font-size: 12px; font-weight: 600; }
.bo-parc-muted { color: var(--muted); font-size: 11.5px; }
.bo-parc-health { margin-left: 7px; font-style: normal; font-size: 11.5px; font-weight: 750; color: var(--muted); }

.bo-report-months { display: flex; flex-wrap: wrap; gap: 6px; }
.bo-report-months span { padding: 5px 11px; border: 1px solid #e2e9ef; border-radius: 999px; background: #fff; color: #46596b; font-size: 11.5px; font-weight: 650; }

@media (max-width: 1320px) {
  .bo-detail-kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-view="companies"] .bo-master-detail { grid-template-columns: 290px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  body[data-view="companies"] .bo-master-detail { grid-template-columns: 1fr; }
  .bo-company-switcher { flex: 1 1 100%; max-width: none; }
  .bo-contract-banner { margin-left: 0; width: 100%; }
  .bo-company-row-stats .bo-contract-chip { display: none; }
}
@media (max-width: 700px) {
  .bo-detail-kpis.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-dash-grid { grid-template-columns: 1fr; }
  .bo-dash-body { padding: 13px; }
}

/* Filtre "demandes de <utilisateur>" au-dessus de la liste des tickets */
.bo-ticket-user-filter {
  display: flex; align-items: center; gap: 9px;
  margin: 10px 0 4px; padding: 9px 14px;
  border: 1px solid #cdeef2; border-radius: 10px; background: #eef8fa; color: #0d5c69;
  font-size: 13px;
}
.bo-ticket-user-filter svg { width: 16px; height: 16px; flex: 0 0 auto; }
.bo-ticket-user-filter span { flex: 1; }
.bo-ticket-user-filter b { font-weight: 750; }
.bo-ticket-user-filter button {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex: 0 0 auto;
  border: 0; border-radius: 7px; background: #fff; color: #0d5c69; cursor: pointer;
}
.bo-ticket-user-filter button:hover { background: #dff3f5; }
.bo-ticket-user-filter button svg { width: 13px; height: 13px; }

/* Raccourci vers la fiche depuis le detail d'un ticket */
.bo-ticket-machines { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.bo-ticket-machines > b { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bo-machine-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.bo-machine-chip:hover { border-color: var(--cyan-dark); background: #f2fbfc; }
.bo-machine-chip em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.bo-machine-chip svg { width: 15px; height: 15px; color: var(--cyan-dark); }

.bo-remote-support {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 15px;
  padding: 16px 20px; border-top: 1px solid #d8edf0; border-bottom: 1px solid #d8edf0;
  background: linear-gradient(135deg, #f1fbfc, #f8fdfe); color: var(--ink);
}
.bo-remote-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--cyan-dark), #2d71d7); }
.bo-remote-icon svg { width: 21px; height: 21px; }
.bo-remote-copy { min-width: 0; }
.bo-remote-copy small, .bo-remote-support > div > small { color: var(--cyan-dark); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.bo-remote-copy h3, .bo-remote-support > div > h3 { margin: 2px 0 3px; font-size: 14px; }
.bo-remote-copy p, .bo-remote-support > div > p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.bo-remote-support code { padding: 9px 11px; border: 1px solid #b8e1e6; border-radius: 9px; color: #0d5c69; background: #fff; font: 800 13px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.bo-remote-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.bo-remote-actions .bo-button { min-height: 36px; }
.bo-remote-support.is-missing { background: #fffaf1; border-color: #f1dfb8; }
.bo-remote-support.is-missing .bo-remote-icon { background: linear-gradient(135deg, #e2a445, #bd7920); }

.bo-fiche-shell { padding: 0; overflow: hidden; }
.bo-fiche-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--soft);
}

.bo-fiche-doc { background: #fff; color: var(--ink); }
.bo-fiche-cover { padding: 28px 38px 24px; color: #fff; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); }
.bo-fiche-cover-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.bo-fiche-brand img { width: 240px; padding: 8px 10px; }
.bo-fiche-company {
  margin: 0 0 3px;
  color: var(--cyan); font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
}
.bo-fiche-cover h1 { margin: 0; font-size: 31px; letter-spacing: -.025em; }
.bo-fiche-sub { margin: 6px 0 0; color: #b6cade; font-size: 13.5px; }
.bo-fiche-headline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); font-size: 12px; color: #cadcec; }
.bo-fiche-headline b { color: #fff; font-weight: 700; }

.bo-fiche-command-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 1.65fr 1.25fr;
  gap: 10px;
  margin-top: 16px;
}
.bo-command-card {
  min-width: 0;
  min-height: 132px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 13px;
  background: rgba(255, 255, 255, .075);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}
.bo-command-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bo-command-card-head > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #9bf1f8; background: rgba(64, 215, 229, .13); }
.bo-command-card-head svg { width: 15px; height: 15px; }
.bo-command-card-head small { flex: 1; color: #b9cddd; font-size: 9px; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; }
.bo-command-card-head b { min-width: 22px; padding: 3px 6px; border-radius: 999px; color: #dffbfe; background: rgba(255,255,255,.1); font-size: 9px; text-align: center; }
.bo-command-primary { display: block; overflow: hidden; color: #fff; font: 800 17px/1.25 Manrope, Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.bo-command-card > p { margin: 5px 0 0; overflow: hidden; color: #b7cad9; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.bo-command-reference { display: block; margin-top: 11px; color: #7de3ec; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; }
.bo-command-remote { border-color: rgba(67, 212, 225, .38); background: linear-gradient(145deg, rgba(13, 130, 149, .28), rgba(255,255,255,.07)); }
.bo-command-remote.is-warning { border-color: rgba(235, 170, 70, .42); background: linear-gradient(145deg, rgba(190, 116, 16, .2), rgba(255,255,255,.06)); }
.bo-command-remote-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.bo-command-remote button { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 9px; border: 1px solid rgba(125, 227, 236, .42); border-radius: 8px; color: #dffbfe; background: rgba(22, 180, 198, .13); font: 750 9.5px Inter, sans-serif; cursor: pointer; }
.bo-command-remote button:hover { background: rgba(22, 180, 198, .25); }
.bo-command-remote button.is-edit { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.11); }
.bo-command-remote button svg { width: 13px; height: 13px; }
.bo-command-licenses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bo-command-license { min-width: 0; display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.06); }
.bo-command-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #9aaabd; box-shadow: 0 0 0 3px rgba(154,170,189,.12); }
.bo-command-license.is-good .bo-command-status-dot { background: #3fd39d; box-shadow: 0 0 0 3px rgba(63,211,157,.13); }
.bo-command-license.is-warning .bo-command-status-dot { background: #f0b34f; box-shadow: 0 0 0 3px rgba(240,179,79,.13); }
.bo-command-license.is-critical .bo-command-status-dot { background: #ff7180; box-shadow: 0 0 0 3px rgba(255,113,128,.13); }
.bo-command-license div { min-width: 0; display: grid; gap: 2px; }
.bo-command-license strong { overflow: hidden; color: #fff; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.bo-command-license small { overflow: hidden; color: #aebfce; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.bo-command-more { grid-column: 1 / -1; color: #9fb4c4; font-size: 8.5px; }
.bo-command-empty { margin: 16px 0 0 !important; color: #aebfce !important; white-space: normal !important; }
.bo-command-alerts { display: grid; gap: 6px; }
.bo-command-alerts > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-left: 3px solid #e7a43d; border-radius: 6px; background: rgba(231,164,61,.1); }
.bo-command-alerts > div.is-critical { border-left-color: #ff7180; background: rgba(255,113,128,.1); }
.bo-command-alerts span { overflow: hidden; color: #d5e2eb; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.bo-command-alerts strong { min-width: 0; max-width: 58%; overflow: hidden; color: #fff; font-size: 10px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.bo-command-clear { display: grid; gap: 5px; padding-top: 8px; }
.bo-command-clear strong { color: #77e2b7; font-size: 12px; }
.bo-command-clear small { color: #aebfce; font-size: 9.5px; line-height: 1.45; }
.bo-command-clear.is-unknown strong { color: #f0c26f; }
.bo-command-alert-card.has-critical { border-color: rgba(255,113,128,.38); }
.bo-command-alert-card.has-warning { border-color: rgba(240,179,79,.38); }

.bo-state-badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 750; letter-spacing: .01em; background: #eef2f6; color: #4a5c6d; }
.bo-state-badge.is-good { background: #e3f6ee; color: var(--success); }
.bo-state-badge.is-warning { background: #fdf3e0; color: #a8690b; }
.bo-state-badge.is-critical { background: #fdeaea; color: var(--danger); }

.bo-fiche-section { padding: 24px 38px; border-top: 1px solid #eaeff4; }
.bo-fiche-section > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; font-size: 16.5px; letter-spacing: -.02em; }
.bo-fiche-section > h2 > span {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 28px; height: 24px; border-radius: 7px;
  background: #e2f7fa; color: #0b6b7a; font-size: 11px; font-weight: 900;
}

.bo-fiche-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1px; margin: 0; background: #eaeff4; border: 1px solid #eaeff4; border-radius: 10px; overflow: hidden; }
.bo-fiche-grid.two { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.bo-fiche-row { display: flex; flex-direction: column; gap: 2px; padding: 9px 13px; background: #fff; }
.bo-fiche-row dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.bo-fiche-row dd { margin: 0; font-size: 13.5px; font-weight: 600; word-break: break-word; }

.bo-fiche-table { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-size: 12.5px; }
.bo-fiche-table th { padding: 8px 10px; border-bottom: 1.5px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
.bo-fiche-table td { padding: 9px 10px; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
.bo-fiche-table td small { display: block; color: var(--muted); font-size: 11px; }
.bo-fiche-table td.gauge { white-space: nowrap; }
.bo-fiche-table tr:last-child td { border-bottom: 0; }

.bo-fiche-gauge { display: inline-block; width: 74px; height: 7px; margin-right: 8px; vertical-align: middle; border-radius: 999px; background: #e7edf3; overflow: hidden; }
.bo-fiche-gauge i { display: block; height: 100%; border-radius: 999px; background: var(--success); }
.bo-fiche-gauge.is-warning i { background: #e8a020; }
.bo-fiche-gauge.is-critical i { background: var(--danger); }
.bo-fiche-gauge.is-unknown i { background: #b8c6d2; }
.bo-fiche-table td.gauge b { font-size: 12px; font-weight: 700; }

.bo-fiche-empty { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.bo-fiche-inline { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }
.bo-fiche-inline b { color: var(--ink); }

.bo-fiche-alerts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bo-fiche-alerts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 13px; border-left: 3px solid #d68910; border-radius: 0 10px 10px 0; background: #fdf8ef; font-size: 13px; }
.bo-fiche-alerts li.is-critical { border-left-color: var(--danger); background: #fdf1f0; }
.bo-fiche-alerts li b { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.bo-fiche-note { margin-top: 14px; padding: 13px 15px; border-radius: 10px; background: var(--soft); }
.bo-fiche-note b { display: block; margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bo-fiche-note p { margin: 0; font-size: 13.5px; }

.bo-fiche-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 38px; border-top: 1px solid var(--line); background: var(--soft); }
.bo-fiche-footer strong { display: block; font-size: 13px; }
.bo-fiche-footer small { color: var(--muted); font-size: 11.5px; }

/* Modale d'edition : repeteurs peripheriques / abonnements */
.bo-modal-card.bo-modal-wide { width: min(960px, 100%); }
.bo-form-legend { grid-column: 1 / -1; margin: 12px 0 -2px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--cyan-dark); }
.bo-form-legend:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.bo-form-help { margin: -4px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.bo-rustdesk-field input { border-color: #74d3de; background: #f2fbfc; font: 750 14px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.bo-rustdesk-field input:focus { border-color: var(--cyan-dark); box-shadow: 0 0 0 3px rgba(34,197,216,.14); }

@media (max-width: 720px) {
  .bo-remote-support { grid-template-columns: auto minmax(0, 1fr); }
  .bo-remote-support code, .bo-remote-actions { grid-column: 1 / -1; }
  .bo-remote-actions { justify-content: stretch; }
  .bo-remote-actions .bo-button { flex: 1 1 180px; }
}
.bo-hint { padding: 11px 14px; border-radius: 10px; background: #eef8fa; color: #0d5c69; font-size: 12.5px; line-height: 1.55; }
.bo-import-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px dashed var(--cyan-dark); border-radius: 10px; background: #f2fbfc; font-size: 13px; }
.bo-import-preview span { color: var(--muted); font-size: 12px; }

.bo-repeater { display: flex; flex-direction: column; gap: 7px; }
.bo-repeater-row { display: grid; grid-template-columns: 1.1fr 1.3fr 1.3fr 1fr 1fr 1.3fr 34px; gap: 6px; align-items: center; }
.bo-repeater-row.is-subscription { grid-template-columns: 1.4fr 1.1fr 1.1fr 1fr 1.1fr 1.2fr 34px; }
.bo-repeater-row input, .bo-repeater-row select {
  width: 100%; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 13px;
}
.bo-repeater-row input:focus, .bo-repeater-row select:focus { outline: 2px solid rgba(34, 197, 216, .35); outline-offset: 1px; }
.bo-repeater-remove { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--danger); cursor: pointer; }
.bo-repeater-remove:hover { background: #fdeaea; }
.bo-repeater-remove svg { width: 15px; height: 15px; }
.bo-repeater-add { justify-self: start; }

@media (max-width: 1180px) {
  .bo-machine-layout { grid-template-columns: 250px minmax(0, 1fr); }
  .bo-fiche-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .bo-machine-layout { grid-template-columns: 1fr; }
  .bo-machine-layout .bo-list-panel { position: static; }
  .bo-machine-list { max-height: 420px; }
}

@media (max-width: 980px) {
  .bo-fiche-cover, .bo-fiche-section, .bo-fiche-footer { padding-left: 18px; padding-right: 18px; }
  .bo-fiche-cover h1 { font-size: 24px; }
  .bo-fiche-grid, .bo-fiche-grid.two { grid-template-columns: 1fr 1fr; }
  .bo-repeater-row, .bo-repeater-row.is-subscription { grid-template-columns: 1fr 1fr; }
  .bo-repeater-row { padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
}

@media (max-width: 620px) {
  .bo-fiche-grid, .bo-fiche-grid.two { grid-template-columns: 1fr; }
  body[data-view="machines"] .bo-content { padding-left: 8px; padding-right: 8px; }
  .bo-machine-selection-bar { align-items: stretch; flex-direction: column; gap: 8px; }
  .bo-machine-selection-bar button { justify-content: center; width: 100%; }
  .bo-machine-toolbar { align-items: stretch; }
  .bo-machine-toolbar .bo-search, .bo-machine-toolbar .bo-select { width: 100%; min-width: 0; }
  .bo-fiche-actions { padding: 10px; }
  .bo-fiche-actions .bo-button { width: 100%; }
  .bo-fiche-cover, .bo-fiche-section, .bo-fiche-footer { min-width: 0; }
  .bo-fiche-cover { padding: 22px 14px 20px; }
  .bo-fiche-cover-top { align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
  .bo-fiche-cover-top .bo-rep-brand { max-width: 100%; flex-wrap: wrap; }
  .bo-fiche-cover-top .bo-rep-brand img { width: min(205px, 100%); }
  .bo-fiche-cover-top .bo-rep-eyebrow { flex-basis: 100%; }
  .bo-fiche-cover h1 { max-width: 100%; font-size: 25px; overflow-wrap: anywhere; }
  .bo-fiche-sub { overflow-wrap: anywhere; }
  .bo-fiche-headline { display: grid; gap: 8px; }
  .bo-fiche-command-grid { grid-template-columns: 1fr; }
  .bo-fiche-section { padding: 20px 14px; overflow: hidden; }
  .bo-fiche-section > h2 { align-items: flex-start; font-size: 15px; }
  .bo-fiche-table { display: block; max-width: 100%; overflow-x: auto; font-size: 11.5px; -webkit-overflow-scrolling: touch; }
  .bo-fiche-table thead, .bo-fiche-table tbody { display: table; width: max-content; min-width: 100%; }
  .bo-fiche-table th, .bo-fiche-table td { min-width: 88px; }
  .bo-fiche-table th:first-child, .bo-fiche-table td:first-child { min-width: 150px; }
}

/* ─── Export PDF (impression du rapport uniquement) ─────────────────────────── */
@page { size: A4 portrait; margin: 12mm 10mm; }

/* Mise en page fixe utilisee par le telechargement PDF direct. */
.bo-report-doc.is-pdf-export {
  /* A4 is 794px wide at 96dpi; 8mm PDF margins leave 733px of usable width. */
  width: 733px;
  max-width: 733px;
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}
.bo-report-doc.is-pdf-export .bo-rep-cover {
  padding: 24px 30px 20px;
  color: var(--ink);
  background: #fff;
  border-bottom: 2px solid var(--navy);
}
.bo-report-doc.is-pdf-export .bo-rep-cover-top { margin-bottom: 18px; }
.bo-report-doc.is-pdf-export .bo-rep-brand img { width: 185px; padding: 0; }
.bo-report-doc.is-pdf-export .bo-rep-brand span { color: #fff; background: var(--navy); }
.bo-report-doc.is-pdf-export .bo-rep-eyebrow { color: var(--cyan-dark); }
.bo-report-doc.is-pdf-export .bo-rep-cover h1 { color: var(--navy); font-size: 29px; }
.bo-report-doc.is-pdf-export .bo-rep-period { margin: 5px 0 17px; color: #47596b; }
.bo-report-doc.is-pdf-export .bo-rep-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 14px; border-top-color: var(--line); }
.bo-report-doc.is-pdf-export .bo-rep-meta dt { color: #6b7c8c; }
.bo-report-doc.is-pdf-export .bo-rep-meta dd { color: var(--ink); }
.bo-report-doc.is-pdf-export .bo-rep-section { padding: 21px 30px; }
.bo-report-doc.is-pdf-export .bo-rep-section-lead,
.bo-report-doc.is-pdf-export .bo-rep-note,
.bo-report-doc.is-pdf-export .bo-rep-two-col,
.bo-report-doc.is-pdf-export .bo-rep-table,
.bo-report-doc.is-pdf-export .bo-rep-inline-note,
.bo-report-doc.is-pdf-export .bo-rep-steps li,
.bo-report-doc.is-pdf-export .is-pdf-keep,
.bo-report-doc.is-pdf-export img {
  break-inside: avoid;
  page-break-inside: avoid;
}
.bo-report-doc.is-pdf-export .bo-rep-section h2 {
  break-after: avoid;
  page-break-after: avoid;
}
.bo-report-doc.is-pdf-export .bo-rep-table thead { display: table-header-group; }
.bo-report-doc.is-pdf-export .bo-rep-table tfoot { display: table-footer-group; }
.bo-report-doc.is-pdf-export .bo-rep-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bo-report-doc.is-pdf-export .bo-rep-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bo-report-doc.is-pdf-export .bo-rep-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bo-report-doc.is-pdf-export .bo-rep-footer { padding: 17px 30px; }
.bo-report-doc.is-pdf-export .bo-rep-ticket,
.bo-report-doc.is-pdf-export .bo-rep-kpi,
.bo-report-doc.is-pdf-export .bo-rep-user-head,
.bo-report-doc.is-pdf-export tr { break-inside: avoid; page-break-inside: avoid; }

/* Conversation mobile : contraste renforce et bulles decalees par interlocuteur. */
@media (max-width: 650px) {
  .bo-timeline { gap: 12px; }
  .bo-timeline-item { width: 96%; padding: 14px 14px 13px 17px; }
  .bo-initial-message { padding: 13px 13px 14px 16px; }
  .bo-initial-message-head { align-items: flex-start; flex-direction: column; }
  .bo-ticket-detail-head .bo-initial-message p { font-size: 12.5px; }
  .bo-attachment, .bo-timeline-file { grid-template-columns: minmax(0, 1fr); }
  .bo-attachment-copy strong, .bo-timeline-file-name { overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
  .bo-timeline-item.is-client {
    justify-self: start;
    border-color: #e4aa43;
    border-left-color: #c86f00;
    background: #fff0cf;
    box-shadow: 0 5px 14px rgba(165, 96, 6, .1);
  }
  .bo-timeline-item.is-staff {
    justify-self: end;
    border-color: #69bdca;
    border-left-color: #047486;
    background: #dcf4f7;
    box-shadow: 0 5px 14px rgba(8, 112, 128, .1);
  }
  .bo-message-role { font-size: 9.5px; }
  .bo-timeline-item p { font-size: 12.5px; line-height: 1.65; }
  .bo-timeline-item.is-client .bo-timeline-audio { border-color: #dfaa4d; background: #ffe5ae; }
  .bo-timeline-item.is-staff .bo-timeline-audio { border-color: #67bdca; background: #c8edf2; }
  .bo-timeline-item.is-client audio::-webkit-media-controls-panel { background-color: #ffe0a0; }
  .bo-timeline-item.is-staff audio::-webkit-media-controls-panel { background-color: #bde8ee; }
  .bo-attachment-audio { min-width: 0; max-width: 100%; overflow: hidden; }
  .bo-attachment-audio audio { width: 100%; min-width: 0; }
  .bo-voice-idle, .bo-voice-recording, .bo-voice-preview { min-width: 0; max-width: 100%; }
  .bo-voice-recording {
    display: grid;
    grid-template-columns: 32px 8px auto minmax(30px, 1fr) 32px;
    gap: 7px;
    border-radius: 15px;
  }
  .bo-voice-wave { min-width: 0; }
  .bo-voice-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 8px;
    border-radius: 15px;
  }
  .bo-voice-preview .bo-voice-ready { min-width: 0; white-space: normal; }
  .bo-voice-preview .bo-voice-audio { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; }
  .bo-voice-preview .bo-voice-icon-btn { grid-column: 2; grid-row: 1; justify-self: end; }
  .bo-intervention-form .bo-button { width: 100%; }
}

@media print {
  html, body { min-height: 0; background: #fff; }
  body.is-printing-report { overflow: visible !important; }
  body.is-printing-report .bo-app { display: block; }
  body.is-printing-report .bo-sidebar,
  body.is-printing-report .bo-topbar,
  body.is-printing-report .bo-report-toolbar,
  body.is-printing-report .bo-toast-region,
  body.is-printing-report .bo-modal,
  body.is-printing-report .bo-loader { display: none !important; }
  body.is-printing-report .bo-main { display: block; margin: 0; padding: 0; }
  body.is-printing-report .bo-content { display: block; max-width: none; margin: 0; padding: 0; }
  body.is-printing-report .bo-report-shell { margin: 0; }
  body.is-printing-report .bo-view[data-view="reports"] { display: block; gap: 0; }

  .bo-report-doc {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .bo-rep-cover { padding: 0 0 14pt; color: var(--ink); background: #fff; border-bottom: 2pt solid var(--navy); }
  .bo-rep-cover-top { margin-bottom: 14pt; }
  .bo-rep-brand span { color: #fff; background: var(--navy); }
  .bo-rep-eyebrow { color: var(--cyan-dark); }
  .bo-rep-cover h1 { color: var(--navy); font-size: 22pt; }
  .bo-rep-period { margin: 4pt 0 12pt; color: #47596b; font-size: 11pt; }
  .bo-rep-meta { padding-top: 10pt; border-top: .5pt solid var(--line); }
  .bo-rep-meta dt { color: #6b7c8c; }
  .bo-rep-meta dd { color: var(--ink); }

  .bo-rep-section { padding: 12pt 0; border-top: .5pt solid var(--line); }
  .bo-rep-section h2 { font-size: 13pt; }
  .bo-rep-kpi { padding: 8pt; background: #f6f9fb; }
  .bo-rep-kpi strong { font-size: 15pt; }
  .bo-rep-footer { padding: 10pt 0 0; background: #fff; border-top: .5pt solid var(--line); }

  /* Ruptures de page propres */
  .bo-rep-section, .bo-rep-user, .bo-rep-ticket, .bo-rep-kpi, .bo-rep-steps li, tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .bo-rep-section h2, .bo-rep-section-lead, .bo-rep-user-head {
    break-after: avoid;
    page-break-after: avoid;
  }
  .bo-rep-table thead { display: table-header-group; }
  .bo-rep-table tfoot { display: table-footer-group; }
  .bo-rep-footer { break-before: avoid; page-break-before: avoid; }

  /* Impression de la fiche machine */
  body.is-printing-fiche { overflow: visible !important; }
  body.is-printing-fiche .bo-app { display: block; }
  body.is-printing-fiche .bo-sidebar,
  body.is-printing-fiche .bo-topbar,
  body.is-printing-fiche .bo-machine-toolbar,
  body.is-printing-fiche .bo-machine-kpis,
  body.is-printing-fiche .bo-list-panel,
  body.is-printing-fiche .bo-fiche-actions,
  body.is-printing-fiche .bo-toast-region,
  body.is-printing-fiche .bo-modal,
  body.is-printing-fiche .bo-loader { display: none !important; }
  body.is-printing-fiche .bo-main { display: block; margin: 0; padding: 0; }
  body.is-printing-fiche .bo-content { display: block; max-width: none; margin: 0; padding: 0; }
  body.is-printing-fiche .bo-view[data-view="machines"] { display: block; gap: 0; }
  body.is-printing-fiche .bo-machine-layout { display: block; }
  body.is-printing-fiche .bo-fiche-shell { border: 0; border-radius: 0; box-shadow: none; }

  .bo-fiche-doc {
    border: 0; border-radius: 0; box-shadow: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .bo-fiche-cover { padding: 0 0 12pt; color: var(--ink); background: #fff; border-bottom: 2pt solid var(--navy); }
  .bo-fiche-cover-top { margin-bottom: 12pt; }
  .bo-fiche-company { color: var(--cyan-dark); font-size: 12pt; }
  .bo-fiche-cover h1 { color: var(--navy); font-size: 20pt; }
  .bo-fiche-sub { color: #47596b; font-size: 10.5pt; }
  .bo-fiche-headline { color: #47596b; border-top: .5pt solid var(--line); }
  .bo-fiche-headline b { color: var(--ink); }
  .bo-fiche-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6pt; margin-top: 10pt; }
  .bo-command-card { min-height: 0; padding: 8pt; border-color: var(--line); color: var(--ink); background: #f6f9fb; box-shadow: none; }
  .bo-command-card-head { margin-bottom: 6pt; }
  .bo-command-card-head > span { color: var(--cyan-dark); background: #e3f6f8; }
  .bo-command-card-head small, .bo-command-card > p, .bo-command-license small, .bo-command-more, .bo-command-clear small { color: #5f7182; }
  .bo-command-card-head b { color: var(--navy); background: #e8eef3; }
  .bo-command-primary, .bo-command-license strong, .bo-command-alerts strong { color: var(--ink); }
  .bo-command-reference { color: var(--cyan-dark); }
  .bo-command-remote button { display: none; }
  .bo-command-license { border-color: var(--line); background: #fff; }
  .bo-command-alerts span { color: #425669; }
  .bo-command-clear strong { color: var(--success); }
  .bo-fiche-section { padding: 11pt 0; border-top: .5pt solid var(--line); }
  .bo-fiche-section > h2 { font-size: 12.5pt; }
  .bo-fiche-footer { padding: 10pt 0 0; background: #fff; border-top: .5pt solid var(--line); }
  .bo-fiche-table { font-size: 8.5pt; }
  .bo-fiche-row dd { font-size: 9.5pt; }
  .bo-fiche-section, .bo-fiche-row, .bo-fiche-alerts li, .bo-fiche-note { break-inside: avoid; page-break-inside: avoid; }
  .bo-fiche-section > h2 { break-after: avoid; page-break-after: avoid; }
  .bo-fiche-table thead { display: table-header-group; }
  .bo-fiche-footer { break-before: avoid; page-break-before: avoid; }
}