:root {
  --app-primary: #146ef5;
  --app-primary-dark: #0b57d0;
  --app-success: #198754;
  --app-warning: #f5b700;
  --app-danger: #dc3545;
  --app-info: #0dcaf0;
  --app-dark: #20252b;
  --app-muted: #6c757d;
  --app-bg: #f4f7fb;
  --app-card: #ffffff;
  --app-border: #dce3ec;
  --app-radius: .8rem;
  --app-shadow: 0 .18rem .7rem rgba(31, 42, 55, .08);
  --app-control-height: 46px;
  --app-action-size: 44px;
}

body {
  background: var(--app-bg) !important;
  color: #20252b;
  -webkit-font-smoothing: antialiased;
}

.main-content { min-height: 100vh; }
.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5 {
  font-weight: 700;
  letter-spacing: -.015em;
}

.card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  overflow: hidden;
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--app-border);
  padding: .9rem 1rem;
}
.card-body { padding: 1rem; }

.form-label { font-weight: 600; color: #343a40; margin-bottom: .4rem; }
.form-control, .form-select {
  min-height: var(--app-control-height);
  border-radius: .55rem;
  border-color: #cfd8e3;
  padding: .62rem .8rem;
}
textarea.form-control { min-height: 110px; }
.form-control:focus, .form-select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 .2rem rgba(20,110,245,.15);
}

.btn {
  min-height: var(--app-control-height);
  border-radius: .55rem;
  font-weight: 600;
  padding: .58rem .9rem;
  box-shadow: none !important;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease;
}
.btn:hover { filter: brightness(.97); }
.btn:active { transform: translateY(1px); }
.btn-sm {
  min-height: 38px;
  min-width: 38px;
  padding: .42rem .62rem;
  border-radius: .48rem;
}
.btn-lg { min-height: 50px; border-radius: .65rem; }

/* Groupes génériques : jamais de boutons collés. */
.btn-group, .btn-group-sm, .mobile-action-group, .action-buttons, .form-actions {
  gap: .45rem !important;
}
.btn-group > .btn, .btn-group-sm > .btn {
  border-radius: .5rem !important;
  margin-left: 0 !important;
}

/* Actions de ligne : dimensions constantes et cible tactile sûre. */
td.actions-cell, td[data-label="Actions"] { min-width: 0; }
td.actions-cell .btn-group,
td[data-label="Actions"] .btn-group,
.mobile-action-group {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}
td.actions-cell .btn,
td[data-label="Actions"] .btn,
.mobile-action-group .btn {
  flex: 0 0 var(--app-action-size) !important;
  width: var(--app-action-size) !important;
  min-width: var(--app-action-size) !important;
  height: var(--app-action-size) !important;
  min-height: var(--app-action-size) !important;
  padding: .35rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1rem;
}

.table-responsive { border-radius: .65rem; }
.table { margin-bottom: 0; vertical-align: middle; }
.table > :not(caption) > * > * { padding: .75rem .7rem; border-color: #e3e8ef; }
.table thead th { font-size: .88rem; font-weight: 700; vertical-align: middle; }
.table tbody tr { transition: background-color .12s ease; }

.badge {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .45rem;
  padding: .32rem .55rem;
  font-weight: 700;
}

/* Calendrier : grille nette avec bordures dans les deux directions. */
#calendar-card { overflow: hidden; }
#calendar-card .card-header { border-radius: 0; }
.calendar-table {
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
}
.calendar-table th,
.calendar-table td {
  border: 1px solid #cfd8e3 !important;
}
.calendar-table thead th {
  background: #f3f6fa !important;
  color: #20252b;
  text-align: center;
}
.calendar-table td {
  height: 76px;
  background: #fff;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.calendar-table td:hover { background: #eef5ff !important; }
.calendar-table td.table-primary {
  background: #d9e8ff !important;
  box-shadow: inset 0 0 0 2px var(--app-primary);
}
.calendar-table td.border-danger { box-shadow: inset 0 0 0 2px var(--app-danger); }
.calendar-table td.table-primary.border-danger {
  box-shadow: inset 0 0 0 2px var(--app-primary), inset 0 0 0 4px rgba(220,53,69,.35);
}
.calendar-table .badge {
  min-width: 30px;
  min-height: 28px;
  border-radius: .5rem;
}

.pagination { flex-wrap: wrap; justify-content: center; }
.page-link { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

/* Navigation. */
.sidebar { box-shadow: .2rem 0 .8rem rgba(0,0,0,.08); }
.sidebar .nav-link { border-radius: .5rem; margin-bottom: .15rem; }
.navbar { min-height: 66px; box-shadow: 0 .15rem .5rem rgba(0,0,0,.18); }

@media (max-width: 767.98px) {
  :root { --app-action-size: 50px; }
  body { padding-top: 58px; }
  .main-content { padding: .8rem !important; }
  .main-content > .container-fluid,
  .main-content > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }

  .card { border-radius: .75rem; }
  .card-body { padding: .8rem; }
  .card-header { padding: .8rem; }

  /* En-têtes de page avec bouton principal empilé proprement. */
  .page-heading,
  .main-content .d-flex.justify-content-between.align-items-center.mb-4 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(145px, .9fr);
    gap: .75rem;
    align-items: center !important;
  }
  .main-content .d-flex.justify-content-between.align-items-center.mb-4 h1,
  .main-content .d-flex.justify-content-between.align-items-center.mb-4 h2,
  .main-content .d-flex.justify-content-between.align-items-center.mb-4 h3 {
    margin: 0;
    font-size: 1.45rem;
  }
  .main-content .d-flex.justify-content-between.align-items-center.mb-4 > .btn {
    width: 100%;
    min-width: 0;
  }

  /* Cartes mobiles issues des tableaux. */
  .app-responsive-table:not(.calendar-table) tbody { gap: 1rem !important; }
  .app-responsive-table:not(.calendar-table) tr {
    border-radius: .75rem !important;
    box-shadow: var(--app-shadow) !important;
  }
  .app-responsive-table:not(.calendar-table) td {
    grid-template-columns: minmax(112px, 36%) minmax(0, 1fr) !important;
    padding: .78rem .75rem !important;
    gap: .65rem !important;
    align-items: center !important;
  }
  .app-responsive-table:not(.calendar-table) td::before { line-height: 1.25; }
  .app-responsive-table:not(.calendar-table) td[data-label="Actions"] {
    display: block !important;
    padding-top: .85rem !important;
  }
  .app-responsive-table:not(.calendar-table) td[data-label="Actions"]::before {
    display: block;
    margin-bottom: .7rem;
  }
  td.actions-cell .btn-group,
  td[data-label="Actions"] .btn-group,
  .mobile-action-group {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: .65rem !important;
    justify-content: stretch;
  }
  td.actions-cell .btn,
  td[data-label="Actions"] .btn,
  .mobile-action-group .btn {
    width: 100% !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
  }

  /* Le calendrier conserve une vraie grille et chaque semaine est séparée. */
  #calendar-card .card-header { padding: .75rem !important; }
  #calendar-card .card-header h5 { font-size: 1.1rem; text-align: center; }
  #calendar-card .card-header .btn { width: 48px; min-width: 48px; height: 48px; min-height: 48px; }
  .calendar-table th,
  .calendar-table td { border: 1px solid #bfc9d6 !important; }
  .calendar-table th { height: 44px; padding: .35rem .05rem !important; font-size: .72rem !important; }
  .calendar-table td { height: 68px !important; padding: .34rem .08rem !important; font-size: .85rem !important; }
  .calendar-table .badge { min-width: 28px; min-height: 27px; padding: .2rem .35rem; }

  .form-actions, .action-buttons { gap: .65rem !important; }
  .form-actions .btn, .action-buttons .btn { min-height: 50px; }

  /* Sur impression/bon, les actions sont empilées et régulières. */
  .print-actions { display: grid !important; grid-template-columns: 1fr !important; gap: .65rem !important; }
  .print-actions .btn { width: 100% !important; min-height: 52px; }
}

@media (max-width: 390px) {
  .main-content .d-flex.justify-content-between.align-items-center.mb-4 {
    grid-template-columns: 1fr;
  }
  .app-responsive-table:not(.calendar-table) td {
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr) !important;
  }
  .calendar-table th { font-size: .67rem !important; }
  .calendar-table td { height: 62px !important; font-size: .8rem !important; }
}

/* =========================================================
   VTC Manager Pro — refonte globale 2026
   ========================================================= */
:root {
  --app-primary-soft: #eaf2ff;
  --app-success-soft: #e8f6ef;
  --app-warning-soft: #fff6dc;
  --app-danger-soft: #fdecef;
  --app-info-soft: #e7f8fc;
  --app-text: #172033;
  --app-text-soft: #5f6b7a;
  --app-sidebar-width: 250px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { color: var(--app-text); }
a { text-underline-offset: .16em; }
.main-content { padding: 1.5rem; }
.main-content > * { max-width: 100%; }

/* Titres et sections */
.main-content > h1:first-child,
.main-content > h2:first-child,
.main-content > h3:first-child { margin-bottom: .25rem; }
.page-subtitle, .text-muted { color: var(--app-text-soft) !important; }
.section-title { font-size: 1.05rem; font-weight: 750; }

/* En-têtes de cartes et tableaux */
.card-header { font-weight: 700; color: var(--app-text); }
.card-header .btn { flex-shrink: 0; }
.card-header.d-flex { gap: .75rem; flex-wrap: wrap; }
.table thead.table-dark th,
.table-dark th { background: #20262d !important; color: #fff; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #f8fafc; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #eef5ff; }

/* Formulaires */
fieldset { border: 1px solid var(--app-border); border-radius: var(--app-radius); padding: 1rem; }
legend { float: none; width: auto; padding: 0 .4rem; font-size: 1rem; font-weight: 700; }
.input-group-text { border-color: #cfd8e3; background: #f5f7fa; }
.form-check-input { width: 1.15em; height: 1.15em; }
.form-text { color: var(--app-text-soft); }

/* Boutons : vocabulaire visuel cohérent */
.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); }
.btn-success { --bs-btn-bg: var(--app-success); --bs-btn-border-color: var(--app-success); }
.btn-warning { color: #332600; }
.btn-outline-secondary { background: #fff; }
.btn-float { display: inline-flex; align-items: center; justify-content: center; }

/* KPI / indicateurs */
.card.bg-primary, .card.bg-success, .card.bg-info, .card.bg-warning, .card.bg-danger {
  border: 0;
  box-shadow: 0 .35rem 1rem rgba(31, 42, 55, .14);
}
.card.bg-primary .card-body,
.card.bg-success .card-body,
.card.bg-info .card-body,
.card.bg-warning .card-body,
.card.bg-danger .card-body { padding: 1.05rem 1.15rem; }
.card.bg-primary h3, .card.bg-success h3, .card.bg-info h3,
.card.bg-warning h3, .card.bg-danger h3,
.card.bg-primary h4, .card.bg-success h4, .card.bg-info h4,
.card.bg-warning h4, .card.bg-danger h4 { margin: .25rem 0 0; font-weight: 800; }

/* Alertes, modales et listes */
.alert { border: 0; border-left: 4px solid currentColor; border-radius: .65rem; box-shadow: var(--app-shadow); }
.modal-content { border: 0; border-radius: var(--app-radius); box-shadow: 0 1rem 3rem rgba(0,0,0,.18); }
.modal-header, .modal-footer { border-color: var(--app-border); }
.list-group-item { border-color: var(--app-border); padding: .8rem 1rem; }

/* Graphiques */
.chart-card .card-body,
.card-body:has(> canvas) { position: relative; min-height: 330px; }
.chart-container { position: relative; width: 100%; min-height: 330px; }
.chart-container canvas,
.card-body > canvas { max-width: 100% !important; max-height: 520px; }

/* Référentiels sous forme de tuiles si présents */
.reference-grid .card, .dashboard-grid .card { height: 100%; }
.reference-grid .card-body { display: flex; flex-direction: column; }
.reference-grid .btn { margin-top: auto; }

/* Images / documents */
.profile-photo, .driver-photo, .vehicle-photo {
  width: 120px; height: 120px; object-fit: cover; border-radius: .8rem;
  border: 1px solid var(--app-border); background: #fff;
}
.document-preview { max-width: 100%; border: 1px solid var(--app-border); border-radius: .65rem; }

/* Navigation */
.sidebar .nav-link { display: flex; align-items: center; gap: .5rem; }
.sidebar .nav-link:hover { transform: translateX(2px); }
.sidebar .nav-link, .navbar, .card, .btn { transition-duration: .16s; }

@media (max-width: 991.98px) {
  .main-content { padding-top: 4px !important; }
  .offcanvas { max-width: min(84vw, 320px); }
}

@media (max-width: 767.98px) {
  .main-content { padding: 10px !important; }
  .row.g-4 { --bs-gutter-x: .85rem; --bs-gutter-y: .85rem; }
  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.18rem; }

  /* En-têtes de cartes : texte puis action pleine largeur si nécessaire */
  .card-header.d-flex.justify-content-between { align-items: stretch !important; }
  .card-header.d-flex.justify-content-between > .btn,
  .card-header.d-flex.justify-content-between > a.btn { min-width: 145px; }

  /* KPI compacts */
  .card.bg-primary .card-body,
  .card.bg-success .card-body,
  .card.bg-info .card-body,
  .card.bg-warning .card-body,
  .card.bg-danger .card-body { padding: .9rem; }

  /* Graphiques lisibles et sans débordement */
  .chart-card .card-body,
  .card-body:has(> canvas),
  .chart-container { min-height: 280px; padding: .65rem; }
  .card-body > canvas { max-height: 390px; }

  /* Tableaux-cartes : actions séparées */
  .app-responsive-table:not(.calendar-table) td[data-label="Actions"] .btn-group,
  .app-responsive-table:not(.calendar-table) td.actions-cell .btn-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .app-responsive-table:not(.calendar-table) td[data-label="Actions"] .btn,
  .app-responsive-table:not(.calendar-table) td.actions-cell .btn {
    min-height: 52px !important;
  }

  /* Page titre + bouton principal */
  .main-content .d-flex.justify-content-between.align-items-center.mb-4 {
    grid-template-columns: 1fr !important;
  }

  /* Les gros boutons flottants ne masquent plus le contenu */
  .btn-float { width: 56px; height: 56px; right: 14px; bottom: 14px; font-size: 1.5rem; }
}

@media (max-width: 420px) {
  .app-responsive-table:not(.calendar-table) td {
    grid-template-columns: 1fr !important;
    gap: .3rem !important;
  }
  .app-responsive-table:not(.calendar-table) td::before { margin-bottom: .1rem; }
  .calendar-table th { font-size: .66rem !important; }
  .calendar-table td { font-size: .79rem !important; }
}

@media print {
  .sidebar, .navbar, .btn-float, .no-print, .app-pagination { display: none !important; }
  body { background: #fff !important; padding: 0 !important; }
  .main-content { margin: 0 !important; padding: 0 !important; }
  .card { box-shadow: none !important; break-inside: avoid; }
}

/* Écran de connexion */
.auth-page { background: radial-gradient(circle at top right, #eaf2ff 0, #f4f7fb 42%, #eef2f7 100%) !important; }
.auth-card { max-width: 440px; margin: 0 auto; border: 0; box-shadow: 0 1rem 3rem rgba(31,42,55,.14) !important; }
.auth-card .card-body { padding: clamp(1.25rem, 4vw, 2rem); }


@media (max-width:992px){html,body{overflow-x:hidden}.main-content{margin-top:0!important;padding-top:4px!important}.container-fluid{padding-top:0!important}.row{margin-top:0!important}h1:first-child,h2:first-child,h3:first-child{margin-top:4px!important}.auth-card{margin-top:12px!important}}