/* ============================================================
   MBOA HOUSE — Back-office interne
   Style : "Data-Dense Dashboard" (structure) + identité MBOA HOUSE
   Typo   : Inter — lisible, neutre, faite pour les tableaux/formulaires
   ============================================================ */

:root {
  --mh-red: #c1121f;
  --mh-red-dark: #8f0d17;
  --mh-black: #1a1a1a;
  --mh-orange: #ff8c00;
  --mh-white: #ffffff;
  --mh-bg: #f4f5f7;
  --mh-surface: #ffffff;
  --mh-border: #e4e6eb;
  --mh-text: #1f2430;
  --mh-text-muted: #6b7280;
  --mh-radius: 0.6rem;
  --mh-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --mh-shadow-hover: 0 4px 12px rgba(16, 24, 40, 0.10);
  --font-ui: "Inter", "Segoe UI", -apple-system, sans-serif;
}

html, body { height: 100%; }

body {
  background-color: var(--mh-bg);
  color: var(--mh-text);
  font-family: var(--font-ui);
  font-size: 0.925rem;
}

.mh-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.mh-main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-ui); font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Navbar ---------- */
.mh-navbar-logo {
  height: 38px;
  width: auto;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
}

.mh-login-logo {
  height: 90px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.mh-navbar {
  background-color: var(--mh-black);
  border-bottom: 3px solid var(--mh-red);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.mh-navbar .navbar-brand { font-weight: 800; letter-spacing: -0.01em; flex-shrink: 0; }
.mh-navbar .nav-link { font-size: 0.83rem; font-weight: 600; padding: 0.45rem 0.6rem !important; white-space: nowrap; }
@media (min-width: 992px) {
  .mh-navbar .navbar-nav { flex-wrap: wrap; row-gap: 0.25rem; }
  .mh-navbar .navbar-collapse { flex-grow: 0; flex-shrink: 1; min-width: 0; }
}

.text-mh-orange { color: var(--mh-orange) !important; }

/* ---------- Buttons ---------- */
.btn { font-family: var(--font-ui); font-weight: 600; border-radius: var(--mh-radius); font-size: 0.875rem; }

.btn-mh-orange {
  background-color: var(--mh-orange);
  border-color: var(--mh-orange);
  color: var(--mh-black);
}
.btn-mh-orange:hover {
  background-color: #e07b00;
  border-color: #e07b00;
  color: var(--mh-white);
}

.btn-mh-red {
  background-color: var(--mh-red);
  border-color: var(--mh-red);
  color: var(--mh-white);
}
.btn-mh-red:hover {
  background-color: var(--mh-red-dark);
  border-color: var(--mh-red-dark);
  color: var(--mh-white);
}

/* ---------- Cards ---------- */
.mh-card {
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius);
  box-shadow: var(--mh-shadow);
  background: var(--mh-surface);
}

.mh-card .card-header {
  background-color: var(--mh-black);
  color: var(--mh-white);
  border-radius: var(--mh-radius) var(--mh-radius) 0 0 !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.75rem 1.1rem;
  border-bottom: none;
}
.mh-card .card-body { padding: 1.1rem; }

/* ---------- KPI tiles ---------- */
.mh-kpi {
  border-radius: var(--mh-radius);
  padding: 1.1rem 1.25rem;
  color: var(--mh-white);
  box-shadow: var(--mh-shadow);
  position: relative;
  overflow: hidden;
}
.mh-kpi.red { background: linear-gradient(135deg, var(--mh-red), var(--mh-red-dark)); }
.mh-kpi.black { background: linear-gradient(135deg, #3a3a3a, var(--mh-black)); }
.mh-kpi.orange { background: linear-gradient(135deg, var(--mh-orange), #b35f00); }
.mh-kpi .kpi-value { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.mh-kpi .kpi-label { font-size: 0.78rem; opacity: 0.9; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------- Footer ---------- */
.mh-footer {
  background-color: var(--mh-black);
  color: #b8b8b8;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ---------- Tables ---------- */
.table {
  font-size: 0.875rem;
  --bs-table-hover-bg: #fbf4ee;
}
table.table thead {
  background-color: var(--mh-black);
  color: var(--mh-white);
}
table.table thead th {
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: none;
}
.table > :not(caption) > * > * { padding: 0.6rem 0.85rem; }
.mh-card .table { margin-bottom: 0; }

/* ---------- Forms ---------- */
.form-label { font-size: 0.82rem; font-weight: 600; color: var(--mh-text); margin-bottom: 0.3rem; }
.form-control, .form-select {
  border-radius: 0.5rem;
  border-color: var(--mh-border);
  font-size: 0.9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--mh-red);
  box-shadow: 0 0 0 0.2rem rgba(193, 18, 31, 0.12);
}

/* ---------- Badges ---------- */
.badge { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.02em; padding: 0.4em 0.65em; }
.badge-status-actif, .badge-status-disponible, .badge-status-livree, .badge-status-paye { background-color: #157a3c !important; }
.badge-status-inactif, .badge-status-epuise, .badge-status-annulee { background-color: #6c757d !important; }
.badge-status-perime, .badge-status-non_paye { background-color: var(--mh-red) !important; }
.badge-status-presque_epuise, .badge-status-partiel { background-color: var(--mh-orange) !important; color: var(--mh-black) !important; }

.nav-link { color: rgba(255,255,255,.85) !important; }
.nav-link:hover { color: var(--mh-orange) !important; }

/* ---------- Misc ---------- */
.alert { border-radius: var(--mh-radius); font-size: 0.875rem; }