* {
  box-sizing:border-box
}
body {
  margin:0;
  font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;
  background:#f5f7fb;
  color:#162033
}
button,input,select,textarea {
  font:inherit
}
.hidden {
  display:none!important
}
.center {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px
}
.auth-card {
  width:min(430px,100%);
  background:white;
  border:1px solid #e4e8f0;
  border-radius:20px;
  padding:28px;
  box-shadow:0 20px 50px #20304a16
}
.brand {
  font-size:22px;
  font-weight:700;
  margin-bottom:22px
}
.brand b {
  color:#3768f5
}
.auth-card form {
  display:grid;
  gap:12px
}
.auth-card input,.field input,.field select,.field textarea {
  width:100%;
  border:1px solid #d9dfeb;
  border-radius:11px;
  padding:11px 12px;
  background:#fff
}
.auth-card button,.primary {
  border:0;
  background:#3768f5;
  color:#fff;
  border-radius:11px;
  padding:11px 14px;
  font-weight:650;
  cursor:pointer
}
.msg {
  margin-top:12px;
  color:#b42318
}
#app {
  min-height:100vh;
  display:grid;
  grid-template-columns:225px 1fr
}
aside {
  background:#111827;
  color:#e5e7eb;
  padding:22px 16px;
  display:flex;
  flex-direction:column;
  min-height:100vh
}
aside .brand {
  color:white
}
nav {
  display:grid;
  gap:6px
}
nav button,#logoutBtn {
  background:transparent;
  border:0;
  color:inherit;
  text-align:left;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer
}
nav button:hover,nav button.active {
  background:#ffffff12;
  color:white
}
.sidebar-bottom {
  margin-top:auto;
  border-top:1px solid #ffffff18;
  padding-top:14px;
  display:grid;
  gap:6px;
  font-size:12px
}
main {
  min-width:0
}
header {
  height:72px;
  background:white;
  border-bottom:1px solid #e5e9f0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px
}
h1 {
  font-size:21px;
  margin:0
}
.role {
  background:#eef3ff;
  color:#2f5bd3;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px
}
#content {
  padding:26px
}
.cards {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px
}
.card {
  background:white;
  border:1px solid #e5e9f0;
  border-radius:15px;
  padding:18px
}
.card .kpi {
  font-size:27px;
  font-weight:750
}
.muted {
  color:#687387
}
.toolbar {
  display:flex;
  gap:10px;
  justify-content:space-between;
  margin-bottom:14px
}
.toolbar input {
  width:min(340px,55vw);
  border:1px solid #d9dfeb;
  border-radius:10px;
  padding:9px 11px
}
.table-wrap {
  overflow:auto;
  background:white;
  border:1px solid #e5e9f0;
  border-radius:15px
}
table {
  width:100%;
  border-collapse:collapse;
  min-width:700px
}
th,td {
  padding:12px 14px;
  border-bottom:1px solid #edf0f5;
  text-align:left
}
th {
  font-size:12px;
  color:#687387;
  background:#fafbfc
}
.pill {
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  background:#f0f3f8;
  font-size:12px
}
.modal {
  position:fixed;
  inset:0;
  background:#11182780;
  display:grid;
  place-items:center;
  padding:20px
}
.modal-card {
  background:white;
  border-radius:16px;
  padding:20px;
  width:min(560px,100%);
  max-height:90vh;
  overflow:auto
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.field {
  display:grid;
  gap:5px
}
.field.full {
  grid-column:1/-1
}
.actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px
}
.secondary {
  border:1px solid #d9dfeb;
  background:white;
  border-radius:10px;
  padding:10px 13px;
  cursor:pointer
}
@media(max-width:900px) {
  #app {
    grid-template-columns:1fr
  }
  aside {
    min-height:auto;
    position:sticky;
    top:0;
    z-index:3;
    padding:12px
  }
  aside .brand,.sidebar-bottom {
    display:none
  }
  nav {
    grid-template-columns:repeat(6,auto);
    overflow:auto
  }
  .cards {
    grid-template-columns:repeat(2,1fr)
  }
  header {
    padding:0 16px
  }
  #content {
    padding:16px
  }
}
@media(max-width:560px) {
  .cards {
    grid-template-columns:1fr
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .field.full {
    grid-column:auto
  }
}
.list-row {
  padding:9px 0;
  border-bottom:1px solid #edf0f5
}
.client-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}
.client-card {
  background:#fff;
  border:1px solid #e5e9f0;
  border-radius:15px;
  padding:17px;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  color:inherit
}
.client-card:hover {
  border-color:#b9c8f8;
  box-shadow:0 8px 24px #20304a0d
}
.hub-head {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px
}
.hub-head h2 {
  margin:0
}
.hub-actions {
  margin-left:auto
}
.hub-layout {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:14px;
  margin:14px 0
}
.quick {
  display:grid;
  gap:8px;
  align-content:start
}
.quick h3 {
  margin-top:0
}
.quick button {
  text-align:left
}
.info-line {
  padding:9px 0;
  border-bottom:1px solid #edf0f5
}
.info-line:last-child {
  border-bottom:0
}
.hub-sections {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.hub-section h3 {
  margin:0
}
.section-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px
}
.mini-row {
  padding:11px 0;
  border-bottom:1px solid #edf0f5;
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center
}
.mini-row:last-child {
  border-bottom:0
}
.mini-row>div:first-child {
  display:flex;
  gap:14px;
  flex-wrap:wrap
}
.mini-row span b {
  font-size:11px;
  color:#687387;
  margin-right:4px
}
.row-actions {
  display:flex;
  gap:6px
}
.small {
  padding:6px 8px;
  font-size:12px
}
.hub-kpis {
  margin-top:4px
}
@media(max-width:1100px) {
  .client-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .hub-sections {
    grid-template-columns:1fr
  }
}
@media(max-width:700px) {
  .client-grid,.hub-layout {
    grid-template-columns:1fr
  }
  .hub-head {
    align-items:flex-start;
    flex-wrap:wrap
  }
  .hub-actions {
    margin-left:0
  }
  .mini-row {
    align-items:flex-start;
    flex-direction:column
  }
}
.intervention-modal {
  width:min(820px,100%)
}
.modal-title {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:14px
}
.modal-title h2 {
  margin:0
}
.timer-box {
  margin-top:14px;
  border:1px solid #dbe3f1;
  background:#f8faff;
  border-radius:14px;
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px
}
.timer-box strong {
  display:block;
  font-size:24px;
  margin-top:3px
}
.timer-actions {
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.report-modal {
  align-items:flex-start;
  overflow:auto
}
.report-shell {
  width:min(900px,100%);
  margin:20px auto
}
.report-tools {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-bottom:10px
}
.report-page {
  background:#fff;
  min-height:1120px;
  padding:48px;
  border-radius:8px;
  box-shadow:0 20px 60px #1118272b
}
.report-head {
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-bottom:22px;
  border-bottom:2px solid #162033
}
.report-head h2 {
  margin:0 0 5px
}
.report-ref {
  text-align:right
}
.report-client,.report-block {
  padding:18px 0;
  border-bottom:1px solid #e5e9f0
}
.report-client h3,.report-block h3 {
  margin:0 0 8px;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.04em
}
.report-summary {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:22px
}
.report-summary>div {
  background:#f5f7fb;
  border-radius:10px;
  padding:12px
}
.report-summary span {
  display:block;
  color:#687387;
  font-size:12px
}
.report-page footer {
  margin-top:38px;
  padding-top:12px;
  border-top:1px solid #e5e9f0;
  color:#687387;
  font-size:12px
}
@media(max-width:650px) {
  .timer-box,.report-head {
    align-items:flex-start;
    flex-direction:column
  }
  .report-ref {
    text-align:left
  }
  .report-summary {
    grid-template-columns:1fr 1fr
  }
  .report-page {
    padding:24px;
    min-height:auto
  }
}
@media print {
  body.printing-report #app,body.printing-report #auth,body.printing-report .report-tools {
    display:none!important
  }
  body.printing-report .modal.report-modal {
    position:static;
    background:white;
    padding:0;
    display:block
  }
  body.printing-report .report-shell {
    width:100%;
    margin:0
  }
  body.printing-report .report-page {
    box-shadow:none;
    border-radius:0;
    min-height:0;
    padding:12mm
  }
}
/* Diagnostic SaaS */ .diag-shell {
  display:grid;
  grid-template-columns:320px 1fr;
  gap:16px
}
.diag-list {
  display:flex;
  flex-direction:column;
  gap:8px
}
.diag-scenario {
  border:1px solid var(--border,#dfe5ec);
  background:#fff;
  border-radius:12px;
  padding:12px;
  text-align:left;
  cursor:pointer
}
.diag-scenario:hover,.diag-scenario.active {
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  border-color:#9fb9d4
}
.diag-scenario strong {
  display:block;
  margin-bottom:4px
}
.diag-question {
  padding:14px;
  border:1px solid #e3e8ee;
  border-radius:12px;
  margin:10px 0
}
.diag-options {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px
}
.diag-options button {
  min-width:92px
}
.diag-result {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}
.diag-result .card {
  margin:0
}
.diag-checks {
  display:grid;
  gap:8px
}
.diag-checks label {
  display:flex;
  gap:8px;
  align-items:flex-start
}
.confidence {
  font-size:30px;
  font-weight:800
}
.diag-progress {
  height:8px;
  background:#eef2f6;
  border-radius:999px;
  overflow:hidden;
  margin:8px 0 16px
}
.diag-progress span {
  display:block;
  height:100%;
  background:#4e7fae
}
.severity-high {
  font-weight:700
}
.diag-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px
}
@media(max-width:900px) {
  .diag-shell {
    grid-template-columns:1fr
  }
  .diag-result {
    grid-template-columns:1fr
  }
}
.ticket-kpis {
  margin-bottom:16px
}
.ticket-queue {
  display:grid;
  gap:10px
}
.ticket-row {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  gap:18px;
  border:1px solid var(--border,#dfe5ec);
  cursor:pointer
}
.ticket-row:hover {
  transform:translateY(-1px)
}
.ticket-late {
  border-left:4px solid #b42318
}
.ticket-main {
  display:grid;
  gap:5px
}
.ticket-meta {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end
}
.ticket-detail {
  width:min(1180px,95vw);
  max-height:92vh;
  overflow:auto
}
.ticket-detail-grid {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
  gap:16px
}
.ticket-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.ticket-comments {
  display:grid;
  gap:10px;
  margin-bottom:12px
}
.ticket-comment {
  padding:10px 0;
  border-bottom:1px solid var(--border,#e6eaf0)
}
.ticket-comment .pill {
  margin-left:8px
}
.ticket-comment+form {
  margin-top:10px
}
#commentForm {
  display:grid;
  gap:8px
}
#commentForm textarea {
  min-height:90px
}
.timeline {
  display:grid;
  gap:12px
}
.timeline-item {
  border-left:2px solid var(--border,#dfe5ec);
  padding-left:12px
}
.danger,.pill.danger {
  background:#fee4e2;
  color:#b42318
}
.text-danger {
  color:#b42318!important
}
@media(max-width:850px) {
  .ticket-detail-grid {
    grid-template-columns:1fr
  }
  .ticket-row {
    align-items:flex-start;
    flex-direction:column
  }
  .ticket-meta {
    justify-content:flex-start
  }
}
/* Pilotage & analytics */ .analytics-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px
}
.analytics-head h2 {
  margin:0 0 3px
}
.period-switch {
  display:flex;
  gap:6px
}
.analytics-kpis {
  margin-top:14px
}
.kpi-sub {
  font-size:12px;
  color:#687387;
  margin-top:3px
}
.analytics-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:14px
}
.analytics-grid .span-2 {
  grid-column:span 2
}
.trend-chart {
  height:220px;
  display:flex;
  align-items:flex-end;
  gap:3px;
  padding:14px 0 0;
  overflow-x:auto;
  border-bottom:1px solid #e5e9f0
}
.trend-col {
  height:100%;
  min-width:18px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  gap:5px
}
.trend-col small {
  font-size:9px;
  color:#7a8496;
  writing-mode:vertical-rl;
  max-height:34px
}
.trend-stack {
  width:75%;
  min-height:2px;
  border-radius:5px 5px 1px 1px;
  overflow:hidden;
  display:flex;
  flex-direction:column-reverse;
  background:#e9eef8
}
.trend-ticket {
  background:#adc0f5
}
.trend-int {
  background:#3768f5
}
.chart-legend {
  display:flex;
  gap:18px;
  font-size:12px;
  color:#687387;
  margin-top:9px
}
.chart-legend span:before {
  content:'';
  display:inline-block;
  width:8px;
  height:8px;
  background:#adc0f5;
  border-radius:2px;
  margin-right:5px
}
.chart-legend span+span:before {
  background:#3768f5
}
.finance-line {
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid #edf0f5
}
.metric-bar {
  height:7px;
  background:#edf1f7;
  border-radius:999px;
  overflow:hidden;
  margin:8px 0
}
.metric-bar span {
  display:block;
  height:100%;
  background:#3768f5;
  border-radius:inherit
}
.bar-row {
  margin:12px 0
}
.bar-row>div:first-child {
  display:flex;
  justify-content:space-between;
  gap:10px
}
.team-performance {
  display:grid;
  gap:13px
}
.perf-row {
  display:grid;
  grid-template-columns:minmax(240px,1.4fr) minmax(140px,1fr);
  align-items:center;
  gap:14px
}
.perf-name {
  display:grid;
  gap:3px
}
.perf-name .muted {
  font-size:12px
}
@media(max-width:1100px) {
  .analytics-grid {
    grid-template-columns:1fr 1fr
  }
  .analytics-grid .span-2 {
    grid-column:span 2
  }
}
@media(max-width:700px) {
  .analytics-head {
    align-items:flex-start;
    flex-direction:column
  }
  .analytics-grid {
    grid-template-columns:1fr
  }
  .analytics-grid .span-2 {
    grid-column:auto
  }
  .perf-row {
    grid-template-columns:1fr
  }
  .trend-col {
    min-width:20px
  }
  .period-switch {
    width:100%
  }
  .period-switch button {
    flex:1
  }
}
/* Abonnements */ .billing-hero {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px
}
.billing-price {
  font-size:2rem;
  font-weight:800
}
.billing-price small,.plan-card h2 small {
  font-size:.9rem;
  font-weight:500;
  color:var(--muted)
}
.usage-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px
}
.usage-grid .card {
  display:grid;
  gap:8px
}
.plans-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px
}
.plan-card {
  display:flex;
  flex-direction:column;
  gap:14px
}
.plan-card.current-plan {
  outline:2px solid var(--primary,#2563eb)
}
.plan-card ul {
  margin:0;
  padding-left:20px;
  display:grid;
  gap:8px;
  flex:1
}
.plan-top {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start
}
.billing-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px
}
.warning-box {
  margin-top:14px
}
.dev-plans {
  margin-top:12px
}
@media(max-width:900px) {
  .plans-grid {
    grid-template-columns:1fr
  }
  .usage-grid {
    grid-template-columns:1fr
  }
  .billing-hero,.billing-actions {
    align-items:flex-start;
    flex-direction:column
  }
}
/* === Finitions produit === */ :root {
  --primary:#3568e8;
  --primary2:#234fc4;
  --ink:#172033;
  --muted:#68758a;
  --border:#e3e8f0;
  --surface:#fff;
  --bg:#f4f6fa;
  --success:#16835f;
  --warn:#b26a00;
  --danger:#b42318;
  --shadow:0 10px 30px rgba(23,32,51,.08)
}
html {
  scroll-behavior:smooth
}
body {
  background:var(--bg);
  color:var(--ink)
}
button {
  transition:.16s ease
}
button:active {
  transform:translateY(1px)
}
input:focus,select:focus,textarea:focus {
  outline:3px solid rgba(53,104,232,.12);
  border-color:#8ba7ef!important
}
.auth-screen {
  background:radial-gradient(circle at 25% 15%,#eaf0ff 0,transparent 34%),linear-gradient(145deg,#f7f9fd,#edf2fb)
}
.auth-card {
  border:0;
  box-shadow:0 28px 75px rgba(30,48,85,.14)
}
.auth-logo,.brand-wrap {
  display:flex;
  align-items:center;
  gap:11px
}
.auth-logo {
  margin-bottom:24px
}
.auth-logo .brand {
  margin:0
}
.auth-logo small {
  color:var(--muted)
}
.logo-mark {
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#4778ef,#2758d5);
  color:white;
  font-weight:850;
  box-shadow:0 7px 17px rgba(53,104,232,.25)
}
.auth-card label {
  display:grid;
  gap:6px;
  font-size:12px;
  font-weight:650;
  color:#475569
}
.brand-wrap {
  padding:2px 8px 20px
}
.brand-wrap .brand {
  margin:0
}
aside {
  background:linear-gradient(180deg,#111827,#141d2d);
  width:auto
}
nav button {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:550
}
nav button span {
  white-space:nowrap
}
.nav-sep {
  height:1px;
  background:#ffffff14;
  margin:8px 4px
}
.workspace-chip {
  background:#ffffff0b;
  border:1px solid #ffffff12;
  border-radius:12px;
  padding:10px;
  display:grid;
  gap:2px
}
.workspace-chip span {
  opacity:.7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.sidebar-bottom #logoutBtn {
  opacity:.75
}
header {
  position:sticky;
  top:0;
  z-index:20;
  height:78px;
  box-shadow:0 1px 0 rgba(15,23,42,.03)
}
.page-subtitle {
  font-size:12px;
  color:var(--muted);
  margin-top:3px
}
.top-actions {
  display:flex;
  align-items:center;
  gap:8px
}
.icon-btn {
  width:40px;
  height:40px;
  border-radius:11px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-size:18px;
  display:grid;
  place-items:center;
  position:relative
}
.icon-btn:hover,.secondary:hover {
  border-color:#b9c7e7;
  background:#f8faff
}
.quick-create {
  padding:10px 14px
}
.notif-badge {
  position:absolute;
  right:-4px;
  top:-5px;
  min-width:19px;
  height:19px;
  border-radius:999px;
  background:#d92d20;
  color:#fff;
  border:2px solid #fff;
  font-size:10px;
  display:grid;
  place-items:center;
  padding:0 4px
}
.card,.table-wrap,.client-card {
  box-shadow:0 1px 2px rgba(16,24,40,.025)
}
.card:hover {
  border-color:#d8dfeb
}
.kpi {
  letter-spacing:-.02em
}
.empty-state {
  text-align:center;
  padding:38px 18px;
  color:var(--muted)
}
.empty-state strong {
  display:block;
  color:var(--ink);
  font-size:15px;
  margin-bottom:5px
}
.modal {
  backdrop-filter:blur(4px);
  z-index:100
}
.modal-card {
  box-shadow:0 24px 75px rgba(15,23,42,.25)
}
.search-modal {
  width:min(720px,100%);
  padding:0;
  overflow:hidden
}
.search-box {
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--border);
  padding:12px 16px;
  gap:10px
}
.search-box input {
  border:0!important;
  outline:0!important;
  font-size:17px;
  padding:8px;
  width:100%
}
.search-results {
  max-height:60vh;
  overflow:auto;
  padding:8px
}
.search-result {
  width:100%;
  border:0;
  background:#fff;
  border-radius:10px;
  padding:11px 12px;
  text-align:left;
  display:flex;
  justify-content:space-between;
  gap:14px;
  cursor:pointer
}
.search-result:hover {
  background:#f4f7fd
}
.search-result small {
  color:var(--muted)
}
.quick-menu {
  position:fixed;
  right:28px;
  top:70px;
  z-index:110;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:7px;
  width:230px
}
.quick-menu button {
  width:100%;
  border:0;
  background:transparent;
  padding:10px;
  border-radius:9px;
  text-align:left;
  cursor:pointer
}
.quick-menu button:hover {
  background:#f4f7fd
}
.notif-panel {
  position:fixed;
  right:18px;
  top:70px;
  z-index:110;
  width:min(390px,calc(100vw - 24px));
  max-height:72vh;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden
}
.panel-head {
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between
}
.notif-list {
  max-height:60vh;
  overflow:auto
}
.notif-item {
  padding:12px 16px;
  border-bottom:1px solid #eef1f5;
  display:grid;
  gap:3px
}
.notif-item b {
  font-size:13px
}
.notif-item small {
  color:var(--muted)
}
.notif-item.danger {
  background:#fff8f7
}
.notif-item.warn {
  background:#fffaf0
}
.toast-root {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:999;
  display:grid;
  gap:8px
}
.toast {
  background:#172033;
  color:#fff;
  border-radius:11px;
  padding:11px 14px;
  box-shadow:var(--shadow);
  animation:toastIn .2s ease;
  max-width:370px
}
.toast.success {
  background:#176b51
}
.toast.error {
  background:#9f241c
}
@keyframes toastIn {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.settings-layout {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
  gap:15px
}
.settings-section {
  display:grid;
  gap:13px
}
.settings-section h3 {
  margin:0
}
.settings-preview {
  position:sticky;
  top:96px
}
.brand-preview {
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px;
  background:#fff;
  min-height:260px
}
.brand-preview .logo-mark {
  margin-bottom:20px
}
.settings-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px
}
.status-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  background:#22a06b;
  margin-right:5px
}
.kbd {
  font:11px ui-monospace,monospace;
  border:1px solid #d6dce7;
  border-bottom-width:2px;
  border-radius:5px;
  padding:2px 5px;
  background:#fff;
  color:#667085
}
@media(max-width:900px) {
  header {
    position:relative
  }
  .top-actions .quick-create {
    font-size:0;
    width:40px;
    padding:0
  }
  .top-actions .quick-create::first-letter {
    font-size:18px
  }
  .settings-layout {
    grid-template-columns:1fr
  }
  .settings-preview {
    position:static
  }
  .quick-menu {
    right:12px
  }
  .page-subtitle {
    display:none
  }
}
@media(max-width:560px) {
  #content {
    padding:12px
  }
  .top-actions {
    gap:5px
  }
  .role {
    display:none
  }
  .icon-btn,.quick-create {
    width:38px;
    height:38px
  }
  .auth-card {
    padding:22px
  }
}
html[data-compact="compact"] #content {
  padding:18px
}
html[data-compact="compact"] .card {
  padding:13px
}
html[data-compact="compact"] th,html[data-compact="compact"] td {
  padding:9px 11px
}
html[data-compact="compact"] .list-row {
  padding:6px 0
}
/* Onboarding */ .onboarding-card {
  max-width:760px;
  padding:0;
  overflow:hidden
}
.onboarding-card>*:not(.onboarding-progress) {
  margin-left:30px;
  margin-right:30px
}
.onboarding-progress {
  height:5px;
  background:#e5e7eb
}
.onboarding-progress i,.progress-track i {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#2563eb,#14b8a6);
  border-radius:999px;
  transition:width .25s ease
}
.onboarding-hero {
  display:flex;
  gap:22px;
  align-items:flex-start;
  padding-top:30px
}
.logo-mark.big {
  width:58px;
  height:58px;
  font-size:24px;
  flex:0 0 auto
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:11px;
  font-weight:800;
  color:#2563eb
}
.onboarding-hero h2,.onboarding-step-head h2 {
  margin:5px 0 8px;
  font-size:28px
}
.onboarding-hero p,.onboarding-step-head p {
  color:#64748b;
  line-height:1.55
}
.onboarding-benefits {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:24px
}
.onboarding-benefits div {
  padding:14px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px
}
.onboarding-benefits b {
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#e0e7ff;
  color:#3730a3;
  margin-right:8px
}
.onboarding-step-head {
  padding-top:28px
}
.choice-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px
}
.choice-card {
  text-align:left;
  border:1px solid #dbe3ee;
  background:#fff;
  border-radius:16px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:inherit
}
.choice-card:not(.passive):hover {
  border-color:#2563eb;
  box-shadow:0 8px 24px rgba(37,99,235,.08)
}
.choice-card span {
  color:#64748b;
  line-height:1.45
}
.choice-card.passive {
  background:#f8fafc
}
.success-note {
  margin-top:14px;
  padding:12px 14px;
  background:#ecfdf5;
  color:#047857;
  border-radius:12px
}
.onboarding-footer {
  display:flex;
  gap:10px;
  align-items:center;
  border-top:1px solid #e5e7eb;
  margin-top:28px!important;
  padding:18px 0
}
.onboarding-footer .spacer {
  flex:1
}
.progress-card {
  padding:16px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px
}
.progress-row {
  display:flex;
  justify-content:space-between;
  margin-bottom:10px
}
.progress-track {
  height:8px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden
}
.setup-checklist {
  display:grid;
  gap:8px;
  margin-top:14px
}
.check-row {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:11px 12px;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:12px
}
.check-row span:nth-child(2) {
  display:flex;
  flex-direction:column
}
.check-row small {
  color:#64748b
}
.check-row.done {
  background:#f0fdf4;
  border-color:#bbf7d0
}
.check-icon {
  font-size:18px;
  color:#2563eb
}
.tour-toggle {
  display:flex;
  gap:9px;
  align-items:center;
  margin-top:18px;
  color:#475569
}
.tour-shade {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.50);
  z-index:3000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px
}
.tour-popover {
  background:#fff;
  border-radius:18px;
  padding:24px;
  max-width:430px;
  box-shadow:0 25px 80px rgba(15,23,42,.3)
}
.tour-popover h3 {
  margin:6px 0
}
.tour-popover p {
  color:#64748b;
  line-height:1.5
}
.tour-highlight {
  position:relative;
  z-index:3001!important;
  background:#fff!important;
  color:#111827!important;
  box-shadow:0 0 0 4px rgba(255,255,255,.95),0 0 0 8px rgba(37,99,235,.7)!important
}
.onboarding-settings .actions {
  justify-content:flex-start
}
@media(max-width:700px) {
  .onboarding-benefits,.choice-cards {
    grid-template-columns:1fr
  }
  .onboarding-card>*:not(.onboarding-progress) {
    margin-left:20px;
    margin-right:20px
  }
  .onboarding-hero h2,.onboarding-step-head h2 {
    font-size:23px
  }
}
/* Documents professionnels */ .document-modal {
  align-items:flex-start;
  overflow:auto;
  padding:28px
}
.document-shell {
  width:min(980px,96vw);
  margin:auto
}
.document-page {
  --doc-accent:#2563eb;
  width:210mm;
  min-height:297mm;
  max-width:100%;
  margin:0 auto;
  background:#fff;
  color:#172033;
  padding:17mm 16mm;
  box-shadow:0 18px 60px rgba(15,23,42,.18);
  font-size:12px
}
.doc-header {
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-bottom:18px;
  border-bottom:3px solid var(--doc-accent);
  margin-bottom:22px
}
.doc-brand {
  display:flex;
  gap:14px;
  align-items:flex-start
}
.doc-brand h2 {
  font-size:22px;
  margin:0 0 5px;
  color:#111827
}
.doc-logo {
  width:64px;
  height:64px;
  object-fit:contain
}
.doc-logo-placeholder {
  width:58px;
  height:58px;
  border-radius:16px;
  background:var(--doc-accent);
  color:#fff;
  font-size:26px;
  font-weight:800;
  display:grid;
  place-items:center
}
.doc-ref {
  text-align:right
}
.doc-ref strong {
  display:block;
  color:var(--doc-accent);
  font-size:18px;
  letter-spacing:.04em
}
.doc-client {
  margin:22px 0;
  padding:16px;
  background:#f8fafc;
  border-left:4px solid var(--doc-accent)
}
.doc-client h3 {
  margin:4px 0;
  font-size:17px
}
.doc-kicker {
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:10px;
  color:#64748b
}
.doc-machine {
  padding:7px 0;
  border-bottom:1px solid #e5e7eb
}
.doc-block {
  margin:18px 0
}
.doc-block h3 {
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--doc-accent);
  margin:0 0 6px
}
.doc-summary {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:24px 0
}
.doc-summary>div {
  padding:12px;
  background:#f8fafc;
  border-radius:8px
}
.doc-summary span {
  display:block;
  color:#64748b;
  font-size:10px;
  text-transform:uppercase
}
.doc-lines {
  margin:24px 0;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden
}
.doc-line {
  display:grid;
  grid-template-columns:1fr 150px;
  gap:15px;
  padding:14px 16px;
  border-top:1px solid #e5e7eb
}
.doc-line:first-child {
  border-top:0
}
.doc-line-head {
  background:#f8fafc;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  color:#64748b
}
.doc-line span:last-child,.doc-line strong {
  text-align:right
}
.doc-totals {
  width:320px;
  max-width:100%;
  margin:26px 0 26px auto
}
.doc-totals>div {
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid #e5e7eb
}
.doc-total-main {
  font-size:16px;
  color:var(--doc-accent);
  border-bottom:2px solid var(--doc-accent)!important
}
.doc-note {
  margin:14px 0;
  padding:12px 14px;
  background:#f8fafc;
  border-radius:8px
}
.doc-note b {
  display:block;
  margin-bottom:5px
}
.doc-status {
  margin:18px 0;
  color:#475569
}
.doc-legal {
  font-size:10px;
  color:#64748b;
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid #e5e7eb
}
.doc-footer {
  text-align:center;
  color:#64748b;
  font-size:10px;
  margin-top:28px;
  padding-top:12px;
  border-top:1px solid #e5e7eb
}
.paid-stamp {
  display:inline-block;
  border:3px solid #15803d;
  color:#15803d;
  padding:8px 15px;
  font-weight:800;
  transform:rotate(-3deg);
  letter-spacing:.08em;
  margin:6px 0 18px
}
.settings-preview {
  position:sticky;
  top:92px;
  align-self:start
}
.settings-preview .document-page {
  width:100%;
  min-height:0;
  padding:24px;
  box-shadow:none;
  border:1px solid var(--border);
  transform-origin:top center;
  font-size:9px
}
.settings-preview .doc-header {
  gap:12px;
  margin-bottom:12px;
  padding-bottom:10px
}
.settings-preview .doc-brand h2 {
  font-size:15px
}
.settings-preview .doc-logo,.settings-preview .doc-logo-placeholder {
  width:38px;
  height:38px
}
.settings-preview .doc-ref strong {
  font-size:12px
}
.settings-preview .doc-summary {
  grid-template-columns:repeat(2,1fr)
}
.settings-preview .doc-lines {
  margin:12px 0
}
.settings-preview .doc-line {
  grid-template-columns:1fr 90px;
  padding:8px
}
.settings-preview .doc-totals {
  width:220px;
  margin:12px 0 12px auto
}
.doc-preview-tabs {
  display:flex;
  gap:6px;
  margin:10px 0 14px
}
.doc-preview-tabs .active {
  background:var(--primary);
  color:white;
  border-color:var(--primary)
}
.logo-upload {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap
}
.logo-upload small {
  width:100%;
  color:var(--muted)
}
.check-line {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px
}
.check-line input {
  width:auto
}
.report-tools {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin:0 auto 12px;
  width:210mm;
  max-width:100%
}
@media print {
  body.printing-document>*:not(.document-modal) {
    display:none!important
  }
  body.printing-document .document-modal {
    position:static!important;
    background:#fff!important;
    padding:0!important;
    display:block!important
  }
  body.printing-document .report-tools {
    display:none!important
  }
  body.printing-document .document-shell {
    width:auto!important
  }
  body.printing-document .document-page {
    box-shadow:none!important;
    margin:0!important;
    width:210mm!important;
    min-height:297mm!important;
    padding:15mm!important
  }
  .document-page {
    page-break-after:always
  }
}
@media(max-width:900px) {
  .settings-preview {
    position:static
  }
  .document-page {
    padding:24px
  }
  .doc-summary {
    grid-template-columns:repeat(2,1fr)
  }
}
/* Accessibilité release candidate */ .skip-link {
  position:fixed;
  left:12px;
  top:-60px;
  z-index:99999;
  background:#111827;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700
}
.skip-link:focus {
  top:12px
}
:focus-visible {
  outline:3px solid #2563eb;
  outline-offset:2px
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}
.link-button {
  background:transparent;
  border:0;
  color:var(--accent,#2563eb);
  padding:.55rem 0;
  box-shadow:none;
  text-align:left
}
.link-button:hover {
  text-decoration:underline;
  transform:none
}
/* Bordeck Ops — visual system v2: sober B2B operations console */ :root {
  --ink:#172027;
  --ink-2:#34434d;
  --muted:#6f7c84;
  --paper:#f3f1ec;
  --surface:#fbfaf7;
  --surface-2:#f6f5f1;
  --line:#d9d7d0;
  --line-strong:#c9c6bd;
  --nav:#1d272c;
  --nav-2:#253238;
  --accent:#176b73;
  --accent-2:#0f555c;
  --good:#20775a;
  --warn:#9a6817;
  --bad:#a5443b;
  --radius:8px;
  --shadow:0 8px 28px rgba(24,33,38,.06)
}
html {
  background:var(--paper)
}
body {
  font-family:"Segoe UI",Inter,Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:13.5px;
  letter-spacing:.002em
}
button,input,select,textarea {
  font-family:inherit
}
#app {
  grid-template-columns:248px minmax(0,1fr);
  background:var(--paper)
}
aside {
  background:var(--nav);
  padding:0;
  min-height:100vh;
  border-right:1px solid #11191c;
  box-shadow:none
}
.brand-wrap {
  height:76px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 19px;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.brand {
  font-size:18px;
  font-weight:760;
  letter-spacing:.12em;
  margin:0;
  color:#f8f7f2
}
.brand b {
  color:inherit
}
.brand-meta {
  display:block;
  margin-top:2px;
  font-size:9px;
  letter-spacing:.16em;
  color:#94a2a8
}
.logo-mark {
  width:31px;
  height:31px;
  border-radius:6px;
  display:grid;
  place-items:center;
  background:#e8e4d9;
  color:#243137;
  font-size:14px;
  font-weight:850;
  box-shadow:none
}
aside nav {
  display:block;
  padding:15px 10px
}
aside nav button {
  width:100%;
  display:grid;
  grid-template-columns:29px 1fr;
  align-items:center;
  gap:4px;
  min-height:38px;
  padding:0 11px;
  margin:2px 0;
  border-radius:6px;
  color:#c1cbd0;
  font-size:12.5px;
  font-weight:540;
  letter-spacing:.01em
}
aside nav button::first-line {
  font-size:10px;
  color:#75868e
}
aside nav button:hover {
  background:rgba(255,255,255,.045);
  color:#fff
}
aside nav button.active {
  background:#304047;
  color:#fff;
  box-shadow:inset 2px 0 0 #69aeb2
}
.nav-sep {
  height:1px;
  background:rgba(255,255,255,.08);
  margin:12px 9px
}
.sidebar-bottom {
  padding:14px 18px 18px;
  border-top:1px solid rgba(255,255,255,.08);
  gap:11px
}
.workspace-chip {
  display:grid;
  gap:2px
}
.workspace-chip strong {
  color:#f4f3ef;
  font-size:12px
}
.workspace-chip span {
  color:#8fa0a7;
  font-size:11px
}
#logoutBtn {
  padding:7px 0;
  border-radius:0;
  color:#aeb9be;
  font-size:11px
}
main {
  background:var(--paper)
}
header {
  height:76px;
  padding:0 28px;
  background:rgba(251,250,247,.95);
  border-bottom:1px solid var(--line);
  box-shadow:none;
  backdrop-filter:saturate(130%) blur(8px);
  position:sticky;
  top:0;
  z-index:20
}
h1 {
  font-size:19px;
  line-height:1.15;
  font-weight:720;
  letter-spacing:-.015em
}
.page-subtitle {
  font-size:11.5px;
  margin-top:5px;
  color:var(--muted)
}
#content {
  padding:25px 28px 42px;
  max-width:1560px;
  width:100%;
  margin:0 auto
}
.top-actions {
  display:flex;
  align-items:center;
  gap:7px
}
.icon-btn,.quick-create {
  height:35px;
  border-radius:6px
}
.icon-btn {
  width:35px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink-2);
  box-shadow:none
}
.primary,.auth-card button:not(.link-button) {
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:6px;
  color:white;
  font-weight:650;
  box-shadow:none
}
.primary:hover,.auth-card button:not(.link-button):hover {
  background:var(--accent-2);
  border-color:var(--accent-2)
}
.quick-create {
  padding:0 13px;
  font-size:12px
}
.secondary {
  border:1px solid var(--line-strong);
  background:var(--surface);
  border-radius:6px;
  color:var(--ink-2);
  padding:8px 11px;
  box-shadow:none
}
.secondary:hover {
  background:#f0efea
}
.cards {
  gap:10px
}
.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:none
}
.card .kpi {
  font-size:25px;
  font-weight:720;
  letter-spacing:-.025em;
  color:#1f2b31
}
.muted {
  color:var(--muted)
}
.table-wrap {
  background:var(--surface);
  border-color:var(--line);
  border-radius:var(--radius);
  box-shadow:none
}
table {
  font-size:12.5px
}
th,td {
  padding:10px 12px;
  border-bottom:1px solid #e5e3dd
}
th {
  background:#efeee9;
  color:#59666d;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:700;
  position:sticky;
  top:0
}
tbody tr:hover {
  background:#f7f6f2
}
.pill,.role {
  border-radius:5px;
  padding:4px 7px;
  background:#e8ecea;
  color:#42535a;
  font-size:10.5px;
  font-weight:650
}
.role {
  background:#e5edec;
  color:#215b60
}
.notif-badge {
  background:#a5443b
}
.toolbar {
  margin-bottom:10px
}
.toolbar input,.field input,.field select,.field textarea,.auth-card input,.auth-card select {
  border:1px solid var(--line-strong);
  border-radius:6px;
  background:#fffefb;
  padding:9px 10px;
  color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)
}
.field textarea {
  min-height:92px
}
.field span,label {
  color:#4c5b62;
  font-size:11.5px;
  font-weight:600
}
.field input:focus,.field select:focus,.field textarea:focus,.auth-card input:focus {
  border-color:#5a8f94;
  outline:2px solid rgba(23,107,115,.12)
}
.modal {
  background:rgba(20,29,33,.58);
  backdrop-filter:blur(2px)
}
.modal-card {
  border-radius:9px;
  border:1px solid #cfcac0;
  box-shadow:0 22px 80px rgba(10,18,22,.22);
  background:var(--surface)
}
.client-card {
  background:var(--surface);
  border-color:var(--line);
  border-radius:7px;
  padding:14px;
  box-shadow:none
}
.client-card:hover {
  border-color:#8ba8aa;
  box-shadow:none;
  background:#f8f7f3
}
.list-row,.mini-row,.info-line {
  border-bottom-color:#e4e1db
}
.hub-layout,.hub-sections {
  gap:10px
}
.hub-head {
  border-bottom:1px solid var(--line);
  padding-bottom:14px
}
.auth-screen {
  background:#dedbd3;
  position:relative
}
.auth-screen::before {
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(90deg,#1d272c 0 36%,transparent 36%);
  z-index:-1
}
.auth-card {
  width:min(420px,calc(100% - 32px));
  margin-left:18vw;
  background:#fbfaf7;
  border:1px solid #cbc8c0;
  border-radius:10px;
  padding:30px;
  box-shadow:0 22px 60px rgba(17,25,29,.14)
}
.auth-logo {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px
}
.auth-logo .brand {
  color:#182229;
  font-size:20px
}
.auth-logo small {
  color:#738086;
  font-size:11px
}
.auth-card>p {
  color:#647178;
  font-size:12px;
  margin:0 0 18px
}
.auth-card form {
  gap:11px
}
.search-modal .modal-card,.quick-menu,.notif-panel {
  border-radius:8px!important;
  box-shadow:var(--shadow)!important
}
.eyebrow {
  color:var(--accent)!important
}
.onboarding-progress i,.progress-track i {
  background:var(--accent)!important
}
.onboarding-card,.choice-card,.progress-card,.check-row {
  border-radius:8px!important
}
.choice-card:not(.passive):hover {
  border-color:#6f999c;
  box-shadow:none
}
.onboarding-benefits div {
  border-radius:7px
}
.document-page {
  --doc-accent:var(--accent);
  box-shadow:none;
  border:1px solid var(--line)
}
.doc-logo-placeholder {
  border-radius:6px
}
.timer-box {
  border-radius:7px;
  background:#f3f4f0;
  border-color:var(--line)
}
.toast {
  border-radius:7px!important;
  box-shadow:0 12px 34px rgba(20,28,32,.16)!important
}
:focus-visible {
  outline:2px solid #317b81;
  outline-offset:2px
}
@media(max-width:900px) {
  #app {
    grid-template-columns:1fr
  }
  aside {
    position:sticky;
    top:0;
    z-index:40;
    min-height:auto
  }
  .brand-wrap {
    height:54px
  }
  .brand-wrap .brand-meta {
    display:none
  }
  aside nav {
    display:flex;
    padding:7px 8px;
    overflow:auto
  }
  aside nav button {
    grid-template-columns:1fr;
    min-width:max-content;
    padding:0 10px
  }
  .sidebar-bottom {
    display:none
  }
  header {
    top:54px
  }
  .auth-screen::before {
    display:none
  }
  .auth-card {
    margin-left:0
  }
}
/* Bordeck Ops — UX métier v3 */ .work-head,.agenda-top,.agenda-date-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.work-head {
  margin-bottom:12px;
  padding:12px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:7px
}
.work-summary {
  display:flex;
  align-items:stretch
}
.work-summary>div {
  min-width:118px;
  padding:0 18px;
  border-right:1px solid var(--line)
}
.work-summary>div:first-child {
  padding-left:0
}
.work-summary>div:last-child {
  border:0
}
.work-summary span {
  display:block;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em
}
.work-summary strong {
  display:block;
  margin-top:4px;
  font-size:17px;
  font-weight:720
}
.pro-toolbar {
  background:transparent;
  padding:0
}
.pro-toolbar input {
  max-width:420px
}
.ops-table {
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface);
  overflow:hidden
}
.ops-row {
  display:grid;
  grid-template-columns:minmax(240px,2fr) minmax(120px,1fr) minmax(120px,1fr) 90px 100px 80px 155px;
  align-items:center;
  min-height:48px;
  border-bottom:1px solid #e5e3dd
}
.ops-row:last-child {
  border-bottom:0
}
.ops-row>span {
  padding:8px 11px;
  min-width:0
}
.ops-row:not(.ops-head):hover {
  background:#f7f6f2
}
.ops-head {
  min-height:34px;
  background:#efeee9;
  color:#647077;
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700
}
.ops-main {
  display:flex;
  flex-direction:column;
  gap:3px
}
.ops-main b {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12.5px
}
.ops-main small {
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.ops-actions {
  display:flex;
  justify-content:flex-end;
  gap:5px
}
.mono {
  font-variant-numeric:tabular-nums;
  font-family:"Cascadia Mono","SFMono-Regular",Consolas,monospace;
  font-size:11px
}
.status-chip,.priority-mark {
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:2px 7px;
  border:1px solid #d8ddd9;
  border-radius:4px;
  background:#edf0ed;
  color:#43535a;
  font-size:10px;
  font-weight:700
}
.status-chip.ok {
  background:#e7f0eb;
  border-color:#c7dbcf;
  color:#286047
}
.status-chip.warn,.priority-mark.warn {
  background:#f4eee1;
  border-color:#e5d6b8;
  color:#825a19
}
.status-chip.danger,.priority-mark.danger {
  background:#f3e7e5;
  border-color:#dfc1bd;
  color:#963e35
}
.priority-mark {
  background:transparent
}
.agenda-top {
  margin-bottom:12px
}
.agenda-days {
  display:flex;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden
}
.agenda-day {
  width:58px;
  height:52px;
  border:0;
  border-right:1px solid var(--line);
  border-radius:0;
  background:transparent;
  color:var(--ink-2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px
}
.agenda-day:last-child {
  border-right:0
}
.agenda-day span {
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:.08em;
  color:var(--muted)
}
.agenda-day b {
  font-size:15px
}
.agenda-day.active {
  background:var(--nav);
  color:white
}
.agenda-day.active span {
  color:#aebbc0
}
.agenda-actions {
  display:flex;
  gap:7px
}
.agenda-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:12px
}
.agenda-timeline {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden
}
.agenda-date-title {
  padding:16px 18px;
  border-bottom:1px solid var(--line)
}
.agenda-date-title h2 {
  margin:3px 0 0;
  font-size:16px;
  text-transform:capitalize
}
.agenda-item {
  display:grid;
  grid-template-columns:72px 14px minmax(0,1fr) auto;
  align-items:stretch;
  min-height:82px;
  padding:0 14px;
  border-bottom:1px solid #e7e4de
}
.agenda-item:last-child {
  border-bottom:0
}
.agenda-item:hover {
  background:#f8f7f3
}
.agenda-time {
  padding:15px 8px 12px 0;
  text-align:right
}
.agenda-time b,.agenda-time span {
  display:block
}
.agenda-time b {
  font-size:12px
}
.agenda-time span {
  font-size:10px;
  color:var(--muted);
  margin-top:3px
}
.agenda-line {
  position:relative
}
.agenda-line::before {
  content:"";
  position:absolute;
  left:6px;
  top:0;
  bottom:0;
  width:1px;
  background:#d7d4cd
}
.agenda-line::after {
  content:"";
  position:absolute;
  left:3px;
  top:19px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--surface)
}
.agenda-body {
  padding:14px 10px
}
.agenda-title {
  display:flex;
  align-items:center;
  gap:8px
}
.agenda-title>b {
  font-size:13px
}
.agenda-meta {
  margin-top:5px;
  color:#58666d;
  font-size:11px
}
.agenda-note {
  margin-top:7px;
  color:var(--muted);
  font-size:11px
}
.agenda-item>button {
  align-self:center
}
.agenda-side {
  display:flex;
  flex-direction:column;
  gap:10px
}
.side-panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:7px;
  padding:14px
}
.side-panel h3 {
  margin:0 0 11px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#5f6d73
}
.staff-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid #e7e4de
}
.staff-line:last-child {
  border-bottom:0
}
.staff-line span {
  display:flex;
  align-items:center;
  gap:7px
}
.staff-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5d8e91
}
.side-kpi {
  font-size:28px;
  font-weight:720
}
.empty-state {
  padding:24px;
  text-align:center;
  color:var(--muted);
  background:var(--surface)
}
.empty-state.large {
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px
}
.empty-state.large b {
  color:var(--ink);
  font-size:14px
}
.ticket-kpis {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden;
  margin-bottom:12px
}
.ticket-kpis .card {
  border:0;
  border-right:1px solid var(--line);
  border-radius:0
}
.ticket-kpis .card:last-child {
  border-right:0
}
.ticket-kpis .kpi {
  font-size:21px
}
.ticket-queue {
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden
}
.ticket-row.card {
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(340px,auto);
  align-items:center;
  margin:0;
  border:0;
  border-bottom:1px solid #e5e3dd;
  border-radius:0;
  padding:11px 13px;
  text-align:left
}
.ticket-row.card:last-child {
  border-bottom:0
}
.ticket-row.card:hover {
  background:#f7f6f2
}
.ticket-row.ticket-late {
  box-shadow:inset 3px 0 0 var(--bad);
  background:#fcf8f7
}
.ticket-main>div:first-child {
  display:flex;
  align-items:center;
  gap:7px
}
.ticket-main strong {
  font-size:12.5px
}
.ticket-meta {
  display:grid;
  grid-template-columns:90px 130px 150px;
  align-items:center;
  gap:10px;
  font-size:11px
}
.ticket-meta>span:nth-child(n+2) {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.hub-head {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:7px;
  padding:13px 15px;
  margin-bottom:10px
}
.hub-head h2 {
  margin:0;
  font-size:17px
}
.hub-kpis {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden;
  margin-bottom:10px
}
.hub-kpis .card {
  border:0;
  border-right:1px solid var(--line);
  border-radius:0
}
.hub-kpis .card:last-child {
  border-right:0
}
.hub-kpis .kpi {
  font-size:20px
}
.hub-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px
}
.hub-layout>.card {
  padding:14px
}
.hub-layout h3,.hub-section h3 {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#5b686e
}
.quick {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  align-content:start
}
.quick h3 {
  grid-column:1/-1
}
.quick button {
  width:100%;
  text-align:left
}
.hub-sections {
  display:grid;
  grid-template-columns:1fr 1fr
}
.hub-section {
  padding:0!important;
  overflow:hidden
}
.hub-section .section-title {
  padding:12px 13px;
  border-bottom:1px solid var(--line);
  background:#f4f3ee
}
.hub-section .mini-table {
  padding:0
}
.mini-row {
  padding:10px 12px
}
.mini-row>div:first-child {
  display:flex;
  flex-wrap:wrap;
  gap:9px
}
.mini-row span b {
  display:none
}
@media(max-width:1100px) {
  .ops-row {
    grid-template-columns:minmax(210px,2fr) 120px 110px 85px 95px 130px
  }
  .ops-row>span:nth-child(6),.ops-head>span:nth-child(6) {
    display:none
  }
  .agenda-layout {
    grid-template-columns:1fr
  }
  .agenda-side {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .hub-sections {
    grid-template-columns:1fr
  }
  .ticket-meta {
    grid-template-columns:80px 110px 130px
  }
}
@media(max-width:760px) {
  .work-head,.agenda-top {
    align-items:stretch;
    flex-direction:column
  }
  .work-summary {
    overflow:auto
  }
  .work-summary>div {
    min-width:105px
  }
  .ops-table {
    overflow:auto
  }
  .ops-row {
    min-width:850px
  }
  .agenda-days {
    width:100%
  }
  .agenda-day {
    flex:1
  }
  .agenda-side {
    grid-template-columns:1fr
  }
  .ticket-kpis {
    grid-template-columns:repeat(2,1fr)
  }
  .ticket-kpis .card:nth-child(2) {
    border-right:0
  }
  .ticket-row.card {
    grid-template-columns:1fr
  }
  .ticket-meta {
    margin-top:8px
  }
  .hub-kpis {
    grid-template-columns:repeat(2,1fr)
  }
  .hub-layout {
    grid-template-columns:1fr
  }
  .quick {
    grid-template-columns:1fr 1fr
  }
}
/* UX V4 — dashboard action-first & forms */ :root {
  --ink:#182126;
  --muted:#66737a;
  --line:#dfe4e7;
  --paper:#fbfcfc;
  --accent:#1f5b63;
  --accent-2:#17464d;
  --soft:#edf4f4;
  --warn:#9a6700;
  --danger:#a62a2a
}
body {
  background:#f3f5f4;
  color:var(--ink)
}
header {
  height:66px;
  padding:0 24px
}
.role {
  border-radius:5px;
  background:#eef2f2;
  color:#35565a
}
.card,.table-wrap,.client-card {
  border-radius:8px;
  box-shadow:none
}
.primary {
  background:var(--accent);
  border-radius:6px
}
.primary:hover {
  background:var(--accent-2)
}
.secondary {
  border-radius:6px;
  background:#fff
}
.pill {
  border-radius:4px
}
.toolbar input,.auth-card input,.field input,.field select,.field textarea {
  border-radius:6px
}
.dashboard-command {
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:14px;
  margin-bottom:14px
}
.dashboard-hero {
  background:#fff;
  border:1px solid var(--line);
  padding:20px 22px;
  border-radius:8px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}
.dashboard-hero h2 {
  margin:0 0 5px;
  font-size:20px
}
.dashboard-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.dashboard-alerts {
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px 18px
}
.dashboard-alerts h3 {
  font-size:13px;
  margin:0 0 10px;
  text-transform:uppercase;
  letter-spacing:.06em
}
.alert-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 0;
  border-top:1px solid #edf0f1
}
.alert-line:first-of-type {
  border-top:0
}
.alert-line strong {
  font-variant-numeric:tabular-nums
}
.alert-line.danger strong {
  color:var(--danger)
}
.alert-line.warn strong {
  color:var(--warn)
}
.kpi-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  margin-bottom:14px
}
.kpi-cell {
  padding:14px 16px;
  border-right:1px solid var(--line)
}
.kpi-cell:last-child {
  border-right:0
}
.kpi-cell span {
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted)
}
.kpi-cell strong {
  display:block;
  font-size:22px;
  margin-top:3px
}
.kpi-cell small {
  color:var(--muted)
}
.modal {
  backdrop-filter:none;
  background:rgba(18,27,30,.56)
}
.modal-card {
  border-radius:8px;
  border:1px solid #d9dfe1;
  box-shadow:0 24px 70px rgba(18,27,30,.22);
  padding:0;
  width:min(620px,100%)
}
.modal-card>h2,.modal-title {
  padding:18px 20px 14px;
  margin:0;
  border-bottom:1px solid var(--line)
}
.modal-card>.form-grid,.modal-card>.field,.modal-card>p,.modal-card>.muted,.modal-card>pre {
  margin-left:20px;
  margin-right:20px
}
.modal-card>.form-grid {
  padding-top:18px
}
.modal-card>.actions {
  padding:14px 20px;
  margin:18px 0 0;
  border-top:1px solid var(--line);
  background:#fafbfb;
  position:sticky;
  bottom:0
}
.modal-card>.msg {
  margin:8px 20px 0
}
.field span {
  font-size:12px;
  font-weight:650;
  color:#3c4a4f
}
.field input,.field select,.field textarea {
  padding:10px 11px;
  border-color:#ccd4d7;
  background:#fff
}
.field textarea {
  min-height:88px;
  resize:vertical
}
.field input:focus,.field select:focus,.field textarea:focus {
  outline:2px solid rgba(31,91,99,.13);
  border-color:#6e979d
}
.form-grid {
  gap:14px 12px
}
.form-section-label {
  grid-column:1/-1;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#718087;
  padding-top:4px;
  border-bottom:1px solid #edf0f1;
  padding-bottom:6px
}
.field-help {
  font-size:11px;
  color:#7b878c;
  font-weight:400
}
@media(max-width:900px) {
  .dashboard-command {
    grid-template-columns:1fr
  }
  .kpi-strip {
    grid-template-columns:repeat(2,1fr)
  }
  .kpi-cell:nth-child(2) {
    border-right:0
  }
  .kpi-cell:nth-child(-n+2) {
    border-bottom:1px solid var(--line)
  }
}
@media(max-width:560px) {
  .dashboard-hero {
    align-items:flex-start;
    flex-direction:column
  }
  .kpi-strip {
    grid-template-columns:1fr
  }
  .kpi-cell {
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .kpi-cell:last-child {
    border-bottom:0
  }
}
/* UX V5 — authentication, onboarding, search & notifications */ .auth-screen {
  min-height:100vh;
  background:#eef1ef;
  padding:0;
  display:grid;
  place-items:center
}
.auth-shell {
  width:min(1080px,calc(100vw - 48px));
  min-height:640px;
  display:grid;
  grid-template-columns:minmax(320px,.9fr) minmax(420px,1.1fr);
  background:#fff;
  border:1px solid #d8ddda;
  box-shadow:0 26px 70px rgba(28,39,39,.11)
}
.auth-context {
  background:#17262a;
  color:#edf3f1;
  padding:42px;
  display:flex;
  flex-direction:column
}
.auth-context-brand {
  display:flex;
  align-items:center;
  gap:12px
}
.auth-context-brand .brand {
  margin:0;
  color:#fff;
  font-size:20px;
  letter-spacing:.08em
}
.auth-context-brand small {
  color:#9fafad;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:9px
}
.auth-context .logo-mark {
  border-radius:4px;
  background:#dce8e5;
  color:#1b4f55;
  box-shadow:none
}
.auth-context-copy {
  margin:auto 0;
  max-width:430px
}
.auth-kicker,.auth-section-label {
  display:block;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:10px;
  font-weight:750;
  color:#779195
}
.auth-context-copy h1 {
  font-size:34px;
  line-height:1.08;
  letter-spacing:-.035em;
  margin:12px 0 16px;
  color:#fff
}
.auth-context-copy p {
  font-size:14px;
  line-height:1.65;
  color:#b8c5c2;
  max-width:390px
}
.auth-context-foot {
  font-size:10px;
  color:#829794;
  text-transform:uppercase;
  letter-spacing:.08em
}
.auth-panel {
  display:grid;
  place-items:center;
  padding:48px
}
.auth-card {
  width:min(390px,100%);
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  background:transparent
}
.auth-card-head {
  margin-bottom:28px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line)
}
.auth-card-head h2 {
  font-size:22px;
  line-height:1.25;
  margin:7px 0 0
}
.auth-card form {
  gap:15px
}
.auth-card label {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.045em;
  color:#526166
}
.auth-card input {
  border-radius:5px;
  padding:11px 12px;
  border-color:#cbd3d1
}
.auth-card button {
  border-radius:5px;
  min-height:42px
}
.auth-card .link-button {
  background:transparent!important;
  color:#526166!important;
  text-align:left;
  padding:4px 0;
  min-height:auto;
  font-weight:550
}
.auth-card .link-button:hover {
  color:var(--accent)!important
}
.auth-card .msg {
  font-size:12px
}
.search-overlay {
  align-items:flex-start;
  padding-top:min(14vh,120px);
  background:rgba(19,28,30,.44)
}
.search-modal {
  width:min(760px,calc(100vw - 32px));
  border-radius:7px!important;
  overflow:hidden;
  border:1px solid #cfd6d4
}
.search-box {
  height:58px;
  padding:0 16px;
  border-bottom:1px solid var(--line);
  background:#fff
}
.search-box>span:first-child {
  font-size:16px;
  color:#6b797d
}
.search-box input {
  font-size:15px!important;
  padding:0!important
}
.search-results {
  padding:0;
  max-height:58vh
}
.search-result {
  border-radius:0;
  padding:12px 16px;
  border-bottom:1px solid #eceeeb
}
.search-result:last-child {
  border-bottom:0
}
.search-result:hover {
  background:#f3f5f2
}
.search-result strong {
  font-size:12.5px
}
.search-result small {
  font-size:11px
}
.search-result .pill {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:#eef2f0;
  color:#526166
}
.search-results .empty-state {
  padding:30px 18px
}
.notif-panel {
  top:60px;
  right:18px;
  width:min(410px,calc(100vw - 24px));
  border-radius:7px!important;
  border:1px solid #cfd6d4
}
.panel-head {
  padding:12px 14px;
  background:#f7f8f6
}
.panel-head strong {
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:10px
}
.notif-item {
  padding:12px 14px;
  background:#fff!important;
  border-bottom:1px solid #e8ebe8
}
.notif-item:hover {
  background:#f4f6f3!important
}
.notif-item::before {
  content:"";
  width:3px;
  align-self:stretch;
  background:#c7d0ce;
  grid-row:1/3;
  margin-right:8px
}
.notif-item {
  grid-template-columns:3px 1fr
}
.notif-item b,.notif-item small {
  grid-column:2
}
.notif-item.danger::before {
  background:#a62a2a
}
.notif-item.warn::before {
  background:#9a6700
}
.notif-item b {
  font-size:12px
}
.notif-item small {
  font-size:11px;
  line-height:1.45
}
.quick-menu {
  border-radius:7px!important;
  padding:4px
}
.quick-menu button {
  border-radius:4px;
  padding:9px 10px;
  font-size:12px
}
.quick-menu button:hover {
  background:#f0f3f1
}
.onboarding-overlay {
  background:rgba(19,28,30,.5)
}
.onboarding-card {
  max-width:780px;
  border-radius:7px!important;
  border:1px solid #cfd6d4
}
.onboarding-progress {
  height:3px;
  background:#e3e7e4
}
.onboarding-card>*:not(.onboarding-progress) {
  margin-left:28px;
  margin-right:28px
}
.onboarding-hero {
  padding-top:28px;
  gap:18px
}
.onboarding-hero .logo-mark.big {
  width:48px;
  height:48px;
  border-radius:5px;
  background:#e0e9e6;
  color:#1f5b63;
  box-shadow:none
}
.eyebrow {
  font-size:9px!important;
  letter-spacing:.12em!important;
  color:#65777a!important
}
.onboarding-hero h2,.onboarding-step-head h2 {
  font-size:23px;
  letter-spacing:-.02em
}
.onboarding-hero p,.onboarding-step-head p {
  font-size:13px;
  color:#66737a
}
.onboarding-benefits {
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden
}
.onboarding-benefits div {
  border:0!important;
  border-right:1px solid var(--line)!important;
  border-radius:0!important;
  background:#fafbf9!important;
  padding:13px
}
.onboarding-benefits div:last-child {
  border-right:0!important
}
.onboarding-benefits b {
  width:20px;
  height:20px;
  border-radius:3px;
  background:#e1e9e6;
  color:#345e62;
  font-size:10px
}
.choice-cards {
  gap:10px
}
.choice-card {
  border-radius:6px!important;
  padding:16px
}
.choice-card strong {
  font-size:13px
}
.choice-card span {
  font-size:12px
}
.success-note {
  border-radius:5px;
  background:#edf4f0;
  color:#315f4e
}
.progress-card {
  border-radius:6px!important;
  background:#fafbf9;
  padding:14px
}
.progress-track {
  height:5px;
  border-radius:2px
}
.setup-checklist {
  gap:0;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden
}
.check-row {
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  padding:10px 12px
}
.check-row:last-child {
  border-bottom:0!important
}
.check-row.done {
  background:#f3f7f4
}
.check-icon {
  font-size:14px;
  color:var(--accent)
}
.tour-toggle {
  font-size:12px
}
.onboarding-footer {
  padding:14px 0!important
}
.tour-shade {
  background:rgba(20,29,31,.55)
}
.tour-popover {
  border-radius:7px;
  padding:20px;
  border:1px solid #d0d6d4;
  box-shadow:0 24px 60px rgba(18,28,30,.22)
}
.tour-popover h3 {
  font-size:17px
}
.tour-popover p {
  font-size:12.5px;
  color:#637176
}
.tour-highlight {
  box-shadow:0 0 0 2px #f8faf9,0 0 0 5px #6f999c!important
}
@media(max-width:820px) {
  .auth-shell {
    grid-template-columns:1fr;
    width:min(520px,calc(100vw - 28px));
    min-height:auto
  }
  .auth-context {
    padding:24px 28px
  }
  .auth-context-copy {
    margin:40px 0 10px
  }
  .auth-context-copy h1 {
    font-size:26px
  }
  .auth-context-copy p,.auth-context-foot {
    display:none
  }
  .auth-panel {
    padding:32px 28px
  }
  .onboarding-benefits {
    grid-template-columns:1fr
  }
  .onboarding-benefits div {
    border-right:0!important;
    border-bottom:1px solid var(--line)!important
  }
  .onboarding-benefits div:last-child {
    border-bottom:0!important
  }
}
/* UX V6 — commercial, security, emails, subscription */ .finance-summary,.mail-status {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  background:#fff;
  border-radius:7px;
  margin-bottom:14px
}
.finance-summary>div,.mail-status>div {
  padding:14px 16px;
  border-right:1px solid var(--line)
}
.finance-summary>div:last-child,.mail-status>div:last-child {
  border-right:0
}
.finance-summary span,.mail-status span {
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--muted)
}
.finance-summary strong,.mail-status strong {
  display:block;
  font-size:20px;
  margin-top:4px
}
.module-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px
}
.segmented {
  display:inline-flex;
  border:1px solid var(--line);
  background:#fff;
  border-radius:6px;
  padding:3px
}
.segmented button {
  border:0;
  background:transparent;
  padding:7px 11px;
  border-radius:4px;
  color:#59686c
}
.segmented button.active {
  background:#e8efed;
  color:#193f44
}
.segmented span {
  font-size:10px;
  margin-left:5px;
  color:#809095
}
.module-actions {
  display:flex;
  gap:8px
}
.module-actions input {
  min-width:300px
}
.finance-row {
  grid-template-columns:1.25fr 1.6fr .7fr .8fr .8fr auto
}
.finance-table .ops-row:not(.ops-head):hover {
  background:#f7f9f7
}
.security-shell {
  max-width:980px
}
.security-overview {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:7px;
  margin-bottom:12px
}
.security-score span {
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted)
}
.security-score strong {
  display:block;
  font-size:22px;
  margin:4px 0
}
.security-score small {
  color:var(--muted)
}
.security-state {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:650
}
.security-state i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#9a6700
}
.security-state.ok i {
  background:#39765f
}
.security-list {
  border:1px solid var(--line);
  background:#fff;
  border-radius:7px;
  overflow:hidden
}
.security-list section {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 18px;
  border-bottom:1px solid var(--line)
}
.security-list section:last-child {
  border-bottom:0
}
.security-list h3 {
  font-size:13px;
  margin:0 0 3px
}
.security-list p {
  font-size:12px;
  color:var(--muted);
  margin:0
}
.session-table {
  margin-top:12px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:7px;
  overflow:hidden
}
.session-table .ops-row {
  grid-template-columns:1.2fr 1fr .5fr
}
.mail-status {
  grid-template-columns:repeat(3,1fr)
}
.mail-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:14px
}
.section-cap {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:4px 0 10px
}
.section-cap h3 {
  margin:0;
  font-size:13px
}
.section-cap p {
  margin:3px 0 0;
  font-size:11px;
  color:var(--muted)
}
.mail-table .ops-row {
  grid-template-columns:1.2fr 1.8fr .7fr .9fr auto
}
.template-panel {
  border:1px solid var(--line);
  background:#fff;
  border-radius:7px;
  padding:14px
}
.template-line {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-align:left;
  border:0;
  border-top:1px solid var(--line);
  background:#fff;
  padding:12px 2px
}
.template-line:first-of-type {
  border-top:0
}
.template-line:hover {
  background:#f8faf8
}
.template-line b,.template-line small {
  display:block
}
.template-line b {
  font-size:12px
}
.template-line small {
  margin-top:3px;
  color:var(--muted);
  font-size:10.5px;
  max-width:230px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.subscription-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:7px
}
.subscription-head h2 {
  font-size:25px;
  margin:4px 0
}
.subscription-head p {
  margin:0;
  color:var(--muted);
  font-size:12px
}
.subscription-price {
  text-align:right
}
.subscription-price strong {
  display:block;
  font-size:25px
}
.subscription-price>span {
  font-size:11px;
  color:var(--muted)
}
.subscription-price em {
  margin-top:7px;
  font-style:normal
}
.quota-lines {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  margin:12px 0;
  overflow:hidden
}
.quota-lines>div {
  padding:14px 16px
}
.quota-lines>div+div {
  border-left:1px solid var(--line)
}
.quota-lines span,.quota-lines b {
  font-size:11px
}
.quota-lines b {
  float:right
}
.quota-lines i {
  display:block;
  clear:both;
  height:4px;
  background:#e8ecea;
  margin-top:9px
}
.quota-lines u {
  display:block;
  height:100%;
  background:var(--accent);
  text-decoration:none
}
.plan-table {
  border:1px solid var(--line);
  background:#fff;
  border-radius:7px;
  overflow:hidden
}
.plan-row {
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr 1fr .8fr;
  align-items:center;
  min-height:54px;
  padding:0 16px;
  border-top:1px solid var(--line);
  font-size:12px
}
.plan-row:first-child {
  border-top:0
}
.plan-row.plan-head {
  min-height:38px;
  background:#f7f8f6;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em
}
.plan-row.selected {
  background:#f2f6f4
}
.plan-row small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:2px
}
.billing-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
  padding:15px 16px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:7px
}
.billing-footer b,.billing-footer span {
  display:block
}
.billing-footer b {
  font-size:12px
}
.billing-footer span {
  font-size:11px;
  color:var(--muted);
  margin-top:3px
}
.inline-notice {
  margin-top:10px;
  padding:10px 12px;
  border-left:3px solid #9a6700;
  background:#fffaf0;
  color:#6e5614;
  font-size:11px
}
.settings-layout {
  gap:14px
}
.settings-section>.card {
  border-radius:7px
}
.settings-preview {
  border-radius:7px!important;
  background:#f7f8f6!important
}
.settings-actions {
  border-top:1px solid var(--line);
  margin-top:16px;
  padding-top:14px
}
.logo-upload {
  border:1px dashed #bfc9c6;
  padding:10px;
  border-radius:5px;
  background:#fafbf9
}
@media(max-width:920px) {
  .finance-summary {
    grid-template-columns:repeat(2,1fr)
  }
  .finance-summary>div:nth-child(2) {
    border-right:0
  }
  .module-bar,.subscription-head,.billing-footer {
    align-items:stretch;
    flex-direction:column
  }
  .module-actions {
    width:100%
  }
  .module-actions input {
    min-width:0;
    flex:1
  }
  .finance-row {
    grid-template-columns:1.2fr 1fr .7fr auto
  }
  .finance-row>span:nth-child(4),.finance-row>span:nth-child(5) {
    display:none
  }
  .mail-layout {
    grid-template-columns:1fr
  }
  .mail-table .ops-row {
    grid-template-columns:1.1fr 1.6fr .7fr auto
  }
  .mail-table .ops-row>span:nth-child(4) {
    display:none
  }
  .plan-row {
    grid-template-columns:1.2fr .6fr .8fr
  }
  .plan-row>span:nth-child(3),.plan-row>span:nth-child(5) {
    display:none
  }
}
@media(max-width:600px) {
  .finance-summary,.mail-status,.quota-lines {
    grid-template-columns:1fr
  }
  .finance-summary>div,.mail-status>div {
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .finance-summary>div:last-child,.mail-status>div:last-child {
    border-bottom:0
  }
  .quota-lines>div+div {
    border-left:0;
    border-top:1px solid var(--line)
  }
  .module-actions {
    flex-direction:column
  }
  .finance-row,.mail-table .ops-row {
    grid-template-columns:1fr auto
  }
  .finance-row>span:nth-child(2),.finance-row>span:nth-child(3),.finance-row>span:nth-child(4),.finance-row>span:nth-child(5),.mail-table .ops-row>span:nth-child(2),.mail-table .ops-row>span:nth-child(3),.mail-table .ops-row>span:nth-child(4) {
    display:none
  }
}
/* Bordeck Ops V7 — revue finale de cohérence et responsive */ :root {
  --surface:#fff;
  --surface-soft:#f6f7f4;
  --surface-muted:#eef1ee;
  --line:#dfe4e1;
  --line-strong:#cbd3cf;
  --text:#1c292d;
  --muted:#68777b;
  --accent:#1f5b63;
  --accent-soft:#e7efed;
  --danger:#a62a2a;
  --warning:#8a6100
}
html {
  background:#f1f3f0
}
body {
  color:var(--text);
  background:#f1f3f0
}
button {
  letter-spacing:0
}
button:disabled {
  cursor:not-allowed;
  opacity:.48
}
.primary,.secondary,.utility-btn {
  min-height:36px
}
.primary {
  box-shadow:none
}
.secondary {
  color:#344348
}
.secondary:hover {
  border-color:#9eaaa6;
  background:#f7f8f6
}
.page-subtitle {
  max-width:760px
}
.muted {
  color:var(--muted)
}
.utility-btn {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line-strong);
  background:#fff;
  color:#344348;
  border-radius:5px;
  padding:7px 10px;
  font-size:11px;
  font-weight:650;
  cursor:pointer
}
.utility-btn:hover {
  background:#f5f7f4;
  border-color:#aeb9b5
}
.utility-btn kbd {
  font:9px/1 system-ui,sans-serif;
  color:#768488;
  background:#eef1ee;
  border:1px solid #d8dedb;
  border-radius:3px;
  padding:3px 4px
}
.utility-btn .notif-badge {
  position:static;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  display:inline-grid;
  place-items:center;
  background:#8d2d2d;
  color:#fff;
  font-size:9px
}
.utility-btn .notif-badge.hidden {
  display:none
}
header {
  height:64px;
  padding:0 24px
}
.top-actions {
  gap:7px
}
.quick-create {
  padding-inline:13px
}
.brand-wrap {
  padding:0 4px 17px;
  border-bottom:1px solid rgba(255,255,255,.1);
  margin-bottom:11px
}
.brand-meta {
  letter-spacing:.12em!important
}
.workspace-chip {
  padding:9px 4px
}
.workspace-chip strong,.workspace-chip span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
#content {
  max-width:1680px;
  width:100%;
  margin:0 auto;
  padding:22px 24px 34px
}
.card,.ops-table,.side-panel,.settings-preview,.settings-section>section {
  box-shadow:none
}
.empty-state {
  display:flex;
  min-height:110px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  color:#738084;
  text-align:center;
  padding:22px
}
.empty-state.large {
  min-height:180px
}
.empty-state b {
  font-size:13px;
  color:#344348
}
.empty-state span {
  font-size:11px;
  max-width:420px
}
.status-chip,.pill {
  white-space:nowrap
}
.status-chip {
  font-size:9px!important;
  text-transform:uppercase;
  letter-spacing:.045em
}
.ops-head {
  position:sticky;
  top:0;
  z-index:1
}
.ops-row {
  transition:background .12s ease
}
.ops-row:not(.ops-head):hover {
  background:#f7f9f7
}
.ops-main small {
  line-height:1.35
}
.ops-actions {
  justify-content:flex-end
}
.modal-card {
  max-height:min(88vh,860px)
}
.modal-card>.actions {
  z-index:2
}
.modal-title h2,.modal-card>h2 {
  font-size:17px;
  letter-spacing:-.015em
}
.field span {
  line-height:1.25
}
.field input,.field select {
  min-height:39px
}
.field textarea {
  line-height:1.45
}
.msg:empty {
  display:none
}
.kbd {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:10px
}
.auth-context-brand small,.auth-context-foot {
  font-size:9px
}
.auth-card-head h2 {
  font-size:20px
}
.auth-card input {
  min-height:42px
}
.auth-card label {
  display:grid;
  gap:6px
}
.auth-card .msg {
  padding:8px 0
}
.search-result:focus-visible,.quick-menu button:focus-visible,.notif-item:focus-visible {
  outline:2px solid rgba(31,91,99,.28);
  outline-offset:-2px
}
@media(max-width:1100px) {
  #content {
    padding:18px
  }
  .utility-btn kbd {
    display:none
  }
  .utility-btn {
    padding-inline:9px
  }
  .top-actions {
    gap:5px
  }
}
@media(max-width:900px) {
  #app {
    display:block
  }
  aside {
    position:sticky;
    top:0;
    z-index:20;
    min-height:auto;
    height:auto;
    padding:8px 10px;
    background:#17262a
  }
  .brand-wrap {
    display:none
  }
  aside nav {
    display:flex;
    gap:2px;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:2px
  }
  aside nav::-webkit-scrollbar {
    display:none
  }
  aside nav button {
    flex:0 0 auto;
    min-width:auto;
    padding:8px 10px;
    border-radius:4px;
    font-size:0
  }
  aside nav button span {
    font-size:11px
  }
  .nav-sep {
    display:none
  }
  .sidebar-bottom {
    display:none
  }
  main header {
    position:sticky;
    top:46px;
    z-index:15;
    background:#fff;
    height:58px
  }
  .page-subtitle {
    display:none
  }
  #content {
    padding:14px
  }
  .top-actions .utility-btn span:first-child {
    font-size:0
  }
  .top-actions .utility-btn span:first-child::after {
    font-size:11px
  }
  .top-actions #searchBtn span:first-child::after {
    content:'Recherche'
  }
  .top-actions #notifBtn span:first-child::after {
    content:'Alertes'
  }
}
@media(max-width:640px) {
  main header {
    padding:0 12px;
    top:45px
  }
  header h1 {
    font-size:16px
  }
  .top-actions {
    gap:4px
  }
  .utility-btn {
    border:0;
    background:transparent;
    padding:6px
  }
  .top-actions .utility-btn span:first-child::after {
    font-size:0
  }
  .top-actions #searchBtn span:first-child::after {
    content:'⌕';
    font-size:18px
  }
  .top-actions #notifBtn span:first-child::after {
    content:'!';
    font-size:14px;
    font-weight:800
  }
  .quick-create {
    font-size:0;
    min-width:36px;
    padding:7px
  }
  .quick-create::after {
    content:'+';
    font-size:19px;
    font-weight:500
  }
  .role {
    display:none
  }
  #content {
    padding:12px
  }
  .toolbar {
    align-items:stretch;
    flex-direction:column
  }
  .toolbar input {
    width:100%;
    max-width:none
  }
  .modal {
    padding:0;
    align-items:end
  }
  .modal-card {
    width:100%!important;
    max-height:92dvh;
    border-radius:8px 8px 0 0
  }
  .modal-card>.form-grid {
    padding-top:14px
  }
  .modal-card>.actions {
    padding-bottom:max(14px,env(safe-area-inset-bottom))
  }
  .auth-screen {
    place-items:stretch
  }
  .auth-shell {
    width:100%;
    min-height:100dvh;
    border:0;
    display:block
  }
  .auth-context {
    padding:18px 20px
  }
  .auth-context-copy {
    display:none
  }
  .auth-panel {
    padding:34px 20px
  }
  .auth-card {
    max-width:420px;
    margin:auto
  }
  .search-overlay {
    padding:0;
    align-items:start
  }
  .search-modal {
    width:100%;
    border-radius:0!important;
    border-left:0;
    border-right:0
  }
  .notif-panel {
    position:fixed!important;
    inset:103px 8px auto 8px!important;
    width:auto!important;
    max-height:70dvh;
    overflow:auto
  }
  .finance-summary,.mail-status {
    margin-bottom:10px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}
/* Bordeck Ops V8 — refonte expérience locale */ :root {
  --bo-ink:#102326;
  --bo-ink-2:#183136;
  --bo-accent:#1f6a70;
  --bo-accent-2:#2c7c82;
  --bo-soft:#e9f0ee;
  --bo-bg:#eef1ee;
  --bo-line:#d5dcda;
  --bo-text:#17282c;
  --bo-muted:#69787a
}
body {
  background:var(--bo-bg);
  color:var(--bo-text)
}
/* logo de marque : symbole construit en CSS, aucune image externe */ .bordeck-symbol {
  width:42px;
  height:42px;
  border-radius:10px;
  background:#e9f1ef;
  display:grid;
  grid-template-columns:7px 1fr;
  grid-template-rows:repeat(3,1fr);
  gap:3px;
  padding:8px;
  box-shadow:inset 0 0 0 1px #c9d5d1;
  flex:0 0 auto
}
.bordeck-symbol i {
  display:block;
  border-radius:2px;
  background:var(--bo-accent)
}
.bordeck-symbol i:nth-child(1) {
  grid-row:1/4;
  grid-column:1
}
.bordeck-symbol i:nth-child(2) {
  grid-row:1;
  grid-column:2
}
.bordeck-symbol i:nth-child(3) {
  grid-row:2/4;
  grid-column:2;
  background:#2f4549
}
.bordeck-symbol.small {
  width:34px;
  height:34px;
  border-radius:8px;
  padding:7px;
  grid-template-columns:6px 1fr
}
.auth-context .bordeck-symbol {
  background:#dce9e5;
  box-shadow:none
}
.brand {
  font-weight:760;
  letter-spacing:-.015em;
  margin:0
}
.auth-context-brand {
  display:flex;
  align-items:center;
  gap:12px
}
.auth-context-brand small {
  letter-spacing:.15em;
  color:#93a8aa
}
/* Authentification */ .auth-screen {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:34px;
  background:radial-gradient(circle at 20% 0%,#f9fbfa 0,#eef1ee 45%,#e8ece9 100%)
}
.auth-shell-v2 {
  width:min(1180px,calc(100vw - 48px));
  min-height:680px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr);
  background:#fff;
  border:1px solid #d7ddda;
  box-shadow:0 28px 80px rgba(18,37,40,.12);
  overflow:hidden
}
.auth-context {
  background:var(--bo-ink);
  color:#f7fbfa;
  padding:54px 56px;
  display:flex;
  flex-direction:column;
  min-width:0
}
.auth-context-copy {
  margin:auto 0;
  max-width:540px
}
.auth-context-copy h1 {
  font-size:44px;
  line-height:1.05;
  letter-spacing:-.045em;
  margin:18px 0 20px
}
.auth-context-copy p {
  font-size:15px;
  color:#b9c9c9;
  max-width:500px;
  line-height:1.65
}
.auth-kicker,.auth-section-label,.eyebrow {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:760;
  color:#7aa3a6
}
.auth-proof {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:26px
}
.auth-proof span {
  font-size:10px;
  color:#bfd0cf;
  border:1px solid rgba(255,255,255,.13);
  padding:7px 9px;
  border-radius:4px
}
.auth-context-foot {
  color:#769092;
  letter-spacing:.1em;
  font-weight:650
}
.auth-panel {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 56px;
  background:#fbfcfb;
  min-width:0
}
.auth-card-v2 {
  width:100%;
  max-width:460px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none
}
.auth-card-head {
  padding:22px 0 24px;
  border-bottom:1px solid var(--bo-line);
  margin-bottom:24px
}
.auth-card-head h2 {
  font-size:26px;
  letter-spacing:-.025em;
  margin:7px 0 5px
}
.auth-card-head p {
  color:var(--bo-muted);
  margin:0;
  font-size:12px
}
.auth-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--bo-line);
  padding:3px;
  border-radius:7px;
  background:#edf1ef
}
.auth-tabs button {
  border:0;
  background:transparent;
  min-height:38px;
  border-radius:5px;
  color:#5d6b6e;
  font-weight:700;
  cursor:pointer
}
.auth-tabs button.active {
  background:#fff;
  color:var(--bo-text);
  box-shadow:0 1px 3px rgba(15,35,39,.08)
}
.auth-card-v2 form {
  display:grid;
  gap:14px
}
.auth-card-v2 label {
  display:grid;
  gap:6px;
  font-size:10px;
  font-weight:760;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#4c5c5f
}
.auth-card-v2 input {
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  height:44px;
  border:1px solid #cbd4d1;
  border-radius:6px;
  background:#fff;
  padding:0 13px;
  color:var(--bo-text);
  outline:none
}
.auth-card-v2 input:focus {
  border-color:#5d8b8e;
  box-shadow:0 0 0 3px rgba(31,106,112,.08)
}
.auth-submit {
  width:100%;
  height:44px;
  border-radius:6px;
  margin-top:2px
}
.link-button {
  border:0;
  background:transparent;
  color:var(--bo-accent);
  padding:3px 0;
  text-align:left;
  font-size:11px;
  font-weight:700;
  cursor:pointer
}
.auth-legal {
  font-size:10px;
  color:#7a8789;
  margin:0;
  line-height:1.5
}
.logout-header {
  color:#713b3b
}
.logout-header:hover {
  background:#fff5f4!important;
  border-color:#d7b9b6!important
}
.logout-control {
  color:#d5dfdd!important;
  border:1px solid rgba(255,255,255,.08)!important;
  margin-top:5px
}
.logout-control:hover {
  background:rgba(255,255,255,.08)!important
}
/* Dashboard */ .command-dashboard {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:15px
}
.command-main,.command-side {
  display:grid;
  gap:15px;
  align-content:start
}
.command-welcome {
  background:#fff;
  border:1px solid var(--bo-line);
  padding:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.command-welcome h2 {
  font-size:26px;
  letter-spacing:-.03em;
  margin:5px 0
}
.command-welcome p {
  margin:0;
  color:var(--bo-muted)
}
.command-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.command-kpis {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#fff;
  border:1px solid var(--bo-line)
}
.command-kpis button {
  appearance:none;
  border:0;
  border-right:1px solid var(--bo-line);
  background:#fff;
  text-align:left;
  padding:18px;
  cursor:pointer
}
.command-kpis button:last-child {
  border-right:0
}
.command-kpis button:hover {
  background:#f7f9f7
}
.command-kpis span,.command-kpis small {
  display:block;
  color:var(--bo-muted);
  font-size:10px
}
.command-kpis strong {
  display:block;
  font-size:24px;
  margin:6px 0 2px;
  letter-spacing:-.03em
}
.dashboard-workgrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
.work-panel,.attention-panel,.health-panel {
  background:#fff;
  border:1px solid var(--bo-line);
  padding:18px
}
.panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px
}
.panel-head h3 {
  margin:2px 0 0;
  font-size:15px
}
.text-action {
  border:0;
  background:transparent;
  color:var(--bo-accent);
  font-weight:700;
  font-size:10px;
  cursor:pointer
}
.dash-schedule-row,.dash-ticket-row {
  display:grid;
  grid-template-columns:55px 1fr auto;
  align-items:center;
  gap:10px;
  padding:11px 0;
  border-top:1px solid #edf0ee
}
.dash-schedule-row time {
  font:700 11px ui-monospace,monospace;
  color:#344a4d
}
.dash-schedule-row b,.dash-ticket-row b {
  display:block;
  font-size:11px
}
.dash-schedule-row small,.dash-ticket-row small {
  display:block;
  font-size:10px;
  color:var(--bo-muted);
  margin-top:2px
}
.dash-ticket-row {
  grid-template-columns:8px 1fr auto
}
.priority-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8aa09a
}
.priority-dot.warn {
  background:#b4862f
}
.priority-dot.danger {
  background:#ae4242
}
.attention-count {
  min-width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#edf2f0;
  color:#38565a;
  font-weight:800;
  font-size:10px
}
.attention-row {
  width:100%;
  display:grid;
  grid-template-columns:3px 1fr;
  gap:10px;
  border:0;
  border-top:1px solid #edf0ee;
  background:#fff;
  padding:12px 0;
  text-align:left;
  cursor:pointer
}
.attention-row i {
  height:100%;
  min-height:32px;
  background:#9aa9a5;
  border-radius:2px
}
.attention-row.warn i {
  background:#b58b3d
}
.attention-row.danger i {
  background:#ab4646
}
.attention-row b,.attention-row small {
  display:block
}
.attention-row b {
  font-size:11px
}
.attention-row small {
  font-size:10px;
  color:var(--bo-muted);
  margin-top:2px
}
.health-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid #e6ebe8;
  margin-top:12px
}
.health-grid div {
  padding:12px;
  border-right:1px solid #e6ebe8;
  border-bottom:1px solid #e6ebe8
}
.health-grid div:nth-child(2n) {
  border-right:0
}
.health-grid div:nth-last-child(-n+2) {
  border-bottom:0
}
.health-grid span,.health-grid strong {
  display:block
}
.health-grid span {
  font-size:9px;
  color:var(--bo-muted)
}
.health-grid strong {
  font-size:16px;
  margin-top:4px
}
.period-switch {
  display:flex;
  gap:4px;
  margin-top:12px
}
.period-switch button {
  border:1px solid var(--bo-line);
  background:#fff;
  border-radius:4px;
  padding:5px 8px;
  font-size:9px;
  cursor:pointer
}
.period-switch button.active {
  background:var(--bo-ink);
  border-color:var(--bo-ink);
  color:#fff
}
/* Agenda */ .calendar-shell {
  display:grid;
  gap:12px
}
.calendar-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--bo-line);
  padding:14px 16px
}
.calendar-nav,.calendar-tools {
  display:flex;
  align-items:center;
  gap:7px
}
.calendar-period {
  margin-left:8px
}
.calendar-period h2 {
  font-size:16px;
  margin:1px 0
}
.square {
  width:36px;
  padding:0
}
.calendar-tools select {
  height:36px;
  border:1px solid var(--bo-line);
  background:#fff;
  border-radius:5px;
  padding:0 10px;
  color:var(--bo-text)
}
.view-switch {
  display:flex;
  border:1px solid var(--bo-line);
  padding:2px;
  background:#edf1ef;
  border-radius:5px
}
.view-switch button {
  border:0;
  background:transparent;
  border-radius:3px;
  padding:7px 10px;
  font-size:10px;
  font-weight:700;
  cursor:pointer
}
.view-switch button.active {
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06)
}
.calendar-summary {
  display:flex;
  gap:22px;
  background:#f9faf8;
  border:1px solid var(--bo-line);
  padding:9px 14px;
  color:var(--bo-muted);
  font-size:10px
}
.calendar-summary b {
  color:var(--bo-text);
  margin-right:3px
}
.week-calendar {
  display:grid;
  grid-template-columns:repeat(7,minmax(150px,1fr));
  background:#fff;
  border:1px solid var(--bo-line);
  overflow:auto
}
.week-day {
  min-height:520px;
  border-right:1px solid var(--bo-line);
  min-width:150px
}
.week-day:last-child {
  border-right:0
}
.week-day.today {
  background:#f8fbfa
}
.week-day-head {
  width:100%;
  height:68px;
  border:0;
  border-bottom:1px solid var(--bo-line);
  background:#f8f9f7;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  padding:10px;
  text-align:left;
  cursor:pointer
}
.week-day-head span {
  text-transform:uppercase;
  font-size:9px;
  color:var(--bo-muted);
  letter-spacing:.06em
}
.week-day-head b {
  font-size:20px;
  grid-row:1/3;
  grid-column:2;
  align-self:center
}
.week-day-head small {
  font-size:9px;
  color:#85918e
}
.week-day.today .week-day-head b {
  color:var(--bo-accent)
}
.week-day-body {
  padding:7px;
  display:grid;
  gap:6px
}
.calendar-event {
  display:grid;
  gap:3px;
  border:1px solid #dbe2df;
  border-left:3px solid #5b8588;
  background:#fff;
  padding:9px;
  text-align:left;
  border-radius:4px;
  cursor:pointer
}
.calendar-event:hover {
  background:#f6f9f8;
  border-color:#aec0bc
}
.calendar-event time {
  font:700 10px ui-monospace,monospace;
  color:#547073
}
.calendar-event b {
  font-size:10.5px
}
.calendar-event small,.calendar-event em {
  font-size:9px;
  color:var(--bo-muted);
  font-style:normal;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.calendar-empty-slot {
  border:1px dashed #d9dfdc;
  background:transparent;
  color:#91a09c;
  padding:10px;
  border-radius:4px;
  font-size:9px;
  cursor:pointer
}
.calendar-empty-slot:hover {
  border-color:#8ba8a3;
  color:var(--bo-accent)
}
.day-calendar {
  display:grid;
  grid-template-columns:68px minmax(0,1fr) 250px;
  background:#fff;
  border:1px solid var(--bo-line)
}
.day-hours {
  background:#f8f9f7;
  border-right:1px solid var(--bo-line);
  padding-top:63px
}
.day-hours div {
  height:58px;
  border-top:1px solid #e8ecea;
  padding:6px 8px;
  font:9px ui-monospace,monospace;
  color:#87938f
}
.day-agenda {
  padding:0 16px 18px
}
.day-agenda-head {
  height:62px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--bo-line)
}
.day-agenda-head h3 {
  font-size:14px;
  margin:0
}
.day-agenda-head span {
  font-size:10px;
  color:var(--bo-muted)
}
.day-event {
  display:grid;
  grid-template-columns:70px 1fr auto;
  gap:14px;
  align-items:start;
  padding:14px 0;
  border-bottom:1px solid #edf0ee
}
.day-event-time b,.day-event-time span {
  display:block
}
.day-event-time b {
  font:700 11px ui-monospace,monospace
}
.day-event-time span {
  font-size:9px;
  color:var(--bo-muted)
}
.day-event-body>div {
  display:flex;
  gap:8px;
  align-items:center
}
.day-event-body p,.day-event-body small {
  display:block;
  margin:4px 0 0;
  color:var(--bo-muted);
  font-size:10px
}
.day-team {
  background:#f8f9f7!important;
  color:var(--bo-text)!important;
  min-height:0!important;
  padding:16px!important;
  border-left:1px solid var(--bo-line)
}
.day-team h3 {
  font-size:12px;
  margin:0 0 10px
}
.staff-load {
  display:flex;
  justify-content:space-between;
  padding:9px 0;
  border-top:1px solid #e4e9e6;
  font-size:10px
}
/* Diagnostic */ .diagnostic-workspace {
  display:grid;
  grid-template-columns:330px minmax(0,1fr);
  gap:14px
}
.diagnostic-library {
  background:#fff;
  border:1px solid var(--bo-line);
  padding:14px;
  min-height:650px
}
.diag-lib-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:12px
}
.diag-lib-head h3 {
  margin:2px 0 0
}
.diag-lib-head>strong {
  font-size:22px
}
.diagnostic-library>input {
  width:100%;
  height:38px;
  border:1px solid var(--bo-line);
  padding:0 10px;
  border-radius:5px
}
.diag-categories {
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin:10px 0
}
.diag-categories button {
  border:1px solid #dce3e0;
  background:#fff;
  border-radius:4px;
  padding:5px 7px;
  font-size:9px;
  cursor:pointer;
  color:#566669
}
.diag-categories button.active {
  background:var(--bo-ink);
  border-color:var(--bo-ink);
  color:#fff
}
.diag-list {
  display:grid;
  gap:5px;
  max-height:540px;
  overflow:auto;
  padding-right:2px
}
.diag-scenario {
  display:flex!important;
  justify-content:space-between;
  align-items:center;
  gap:9px;
  border-radius:5px!important;
  padding:10px!important
}
.diag-scenario strong,.diag-scenario small {
  display:block
}
.diag-scenario strong {
  font-size:10.5px
}
.diag-scenario small {
  font-size:9px;
  color:var(--bo-muted);
  margin-top:2px
}
.severity-tag {
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:4px 5px;
  border-radius:3px;
  background:#edf2f0;
  color:#47625d;
  white-space:nowrap
}
.severity-tag.warn {
  background:#fff4d9;
  color:#795b16
}
.severity-tag.danger {
  background:#fde8e6;
  color:#963d3d
}
.diagnostic-main {
  min-width:0
}
.diagnostic-intro,.diag-run,.diag-result-page {
  background:#fff;
  border:1px solid var(--bo-line);
  padding:28px;
  min-height:650px
}
.diagnostic-intro h2 {
  font-size:28px;
  letter-spacing:-.035em;
  margin:8px 0 10px;
  max-width:650px
}
.diagnostic-intro>p {
  color:var(--bo-muted);
  max-width:700px
}
.diag-intro-grid {
  display:grid;
  grid-template-columns:repeat(3,130px);
  margin:26px 0;
  border:1px solid #e4e9e6;
  width:max-content
}
.diag-intro-grid div {
  padding:14px;
  border-right:1px solid #e4e9e6
}
.diag-intro-grid div:last-child {
  border-right:0
}
.diag-intro-grid b,.diag-intro-grid span {
  display:block
}
.diag-intro-grid b {
  font-size:21px
}
.diag-intro-grid span {
  font-size:9px;
  color:var(--bo-muted)
}
.diag-client-select {
  max-width:500px
}
.diag-recent {
  margin-top:30px;
  max-width:720px
}
.diag-recent h3 {
  font-size:12px
}
.diag-recent-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 0;
  border-top:1px solid #e8ecea
}
.diag-recent-row b,.diag-recent-row small {
  display:block
}
.diag-recent-row b {
  font-size:10.5px
}
.diag-recent-row small {
  font-size:9px;
  color:var(--bo-muted)
}
.diag-run-head,.diag-result-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px
}
.diag-run-head h2,.diag-result-head h2 {
  font-size:22px;
  margin:4px 0
}
.diag-stepbar {
  margin:20px 0
}
.diag-stepbar>div {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:var(--bo-muted)
}
.diag-stepbar i {
  display:block;
  height:5px;
  background:#e8edeb;
  margin-top:6px
}
.diag-stepbar u {
  display:block;
  height:100%;
  background:var(--bo-accent);
  text-decoration:none
}
.diag-question-card {
  margin-top:32px;
  padding:28px;
  border:1px solid #dfe6e3;
  background:#fbfcfb
}
.question-index {
  font-size:9px;
  color:#81908c;
  letter-spacing:.08em
}
.diag-question-card h3 {
  font-size:23px;
  line-height:1.3;
  max-width:760px;
  margin:10px 0 24px
}
.diag-answer-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px
}
.diag-answer-grid button {
  border:1px solid #d6ddda;
  background:#fff;
  padding:17px;
  text-align:left;
  cursor:pointer;
  border-radius:5px
}
.diag-answer-grid button:hover {
  border-color:#83a5a2;
  background:#f5f9f8
}
.diag-answer-grid b,.diag-answer-grid span {
  display:block
}
.diag-answer-grid b {
  font-size:12px
}
.diag-answer-grid span {
  font-size:9px;
  color:var(--bo-muted);
  margin-top:4px
}
.diag-run-actions {
  display:flex;
  justify-content:space-between;
  margin-top:18px
}
.diag-result-head p {
  margin:3px 0;
  color:var(--bo-muted)
}
.diag-result-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:18px 0
}
.diag-result-grid>section,.diag-selection>div {
  border:1px solid #dfe6e3;
  padding:17px
}
.diag-result-grid h3,.diag-selection h3 {
  font-size:12px;
  margin:0 0 10px
}
.diag-numbered {
  display:grid;
  grid-template-columns:30px 1fr;
  gap:8px;
  padding:8px 0;
  border-top:1px solid #edf0ee;
  font-size:10px
}
.diag-numbered b {
  font:700 9px ui-monospace,monospace;
  color:#79908a
}
.diag-answer-summary {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:8px 0;
  border-top:1px solid #edf0ee;
  font-size:10px
}
.diag-answer-summary b {
  white-space:nowrap
}
.diag-answer-summary b.yes {
  color:#256856
}
.diag-answer-summary b.no {
  color:#7b4646
}
.diag-answer-summary b.unknown {
  color:#7d6b37
}
.diag-selection {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.diag-selection p {
  font-size:9px;
  color:var(--bo-muted)
}
.diag-selection label {
  display:flex;
  gap:8px;
  padding:7px 0;
  border-top:1px solid #edf0ee;
  font-size:10px
}
.diag-vigilance {
  display:flex;
  gap:16px;
  padding:13px 16px;
  background:#f5f8f6;
  border-left:3px solid #78938c;
  margin-top:12px;
  font-size:10px
}
.diag-vigilance.warn {
  background:#fff9eb;
  border-color:#b58531
}
.diag-vigilance.danger {
  background:#fff0ef;
  border-color:#a44444
}
.diag-actions {
  justify-content:flex-end
}
/* Paramètres */ .settings-v8 {
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:14px
}
.settings-nav {
  background:#fff!important;
  color:var(--bo-text)!important;
  min-height:620px!important;
  padding:14px!important;
  border:1px solid var(--bo-line)
}
.settings-nav-head {
  padding:4px 8px 14px;
  border-bottom:1px solid var(--bo-line);
  margin-bottom:7px
}
.settings-nav-head h3 {
  margin:2px 0;
  font-size:15px
}
.settings-nav button {
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:10px;
  border-radius:4px;
  font-size:10.5px;
  font-weight:680;
  color:#586669;
  cursor:pointer
}
.settings-nav button:hover {
  background:#f5f7f5
}
.settings-nav button.active {
  background:#eaf1ef;
  color:#1d575d
}
.settings-workspace {
  background:#fff;
  border:1px solid var(--bo-line);
  min-width:0
}
.settings-workspace form {
  min-height:620px;
  display:flex;
  flex-direction:column
}
.settings-pane {
  display:none;
  padding:26px
}
.settings-pane.active {
  display:block
}
.settings-pane-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  border-bottom:1px solid var(--bo-line);
  padding-bottom:16px;
  margin-bottom:18px
}
.settings-pane-head h2 {
  font-size:20px;
  margin:4px 0
}
.settings-pane-head p {
  margin:0;
  color:var(--bo-muted);
  font-size:11px
}
.settings-form-block {
  max-width:840px
}
.document-settings-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:20px
}
.settings-doc-preview {
  background:#f4f6f4;
  padding:12px;
  border:1px solid #dde3e0;
  overflow:auto;
  max-height:660px
}
.settings-doc-preview .document-page {
  transform:scale(.72);
  transform-origin:top center;
  width:138%;
  margin-left:-19%;
  box-shadow:0 8px 24px rgba(0,0,0,.08)
}
.settings-option-list {
  display:grid;
  border:1px solid var(--bo-line);
  max-width:850px
}
.settings-option-list section {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:17px;
  border-top:1px solid var(--bo-line)
}
.settings-option-list section:first-child {
  border-top:0
}
.settings-option-list h3,.settings-option-list p {
  margin:0
}
.settings-option-list h3 {
  font-size:11px
}
.settings-option-list p {
  font-size:10px;
  color:var(--bo-muted);
  margin-top:3px
}
.settings-option-list select {
  height:36px;
  border:1px solid var(--bo-line);
  background:#fff;
  border-radius:5px;
  padding:0 10px
}
.shortcut-pair {
  display:flex;
  gap:5px
}
.shortcut-pair kbd {
  border:1px solid #d4dbd8;
  background:#f5f7f5;
  padding:5px 7px;
  border-radius:4px;
  font:9px ui-monospace,monospace
}
.settings-savebar {
  margin-top:auto;
  border-top:1px solid var(--bo-line);
  padding:13px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fafbfa
}
.settings-savebar span {
  font-size:9px;
  color:var(--bo-muted)
}
.danger-outline {
  color:#8b3838!important;
  border-color:#dabdbc!important
}
@media(max-width:1180px) {
  .command-dashboard {
    grid-template-columns:1fr
  }
  .command-side {
    grid-template-columns:1fr 1fr
  }
  .week-calendar {
    grid-template-columns:repeat(7,minmax(140px,1fr))
  }
  .document-settings-grid {
    grid-template-columns:1fr
  }
  .settings-doc-preview {
    max-height:520px
  }
  .diagnostic-workspace {
    grid-template-columns:280px minmax(0,1fr)
  }
}
@media(max-width:900px) {
  .auth-screen {
    padding:0
  }
  .auth-shell-v2 {
    width:100%;
    min-height:100vh;
    grid-template-columns:1fr;
    border:0
  }
  .auth-context {
    padding:24px 28px
  }
  .auth-context-copy {
    display:none
  }
  .auth-context-foot {
    display:none
  }
  .auth-panel {
    padding:34px 24px
  }
  .command-kpis {
    grid-template-columns:1fr 1fr
  }
  .command-kpis button:nth-child(2) {
    border-right:0
  }
  .command-kpis button:nth-child(-n+2) {
    border-bottom:1px solid var(--bo-line)
  }
  .dashboard-workgrid {
    grid-template-columns:1fr
  }
  .calendar-toolbar {
    align-items:flex-start;
    flex-direction:column
  }
  .calendar-tools {
    width:100%;
    flex-wrap:wrap
  }
  .week-calendar {
    overflow-x:auto
  }
  .day-calendar {
    grid-template-columns:1fr
  }
  .day-hours {
    display:none
  }
  .day-team {
    border-left:0;
    border-top:1px solid var(--bo-line)
  }
  .diagnostic-workspace,.settings-v8 {
    grid-template-columns:1fr
  }
  .diagnostic-library {
    min-height:auto
  }
  .diag-list {
    max-height:300px
  }
  .settings-nav {
    min-height:auto!important;
    display:flex;
    overflow:auto
  }
  .settings-nav-head {
    display:none
  }
  .settings-nav button {
    width:auto;
    white-space:nowrap
  }
  .diag-result-grid,.diag-selection {
    grid-template-columns:1fr
  }
}
@media(max-width:640px) {
  .auth-context {
    padding:18px 20px
  }
  .auth-panel {
    padding:26px 18px
  }
  .auth-card-v2 {
    max-width:none
  }
  .auth-tabs {
    margin-top:0
  }
  .command-welcome {
    align-items:flex-start;
    flex-direction:column;
    padding:18px
  }
  .command-kpis {
    grid-template-columns:1fr 1fr
  }
  .command-side {
    grid-template-columns:1fr
  }
  .calendar-nav {
    flex-wrap:wrap
  }
  .calendar-period {
    width:100%;
    margin:5px 0 0
  }
  .calendar-tools select {
    flex:1
  }
  .diagnostic-intro,.diag-run,.diag-result-page {
    padding:18px;
    min-height:0
  }
  .diag-intro-grid {
    grid-template-columns:repeat(3,1fr);
    width:100%
  }
  .diag-answer-grid {
    grid-template-columns:1fr
  }
  .diag-question-card h3 {
    font-size:18px
  }
  .settings-pane {
    padding:18px
  }
  .settings-option-list section {
    align-items:flex-start;
    flex-direction:column
  }
  .logout-header {
    display:none
  }
}
/* Bordeck Ops V9 — agenda mois, diagnostics & rapports client */ .client-hub-tabs {
  display:flex;
  gap:4px;
  margin:14px 0 12px;
  border-bottom:1px solid var(--line)
}
.client-hub-tabs button {
  border:0;
  background:transparent;
  padding:10px 14px;
  color:var(--muted);
  font-weight:650;
  border-bottom:2px solid transparent
}
.client-hub-tabs button.active {
  color:var(--accent);
  border-bottom-color:var(--accent)
}
.client-hub-pane {
  min-width:0
}
.client-linked-module {
  background:#fff;
  border:1px solid var(--line);
  border-radius:7px;
  padding:18px
}
.linked-module-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px
}
.linked-module-head h3 {
  margin:2px 0 4px;
  font-size:17px
}
.linked-module-head p {
  margin:0;
  color:var(--muted);
  font-size:12px
}
.diagnostic-history {
  display:grid;
  gap:10px
}
.diagnostic-history-card {
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px;
  background:#fbfcfa
}
.diag-history-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start
}
.diag-history-head strong,.diag-history-head small {
  display:block
}
.diag-history-head small {
  margin-top:3px;
  color:var(--muted);
  font-size:10.5px
}
.diag-history-meta {
  display:flex;
  gap:18px;
  padding:10px 0;
  color:var(--muted);
  font-size:11px
}
.diag-history-meta b {
  color:var(--text)
}
.diagnostic-history-card pre,.preformatted {
  white-space:pre-wrap;
  margin:0;
  background:#f3f5f2;
  border:1px solid var(--line);
  padding:11px;
  border-radius:5px;
  font:11.5px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#39494d
}
.diagnostic-history-card details {
  margin-top:8px
}
.diagnostic-history-card summary {
  cursor:pointer;
  font-size:11px;
  font-weight:700;
  color:var(--accent);
  margin-bottom:6px
}
.report-history {
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden
}
.report-history-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 16px;
  border-top:1px solid var(--line);
  background:#fff
}
.report-history-row:first-child {
  border-top:0
}
.report-history-row strong,.report-history-row small {
  display:block
}
.report-history-row small {
  margin-top:3px;
  color:var(--muted);
  font-size:10.5px
}
.report-history-row p {
  margin:6px 0 0;
  color:#536469;
  font-size:11.5px;
  max-width:780px
}
.reports-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
  padding:18px 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:7px
}
.reports-head h2 {
  margin:3px 0 4px;
  font-size:20px
}
.reports-head p {
  margin:0;
  color:var(--muted);
  font-size:12px
}
.reports-count {
  text-align:right
}
.reports-count strong {
  display:block;
  font-size:24px
}
.reports-count span {
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em
}
.report-row {
  grid-template-columns:1.35fr 1fr .7fr .6fr 1.5fr auto
}
.month-weekdays {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  border:1px solid var(--line);
  border-bottom:0;
  background:#f7f8f6;
  border-radius:7px 7px 0 0;
  overflow:hidden
}
.month-weekdays span {
  padding:8px 10px;
  border-left:1px solid var(--line);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted)
}
.month-weekdays span:first-child {
  border-left:0
}
.month-calendar {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  border:1px solid var(--line);
  border-radius:0 0 7px 7px;
  overflow:hidden;
  background:#fff
}
.month-day {
  min-height:132px;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  padding:7px;
  background:#fff;
  min-width:0
}
.month-day:nth-child(7n+1) {
  border-left:0
}
.month-day:nth-child(-n+7) {
  border-top:0
}
.month-day.outside {
  background:#f8f9f7;
  color:#9aa5a8
}
.month-day.today {
  box-shadow:inset 0 0 0 2px var(--accent)
}
.month-day-head {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:0;
  background:transparent;
  padding:2px 3px 6px;
  color:inherit
}
.month-day-head b {
  font-size:12px
}
.month-day-head span {
  font-size:9px;
  color:var(--accent);
  background:var(--accent-soft);
  padding:1px 5px;
  border-radius:10px
}
.month-day-events {
  display:grid;
  gap:4px
}
.month-event {
  display:flex;
  gap:5px;
  align-items:center;
  width:100%;
  border:0;
  background:#eef3f1;
  color:#29484d;
  border-radius:4px;
  padding:5px 6px;
  text-align:left;
  min-width:0
}
.month-event time {
  font-size:9px;
  font-weight:750
}
.month-event span {
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.month-more,.month-add {
  border:0;
  background:transparent;
  color:var(--accent);
  font-size:9.5px;
  text-align:left;
  padding:3px 4px
}
.month-add {
  opacity:.45
}
.month-day:hover .month-add {
  opacity:1
}
@media(max-width:1050px) {
  .report-row {
    grid-template-columns:1.3fr .9fr .7fr auto
  }
  .report-row>span:nth-child(4),.report-row>span:nth-child(5) {
    display:none
  }
  .month-day {
    min-height:105px
  }
  .month-event em {
    display:none
  }
}
@media(max-width:760px) {
  .client-hub-tabs {
    overflow-x:auto
  }
  .client-hub-tabs button {
    white-space:nowrap
  }
  .linked-module-head,.report-history-row,.reports-head {
    align-items:stretch;
    flex-direction:column
  }
  .month-weekdays,.month-calendar {
    min-width:760px
  }
  .calendar-shell {
    overflow-x:auto
  }
  .report-row {
    grid-template-columns:1fr auto
  }
  .report-row>span:nth-child(2),.report-row>span:nth-child(3),.report-row>span:nth-child(4),.report-row>span:nth-child(5) {
    display:none
  }
}
/* V11 — accueil/authentification : proportions stables + formulaire toujours visible */ .auth-screen {
  min-height:100dvh;
  padding:24px;
  background:#eef1ef;
  display:grid;
  place-items:center;
  overflow:auto
}
.auth-shell-v2 {
  width:min(1240px,100%);
  min-height:min(760px,calc(100dvh - 48px));
  grid-template-columns:minmax(0,1fr) minmax(500px,.82fr);
  align-items:stretch
}
.auth-context {
  padding:44px 48px
}
.auth-context-copy {
  max-width:560px
}
.auth-context-copy h1 {
  font-size:clamp(34px,3.1vw,48px);
  max-width:560px
}
.auth-panel {
  padding:34px 44px;
  align-items:center
}
.auth-card-v2 {
  max-width:500px
}
.auth-tabs button {
  padding:0 14px;
  white-space:nowrap
}
.auth-card-head {
  padding:18px 0 20px;
  margin-bottom:20px
}
.auth-card-v2 form {
  gap:12px
}
.auth-card-v2 input {
  height:42px
}
.auth-submit {
  height:42px
}
.auth-legal {
  padding-bottom:2px
}
@media(max-height:780px) and (min-width:901px) {
  .auth-screen {
    padding:12px
  }
  .auth-shell-v2 {
    min-height:calc(100dvh - 24px)
  }
  .auth-context {
    padding:34px 42px
  }
  .auth-context-copy h1 {
    font-size:36px;
    margin:14px 0 14px
  }
  .auth-context-copy p {
    margin:0
  }
  .auth-proof {
    margin-top:18px
  }
  .auth-panel {
    padding:22px 38px
  }
  .auth-card-head {
    padding:14px 0 16px;
    margin-bottom:16px
  }
  .auth-card-v2 form {
    gap:10px
  }
  .auth-card-v2 input,.auth-submit {
    height:40px
  }
}
@media(max-width:900px) {
  .auth-screen {
    padding:0
  }
  .auth-shell-v2 {
    width:100%;
    min-height:100dvh;
    grid-template-columns:1fr
  }
  .auth-panel {
    padding:30px 24px
  }
  .auth-card-v2 {
    max-width:520px
  }
}
/* V12 — accueil remodelé : proportions déterministes, sans débordement */ .auth-screen {
  min-height:100dvh;
  padding:28px;
  display:grid;
  place-items:center;
  background:#edf1ee;
  overflow:auto;
}
.auth-shell-v2 {
  width:min(1160px,calc(100vw - 56px));
  min-height:min(700px,calc(100dvh - 56px));
  display:grid;
  grid-template-columns:minmax(0,1fr) 460px;
  align-items:stretch;
  border:1px solid #d4dcda;
  background:#fff;
  box-shadow:0 24px 65px rgba(18,37,40,.10);
  overflow:hidden;
}
.auth-context {
  min-width:0;
  padding:42px 48px;
  display:flex;
  flex-direction:column;
  background:#10272b;
}
.auth-context-copy {
  margin:auto 0;
  max-width:520px;
}
.auth-context-copy h1 {
  max-width:520px;
  font-size:clamp(34px,3vw,43px);
  line-height:1.06;
  margin:16px 0 18px;
}
.auth-context-copy p {
  max-width:500px;
  font-size:14px;
  line-height:1.6;
}
.auth-proof {
  margin-top:22px
}
.auth-panel {
  min-width:0;
  padding:34px 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fbfcfb;
}
.auth-card.auth-card-v2 {
  width:100%!important;
  max-width:396px!important;
  min-width:0;
  margin:0 auto;
}
.auth-tabs {
  width:100%;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.auth-tabs button {
  width:100%;
  min-width:0;
  padding:0 10px;
  white-space:nowrap;
  font-size:12px;
}
.auth-card-head {
  padding:17px 0 19px;
  margin-bottom:19px
}
.auth-card-head h2 {
  font-size:23px;
  line-height:1.2;
  max-width:100%
}
.auth-card-v2 form {
  width:100%;
  gap:11px
}
.auth-card-v2 label,.auth-card-v2 input,.auth-submit {
  width:100%;
  min-width:0
}
.auth-card-v2 input {
  height:41px
}
.auth-submit {
  height:41px
}
@media(max-height:760px) and (min-width:981px) {
  .auth-screen {
    padding:14px
  }
  .auth-shell-v2 {
    min-height:calc(100dvh - 28px);
    width:min(1160px,calc(100vw - 28px))
  }
  .auth-context {
    padding:30px 42px
  }
  .auth-context-copy h1 {
    font-size:34px;
    margin:12px 0 13px
  }
  .auth-context-copy p {
    font-size:13px;
    margin:0
  }
  .auth-proof {
    margin-top:14px
  }
  .auth-context-foot {
    display:none
  }
  .auth-panel {
    padding:20px 30px
  }
  .auth-card-head {
    padding:12px 0 14px;
    margin-bottom:14px
  }
  .auth-card-v2 form {
    gap:9px
  }
  .auth-card-v2 input,.auth-submit {
    height:38px
  }
}
@media(max-width:980px) {
  .auth-screen {
    padding:0;
    display:block;
    background:#fbfcfb
  }
  .auth-shell-v2 {
    width:100%;
    min-height:100dvh;
    grid-template-columns:1fr;
    border:0;
    box-shadow:none;
  }
  .auth-context {
    min-height:auto;
    padding:20px 24px;
  }
  .auth-context-copy,.auth-context-foot {
    display:none
  }
  .auth-panel {
    padding:32px 24px 44px;
    align-items:flex-start;
  }
  .auth-card.auth-card-v2 {
    max-width:430px!important
  }
}
@media(max-width:520px) {
  .auth-context {
    padding:16px 18px
  }
  .auth-panel {
    padding:24px 18px 36px
  }
  .auth-card-head h2 {
    font-size:21px
  }
  .auth-tabs button {
    font-size:11px;
    padding:0 6px
  }
}
/* Bordeck Ops V13 — technical IT entry */ .auth-context {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#0d2428
}
.auth-context::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:linear-gradient(rgba(133,180,180,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(133,180,180,.055) 1px,transparent 1px);
  background-size:28px 28px
}
.auth-context::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:116px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(151,200,198,.23),transparent);
  z-index:-1
}
.auth-tech-copy {
  max-width:570px
}
.auth-statusline {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
  font:600 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.11em;
  color:#91a9a7
}
.auth-statusline strong {
  color:#cfe5df
}
.auth-statusline span:last-child {
  margin-left:auto;
  color:#718d8a
}
.auth-status-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#63b49d;
  box-shadow:0 0 0 3px rgba(99,180,157,.11)
}
.auth-tech-copy .auth-kicker {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#7fa4a1
}
.auth-tech-copy h1 {
  font-size:clamp(35px,3.25vw,46px);
  max-width:560px
}
.auth-tech-copy p {
  color:#b5c7c4;
  max-width:540px
}
.auth-tech-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:26px;
  border:1px solid rgba(163,194,191,.18);
  background:rgba(3,18,21,.22)
}
.auth-tech-grid>div {
  min-width:0;
  padding:14px 15px;
  border-right:1px solid rgba(163,194,191,.14);
  border-bottom:1px solid rgba(163,194,191,.14)
}
.auth-tech-grid>div:nth-child(2n) {
  border-right:0
}
.auth-tech-grid>div:nth-last-child(-n+2) {
  border-bottom:0
}
.auth-tech-grid b {
  display:block;
  margin-bottom:7px;
  color:#6ea3a1;
  font:600 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.09em
}
.auth-tech-grid span {
  display:block;
  color:#e7efed;
  font-size:12px;
  font-weight:700
}
.auth-tech-grid small {
  display:block;
  margin-top:4px;
  color:#78918e;
  font-size:10px;
  line-height:1.35
}
.auth-tech-metrics {
  display:flex;
  gap:0;
  margin-top:14px;
  border-top:1px solid rgba(163,194,191,.15);
  border-bottom:1px solid rgba(163,194,191,.15)
}
.auth-tech-metrics span {
  flex:1;
  padding:10px 8px;
  color:#78918e;
  font:500 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-right:1px solid rgba(163,194,191,.12)
}
.auth-tech-metrics span:last-child {
  border-right:0
}
.auth-tech-metrics b {
  display:block;
  color:#d9e9e5;
  font-size:11px;
  margin-bottom:3px
}
.auth-context-brand .brand {
  letter-spacing:.055em
}
.bordeck-symbol {
  box-shadow:inset 0 0 0 1px rgba(10,60,63,.08)
}
.auth-panel {
  background:#f8faf9
}
.auth-tabs {
  border:1px solid #cbd6d3;
  background:#edf2f0
}
.auth-tabs button {
  font-weight:700;
  letter-spacing:.01em
}
.auth-card-head .auth-section-label {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#648481
}
.auth-card-v2 label {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:10px
}
.auth-card-v2 input {
  background:#fff;
  border-color:#c7d2d0
}
.auth-submit {
  letter-spacing:.01em
}
@media(max-height:760px) and (min-width:981px) {
  .auth-statusline {
    margin-bottom:12px
  }
  .auth-tech-grid {
    margin-top:14px
  }
  .auth-tech-grid>div {
    padding:9px 12px
  }
  .auth-tech-grid small {
    display:none
  }
  .auth-tech-metrics {
    margin-top:8px
  }
  .auth-tech-metrics span {
    padding:7px 6px
  }
  .auth-tech-copy h1 {
    font-size:34px
  }
  .auth-tech-copy p {
    font-size:12px
  }
}
@media(max-width:980px) {
  .auth-statusline,.auth-tech-grid,.auth-tech-metrics {
    display:none
  }
  .auth-context::before {
    background-size:24px 24px
  }
}
\n\n/* Bordeck Ops V14 — Infrastructure visual language */\n.auth-context {
  background:#0b2025
}
\n.auth-context::before {
  background-image:linear-gradient(rgba(122,170,174,.052) 1px,transparent 1px),linear-gradient(90deg,rgba(122,170,174,.052) 1px,transparent 1px);
  background-size:30px 30px
}
\n.auth-context::after {
  top:112px;
  background:linear-gradient(90deg,transparent,rgba(123,181,181,.22),transparent)
}
\n.auth-statusline strong {
  color:#d5e8e4
}
.auth-status-dot {
  background:#72b59f
}
\n.infra-topology {
  position:relative;
  height:78px;
  margin:21px 0 13px;
  border:1px solid rgba(151,190,188,.16);
  background:rgba(2,16,19,.2);
  overflow:hidden
}
\n.infra-topology::before {
  content:"CARTE INFRASTRUCTURE";
  position:absolute;
  top:7px;
  left:9px;
  color:#597a79;
  font:600 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.1em
}
\n.infra-node {
  position:absolute;
  z-index:2;
  display:grid;
  grid-template-columns:7px auto;
  column-gap:6px;
  align-items:center;
  color:#dce9e6;
  font:600 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.06em
}
\n.infra-node i {
  width:7px;
  height:7px;
  border:1px solid #78aaa5;
  background:#1d4b4e;
  box-shadow:0 0 0 3px rgba(74,126,125,.12)
}
\n.infra-node b {
  font-size:9px
}
.infra-node small {
  grid-column:2;
  color:#627f7d;
  font-size:7px;
  margin-top:3px;
  letter-spacing:.04em
}
\n.infra-node.core {
  left:50%;
  top:29px;
  transform:translateX(-50%)
}
.infra-node.core i {
  background:#6aa995;
  border-color:#9bd0c0
}
\n.infra-node.n1 {
  left:10%;
  top:43px
}
.infra-node.n2 {
  right:9%;
  top:21px
}
.infra-node.n3 {
  right:22%;
  top:52px
}
\n.infra-link {
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,rgba(100,151,149,.08),rgba(100,151,149,.45),rgba(100,151,149,.08));
  transform-origin:left center;
  z-index:1
}
\n.infra-link.l1 {
  left:14%;
  top:48px;
  width:37%;
  transform:rotate(-3deg)
}
.infra-link.l2 {
  left:51%;
  top:36px;
  width:37%;
  transform:rotate(-16deg)
}
.infra-link.l3 {
  left:51%;
  top:41px;
  width:28%;
  transform:rotate(12deg)
}
\n.auth-tech-grid {
  margin-top:0;
  background:rgba(1,14,17,.18)
}
.auth-tech-grid span {
  letter-spacing:.01em
}
.auth-tech-grid small {
  color:#718c89
}
\n.auth-context-foot {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:8px
}
\n.brand-meta {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace
}
\n/* application shell: infrastructure cues, not decorative */\naside {
  background:#102529
}
.brand-wrap {
  border-bottom-color:rgba(150,190,187,.14)
}
\n.workspace-chip::before {
  content:"ESPACE / ACTIF";
  display:block;
  margin-bottom:5px;
  color:#66817f;
  font:600 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.09em
}
\n.command-welcome {
  border-top:2px solid #315f63
}
.command-welcome .eyebrow,.health-panel .eyebrow {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace
}
\n.command-kpis button strong {
  font-variant-numeric:tabular-nums
}
.health-grid strong {
  font-variant-numeric:tabular-nums
}
\n@media(max-height:760px) and (min-width:981px) {
  .infra-topology {
    height:54px;
    margin:9px 0
  }
  .infra-topology::before {
    display:none
  }
  .infra-node {
    transform:scale(.88);
    transform-origin:left center
  }
  .infra-node.core {
    transform:translateX(-50%) scale(.88);
    top:18px
  }
  .infra-node.n1 {
    top:29px
  }
  .infra-node.n2 {
    top:12px
  }
  .infra-node.n3 {
    top:34px
  }
  .infra-link.l1 {
    top:33px
  }
  .infra-link.l2 {
    top:25px
  }
  .infra-link.l3 {
    top:28px
  }
}
\n@media(max-width:980px) {
  .infra-topology {
    display:none
  }
}
\n /* Bordeck Ops V15 — simplified access screen */ .auth-screen {
  background:#eef2f0;
  padding:28px;
  display:grid;
  place-items:center
}
.auth-shell-v2 {
  width:min(1120px,calc(100vw - 56px));
  min-height:650px;
  grid-template-columns:minmax(0,1fr) 470px;
  border:1px solid #d7dfdc;
  box-shadow:0 24px 64px rgba(18,35,38,.10);
  background:#fff
}
.auth-context-simple {
  background:#10292d;
  padding:48px 52px;
  position:relative;
  overflow:hidden
}
.auth-context-simple::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 18% 20%,rgba(92,151,149,.10),transparent 35%);
  pointer-events:none
}
.auth-context-simple::after {
  display:none
}
.auth-context-simple .auth-context-brand {
  position:relative;
  z-index:1
}
.auth-context-simple .auth-context-brand small {
  color:#86a4a3;
  letter-spacing:.16em
}
.auth-simple-copy {
  position:relative;
  z-index:1;
  margin:auto 0;
  max-width:520px
}
.auth-simple-copy .auth-kicker {
  font-family:inherit;
  color:#76a2a2;
  font-size:10px;
  letter-spacing:.13em
}
.auth-simple-copy h1 {
  margin:13px 0 16px;
  max-width:520px;
  font-size:46px;
  line-height:1.04;
  letter-spacing:-.048em;
  color:#fff
}
.auth-simple-copy>p {
  margin:0;
  max-width:480px;
  color:#b9c9c7;
  font-size:15px;
  line-height:1.65
}
.auth-simple-points {
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:34px;
  border-top:1px solid rgba(183,211,207,.15);
  border-bottom:1px solid rgba(183,211,207,.15)
}
.auth-simple-points>div {
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  column-gap:10px;
  padding:13px 0;
  border-bottom:1px solid rgba(183,211,207,.10)
}
.auth-simple-points>div:last-child {
  border-bottom:0
}
.auth-simple-points span {
  grid-row:1/3;
  color:#62898a;
  font:700 9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
  padding-top:2px
}
.auth-simple-points b {
  color:#eef5f3;
  font-size:12px;
  line-height:1.3
}
.auth-simple-points small {
  color:#75908e;
  font-size:10px;
  line-height:1.4;
  margin-top:2px
}
.auth-context-simple .auth-context-foot {
  position:relative;
  z-index:1;
  font-size:8px;
  color:#66817f;
  letter-spacing:.12em
}
.auth-panel {
  background:#fbfcfb;
  padding:48px 38px
}
.auth-card.auth-card-v2 {
  max-width:390px!important
}
.auth-tabs {
  border-radius:6px;
  padding:3px;
  background:#edf2f0
}
.auth-tabs button {
  min-height:40px;
  font-size:12px
}
.auth-card-head {
  padding:20px 0 20px;
  margin-bottom:22px
}
.auth-card-head h2 {
  font-size:25px;
  letter-spacing:-.03em
}
.auth-card-head p {
  font-size:12px
}
.auth-card-v2 form {
  gap:13px
}
.auth-card-v2 input,.auth-submit {
  height:44px
}
.auth-section-label {
  font-family:inherit!important;
  letter-spacing:.11em
}
.auth-card-v2 label {
  font-family:inherit!important;
  font-size:10px
}
@media(max-height:760px) and (min-width:981px) {
  .auth-screen {
    padding:14px
  }
  .auth-shell-v2 {
    min-height:calc(100dvh - 28px);
    width:min(1080px,calc(100vw - 28px));
    grid-template-columns:minmax(0,1fr) 440px
  }
  .auth-context-simple {
    padding:30px 38px
  }
  .auth-simple-copy h1 {
    font-size:36px
  }
  .auth-simple-copy>p {
    font-size:13px
  }
  .auth-simple-points {
    margin-top:20px
  }
  .auth-simple-points>div {
    padding:9px 0
  }
  .auth-panel {
    padding:24px 30px
  }
  .auth-card-head {
    padding:14px 0;
    margin-bottom:15px
  }
}
@media(max-width:980px) {
  .auth-screen {
    padding:0;
    background:#fbfcfb
  }
  .auth-shell-v2 {
    width:100%;
    min-height:100dvh;
    grid-template-columns:1fr;
    border:0;
    box-shadow:none
  }
  .auth-context-simple {
    padding:22px 24px;
    min-height:auto
  }
  .auth-simple-copy {
    display:none
  }
  .auth-context-simple .auth-context-foot {
    display:none
  }
  .auth-panel {
    padding:34px 24px 48px
  }
  .auth-card.auth-card-v2 {
    max-width:430px!important
  }
}
@media(max-width:520px) {
  .auth-panel {
    padding:26px 18px 38px
  }
  .auth-context-simple {
    padding:16px 18px
  }
  .auth-card-head h2 {
    font-size:22px
  }
}
/* Bordeck Ops V16 — client hub, tickets and document customization */ .client-hub-tabs-wide {
  display:flex;
  gap:4px;
  overflow:auto;
  padding-bottom:2px
}
.client-hub-tabs-wide button {
  white-space:nowrap;
  min-width:max-content
}
.client-summary-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px
}
.client-summary-grid h3,.client-summary-grid p {
  margin:4px 0
}
.client-summary-grid p {
  font-size:11px;
  color:var(--bo-muted)
}
.client-doc-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.client-ticket-groups {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px
}
.client-ticket-groups h4 {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 0 8px;
  font-size:12px
}
.client-ticket-groups h4 span {
  font:700 10px ui-monospace,monospace;
  color:var(--bo-muted)
}
.ticket-hub-list {
  display:grid;
  border:1px solid var(--bo-line)
}
.ticket-hub-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:0;
  border-top:1px solid var(--bo-line);
  background:#fff;
  padding:12px;
  text-align:left;
  cursor:pointer
}
.ticket-hub-item:first-child {
  border-top:0
}
.ticket-hub-item:hover {
  background:#f6f8f7
}
.ticket-hub-item.archived {
  background:#fafbfa;
  color:#667471
}
.ticket-hub-item span:first-child {
  display:grid;
  gap:3px
}
.ticket-hub-item small {
  color:var(--bo-muted)
}
.ticket-command {
  display:grid;
  gap:14px
}
.ticket-summary {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--bo-line);
  background:#fff
}
.ticket-summary>div {
  padding:14px 16px;
  border-left:1px solid var(--bo-line)
}
.ticket-summary>div:first-child {
  border-left:0
}
.ticket-summary span {
  display:block;
  font-size:9px;
  color:var(--bo-muted);
  text-transform:uppercase;
  letter-spacing:.06em
}
.ticket-summary b {
  font-size:21px
}
.ticket-toolbar {
  align-items:center;
  flex-wrap:wrap
}
.ticket-view-tabs {
  display:flex;
  border:1px solid var(--bo-line);
  background:#f7f9f8;
  padding:2px;
  border-radius:5px
}
.ticket-view-tabs button {
  border:0;
  background:transparent;
  padding:8px 10px;
  font-size:10px;
  cursor:pointer
}
.ticket-view-tabs button.active {
  background:#fff;
  color:var(--primary);
  box-shadow:0 0 0 1px var(--bo-line)
}
.ticket-queue.organized {
  display:grid;
  border:1px solid var(--bo-line);
  background:#fff
}
.ticket-list-head,.ticket-list-row {
  display:grid;
  grid-template-columns:minmax(280px,2fr) 110px 150px 150px 110px;
  gap:12px;
  align-items:center
}
.ticket-list-head {
  padding:9px 14px;
  background:#f5f7f6;
  color:var(--bo-muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.05em
}
.ticket-list-row {
  width:100%;
  border:0;
  border-top:1px solid var(--bo-line);
  background:#fff;
  padding:12px 14px;
  text-align:left;
  cursor:pointer
}
.ticket-list-row:hover {
  background:#f8faf9
}
.ticket-list-row.archived {
  background:#fbfcfb;
  color:#667471
}
.ticket-list-row.ticket-late {
  box-shadow:inset 3px 0 #b85b54
}
.ticket-list-row .ticket-main {
  display:grid;
  gap:3px
}
.ticket-list-row small {
  color:var(--bo-muted)
}
.document-toggle-grid {
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:8px 14px;
  border:1px solid var(--bo-line);
  padding:12px;
  background:#fafbfa
}
.document-toggle-grid label {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px
}
.document-toggle-grid input {
  width:auto
}
.settings-doc-preview {
  overflow:auto;
  display:block
}
.settings-doc-preview .document-page {
  transform:none!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:22px!important;
  font-size:9px!important;
  box-shadow:none!important;
  border:1px solid #d8e0dd!important
}
.settings-doc-preview .doc-header {
  gap:10px
}
.settings-doc-preview .doc-brand h2 {
  font-size:15px
}
.settings-doc-preview .doc-logo,.settings-doc-preview .doc-logo-placeholder {
  width:36px;
  height:36px
}
.settings-doc-preview .doc-ref strong {
  font-size:12px
}
.settings-doc-preview .doc-client {
  margin:12px 0;
  padding:10px
}
.settings-doc-preview .doc-summary {
  grid-template-columns:repeat(2,1fr);
  margin:12px 0
}
.settings-doc-preview .doc-lines {
  margin:12px 0
}
.settings-doc-preview .doc-totals {
  width:220px;
  margin:12px 0 12px auto
}
.doc-layout-compact {
  padding:12mm 13mm;
  font-size:11px
}
.doc-layout-compact .doc-header {
  margin-bottom:14px;
  padding-bottom:12px
}
.doc-layout-compact .doc-client {
  margin:14px 0;
  padding:11px
}
.doc-layout-compact .doc-block {
  margin:11px 0
}
.doc-layout-minimal .doc-header {
  border-bottom:1px solid #cfd8d5
}
.doc-layout-minimal .doc-client {
  background:#fff;
  border-left:0;
  border:1px solid #e3e7e5
}
.doc-layout-minimal .doc-note {
  background:#fff;
  border:1px solid #e3e7e5
}
.doc-signature {
  display:grid;
  grid-template-columns:1fr 180px;
  align-items:end;
  gap:16px;
  margin-top:30px
}
.doc-signature span {
  font-size:10px;
  color:#64748b;
  text-transform:uppercase
}
.doc-signature div {
  height:54px;
  border-bottom:1px solid #9ca3af
}
.doc-kind-note {
  border-left:3px solid var(--doc-accent)
}
@media(max-width:1100px) {
  .client-doc-grid,.client-ticket-groups,.client-summary-grid {
    grid-template-columns:1fr
  }
  .ticket-list-head {
    display:none
  }
  .ticket-list-row {
    grid-template-columns:1fr 100px 120px
  }
  .ticket-list-row>span:nth-child(4),.ticket-list-row>span:nth-child(5) {
    display:none
  }
  .ticket-summary {
    grid-template-columns:1fr 1fr
  }
  .ticket-summary>div:nth-child(3) {
    border-left:0;
    border-top:1px solid var(--bo-line)
  }
  .ticket-summary>div:nth-child(4) {
    border-top:1px solid var(--bo-line)
  }
}
@media(max-width:700px) {
  .ticket-list-row {
    grid-template-columns:1fr
  }
  .ticket-list-row>span:not(.ticket-main) {
    display:none
  }
  .ticket-view-tabs {
    overflow:auto;
    width:100%
  }
  .document-toggle-grid {
    grid-template-columns:1fr
  }
}

/* ========================================================================== */
/* Bordeck Ops V17 — Product Stabilization                                    */
/* ========================================================================== */

:root {
  color-scheme: light;
  --bo-bg: #f3f5f2;
  --bo-surface: #ffffff;
  --bo-surface-2: #f7f9f7;
  --bo-border: #d8dfdc;
  --bo-text: #142225;
  --bo-muted: #617074;
  --bo-accent: #1f6670;
  --bo-accent-strong: #174f57;
  --bo-sidebar: #10272b;
  --bo-sidebar-text: #edf5f3;
  --bo-danger: #b42318;
  --bo-shadow: 0 14px 32px rgba(20, 34, 37, 0.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bo-bg: #0b1214;
  --bo-surface: #111b1e;
  --bo-surface-2: #162226;
  --bo-border: #29383c;
  --bo-text: #edf3f2;
  --bo-muted: #9aa9ac;
  --bo-accent: #5aa3ad;
  --bo-accent-strong: #75bac2;
  --bo-sidebar: #071013;
  --bo-sidebar-text: #edf5f3;
  --bo-danger: #ff8e84;
  --bo-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

body {
  background: var(--bo-bg);
  color: var(--bo-text);
}

html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] .page,
html[data-theme="dark"] .content-area {
  background: var(--bo-bg) !important;
  color: var(--bo-text);
}

html[data-theme="dark"] aside {
  background: var(--bo-sidebar) !important;
  color: var(--bo-sidebar-text);
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] header,
html[data-theme="dark"] .card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .settings-workspace,
html[data-theme="dark"] .settings-form-block,
html[data-theme="dark"] .settings-option-list section,
html[data-theme="dark"] .settings-doc-preview,
html[data-theme="dark"] .client-hub,
html[data-theme="dark"] .client-hub-main,
html[data-theme="dark"] .client-summary,
html[data-theme="dark"] .ticket-detail .card,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .quick-menu,
html[data-theme="dark"] .notif-panel,
html[data-theme="dark"] .search-modal,
html[data-theme="dark"] .billing-shell,
html[data-theme="dark"] .auth-access,
html[data-theme="dark"] .auth-access-inner {
  background: var(--bo-surface) !important;
  color: var(--bo-text) !important;
  border-color: var(--bo-border) !important;
  box-shadow: var(--bo-shadow);
}

html[data-theme="dark"] .auth-screen {
  background: #0c1517 !important;
}

html[data-theme="dark"] .auth-context,
html[data-theme="dark"] .auth-context-simple {
  background: #0e2529 !important;
  color: #f0f6f4 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .auth-card input {
  background: #0c1518 !important;
  color: var(--bo-text) !important;
  border-color: #34464b !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #728488;
}

html[data-theme="dark"] table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] .list-row,
html[data-theme="dark"] .timeline-item,
html[data-theme="dark"] .ticket-comment,
html[data-theme="dark"] .search-result,
html[data-theme="dark"] .notification-row {
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] th,
html[data-theme="dark"] .muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .page-subtitle,
html[data-theme="dark"] .eyebrow {
  color: var(--bo-muted) !important;
}

html[data-theme="dark"] .secondary,
html[data-theme="dark"] .utility-btn,
html[data-theme="dark"] .status-chip,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .client-tab,
html[data-theme="dark"] .settings-nav button {
  background: var(--bo-surface-2) !important;
  color: var(--bo-text) !important;
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .primary,
html[data-theme="dark"] .quick-create,
html[data-theme="dark"] .auth-submit {
  background: var(--bo-accent) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] a {
  color: #7ab9c1;
}

html[data-theme="dark"] .modal {
  background: rgba(2, 8, 10, 0.72) !important;
}

html[data-theme="dark"] .empty-state {
  color: var(--bo-muted) !important;
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .doc-sheet,
html[data-theme="dark"] .document-sheet,
html[data-theme="dark"] .a4-sheet {
  background: #ffffff !important;
  color: #162033 !important;
}

/* Focus clavier — visible sur tous les thèmes. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bo-accent) 72%, white 28%);
  outline-offset: 2px;
}

nav button[aria-current="page"] {
  position: relative;
}

nav button[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #70b9c0;
}

/* Messages de formulaire et erreurs : zone stable pour éviter les sauts de mise en page. */
.msg[role="alert"] {
  min-height: 1.4em;
}

/* Responsive de stabilisation. */
@media (max-width: 1366px) {
  #app {
    grid-template-columns: 208px minmax(0, 1fr);
  }

  main > header {
    padding-inline: 20px;
  }

  #content {
    padding-inline: 20px;
  }

  .top-actions {
    gap: 6px;
  }
}

@media (max-width: 900px) {
  #app {
    display: block;
  }

  #app > aside {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    min-height: 0;
    padding: 10px 12px;
  }

  #app > aside nav {
    display: flex;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  #app > aside nav button {
    flex: 0 0 auto;
    min-width: max-content;
  }

  .sidebar-bottom {
    display: none !important;
  }

  main > header {
    position: sticky;
    top: 86px;
    z-index: 30;
    align-items: flex-start;
    gap: 10px;
  }

  .top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .top-actions kbd,
  .logout-header {
    display: none;
  }

  .document-settings-grid,
  .ticket-detail-grid,
  .client-hub-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  .auth-shell,
  .auth-shell-v2 {
    min-height: 100dvh !important;
    display: block !important;
  }

  .auth-context {
    display: none !important;
  }

  .auth-access {
    min-height: 100dvh;
    width: 100% !important;
    padding: 24px 18px !important;
    display: grid;
    align-items: center;
  }

  .auth-access-inner {
    width: min(100%, 430px) !important;
    margin: 0 auto;
  }

  main > header {
    top: 72px;
    padding: 12px 14px !important;
  }

  #content {
    padding: 14px !important;
  }

  .top-actions .utility-btn span,
  .top-actions .quick-create {
    font-size: 13px;
  }

  .modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-card {
    width: 100% !important;
    max-width: none !important;
    max-height: 92dvh !important;
    border-radius: 16px 16px 0 0 !important;
    overflow-y: auto;
  }

  .form-grid,
  .dashboard-grid,
  .stats-grid,
  .document-toggle-grid {
    grid-template-columns: 1fr !important;
  }

  table {
    min-width: 680px;
  }

  .table-wrap,
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* V17.3 — contraste renforcé des onglets d'authentification */
.auth-tabs {
  background:#d7e1df;
  border-color:#9fb2ae;
  box-shadow:inset 0 0 0 1px rgba(20,38,42,.03);
}
.auth-tabs button {
  color:#2d4749;
  background:transparent;
  font-weight:750;
}
.auth-tabs button:hover {
  background:#c8d5d2;
  color:#173639;
}
.auth-tabs button.active {
  background:#173f43;
  color:#fff;
  box-shadow:0 1px 3px rgba(15,35,39,.18);
}
[data-theme="dark"] .auth-tabs {
  background:#192b2e;
  border-color:#40575a;
}
[data-theme="dark"] .auth-tabs button {
  color:#c9d8d6;
}
[data-theme="dark"] .auth-tabs button:hover {
  background:#263c3f;
  color:#fff;
}
[data-theme="dark"] .auth-tabs button.active {
  background:#5fa8a3;
  color:#102326;
}

/* ========================================================================== */
/* Bordeck Ops V17.4 — Light/Dark visual system                               */
/* ========================================================================== */

:root,
html[data-theme="light"] {
  color-scheme: light;
  --bo-bg: #f4f7f6;
  --bo-surface: #ffffff;
  --bo-surface-2: #f7f9f8;
  --bo-surface-3: #eef3f1;
  --bo-border: #d7e0dd;
  --bo-border-strong: #bdcbc7;
  --bo-text: #152528;
  --bo-text-soft: #33484c;
  --bo-muted: #6b7b7f;
  --bo-accent: #236d76;
  --bo-accent-hover: #1c5d65;
  --bo-accent-soft: #e5f0f0;
  --bo-sidebar: #10272b;
  --bo-sidebar-2: #173337;
  --bo-sidebar-text: #edf5f3;
  --bo-sidebar-muted: #a8bab7;
  --bo-danger: #b83a31;
  --bo-warning: #a76718;
  --bo-success: #2c7557;
  --bo-shadow: 0 10px 26px rgba(22, 42, 45, .07);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bo-bg: #101719;
  --bo-surface: #182124;
  --bo-surface-2: #1e292c;
  --bo-surface-3: #253235;
  --bo-border: #334247;
  --bo-border-strong: #44565b;
  --bo-text: #f2f6f5;
  --bo-text-soft: #d6dfdd;
  --bo-muted: #9eaeac;
  --bo-accent: #65aeb6;
  --bo-accent-hover: #7abec5;
  --bo-accent-soft: #18343a;
  --bo-sidebar: #0b1214;
  --bo-sidebar-2: #142025;
  --bo-sidebar-text: #f2f7f5;
  --bo-sidebar-muted: #9eb1ae;
  --bo-danger: #ff8f86;
  --bo-warning: #f0b566;
  --bo-success: #7fc5a4;
  --bo-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}

/* The application follows one palette instead of isolated component patches. */
body,
main,
.page,
.content-area,
#content {
  background: var(--bo-bg) !important;
  color: var(--bo-text) !important;
}

main > header {
  background: color-mix(in srgb, var(--bo-surface) 96%, transparent) !important;
  color: var(--bo-text) !important;
  border-color: var(--bo-border) !important;
  box-shadow: 0 1px 0 var(--bo-border);
}

#app > aside {
  background: var(--bo-sidebar) !important;
  color: var(--bo-sidebar-text) !important;
  border-color: color-mix(in srgb, var(--bo-sidebar-text) 12%, transparent) !important;
}

#app > aside nav button {
  color: var(--bo-sidebar-muted) !important;
  background: transparent !important;
}

#app > aside nav button:hover {
  color: var(--bo-sidebar-text) !important;
  background: color-mix(in srgb, var(--bo-sidebar-text) 8%, transparent) !important;
}

#app > aside nav button.active,
#app > aside nav button[aria-current="page"] {
  color: #ffffff !important;
  background: var(--bo-sidebar-2) !important;
}

.sidebar-bottom,
.workspace-chip {
  border-color: color-mix(in srgb, var(--bo-sidebar-text) 12%, transparent) !important;
  color: var(--bo-sidebar-text) !important;
}

/* Generic surfaces */
.card,
.metric-card,
.panel,
.table-card,
.work-panel,
.settings-workspace,
.settings-form-block,
.settings-option-list section,
.client-hub,
.client-hub-main,
.client-summary,
.billing-shell,
.security-shell,
.team-panel,
.calendar-shell,
.diagnostic-shell,
.subscription-head,
.quota-lines,
.plan-table,
.mail-layout,
.template-panel,
.session-table,
.ops-table,
.ticket-command,
.ticket-queue,
.ticket-queue.organized,
.ticket-summary,
.kpi-strip,
.modal-card,
.quick-menu,
.notif-panel,
.search-modal {
  background: var(--bo-surface) !important;
  color: var(--bo-text) !important;
  border-color: var(--bo-border) !important;
  box-shadow: var(--bo-shadow);
}

/* Ticket screen — removes the white islands visible in dark mode. */
.ticket-summary > div,
.kpi-cell,
.ticket-list-head,
.ticket-list-row,
.ticket-hub-item,
.ticket-row,
.ticket-comment,
.timeline-item,
.list-row,
.ops-row,
.plan-row,
.template-line,
.notification-row,
.search-result,
.dash-ticket-row,
.dash-schedule-row {
  color: var(--bo-text) !important;
  border-color: var(--bo-border) !important;
}

.ticket-summary {
  background: var(--bo-surface) !important;
}
.ticket-summary > div {
  background: var(--bo-surface) !important;
}
.ticket-list-head,
.ops-head,
.plan-head {
  background: var(--bo-surface-2) !important;
  color: var(--bo-muted) !important;
}
.ticket-list-row,
.ticket-hub-item,
.ticket-row,
.ops-row,
.plan-row,
.template-line {
  background: var(--bo-surface) !important;
}
.ticket-list-row:hover,
.ticket-hub-item:hover,
.ticket-row:hover,
.ops-row:hover,
.template-line:hover {
  background: var(--bo-surface-2) !important;
}
.ticket-list-row.archived,
.ticket-hub-item.archived {
  background: var(--bo-surface-2) !important;
  color: var(--bo-muted) !important;
}
.ticket-view-tabs,
.segmented,
.client-tabs,
.settings-nav {
  background: var(--bo-surface-2) !important;
  border-color: var(--bo-border) !important;
}
.ticket-view-tabs button,
.segmented button,
.client-tab,
.settings-nav button {
  color: var(--bo-muted) !important;
  background: transparent !important;
}
.ticket-view-tabs button:hover,
.segmented button:hover,
.client-tab:hover,
.settings-nav button:hover {
  color: var(--bo-text) !important;
  background: var(--bo-surface-3) !important;
}
.ticket-view-tabs button.active,
.segmented button.active,
.client-tab.active,
.settings-nav button.active {
  color: var(--bo-text) !important;
  background: var(--bo-surface) !important;
  border-color: var(--bo-border-strong) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.08) !important;
}

/* Text hierarchy */
h1,h2,h3,h4,h5,h6,
strong,b,
.page-title,
.section-title,
.ticket-main,
.ops-main {
  color: var(--bo-text) !important;
}
.muted,
small,
.page-subtitle,
.eyebrow,
.field-help,
.ticket-list-row small,
.ticket-hub-item small,
.kpi-cell small,
.ticket-summary span,
.kpi-cell span {
  color: var(--bo-muted) !important;
}

/* Fields */
input,
select,
textarea,
.field input,
.field select,
.field textarea,
.auth-card input,
.search-input {
  background: var(--bo-surface) !important;
  color: var(--bo-text) !important;
  border-color: var(--bo-border-strong) !important;
}
input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--bo-muted) 78%, transparent) !important;
}
input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--bo-accent) 52%, var(--bo-border)) !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--bo-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bo-accent) 18%, transparent) !important;
  outline: 0 !important;
}
label,
.field span {
  color: var(--bo-text-soft) !important;
}

/* Buttons */
.primary,
.quick-create,
.auth-submit {
  background: var(--bo-accent) !important;
  color: #fff !important;
  border-color: var(--bo-accent) !important;
  box-shadow: none !important;
}
.primary:hover,
.quick-create:hover,
.auth-submit:hover {
  background: var(--bo-accent-hover) !important;
}
.secondary,
.utility-btn,
.logout-control,
.text-action {
  background: var(--bo-surface-2) !important;
  color: var(--bo-text) !important;
  border-color: var(--bo-border) !important;
}
.secondary:hover,
.utility-btn:hover,
.logout-control:hover {
  background: var(--bo-surface-3) !important;
  border-color: var(--bo-border-strong) !important;
}
.theme-toggle[aria-pressed="true"] {
  background: var(--bo-accent-soft) !important;
  border-color: color-mix(in srgb, var(--bo-accent) 55%, var(--bo-border)) !important;
  color: var(--bo-accent-hover) !important;
}

/* Status badges keep meaning and remain readable. */
.status-chip,
.pill,
.badge {
  background: var(--bo-surface-3) !important;
  color: var(--bo-text-soft) !important;
  border-color: var(--bo-border) !important;
}
.status-chip.ok,
.pill.ok {
  background: color-mix(in srgb, var(--bo-success) 14%, var(--bo-surface)) !important;
  color: var(--bo-success) !important;
}
.status-chip.warn,
.pill.warn {
  background: color-mix(in srgb, var(--bo-warning) 14%, var(--bo-surface)) !important;
  color: var(--bo-warning) !important;
}
.status-chip.danger,
.pill.danger,
.text-danger {
  color: var(--bo-danger) !important;
}

/* Empty states are quiet, not huge white panels. */
.empty-state,
.empty-state.large {
  background: var(--bo-surface) !important;
  color: var(--bo-muted) !important;
  border-color: var(--bo-border) !important;
}
.empty-state b {
  color: var(--bo-text) !important;
}

/* Modal and overlays */
.modal {
  background: rgba(4, 11, 13, .58) !important;
}
.modal-title,
.modal-card > .actions,
.modal-card > h2 {
  border-color: var(--bo-border) !important;
}
.modal-card > .actions {
  background: var(--bo-surface-2) !important;
}

/* Documents intentionally stay paper-white in both themes. */
.doc-sheet,
.document-sheet,
.a4-sheet,
.document-page,
.settings-doc-preview .document-page {
  background: #ffffff !important;
  color: #172427 !important;
}
.doc-sheet *,
.document-sheet *,
.a4-sheet *,
.document-page * {
  color: inherit;
}

/* Light mode also becomes deliberate instead of default-browser white. */
html[data-theme="light"] .ticket-list-head,
html[data-theme="light"] .ops-head,
html[data-theme="light"] .plan-head {
  background: #f1f5f3 !important;
}
html[data-theme="light"] .empty-state.large {
  background: #ffffff !important;
}

/* Dark mode polish */
html[data-theme="dark"] main > header {
  background: #121c1f !important;
}
html[data-theme="dark"] .ticket-list-row.ticket-late {
  box-shadow: inset 3px 0 var(--bo-danger) !important;
}
html[data-theme="dark"] .ticket-view-tabs button.active,
html[data-theme="dark"] .segmented button.active {
  background: #2a373b !important;
  color: #ffffff !important;
}
html[data-theme="dark"] kbd {
  background: #263337 !important;
  color: #cdd8d6 !important;
  border-color: #435257 !important;
}

/* Human, product-like rhythm: fewer oversized empty surfaces and softer spacing. */
#content {
  padding-top: 24px;
  padding-bottom: 40px;
}
.ticket-command,
.work-panel,
.card,
.panel {
  border-radius: 8px !important;
}
.ticket-toolbar {
  gap: 12px;
}
.ticket-queue.organized {
  overflow: hidden;
  border-radius: 8px;
}
.ticket-list-row {
  min-height: 56px;
}
.ticket-list-row b {
  font-weight: 680;
}

@media (max-width: 1100px) {
  .theme-toggle { display:none; }
}

/* ========================================================================== */
/* Bordeck Ops V17.5 — contrast & dark-mode readability                       */
/* ========================================================================== */

/* Authentication: the left marketing panel has its own light text hierarchy. */
.auth-context,
.auth-context-copy,
.auth-context-copy h1,
.auth-context-copy h2,
.auth-context-copy h3,
.auth-context-copy strong,
.auth-context-copy b {
  color: #f5faf9 !important;
}

.auth-context-copy h1 {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}

.auth-context-copy p {
  color: #d5e4e1 !important;
}

.auth-context .auth-kicker,
.auth-context .auth-section-label,
.auth-context .eyebrow,
.auth-context-brand small,
.auth-context-foot {
  color: #8fc2bd !important;
}

.auth-proof {
  border-color: rgba(222, 240, 236, .14) !important;
}

.auth-proof span {
  color: #d8e7e4 !important;
}

.auth-proof span strong,
.auth-proof b {
  color: #f6fbfa !important;
}

/* Dark mode uses a lighter slate/petrol scale instead of near-black surfaces. */
html[data-theme="dark"] {
  --bo-bg: #172124;
  --bo-surface: #202d31;
  --bo-surface-2: #26363a;
  --bo-surface-3: #2e4145;
  --bo-border: #3b5055;
  --bo-border-strong: #526970;
  --bo-text: #f3f7f6;
  --bo-text-soft: #d7e2df;
  --bo-muted: #aebfbc;
  --bo-accent: #6db7bd;
  --bo-accent-hover: #82c6cb;
  --bo-accent-soft: #29484c;
  --bo-sidebar: #111b1e;
  --bo-sidebar-2: #223438;
  --bo-sidebar-text: #f4f8f7;
  --bo-sidebar-muted: #b4c5c2;
  --bo-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] #content {
  background: #172124 !important;
}

html[data-theme="dark"] main > header {
  background: #1d2a2e !important;
  border-color: #3b5055 !important;
}

/* Dashboard surfaces must all participate in the theme. */
.command-welcome,
.command-kpis,
.command-kpis button,
.attention-panel,
.health-panel,
.health-grid,
.health-grid > div,
.attention-row,
.calendar-toolbar,
.period-switch button {
  background: var(--bo-surface) !important;
  color: var(--bo-text) !important;
  border-color: var(--bo-border) !important;
}

.command-welcome h2,
.command-welcome p,
.command-kpis strong,
.command-kpis span,
.command-kpis small,
.attention-panel h3,
.health-panel h3,
.health-grid strong,
.health-grid span,
.attention-row b,
.attention-row small,
.dash-schedule-row time {
  color: inherit !important;
}

.command-welcome p,
.command-kpis span,
.command-kpis small,
.health-grid span,
.attention-row small,
.dash-schedule-row small,
.dash-ticket-row small {
  color: var(--bo-muted) !important;
}

.command-kpis button:hover,
.attention-row:hover,
.period-switch button:hover {
  background: var(--bo-surface-2) !important;
}

.attention-count {
  background: var(--bo-surface-3) !important;
  color: var(--bo-text-soft) !important;
}

.health-grid,
.health-grid div,
.dash-schedule-row,
.dash-ticket-row,
.attention-row {
  border-color: var(--bo-border) !important;
}

.period-switch button {
  color: var(--bo-text-soft) !important;
}

.period-switch button.active {
  background: var(--bo-accent) !important;
  border-color: var(--bo-accent) !important;
  color: #102326 !important;
}

/* The two dashboard columns keep a subtle tonal separation. */
html[data-theme="dark"] .command-welcome,
html[data-theme="dark"] .command-kpis,
html[data-theme="dark"] .work-panel,
html[data-theme="dark"] .attention-panel,
html[data-theme="dark"] .health-panel {
  background: #202d31 !important;
}

html[data-theme="dark"] .command-kpis button,
html[data-theme="dark"] .health-grid > div,
html[data-theme="dark"] .attention-row {
  background: #202d31 !important;
}

html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .empty-state.large,
html[data-theme="dark"] .empty-state.compact {
  background: #26363a !important;
  color: #b9c9c6 !important;
  border-color: #3b5055 !important;
}

html[data-theme="dark"] .empty-state b,
html[data-theme="dark"] .empty-state strong {
  color: #f3f7f6 !important;
}

/* Improve sidebar legibility without turning it into a black slab. */
html[data-theme="dark"] #app > aside {
  background: #111b1e !important;
}

html[data-theme="dark"] #app > aside nav button {
  color: #b9cbc8 !important;
}

html[data-theme="dark"] #app > aside nav button:hover {
  background: #1c2c30 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] #app > aside nav button.active,
html[data-theme="dark"] #app > aside nav button[aria-current="page"] {
  background: #294047 !important;
  color: #ffffff !important;
}

/* Top bar controls need a distinct but calm surface. */
html[data-theme="dark"] .utility-btn,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .logout-control {
  background: #25363a !important;
  border-color: #42575c !important;
  color: #edf4f2 !important;
}

html[data-theme="dark"] .utility-btn:hover,
html[data-theme="dark"] .secondary:hover,
html[data-theme="dark"] .logout-control:hover {
  background: #304449 !important;
}

/* Table/form surfaces stay readable at a glance. */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #1c292d !important;
  border-color: #4b6268 !important;
  color: #f4f8f7 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #8fa29f !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: #3b5055 !important;
}

html[data-theme="dark"] th {
  background: #26363a !important;
  color: #c5d3d0 !important;
}

html[data-theme="dark"] td {
  background: #202d31 !important;
  color: #edf4f2 !important;
}

/* Preserve paper documents as paper. */
html[data-theme="dark"] .doc-sheet,
html[data-theme="dark"] .document-sheet,
html[data-theme="dark"] .a4-sheet,
html[data-theme="dark"] .document-page,
html[data-theme="dark"] .settings-doc-preview .document-page {
  background: #ffffff !important;
  color: #172427 !important;
}

/* ========================================================================== */
/* Bordeck Ops V17.6 — dark-mode polish: Diagnostic & Paramètres              */
/* ========================================================================== */

/* Diagnostic: all working surfaces follow the dark palette. */
html[data-theme="dark"] .diagnostic-library,
html[data-theme="dark"] .diagnostic-intro,
html[data-theme="dark"] .diag-run,
html[data-theme="dark"] .diag-result-page,
html[data-theme="dark"] .diag-question-card,
html[data-theme="dark"] .diag-result-grid > section,
html[data-theme="dark"] .diag-selection > div,
html[data-theme="dark"] .diag-recent,
html[data-theme="dark"] .diagnostic-history-card {
  background: var(--bo-surface) !important;
  color: var(--bo-text) !important;
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .diagnostic-library {
  background: #202d31 !important;
}

html[data-theme="dark"] .diagnostic-intro,
html[data-theme="dark"] .diag-run,
html[data-theme="dark"] .diag-result-page {
  background: #202d31 !important;
}

html[data-theme="dark"] .diag-question-card,
html[data-theme="dark"] .diag-result-grid > section,
html[data-theme="dark"] .diag-selection > div,
html[data-theme="dark"] .diagnostic-history-card {
  background: #26363a !important;
}

html[data-theme="dark"] .diagnostic-library h2,
html[data-theme="dark"] .diagnostic-library h3,
html[data-theme="dark"] .diagnostic-intro h2,
html[data-theme="dark"] .diag-run h2,
html[data-theme="dark"] .diag-run h3,
html[data-theme="dark"] .diag-result-page h2,
html[data-theme="dark"] .diag-result-page h3,
html[data-theme="dark"] .diag-question-card h3,
html[data-theme="dark"] .diag-recent-row b,
html[data-theme="dark"] .diag-answer-grid b,
html[data-theme="dark"] .diag-result-grid h3,
html[data-theme="dark"] .diag-selection h3,
html[data-theme="dark"] .diagnostic-history-card strong,
html[data-theme="dark"] .diagnostic-history-card b {
  color: var(--bo-text) !important;
}

html[data-theme="dark"] .diagnostic-intro > p,
html[data-theme="dark"] .diag-result-head p,
html[data-theme="dark"] .diag-recent-row small,
html[data-theme="dark"] .diag-answer-grid span,
html[data-theme="dark"] .diag-selection p,
html[data-theme="dark"] .diag-stepbar > div,
html[data-theme="dark"] .question-index,
html[data-theme="dark"] .diagnostic-history-card small,
html[data-theme="dark"] .diagnostic-history-card p {
  color: var(--bo-muted) !important;
}

html[data-theme="dark"] .diag-categories button,
html[data-theme="dark"] .diag-scenario,
html[data-theme="dark"] .diag-answer-grid button {
  background: #26363a !important;
  color: var(--bo-text-soft) !important;
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .diag-categories button:hover,
html[data-theme="dark"] .diag-scenario:hover,
html[data-theme="dark"] .diag-answer-grid button:hover {
  background: #2e4145 !important;
  color: #ffffff !important;
  border-color: var(--bo-border-strong) !important;
}

html[data-theme="dark"] .diag-categories button.active,
html[data-theme="dark"] .diag-scenario.active,
html[data-theme="dark"] .diag-answer-grid button.active {
  background: var(--bo-accent-soft) !important;
  color: #f6fbfa !important;
  border-color: var(--bo-accent) !important;
}

html[data-theme="dark"] .severity-tag {
  background: #33484c !important;
  color: #d9e8e5 !important;
}

html[data-theme="dark"] .severity-tag.warn {
  background: #594923 !important;
  color: #f5d995 !important;
}

html[data-theme="dark"] .severity-tag.danger {
  background: #573436 !important;
  color: #ffc1bb !important;
}

html[data-theme="dark"] .diag-intro-grid,
html[data-theme="dark"] .diag-intro-grid div,
html[data-theme="dark"] .diag-recent-row,
html[data-theme="dark"] .diag-numbered,
html[data-theme="dark"] .diag-answer-summary,
html[data-theme="dark"] .diag-selection label,
html[data-theme="dark"] .diagnostic-history-card details {
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .diag-stepbar i {
  background: #3a4d51 !important;
}

html[data-theme="dark"] .diag-vigilance {
  background: #2a3d40 !important;
  color: var(--bo-text-soft) !important;
  border-color: #6f9993 !important;
}

html[data-theme="dark"] .diag-vigilance.warn {
  background: #4b4027 !important;
  color: #f0d99e !important;
  border-color: #c59b4b !important;
}

html[data-theme="dark"] .diag-vigilance.danger {
  background: #493032 !important;
  color: #ffc8c2 !important;
  border-color: #d26f69 !important;
}

/* Paramètres: clear hierarchy between navigation, form and option rows. */
html[data-theme="dark"] .settings-v8,
html[data-theme="dark"] .settings-workspace,
html[data-theme="dark"] .settings-workspace form,
html[data-theme="dark"] .settings-pane,
html[data-theme="dark"] .settings-form-block {
  color: var(--bo-text) !important;
}

html[data-theme="dark"] .settings-nav {
  background: #1d2a2e !important;
  color: var(--bo-text) !important;
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .settings-nav-head {
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .settings-nav-head h3,
html[data-theme="dark"] .settings-pane-head h2,
html[data-theme="dark"] .settings-option-list h3 {
  color: var(--bo-text) !important;
}

html[data-theme="dark"] .settings-nav button {
  color: var(--bo-text-soft) !important;
  background: transparent !important;
}

html[data-theme="dark"] .settings-nav button:hover {
  background: #26363a !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .settings-nav button.active {
  background: #29484c !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 var(--bo-accent);
}

html[data-theme="dark"] .settings-workspace {
  background: #202d31 !important;
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .settings-pane-head {
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .settings-pane-head p,
html[data-theme="dark"] .settings-option-list p,
html[data-theme="dark"] .settings-savebar span {
  color: var(--bo-muted) !important;
}

html[data-theme="dark"] .settings-option-list {
  background: #202d31 !important;
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .settings-option-list section {
  background: #26363a !important;
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .settings-option-list section:hover {
  background: #2b3c40 !important;
}

html[data-theme="dark"] .settings-option-list select,
html[data-theme="dark"] .settings-option-list input,
html[data-theme="dark"] .settings-option-list textarea {
  background: #1c292d !important;
  color: var(--bo-text) !important;
  border-color: var(--bo-border-strong) !important;
}

html[data-theme="dark"] .shortcut-pair kbd,
html[data-theme="dark"] .settings-option-list kbd {
  background: #304247 !important;
  color: #eaf2f0 !important;
  border-color: #4c6267 !important;
}

html[data-theme="dark"] .settings-savebar {
  background: #1d2a2e !important;
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .settings-doc-preview {
  background: #172124 !important;
  border-color: var(--bo-border) !important;
}

/* Keep the document itself white: it represents printed output. */

/* Destructive settings remain distinct but readable. */
html[data-theme="dark"] .danger-outline {
  color: #ffb2aa !important;
  border-color: #845052 !important;
  background: #35282a !important;
}

html[data-theme="dark"] .danger-outline:hover {
  background: #493032 !important;
  border-color: #b66b69 !important;
}

/* ========================================================================== */
/* Bordeck Ops V17.7 — final dark polish: Agenda & Paramètres > Documents     */
/* ========================================================================== */

/* Agenda — toolbar, switches, week/day/month canvases and events. */
html[data-theme="dark"] .calendar-shell,
html[data-theme="dark"] .calendar-toolbar,
html[data-theme="dark"] .calendar-summary,
html[data-theme="dark"] .week-calendar,
html[data-theme="dark"] .day-calendar,
html[data-theme="dark"] .month-calendar,
html[data-theme="dark"] .month-weekdays {
  background: var(--bo-surface) !important;
  color: var(--bo-text) !important;
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .calendar-toolbar {
  background: var(--bo-surface-2) !important;
}

html[data-theme="dark"] .calendar-period h2,
html[data-theme="dark"] .calendar-summary b,
html[data-theme="dark"] .week-day-head b,
html[data-theme="dark"] .day-agenda-head h3,
html[data-theme="dark"] .day-event-time b,
html[data-theme="dark"] .calendar-event b,
html[data-theme="dark"] .month-day-head b,
html[data-theme="dark"] .staff-load b {
  color: var(--bo-text) !important;
}

html[data-theme="dark"] .calendar-period span,
html[data-theme="dark"] .calendar-summary,
html[data-theme="dark"] .week-day-head span,
html[data-theme="dark"] .week-day-head small,
html[data-theme="dark"] .calendar-event small,
html[data-theme="dark"] .calendar-event em,
html[data-theme="dark"] .day-hours div,
html[data-theme="dark"] .day-agenda-head span,
html[data-theme="dark"] .day-event-time span,
html[data-theme="dark"] .day-event-body p,
html[data-theme="dark"] .day-event-body small,
html[data-theme="dark"] .month-weekdays span {
  color: var(--bo-muted) !important;
}

html[data-theme="dark"] .calendar-tools select,
html[data-theme="dark"] .view-switch,
html[data-theme="dark"] .period-switch button {
  background: var(--bo-surface-3) !important;
  color: var(--bo-text-soft) !important;
  border-color: var(--bo-border-strong) !important;
}

html[data-theme="dark"] .view-switch button {
  color: var(--bo-muted) !important;
}

html[data-theme="dark"] .view-switch button:hover,
html[data-theme="dark"] .period-switch button:hover {
  background: #31454a !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .view-switch button.active,
html[data-theme="dark"] .period-switch button.active {
  background: var(--bo-accent-soft) !important;
  color: #ffffff !important;
  border-color: var(--bo-accent) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .week-day,
html[data-theme="dark"] .month-day,
html[data-theme="dark"] .day-agenda {
  background: var(--bo-surface) !important;
  color: var(--bo-text) !important;
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .week-day.today,
html[data-theme="dark"] .month-day.today {
  background: #24363a !important;
}

html[data-theme="dark"] .week-day-head,
html[data-theme="dark"] .month-weekdays,
html[data-theme="dark"] .day-hours,
html[data-theme="dark"] .day-team {
  background: var(--bo-surface-2) !important;
  color: var(--bo-text) !important;
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .week-day-head,
html[data-theme="dark"] .week-day,
html[data-theme="dark"] .month-day,
html[data-theme="dark"] .month-weekdays span,
html[data-theme="dark"] .day-hours div,
html[data-theme="dark"] .day-agenda-head,
html[data-theme="dark"] .day-event,
html[data-theme="dark"] .staff-load {
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .month-day.outside {
  background: #1c282c !important;
  color: #77898d !important;
}

html[data-theme="dark"] .calendar-event,
html[data-theme="dark"] .month-event {
  background: #2a3d41 !important;
  color: var(--bo-text-soft) !important;
  border-color: #456067 !important;
}

html[data-theme="dark"] .calendar-event:hover,
html[data-theme="dark"] .month-event:hover {
  background: #334b50 !important;
  color: #ffffff !important;
  border-color: var(--bo-accent) !important;
}

html[data-theme="dark"] .calendar-event time,
html[data-theme="dark"] .month-event time,
html[data-theme="dark"] .month-add,
html[data-theme="dark"] .month-more {
  color: var(--bo-accent-strong) !important;
}

html[data-theme="dark"] .calendar-empty-slot {
  background: #1d2a2e !important;
  color: #8fa2a5 !important;
  border-color: #465b60 !important;
}

html[data-theme="dark"] .calendar-empty-slot:hover {
  background: #26383c !important;
  color: #dff3f1 !important;
  border-color: var(--bo-accent) !important;
}

/* Paramètres > Documents — controls belong to dark UI; paper preview stays white. */
html[data-theme="dark"] .document-settings-grid {
  color: var(--bo-text) !important;
}

html[data-theme="dark"] .document-toggle-grid,
html[data-theme="dark"] .logo-upload,
html[data-theme="dark"] .doc-preview-tabs {
  background: var(--bo-surface-2) !important;
  color: var(--bo-text-soft) !important;
  border-color: var(--bo-border) !important;
}

html[data-theme="dark"] .document-toggle-grid {
  border: 1px solid var(--bo-border) !important;
}

html[data-theme="dark"] .document-toggle-grid label,
html[data-theme="dark"] .check-line,
html[data-theme="dark"] .logo-upload small {
  color: var(--bo-text-soft) !important;
}

html[data-theme="dark"] .doc-preview-tabs {
  padding: 5px !important;
  border: 1px solid var(--bo-border) !important;
  border-radius: 6px;
}

html[data-theme="dark"] .doc-preview-tabs button {
  background: transparent !important;
  color: var(--bo-muted) !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .doc-preview-tabs button:hover {
  background: #31454a !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .doc-preview-tabs button.active {
  background: var(--bo-accent-soft) !important;
  color: #ffffff !important;
  border-color: var(--bo-accent) !important;
}

html[data-theme="dark"] .settings-doc-preview {
  background: #182326 !important;
  border-color: var(--bo-border-strong) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}

/* The paper preview intentionally remains white and print-faithful. */
html[data-theme="dark"] .settings-doc-preview .document-page {
  background: #ffffff !important;
  border-color: #cad5d2 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.24) !important;
}


/* V17.8 — Documents clients : en-têtes clairs et aperçu A4 fidèle */
.document-page {
  --doc-accent:#1f5b63;
}

.doc-header {
  background:#ffffff;
  color:#243237;
  border:1px solid #dfe7e5;
  border-bottom:3px solid var(--doc-accent);
  border-radius:10px;
  padding:16px 18px;
  margin-bottom:22px;
  box-shadow:none;
}

.doc-header .doc-brand,
.doc-header .doc-ref,
.doc-header .doc-brand div,
.doc-header .doc-ref div {
  color:#526368;
}

.doc-header .doc-brand h2 {
  color:#172427;
}

.doc-header .doc-ref {
  min-width:180px;
  padding:10px 12px;
  background:#f7f9f8;
  border:1px solid #e1e8e6;
  border-radius:8px;
  text-align:right;
}

.doc-header .doc-ref strong {
  color:var(--doc-accent);
}

.doc-header-tint {
  background:color-mix(in srgb, var(--doc-accent) 7%, #ffffff);
  border-color:color-mix(in srgb, var(--doc-accent) 22%, #dfe7e5);
  border-bottom-color:var(--doc-accent);
}

.doc-header-tint .doc-ref {
  background:rgba(255,255,255,.72);
  border-color:color-mix(in srgb, var(--doc-accent) 18%, #e1e8e6);
}

.doc-header-minimal {
  padding:6px 0 15px;
  border:0;
  border-bottom:2px solid var(--doc-accent);
  border-radius:0;
}

.doc-header-minimal .doc-ref {
  padding:0;
  background:transparent;
  border:0;
}

.doc-header-stacked {
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}

.doc-header-stacked .doc-ref {
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:14px;
  align-items:center;
  text-align:left;
}

.doc-logo-small .doc-logo,
.doc-logo-small .doc-logo-placeholder {
  width:44px;
  height:44px;
  border-radius:10px;
}

.doc-logo-medium .doc-logo,
.doc-logo-medium .doc-logo-placeholder {
  width:60px;
  height:60px;
}

.doc-logo-large .doc-logo,
.doc-logo-large .doc-logo-placeholder {
  width:78px;
  height:78px;
}

.doc-preview-toolbar {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.doc-preview-toolbar .doc-preview-tabs,
.doc-preview-toolbar .doc-preview-zoom {
  display:flex;
  gap:5px;
}

.doc-preview-stage {
  width:100%;
  overflow:auto;
  border:1px solid var(--bo-line);
  background:#e9eeec;
  padding:18px;
  min-height:460px;
}

/* Important : le document conserve exactement ses dimensions/styles A4. */
.settings-doc-preview .doc-preview-stage .document-page {
  width:210mm!important;
  min-height:297mm!important;
  max-width:none!important;
  margin:0!important;
  padding:17mm 16mm!important;
  font-size:12px!important;
  box-shadow:0 10px 30px rgba(15,23,42,.14)!important;
  border:0!important;
  transform-origin:top left;
}

.settings-doc-preview .doc-preview-stage .doc-header {
  gap:24px;
}

.settings-doc-preview .doc-preview-stage .doc-brand h2 {
  font-size:22px;
}

.settings-doc-preview .doc-preview-stage .doc-client {
  margin:20px 0;
  padding:14px;
}

.settings-doc-preview .doc-preview-stage .doc-summary {
  grid-template-columns:repeat(4,1fr);
  margin:24px 0;
}

.settings-doc-preview .doc-preview-stage .doc-lines {
  margin:24px 0;
}

.settings-doc-preview .doc-preview-stage .doc-totals {
  width:320px;
  margin:26px 0 26px auto;
}

.doc-preview-stage.is-fit {
  height:615px;
  overflow:hidden;
}

.doc-preview-stage.is-fit .document-page {
  transform:scale(.56);
}

.doc-preview-stage.is-full {
  max-height:760px;
  overflow:auto;
}

.doc-preview-stage.is-full .document-page {
  transform:none;
}

/* Le mode sombre entoure l'aperçu, mais ne recolore jamais la feuille A4. */
html[data-theme="dark"] .doc-preview-stage {
  background:#223136!important;
  border-color:var(--bo-border)!important;
}

html[data-theme="dark"] .settings-doc-preview .document-page {
  background:#ffffff!important;
  color:#172427!important;
}

html[data-theme="dark"] .settings-doc-preview .document-page .doc-brand h2 {
  color:#172427!important;
}

html[data-theme="dark"] .settings-doc-preview .document-page .doc-header .doc-brand,
html[data-theme="dark"] .settings-doc-preview .document-page .doc-header .doc-ref,
html[data-theme="dark"] .settings-doc-preview .document-page .doc-header .doc-brand div,
html[data-theme="dark"] .settings-doc-preview .document-page .doc-header .doc-ref div {
  color:#526368!important;
}

html[data-theme="dark"] .settings-doc-preview .document-page .doc-ref strong,
html[data-theme="dark"] .settings-doc-preview .document-page .doc-block h3,
html[data-theme="dark"] .settings-doc-preview .document-page .doc-total-main {
  color:var(--doc-accent)!important;
}

html[data-theme="dark"] .settings-doc-preview .document-page .doc-summary span,
html[data-theme="dark"] .settings-doc-preview .document-page .doc-status,
html[data-theme="dark"] .settings-doc-preview .document-page .doc-legal,
html[data-theme="dark"] .settings-doc-preview .document-page .doc-footer {
  color:#64748b!important;
}

html[data-theme="dark"] .settings-doc-preview .document-page .paid-stamp {
  color:#15803d!important;
}

@media (max-width:900px) {
  .doc-header-stacked .doc-ref {
    grid-template-columns:1fr;
  }
  .doc-preview-stage.is-fit {
    height:500px;
  }
  .doc-preview-stage.is-fit .document-page {
    transform:scale(.44);
  }
}

/* ========================================================================== */
/* Bordeck Ops V17.9 — documents clients, version humaine et prévisualisation */
/* ========================================================================== */
.document-page {
  --doc-accent: #315f67;
  --doc-ink: #1d292d;
  --doc-muted: #68767a;
  --doc-line: #dce3e1;
  --doc-soft: #f7f9f8;
  --doc-soft-2: #eef3f1;
  color: var(--doc-ink) !important;
  background: #fff !important;
  line-height: 1.48;
  letter-spacing: 0;
}

.document-page.doc-page-font-humanist {
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
}
.document-page.doc-page-font-modern {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.document-page.doc-page-font-classic {
  font-family: Georgia, "Times New Roman", serif;
}
.document-page.doc-page-font-classic .doc-kicker,
.document-page.doc-page-font-classic .doc-line-head,
.document-page.doc-page-font-classic .doc-summary span {
  font-family: "Segoe UI", Arial, sans-serif;
}

/* Header: no dark banner, no oversized SaaS-card treatment. */
.document-page .doc-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  padding: 0 0 18px;
  margin: 0 0 26px;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--doc-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--doc-ink) !important;
}
.document-page .doc-header::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 62px;
  height: 2px;
  background: var(--doc-accent);
}
.document-page .doc-brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.document-page .doc-company {
  color: var(--doc-muted) !important;
  font-size: 11px;
  line-height: 1.52;
}
.document-page .doc-company h2 {
  margin: 1px 0 7px;
  color: var(--doc-ink) !important;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 680;
  letter-spacing: -.015em;
}
.document-page .doc-logo {
  object-fit: contain;
}
.document-page .doc-logo-placeholder {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--doc-accent) 25%, #d8e2df);
  border-radius: 9px;
  background: color-mix(in srgb, var(--doc-accent) 8%, #fff) !important;
  color: var(--doc-accent) !important;
  font-weight: 750;
  box-shadow: none;
}
.document-page .doc-ref {
  min-width: 180px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: right;
  color: var(--doc-muted) !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.document-page .doc-ref .doc-type {
  color: var(--doc-ink) !important;
  font-size: 22px;
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.02em;
}
.document-page .doc-ref strong {
  color: var(--doc-accent) !important;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .04em;
}
.document-page .doc-ref > span:last-child {
  color: var(--doc-muted) !important;
  font-size: 10.5px;
}

/* Editorial header: slightly more expressive but still printable and human. */
.document-page .doc-header-editorial {
  padding-top: 12px !important;
}
.document-page .doc-header-editorial::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--doc-accent) 70%, #fff);
}
.document-page .doc-header-editorial .doc-ref .doc-type {
  font-size: 25px;
}

/* Minimal header: almost letterhead-like. */
.document-page .doc-header-minimal {
  padding-bottom: 13px !important;
}
.document-page .doc-header-minimal::before {
  width: 34px;
  height: 1px;
}
.document-page .doc-header-minimal .doc-logo-placeholder,
.document-page .doc-header-minimal .doc-logo {
  opacity: .94;
}

.document-page .doc-header-stacked {
  flex-direction: column;
  gap: 16px;
}
.document-page .doc-header-stacked .doc-ref {
  align-items: flex-start;
  text-align: left;
  min-width: 0;
}
.document-page .doc-header-stacked .doc-ref {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 14px;
  align-items: baseline;
}
.document-page .doc-header-stacked .doc-ref > span:last-child {
  text-align: right;
}

/* Client block: three genuinely distinct, restrained choices. */
.document-page .doc-client {
  margin: 22px 0 26px;
  color: var(--doc-ink) !important;
}
.document-page .doc-client h3 {
  margin: 5px 0 3px;
  color: var(--doc-ink) !important;
  font-size: 15px;
  font-weight: 650;
}
.document-page .doc-client > div {
  color: var(--doc-muted) !important;
}
.document-page .doc-client-line {
  padding: 0 0 0 14px;
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid var(--doc-accent) !important;
}
.document-page .doc-client-card {
  padding: 14px 16px;
  background: var(--doc-soft) !important;
  border: 1px solid var(--doc-line) !important;
  border-left: 1px solid var(--doc-line) !important;
  border-radius: 7px;
}
.document-page .doc-client-plain {
  padding: 0;
  background: transparent !important;
  border: 0 !important;
}
.document-page .doc-kicker {
  color: var(--doc-muted) !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.document-page .doc-lines {
  margin: 24px 0;
  border: 1px solid var(--doc-line);
  border-radius: 6px;
  overflow: hidden;
}
.document-page .doc-line {
  padding: 13px 15px;
  border-color: var(--doc-line);
}
.document-page .doc-line-head {
  background: var(--doc-soft) !important;
  color: var(--doc-muted) !important;
  font-size: 9.5px;
  letter-spacing: .07em;
}
.document-page .doc-total-main {
  color: var(--doc-ink) !important;
  border-bottom-color: var(--doc-accent) !important;
}
.document-page .doc-summary > div,
.document-page .doc-note {
  background: var(--doc-soft) !important;
  border-radius: 6px;
}
.document-page .doc-note {
  color: var(--doc-ink) !important;
}
.document-page .doc-block h3 {
  color: var(--doc-ink) !important;
  font-size: 11px;
  letter-spacing: .045em;
  border-bottom: 1px solid var(--doc-line);
  padding-bottom: 5px;
}
.document-page .doc-machine {
  border-color: var(--doc-line);
  color: var(--doc-muted) !important;
}
.document-page .doc-status,
.document-page .doc-legal,
.document-page .doc-footer,
.document-page .doc-signature span {
  color: var(--doc-muted) !important;
}
.document-page .doc-footer {
  text-align: left;
}
.document-page .doc-footer-center {
  text-align: center;
}
.document-page .doc-footer-left {
  text-align: left;
}

/* Density is independent from the overall template style. */
.document-page.doc-page-density-comfortable .doc-block { margin: 21px 0; }
.document-page.doc-page-density-comfortable .doc-lines { margin: 28px 0; }
.document-page.doc-page-density-comfortable .doc-client { margin: 24px 0 29px; }
.document-page.doc-page-density-standard .doc-block { margin: 16px 0; }
.document-page.doc-page-density-standard .doc-lines { margin: 21px 0; }
.document-page.doc-page-density-standard .doc-client { margin: 19px 0 23px; }
.document-page.doc-page-density-compact .doc-block { margin: 11px 0; }
.document-page.doc-page-density-compact .doc-lines { margin: 15px 0; }
.document-page.doc-page-density-compact .doc-client { margin: 14px 0 17px; }
.document-page.doc-page-density-compact .doc-line { padding: 9px 12px; }
.document-page.doc-page-density-compact .doc-summary > div { padding: 9px; }

/* Settings preview: exact A4, only uniformly scaled. */
.settings-doc-preview {
  min-width: 0;
}
.doc-preview-stage {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 460px;
  padding: 16px;
  overflow: auto;
  background: #e8ecea;
  border: 1px solid var(--bo-border);
  border-radius: 8px;
}
.settings-doc-preview .doc-preview-stage .document-page {
  width: 210mm !important;
  min-height: 297mm !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 17mm 16mm !important;
  font-size: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 28px rgba(24, 39, 42, .15) !important;
  transform-origin: top left;
}
.doc-preview-stage.is-fit {
  overflow: hidden;
}
.doc-preview-stage.is-fit .document-page {
  transform: scale(var(--preview-scale, .55)) !important;
}
.doc-preview-stage.is-full {
  height: 760px !important;
  overflow: auto;
}
.doc-preview-stage.is-full .document-page {
  transform: none !important;
}
html[data-theme="dark"] .doc-preview-stage {
  background: #28383c !important;
  border-color: #465c61 !important;
}

/* Settings document controls read as a design panel, not a generated form wall. */
.settings-pane[data-settings-pane="documents"] .form-section-label {
  margin-top: 8px;
  color: var(--bo-text);
  font-size: 12px;
  font-weight: 700;
}
.settings-pane[data-settings-pane="documents"] .document-toggle-grid {
  padding: 12px;
  border: 1px solid var(--bo-border);
  border-radius: 8px;
  background: var(--bo-surface-2);
}
.settings-pane[data-settings-pane="documents"] .logo-upload {
  padding: 10px 12px;
  border: 1px dashed var(--bo-border-strong);
  border-radius: 8px;
  background: var(--bo-surface-2);
}

@media (max-width: 1050px) {
  .document-page .doc-header { gap: 18px; }
  .doc-preview-stage { min-height: 380px; }
}
.document-page .doc-header-signature .doc-type {
  font-weight: 650;
}

/* ===== V17.10 document preview & brand controls ===== */
.document-page .doc-brand-discreet {
  gap: 10px;
  align-items: center;
}
.document-page .doc-brand-discreet .doc-company h2 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--doc-muted) !important;
  letter-spacing: 0;
}
.document-page .doc-brand-discreet .doc-company > div {
  display: none;
}
.document-page .doc-brand-discreet .doc-logo {
  max-height: 26px;
  max-width: 72px;
  opacity: .88;
}
.document-page .doc-brandmode-hidden {
  justify-content: flex-end;
}
.document-page .doc-brandmode-hidden .doc-ref {
  margin-left: auto;
}
.document-page .doc-brandmode-hidden.doc-header-stacked .doc-ref {
  width: 100%;
}

.doc-preview-stage {
  max-width: 100%;
  scrollbar-gutter: stable both-edges;
}
.doc-preview-stage.is-full {
  overflow-x: scroll !important;
  overflow-y: auto !important;
  cursor: grab;
}
.doc-preview-stage.is-full:active {
  cursor: grabbing;
}
.doc-preview-stage.is-full .document-page {
  flex: 0 0 auto;
  margin: 0 !important;
}
.doc-preview-pan {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.doc-preview-pan[hidden] {
  display: none !important;
}
.doc-preview-pan button {
  min-width: 34px;
  padding-inline: 9px;
}
.settings-pane[data-settings-pane="documents"] .field small {
  display: block;
  margin-top: 5px;
  color: var(--bo-muted);
  font-size: 11px;
  line-height: 1.4;
}

/* ========================================================================== */
/* Bordeck Ops V17.11 — documents: options réellement distinctes + 5 polices */
/* ========================================================================== */

/* Cinq polices explicites et locales (aucune dépendance web). */
.document-page.doc-page-font-segoe { font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
.document-page.doc-page-font-arial { font-family: Arial, Helvetica, sans-serif; }
.document-page.doc-page-font-trebuchet { font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; }
.document-page.doc-page-font-georgia { font-family: Georgia, "Times New Roman", serif; }
.document-page.doc-page-font-times { font-family: "Times New Roman", Times, serif; }

/* Les styles de document contrôlent la géométrie du vrai A4 ET de l'aperçu. */
.document-page.doc-layout-classic {
  padding: 17mm 16mm;
  font-size: 12px;
}
.document-page.doc-layout-compact {
  padding: 12mm 13mm;
  font-size: 11px;
}
.document-page.doc-layout-compact .doc-header { margin-bottom: 16px; padding-bottom: 12px; }
.document-page.doc-layout-compact .doc-client { margin-top: 14px; margin-bottom: 17px; }
.document-page.doc-layout-compact .doc-lines { margin-top: 16px; margin-bottom: 16px; }
.document-page.doc-layout-compact .doc-line { padding: 9px 11px; }
.document-page.doc-layout-compact .doc-note { padding: 9px 11px; margin: 9px 0; }
.document-page.doc-layout-compact .doc-totals { margin-top: 18px; margin-bottom: 18px; }
.document-page.doc-layout-compact .doc-block { margin: 11px 0; }

.document-page.doc-layout-minimal {
  padding: 19mm 18mm;
  font-size: 11.7px;
}
.document-page.doc-layout-minimal .doc-lines {
  border: 0;
  border-radius: 0;
}
.document-page.doc-layout-minimal .doc-line {
  padding-left: 0;
  padding-right: 0;
  border-color: var(--doc-line);
}
.document-page.doc-layout-minimal .doc-line-head {
  background: transparent !important;
  border-bottom: 1px solid var(--doc-line);
}
.document-page.doc-layout-minimal .doc-summary > div,
.document-page.doc-layout-minimal .doc-note {
  background: transparent !important;
  border: 0;
  padding-left: 0;
  padding-right: 0;
}
.document-page.doc-layout-minimal .doc-totals > div { border-color: var(--doc-line); }
.document-page.doc-layout-minimal .doc-block h3 { border-bottom-width: 0; padding-bottom: 0; }

/* Trois en-têtes qui changent vraiment de composition, sans gros bandeau sombre. */
.document-page .doc-header-signature {
  padding-top: 0 !important;
  border-bottom: 1px solid var(--doc-line) !important;
}
.document-page .doc-header-signature::before {
  width: 58px;
  height: 2px;
}
.document-page .doc-header-signature .doc-ref .doc-type {
  font-size: 21px;
  font-weight: 650;
}

.document-page .doc-header-editorial {
  padding: 14px 0 18px !important;
  border-bottom: 0 !important;
}
.document-page .doc-header-editorial::before {
  left: 0;
  top: 0;
  bottom: auto;
  width: 100%;
  height: 3px;
  opacity: .8;
}
.document-page .doc-header-editorial .doc-ref .doc-type {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.025em;
}
.document-page .doc-header-editorial .doc-ref strong {
  font-size: 12px;
}

.document-page .doc-header-minimal {
  padding: 0 0 10px !important;
  margin-bottom: 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--doc-line) !important;
}
.document-page .doc-header-minimal::before { display: none; }
.document-page .doc-header-minimal .doc-ref .doc-type {
  font-size: 18px;
  font-weight: 600;
}
.document-page .doc-header-minimal .doc-company h2 { font-size: 16px; }
.document-page .doc-header-minimal .doc-company,
.document-page .doc-header-minimal .doc-ref { font-size: 10px; }

/* Si l'identité est masquée, la référence prend naturellement la place utile. */
.document-page .doc-header.doc-brandmode-hidden { justify-content: flex-end; }
.document-page .doc-header.doc-brandmode-hidden .doc-ref { min-width: 230px; }
.document-page .doc-header-stacked.doc-brandmode-hidden .doc-ref { width: 100%; }

/* IMPORTANT: l'aperçu ne neutralise plus padding/font-size du style choisi. */
.settings-doc-preview .doc-preview-stage .document-page {
  width: 210mm !important;
  min-height: 297mm !important;
  max-width: none !important;
  margin: 0 !important;
  /* padding et font-size viennent de doc-layout-* exactement comme à l'impression */
  box-shadow: 0 8px 28px rgba(24, 39, 42, .15) !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform-origin: top left;
}

/* Laisser les trois styles client indépendants du style document. */
.document-page .doc-client-line { background: transparent !important; }
.document-page .doc-client-card { background: var(--doc-soft) !important; }
.document-page .doc-client-plain { background: transparent !important; }

/* Fidélité stricte de l'aperçu : les anciennes règles !important sont remplacées
   par les valeurs exactes du style sélectionné. */
.settings-doc-preview .doc-preview-stage .document-page.doc-layout-classic {
  padding: 17mm 16mm !important;
  font-size: 12px !important;
}
.settings-doc-preview .doc-preview-stage .document-page.doc-layout-compact {
  padding: 12mm 13mm !important;
  font-size: 11px !important;
}
.settings-doc-preview .doc-preview-stage .document-page.doc-layout-minimal {
  padding: 19mm 18mm !important;
  font-size: 11.7px !important;
}