/* MCA SMS — feuille de style (Bootstrap 5.3 + identité MCA) */
:root {
  --mca-navy: #12355b;
  --mca-navy-2: #0c2742;
  --mca-blue: #1f6feb;
  --mca-accent: #f29f05;
  --mca-bg: #f3f5f9;
  --mca-border: #e3e8ef;
  --bs-primary: #1f5fbf;
  --bs-primary-rgb: 31, 95, 191;
  --bs-link-color: #1f5fbf;
  --bs-link-color-rgb: 31, 95, 191;
  --bs-body-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bs-body-font-size: .925rem;
  --bs-border-radius: .55rem;
}
body { background: var(--mca-bg); color: #1d2733; }
.btn-primary { --bs-btn-bg: #1f5fbf; --bs-btn-border-color: #1f5fbf; --bs-btn-hover-bg: #184f9f; --bs-btn-hover-border-color: #184f9f; --bs-btn-active-bg: #143f80; }
.btn-outline-primary { --bs-btn-color: #1f5fbf; --bs-btn-border-color: #1f5fbf; --bs-btn-hover-bg: #1f5fbf; --bs-btn-hover-border-color: #1f5fbf; }
.text-bg-primary { background-color: #1f5fbf !important; }

/* Marque */
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--mca-accent), #ffc24b); color: var(--mca-navy); font-size: 18px; }
.brand-mark.lg { width: 44px; height: 44px; font-size: 22px; }

/* Barre latérale admin */
.sidebar { width: 258px; min-height: 100vh; background: var(--mca-navy); color: #c9d6e6; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
@media (max-width: 991.98px) { .sidebar { position: fixed; background: var(--mca-navy); } }
.sidebar-brand { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand a { color: #fff; }
.sidebar-brand strong { display: block; font-size: 1.05rem; line-height: 1.1; }
.sidebar-brand small { display: block; font-size: .72rem; opacity: .6; }
.sidebar-nav { padding: 10px 10px 30px; }
.nav-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .5; margin: 16px 10px 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #c9d6e6; text-decoration: none; font-weight: 500; }
.nav-item i { font-size: 1.05rem; width: 20px; text-align: center; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.13); color: #fff; box-shadow: inset 3px 0 0 var(--mca-accent); }

.main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: #fff; border-bottom: 1px solid var(--mca-border); position: sticky; top: 0; z-index: 1020; }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mca-navy); color: #fff; font-weight: 600; font-size: .8rem; }
.content { padding: 24px; flex: 1; }
@media (max-width: 575.98px) { .content { padding: 16px; } .topbar { padding: 10px 16px; } }
.footer { padding: 16px 24px; font-size: .78rem; color: #7b8794; }

/* Espace client */
.client-nav { background: var(--mca-navy); }
.client-nav .nav-link { font-weight: 500; }
.client-nav .nav-link.active { color: #fff; box-shadow: inset 0 -3px 0 var(--mca-accent); }

/* En-têtes de page */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-head h1 { font-size: 1.45rem; font-weight: 700; margin: 0; color: var(--mca-navy); }
.page-head .sub { color: #6b7785; font-size: .88rem; margin-top: 2px; }
.breadcrumb { font-size: .8rem; margin-bottom: 4px; }

/* Cartes */
.card { border: 1px solid var(--mca-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--mca-border); font-weight: 600; padding: 12px 16px; border-radius: 12px 12px 0 0 !important; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-header .bi { color: var(--mca-blue); }

.kpi { padding: 16px; height: 100%; }
.kpi .label { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7785; font-weight: 600; }
.kpi .value { font-size: 1.55rem; font-weight: 700; color: var(--mca-navy); line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .hint { font-size: .78rem; color: #7b8794; margin-top: 2px; }
.kpi .ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 1.15rem; }
.ico-blue { background: #e8f0fe; color: #1f5fbf; } .ico-green { background: #e6f6ec; color: #1a7f45; }
.ico-amber { background: #fff4de; color: #b26b00; } .ico-red { background: #fdeceb; color: #c0392b; } .ico-navy { background: #e7edf4; color: var(--mca-navy); }

/* Tableaux */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7785; font-weight: 600; background: #f8fafc; border-bottom-color: var(--mca-border); white-space: nowrap; }
.table td { vertical-align: middle; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }
.badge-statut { font-weight: 600; font-size: .72rem; padding: .35em .65em; }
.text-xs { font-size: .76rem; }

/* Clé API affichée une seule fois */
.key-reveal { background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 14px 16px; font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; font-size: .95rem; }
pre.code { background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 14px 16px; font-size: .82rem; overflow-x: auto; }
.sms-counter { font-size: .78rem; }

/* Connexion */
.auth-wrap { display: flex; min-height: 100vh; }
.auth-side { flex: 1; background: radial-gradient(circle at 20% 20%, #1c4a7a, var(--mca-navy) 50%, var(--mca-navy-2)); color: #fff; padding: 56px; flex-direction: column; justify-content: space-between; }
.auth-main { flex: 1; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 440px; }
.auth-card .form-control { padding: .65rem .85rem; }

.empty { text-align: center; color: #7b8794; padding: 36px 16px; }
.empty .bi { font-size: 2rem; display: block; margin-bottom: 8px; opacity: .5; }
.chart-box { position: relative; height: 240px; }
.dl-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: .9rem; }
.dl-grid dt { color: #6b7785; font-weight: 500; }
.dl-grid dd { margin: 0; }

/* Barre latérale : Bootstrap rend .offcanvas-lg transparent au-delà de 992 px */
.sidebar.offcanvas-lg { background-color: var(--mca-navy) !important; --bs-offcanvas-width: 258px; }
@media (min-width: 992px) { .sidebar.offcanvas-lg { flex: 0 0 258px; width: 258px; display: block; } }
.sidebar .nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }