/* ==========================================================================
   AvityTransportSTPP — feuille unique hors chauffeur
   Fusion des extraits agents 1–5. Règles scopées par contexte de page.
   Les tokens divergents restent page-local (pas d’unification visuelle).
   ========================================================================== */

/* ==========================================================================
   Tokens / base scoped (admin)
   ========================================================================== */

body.admin-app {
    font-family: Inter, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #1f2937;
    margin: 0;
}
body.admin-app .main-content,
body.admin-app .container,
body.admin-app .admin-container {
    margin-left: 0;
}


/* ==========================================================================
   Admin navigation
   ========================================================================== */

/* ----- Navbar admin (extrait de style/sidebar.css) ----- */
/* NAVBAR ADMIN FUSIONNÉE */
body.admin-app .topnav-admin{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  width: 100%;
  background: #0b2033;
  color: #fff;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.25);
}
body.admin-app.with-topnav{ padding-top: 70px;}
body.admin-app .topnav-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 62px;
}
body.admin-app .topnav-left{ display: flex; align-items: center; gap: 14px; }
body.admin-app .brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-weight: 600; font-size: 15px; }
body.admin-app .brand img{ height: 40px; width: auto; display: block; }
body.admin-app .brand-text{ white-space: nowrap; }
body.admin-app .nav-toggle{ display: none; flex-direction: column; gap: 4px; background: transparent; border: none; cursor: pointer; padding: 6px; }
body.admin-app .nav-toggle span{ width: 26px; height: 3px; background: #fff; border-radius: 2px; transition: .3s; }
body.admin-app .topnav-main{ flex: 1; display: flex; align-items: center; }
body.admin-app .topnav-main.open{ display: block; }
body.admin-app .nav-level1{ list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; align-items: center; }
body.admin-app .nav-level1 > li > a,
body.admin-app .nav-level1 > li > details > summary{
  color: #dfe8ef; text-decoration: none; font-size: 14px; font-weight: 500; cursor: pointer;
  padding: 8px 4px; border-radius: 4px; line-height: 1.2; outline: none;
  transition: color .25s;
}
body.admin-app .nav-level1 > li > a:hover,
body.admin-app .nav-level1 > li > details[open] > summary,
body.admin-app .nav-level1 > li > details > summary:hover{ color: #4dabff; }
body.admin-app .has-sub details{ position: relative; }
body.admin-app .has-sub summary::-webkit-details-marker{ display: none; }
body.admin-app .has-sub summary{ display: flex; align-items: center; gap: 6px; }
body.admin-app .has-sub details > ul{
  position: absolute; top: 100%; left: 0; min-width: 210px;
  background: #112a40; padding: 10px 0; margin: 6px 0 0 0;
  list-style: none; border: 1px solid #1c3d57; border-radius: 10px; box-shadow: 0 10px 30px -8px #00000066;
  backdrop-filter: blur(4px);
}
body.admin-app .has-sub details[open] > ul{ animation: admin-nav-fade-in .25s ease; }
body.admin-app .has-sub li a{
  display: block; padding: 9px 16px; color: #d5dee6; font-size: 13px; text-decoration: none;
  transition: background .25s, color .25s;
}
body.admin-app .has-sub li a:hover{ background: #18364e; color: #fff; }
body.admin-app .topnav-right{ display: flex; align-items: center; gap: 18px; white-space: nowrap; }

body.admin-app .nav-search{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: #10283c;
  border: 1px solid #1f3d55;
  border-top: 5px solid #10283c;
  border-radius: 50px;
  padding: 2px 10px;
  margin-top: 16px;
  margin-bottom: 16px;
}
body.admin-app .nav-search input{
  background: transparent; border: none; outline: none; padding: 6px 4px; color: #fff; font-size: 13px; width: 150px;
}
body.admin-app .nav-search input::placeholder{
  color: #8aa2b7;
  font-family: inherit;
  font-size: 13px;
}
body.admin-app .nav-search button{
  background: #1f6fbc; border: none; color: #fff; cursor: pointer; padding: 6px 10px; border-radius: 30px; font-size: 13px;
  transition: background .25s;
}
body.admin-app .nav-search button:hover{ background: #2484df; }
body.admin-app .user-chip{
  display: flex; align-items: center; gap: 8px; background: #10283c; padding: 6px 14px 6px 8px;
  border: 1px solid #1f3d55; border-radius: 30px; font-size: 13px; color: #d9e4ec;
}
body.admin-app .user-chip .avatar{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: #1f6fbc; color: #fff; font-weight: 600; font-size: 14px; border-radius: 50%;
}
body.admin-app .logout-btn{
  background: #c53b35; color: #fff; text-decoration: none; padding: 8px 16px; border-radius: 30px; font-size: 13px; font-weight: 600;
  transition: background .25s, transform .2s;
}
body.admin-app .logout-btn:hover{ background: #e04942; }
body.admin-app .logout-btn:active{ transform: translateY(1px); }
@media (max-width:1100px) {
  body.admin-app .nav-level1{ gap: 16px; }
  body.admin-app .nav-search input{ width: 120px; }
}
@media (max-width:900px) {
  body.admin-app .nav-toggle{ display: flex; }
  body.admin-app .topnav-inner{ flex-wrap: wrap; align-items: flex-start; }
  body.admin-app .topnav-main{ order: 3; width: 100%; display: none; }
  body.admin-app .topnav-main.open{ display: block; }
  body.admin-app .nav-level1{ flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 4px 10px; }
  body.admin-app .has-sub details > ul{ position: static; border: none; box-shadow: none; background: transparent; padding: 4px 0 6px; margin: 4px 0 4px 6px; }
  body.admin-app .has-sub li a{ padding: 6px 14px; border-radius: 6px; }
  body.admin-app .has-sub li a:hover{ background: #173247; }
  body.admin-app .nav-search{ order: 2; flex-shrink: 1; max-width: 180px; min-width: 0; }
  body.admin-app .nav-search input{ width: 100px; min-width: 0; max-width: 100px; }
  body.admin-app .topnav-right{ gap: 10px; flex-wrap: nowrap !important; width: 100%; justify-content: flex-end; }
  body.admin-app .topnav-right > *{ flex-shrink: 1; min-width: 0; }
}
/* Empêche tout retour à la ligne dans la navbar et sidebar */
body.admin-app .topnav-admin,
body.admin-app .topnav-inner,
body.admin-app .topnav-left,
body.admin-app .topnav-main,
body.admin-app .topnav-right,
body.admin-app .brand,
body.admin-app .nav-search,
body.admin-app .user-chip,
body.admin-app .logout-btn,
body.admin-app .nav-level1,
body.admin-app .has-sub summary{
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}
body.admin-app .topnav-main ul,
body.admin-app .nav-level1{
  display: flex;
  flex-wrap: nowrap !important;
  align-items: center;
  white-space: nowrap !important;
}
@keyframes admin-nav-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
body.admin-app .nav-level1 a.active,
body.admin-app .has-sub li a.active{ color: #4dabff; font-weight: 600; }
body.admin-app{ padding-top: 62px; }


/* ==========================================================================
   Admin — Core (dashboard, missions, BDN, timesheets, détail mission)
   ========================================================================== */

/*
 * admin-core.css — Agent 2 (css-agent-2-admin-core)
 * Static styles for: admin.php, admin_missions.php, admin_missions?.php,
 * admin_nbn.php, admin_timesheets.php, mission_detail_admin.php
 *
 * Cascade order matches the original per-page stylesheet sequence.
 * Page-specific rules are scoped so they cannot leak across pages.
 * Legacy shared files are NOT deleted (integrator owns that).
 */

/* ============================================================================
   1. style/styleadmin.css → .page-admin-dashboard, .page-admin-mission-detail
   ============================================================================ */
.page-admin-dashboard, .page-admin-mission-detail,
/*
 * admin-core.css — Agent 2 (css-agent-2-admin-core)
 * Static styles for: admin.php, admin_missions.php, admin_missions?.php,
 * admin_nbn.php, admin_timesheets.php, mission_detail_admin.php
 *
 * Cascade order matches the original per-page stylesheet sequence.
 * Page-specific rules are scoped so they cannot leak across pages.
 * Legacy shared files are NOT deleted (integrator owns that).
 */

/* ============================================================================
   1. style/styleadmin.css → .page-admin-trucks, .page-admin-trucks
   ============================================================================ */
.page-admin-trucks, .page-admin-trucks,
/*
 * admin-core.css — Agent 2 (css-agent-2-admin-core)
 * Static styles for: admin.php, admin_missions.php, admin_missions?.php,
 * admin_nbn.php, admin_timesheets.php, mission_detail_admin.php
 *
 * Cascade order matches the original per-page stylesheet sequence.
 * Page-specific rules are scoped so they cannot leak across pages.
 * Legacy shared files are NOT deleted (integrator owns that).
 */

/* ============================================================================
   1. style/styleadmin.css → .page-admin-truck-detail, .page-admin-truck-detail
   ============================================================================ */
.page-admin-truck-detail, .page-admin-truck-detail{
    --primary: #2c3e50;
    --primary-light: #3949ab;
    --accent: #e62222;
    --background: #f7f9fb;
    --surface: #fff;
    --border: #e3eaf3;
    --shadow: 0 2px 12px rgba(44,62,80,0.08);
    --radius: 14px;
    --spacing: 24px;
    --font-main: 'Segoe UI', Arial, sans-serif;
    --max-width: none;
}

body.page-admin-dashboard, body.page-admin-dashboard *, body.page-admin-mission-detail, body.page-admin-mission-detail *,
body.page-admin-trucks, body.page-admin-trucks *, body.page-admin-trucks, body.page-admin-trucks *,
body.page-admin-truck-detail, body.page-admin-truck-detail *, body.page-admin-truck-detail, body.page-admin-truck-detail *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html:has(body.page-admin-dashboard), html:has(body.page-admin-mission-detail), body.page-admin-dashboard, body.page-admin-mission-detail,
html:has(body.page-admin-trucks), html:has(body.page-admin-trucks), body.page-admin-trucks, body.page-admin-trucks,
html:has(body.page-admin-truck-detail), html:has(body.page-admin-truck-detail), body.page-admin-truck-detail, body.page-admin-truck-detail{
    font-family: var(--font-main);
    background: var(--background);
    color: var(--primary);
    min-height: 100vh;
    width: 100vw;
}

body.page-admin-dashboard, body.page-admin-mission-detail,
body.page-admin-trucks, body.page-admin-trucks,
body.page-admin-truck-detail, body.page-admin-truck-detail{
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    width: 100vw;
}

/* Conteneur principal */
.page-admin-dashboard .admin-container, .page-admin-mission-detail .admin-container,
/* Conteneur principal */
.page-admin-trucks .admin-container, .page-admin-trucks .admin-container,
/* Conteneur principal */
.page-admin-truck-detail .admin-container, .page-admin-truck-detail .admin-container{
    margin: 12px 0;          /* haut et bas seulement */
    padding: 28px 18px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Navbar */
.page-admin-dashboard .navbar, .page-admin-mission-detail .navbar,
/* Navbar */
.page-admin-trucks .navbar, .page-admin-trucks .navbar,
/* Navbar */
.page-admin-truck-detail .navbar, .page-admin-truck-detail .navbar{
    background-color: var(--primary);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
}

.page-admin-dashboard .navbar a, .page-admin-mission-detail .navbar a,
.page-admin-trucks .navbar a, .page-admin-trucks .navbar a,
.page-admin-truck-detail .navbar a, .page-admin-truck-detail .navbar a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.page-admin-dashboard .navbar a:hover, .page-admin-mission-detail .navbar a:hover,
.page-admin-trucks .navbar a:hover, .page-admin-trucks .navbar a:hover,
.page-admin-truck-detail .navbar a:hover, .page-admin-truck-detail .navbar a:hover{
    color: var(--primary-light);
}

.page-admin-dashboard .navbar .logout-link:hover, .page-admin-mission-detail .navbar .logout-link:hover,
.page-admin-trucks .navbar .logout-link:hover, .page-admin-trucks .navbar .logout-link:hover,
.page-admin-truck-detail .navbar .logout-link:hover, .page-admin-truck-detail .navbar .logout-link:hover{
    color: #ff0000;
}

/* Titres */
.page-admin-dashboard h1, .page-admin-mission-detail h1,
/* Titres */
.page-admin-trucks h1, .page-admin-trucks h1,
/* Titres */
.page-admin-truck-detail h1, .page-admin-truck-detail h1{
    color: var(--primary);
    font-size: 2rem;
    margin-bottom: 28px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
    width: 100%;
    align-self: center;
}

.page-admin-dashboard .section-title, .page-admin-mission-detail .section-title, .page-admin-dashboard .form-title, .page-admin-mission-detail .form-title, .page-admin-dashboard h2, .page-admin-mission-detail h2,
.page-admin-trucks .section-title, .page-admin-trucks .section-title, .page-admin-trucks .form-title, .page-admin-trucks .form-title, .page-admin-trucks h2, .page-admin-trucks h2,
.page-admin-truck-detail .section-title, .page-admin-truck-detail .section-title, .page-admin-truck-detail .form-title, .page-admin-truck-detail .form-title, .page-admin-truck-detail h2, .page-admin-truck-detail h2{
    font-size: 1.25rem;
    color: var(--primary-light);
    font-weight: 500;
    margin-bottom: 18px;
    margin-top: 0;
    border-bottom: 2px solid var(--border);
    padding-bottom: 8px;
    background: #f7fafd;
    border-radius: 10px 10px 0 0;
    text-align: left;
}

/* Barre de recherche */
.page-admin-dashboard .search-form, .page-admin-mission-detail .search-form,
/* Barre de recherche */
.page-admin-trucks .search-form, .page-admin-trucks .search-form,
/* Barre de recherche */
.page-admin-truck-detail .search-form, .page-admin-truck-detail .search-form{
    display: flex;
    margin-bottom: 20px;
    gap: 10px;
}

.page-admin-dashboard .search-form input, .page-admin-mission-detail .search-form input,
.page-admin-trucks .search-form input, .page-admin-trucks .search-form input,
.page-admin-truck-detail .search-form input, .page-admin-truck-detail .search-form input{
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 1rem;
    color: var(--primary);
    background: #f5f7fa;
}

.page-admin-dashboard .search-form button, .page-admin-mission-detail .search-form button,
.page-admin-trucks .search-form button, .page-admin-trucks .search-form button,
.page-admin-truck-detail .search-form button, .page-admin-truck-detail .search-form button{
    background: var(--primary);
    color: #fff;
    height: 40px;
    padding: 0 18px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.page-admin-dashboard .search-form button:hover, .page-admin-mission-detail .search-form button:hover,
.page-admin-trucks .search-form button:hover, .page-admin-trucks .search-form button:hover,
.page-admin-truck-detail .search-form button:hover, .page-admin-truck-detail .search-form button:hover{
    background: var(--primary-light);
    transform: translateY(-2px) scale(1.03);
}

/* Formulaires */
.page-admin-dashboard form, .page-admin-mission-detail form, .page-admin-dashboard .form-section, .page-admin-mission-detail .form-section,
/* Formulaires */
.page-admin-trucks form, .page-admin-trucks form, .page-admin-trucks .form-section, .page-admin-trucks .form-section,
/* Formulaires */
.page-admin-truck-detail form, .page-admin-truck-detail form, .page-admin-truck-detail .form-section, .page-admin-truck-detail .form-section{
    max-width: 500px;
    width: 100%;
    margin: 0 auto var(--spacing);
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    min-width: 0;
}

.page-admin-dashboard label, .page-admin-mission-detail label,
.page-admin-trucks label, .page-admin-trucks label,
.page-admin-truck-detail label, .page-admin-truck-detail label{
    display: block;
    margin-bottom: 6px;
    color: var(--primary);
    font-weight: normal;
    font-size: 1rem;
}

.page-admin-dashboard input, .page-admin-mission-detail input, .page-admin-dashboard select, .page-admin-mission-detail select, .page-admin-dashboard textarea, .page-admin-mission-detail textarea,
.page-admin-trucks input, .page-admin-trucks input, .page-admin-trucks select, .page-admin-trucks select, .page-admin-trucks textarea, .page-admin-trucks textarea,
.page-admin-truck-detail input, .page-admin-truck-detail input, .page-admin-truck-detail select, .page-admin-truck-detail select, .page-admin-truck-detail textarea, .page-admin-truck-detail textarea{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #f5f7fa;
    font-size: 1rem;
    margin-bottom: 10px;
    transition: border 0.2s;
    text-align: center;
    box-sizing: border-box;
}

.page-admin-dashboard input:focus, .page-admin-mission-detail input:focus, .page-admin-dashboard select:focus, .page-admin-mission-detail select:focus, .page-admin-dashboard textarea:focus, .page-admin-mission-detail textarea:focus,
.page-admin-trucks input:focus, .page-admin-trucks input:focus, .page-admin-trucks select:focus, .page-admin-trucks select:focus, .page-admin-trucks textarea:focus, .page-admin-trucks textarea:focus,
.page-admin-truck-detail input:focus, .page-admin-truck-detail input:focus, .page-admin-truck-detail select:focus, .page-admin-truck-detail select:focus, .page-admin-truck-detail textarea:focus, .page-admin-truck-detail textarea:focus{
    border: 1.5px solid var(--primary-light);
    outline: none;
    background: #fff;
}

.page-admin-dashboard .actions, .page-admin-mission-detail .actions,
.page-admin-trucks .actions, .page-admin-trucks .actions,
.page-admin-truck-detail .actions, .page-admin-truck-detail .actions{
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* Container pour les boutons d'action (supprimer, modifier emploi du temps, etc.) */
.page-admin-dashboard .action-buttons, .page-admin-mission-detail .action-buttons,
/* Container pour les boutons d'action (supprimer, modifier emploi du temps, etc.) */
.page-admin-trucks .action-buttons, .page-admin-trucks .action-buttons,
/* Container pour les boutons d'action (supprimer, modifier emploi du temps, etc.) */
.page-admin-truck-detail .action-buttons, .page-admin-truck-detail .action-buttons{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.page-admin-dashboard button, .page-admin-mission-detail button, .page-admin-dashboard .actions button, .page-admin-mission-detail .actions button,
.page-admin-trucks button, .page-admin-trucks button, .page-admin-trucks .actions button, .page-admin-trucks .actions button,
.page-admin-truck-detail button, .page-admin-truck-detail button, .page-admin-truck-detail .actions button, .page-admin-truck-detail .actions button{
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-admin-dashboard button:hover, .page-admin-mission-detail button:hover, .page-admin-dashboard .actions button:hover, .page-admin-mission-detail .actions button:hover,
.page-admin-trucks button:hover, .page-admin-trucks button:hover, .page-admin-trucks .actions button:hover, .page-admin-trucks .actions button:hover,
.page-admin-truck-detail button:hover, .page-admin-truck-detail button:hover, .page-admin-truck-detail .actions button:hover, .page-admin-truck-detail .actions button:hover{
    background: var(--primary-light);
    transform: translateY(-2px) scale(1.03);
}

.page-admin-dashboard button.danger, .page-admin-mission-detail button.danger,
.page-admin-trucks button.danger, .page-admin-trucks button.danger,
.page-admin-truck-detail button.danger, .page-admin-truck-detail button.danger{
    background: var(--accent);
}
.page-admin-dashboard button.danger:hover, .page-admin-mission-detail button.danger:hover,
.page-admin-trucks button.danger:hover, .page-admin-trucks button.danger:hover,
.page-admin-truck-detail button.danger:hover, .page-admin-truck-detail button.danger:hover{
    background: #c0392b;
}

/* Tableau */
.page-admin-dashboard .table-section, .page-admin-mission-detail .table-section,
/* Tableau */
.page-admin-trucks .table-section, .page-admin-trucks .table-section,
/* Tableau */
.page-admin-truck-detail .table-section, .page-admin-truck-detail .table-section{
    overflow-x: auto;
    margin-bottom: var(--spacing);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 0;
    min-width: 0;
}

.page-admin-dashboard table, .page-admin-mission-detail table,
.page-admin-trucks table, .page-admin-trucks table,
.page-admin-truck-detail table, .page-admin-truck-detail table{
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}

.page-admin-dashboard th, .page-admin-mission-detail th, .page-admin-dashboard td, .page-admin-mission-detail td,
.page-admin-trucks th, .page-admin-trucks th, .page-admin-trucks td, .page-admin-trucks td,
.page-admin-truck-detail th, .page-admin-truck-detail th, .page-admin-truck-detail td, .page-admin-truck-detail td{
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    white-space: nowrap;
}

.page-admin-dashboard th, .page-admin-mission-detail th,
.page-admin-trucks th, .page-admin-trucks th,
.page-admin-truck-detail th, .page-admin-truck-detail th{
    background: var(--primary);
    color: var(--surface);
    font-weight: 500;
    text-align: left;
}

.page-admin-dashboard tr:nth-child(even), .page-admin-mission-detail tr:nth-child(even),
.page-admin-trucks tr:nth-child(even), .page-admin-trucks tr:nth-child(even),
.page-admin-truck-detail tr:nth-child(even), .page-admin-truck-detail tr:nth-child(even){
    background: #f7fafd;
}

.page-admin-dashboard tr:last-child td, .page-admin-mission-detail tr:last-child td,
.page-admin-trucks tr:last-child td, .page-admin-trucks tr:last-child td,
.page-admin-truck-detail tr:last-child td, .page-admin-truck-detail tr:last-child td{
    border-bottom: none;
}

.page-admin-dashboard input[type="text"], .page-admin-mission-detail input[type="text"], .page-admin-dashboard input[type="email"], .page-admin-mission-detail input[type="email"], .page-admin-dashboard input[type="number"], .page-admin-mission-detail input[type="number"], .page-admin-dashboard textarea, .page-admin-mission-detail textarea, .page-admin-dashboard select, .page-admin-mission-detail select,
.page-admin-trucks input[type="text"], .page-admin-trucks input[type="text"], .page-admin-trucks input[type="email"], .page-admin-trucks input[type="email"], .page-admin-trucks input[type="number"], .page-admin-trucks input[type="number"], .page-admin-trucks textarea, .page-admin-trucks textarea, .page-admin-trucks select, .page-admin-trucks select,
.page-admin-truck-detail input[type="text"], .page-admin-truck-detail input[type="text"], .page-admin-truck-detail input[type="email"], .page-admin-truck-detail input[type="email"], .page-admin-truck-detail input[type="number"], .page-admin-truck-detail input[type="number"], .page-admin-truck-detail textarea, .page-admin-truck-detail textarea, .page-admin-truck-detail select, .page-admin-truck-detail select{
    font-size: 1rem;
}

/* Bouton "modifier l'emploi du temps" */
.page-admin-dashboard .edit-schedule-btn, .page-admin-mission-detail .edit-schedule-btn,
/* Bouton "modifier l'emploi du temps" */
.page-admin-trucks .edit-schedule-btn, .page-admin-trucks .edit-schedule-btn,
/* Bouton "modifier l'emploi du temps" */
.page-admin-truck-detail .edit-schedule-btn, .page-admin-truck-detail .edit-schedule-btn{
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(44,62,80,0.08);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.page-admin-dashboard .edit-schedule-btn:hover, .page-admin-mission-detail .edit-schedule-btn:hover,
.page-admin-trucks .edit-schedule-btn:hover, .page-admin-trucks .edit-schedule-btn:hover,
.page-admin-truck-detail .edit-schedule-btn:hover, .page-admin-truck-detail .edit-schedule-btn:hover{
    background: var(--primary-light);
    transform: translateY(-2px) scale(1.03);
    color: #fff;
}

/* Pagination */
.page-admin-dashboard .pagination, .page-admin-mission-detail .pagination,
/* Pagination */
.page-admin-trucks .pagination, .page-admin-trucks .pagination,
/* Pagination */
.page-admin-truck-detail .pagination, .page-admin-truck-detail .pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 24px 0;
}

.page-admin-dashboard .pagination a, .page-admin-mission-detail .pagination a, .page-admin-dashboard .pagination span, .page-admin-mission-detail .pagination span,
.page-admin-trucks .pagination a, .page-admin-trucks .pagination a, .page-admin-trucks .pagination span, .page-admin-trucks .pagination span,
.page-admin-truck-detail .pagination a, .page-admin-truck-detail .pagination a, .page-admin-truck-detail .pagination span, .page-admin-truck-detail .pagination span{
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1.5px solid var(--primary);
    background: var(--surface);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border 0.2s;
}

.page-admin-dashboard .pagination a:hover, .page-admin-mission-detail .pagination a:hover, .page-admin-dashboard .pagination a.active, .page-admin-mission-detail .pagination a.active, .page-admin-dashboard .pagination span.current, .page-admin-mission-detail .pagination span.current,
.page-admin-trucks .pagination a:hover, .page-admin-trucks .pagination a:hover, .page-admin-trucks .pagination a.active, .page-admin-trucks .pagination a.active, .page-admin-trucks .pagination span.current, .page-admin-trucks .pagination span.current,
.page-admin-truck-detail .pagination a:hover, .page-admin-truck-detail .pagination a:hover, .page-admin-truck-detail .pagination a.active, .page-admin-truck-detail .pagination a.active, .page-admin-truck-detail .pagination span.current, .page-admin-truck-detail .pagination span.current{
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Lien "Voir fiche" dans la liste des camions */
.page-admin-dashboard a.voir-fiche, .page-admin-mission-detail a.voir-fiche,
/* Lien "Voir fiche" dans la liste des camions */
.page-admin-trucks a.voir-fiche, .page-admin-trucks a.voir-fiche,
/* Lien "Voir fiche" dans la liste des camions */
.page-admin-truck-detail a.voir-fiche, .page-admin-truck-detail a.voir-fiche{
    color: var(--primary-light);
    font-weight: 500;
    text-decoration: underline;
    transition: color 0.2s, text-decoration 0.2s;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 5px;
}

.page-admin-dashboard a.voir-fiche:hover, .page-admin-mission-detail a.voir-fiche:hover,
.page-admin-trucks a.voir-fiche:hover, .page-admin-trucks a.voir-fiche:hover,
.page-admin-truck-detail a.voir-fiche:hover, .page-admin-truck-detail a.voir-fiche:hover{
    color: var(--primary);
    background: #f0f4fa;
    text-decoration: none;
}

/* Bouton générique stylé */
.page-admin-dashboard .btn, .page-admin-mission-detail .btn, .page-admin-dashboard .button, .page-admin-mission-detail .button, .page-admin-dashboard a.btn, .page-admin-mission-detail a.btn, .page-admin-dashboard input[type="button"].btn, .page-admin-mission-detail input[type="button"].btn, .page-admin-dashboard input[type="submit"].btn, .page-admin-mission-detail input[type="submit"].btn,
/* Bouton générique stylé */
.page-admin-trucks .btn, .page-admin-trucks .btn, .page-admin-trucks .button, .page-admin-trucks .button, .page-admin-trucks a.btn, .page-admin-trucks a.btn, .page-admin-trucks input[type="button"].btn, .page-admin-trucks input[type="button"].btn, .page-admin-trucks input[type="submit"].btn, .page-admin-trucks input[type="submit"].btn,
/* Bouton générique stylé */
.page-admin-truck-detail .btn, .page-admin-truck-detail .btn, .page-admin-truck-detail .button, .page-admin-truck-detail .button, .page-admin-truck-detail a.btn, .page-admin-truck-detail a.btn, .page-admin-truck-detail input[type="button"].btn, .page-admin-truck-detail input[type="button"].btn, .page-admin-truck-detail input[type="submit"].btn, .page-admin-truck-detail input[type="submit"].btn{
    background: var(--primary-light);
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 10px 26px;
    font-size: 1rem;
    font-weight: 600;
    margin: 8px 4px 8px 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(44,62,80,0.08);
    display: inline-block;
}

.page-admin-dashboard .btn:hover, .page-admin-mission-detail .btn:hover, .page-admin-dashboard .button:hover, .page-admin-mission-detail .button:hover, .page-admin-dashboard a.btn:hover, .page-admin-mission-detail a.btn:hover, .page-admin-dashboard input[type="button"].btn:hover, .page-admin-mission-detail input[type="button"].btn:hover, .page-admin-dashboard input[type="submit"].btn:hover, .page-admin-mission-detail input[type="submit"].btn:hover,
.page-admin-trucks .btn:hover, .page-admin-trucks .btn:hover, .page-admin-trucks .button:hover, .page-admin-trucks .button:hover, .page-admin-trucks a.btn:hover, .page-admin-trucks a.btn:hover, .page-admin-trucks input[type="button"].btn:hover, .page-admin-trucks input[type="button"].btn:hover, .page-admin-trucks input[type="submit"].btn:hover, .page-admin-trucks input[type="submit"].btn:hover,
.page-admin-truck-detail .btn:hover, .page-admin-truck-detail .btn:hover, .page-admin-truck-detail .button:hover, .page-admin-truck-detail .button:hover, .page-admin-truck-detail a.btn:hover, .page-admin-truck-detail a.btn:hover, .page-admin-truck-detail input[type="button"].btn:hover, .page-admin-truck-detail input[type="button"].btn:hover, .page-admin-truck-detail input[type="submit"].btn:hover, .page-admin-truck-detail input[type="submit"].btn:hover{
    background: var(--primary);
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(44,62,80,0.12);
    text-decoration: none;
}

/* Boutons icône pour actions (supprimer chauffeur) */
.page-admin-dashboard .icon-btn, .page-admin-mission-detail .icon-btn,
/* Boutons icône pour actions (supprimer chauffeur) */
.page-admin-trucks .icon-btn, .page-admin-trucks .icon-btn,
/* Boutons icône pour actions (supprimer chauffeur) */
.page-admin-truck-detail .icon-btn, .page-admin-truck-detail .icon-btn{
    background: none;
    border: none;
    padding: 0;
    margin: 0 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    border-radius: 5px;
    outline: none;
}

.page-admin-dashboard .icon-btn:focus, .page-admin-mission-detail .icon-btn:focus,
.page-admin-trucks .icon-btn:focus, .page-admin-trucks .icon-btn:focus,
.page-admin-truck-detail .icon-btn:focus, .page-admin-truck-detail .icon-btn:focus{
    box-shadow: 0 0 0 2px var(--primary-light, #3949ab);
}

.page-admin-dashboard .icon-btn.delete-btn:hover, .page-admin-mission-detail .icon-btn.delete-btn:hover, .page-admin-dashboard .icon-btn.delete-btn:focus, .page-admin-mission-detail .icon-btn.delete-btn:focus,
.page-admin-trucks .icon-btn.delete-btn:hover, .page-admin-trucks .icon-btn.delete-btn:hover, .page-admin-trucks .icon-btn.delete-btn:focus, .page-admin-trucks .icon-btn.delete-btn:focus,
.page-admin-truck-detail .icon-btn.delete-btn:hover, .page-admin-truck-detail .icon-btn.delete-btn:hover, .page-admin-truck-detail .icon-btn.delete-btn:focus, .page-admin-truck-detail .icon-btn.delete-btn:focus{
    background: #ffeaea;
}

/* Bouton voir/cacher mot de passe */
.page-admin-dashboard .icon-btn.view-btn, .page-admin-mission-detail .icon-btn.view-btn,
/* Bouton voir/cacher mot de passe */
.page-admin-trucks .icon-btn.view-btn, .page-admin-trucks .icon-btn.view-btn,
/* Bouton voir/cacher mot de passe */
.page-admin-truck-detail .icon-btn.view-btn, .page-admin-truck-detail .icon-btn.view-btn{
    background: none;
    border: none;
    padding: 0 2px;
    margin: 0 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    outline: none;
    transition: background 0.15s;
}

.page-admin-dashboard .icon-btn.view-btn:hover, .page-admin-mission-detail .icon-btn.view-btn:hover, .page-admin-dashboard .icon-btn.view-btn:focus, .page-admin-mission-detail .icon-btn.view-btn:focus,
.page-admin-trucks .icon-btn.view-btn:hover, .page-admin-trucks .icon-btn.view-btn:hover, .page-admin-trucks .icon-btn.view-btn:focus, .page-admin-trucks .icon-btn.view-btn:focus,
.page-admin-truck-detail .icon-btn.view-btn:hover, .page-admin-truck-detail .icon-btn.view-btn:hover, .page-admin-truck-detail .icon-btn.view-btn:focus, .page-admin-truck-detail .icon-btn.view-btn:focus{
    background: #f3f6fa;
}

.page-admin-dashboard .icon-svg-view, .page-admin-mission-detail .icon-svg-view,
.page-admin-trucks .icon-svg-view, .page-admin-trucks .icon-svg-view,
.page-admin-truck-detail .icon-svg-view, .page-admin-truck-detail .icon-svg-view{
    width: 22px;
    height: 22px;
    vertical-align: middle;
    display: inline-block;
    filter: invert(18%) sepia(8%) saturate(2097%) hue-rotate(170deg) brightness(97%) contrast(90%);
    /* #2c3e50 */
}

.page-admin-dashboard .icon-svg, .page-admin-mission-detail .icon-svg,
.page-admin-trucks .icon-svg, .page-admin-trucks .icon-svg,
.page-admin-truck-detail .icon-svg, .page-admin-truck-detail .icon-svg{
    width: 24px;
    height: 24px;
    vertical-align: middle;
    display: inline-block;
}

.page-admin-dashboard .icon-svg-red, .page-admin-mission-detail .icon-svg-red,
.page-admin-trucks .icon-svg-red, .page-admin-trucks .icon-svg-red,
.page-admin-truck-detail .icon-svg-red, .page-admin-truck-detail .icon-svg-red{
    filter: invert(21%) sepia(98%) saturate(7491%) hue-rotate(357deg) brightness(90%) contrast(120%);
}

/* Responsive */
@media (max-width: 1200px) {
    .page-admin-dashboard .admin-container, .page-admin-mission-detail .admin-container,
.page-admin-trucks .admin-container, .page-admin-trucks .admin-container,
.page-admin-truck-detail .admin-container, .page-admin-truck-detail .admin-container{
        max-width: 99vw;
        min-width: 0;
        width: 100vw;
    }
    .page-admin-dashboard .box, .page-admin-mission-detail .box, .page-admin-dashboard .form-section, .page-admin-mission-detail .form-section, .page-admin-dashboard .table-section, .page-admin-mission-detail .table-section,
.page-admin-trucks .box, .page-admin-trucks .box, .page-admin-trucks .form-section, .page-admin-trucks .form-section, .page-admin-trucks .table-section, .page-admin-trucks .table-section,
.page-admin-truck-detail .box, .page-admin-truck-detail .box, .page-admin-truck-detail .form-section, .page-admin-truck-detail .form-section, .page-admin-truck-detail .table-section, .page-admin-truck-detail .table-section{
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .page-admin-dashboard .admin-container, .page-admin-mission-detail .admin-container, .page-admin-dashboard .box, .page-admin-mission-detail .box, .page-admin-dashboard .table-section, .page-admin-mission-detail .table-section, .page-admin-dashboard .form-section, .page-admin-mission-detail .form-section,
.page-admin-trucks .admin-container, .page-admin-trucks .admin-container, .page-admin-trucks .box, .page-admin-trucks .box, .page-admin-trucks .table-section, .page-admin-trucks .table-section, .page-admin-trucks .form-section, .page-admin-trucks .form-section,
.page-admin-truck-detail .admin-container, .page-admin-truck-detail .admin-container, .page-admin-truck-detail .box, .page-admin-truck-detail .box, .page-admin-truck-detail .table-section, .page-admin-truck-detail .table-section, .page-admin-truck-detail .form-section, .page-admin-truck-detail .form-section{
        padding: 12px 2vw;
        min-width: 0;
        max-width: 99vw;
        width: 100vw;
    }
    .page-admin-dashboard .admin-container, .page-admin-mission-detail .admin-container,
.page-admin-trucks .admin-container, .page-admin-trucks .admin-container,
.page-admin-truck-detail .admin-container, .page-admin-truck-detail .admin-container{
        gap: 18px;
    }
    .page-admin-dashboard .box, .page-admin-mission-detail .box,
.page-admin-trucks .box, .page-admin-trucks .box,
.page-admin-truck-detail .box, .page-admin-truck-detail .box{
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    .page-admin-dashboard .admin-container, .page-admin-mission-detail .admin-container, .page-admin-dashboard .box, .page-admin-mission-detail .box, .page-admin-dashboard .table-section, .page-admin-mission-detail .table-section, .page-admin-dashboard .form-section, .page-admin-mission-detail .form-section,
.page-admin-trucks .admin-container, .page-admin-trucks .admin-container, .page-admin-trucks .box, .page-admin-trucks .box, .page-admin-trucks .table-section, .page-admin-trucks .table-section, .page-admin-trucks .form-section, .page-admin-trucks .form-section,
.page-admin-truck-detail .admin-container, .page-admin-truck-detail .admin-container, .page-admin-truck-detail .box, .page-admin-truck-detail .box, .page-admin-truck-detail .table-section, .page-admin-truck-detail .table-section, .page-admin-truck-detail .form-section, .page-admin-truck-detail .form-section{
        padding: 8px 1vw;
        min-width: 0;
        max-width: 100vw;
        width: 100vw;
    }
    .page-admin-dashboard .box, .page-admin-mission-detail .box,
.page-admin-trucks .box, .page-admin-trucks .box,
.page-admin-truck-detail .box, .page-admin-truck-detail .box{
        margin-left: 0;
        margin-right: 0;
    }
}

body.page-admin-dashboard::-webkit-scrollbar, .page-admin-dashboard ::-webkit-scrollbar, body.page-admin-mission-detail::-webkit-scrollbar, .page-admin-mission-detail ::-webkit-scrollbar,
body.page-admin-trucks::-webkit-scrollbar, .page-admin-trucks ::-webkit-scrollbar, body.page-admin-trucks::-webkit-scrollbar, .page-admin-trucks ::-webkit-scrollbar,
body.page-admin-truck-detail::-webkit-scrollbar, .page-admin-truck-detail ::-webkit-scrollbar, body.page-admin-truck-detail::-webkit-scrollbar, .page-admin-truck-detail ::-webkit-scrollbar{
    width: 8px;
    background: var(--border);
}
body.page-admin-dashboard::-webkit-scrollbar-thumb, .page-admin-dashboard ::-webkit-scrollbar-thumb, body.page-admin-mission-detail::-webkit-scrollbar-thumb, .page-admin-mission-detail ::-webkit-scrollbar-thumb,
body.page-admin-trucks::-webkit-scrollbar-thumb, .page-admin-trucks ::-webkit-scrollbar-thumb, body.page-admin-trucks::-webkit-scrollbar-thumb, .page-admin-trucks ::-webkit-scrollbar-thumb,
body.page-admin-truck-detail::-webkit-scrollbar-thumb, .page-admin-truck-detail ::-webkit-scrollbar-thumb, body.page-admin-truck-detail::-webkit-scrollbar-thumb, .page-admin-truck-detail ::-webkit-scrollbar-thumb{
    background: #b0bec5;
    border-radius: 8px;
}


/* ============================================================================
   2. style/styleadminmanage.css → .page-admin-missions (via @import of styleadminmission.css)
   ============================================================================ */
.page-admin-missions {
    --primary: #2c3e50;
    --primary-light: #3949ab;
    --accent: #e62222;
    --background: #f7f9fb;
    --surface: #fff;
    --border: #e3eaf3;
    --shadow: 0 2px 12px rgba(44,62,80,0.08);
    --radius: 14px;
    --spacing: 24px;
    --font-main: 'Segoe UI', Arial, sans-serif;
}

body.page-admin-missions, body.page-admin-missions * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html:has(body.page-admin-missions), body.page-admin-missions {
    font-family: var(--font-main);
    background: var(--background);
    color: var(--primary);
    min-height: 100vh;
    width: 100vw;
}
body.page-admin-missions {
    display: block;
    min-height: 100vh;
    width: 100vw;
}
.page-admin-missions .main-content, .page-admin-missions .manage-container {
    display: flex;
    flex-direction: column;
}

/* Correction : le body ne doit pas affecter la navbar en flex */
body.page-admin-missions.with-topnav {
    display: block !important;
}

/* Ajoutez ou ajustez la marge à gauche pour décaler le contenu à côté de la sidebar */
.page-admin-missions .manage-container {
    width: 100%;
    max-width: 1200px;
    margin: 0;
    padding: 24px 10px 40px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--background);
    min-height: 100vh;
    margin-left: 0; /* <-- Collé à gauche, plus de décalage sidebar */
}

.page-admin-missions h1 {
    color: var(--primary);
    font-size: 2rem;
    margin-bottom: 12px;
    text-align: center; /* Centrer le titre */
    font-weight: 600;
    letter-spacing: 1px;
    width: 100%; /* Prend toute la largeur du container */
    align-self: center; /* Centre dans le flex parent */
}

.page-admin-missions .section-title, .page-admin-missions .form-title {
    font-size: 1.25rem;
    color: var(--primary-light);
    font-weight: 500;
    margin-bottom: 18px;
    margin-top: 0;
    border-bottom: 2px solid var(--border);
    padding-bottom: 8px;
    background: #f7fafd;
    border-radius: 10px 10px 0 0;
    text-align: left;
}

.page-admin-missions .container {
    margin: 12px 0;          /* haut et bas seulement */
    padding: 28px 18px;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--border);
    width: 100vw;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: none;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}

.page-admin-missions .flex {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    align-items: flex-start;
    /* Empêche le chevauchement, permet le retour à la ligne si pas assez de place */
    flex-wrap: wrap;
    width: 100%;
}

.page-admin-missions .box {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    flex: 1 1 0;
    min-width: 320px;
    /* Largeur dynamique pour occuper l'espace disponible */
    max-width: none;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
    /* Ajout d'un petit espace interne pour ne pas coller les bords */
    margin-left: 8px;
    margin-right: 8px;
}

.page-admin-missions .form-section {
    max-width: 500px;
    width: 100%;
    margin: 0 auto var(--spacing);
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    min-width: 0;
}

.page-admin-missions label {
    display: block;
    margin-bottom: 6px;
    color: var(--primary);
    font-weight: normal;
    font-size: 1rem;
}

.page-admin-missions input, .page-admin-missions select, .page-admin-missions textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #f5f7fa;
    font-size: 1rem;
    margin-bottom: 10px;
    transition: border 0.2s;
    text-align: center;
    box-sizing: border-box;
}

.page-admin-missions input:focus, .page-admin-missions select:focus, .page-admin-missions textarea:focus {
    border: 1.5px solid var(--primary-light);
    outline: none;
    background: #fff;
}

.page-admin-missions .actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.page-admin-missions button, .page-admin-missions .actions button {
    background: var(--primary-light);
    color: var(--surface);
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.page-admin-missions button:hover, .page-admin-missions .actions button:hover {
    background: var(--surface);
    color: var(--primary-light);
    transform: translateY(-2px) scale(1.03);
}

.page-admin-missions button.danger {
    background: #bd3728e5;
}
.page-admin-missions button.danger:hover {
    background: var(--surface);
    color: #bd1a08;
}

.page-admin-missions .table-section {
    overflow-x: auto;
    margin-bottom: var(--spacing);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 0;
    min-width: 0;
}

.page-admin-missions table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}

.page-admin-missions th, .page-admin-missions td {
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    white-space: nowrap;
}

.page-admin-missions th {
    background: var(--primary);
    color: var(--surface);
    font-weight: 500;
    text-align: left;
}

.page-admin-missions tr:nth-child(even) {
    background: #f7fafd;
}

.page-admin-missions tr:last-child td {
    border-bottom: none;
}

.page-admin-missions input[type="text"], .page-admin-missions input[type="email"], .page-admin-missions input[type="number"], .page-admin-missions textarea, .page-admin-missions select {
    font-size: 1rem;
}

/* Liens des missions dans la table d'historique des envois */
.page-admin-missions .table-section a.mission-link {
    color: var(--primary-light);
    font-weight: 500;
    text-decoration: underline;
    transition: color 0.2s, text-decoration 0.2s;
    cursor: pointer;
    text-decoration: none;
}

.page-admin-missions .table-section a.mission-link:hover {
    color: var(--primary);
    text-decoration: none;
}

/* Pagination */
.page-admin-missions .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 24px 0;
}

.page-admin-missions .pagination a, .page-admin-missions .pagination span {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1.5px solid var(--primary);
    background: var(--surface);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border 0.2s;
}

.page-admin-missions .pagination a:hover, .page-admin-missions .pagination a.active, .page-admin-missions .pagination span.current {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Boutons icône pour actions (modifier/supprimer) */
.page-admin-missions .icon-btn {
    background: white;
    border: none;
    padding: 0;
    margin: 0 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    border-radius: 5px;
    outline: none;
}

.page-admin-missions .icon-btn:focus {
    box-shadow: 0 0 0 2px var(--primary-light, #3949ab);
}

.page-admin-missions .icon-btn.edit-btn:hover, .page-admin-missions .icon-btn.edit-btn:focus {
    background: #eaf1fb;
}

.page-admin-missions .icon-btn.delete-btn:hover, .page-admin-missions .icon-btn.delete-btn:focus {
    background: #ffeaea;
}

.page-admin-missions .icon-svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    display: inline-block;
}

.page-admin-missions .icon-svg-red {
    filter: invert(21%) sepia(98%) saturate(7491%) hue-rotate(357deg) brightness(90%) contrast(120%);
}

@media (max-width: 1200px) {
    .page-admin-missions .manage-container {
        max-width: 100vw;
        padding-right: 0;
    }
    .page-admin-missions .container {
        max-width: 99vw;
        min-width: 0;
        width: 100vw;
    }
    .page-admin-missions .box, .page-admin-missions .form-section, .page-admin-missions .table-section {
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .page-admin-missions .flex { flex-direction: column; gap: 18px; }
    .page-admin-missions .container, .page-admin-missions .box, .page-admin-missions .table-section, .page-admin-missions .form-section {
        padding: 12px 2vw;
        min-width: 0;
        max-width: 99vw;
        width: 100vw;
    }
    .page-admin-missions .manage-container {
        padding: 0 0 40px 0;
        margin-left: 0;
    }
    .page-admin-missions .box {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    .page-admin-missions .container, .page-admin-missions .box, .page-admin-missions .table-section, .page-admin-missions .form-section {
        padding: 8px 1vw;
        min-width: 0;
        max-width: 100vw;
        width: 100vw;
    }
    .page-admin-missions .box {
        margin-left: 0;
        margin-right: 0;
    }
}

body.page-admin-missions::-webkit-scrollbar, .page-admin-missions ::-webkit-scrollbar {
    width: 8px;
    background: #e3eaf3;
}
body.page-admin-missions::-webkit-scrollbar-thumb, .page-admin-missions ::-webkit-scrollbar-thumb {
    background: #b0bec5;
    border-radius: 8px;
}

/* ============================================================================
   3. style/styleadminmission.css → .page-admin-missions
   ============================================================================ */
/* Variables de la charte graphique */
.page-admin-missions {
    --primary: #2c3e50;
    --primary-light: #3949ab;
    --accent: #e67e22;
    --background: #f7f9fb;
    --surface: #fff;
    --border: #e3eaf3;
    --shadow: 0 2px 12px rgba(44,62,80,0.08);
    --radius: 14px;
    --spacing: 24px;
    --font-main: 'Segoe UI', Arial, sans-serif;
}

/* Réinitialisation et styles de base */
body.page-admin-missions, body.page-admin-missions * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html:has(body.page-admin-missions), body.page-admin-missions {
    font-family: var(--font-main);
    background: var(--background);
    color: var(--primary);
    min-height: 100vh;
    width: 100vw;
}

body.page-admin-missions {
    display: block;
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

/* Conteneur principal de l'administration */
.page-admin-missions .admin-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 10px 40px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--background);
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: auto;
}

/* Titres des sections */
.page-admin-missions h1 {
    color: var(--primary);
    font-size: 2rem;
    margin-bottom: 28px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
    width: 100%;
}

.page-admin-missions .section-title {
    font-size: 1.25rem;
    color: var(--primary-light);
    font-weight: 500;
    margin-bottom: 18px;
    margin-top: 0;
    border-bottom: 2px solid var(--border);
    padding-bottom: 8px;
    background: #f7fafd;
    border-radius: 10px 10px 0 0;
    text-align: left;
}

/* Conteneur des tableaux et des formulaires */
.page-admin-missions .container {
    margin: 24px 0;
    padding: 28px 18px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    overflow-x: auto;
}

/* Tableaux stylisés */
.page-admin-missions .styled-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.page-admin-missions .styled-table th, .page-admin-missions .styled-table td {
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    white-space: nowrap;
}

.page-admin-missions .styled-table th {
    background: var(--primary);
    color: var(--surface);
    font-weight: 500;
}

.page-admin-missions .styled-table tr:nth-child(even) {
    background: #f7fafd;
}

.page-admin-missions .styled-table tr:last-child td {
    border-bottom: none;
}

/* Formulaires de filtre */
.page-admin-missions .filter-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
}

.page-admin-missions .filter-form input, .page-admin-missions .filter-form select {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--border);
    font-size: 1rem;
    background: #f5f7fa;
    color: var(--primary);
}

.page-admin-missions .filter-form button {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.page-admin-missions .filter-form button:hover {
    background: var(--primary-light);
    transform: translateY(-2px) scale(1.03);
}

/* Pagination */
.page-admin-missions .pagination {
    margin: 18px 0;
    text-align: center;
}

.page-admin-missions .pagination a, .page-admin-missions .pagination span {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 2px;
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    color: var(--primary);
    background: #f7fafd;
    transition: background 0.2s, color 0.2s;
}

.page-admin-missions .pagination .active {
    background: var(--primary-light);
    color: #fff;
    border-color: var(--primary);
}

.page-admin-missions .pagination .disabled {
    color: #aaa;
    border-color: #eee;
}

/* Statistiques et graphique */
.page-admin-missions .stats-section {
    margin: 48px auto 0 auto;
    padding: 36px 24px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 1100px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.page-admin-missions .stats-summary {
    display: flex;
    flex-direction: row;
    gap: 36px;
    margin-top: 24px;
    margin-bottom: 0;
    justify-content: center;
    align-items: center;
}

.page-admin-missions .stat-card {
    background: #f7fafd;
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(34,48,74,0.07);
    padding: 28px 20px;
    min-width: 220px;
    margin: 0;
    text-align: center;
    border: 1px solid var(--border);
}

.page-admin-missions .stat-card h3 {
    color: var(--primary-light);
    margin-bottom: 12px;
    font-size: 1.1em;
}

.page-admin-missions .stat-card.warning h3 {
    color: #e67e22;
}

.page-admin-missions .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin: calc(var(--spacing)/2) 0;
}

.page-admin-missions .stats-label {
    color: var(--primary);
    font-weight: 500;
}

@media (max-width: 1200px) {
    .page-admin-missions .admin-container {
        max-width: 100vw;
        padding: 0 0 40px 0;
    }
    .page-admin-missions .container {
        max-width: 99vw;
        min-width: 0;
        padding: 12px 2vw;
    }
    .page-admin-missions .styled-table {
        min-width: 700px;
    }
}

@media (max-width: 900px) {
    .page-admin-missions .container, .page-admin-missions .styled-table, .page-admin-missions .filter-form, .page-admin-missions .stats-section {
        padding: 12px 2vw;
        min-width: 0;
        max-width: 99vw;
    }
    .page-admin-missions .admin-container {
        padding: 0 0 40px 0;
    }
    .page-admin-missions .stats-summary {
        flex-direction: column;
        gap: 18px;
    }
    .page-admin-missions .styled-table {
        min-width: 600px;
    }
}

@media (max-width: 600px) {
    .page-admin-missions .container, .page-admin-missions .styled-table, .page-admin-missions .filter-form, .page-admin-missions .stats-section {
        padding: 8px 1vw;
        min-width: 0;
        max-width: 100vw;
    }
    .page-admin-missions h1 {
        font-size: 1.2rem;
        padding-bottom: 8px;
    }
    .page-admin-missions .section-title {
        font-size: 1rem;
        padding-bottom: 4px;
    }
    .page-admin-missions .styled-table th, .page-admin-missions .styled-table td {
        padding: 8px 4px;
        font-size: 0.95rem;
    }
    .page-admin-missions .stat-card {
        min-width: 0;
        width: 100%;
        padding: 10px 2px;
    }
    .page-admin-missions .styled-table {
        min-width: 400px;
    }
}

body.page-admin-missions::-webkit-scrollbar, .page-admin-missions ::-webkit-scrollbar {
    width: 8px;
    background: #e3eaf3;
}
body.page-admin-missions::-webkit-scrollbar-thumb, .page-admin-missions ::-webkit-scrollbar-thumb {
    background: #b0bec5;
    border-radius: 8px;
}


/* ============================================================================
   4. style/sidebar.css → .admin-app (navbar + leftover sidebar)
   ============================================================================ */
/* Sidebar modernisée */
.admin-app {
  --primary:#005baa;
  --accent:#16a085;
  --bg:#0f1724;
  --muted:#9aa7bb;
  --white:#ffffff;
  --sidebar-width:260px;
}

body.admin-app {font-family:Inter, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#1f2937; margin:0;}

/* Sidebar */
.admin-app .sidebar {
  display:none !important;
  width:var(--sidebar-width);
  background:linear-gradient(180deg,var(--bg),#082034);
  color:var(--white);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:18px 12px;
  box-shadow: 2px 0 12px rgba(0,0,0,0.15);
  transition:width .22s ease;
}
.admin-app .sidebar.collapsed { width:72px; }
.admin-app .logo { text-align:center; margin-bottom:14px; }
.admin-app .logo img { max-width:140px; height:auto; display:block; margin:0 auto; }
.admin-app .toggle-btn { background:transparent;border:0;color:var(--white);cursor:pointer;padding:8px;border-radius:8px; }
.admin-app .sidebar-links { overflow:auto; padding-top:6px; }
/* Empêche résidus de largeur réservée */
body.admin-app {margin:0;}
.admin-app .sidebar-link-group { margin-bottom:14px; }
.admin-app .sidebar-section-title { font-size:12px;color:var(--muted);padding:6px 10px;text-transform:uppercase;letter-spacing:.08em; }
.admin-app .sidebar-link-group a { display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;color:var(--white);text-decoration:none;margin:4px 2px; transition:background .15s;}
.admin-app .sidebar-link-group a:hover { background:rgba(255,255,255,0.04); transform:translateY(-1px); }
.admin-app .sidebar-icon { width:26px; text-align:center; color:#dbeafe; }
.admin-app .sidebar-badge { margin-left:auto;background:var(--accent);color:#fff;padding:2px 8px;border-radius:999px;font-size:12px; }

/* déconnexion */
.admin-app .sidebar a.logout { margin-top:auto; color:#ffd1d1; }

/* collapsed */
.admin-app .sidebar.collapsed .sidebar-section-title, .admin-app .sidebar.collapsed .sidebar .sidebar-badge, .admin-app .sidebar.collapsed .sidebar a span:not(.sidebar-icon) { display:none; }
.admin-app .sidebar.collapsed .logo img { max-width:40px; }

/* responsive */
@media (max-width:900px) {
  .admin-app .sidebar { position:fixed; z-index:9999; left:0; top:0; height:100vh; transform:translateX(-110%); transition:transform .25s ease; }
  .admin-app .sidebar.open { transform:translateX(0); }
    .admin-app .sidebar.collapsed { width:160px; }

}
.admin-app .sidebar-link-group {
    margin-bottom: 18px;
    position: relative;
}
/* Séparateur visuel entre groupes de liens */
.admin-app .sidebar-link-group:not(:last-child)::after {
    content: "";
    display: block;
    height: 1px;
    background: #e3e5e7;
    margin: 14px 0 0 0;
    width: 80%;
    margin-left: 10%;
}
.admin-app .sidebar a {
    color: #222;
    text-decoration: none;
    padding: 10px 22px 10px 12px; /* réduit le padding à gauche */
    width: 100%;
    font-size: 1.05em;
    border-left: 3px solid transparent;
    border-radius: 8px;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    display: flex;
    align-items: center;
    gap: 0; /* aucun espace entre icône et texte */
    font-weight: 500;
    position: relative;
    margin-bottom: 8px; /* espace vertical entre les liens */
}
.admin-app .sidebar a:last-child {
    margin-bottom: 0;
}
.admin-app .sidebar a .sidebar-icon {
    font-size: 1.25em;
    color: #222;
    min-width: 0; /* retire la largeur minimale */
    margin-right: 6px; /* petit espace manuel si besoin */
    text-align: center;
}
.admin-app .sidebar a .sidebar-badge {
    background: #e7f8e8;
    color: #2ecc40;
    font-size: 0.72em;
    font-weight: 700;
    border-radius: 6px;
    padding: 2px 7px;
    margin-left: 8px;
    letter-spacing: 0.5px;
}
.admin-app .sidebar a:hover, .admin-app .sidebar a.active {
    background: #f3f7fa;
    border-left: 3px solid #2c3e50;
    color: #2c3e50;
}
.admin-app .sidebar.collapsed a span, .admin-app .sidebar.collapsed .sidebar-section-title {
    display: none;
}
.admin-app .sidebar.collapsed {
    align-items: center;
}
.admin-app .sidebar.collapsed .logo {
    margin: 18px 0 8px 0;
    padding-left: 0;
}
.admin-app .sidebar-link-group:last-child {
    margin-bottom: 0;
}

/* Décale le contenu principal pour ne pas être sous la sidebar */
.admin-app .main-content, .admin-app .container, .admin-app .admin-container {
    margin-left: 0px; /* 220px sidebar + 12px left + 4px espace */
    transition: margin-left 0.3s;
}

/* Si sidebar est réduite */
.admin-app .sidebar.collapsed ~ .main-content, .admin-app .sidebar.collapsed ~ .container, .admin-app .sidebar.collapsed ~ .admin-container {
    margin-left: 20px; /* 68px sidebar + 12px left */
}

/* Responsive */
@media (max-width: 600px) {
    .admin-app .sidebar { width: 68px; left: 4px; top: 4px; height: calc(100vh - 8px);}
    .admin-app .sidebar:not(.collapsed) { width: 160px; }
    .admin-app .main-content, .admin-app .container, .admin-app .admin-container { margin-left: 72px; }
    .admin-app .sidebar:not(.collapsed) ~ .main-content, .admin-app .sidebar:not(.collapsed) ~ .container, .admin-app .sidebar:not(.collapsed) ~ .admin-container { margin-left: 164px; }
}
@media (max-width: 900px) {
    .admin-app .container {
        max-width: 98vw;
        padding: 8px 1vw;
    }
}

/* Barre de recherche toujours sur une ligne */
.admin-app .sidebar .nav-search {
  max-width: 220px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-app .sidebar .nav-search input {
  min-width: 0;
  width: 50px;
  max-width: 150px;
  white-space: nowrap;
}
/* Empêche la sidebar de s'élargir */
.admin-app .sidebar {
  min-width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  width: var(--sidebar-width);
}

/* Navbar admin dédupliquée : voir section « Admin navigation ». */

/* ============================================================================
   5. style/styleadmin-responsive.css → .page-admin-dashboard
   ============================================================================ */
/* Styles responsive pour admin.php */
.page-admin-dashboard {
    --primary: #2c3e50;
    --primary-light: #3498db;
    --accent: #e74c3c;
    --success: #27ae60;
    --warning: #f39c12;
    --background: #f7f9fb;
    --surface: #ffffff;
    --border: #e3eaf3;
    --shadow: 0 2px 12px rgba(44,62,80,0.08);
    --radius: 14px;
    --spacing: 24px;
    --text-muted: #6c757d;
    --font-main: Inter, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Layout responsive amélioré */
@media (max-width: 1200px) {
    .page-admin-dashboard .admin-layout {
        max-width: 100%;
        margin: 0;
    }

    .page-admin-dashboard .admin-header {
        margin: 0 10px;
        border-radius: 0;
    }

    .page-admin-dashboard .admin-main {
        padding: 15px;
        max-width: 100%;
    }

    .page-admin-dashboard .admin-section {
        padding: 18px;
    }

    .page-admin-dashboard .form-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .page-admin-dashboard .admin-layout {
        margin: 0;
    }

    .page-admin-dashboard .admin-header {
        padding: 15px;
        margin: 0 5px;
        border-radius: 0;
    }

    .page-admin-dashboard .admin-header h1 {
        font-size: 1.5rem;
    }

    .page-admin-dashboard .admin-main {
        padding: 10px;
    }

    .page-admin-dashboard .admin-section {
        padding: 15px;
        margin-bottom: 15px;
    }

    .page-admin-dashboard .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .page-admin-dashboard .section-title {
        font-size: 1.1rem;
    }

    .page-admin-dashboard .form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .page-admin-dashboard .actions-bar {
        flex-direction: column;
        gap: 8px;
    }

    .page-admin-dashboard .btn {
        justify-content: center;
        width: 100%;
    }

    /* Tableau responsive */
    .page-admin-dashboard .table-responsive {
        font-size: 12px;
        border: none;
    }

    .page-admin-dashboard .table {
        min-width: 600px;
    }

    .page-admin-dashboard .table th, .page-admin-dashboard .table td {
        padding: 8px 4px;
        white-space: nowrap;
    }

    .page-admin-dashboard .table-actions {
        flex-direction: column;
        gap: 4px;
        min-width: 120px;
    }

    .page-admin-dashboard .action-btn {
        font-size: 11px;
        padding: 4px 6px;
    }

    /* Pagination responsive */
    .page-admin-dashboard .pagination {
        flex-wrap: wrap;
        gap: 4px;
    }

    .page-admin-dashboard .pagination a, .page-admin-dashboard .pagination span {
        padding: 6px 8px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .page-admin-dashboard .admin-layout {
        margin: 0;
    }

    .page-admin-dashboard .admin-header {
        padding: 12px;
        margin: 0;
        border-radius: 0;
    }

    .page-admin-dashboard .admin-header h1 {
        font-size: 1.3rem;
    }

    .page-admin-dashboard .admin-main {
        padding: 8px;
    }

    .page-admin-dashboard .admin-section {
        padding: 12px;
        margin-bottom: 12px;
    }

    .page-admin-dashboard .section-title {
        font-size: 1rem;
    }

    .page-admin-dashboard .form-grid {
        gap: 10px;
    }

    .page-admin-dashboard .form-group label {
        font-size: 13px;
    }

    .page-admin-dashboard .form-group input, .page-admin-dashboard .form-group select {
        padding: 8px 10px;
        font-size: 13px;
    }

    .page-admin-dashboard .btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* Tableau mobile */
    .page-admin-dashboard .table-responsive {
        font-size: 11px;
    }

    .page-admin-dashboard .table th, .page-admin-dashboard .table td {
        padding: 6px 2px;
    }

    .page-admin-dashboard .table-actions {
        min-width: 100px;
    }

    .page-admin-dashboard .action-btn {
        font-size: 10px;
        padding: 3px 5px;
    }

    /* Messages d'alerte */
    .page-admin-dashboard .alert {
        padding: 10px 12px;
        font-size: 13px;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Formulaires inline */
    .page-admin-dashboard .inline-form {
        padding: 8px;
    }

    .page-admin-dashboard .inline-form .form-row {
        gap: 6px;
    }

    .page-admin-dashboard .inline-form input {
        padding: 4px 6px;
        font-size: 11px;
    }
}

/* Améliorations pour très petits écrans */
@media (max-width: 320px) {
    .page-admin-dashboard .admin-header h1 {
        font-size: 1.2rem;
    }

    .page-admin-dashboard .section-title {
        font-size: 0.9rem;
    }

    .page-admin-dashboard .btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    .page-admin-dashboard .table-responsive {
        font-size: 10px;
    }

    .page-admin-dashboard .table th, .page-admin-dashboard .table td {
        padding: 4px 1px;
    }
}

/* Mode paysage sur mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .page-admin-dashboard .admin-main {
        padding: 8px;
    }

    .page-admin-dashboard .admin-section {
        padding: 12px;
        margin-bottom: 10px;
    }

    .page-admin-dashboard .form-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .page-admin-dashboard .actions-bar {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Améliorations d'accessibilité */
@media (prefers-reduced-motion: reduce) {
    body.page-admin-dashboard, body.page-admin-dashboard * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Mode sombre (si supporté) */
@media (prefers-color-scheme: dark) {
    .page-admin-dashboard {
        --background: #1a1a1a;
        --surface: #2d2d2d;
        --border: #404040;
        --primary: #3498db;
        --text-muted: #b0b0b0;
    }

    .page-admin-dashboard .table th {
        background: var(--primary);
    }

    .page-admin-dashboard .table tbody tr:hover {
        background: rgba(255,255,255,0.05);
    }
}

/* Styles pour les tableaux empilés sur mobile */
@media (max-width: 600px) {
    .page-admin-dashboard .table, .page-admin-dashboard .table thead, .page-admin-dashboard .table tbody, .page-admin-dashboard .table th, .page-admin-dashboard .table td, .page-admin-dashboard .table tr {
        display: block;
    }

    .page-admin-dashboard .table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .page-admin-dashboard .table tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 10px;
        padding: 10px;
        background: var(--surface);
    }

    .page-admin-dashboard .table td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .page-admin-dashboard .table td:before {
        content: attr(data-label) ": ";
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 600;
        color: var(--primary);
    }

    .page-admin-dashboard .table td:last-child {
        border-bottom: none;
    }

    .page-admin-dashboard .table td:last-child:before {
        content: "Actions: ";
    }
}

/* Améliorations pour l'impression */
@media print {
    .page-admin-dashboard .admin-header, .page-admin-dashboard .actions-bar, .page-admin-dashboard .pagination, .page-admin-dashboard .btn {
        display: none !important;
    }

    .page-admin-dashboard .admin-section {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }

    .page-admin-dashboard .table {
        font-size: 10px;
    }

    .page-admin-dashboard .table th, .page-admin-dashboard .table td {
        padding: 4px;
        border: 1px solid #000;
    }
}

/* ============================================================================
   6. admin.php <style> → .page-admin-dashboard
   ============================================================================ */

        /* Variables CSS pour la cohérence avec le projet */
        .page-admin-dashboard {
            --primary: #2c3e50;
            --primary-light: #3498db;
            --accent: #e74c3c;
            --success: #27ae60;
            --warning: #f39c12;
            --background: #f7f9fb;
            --surface: #ffffff;
            --border: #e3eaf3;
            --shadow: 0 2px 12px rgba(44,62,80,0.08);
            --radius: 14px;
            --spacing: 24px;
            --text-muted: #6c757d;
            --font-main: Inter, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        /* Reset et base */
        body.page-admin-dashboard, body.page-admin-dashboard * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body.page-admin-dashboard {
            font-family: var(--font-main);
            background: var(--background);
            color: var(--primary);
            line-height: 1.6;
        }

        /* Layout principal */
        .page-admin-dashboard .admin-layout {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            max-width: 1400px;
            margin: 0 auto;
            background: var(--background);
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }

        /* Header */
        .page-admin-dashboard .admin-header {
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            padding: var(--spacing);
            box-shadow: var(--shadow);
            border-radius: 0 0 var(--radius) var(--radius);
            margin: 0 var(--spacing);
        }

        .page-admin-dashboard .admin-header h1 {
            font-size: 1.75rem;
            color: var(--primary);
            margin: 0;
            text-align: center;
            font-weight: 600;
        }

        /* Contenu principal */
        .page-admin-dashboard .admin-main {
            flex: 1;
            padding: var(--spacing);
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        /* Sections */
        .page-admin-dashboard .admin-section {
            background: var(--surface);
            border-radius: var(--radius);
            padding: var(--spacing);
            margin-bottom: var(--spacing);
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            width: 100%;
        }

        .page-admin-dashboard .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--spacing);
            padding-bottom: 10px;
            border-bottom: 2px solid var(--border);
        }

        .page-admin-dashboard .section-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary);
            margin: 0;
        }


        /* Formulaires */
        .page-admin-dashboard .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--spacing);
            margin-bottom: var(--spacing);
            width: 100%;
        }

        .page-admin-dashboard .form-group {
            display: flex;
            flex-direction: column;
        }

        .page-admin-dashboard .form-group label {
            font-weight: 500;
            margin-bottom: 5px;
            color: var(--primary);
        }

        .page-admin-dashboard .form-group input, .page-admin-dashboard .form-group select {
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 14px;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        .page-admin-dashboard .form-group input:focus, .page-admin-dashboard .form-group select:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }

        /* Boutons */
        .page-admin-dashboard .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border: none;
            border-radius: var(--radius);
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s;
            white-space: nowrap;
        }

        .page-admin-dashboard .btn-primary {
            background: var(--primary-light);
            color: white;
        }

        .page-admin-dashboard .btn-primary:hover {
            background: #2980b9;
            transform: translateY(-1px);
        }

        .page-admin-dashboard .btn-success {
            background: var(--success);
            color: white;
        }

        .page-admin-dashboard .btn-success:hover {
            background: #229954;
            transform: translateY(-1px);
        }

        .page-admin-dashboard .btn-danger {
            background: var(--accent);
            color: white;
        }

        .page-admin-dashboard .btn-danger:hover {
            background: #c0392b;
            transform: translateY(-1px);
        }

        .page-admin-dashboard .btn-outline {
            background: transparent;
            color: var(--primary);
            border: 1px solid var(--border);
        }

        .page-admin-dashboard .btn-outline:hover {
            background: var(--primary);
            color: white;
        }

        .page-admin-dashboard .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }

        /* Actions */
        .page-admin-dashboard .actions-bar {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: var(--spacing);
            justify-content: center;
            width: 100%;
        }

        /* Tableau */
        .page-admin-dashboard .table-responsive {
            overflow-x: auto;
            border-radius: var(--radius);
            border: 1px solid var(--border);
        }

        .page-admin-dashboard .table {
            width: 100%;
            border-collapse: collapse;
            background: var(--surface);
        }

        .page-admin-dashboard .table th, .page-admin-dashboard .table td {
            padding: 12px 8px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }

        .page-admin-dashboard .table th {
            background: var(--primary);
            color: white;
            font-weight: 600;
            position: sticky;
            top: 0;
        }

        .page-admin-dashboard .table tbody tr:hover {
            background: #f8f9fa;
        }

        .page-admin-dashboard .table tbody tr:last-child td {
            border-bottom: none;
        }

        /* Actions dans le tableau */
        .page-admin-dashboard .table-actions {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }

        .page-admin-dashboard .action-btn {
            padding: 4px 8px;
            font-size: 12px;
            border-radius: 4px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--primary);
            cursor: pointer;
            transition: all 0.2s;
        }

        .page-admin-dashboard .action-btn:hover {
            background: var(--primary-light);
            color: white;
            border-color: var(--primary-light);
        }

        .page-admin-dashboard .action-btn.danger {
            border-color: var(--accent);
            color: var(--accent);
        }

        .page-admin-dashboard .action-btn.danger:hover {
            background: var(--accent);
            color: white;
        }

        /* Formulaires inline */
        .page-admin-dashboard .inline-form {
            display: none;
            background: #f8f9fa;
            padding: 10px;
            border-radius: var(--radius);
            margin-top: 10px;
            border: 1px solid var(--border);
        }

        .page-admin-dashboard .inline-form.active {
            display: block;
        }

        .page-admin-dashboard .inline-form .form-row {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .page-admin-dashboard .inline-form input {
            flex: 1;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 12px;
        }

        /* Pagination */
        .page-admin-dashboard .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;
            margin-top: var(--spacing);
            width: 100%;
        }

        .page-admin-dashboard .pagination a, .page-admin-dashboard .pagination span {
            display: inline-block;
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            color: var(--primary);
            text-decoration: none;
            transition: all 0.3s;
        }

        .page-admin-dashboard .pagination a:hover, .page-admin-dashboard .pagination .active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        /* Messages */
        .page-admin-dashboard .alert {
            padding: 12px 16px;
            border-radius: var(--radius);
            margin-bottom: var(--spacing);
            border: 1px solid;
            text-align: center;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .page-admin-dashboard .alert-success {
            background: #d4edda;
            color: #155724;
            border-color: #c3e6cb;
        }

        .page-admin-dashboard .alert-danger {
            background: #f8d7da;
            color: #721c24;
            border-color: #f5c6cb;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .page-admin-dashboard .admin-main {
                padding: 10px;
            }

            .page-admin-dashboard .admin-section {
                padding: 15px;
            }

            .page-admin-dashboard .form-grid {
                grid-template-columns: 1fr;
            }

            .page-admin-dashboard .actions-bar {
                flex-direction: column;
            }

            .page-admin-dashboard .table-responsive {
                font-size: 12px;
            }

            .page-admin-dashboard .table th, .page-admin-dashboard .table td {
                padding: 8px 4px;
            }

            .page-admin-dashboard .table-actions {
                flex-direction: column;
            }
        }

        @media (max-width: 480px) {
            .page-admin-dashboard .admin-header h1 {
                font-size: 1.5rem;
            }

            .page-admin-dashboard .section-title {
                font-size: 1.1rem;
            }

            .page-admin-dashboard .btn {
                padding: 8px 12px;
                font-size: 12px;
            }
        }

        /* États spéciaux */
        .page-admin-dashboard .password-hidden {
            font-family: monospace;
            letter-spacing: 2px;
        }

        .page-admin-dashboard .password-visible {
            font-family: monospace;
        }

        /* Icônes */
        .page-admin-dashboard .icon {
            width: 16px;
            height: 16px;
            display: inline-block;
        }

        .page-admin-dashboard .icon-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: background 0.2s;
        }

        .page-admin-dashboard .icon-btn:hover {
            background: rgba(0,0,0,0.1);
        }

/* ============================================================================
   7. admin_missions.php <style> → current missions page only
   ============================================================================ */

.page-admin-missions:not(.page-admin-missions-legacy) {
	--c-bg:#f5f7fa;
	--c-surface:#ffffff;
	--c-border:#e2e8f0;
	--c-border-dark:#d0d7e2;
	--c-text:#1f2933;
	--c-text-light:#5d6b7a;
	--c-primary:#0b67c2;
	--c-primary-soft:#0b67c21a;
	--c-primary-hover:#09579f;
	--c-success:#218838;
	--c-success-bg:#eafaf1;
	--c-danger:#c0392b;
	--c-danger-bg:#fdeaea;
	--c-warning:#b7791f;
	--c-warning-bg:#fff7e6;
	--c-accent:#ff5722;
	--radius:10px;
	--shadow:0 2px 4px rgba(0,0,0,0.08);
	--transition:.18s cubic-bezier(.4,0,.2,1);
	font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html:has(body.page-admin-missions:not(.page-admin-missions-legacy)), body.page-admin-missions:not(.page-admin-missions-legacy) {margin:0;padding:0;background:var(--c-bg);color:var(--c-text);line-height:1.4;}
.page-admin-missions:not(.page-admin-missions-legacy) main.page-content {padding:26px 30px 60px;max-width:1700px;margin:0 auto;}
.page-admin-missions:not(.page-admin-missions-legacy) h1 {margin:0 0 24px;font-size:clamp(1.6rem,2vw,2.1rem);font-weight:600;letter-spacing:.5px;}
.page-admin-missions:not(.page-admin-missions-legacy) h2 {margin:0;font-size:1.35rem;font-weight:600;}
/* Alerts */
.page-admin-missions:not(.page-admin-missions-legacy) .alert {padding:14px 20px;border:1px solid var(--c-border);border-radius:var(--radius);font-weight:600;margin:0 0 22px;display:flex;align-items:center;gap:12px;font-size:.95rem;}
.page-admin-missions:not(.page-admin-missions-legacy) .alert-success {background:var(--c-success-bg);color:var(--c-success);border-color:#b7e4c7;}
.page-admin-missions:not(.page-admin-missions-legacy) .alert-danger {background:var(--c-danger-bg);color:#f5c6cb;border-color:#f5c6cb;}
.page-admin-missions:not(.page-admin-missions-legacy) .alert-info {background:#eef4ff;color:#1c4b82;border-color:#c6daf7;}
/* Filters */
.page-admin-missions:not(.page-admin-missions-legacy) .filter-form {display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;align-items:center;}
.page-admin-missions:not(.page-admin-missions-legacy) .filter-form input[type=text], .page-admin-missions:not(.page-admin-missions-legacy) .filter-form select, .page-admin-missions:not(.page-admin-missions-legacy) .filter-form input[type=number] {padding:8px 10px;border:1px solid var(--c-border-dark);border-radius:6px;background:#fff;min-height:40px;font:inherit;transition:var(--transition);}
.page-admin-missions:not(.page-admin-missions-legacy) .filter-form input:focus, .page-admin-missions:not(.page-admin-missions-legacy) .filter-form select:focus {outline:2px solid var(--c-primary);outline-offset:1px;}
.page-admin-missions:not(.page-admin-missions-legacy) .filter-form button, .page-admin-missions:not(.page-admin-missions-legacy) .btn {background:var(--c-primary);color:#fff;border:none;padding:10px 18px;border-radius:6px;cursor:pointer;font:inherit;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:var(--transition);}
.page-admin-missions:not(.page-admin-missions-legacy) .filter-form button:hover, .page-admin-missions:not(.page-admin-missions-legacy) .btn:hover {background:var(--c-primary-hover);}
.page-admin-missions:not(.page-admin-missions-legacy) .btn-neutral {background:#64748b;}
.page-admin-missions:not(.page-admin-missions-legacy) .btn-neutral:hover {background:#4b5a6b;}
.page-admin-missions:not(.page-admin-missions-legacy) .btn-small {padding:6px 12px;font-size:.8rem;}
.page-admin-missions:not(.page-admin-missions-legacy) .btn-outline {background:#fff;color:var(--c-primary);border:1px solid var(--c-primary);}
.page-admin-missions:not(.page-admin-missions-legacy) .btn-outline:hover {background:var(--c-primary);color:#fff;}
.page-admin-missions:not(.page-admin-missions-legacy) .btn-danger {background:var(--c-danger);}
.page-admin-missions:not(.page-admin-missions-legacy) .btn-danger:hover {background:#a83225;}
.page-admin-missions:not(.page-admin-missions-legacy) .badge {display:inline-block;padding:4px 10px;border-radius:999px;font-size:.68rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.page-admin-missions:not(.page-admin-missions-legacy) .badge-green {background:#e3fcec;color:#06663d;}
.page-admin-missions:not(.page-admin-missions-legacy) .badge-red {background:#ffe8e6;color:#a92215;}
/* Table */
.page-admin-missions:not(.page-admin-missions-legacy) .table-wrapper {background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto;border:1px solid var(--c-border);position:relative;}
.page-admin-missions:not(.page-admin-missions-legacy) .styled-table {border-collapse:separate;border-spacing:0;width:100%;font-size:.87rem;min-width:1100px;}
.page-admin-missions:not(.page-admin-missions-legacy) .styled-table thead th {position:sticky;top:0;background:#f0f4f9;padding:12px 14px;font-weight:600;font-size:.73rem;letter-spacing:.8px;text-transform:uppercase;color:#475569;border-bottom:1px solid var(--c-border);backdrop-filter:blur(4px);z-index:2;}
.page-admin-missions:not(.page-admin-missions-legacy) .styled-table tbody td {padding:12px 14px;vertical-align:top;border-bottom:1px solid var(--c-border);}
.page-admin-missions:not(.page-admin-missions-legacy) .styled-table tbody tr:nth-child(even) {background:#fafbfc;}
.page-admin-missions:not(.page-admin-missions-legacy) .styled-table tbody tr:hover {background:#eef6ff;}
.page-admin-missions:not(.page-admin-missions-legacy) .styled-table tfoot td {font-weight:600;background:#fff;}
.page-admin-missions:not(.page-admin-missions-legacy) .styled-table input[type=number] {width:76px;padding:4px 6px;font-size:.75rem;}
/* Pagination */
.page-admin-missions:not(.page-admin-missions-legacy) .pagination {display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:22px 0 10px;}
.page-admin-missions:not(.page-admin-missions-legacy) .pagination a {text-decoration:none;color:#2d5aa8;border:1px solid var(--c-border);padding:7px 13px;border-radius:6px;font-size:.78rem;font-weight:600;background:#fff;transition:var(--transition);}
.page-admin-missions:not(.page-admin-missions-legacy) .pagination a:hover {background:#eaf3ff;}
.page-admin-missions:not(.page-admin-missions-legacy) .pagination a.active {background:var(--c-primary);color:#fff;border-color:var(--c-primary);}
.page-admin-missions:not(.page-admin-missions-legacy) .pagination-info {font-size:.75rem;color:var(--c-text-light);margin-left:auto;font-weight:500;}
/* Stats + Graph */
.page-admin-missions:not(.page-admin-missions-legacy) .stats-section {display:flex;flex-direction:column;gap:24px;margin-top:45px;}
.page-admin-missions:not(.page-admin-missions-legacy) .stats-header {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;}
.page-admin-missions:not(.page-admin-missions-legacy) .graph-card {background:var(--c-surface);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);border:1px solid var(--c-border);}
.page-admin-missions:not(.page-admin-missions-legacy) .chart-container-full {height:620px;width:100%;position:relative;}
@media (max-width:1100px) {.page-admin-missions:not(.page-admin-missions-legacy) .chart-container-full {height:540px}}
@media (max-width:740px) {.page-admin-missions:not(.page-admin-missions-legacy) .chart-container-full {height:430px}}
.page-admin-missions:not(.page-admin-missions-legacy) .stats-summary {display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.page-admin-missions:not(.page-admin-missions-legacy) .stat-card {background:var(--c-surface);border-radius:var(--radius);padding:18px 20px;border:1px solid var(--c-border);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;}
.page-admin-missions:not(.page-admin-missions-legacy) .stat-card:before {content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--c-primary-soft),transparent);opacity:.35;pointer-events:none;}
.page-admin-missions:not(.page-admin-missions-legacy) .stat-card.warning:before {background:linear-gradient(135deg,#ffcc801f,transparent);}
.page-admin-missions:not(.page-admin-missions-legacy) .stat-card h3 {margin:0;font-size:.74rem;letter-spacing:1.1px;text-transform:uppercase;font-weight:700;color:#475569;}
.page-admin-missions:not(.page-admin-missions-legacy) .stat-card .stat-value {margin:4px 0 0;font-size:1.55rem;font-weight:600;letter-spacing:.5px;color:var(--c-primary);}
.page-admin-missions:not(.page-admin-missions-legacy) .stat-card.warning .stat-value {color:var(--c-warning);}
.page-admin-missions:not(.page-admin-missions-legacy) .period-select {background:#fff;border:1px solid var(--c-border-dark);padding:8px 12px;border-radius:6px;min-width:170px;font:inherit;font-size:.8rem;}
.page-admin-missions:not(.page-admin-missions-legacy) .period-select:focus {outline:2px solid var(--c-primary);outline-offset:1px;}
/* Utility */
.page-admin-missions:not(.page-admin-missions-legacy) .flex-center {display:flex;justify-content:center;align-items:center;}
.page-admin-missions:not(.page-admin-missions-legacy) .nowrap {white-space:nowrap;}
.page-admin-missions:not(.page-admin-missions-legacy) .text-right {text-align:right;}
.page-admin-missions:not(.page-admin-missions-legacy) .small {font-size:.68rem;color:var(--c-text-light);}
.page-admin-missions:not(.page-admin-missions-legacy) .icon-btn {background:none;border:none;cursor:pointer;padding:2px 4px;}
.page-admin-missions:not(.page-admin-missions-legacy) .separator-vert {width:1px;background:var(--c-border);align-self:stretch;}
/* Message état envoi */
.page-admin-missions:not(.page-admin-missions-legacy) .status-ok {color:#198754;font-weight:600;font-size:.7rem;display:inline-block;}
.page-admin-missions:not(.page-admin-missions-legacy) .status-nok {color:#d93025;font-weight:600;font-size:.7rem;display:inline-block;}
.page-admin-missions:not(.page-admin-missions-legacy) .voir-plus-btn { background:none;border:none;color:#2d5aa8;cursor:pointer;padding:0;margin-left:6px;font:inherit; }
.page-admin-missions:not(.page-admin-missions-legacy) .voir-plus-btn:hover { text-decoration:underline; }
/* Boutons de vérification */
.page-admin-missions:not(.page-admin-missions-legacy) .btn-verify {background:#fff;color:#3498db;border:2px solid #3498db;transition:all .2s;}
.page-admin-missions:not(.page-admin-missions-legacy) .btn-verify:hover {background:#3498db;color:#fff;transform:translateY(-1px);box-shadow:0 4px 8px rgba(52,152,219,.2);}
.page-admin-missions:not(.page-admin-missions-legacy) .btn-verified {background:#27ae60;color:white;border:none;transition:all .2s;}
.page-admin-missions:not(.page-admin-missions-legacy) .btn-verified:hover {background:#229954;transform:translateY(-1px);box-shadow:0 4px 8px rgba(39,174,96,.2);}

/* ============================================================================
   8. admin_nbn.php <style> → .page-admin-nbn
   ============================================================================ */

        .page-admin-nbn {
	--c-bg:#f5f7fa;
	--c-surface:#ffffff;
	--c-border:#e2e8f0;
	--c-border-dark:#d0d7e2;
	--c-text:#1f2933;
	--c-text-light:#5d6b7a;
	--c-primary:#0b67c2;
	--c-primary-soft:#0b67c21a;
	--c-primary-hover:#09579f;
	--c-success:#218838;
	--c-success-bg:#eafaf1;
	--c-danger:#c0392b;
	--c-danger-bg:#fdeaea;
	--c-warning:#b7791f;
	--c-warning-bg:#fff7e6;
	--c-accent:#ff5722;
	--radius:10px;
	--shadow:0 2px 4px rgba(0,0,0,0.08);
	--transition:.18s cubic-bezier(.4,0,.2,1);
	font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html:has(body.page-admin-nbn), body.page-admin-nbn {margin:0;padding:0;background:var(--c-bg);color:var(--c-text);line-height:1.4;}
.page-admin-nbn main.page-content {padding:26px 30px 60px;max-width:1700px;margin:0 auto;}
.page-admin-nbn h1 {margin:0 0 24px;font-size:clamp(1.6rem,2vw,2.1rem);font-weight:600;letter-spacing:.5px;}
.page-admin-nbn h2 {margin:0;font-size:1.35rem;font-weight:600;}
.page-admin-nbn .card {background:var(--c-surface);border-radius:var(--radius);padding:22px 24px;margin-bottom:24px;box-shadow:var(--shadow);border:1px solid var(--c-border);}
/* Alerts */
.page-admin-nbn .alert {padding:14px 20px;border:1px solid var(--c-border);border-radius:var(--radius);font-weight:600;margin:0 0 22px;display:flex;align-items:center;gap:12px;font-size:.95rem;}
.page-admin-nbn .alert-success {background:var(--c-success-bg);color:var(--c-success);border-color:#b7e4c7;}
.page-admin-nbn .alert-danger {background:var(--c-danger-bg);color:#721c24;border-color:#f5c6cb;}
.page-admin-nbn .alert-info {background:#eef4ff;color:#1c4b82;border-color:#c6daf7;}
.page-admin-nbn .alert-warning {background:var(--c-warning-bg);color:var(--c-warning);border-color:#ffd966;}
/* Filters */
.page-admin-nbn .filter-form {display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;align-items:center;}
.page-admin-nbn .filter-form input[type=text], .page-admin-nbn .filter-form select, .page-admin-nbn .filter-form input[type=date] {padding:8px 10px;border:1px solid var(--c-border-dark);border-radius:6px;background:#fff;min-height:40px;font:inherit;transition:var(--transition);}
.page-admin-nbn .filter-form input:focus, .page-admin-nbn .filter-form select:focus {outline:2px solid var(--c-primary);outline-offset:1px;}
.page-admin-nbn .filter-form button, .page-admin-nbn .btn {background:var(--c-primary);color:#fff;border:none;padding:10px 18px;border-radius:6px;cursor:pointer;font:inherit;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:var(--transition);text-decoration:none;}
.page-admin-nbn .filter-form button:hover, .page-admin-nbn .btn:hover {background:var(--c-primary-hover);}
.page-admin-nbn .btn-neutral {background:#64748b;}
.page-admin-nbn .btn-neutral:hover {background:#4b5a6b;}
.page-admin-nbn .btn-small {padding:6px 12px;font-size:.8rem;}
.page-admin-nbn .btn-outline {background:#fff;color:var(--c-primary);border:1px solid var(--c-primary);}
.page-admin-nbn .btn-outline:hover {background:var(--c-primary);color:#fff;}
.page-admin-nbn .btn-danger {background:var(--c-danger);}
.page-admin-nbn .btn-danger:hover {background:#a83225;}
.page-admin-nbn .btn-success {background:var(--c-success);}
.page-admin-nbn .btn-success:hover {background:#1a6929;}
.page-admin-nbn .badge {display:inline-block;padding:4px 10px;border-radius:999px;font-size:.68rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.page-admin-nbn .badge-green {background:#e3fcec;color:#06663d;}
.page-admin-nbn .badge-red {background:#ffe8e6;color:#a92215;}
/* Table */
.page-admin-nbn .table-wrapper {background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto;border:1px solid var(--c-border);position:relative;}
.page-admin-nbn .styled-table {border-collapse:separate;border-spacing:0;width:100%;font-size:.87rem;min-width:1200px;}
.page-admin-nbn .styled-table thead th {position:sticky;top:0;background:#f0f4f9;padding:12px 14px;font-weight:600;font-size:.73rem;letter-spacing:.8px;text-transform:uppercase;color:#475569;border-bottom:1px solid var(--c-border);backdrop-filter:blur(4px);z-index:2;}
.page-admin-nbn .styled-table tbody td {padding:12px 14px;vertical-align:top;border-bottom:1px solid var(--c-border);}
.page-admin-nbn .styled-table tbody tr:nth-child(even) {background:#fafbfc;}
.page-admin-nbn .styled-table tbody tr:hover {background:#eef6ff;}
.page-admin-nbn .styled-table tfoot td {font-weight:600;background:#fff;padding:14px;}
        /* Pagination */
.page-admin-nbn .pagination {display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:22px 0 10px;}
.page-admin-nbn .pagination a {text-decoration:none;color:#2d5aa8;border:1px solid var(--c-border);padding:7px 13px;border-radius:6px;font-size:.78rem;font-weight:600;background:#fff;transition:var(--transition);}
.page-admin-nbn .pagination a:hover {background:#eaf3ff;}
.page-admin-nbn .pagination a.active {background:var(--c-primary);color:#fff;border-color:var(--c-primary);}
.page-admin-nbn .pagination-info {font-size:.75rem;color:var(--c-text-light);margin-left:auto;font-weight:500;}
/* Stats */
.page-admin-nbn .stats-section {display:flex;flex-direction:column;gap:24px;margin-top:45px;}
.page-admin-nbn .stats-summary {display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.page-admin-nbn .stat-card {background:var(--c-surface);border-radius:var(--radius);padding:18px 20px;border:1px solid var(--c-border);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;}
.page-admin-nbn .stat-card:before {content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--c-primary-soft),transparent);opacity:.35;pointer-events:none;}
.page-admin-nbn .stat-card.warning:before {background:linear-gradient(135deg,#ffcc801f,transparent);}
.page-admin-nbn .stat-card h3 {margin:0;font-size:.74rem;letter-spacing:1.1px;text-transform:uppercase;font-weight:700;color:#475569;}
.page-admin-nbn .stat-card .stat-value {margin:4px 0 0;font-size:1.55rem;font-weight:600;letter-spacing:.5px;color:var(--c-primary);}
.page-admin-nbn .stat-card.warning .stat-value {color:var(--c-warning);}
.page-admin-nbn .section-divider {margin:40px 0 30px;padding:16px 0;border-top:2px solid var(--c-border);border-bottom:1px solid var(--c-border);background:linear-gradient(90deg, rgba(11,103,194,0.03) 0%, transparent 100%);}
.page-admin-nbn .section-divider h3 {margin:0;font-size:1.2rem;color:var(--c-text);font-weight:600;display:flex;align-items:center;gap:10px;}
/* Utility */
.page-admin-nbn .flex-center {display:flex;justify-content:center;align-items:center;}
.page-admin-nbn .nowrap {white-space:nowrap;}
.page-admin-nbn .text-right {text-align:right;}
.page-admin-nbn .small {font-size:.68rem;color:var(--c-text-light);}
.page-admin-nbn .icon-btn {background:none;border:none;cursor:pointer;padding:2px 4px;}
.page-admin-nbn .separator-vert {width:1px;background:var(--c-border);align-self:stretch;}
.page-admin-nbn .action-buttons {display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-start;}

/* ============================================================================
   9. style/styletimesheet.css → .page-admin-timesheets
   ============================================================================ */
/* ============================================================
   Feuille de Pointage — Styles partagés (chauffeur + admin)
   ============================================================ */

.page-admin-timesheets {
    --ts-accent: #005baa;
    --ts-accent-hover: #004a8f;
    --ts-success: #1b7f3d;
    --ts-warning: #e67e22;
    --ts-danger: #e74c3c;
    --ts-bg: #f5f7fa;
    --ts-panel: #ffffff;
    --ts-border: #e2e8f0;
    --ts-text: #1a2332;
    --ts-muted: #64748b;
    --ts-shadow: 0 2px 8px -2px rgba(0,0,0,.08);
    --ts-radius: 16px;
}

/* ---- Layout ---- */
.page-admin-timesheets .ts-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 18px 60px;
}

.page-admin-timesheets .ts-page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--ts-text);
    margin-bottom: 4px;
}

.page-admin-timesheets .ts-page-subtitle {
    font-size: 13px;
    color: var(--ts-muted);
    margin-bottom: 24px;
}

/* ---- Panel / Card ---- */
.page-admin-timesheets .ts-panel {
    background: var(--ts-panel);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    padding: 22px 24px;
    margin-bottom: 22px;
    box-shadow: var(--ts-shadow);
}

.page-admin-timesheets .ts-panel-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ts-muted);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ts-border);
}

/* ---- Month picker bar ---- */
.page-admin-timesheets .ts-month-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.page-admin-timesheets .ts-month-bar select, .page-admin-timesheets .ts-month-bar input[type="number"] {
    padding: 10px 14px;
    border: 1px solid var(--ts-border);
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    color: var(--ts-text);
    font-weight: 600;
    outline: none;
    transition: border-color .2s;
}

.page-admin-timesheets .ts-month-bar select:focus, .page-admin-timesheets .ts-month-bar input:focus {
    border-color: var(--ts-accent);
    box-shadow: 0 0 0 3px rgba(0,91,170,.12);
}

.page-admin-timesheets .ts-month-bar .ts-btn {
    margin-left: auto;
}

/* ---- Buttons ---- */
.page-admin-timesheets .ts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, transform .15s, box-shadow .2s;
}

.page-admin-timesheets .ts-btn:active { transform: scale(.96); }

.page-admin-timesheets .ts-btn-primary {
    background: var(--ts-accent);
    color: #fff;
    box-shadow: 0 4px 14px -4px rgba(0,91,170,.4);
}
.page-admin-timesheets .ts-btn-primary:hover { background: var(--ts-accent-hover); }

.page-admin-timesheets .ts-btn-success {
    background: var(--ts-success);
    color: #fff;
    box-shadow: 0 4px 14px -4px rgba(27,127,61,.4);
}
.page-admin-timesheets .ts-btn-success:hover { background: #15692f; }

.page-admin-timesheets .ts-btn-outline {
    background: transparent;
    color: var(--ts-accent);
    border: 2px solid var(--ts-accent);
}
.page-admin-timesheets .ts-btn-outline:hover { background: rgba(0,91,170,.06); }

.page-admin-timesheets .ts-btn-excel {
    background: #217346;
    color: #fff;
    box-shadow: 0 4px 14px -4px rgba(33,115,70,.4);
}
.page-admin-timesheets .ts-btn-excel:hover { background: #1a5c38; }

.page-admin-timesheets .ts-btn-sm {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 8px;
}

.page-admin-timesheets .ts-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---- Form grid ---- */
.page-admin-timesheets .ts-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 600px) {
    .page-admin-timesheets .ts-form-grid { grid-template-columns: 1fr; }
}

.page-admin-timesheets .ts-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.page-admin-timesheets .ts-form-group.full-width {
    grid-column: 1 / -1;
}

.page-admin-timesheets .ts-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ts-text);
}

.page-admin-timesheets .ts-form-group label .ts-hint {
    font-weight: 400;
    color: var(--ts-muted);
    font-size: 11px;
}

.page-admin-timesheets .ts-form-group input, .page-admin-timesheets .ts-form-group textarea, .page-admin-timesheets .ts-form-group select {
    padding: 10px 14px;
    border: 1px solid var(--ts-border);
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    color: var(--ts-text);
    outline: none;
    transition: border-color .2s;
}

.page-admin-timesheets .ts-form-group input:focus, .page-admin-timesheets .ts-form-group textarea:focus, .page-admin-timesheets .ts-form-group select:focus {
    border-color: var(--ts-accent);
    box-shadow: 0 0 0 3px rgba(0,91,170,.1);
}

.page-admin-timesheets .ts-form-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--ts-accent);
}

.page-admin-timesheets .ts-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-admin-timesheets .ts-checkbox-row label {
    font-size: 14px;
    cursor: pointer;
}

/* ---- Form actions ---- */
.page-admin-timesheets .ts-form-actions {
    display: flex;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.page-admin-timesheets .ts-form-actions .ts-btn {
    flex: 1;
    min-width: 160px;
}

/* ---- Status badges ---- */
.page-admin-timesheets .ts-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.page-admin-timesheets .ts-badge-draft { background: #fff3e0; color: #e65100; }
.page-admin-timesheets .ts-badge-submitted { background: #e3f2fd; color: #1565c0; }
.page-admin-timesheets .ts-badge-validated { background: #e8f5e9; color: #2e7d32; }

/* ---- Pre-fill info ---- */
.page-admin-timesheets .ts-prefill-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 10px;
    font-size: 13px;
    color: #1565c0;
    margin-bottom: 20px;
}

/* ---- Alert messages ---- */
.page-admin-timesheets .ts-alert {
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
}

.page-admin-timesheets .ts-alert-success { background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20; }
.page-admin-timesheets .ts-alert-error { background: #fce4ec; border: 1px solid #ef9a9a; color: #b71c1c; }
.page-admin-timesheets .ts-alert-warning { background: #fff8e1; border: 1px solid #ffe082; color: #e65100; }
.page-admin-timesheets .ts-alert-info { background: #e3f2fd; border: 1px solid #90caf9; color: #0d47a1; }

/* ---- Admin driver table ---- */
.page-admin-timesheets .ts-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.page-admin-timesheets .ts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.page-admin-timesheets .ts-table th {
    background: var(--ts-accent);
    color: #fff;
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.page-admin-timesheets .ts-table th:first-child { border-radius: 10px 0 0 0; }
.page-admin-timesheets .ts-table th:last-child { border-radius: 0 10px 0 0; }

.page-admin-timesheets .ts-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ts-border);
    vertical-align: middle;
}

.page-admin-timesheets .ts-table tbody tr:hover {
    background: #f8fafc;
}

.page-admin-timesheets .ts-table tbody tr:last-child td {
    border-bottom: none;
}

.page-admin-timesheets .ts-table .td-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}

/* ---- Back link ---- */
.page-admin-timesheets .ts-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ts-accent);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
    transition: opacity .2s;
}
.page-admin-timesheets .ts-back:hover { opacity: .7; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .page-admin-timesheets .ts-container { padding: 14px 12px 60px; }
    .page-admin-timesheets .ts-panel { padding: 16px; border-radius: 12px; }
    .page-admin-timesheets .ts-month-bar { flex-direction: column; align-items: stretch; }
    .page-admin-timesheets .ts-month-bar .ts-btn { margin-left: 0; }
    .page-admin-timesheets .ts-form-actions { flex-direction: column; }
    .page-admin-timesheets .ts-form-actions .ts-btn { min-width: unset; }
}

/* ============================================================================
   10. Extracted static inline utilities
   ============================================================================ */

/* ==========================================================================
   Extracted static inline styles (no dynamic PHP/JS values)
   ========================================================================== */

/* --- admin.php --- */
.page-admin-dashboard .form-group-full {
    grid-column: 1 / -1;
}
.page-admin-dashboard .search-input-row {
    display: flex;
    gap: 10px;
}
.page-admin-dashboard .search-query-input {
    flex: 1;
}
.page-admin-dashboard .form-display-inline {
    display: inline;
}
.page-admin-dashboard .table-empty-cell {
    text-align: center;
    color: var(--text-muted);
}

/* --- admin_missions.php (current) --- */
body.page-admin-missions:not(.page-admin-missions-legacy) .separator-vert {
    margin: 0 6px;
    height: 32px;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .btn-corrupted-toggle {
    min-width: 190px;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .client-legend {
    background: var(--c-surface);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 18px;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow);
}
body.page-admin-missions:not(.page-admin-missions-legacy) .client-legend-title {
    font-size: .75rem;
    font-weight: 600;
    color: var(--c-text-light);
    margin-bottom: 8px;
    letter-spacing: .5px;
    text-transform: uppercase;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .client-legend-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .client-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: .8rem;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .client-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}
body.page-admin-missions:not(.page-admin-missions-legacy) .client-legend-name {
    font-weight: 500;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .btn-pdf-download {
    margin-right: 6px;
    padding: 4px 10px;
    font-size: .65rem;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .client-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .client-color-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
    flex-shrink: 0;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .cell-center {
    text-align: center;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .form-display-inline {
    display: inline;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .btn-verify-action {
    padding: 6px 12px;
    font-size: .75rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .icon-btn-danger {
    color: #dc3545;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .cell-pending {
    color: #c53030;
}
body.page-admin-missions:not(.page-admin-missions-legacy) .period-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* --- admin_missions?.php (legacy duplicate) --- */
.page-admin-missions-legacy .msg-flash {
    padding: 12px 18px;
    margin-bottom: 18px;
    border-radius: 6px;
    font-weight: bold;
}
.page-admin-missions-legacy .filter-reset-link {
    margin-left: 10px;
}
.page-admin-missions-legacy .form-cout-inline {
    display: inline;
    margin-left: 5px;
}
.page-admin-missions-legacy .input-cout {
    width: 70px;
}
.page-admin-missions-legacy .btn-icon-plain {
    padding: 2px 8px;
    background: none;
    border: none;
}
.page-admin-missions-legacy .btn-icon-plain img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.page-admin-missions-legacy .hint-muted {
    cursor: help;
    color: #666;
}
.page-admin-missions-legacy .text-unfilled {
    color: #999;
}
.page-admin-missions-legacy .km-actuel {
    color: #666;
}
.page-admin-missions-legacy .status-sent {
    color: #28a745;
    font-weight: bold;
}
.page-admin-missions-legacy .status-unsent {
    color: red;
    font-weight: bold;
}
.page-admin-missions-legacy .btn-preremplir {
    margin-left: 8px;
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
}
.page-admin-missions-legacy .row-total {
    font-weight: bold;
}
.page-admin-missions-legacy .cell-right {
    text-align: right;
}
.page-admin-missions-legacy .row-pending {
    font-weight: bold;
    color: #FF0000;
}
.page-admin-missions-legacy .stats-toolbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 20px;
}
.page-admin-missions-legacy .export-form {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}
.page-admin-missions-legacy .btn-export-excel {
    padding: 10px 20px;
    background: #2ecc71;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-admin-missions-legacy .btn-export-pdf {
    padding: 10px 20px;
    background: rgb(238,181,181);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-admin-missions-legacy .btn-export-excel img,
.page-admin-missions-legacy .btn-export-pdf img {
    width: 20px;
    height: 20px;
}
.page-admin-missions-legacy .period-form-inline {
    display: inline-block;
}
.page-admin-missions-legacy .period-select-legacy {
    margin-bottom: 0;
    min-width: 180px;
    text-align: center;
}
.page-admin-missions-legacy .chart-box {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}
.page-admin-missions-legacy .chart-box-inner {
    height: 400px;
}

/* --- admin_nbn.php --- */
.page-admin-nbn .card-title {
    margin: 0 0 16px;
    font-size: 1.25rem;
    font-weight: 600;
}
.page-admin-nbn .card-title-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-admin-nbn .card-lead {
    color: var(--c-text-light);
    margin: 0 0 18px;
    font-size: .9rem;
}
.page-admin-nbn .filter-form-flush {
    margin: 0;
}
.page-admin-nbn .filter-grow {
    flex: 1;
    min-width: 150px;
}
.page-admin-nbn .filter-grow-lg {
    flex: 1;
    min-width: 180px;
}
.page-admin-nbn .btn-nowrap {
    white-space: nowrap;
}
.page-admin-nbn .filter-form-list {
    margin: 0 0 18px;
}
.page-admin-nbn .btn-pdf-bdn {
    padding: 5px 12px;
    font-size: .72rem;
    text-decoration: none;
    white-space: nowrap;
}
.page-admin-nbn .icon-pdf {
    vertical-align: middle;
}
.page-admin-nbn .form-display-inline {
    display: inline;
}
.page-admin-nbn .icon-btn-danger {
    color: #dc3545;
}
.page-admin-nbn .table-empty-cell {
    text-align: center;
    padding: 30px;
    color: var(--c-text-light);
}
.page-admin-nbn .stat-card-avg-cost {
    background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%);
}
.page-admin-nbn .stat-card-avg-km {
    background: linear-gradient(135deg, #fff3e0 0%, #ffffff 100%);
}
.page-admin-nbn .stat-card-avg-hours {
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
}
.page-admin-nbn .stat-card-avg-conso {
    background: linear-gradient(135deg, #f3e5f5 0%, #ffffff 100%);
}
.page-admin-nbn .stat-card-avg-tonnage {
    background: linear-gradient(135deg, #fce4ec 0%, #ffffff 100%);
}
.page-admin-nbn .stat-value-avg-cost { color: #2e7d32; }
.page-admin-nbn .stat-value-avg-km { color: #ef6c00; }
.page-admin-nbn .stat-value-avg-hours { color: #1565c0; }
.page-admin-nbn .stat-value-avg-conso { color: #6a1b9a; }
.page-admin-nbn .stat-value-avg-tonnage { color: #c2185b; }

/* --- admin_timesheets.php --- */
.page-admin-timesheets .ts-container {
    margin-top: 20px;
}
.page-admin-timesheets .ts-month-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}
.page-admin-timesheets .ts-year-input {
    width: 100px;
    padding: 10px 14px;
    border: 1px solid var(--ts-border);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}
.page-admin-timesheets .ts-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.page-admin-timesheets .ts-stat-tile {
    text-align: center;
    padding: 16px;
}
.page-admin-timesheets .ts-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--ts-accent);
}
.page-admin-timesheets .ts-stat-value-validated { color: #2e7d32; }
.page-admin-timesheets .ts-stat-value-submitted { color: #1565c0; }
.page-admin-timesheets .ts-stat-value-draft { color: #e65100; }
.page-admin-timesheets .ts-stat-value-empty { color: #90a4ae; }
.page-admin-timesheets .ts-stat-label {
    font-size: 12px;
    color: var(--ts-muted);
    font-weight: 600;
}
.page-admin-timesheets .ts-panel-title-plain {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.page-admin-timesheets .ts-panel-table {
    padding: 0;
    overflow: hidden;
}
.page-admin-timesheets .table-empty-cell {
    text-align: center;
    padding: 30px;
    color: var(--ts-muted);
}
.page-admin-timesheets .ts-muted-sm {
    color: var(--ts-muted);
    font-size: 12px;
}
.page-admin-timesheets .ts-computed {
    color: #1565c0;
}
.page-admin-timesheets .ts-calc-icon {
    font-size: 10px;
}
.page-admin-timesheets .ts-muted {
    color: var(--ts-muted);
}
.page-admin-timesheets .ts-sick-yes {
    color: var(--ts-danger);
    font-weight: 700;
}
.page-admin-timesheets .ts-badge-empty {
    background: #eceff1;
    color: #90a4ae;
}
.page-admin-timesheets .form-flush {
    margin: 0;
}
.page-admin-timesheets .ts-awaiting {
    color: var(--ts-muted);
    font-size: 12px;
}

/* --- mission_detail_admin.php --- */
.page-admin-mission-detail .signature-img {
    max-width: 200px;
    max-height: 100px;
}
.page-admin-mission-detail .photo-bon-img {
    max-width: 200px;
}
.page-admin-mission-detail .actions-footer {
    margin-top: 20px;
    text-align: center;
}
.page-admin-mission-detail .retour-gestion-btn {
    background: #2c3e50;
    color: #fff;
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1em;
    box-shadow: 0 2px 8px rgba(44,62,80,0.08);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    display: inline-block;
}
.page-admin-mission-detail .retour-gestion-btn:hover {
    background: #005baa;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,91,170,0.12);
}


/* ==========================================================================
   Admin — Operations (clients, planning, modification, envoi, users, aide)
   ========================================================================== */

/* ----- manage.php (page-admin-clients) ----- */
body.admin-app.page-admin-clients{
    --primary: #2c3e50;
    --primary-light: #3949ab;
    --accent: #e62222;
    --background: #f7f9fb;
    --surface: #fff;
    --border: #e3eaf3;
    --shadow: 0 2px 12px rgba(44,62,80,0.08);
    --radius: 14px;
    --spacing: 24px;
    --font-main: 'Segoe UI', Arial, sans-serif;
}

.page-admin-clients *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.admin-app.page-admin-clients,
body.admin-app.page-admin-clients{
    font-family: var(--font-main);
    background: var(--background);
    color: var(--primary);
    min-height: 100vh;
    width: 100vw;
}
body.admin-app.page-admin-clients{
    display: block;
    min-height: 100vh;
    width: 100vw;
}
body.admin-app.page-admin-clients .main-content,
body.admin-app.page-admin-clients .manage-container{
    display: flex;
    flex-direction: column;
}

/* Correction : le body ne doit pas affecter la navbar en flex */
body.admin-app.page-admin-clients.with-topnav{
    display: block !important;
}

/* Ajoutez ou ajustez la marge à gauche pour décaler le contenu à côté de la sidebar */
body.admin-app.page-admin-clients .manage-container{
    width: 100%;
    max-width: 1200px;
    margin: 0;
    padding: 24px 10px 40px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--background);
    min-height: 100vh;
    margin-left: 0; /* <-- Collé à gauche, plus de décalage sidebar */
}

body.admin-app.page-admin-clients h1{
    color: var(--primary);
    font-size: 2rem;
    margin-bottom: 12px;
    text-align: center; /* Centrer le titre */
    font-weight: 600;
    letter-spacing: 1px;
    width: 100%; /* Prend toute la largeur du container */
    align-self: center; /* Centre dans le flex parent */
}

body.admin-app.page-admin-clients .section-title,
body.admin-app.page-admin-clients .form-title{
    font-size: 1.25rem;
    color: var(--primary-light);
    font-weight: 500;
    margin-bottom: 18px;
    margin-top: 0;
    border-bottom: 2px solid var(--border);
    padding-bottom: 8px;
    background: #f7fafd;
    border-radius: 10px 10px 0 0;
    text-align: left;
}

body.admin-app.page-admin-clients .container{
    margin: 12px 0;          /* haut et bas seulement */
    padding: 28px 18px;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--border);
    width: 100vw;
    max-width: 100vw; 
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: none;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}

body.admin-app.page-admin-clients .flex{
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    align-items: flex-start;
    /* Empêche le chevauchement, permet le retour à la ligne si pas assez de place */
    flex-wrap: wrap;
    width: 100%;
}

body.admin-app.page-admin-clients .box{
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    flex: 1 1 0;
    min-width: 320px;
    /* Largeur dynamique pour occuper l'espace disponible */
    max-width: none;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
    /* Ajout d'un petit espace interne pour ne pas coller les bords */
    margin-left: 8px;
    margin-right: 8px;
}

body.admin-app.page-admin-clients .form-section{
    max-width: 500px;
    width: 100%;
    margin: 0 auto var(--spacing);
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    min-width: 0;
}

body.admin-app.page-admin-clients label{
    display: block;
    margin-bottom: 6px;
    color: var(--primary);
    font-weight: normal;
    font-size: 1rem;
}

body.admin-app.page-admin-clients input,
body.admin-app.page-admin-clients select,
body.admin-app.page-admin-clients textarea{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #f5f7fa;
    font-size: 1rem;
    margin-bottom: 10px;
    transition: border 0.2s;
    text-align: center;
    box-sizing: border-box;
}

body.admin-app.page-admin-clients input:focus,
body.admin-app.page-admin-clients select:focus,
body.admin-app.page-admin-clients textarea:focus{
    border: 1.5px solid var(--primary-light);
    outline: none;
    background: #fff;
}

body.admin-app.page-admin-clients .actions{
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

body.admin-app.page-admin-clients button,
body.admin-app.page-admin-clients .actions button{
    background: var(--primary-light);
    color: var(--surface);
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

body.admin-app.page-admin-clients button:hover,
body.admin-app.page-admin-clients .actions button:hover{
    background: var(--surface);
    color: var(--primary-light);
    transform: translateY(-2px) scale(1.03);
}

body.admin-app.page-admin-clients button.danger{
    background: #bd3728e5;
}
body.admin-app.page-admin-clients button.danger:hover{
    background: var(--surface);
    color: #bd1a08;
}

body.admin-app.page-admin-clients .table-section{
    overflow-x: auto;
    margin-bottom: var(--spacing);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 0;
    min-width: 0;
}

body.admin-app.page-admin-clients table{
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}

body.admin-app.page-admin-clients th,
body.admin-app.page-admin-clients td{
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    white-space: nowrap;
}

body.admin-app.page-admin-clients th{
    background: var(--primary);
    color: var(--surface);
    font-weight: 500;
    text-align: left;
}

body.admin-app.page-admin-clients tr:nth-child(even){
    background: #f7fafd;
}

body.admin-app.page-admin-clients tr:last-child td{
    border-bottom: none;
}

body.admin-app.page-admin-clients input[type="text"],
body.admin-app.page-admin-clients input[type="email"],
body.admin-app.page-admin-clients input[type="number"],
body.admin-app.page-admin-clients textarea,
body.admin-app.page-admin-clients select{
    font-size: 1rem;
}

/* Liens des missions dans la table d'historique des envois */
body.admin-app.page-admin-clients .table-section a.mission-link{
    color: var(--primary-light);
    font-weight: 500;
    text-decoration: underline;
    transition: color 0.2s, text-decoration 0.2s;
    cursor: pointer;
    text-decoration: none;
}

body.admin-app.page-admin-clients .table-section a.mission-link:hover{
    color: var(--primary);
    text-decoration: none;
}

/* Pagination */
body.admin-app.page-admin-clients .pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 24px 0;
}

body.admin-app.page-admin-clients .pagination a,
body.admin-app.page-admin-clients .pagination span{
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1.5px solid var(--primary);
    background: var(--surface);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border 0.2s;
}

body.admin-app.page-admin-clients .pagination a:hover,
body.admin-app.page-admin-clients .pagination a.active,
body.admin-app.page-admin-clients .pagination span.current{
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Boutons icône pour actions (modifier/supprimer) */
body.admin-app.page-admin-clients .icon-btn{
    background: white;
    border: none;
    padding: 0;
    margin: 0 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    border-radius: 5px;
    outline: none;
}

body.admin-app.page-admin-clients .icon-btn:focus{
    box-shadow: 0 0 0 2px var(--primary-light, #3949ab);
}

body.admin-app.page-admin-clients .icon-btn.edit-btn:hover,
body.admin-app.page-admin-clients .icon-btn.edit-btn:focus{
    background: #eaf1fb;
}

body.admin-app.page-admin-clients .icon-btn.delete-btn:hover,
body.admin-app.page-admin-clients .icon-btn.delete-btn:focus{
    background: #ffeaea;
}

body.admin-app.page-admin-clients .icon-svg{
    width: 24px;
    height: 24px;
    vertical-align: middle;
    display: inline-block;
}

body.admin-app.page-admin-clients .icon-svg-red{
    filter: invert(21%) sepia(98%) saturate(7491%) hue-rotate(357deg) brightness(90%) contrast(120%);
}

@media (max-width: 1200px) {
    body.admin-app.page-admin-clients .manage-container{
        max-width: 100vw;
        padding-right: 0;
    }
    body.admin-app.page-admin-clients .container{
        max-width: 99vw;
        min-width: 0;
        width: 100vw;
    }
    body.admin-app.page-admin-clients .box,
body.admin-app.page-admin-clients .form-section,
body.admin-app.page-admin-clients .table-section{
        min-width: 0;
    }
}

@media (max-width: 900px) {
    body.admin-app.page-admin-clients .flex{ flex-direction: column; gap: 18px; }
    body.admin-app.page-admin-clients .container,
body.admin-app.page-admin-clients .box,
body.admin-app.page-admin-clients .table-section,
body.admin-app.page-admin-clients .form-section{
        padding: 12px 2vw;
        min-width: 0;
        max-width: 99vw;
        width: 100vw;
    }
    body.admin-app.page-admin-clients .manage-container{
        padding: 0 0 40px 0;
        margin-left: 0;
    }
    body.admin-app.page-admin-clients .box{
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    body.admin-app.page-admin-clients .container,
body.admin-app.page-admin-clients .box,
body.admin-app.page-admin-clients .table-section,
body.admin-app.page-admin-clients .form-section{
        padding: 8px 1vw;
        min-width: 0;
        max-width: 100vw;
        width: 100vw;
    }
    body.admin-app.page-admin-clients .box{
        margin-left: 0;
        margin-right: 0;
    }
}

body.admin-app.page-admin-clients ::-webkit-scrollbar{
    width: 8px;
    background: #e3eaf3;
}
body.admin-app.page-admin-clients ::-webkit-scrollbar-thumb{
    background: #b0bec5;
    border-radius: 8px;
}

body.admin-app.page-admin-clients {
    --primary: #005baa;
    --accent: #16a085;
    --bg: #0f1724;
    --muted: #9aa7bb;
    --white: #ffffff;
    --sidebar-width: 260px;
    font-family: Inter, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #1f2937;
    margin: 0;
}

        body.admin-app.page-admin-clients .container{ margin-bottom: 36px; }
        body.admin-app.page-admin-clients .form-title{
            font-size: 1.25rem;
            color: #005baa;
            font-weight: 600;
            margin-bottom: 18px;
            margin-top: 0;
            border-bottom: 2px solid #3498db;
            padding-bottom: 8px;
            background: #f7fafd;
            border-radius: 10px 10px 0 0;
            text-align: center;
        }
        body.admin-app.page-admin-clients .form-section{
            background: #f7fafd;
            border-radius: 10px;
            border: 1px solid #e1eeff;
            padding: 22px 18px;
            margin-bottom: 24px;
            margin-top: 0;
            box-shadow: 0 1px 4px rgba(44,62,80,0.03);
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        body.admin-app.page-admin-clients .form-section label{
            font-weight: bold;
            margin-bottom: 6px;
            display: block;
            color: #2c3e50;
        }
        body.admin-app.page-admin-clients .form-section input,
body.admin-app.page-admin-clients .form-section select,
body.admin-app.page-admin-clients .form-section textarea{
            margin-bottom: 14px;
            width: 100%;
            max-width: 320px;
            min-width: 80px;
            padding: 10px 14px;
            border-radius: 6px;
            border: 1px solid #b3c6e0;
            background: #f7fafd;
            text-align: center;
            font-size: 15px;
            box-sizing: border-box;
        }
        body.admin-app.page-admin-clients .form-section button{
            margin: 10px 5px;
            padding: 10px 20px;
            border-radius: 4px;
            border: none;
            background: #2c3e50;
            color: #fff;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s;
        }
        body.admin-app.page-admin-clients .form-section button:hover{
            background: #3498db;
        }
        body.admin-app.page-admin-clients .form-section .actions{
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        body.admin-app.page-admin-clients .section-title{
            font-size: 1.5rem;
            color: #2c3e50;
            font-weight: 700;
            margin-bottom: 24px;
            margin-top: 0;
            border-bottom: 2px solid #e1eeff;
            padding-bottom: 12px;
            background: #f7fafd;
            border-radius: 12px 12px 0 0;
            text-align: center;
        }
        body.admin-app.page-admin-clients .table-section{
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(44,62,80,0.07);
            padding: 18px 0;
            margin-bottom: 24px;
        }
        body.admin-app.page-admin-clients .box{
            background: #f7fafd;
            border-radius: 10px;
            border: 1px solid #e1eeff;
            padding: 22px 18px;
            margin-bottom: 36px;
            margin-top: 0;
            box-shadow: 0 1px 4px rgba(44,62,80,0.03);
        }
        body.admin-app.page-admin-clients .flex{ display: flex; gap: 40px; flex-wrap: wrap; }
        body.admin-app.page-admin-clients .flex > .box{ flex: 1 1 350px; min-width: 320px; }
        @media (max-width: 900px) {
            body.admin-app.page-admin-clients .flex{ flex-direction: column; gap: 18px; }
        }
        /* Correction pour la navbar : input et bouton sur la même ligne */
        body.admin-app.page-admin-clients .topnav-admin .nav-search input{
            width: auto !important;
            min-width: 0 !important;
            max-width: 150px !important;
            display: inline-flex !important;
        }
        body.admin-app.page-admin-clients .topnav-admin .nav-search{
            display: flex !important;
            align-items: center !important;
            flex-wrap: nowrap !important;
        }
    

/* ----- gestion_administrateur.php (page-admin-users) / style/styleadmin.css ----- */
body.admin-app.page-admin-users{
    --primary: #2c3e50;
    --primary-light: #3949ab;
    --accent: #e62222;
    --background: #f7f9fb;
    --surface: #fff;
    --border: #e3eaf3;
    --shadow: 0 2px 12px rgba(44,62,80,0.08);
    --radius: 14px;
    --spacing: 24px;
    --font-main: 'Segoe UI', Arial, sans-serif;
    --max-width: none;
}

.page-admin-users *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.admin-app.page-admin-users,
body.admin-app.page-admin-users{
    font-family: var(--font-main);
    background: var(--background);
    color: var(--primary);
    min-height: 100vh;
    width: 100vw;
}

body.admin-app.page-admin-users{
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    width: 100vw;
}

/* Conteneur principal */
body.admin-app.page-admin-users .admin-container{
    margin: 12px 0;          /* haut et bas seulement */
    padding: 28px 18px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    width: 100vw;
    max-width: 100vw;  
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Navbar */
body.admin-app.page-admin-users .navbar{
    background-color: var(--primary);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
}

body.admin-app.page-admin-users .navbar a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    margin: 0 10px;
    transition: color 0.3s ease;
}

body.admin-app.page-admin-users .navbar a:hover{
    color: var(--primary-light);
}

body.admin-app.page-admin-users .navbar .logout-link:hover{
    color: #ff0000;
}

/* Titres */
body.admin-app.page-admin-users h1{
    color: var(--primary);
    font-size: 2rem;
    margin-bottom: 28px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
    width: 100%;
    align-self: center;
}

body.admin-app.page-admin-users .section-title,
body.admin-app.page-admin-users .form-title,
body.admin-app.page-admin-users h2{
    font-size: 1.25rem;
    color: var(--primary-light);
    font-weight: 500;
    margin-bottom: 18px;
    margin-top: 0;
    border-bottom: 2px solid var(--border);
    padding-bottom: 8px;
    background: #f7fafd;
    border-radius: 10px 10px 0 0;
    text-align: left;
}

/* Barre de recherche */
body.admin-app.page-admin-users .search-form{
    display: flex;
    margin-bottom: 20px;
    gap: 10px;
}

body.admin-app.page-admin-users .search-form input{
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 1rem;
    color: var(--primary);
    background: #f5f7fa;
}

body.admin-app.page-admin-users .search-form button{
    background: var(--primary);
    color: #fff;
    height: 40px;
    padding: 0 18px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

body.admin-app.page-admin-users .search-form button:hover{
    background: var(--primary-light);
    transform: translateY(-2px) scale(1.03);
}

/* Formulaires */
body.admin-app.page-admin-users form,
body.admin-app.page-admin-users .form-section{
    max-width: 500px;
    width: 100%;
    margin: 0 auto var(--spacing);
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    min-width: 0;
}

body.admin-app.page-admin-users label{
    display: block;
    margin-bottom: 6px;
    color: var(--primary);
    font-weight: normal;
    font-size: 1rem;
}

body.admin-app.page-admin-users input,
body.admin-app.page-admin-users select,
body.admin-app.page-admin-users textarea{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #f5f7fa;
    font-size: 1rem;
    margin-bottom: 10px;
    transition: border 0.2s;
    text-align: center;
    box-sizing: border-box;
}

body.admin-app.page-admin-users input:focus,
body.admin-app.page-admin-users select:focus,
body.admin-app.page-admin-users textarea:focus{
    border: 1.5px solid var(--primary-light);
    outline: none;
    background: #fff;
}

body.admin-app.page-admin-users .actions{
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* Container pour les boutons d'action (supprimer, modifier emploi du temps, etc.) */
body.admin-app.page-admin-users .action-buttons{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

body.admin-app.page-admin-users button,
body.admin-app.page-admin-users .actions button{
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.admin-app.page-admin-users button:hover,
body.admin-app.page-admin-users .actions button:hover{
    background: var(--primary-light);
    transform: translateY(-2px) scale(1.03);
}

body.admin-app.page-admin-users button.danger{
    background: var(--accent);
}
body.admin-app.page-admin-users button.danger:hover{
    background: #c0392b;
}

/* Tableau */
body.admin-app.page-admin-users .table-section{
    overflow-x: auto;
    margin-bottom: var(--spacing);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 0;
    min-width: 0;
}

body.admin-app.page-admin-users table{
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}

body.admin-app.page-admin-users th,
body.admin-app.page-admin-users td{
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    white-space: nowrap;
}

body.admin-app.page-admin-users th{
    background: var(--primary);
    color: var(--surface);
    font-weight: 500;
    text-align: left;
}

body.admin-app.page-admin-users tr:nth-child(even){
    background: #f7fafd;
}

body.admin-app.page-admin-users tr:last-child td{
    border-bottom: none;
}

body.admin-app.page-admin-users input[type="text"],
body.admin-app.page-admin-users input[type="email"],
body.admin-app.page-admin-users input[type="number"],
body.admin-app.page-admin-users textarea,
body.admin-app.page-admin-users select{
    font-size: 1rem;
}

/* Bouton "modifier l'emploi du temps" */
body.admin-app.page-admin-users .edit-schedule-btn{
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(44,62,80,0.08);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
body.admin-app.page-admin-users .edit-schedule-btn:hover{
    background: var(--primary-light);
    transform: translateY(-2px) scale(1.03);
    color: #fff;
}

/* Pagination */
body.admin-app.page-admin-users .pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 24px 0;
}

body.admin-app.page-admin-users .pagination a,
body.admin-app.page-admin-users .pagination span{
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1.5px solid var(--primary);
    background: var(--surface);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border 0.2s;
}

body.admin-app.page-admin-users .pagination a:hover,
body.admin-app.page-admin-users .pagination a.active,
body.admin-app.page-admin-users .pagination span.current{
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Lien "Voir fiche" dans la liste des camions */
body.admin-app.page-admin-users a.voir-fiche{
    color: var(--primary-light);
    font-weight: 500;
    text-decoration: underline;
    transition: color 0.2s, text-decoration 0.2s;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 5px;
}

body.admin-app.page-admin-users a.voir-fiche:hover{
    color: var(--primary);
    background: #f0f4fa;
    text-decoration: none;
}

/* Bouton générique stylé */
body.admin-app.page-admin-users .btn,
body.admin-app.page-admin-users .button,
body.admin-app.page-admin-users a.btn,
body.admin-app.page-admin-users input[type="button"].btn,
body.admin-app.page-admin-users input[type="submit"].btn{
    background: var(--primary-light);
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 10px 26px;
    font-size: 1rem;
    font-weight: 600;
    margin: 8px 4px 8px 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(44,62,80,0.08);
    display: inline-block;
}

body.admin-app.page-admin-users .btn:hover,
body.admin-app.page-admin-users .button:hover,
body.admin-app.page-admin-users a.btn:hover,
body.admin-app.page-admin-users input[type="button"].btn:hover,
body.admin-app.page-admin-users input[type="submit"].btn:hover{
    background: var(--primary);
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(44,62,80,0.12);
    text-decoration: none;
}

/* Boutons icône pour actions (supprimer chauffeur) */
body.admin-app.page-admin-users .icon-btn{
    background: none;
    border: none;
    padding: 0;
    margin: 0 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    border-radius: 5px;
    outline: none;
}

body.admin-app.page-admin-users .icon-btn:focus{
    box-shadow: 0 0 0 2px var(--primary-light, #3949ab);
}

body.admin-app.page-admin-users .icon-btn.delete-btn:hover,
body.admin-app.page-admin-users .icon-btn.delete-btn:focus{
    background: #ffeaea;
}

/* Bouton voir/cacher mot de passe */
body.admin-app.page-admin-users .icon-btn.view-btn{
    background: none;
    border: none;
    padding: 0 2px;
    margin: 0 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    outline: none;
    transition: background 0.15s;
}

body.admin-app.page-admin-users .icon-btn.view-btn:hover,
body.admin-app.page-admin-users .icon-btn.view-btn:focus{
    background: #f3f6fa;
}

body.admin-app.page-admin-users .icon-svg-view{
    width: 22px;
    height: 22px;
    vertical-align: middle;
    display: inline-block;
    filter: invert(18%) sepia(8%) saturate(2097%) hue-rotate(170deg) brightness(97%) contrast(90%);
    /* #2c3e50 */
}

body.admin-app.page-admin-users .icon-svg{
    width: 24px;
    height: 24px;
    vertical-align: middle;
    display: inline-block;
}

body.admin-app.page-admin-users .icon-svg-red{
    filter: invert(21%) sepia(98%) saturate(7491%) hue-rotate(357deg) brightness(90%) contrast(120%);
}

/* Responsive */
@media (max-width: 1200px) {
    body.admin-app.page-admin-users .admin-container{
        max-width: 99vw;
        min-width: 0;
        width: 100vw;
    }
    body.admin-app.page-admin-users .box,
body.admin-app.page-admin-users .form-section,
body.admin-app.page-admin-users .table-section{
        min-width: 0;
    }
}

@media (max-width: 900px) {
    body.admin-app.page-admin-users .admin-container,
body.admin-app.page-admin-users .box,
body.admin-app.page-admin-users .table-section,
body.admin-app.page-admin-users .form-section{
        padding: 12px 2vw;
        min-width: 0;
        max-width: 99vw;
        width: 100vw;
    }
    body.admin-app.page-admin-users .admin-container{
        gap: 18px;
    }
    body.admin-app.page-admin-users .box{
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    body.admin-app.page-admin-users .admin-container,
body.admin-app.page-admin-users .box,
body.admin-app.page-admin-users .table-section,
body.admin-app.page-admin-users .form-section{
        padding: 8px 1vw;
        min-width: 0;
        max-width: 100vw;
        width: 100vw;
    }
    body.admin-app.page-admin-users .box{
        margin-left: 0;
        margin-right: 0;
    }
}

body.admin-app.page-admin-users ::-webkit-scrollbar{
    width: 8px;
    background: var(--border);
}
body.admin-app.page-admin-users ::-webkit-scrollbar-thumb{
    background: #b0bec5;
    border-radius: 8px;
}


body.admin-app.page-admin-users {
    --primary: #005baa;
    --accent: #16a085;
    --bg: #0f1724;
    --muted: #9aa7bb;
    --white: #ffffff;
    --sidebar-width: 260px;
    font-family: Inter, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #1f2937;
    margin: 0;
}


/* ----- inscription_ad.php (page-admin-registration) ----- */
body.admin-app.page-admin-registration{
    --primary: #2c3e50;
    --primary-light: #3949ab;
    --accent: #e67e22;
    --background: #f7f9fb;
    --surface: #fff;
    --border: #e3eaf3;
    --shadow: 0 2px 12px rgba(44,62,80,0.08);
    --radius: 14px;
    --spacing: 24px;
    --font-main: 'Segoe UI', Arial, sans-serif;
}

.page-admin-registration *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.admin-app.page-admin-registration{
    font-family: var(--font-main);
    background: var(--background);
    color: var(--primary);
    min-height: 100vh;
    width: 100vw;
    /* Supprime le centrage direct ici */
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

/* Ajout : wrapper pour centrer le formulaire */
body.admin-app.page-admin-registration .main-content{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Prend en compte la navbar fixe */
    padding-top: 90px;
}

body.admin-app.page-admin-registration .navbar{
    background-color: var(--primary);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

body.admin-app.page-admin-registration .navbar a{
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    margin: 0 10px;
    transition: color 0.3s ease;
}

body.admin-app.page-admin-registration .navbar a:hover{
    color: var(--primary-light);
}

body.admin-app.page-admin-registration .navbar .logout-link:hover{
    color: #ff0000;
}

body.admin-app.page-admin-registration .form-container{
    background: var(--surface);
    padding: var(--spacing);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 400px;
    max-width: 95vw;
    text-align: center;
    /* margin-top: 90px;  <-- Supprimé, géré par .main-content */
    margin-bottom: 30px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.admin-app.page-admin-registration h1{
    color: var(--primary);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

body.admin-app.page-admin-registration .admin-notice{
    color: #c0392b;
    font-size: 1em;
    margin-bottom: 10px;
    font-weight: 500;
}

body.admin-app.page-admin-registration label{
    display: block;
    margin-bottom: 6px;
    color: var(--primary);
    font-weight: 500;
    text-align: left;
}

body.admin-app.page-admin-registration input{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #f5f7fa;
    color: var(--primary);
    font-size: 1rem;
    margin-bottom: 10px;
    transition: border 0.2s, background 0.2s;
    box-sizing: border-box;
    text-align: center;
}

body.admin-app.page-admin-registration input:focus{
    border: 1.5px solid var(--primary-light);
    outline: none;
    background: #fff;
}

body.admin-app.page-admin-registration button{
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    margin-top: 8px;
}

body.admin-app.page-admin-registration button:hover{
    background: var(--primary-light);
    transform: translateY(-2px) scale(1.03);
}

body.admin-app.page-admin-registration .success-message{
    color: #2e7d32;
    font-weight: bold;
    background: #e8f5e9;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
}

body.admin-app.page-admin-registration .error-message{
    color: #c0392b;
    font-weight: bold;
    background: #ffebee;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    body.admin-app.page-admin-registration .navbar{
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    body.admin-app.page-admin-registration .navbar a{
        font-size: 14px;
        margin: 5px 0;
    }

    body.admin-app.page-admin-registration .main-content{
        padding-top: 70px;
    }

    body.admin-app.page-admin-registration .form-container{
        width: 95vw;
        padding: 18px;
        /* margin-top: 70px; <-- Supprimé */
    }

    body.admin-app.page-admin-registration h1{
        font-size: 22px;
    }

    body.admin-app.page-admin-registration label{
        font-size: 14px;
    }

    body.admin-app.page-admin-registration input{
        font-size: 14px;
        padding: 8px;
    }

    body.admin-app.page-admin-registration button{
        font-size: 14px;
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
    body.admin-app.page-admin-registration .navbar{
        flex-direction: column;
        align-items: flex-start;
        padding: 8px;
    }

    body.admin-app.page-admin-registration .navbar a{
        font-size: 12px;
        padding: 8px;
    }

    body.admin-app.page-admin-registration .main-content{
        padding-top: 90px;
    }

    body.admin-app.page-admin-registration .form-container{
        width: 100vw;
        padding: 10px;
        /* margin-top: 90px; <-- Supprimé */
    }

    body.admin-app.page-admin-registration h1{
        font-size: 18px;
    }

    body.admin-app.page-admin-registration label{
        font-size: 12px;
    }

    body.admin-app.page-admin-registration input{
        font-size: 12px;
        padding: 6px;
    }

    body.admin-app.page-admin-registration button{
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* Scrollbar style */
body.admin-app.page-admin-registration ::-webkit-scrollbar{
    width: 8px;
    background: var(--border);
}
body.admin-app.page-admin-registration ::-webkit-scrollbar-thumb{
    background: #b0bec5;
    border-radius: 8px;
}
body.admin-app.page-admin-registration {
    --primary: #005baa;
    --accent: #16a085;
    --bg: #0f1724;
    --muted: #9aa7bb;
    --white: #ffffff;
    --sidebar-width: 260px;
    font-family: Inter, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #1f2937;
    margin: 0;
}

/* ----- edit_schedulex.php (page-admin-planning) / style/styleedt.css ----- */
/* Reset minimal */
.page-admin-planning *{box-sizing:border-box;margin:0;padding:0;font-family:Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
body.admin-app.page-admin-planning{
  --bg:#f6fafc;--card:#ffffff;--muted:#667085;
  --primary:#0b5ed7;--accent:#16a085;--warning:#e67e22;
  --radius:8px;--gap:14px;
  /* ajout variables manquantes */
  --surface:#ffffff; --border:#e6eef6; --spacing:14px;
  --shadow:0 4px 14px rgba(10,20,30,0.03);
  --primary-light:#4f8ef5;
  --field-border:#1976d2;  /* bleu */
  --field-focus:#1976d2;   /* bleu au focus */
  --field-shadow:rgba(25,118,210,0.18); /* halo bleu doux */
}

/* Page layout */
body.admin-app.page-admin-planning .admin-container{max-width:1400px;margin:28px auto;padding:18px;gap:18px}
body.admin-app.page-admin-planning .page-header{margin-bottom:14px}
body.admin-app.page-admin-planning .page-header h1{font-size:1.6rem;color:#0f1724;margin-bottom:6px}
body.admin-app.page-admin-planning .alert{padding:10px;border-radius:8px;margin-top:8px}
body.admin-app.page-admin-planning .alert.success{background:#e6ffed;color:#0b5e3a}
body.admin-app.page-admin-planning .alert.error{background:#ffe6e6;color:#7a0b0b}

/* layout */
body.admin-app.page-admin-planning .layout{display:flex;gap:20px;align-items:flex-start}
body.admin-app.page-admin-planning .panel{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:0 6px 20px rgba(13,38,59,0.04)}
body.admin-app.page-admin-planning .panel--aside{width:300px;min-width:220px}
body.admin-app.page-admin-planning .panel--main{flex:1}

/* Cards & Headers */
body.admin-app.page-admin-planning .card{background:var(--card);border-radius:10px;padding:14px;margin-bottom:16px;box-shadow:0 4px 14px rgba(10,20,30,0.03)}
body.admin-app.page-admin-planning .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
body.admin-app.page-admin-planning .card-header h2{margin:0 0 8px;font-size:1.15rem;color:#06283D}
body.admin-app.page-admin-planning .small{font-size:0.9rem;color:var(--muted)}

/* Forms */
body.admin-app.page-admin-planning .form-compact .select-full{width:100%;padding:8px;border-radius:8px;border:1px solid #e6eef6;background:#fff}
body.admin-app.page-admin-planning .form-row{display:flex;gap:8px;margin-bottom:10px}
body.admin-app.page-admin-planning .grid-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.admin-app.page-admin-planning .grid-form .form-group{display:flex;flex-direction:column}
body.admin-app.page-admin-planning .grid-form .form-actions{grid-column:1 / -1;display:flex;gap:8px;align-items:center}
body.admin-app.page-admin-planning .input{padding:10px;border-radius:8px;border:1px solid #e6eef6;background:#fbfeff}
body.admin-app.page-admin-planning .label-inline{font-size:0.9rem;margin-right:8px}
body.admin-app.page-admin-planning .form-inline{display:flex;gap:8px;align-items:center}
body.admin-app.page-admin-planning .form-inline .input{padding:8px}

/* Buttons */
body.admin-app.page-admin-planning .btn{padding:8px 12px;border-radius:8px;border:0;cursor:pointer;font-weight:600;white-space: nowrap}
body.admin-app.page-admin-planning .btn.primary{background:var(--primary);color:#fff;border-radius:8px}
body.admin-app.page-admin-planning .btn.ghost{background:transparent;border:1px solid #e6eef6;color:#0f1724}
body.admin-app.page-admin-planning .btn[disabled]{opacity:0.6;cursor:not-allowed}
body.admin-app.page-admin-planning .btn.danger{background:#d9534f;color:#fff}
body.admin-app.page-admin-planning .btn.danger:hover{background:#c0392b}

/* Table */
body.admin-app.page-admin-planning .table-wrap{overflow:auto;border-radius:8px;border:1px solid #f1f5f9;padding:6px;background:#fff}
body.admin-app.page-admin-planning .table-compact{width:100%;border-collapse:collapse;font-size:0.95rem}
body.admin-app.page-admin-planning .table-compact thead th{background:#f7fbff;padding:10px;text-align:left;color:#0f1724;font-weight:600;position:sticky;top:0}
body.admin-app.page-admin-planning .table-compact th,
body.admin-app.page-admin-planning .table-compact td{padding:10px;border-bottom:1px solid #f1f5f9}
body.admin-app.page-admin-planning .table-compact tbody tr:hover{background:rgba(11,94,215,0.04)}
body.admin-app.page-admin-planning .align-right{text-align:right}
body.admin-app.page-admin-planning .nowrap{white-space:nowrap}

/* Pagination */
body.admin-app.page-admin-planning .pagination{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
body.admin-app.page-admin-planning .page-link{padding:8px 10px;border-radius:6px;border:1px solid transparent;color:var(--muted)}
body.admin-app.page-admin-planning .page-link.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Aside helpers */
body.admin-app.page-admin-planning .divider{height:1px;background:#eef2f7;margin:12px 0;border-radius:2px}

/* Responsive */
@media (max-width: 980px) {
  body.admin-app.page-admin-planning .layout{flex-direction:column}
  body.admin-app.page-admin-planning .panel--aside{width:100%}
  body.admin-app.page-admin-planning .grid-form{grid-template-columns:1fr}
  body.admin-app.page-admin-planning .panel--main{order:2}
}

/* Utility */
body.admin-app.page-admin-planning .muted{color:var(--muted);font-size:0.92rem}
body.admin-app.page-admin-planning .small{font-size:0.86rem}
body.admin-app.page-admin-planning .inline{display:inline-block;margin:0}

/* Formulaires */
body.admin-app.page-admin-planning .form-section{
    max-width: 500px;
    width: 100%;
    margin: 0 auto var(--spacing);
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    min-width: 0;
}

body.admin-app.page-admin-planning label{
    display: block;
    margin-bottom: 6px;
    color: var(--primary);
    font-weight: normal;
    font-size: 1rem;
}

body.admin-app.page-admin-planning input,
body.admin-app.page-admin-planning select,
body.admin-app.page-admin-planning textarea{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #f5f7fa;
    font-size: 1rem;
    margin-bottom: 10px;
    transition: border 0.2s;
    text-align: center;
    box-sizing: border-box;
}

body.admin-app.page-admin-planning input:focus,
body.admin-app.page-admin-planning select:focus,
body.admin-app.page-admin-planning textarea:focus{
    border: 1.5px solid var(--primary-light);
    outline: none;
    background: #fff;
}

/* Champs plus visibles (bordures bleu marine) */
body.admin-app.page-admin-planning .input,
body.admin-app.page-admin-planning input[type="text"],
body.admin-app.page-admin-planning input[type="email"],
body.admin-app.page-admin-planning input[type="number"],
body.admin-app.page-admin-planning input[type="date"],
body.admin-app.page-admin-planning input[type="password"],
body.admin-app.page-admin-planning input[type="search"],
body.admin-app.page-admin-planning textarea,
body.admin-app.page-admin-planning select{
  border: 2px solid var(--field-border);
  background: #fff;
}

/* Sélecteurs pleine largeur */
body.admin-app.page-admin-planning .form-compact .select-full{
  border: 2px solid var(--field-border);
}

/* Focus cohérent et lisible */
body.admin-app.page-admin-planning .input:focus,
body.admin-app.page-admin-planning input:focus,
body.admin-app.page-admin-planning select:focus,
body.admin-app.page-admin-planning textarea:focus{
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px var(--field-shadow);
  outline: none;
  background: #fff;
}

body.admin-app.page-admin-planning .actions{
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

body.admin-app.page-admin-planning button,
body.admin-app.page-admin-planning .actions button{
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

body.admin-app.page-admin-planning button:hover,
body.admin-app.page-admin-planning .actions button:hover{
    /* état stable au survol */
    background: var(--primary);
    color: #fff;
    transform: none;
}
/* Assure un hover cohérent pour .btn/.btn.primary (ex: éléments non <button>) */
body.admin-app.page-admin-planning .btn:hover,
body.admin-app.page-admin-planning .btn.primary:hover{
    background: var(--primary);
    color: #fff;
}
/* Garde les boutons "ghost" transparents au hover */
body.admin-app.page-admin-planning .btn.ghost:hover{
    background: transparent;
    border-color: #e6eef6;
    color: #0f1724;
}

body.admin-app.page-admin-planning button.danger{
    background: var(--accent);
}
body.admin-app.page-admin-planning button.danger:hover{
    background: #c0392b;
}

/* Table section */
body.admin-app.page-admin-planning .table-section{
    overflow-x: auto;
    margin-bottom: var(--spacing);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 0;
    min-width: 0;
}
body.admin-app.page-admin-planning .table-section table{
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}
body.admin-app.page-admin-planning .table-section th,
body.admin-app.page-admin-planning .table-section td{
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    white-space: nowrap;
}
body.admin-app.page-admin-planning .table-section th{
    background: var(--primary);
    color: var(--surface);
    font-weight: 500;
    text-align: left;
}
body.admin-app.page-admin-planning .table-section tr:nth-child(even){ background: #f7fafd; }
body.admin-app.page-admin-planning table{
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}

body.admin-app.page-admin-planning th,
body.admin-app.page-admin-planning td{
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    white-space: nowrap;
}

body.admin-app.page-admin-planning th{
    background: var(--primary);
    color: var(--surface);
    font-weight: 500;
    text-align: left;
}

body.admin-app.page-admin-planning tr:nth-child(even){
    background: #f7fafd;
}

body.admin-app.page-admin-planning tr:last-child td{
    border-bottom: none;
}

body.admin-app.page-admin-planning input[type="text"],
body.admin-app.page-admin-planning input[type="email"],
body.admin-app.page-admin-planning input[type="number"],
body.admin-app.page-admin-planning textarea,
body.admin-app.page-admin-planning select{
    font-size: 1rem;
}

/* Bouton replier/déplier le formulaire d'ajout de mission */
body.admin-app.page-admin-planning #toggle-add-mission{
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(44,62,80,0.08);
    display: inline-block;
}
body.admin-app.page-admin-planning #toggle-add-mission:hover{
    color: #fff;
    transform: none;
}

/* Améliorations frontend page planning */
body.admin-app.page-admin-planning .controls{display:flex;gap:8px;align-items:center;margin-top:8px}
body.admin-app.page-admin-planning .controls .btn+.btn{margin-left:8px}
body.admin-app.page-admin-planning .input:focus,
body.admin-app.page-admin-planning select.input:focus{outline:2px solid var(--primary)}
body.admin-app.page-admin-planning .table-compact tbody tr:hover td{background:rgba(11,94,215,0.04)}

/* Responsive */
@media (max-width: 1200px) {
    body.admin-app.page-admin-planning .container{
        max-width: 99vw;
        min-width: 0;
        width: 100vw;
    }
    body.admin-app.page-admin-planning .box,
body.admin-app.page-admin-planning .form-section,
body.admin-app.page-admin-planning .table-section{
        min-width: 0;
    }
}

@media (max-width: 900px) {
    body.admin-app.page-admin-planning .container,
body.admin-app.page-admin-planning .box,
body.admin-app.page-admin-planning .table-section,
body.admin-app.page-admin-planning .form-section{
        padding: 12px 2vw;
        min-width: 0;
        max-width: 99vw;
        width: 100vw;
    }
    body.admin-app.page-admin-planning .container{
        gap: 18px;
    }
    body.admin-app.page-admin-planning .box{
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    body.admin-app.page-admin-planning .container,
body.admin-app.page-admin-planning .box,
body.admin-app.page-admin-planning .table-section,
body.admin-app.page-admin-planning .form-section{
        padding: 8px 1vw;
        min-width: 0;
        max-width: 100vw;
        width: 100vw;
    }
    body.admin-app.page-admin-planning .box{
        margin-left: 0;
        margin-right: 0;
    }
}

body.admin-app.page-admin-planning ::-webkit-scrollbar{
    width: 8px;
    background: var(--border);
}
body.admin-app.page-admin-planning ::-webkit-scrollbar-thumb{
    background: #b0bec5;
    border-radius: 8px;
}

/* Césure et lisibilité des textes multi-lignes (ex: Instruction) */
body.admin-app.page-admin-planning .details-text{word-break:break-word; overflow-wrap:anywhere; white-space:normal}

/* Tables responsive (stacking) */
@media (max-width: 720px) {
  body.admin-app.page-admin-planning .table-compact{font-size:0.95rem}
  body.admin-app.page-admin-planning .table-compact thead{display:none}
  body.admin-app.page-admin-planning .table-compact tbody tr{
    display:block;
    border:1px solid #eef2f7;
    border-radius:10px;
    padding:6px 8px;
    margin-bottom:12px;
    background:#fff;
  }
  body.admin-app.page-admin-planning .table-compact tbody tr:hover{background:#fff}
  body.admin-app.page-admin-planning .table-compact td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px dashed #eef2f7;
    padding:10px 6px;
    white-space:normal;
  }
  body.admin-app.page-admin-planning .table-compact tbody tr td:last-child{border-bottom:none}
  body.admin-app.page-admin-planning .table-compact td::before{
    content:attr(data-label);
    font-weight:600;
    color:#0f1724;
    margin-right:10px;
    flex:0 0 42%;
    max-width:180px;
  }
  body.admin-app.page-admin-planning .table-compact td[data-label="Actions"]{
    flex-wrap:wrap;
    gap:8px;
  }
  body.admin-app.page-admin-planning .table-compact td[data-label="Actions"] .btn{
    margin:0;
  }
  /* Filtre + actions: meilleure utilisation de l'espace */
  body.admin-app.page-admin-planning .pagination{justify-content:center}
  body.admin-app.page-admin-planning .admin-container{padding:12px}
}

/* Densification des listes (desktop) */
@media (min-width: 721px) {
  body.admin-app.page-admin-planning .table-compact{
    table-layout:fixed;
  }
  body.admin-app.page-admin-planning .table-compact th,
body.admin-app.page-admin-planning .table-compact td{
    padding:6px 8px;
    white-space:normal;
    vertical-align:top;
    word-break:break-word;
  }

  /* Répartition colonnes corrigée (8 colonnes) */
  body.admin-app.page-admin-planning .table-compact th:nth-child(1),
body.admin-app.page-admin-planning .table-compact td:nth-child(1){width:8%;}   /* Date */
  body.admin-app.page-admin-planning .table-compact th:nth-child(2),
body.admin-app.page-admin-planning .table-compact td:nth-child(2){width:14%;}  /* Chauffeur */
  body.admin-app.page-admin-planning .table-compact th:nth-child(3),
body.admin-app.page-admin-planning .table-compact td:nth-child(3){width:12%;}  /* Camion */
  body.admin-app.page-admin-planning .table-compact th:nth-child(4),
body.admin-app.page-admin-planning .table-compact td:nth-child(4){width:22%;}  /* Chantier */
  body.admin-app.page-admin-planning .table-compact th:nth-child(5),
body.admin-app.page-admin-planning .table-compact td:nth-child(5){width:26%;}  /* Instruction */
  body.admin-app.page-admin-planning .table-compact th:nth-child(6),
body.admin-app.page-admin-planning .table-compact td:nth-child(6){width:4%; text-align:center;} /* Bon */
  body.admin-app.page-admin-planning .table-compact th:nth-child(7),
body.admin-app.page-admin-planning .table-compact td:nth-child(7){width:6%;}   /* Forfait journalier */
  body.admin-app.page-admin-planning .table-compact th:nth-child(8),
body.admin-app.page-admin-planning .table-compact td:nth-child(8){width:8%;}   /* Actions */

  /* Wrap uniquement sur Chantier + Instruction */
  body.admin-app.page-admin-planning .table-compact td:nth-child(4),
body.admin-app.page-admin-planning .table-compact td:nth-child(5){white-space:normal;word-break:break-word;}

  /* Pas de wrap sur les colonnes courtes */
  body.admin-app.page-admin-planning .table-compact td:nth-child(1),
body.admin-app.page-admin-planning .table-compact td:nth-child(2),
body.admin-app.page-admin-planning .table-compact td:nth-child(3),
body.admin-app.page-admin-planning .table-compact td:nth-child(6),
body.admin-app.page-admin-planning .table-compact td:nth-child(7),
body.admin-app.page-admin-planning .table-compact td:nth-child(8){white-space:nowrap;}

  /* Actions inline */
  body.admin-app.page-admin-planning .table-compact td[data-label="Actions"]{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
  }
  body.admin-app.page-admin-planning .table-compact td[data-label="Actions"] .btn{
    margin:0;
  }
}

/* Grilles et formulaires mieux adaptés sur petits écrans */
@media (max-width: 980px) {
  body.admin-app.page-admin-planning .grid-form{grid-template-columns:1fr}
  body.admin-app.page-admin-planning .form-row{flex-direction:column}
  body.admin-app.page-admin-planning .form-inline{flex-wrap:wrap}
}

/* utilitaires grilles formulaires (remplace les inline styles du HTML) */
body.admin-app.page-admin-planning .grid-form--fluid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
body.admin-app.page-admin-planning .filters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:14px 0}

/* Forcer la bordure bleu marine en permanence sur tous les champs */
body.admin-app.page-admin-planning :where(.input,
body.admin-app.page-admin-planning input,
body.admin-app.page-admin-planning select,
body.admin-app.page-admin-planning textarea){
  border: 2px solid var(--field-border) !important;
  background: #fff !important;
}

/* Désactiver halo/outline et garder la même bordure au focus */
body.admin-app.page-admin-planning :where(.input,
body.admin-app.page-admin-planning input,
body.admin-app.page-admin-planning select,
body.admin-app.page-admin-planning textarea):focus{
  border-color: var(--field-border) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Conserver la même couleur au survol */
body.admin-app.page-admin-planning :where(.input,
body.admin-app.page-admin-planning input,
body.admin-app.page-admin-planning select,
body.admin-app.page-admin-planning textarea):hover{
  border-color: var(--field-border) !important;
}

/* Etats disabled/readonly: même bordure, légère atténuation */
body.admin-app.page-admin-planning :where(.input,
body.admin-app.page-admin-planning input,
body.admin-app.page-admin-planning select,
body.admin-app.page-admin-planning textarea)[disabled],
body.admin-app.page-admin-planning :where(input[readonly],
body.admin-app.page-admin-planning textarea[readonly]){
  border-color: var(--field-border) !important;
  opacity: 0.9;
}

        /* on conserve seulement ce qui est spécifique à la page */
        body.admin-app.page-admin-planning hr.divider-blue{border:0;height:3px;background:#1976d2;margin:18px 0;border-radius:2px;}
        /* [AJOUT] Pastilles bon rempli */
        body.admin-app.page-admin-planning .bon-indicator{display:inline-block;width:14px;height:14px;border-radius:50%;background:#e74c3c;vertical-align:middle;box-shadow:0 0 0 1px #c33 inset;}
        body.admin-app.page-admin-planning .bon-indicator.ok{background:#27ae60;box-shadow:0 0 0 1px #1d7d46 inset;}
        body.admin-app.page-admin-planning .legend-bon{font-size:12px;color:#555;margin:6px 0 10px;display:flex;align-items:center;gap:14px;}
        body.admin-app.page-admin-planning .legend-bon span{display:flex;align-items:center;gap:4px;}

        /* === Override CORRECTION colonnes tableau planning (remplace l'essai précédent) === */
        body.admin-app.page-admin-planning .table-compact{table-layout:fixed;}
        body.admin-app.page-admin-planning .table-compact th,
body.admin-app.page-admin-planning .table-compact td{
            padding:4px 6px;
            font-size:13px;
            line-height:1.25;
        }
        body.admin-app.page-admin-planning .table-compact th{white-space:nowrap;}

        /* Reset anciennes largeurs 1% */
        body.admin-app.page-admin-planning .table-compact th,
body.admin-app.page-admin-planning .table-compact td{width:auto;}

        /* Autoriser le retour ligne par défaut */
        body.admin-app.page-admin-planning .table-compact td{white-space:normal;word-break:break-word;}

        /* Colonnes qui NE doivent PAS wrap */
        body.admin-app.page-admin-planning .table-compact td:nth-child(1),
body.admin-app.page-admin-planning .table-compact td:nth-child(2),
body.admin-app.page-admin-planning .table-compact td:nth-child(3),
body.admin-app.page-admin-planning .table-compact td:nth-child(6),
body.admin-app.page-admin-planning .table-compact td:nth-child(7),
body.admin-app.page-admin-planning .table-compact td:nth-child(8){white-space:nowrap;}

        /* Largeurs équilibrées (8 colonnes) */
        body.admin-app.page-admin-planning .table-compact th:nth-child(1),
body.admin-app.page-admin-planning .table-compact td:nth-child(1){width:8%;}   /* Date */
        body.admin-app.page-admin-planning .table-compact th:nth-child(2),
body.admin-app.page-admin-planning .table-compact td:nth-child(2){width:14%;}  /* Chauffeur */
        body.admin-app.page-admin-planning .table-compact th:nth-child(3),
body.admin-app.page-admin-planning .table-compact td:nth-child(3){width:12%;}  /* Camion */
        body.admin-app.page-admin-planning .table-compact th:nth-child(4),
body.admin-app.page-admin-planning .table-compact td:nth-child(4){width:22%;}  /* Chantier */
        body.admin-app.page-admin-planning .table-compact th:nth-child(5),
body.admin-app.page-admin-planning .table-compact td:nth-child(5){width:26%;}  /* Instruction */
        body.admin-app.page-admin-planning .table-compact th:nth-child(6),
body.admin-app.page-admin-planning .table-compact td:nth-child(6){width:4%; text-align:center;} /* Bon */
        body.admin-app.page-admin-planning .table-compact th:nth-child(7),
body.admin-app.page-admin-planning .table-compact td:nth-child(7){width:6%;}   /* Forfait */
        body.admin-app.page-admin-planning .table-compact th:nth-child(8),
body.admin-app.page-admin-planning .table-compact td:nth-child(8){width:8%;}   /* Actions */

        body.admin-app.page-admin-planning .table-compact .btn{padding:4px 8px;font-size:12px;}
    

/* ----- bons_modification.php (page-admin-mission-edit) ----- */

        .page-admin-mission-edit *{ margin: 0; padding: 0; box-sizing: border-box; }
        
        body.admin-app.page-admin-mission-edit{
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            background: #f8fafc;
            color: #334155;
            line-height: 1.6;
        }

        body.admin-app.page-admin-mission-edit .container{
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        body.admin-app.page-admin-mission-edit .page-header{
            background: white;
            padding: 24px;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            margin-bottom: 24px;
        }

        body.admin-app.page-admin-mission-edit .page-title{
            font-size: 28px;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 8px;
        }

        body.admin-app.page-admin-mission-edit .page-subtitle{
            color: #64748b;
            font-size: 16px;
        }

        body.admin-app.page-admin-mission-edit .grid{
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 24px;
            align-items: start;
        }

        body.admin-app.page-admin-mission-edit .card{
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        body.admin-app.page-admin-mission-edit .card-header{
            padding: 20px 24px;
            border-bottom: 1px solid #e2e8f0;
            background: #f8fafc;
        }

        body.admin-app.page-admin-mission-edit .card-title{
            font-size: 18px;
            font-weight: 600;
            color: #0f172a;
        }

        body.admin-app.page-admin-mission-edit .card-body{
            padding: 24px;
        }

        body.admin-app.page-admin-mission-edit .missions-list{
            max-height: 600px;
            overflow-y: auto;
        }

        body.admin-app.page-admin-mission-edit .mission-item{
            padding: 16px;
            border-bottom: 1px solid #f1f5f9;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            color: inherit;
            display: block;
        }

        body.admin-app.page-admin-mission-edit .mission-item:hover{
            background: #f8fafc;
        }

        body.admin-app.page-admin-mission-edit .mission-item.active{
            background: #dbeafe;
            border-left: 4px solid #3b82f6;
        }

        body.admin-app.page-admin-mission-edit .mission-number{
            font-weight: 600;
            color: #0f172a;
            font-size: 16px;
        }

        body.admin-app.page-admin-mission-edit .mission-meta{
            font-size: 14px;
            color: #64748b;
            margin-top: 4px;
        }

        body.admin-app.page-admin-mission-edit .mission-status{
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            margin-top: 8px;
            background: #e0f2fe;
            color: #0277bd;
        }

        body.admin-app.page-admin-mission-edit .form-grid{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        body.admin-app.page-admin-mission-edit .form-group{
            display: flex;
            flex-direction: column;
        }

        body.admin-app.page-admin-mission-edit .form-group.full-width{
            grid-column: 1 / -1;
        }

        body.admin-app.page-admin-mission-edit .form-label{
            font-weight: 500;
            margin-bottom: 6px;
            color: #374151;
        }

        body.admin-app.page-admin-mission-edit .form-input,
body.admin-app.page-admin-mission-edit .form-select,
body.admin-app.page-admin-mission-edit .form-textarea{
            padding: 12px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.2s;
        }

        body.admin-app.page-admin-mission-edit .form-input:focus,
body.admin-app.page-admin-mission-edit .form-select:focus,
body.admin-app.page-admin-mission-edit .form-textarea:focus{
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        body.admin-app.page-admin-mission-edit .form-textarea{
            resize: vertical;
            min-height: 80px;
        }

        body.admin-app.page-admin-mission-edit .btn{
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        body.admin-app.page-admin-mission-edit .btn-primary{
            background: #3b82f6;
            color: white;
        }

        body.admin-app.page-admin-mission-edit .btn-primary:hover{
            background: #2563eb;
        }

        body.admin-app.page-admin-mission-edit .btn-secondary{
            background: #6b7280;
            color: white;
        }

        body.admin-app.page-admin-mission-edit .btn-secondary:hover{
            background: #4b5563;
        }

        body.admin-app.page-admin-mission-edit .alert{
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        body.admin-app.page-admin-mission-edit .alert-success{
            background: #d1fae5;
            border: 1px solid #a7f3d0;
            color: #166534;
        }

        body.admin-app.page-admin-mission-edit .alert-error{
            background: #fee2e2;
            border: 1px solid #fca5a5;
            color: #991b1b;
        }

        body.admin-app.page-admin-mission-edit .empty-state{
            text-align: center;
            padding: 40px;
            color: #64748b;
        }

        body.admin-app.page-admin-mission-edit .badge{
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        body.admin-app.page-admin-mission-edit .badge-oui{
            background: #d1fae5;
            color: #166534;
        }

        body.admin-app.page-admin-mission-edit .badge-non{
            background: #fee2e2;
            color: #991b1b;
        }

        @media (max-width: 768px) {
            body.admin-app.page-admin-mission-edit .grid{
                grid-template-columns: 1fr;
            }
            
            body.admin-app.page-admin-mission-edit .form-grid{
                grid-template-columns: 1fr;
            }
        }
    

/* ----- envoi_bons.php (page-admin-envoi) — styles inline migrés ----- */

        body.admin-app.page-admin-envoi{
            --primary: #2c3e50;
            --primary-dark: #1a252f;
            --accent: #3498db;
            --accent-dark: #2980b9;
            --success: #27ae60;
            --warning: #f39c12;
            --danger: #e74c3c;
            --bg: #f8f9fa;
            --surface: #ffffff;
            --border: #dee2e6;
            --text: #2c3e50;
            --text-muted: #6c757d;
            --shadow: 0 2px 8px rgba(0,0,0,0.08);
            --shadow-lg: 0 4px 20px rgba(0,0,0,0.12);
            --radius: 12px;
        }

        .page-admin-envoi *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body.admin-app.page-admin-envoi{
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
        }

        body.admin-app.page-admin-envoi.with-topnav{
            padding-top: 70px;
        }

        body.admin-app.page-admin-envoi .container{
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        /* Header Stats */
        body.admin-app.page-admin-envoi .stats-grid{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        body.admin-app.page-admin-envoi .stat-card{
            background: var(--surface);
            border-radius: var(--radius);
            padding: 24px;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            gap: 20px;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        body.admin-app.page-admin-envoi .stat-card:hover{
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        body.admin-app.page-admin-envoi .stat-icon{
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }

        body.admin-app.page-admin-envoi .stat-icon.blue{ background: #e3f2fd; }
        body.admin-app.page-admin-envoi .stat-icon.green{ background: #e8f5e9; }
        body.admin-app.page-admin-envoi .stat-icon.orange{ background: #fff3e0; }
        body.admin-app.page-admin-envoi .stat-icon.red{ background: #ffebee; }

        body.admin-app.page-admin-envoi .stat-content h3{
            font-size: 14px;
            color: var(--text-muted);
            font-weight: 500;
            margin-bottom: 4px;
        }

        body.admin-app.page-admin-envoi .stat-content .stat-value{
            font-size: 32px;
            font-weight: 700;
            color: var(--text);
        }

        /* Tabs */
        body.admin-app.page-admin-envoi .tabs{
            background: var(--surface);
            border-radius: var(--radius);
            padding: 8px;
            margin-bottom: 24px;
            box-shadow: var(--shadow);
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        body.admin-app.page-admin-envoi .tab-btn{
            padding: 12px 24px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.2s;
            flex: 1;
            min-width: 120px;
        }

        body.admin-app.page-admin-envoi .tab-btn:hover{
            background: var(--bg);
            color: var(--text);
        }

        body.admin-app.page-admin-envoi .tab-btn.active{
            background: var(--accent);
            color: white;
        }

        body.admin-app.page-admin-envoi .tab-content{
            display: none;
        }

        body.admin-app.page-admin-envoi .tab-content.active{
            display: block;
            animation: admin-envoi-fade-in 0.3s;
        }

        @keyframes admin-envoi-fade-in {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Cards */
        body.admin-app.page-admin-envoi .card{
            background: var(--surface);
            border-radius: var(--radius);
            padding: 28px;
            margin-bottom: 24px;
            box-shadow: var(--shadow);
        }

        body.admin-app.page-admin-envoi .card-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 2px solid var(--border);
        }

        body.admin-app.page-admin-envoi .card-header h2{
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
        }

        body.admin-app.page-admin-envoi .card-subtitle{
            font-size: 14px;
            color: var(--text-muted);
            margin-top: 4px;
        }

        /* Forms */
        body.admin-app.page-admin-envoi .form-grid{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 24px;
        }

        body.admin-app.page-admin-envoi .form-group{
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        body.admin-app.page-admin-envoi .form-group.full{
            grid-column: 1 / -1;
        }

        body.admin-app.page-admin-envoi label{
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
        }

        body.admin-app.page-admin-envoi label .required{
            color: var(--danger);
            margin-left: 4px;
        }

        body.admin-app.page-admin-envoi input[type="text"],
body.admin-app.page-admin-envoi input[type="email"],
body.admin-app.page-admin-envoi input[type="date"],
body.admin-app.page-admin-envoi select,
body.admin-app.page-admin-envoi textarea{
            padding: 12px 16px;
            border: 2px solid var(--border);
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.2s;
            background: white;
        }

        body.admin-app.page-admin-envoi input:focus,
body.admin-app.page-admin-envoi select:focus,
body.admin-app.page-admin-envoi textarea:focus{
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }

        body.admin-app.page-admin-envoi select[multiple]{
            min-height: 200px;
            padding: 8px;
        }

        body.admin-app.page-admin-envoi textarea{
            resize: vertical;
            min-height: 120px;
            font-family: inherit;
        }

        /* Buttons */
        body.admin-app.page-admin-envoi .btn{
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }

        body.admin-app.page-admin-envoi .btn:hover{
            transform: translateY(-1px);
            box-shadow: var(--shadow-lg);
        }

        body.admin-app.page-admin-envoi .btn:active{
            transform: translateY(0);
        }

        body.admin-app.page-admin-envoi .btn-primary{
            background: var(--accent);
            color: white;
        }

        body.admin-app.page-admin-envoi .btn-primary:hover{
            background: var(--accent-dark);
        }

        body.admin-app.page-admin-envoi .btn-success{
            background: var(--success);
            color: white;
        }

        body.admin-app.page-admin-envoi .btn-outline{
            background: transparent;
            border: 2px solid var(--border);
            color: var(--text);
        }

        body.admin-app.page-admin-envoi .btn-outline:hover{
            background: var(--bg);
        }

        body.admin-app.page-admin-envoi .btn-sm{
            padding: 8px 16px;
            font-size: 13px;
        }

        body.admin-app.page-admin-envoi .actions{
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        /* Table */
        body.admin-app.page-admin-envoi .table-container{
            overflow-x: auto;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        body.admin-app.page-admin-envoi table{
            width: 100%;
            border-collapse: collapse;
            background: white;
        }

        body.admin-app.page-admin-envoi thead{
            background: var(--primary);
            color: white;
        }

        body.admin-app.page-admin-envoi th{
            padding: 16px;
            text-align: left;
            font-weight: 600;
            font-size: 14px;
        }

        body.admin-app.page-admin-envoi td{
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
            font-size: 14px;
        }

        body.admin-app.page-admin-envoi tbody tr:hover{
            background: #f8f9fa;
        }

        body.admin-app.page-admin-envoi tbody tr.clickable{
            cursor: pointer;
            transition: background-color 0.2s;
        }

        body.admin-app.page-admin-envoi tbody tr.clickable:active{
            background: #e3f2fd !important;
        }

        /* Ligne sélectionnée */
        body.admin-app.page-admin-envoi tbody tr.selected{
            background: #e8f5e9 !important;
        }

        body.admin-app.page-admin-envoi .checkbox-col{
            width: 50px;
            text-align: center;
        }

        body.admin-app.page-admin-envoi input[type="checkbox"]{
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        /* Pagination */
        body.admin-app.page-admin-envoi .pagination{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 24px;
            flex-wrap: wrap;
        }

        body.admin-app.page-admin-envoi .pagination a,
body.admin-app.page-admin-envoi .pagination span{
            padding: 10px 16px;
            border-radius: 8px;
            text-decoration: none;
            color: var(--text);
            font-weight: 600;
            transition: all 0.2s;
            background: white;
            border: 2px solid var(--border);
        }

        body.admin-app.page-admin-envoi .pagination a:hover{
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        body.admin-app.page-admin-envoi .pagination a.active{
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        body.admin-app.page-admin-envoi .pagination span{
            border: none;
            background: transparent;
            color: var(--text-muted);
        }

        /* Filters */
        body.admin-app.page-admin-envoi .filters{
            background: #f8f9fa;
            border-radius: var(--radius);
            padding: 20px;
            margin-bottom: 24px;
        }

        body.admin-app.page-admin-envoi .filter-grid{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            align-items: end;
        }

        /* Notification Toast */
        body.admin-app.page-admin-envoi .toast{
            position: fixed;
            top: 90px;
            right: 24px;
            background: white;
            padding: 16px 24px;
            border-radius: var(--radius);
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 9999;
            animation: slideIn 0.3s;
            max-width: 400px;
        }

        body.admin-app.page-admin-envoi .toast.success{ border-left: 4px solid var(--success); }
        body.admin-app.page-admin-envoi .toast.error{ border-left: 4px solid var(--danger); }
        body.admin-app.page-admin-envoi .toast.warning{ border-left: 4px solid var(--warning); }
        body.admin-app.page-admin-envoi .toast.info{ border-left: 4px solid var(--accent); }

        @keyframes slideIn {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        body.admin-app.page-admin-envoi .toast-icon{
            font-size: 24px;
        }

        body.admin-app.page-admin-envoi .toast-close{
            margin-left: auto;
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: var(--text-muted);
            padding: 0;
            width: 24px;
            height: 24px;
        }

        /* Badge */
        body.admin-app.page-admin-envoi .badge{
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        body.admin-app.page-admin-envoi .badge.success{
            background: #e8f5e9;
            color: var(--success);
        }

        body.admin-app.page-admin-envoi .badge.warning{
            background: #fff3e0;
            color: var(--warning);
        }

        body.admin-app.page-admin-envoi .badge.danger{
            background: #ffebee;
            color: var(--danger);
        }

        /* Empty State */
        body.admin-app.page-admin-envoi .empty-state{
            text-align: center;
            padding: 60px 20px;
            color: var(--text-muted);
        }

        body.admin-app.page-admin-envoi .empty-state-icon{
            font-size: 64px;
            margin-bottom: 16px;
            opacity: 0.3;
        }

        body.admin-app.page-admin-envoi .empty-state h3{
            font-size: 20px;
            margin-bottom: 8px;
            color: var(--text);
        }

        /* Responsive */
        @media (max-width: 768px) {
            body.admin-app.page-admin-envoi .container{
                padding: 12px;
            }

            body.admin-app.page-admin-envoi .stats-grid{
                grid-template-columns: 1fr;
            }

            body.admin-app.page-admin-envoi .stat-card{
                padding: 16px;
            }

            body.admin-app.page-admin-envoi .stat-icon{
                width: 50px;
                height: 50px;
                font-size: 24px;
            }

            body.admin-app.page-admin-envoi .stat-content .stat-value{
                font-size: 24px;
            }

            body.admin-app.page-admin-envoi .tabs{
                flex-direction: column;
            }

            body.admin-app.page-admin-envoi .tab-btn{
                width: 100%;
            }

            body.admin-app.page-admin-envoi .form-grid,
body.admin-app.page-admin-envoi .filter-grid{
                grid-template-columns: 1fr;
            }

            body.admin-app.page-admin-envoi .card{
                padding: 16px;
            }

            body.admin-app.page-admin-envoi .table-container{
                overflow-x: scroll;
            }

            body.admin-app.page-admin-envoi table{
                min-width: 600px;
            }

            body.admin-app.page-admin-envoi .toast{
                right: 12px;
                left: 12px;
                max-width: none;
            }

            body.admin-app.page-admin-envoi th,
body.admin-app.page-admin-envoi td{
                padding: 10px 8px;
                font-size: 13px;
            }
        }

        body.admin-app.page-admin-envoi .help-text{
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 4px;
        }

        body.admin-app.page-admin-envoi .checkbox-group{
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
        }

        body.admin-app.page-admin-envoi .checkbox-label{
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            cursor: pointer;
        }

        body.admin-app.page-admin-envoi .section-divider{
            height: 1px;
            background: var(--border);
            margin: 32px 0;
        }

        /* Mission ID Badge */
        body.admin-app.page-admin-envoi .mission-id{
            color: var(--accent);
            font-weight: 700;
        }

        body.admin-app.page-admin-envoi .info-box{
            background: #e3f2fd;
            border-left: 4px solid var(--accent);
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        body.admin-app.page-admin-envoi .info-box h4{
            font-size: 15px;
            margin-bottom: 4px;
            color: var(--primary);
        }

        body.admin-app.page-admin-envoi .info-box p{
            font-size: 14px;
            color: var(--text-muted);
            margin: 0;
        }
    

/* ----- aide.php (page-admin-help) — styles intégrés extraits (doublon retiré) ----- */

body.admin-app.page-admin-help .support-wrapper{
	max-width:900px; margin:90px auto 60px; padding:0 20px;
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	color:#0b2033;
}
body.admin-app.page-admin-help .support-wrapper h1{font-size:28px; margin:0 0 14px;}
body.admin-app.page-admin-help .support-wrapper h2{margin-top:40px; font-size:20px;}
body.admin-app.page-admin-help .support-form{background:#f5f9fc; padding:24px 24px 28px; border:1px solid #d6e3ee; border-radius:14px; margin-top:10px;}
body.admin-app.page-admin-help .support-form .field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
body.admin-app.page-admin-help .support-form label{font-weight:600; font-size:14px;}
body.admin-app.page-admin-help .support-form input[type=text],
body.admin-app.page-admin-help .support-form textarea{
	border:1px solid #b8ccd9; border-radius:8px; padding:10px 12px; font-size:14px; resize:vertical;
	background:#fff;
}
body.admin-app.page-admin-help .support-form input:focus,
body.admin-app.page-admin-help .support-form textarea:focus{outline:2px solid #4dabff55; border-color:#2590ff;}
body.admin-app.page-admin-help .btn-primary{
	background:#1f6fbc; color:#fff; border:none; padding:12px 26px; border-radius:30px; font-size:14px; font-weight:600;
	cursor:pointer; transition:.25s;
}
body.admin-app.page-admin-help .btn-primary:hover{background:#2484df;}
body.admin-app.page-admin-help .alert{padding:14px 18px; border-radius:10px; margin:18px 0; font-size:14px;}
body.admin-app.page-admin-help .alert.error{background:#ffe9e7; border:1px solid #ffb8b2; color:#7a1d17;}
body.admin-app.page-admin-help .alert.success{background:#e6f8ed; border:1px solid #b5e8c6; color:#135d2d;}
body.admin-app.page-admin-help .messages-list{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:18px;}
body.admin-app.page-admin-help .messages-list li{background:#ffffff; border:1px solid #d6e3ee; border-radius:12px; padding:14px 16px;}
body.admin-app.page-admin-help .msg-head{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px; margin-bottom:6px;}
body.admin-app.page-admin-help .msg-head strong{font-size:15px;}
body.admin-app.page-admin-help .msg-head .date{color:#5b788d; font-size:12px;}
body.admin-app.page-admin-help .msg-body{margin:0; white-space:pre-line; font-size:14px; line-height:1.45;}
body.admin-app.page-admin-help .note-tech{font-size:12px; color:#5b788d;}
@media (max-width:600px) {
	body.admin-app.page-admin-help .support-wrapper{margin-top:100px;}
	body.admin-app.page-admin-help .msg-head{flex-direction:column; align-items:flex-start;}
}


/* ----- Utilitaires extraits de style="" statiques (rendu identique) ----- */
body.admin-app.page-admin-clients .color-input-add {
    height: 50px;
    cursor: pointer;
}
body.admin-app.page-admin-clients .color-input-row {
    width: 50px;
    height: 35px;
    border: 2px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
}
body.admin-app.page-admin-clients .section-title--list {
    font-size: 1.1rem;
}
body.admin-app.page-admin-clients .flash-ok {
    color: green;
    margin-bottom: 15px;
    text-align: center;
}
body.admin-app.page-admin-clients .form-inline-row {
    display: inline;
}
body.admin-app.page-admin-clients .td-color {
    text-align: center;
    padding: 10px;
}

body.admin-app.page-admin-mission-edit .id-lookup {
    margin-bottom: 16px;
    padding: 12px;
    background: #f0f4f8;
    border-radius: 8px;
}
body.admin-app.page-admin-mission-edit .id-lookup-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
body.admin-app.page-admin-mission-edit .id-lookup-input {
    max-width: 140px;
}
body.admin-app.page-admin-mission-edit .filters-form {
    margin-bottom: 12px;
}
body.admin-app.page-admin-mission-edit .filter-actions {
    display: flex;
    gap: 8px;
}
body.admin-app.page-admin-mission-edit .form-actions-row {
    margin-top: 24px;
    display: flex;
    gap: 12px;
}

body.admin-app.page-admin-planning .page-header--tight {
    margin-bottom: 14px;
}
body.admin-app.page-admin-planning .flash-success {
    background: #eafbe7;
    color: #207544;
    margin-top: 8px;
    padding: 10px;
}
body.admin-app.page-admin-planning .flash-error {
    background: #fdecea;
    color: #c0392b;
    margin-top: 8px;
    padding: 10px;
}
body.admin-app.page-admin-planning .heading-flush {
    margin-top: 0;
}
body.admin-app.page-admin-planning .label-check {
    display: flex;
    align-items: center;
    gap: 8px;
}
body.admin-app.page-admin-planning .label-check-sm {
    display: flex;
    align-items: center;
    gap: 6px;
}
body.admin-app.page-admin-planning .pair-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
body.admin-app.page-admin-planning .textarea-tall {
    min-height: 140px;
    resize: vertical;
}
body.admin-app.page-admin-planning .form-span {
    grid-column: 1 / -1;
    margin-top: 6px;
}
body.admin-app.page-admin-planning .btn-reset-gap {
    margin-left: 8px;
}
body.admin-app.page-admin-planning .card-spaced {
    margin-top: 20px;
}
body.admin-app.page-admin-planning .filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #667;
}
body.admin-app.page-admin-planning .filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
body.admin-app.page-admin-planning .btn-filter-h {
    height: 40px;
}
body.admin-app.page-admin-planning .btn-reinit {
    height: 40px;
    display: inline-flex;
    align-items: center;
}
body.admin-app.page-admin-planning .result-count {
    font-size: 13px;
    color: #555;
    margin-bottom: 10px;
}
body.admin-app.page-admin-planning .table-scroll {
    overflow: auto;
}
body.admin-app.page-admin-planning .empty-row {
    color: #777;
}
body.admin-app.page-admin-planning .btn-more {
    margin-left: 6px;
}
body.admin-app.page-admin-planning .bon-ok-note {
    margin-left: 6px;
    color: #1d7d46;
    font-weight: 700;
}
body.admin-app.page-admin-planning .modal-dialog {
    background: #fff;
    min-width: 320px;
    max-width: 720px;
    width: 92%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 14px;
}
body.admin-app.page-admin-planning .modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
body.admin-app.page-admin-planning .modal-title {
    margin: 0;
    font-size: 18px;
}
body.admin-app.page-admin-planning .modal-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}
body.admin-app.page-admin-planning .modal-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    margin-top: 6px;
    justify-content: flex-end;
}

body.admin-app.page-admin-envoi .badge-pending {
    background: #f5f5f5;
    color: #666;
}
body.admin-app.page-admin-envoi .form-inline {
    display: inline;
}
body.admin-app.page-admin-envoi .actions-spaced {
    margin-top: 20px;
}
body.admin-app.page-admin-envoi .count-muted {
    color: var(--text-muted);
    font-size: 14px;
    margin-left: 12px;
}
body.admin-app.page-admin-envoi .pagination-spaced {
    margin-top: 24px;
}
body.admin-app.page-admin-envoi .page-meta {
    text-align: center;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 14px;
}
body.admin-app.page-admin-envoi .missions-pick {
    margin-bottom: 24px;
}
body.admin-app.page-admin-envoi .help-spaced {
    margin-bottom: 12px;
}
body.admin-app.page-admin-envoi .help-max {
    color: var(--accent);
}
body.admin-app.page-admin-envoi .selected-accent {
    margin-top: 12px;
    color: var(--accent);
    font-weight: 600;
    font-size: 14px;
}
body.admin-app.page-admin-envoi .search-row {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}
body.admin-app.page-admin-envoi .search-grow {
    flex: 1;
}
body.admin-app.page-admin-envoi .muted-note {
    color: var(--text-muted);
}


/* ==========================================================================
   Camions
   ========================================================================== */

/**
 * Module Camions — feuille de refactor CSS
 *
 * Chargée depuis camions/ via : ../assets/css/app.css
 *
 * Portée :
 *   body.admin-app.page-admin-trucks        → admin_camions.php, modifier_immatriculation.php
 *   body.admin-app.page-admin-truck-detail  → detail_camion.php
 *
 * Chemins relatifs :
 *   Cette feuille vit désormais dans assets/css/app.css.
 *   camions/style/styleadmin.css ne contenait aucun url().
 *   Aucun url() images/icons/documents à recalculer ici.
 *   Les aperçus documents restent des src HTML : ../{url} depuis camions/.
 *
 * Styles dynamiques laissés inline (PHP ou JS) — ne pas extraire :
 *   - admin_camions.php : display des .tab-content (GET tab + showTab())
 *   - detail_camion.php : classe PHP .benef / .loss selon $benefice_net
 *   - detail_camion.php : texte « Obligatoire » selon $missing_data (classe statique .field-required-flag)
 *   - JS modales : element.style.display (openModal / closeModal)
 *
 * Legacy encore liées (intégrateur) :
 *   - ../style/styleadmin.css
 *   - ../style/sidebar.css  (protégé, agent 3)
 *   - camions/style/styleadmin.css : jamais liée par les pages UI.
 *     Contenu inspecté ; body/button/navbar/.fiche-camion NON réactivés
 *     (écraseraient ../style/styleadmin.css — pas de redesign).
 *     L’intégrateur peut supprimer le fichier après vérif des références.
 *   - camions/style/sidebar.css (référence cassée existante, non créée)
 */

/* -------------------------------------------------------------------------- */
/* Tokens — fiche camion (ex-<style> de detail_camion.php)                      */
/* -------------------------------------------------------------------------- */

body.admin-app.page-admin-truck-detail {
    --c-bg: #f5f7fa;
    --c-card: #ffffff;
    --c-border: #e2e8f0;
    --c-text: #2c3e50;
    --c-muted: #6c7a89;
    --c-primary: #005baa;
    --c-primary-soft: #e6f1fb;
    --c-success: #27ae60;
    --c-success-soft: #e8f9f0;
    --c-warning: #f39c12;
    --c-warning-soft: #fff5e0;
    --c-danger: #e74c3c;
    --c-danger-soft: #fdecea;
    --radius: 10px;
}

/* -------------------------------------------------------------------------- */
/* admin_camions.php — ex-<style> + flash statique                             */
/* -------------------------------------------------------------------------- */

body.admin-app.page-admin-trucks .muted {
    color: #777;
    font-style: italic;
}

body.admin-app.page-admin-trucks .flash-message {
    background: #e3f7e9;
    border: 1px solid #b6e2c4;
    color: #1d6b35;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

body.admin-app.page-admin-trucks .carburant-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

body.admin-app.page-admin-trucks .form-group {
    margin-bottom: 15px;
}

body.admin-app.page-admin-trucks .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

body.admin-app.page-admin-trucks .form-group input {
    width: 200px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

body.admin-app.page-admin-trucks .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

body.admin-app.page-admin-trucks .stat-card {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    text-align: center;
}

body.admin-app.page-admin-trucks .stat-card h5 {
    margin: 0 0 10px 0;
    color: #666;
    font-size: 14px;
}

body.admin-app.page-admin-trucks .stat-card p {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1976d2;
}

body.admin-app.page-admin-trucks .history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

body.admin-app.page-admin-trucks .history-table th,
body.admin-app.page-admin-trucks .history-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

body.admin-app.page-admin-trucks .history-table th {
    background: #f5f5f5;
    font-weight: 600;
}

body.admin-app.page-admin-trucks .global-essence-section {
    margin-top: 40px;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

body.admin-app.page-admin-trucks .global-essence-section h2 {
    color: #1976d2;
    margin-bottom: 10px;
    font-size: 24px;
}

body.admin-app.page-admin-trucks .section-description {
    color: #666;
    margin-bottom: 30px;
    font-style: italic;
}

body.admin-app.page-admin-trucks .essence-controls {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.admin-app.page-admin-trucks .global-settings h3 {
    margin-bottom: 20px;
    color: #333;
}

body.admin-app.page-admin-trucks .form-row {
    display: flex;
    gap: 20px;
    align-items: end;
    flex-wrap: wrap;
}

body.admin-app.page-admin-trucks .form-row .form-group {
    margin-bottom: 0;
}

body.admin-app.page-admin-trucks .btn-global {
    background: #1976d2;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

body.admin-app.page-admin-trucks .btn-global:hover {
    background: #0d5fb1;
}

body.admin-app.page-admin-trucks .table-container {
    overflow-x: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.admin-app.page-admin-trucks .essence-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
}

body.admin-app.page-admin-trucks .essence-table th {
    background: #1976d2;
    color: white;
    padding: 15px 10px;
    text-align: left;
    font-weight: 600;
    position: sticky;
    top: 0;
}

body.admin-app.page-admin-trucks .essence-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
}

body.admin-app.page-admin-trucks .essence-table tr:hover {
    background: #f5f5f5;
}

body.admin-app.page-admin-trucks .inline-form {
    display: inline;
    margin: 0;
}

body.admin-app.page-admin-trucks .input-small {
    width: 80px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}

body.admin-app.page-admin-trucks .input-small:focus {
    border-color: #1976d2;
    outline: none;
}

body.admin-app.page-admin-trucks .kilometrage {
    font-weight: 600;
    color: #1976d2;
}

body.admin-app.page-admin-trucks .last-mission {
    font-size: 12px;
}

body.admin-app.page-admin-trucks .last-mission small {
    color: #666;
}

body.admin-app.page-admin-trucks .no-mission {
    color: #999;
    font-style: italic;
}

body.admin-app.page-admin-trucks .avg-cost {
    font-weight: 600;
    color: #2e7d32;
}

body.admin-app.page-admin-trucks .avg-cost small {
    color: #666;
}

body.admin-app.page-admin-trucks .no-data {
    color: #999;
}

body.admin-app.page-admin-trucks .btn-detail {
    background: #4caf50;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.3s;
}

body.admin-app.page-admin-trucks .btn-detail:hover {
    background: #388e3c;
}

body.admin-app.page-admin-trucks .essence-summary {
    margin-top: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.admin-app.page-admin-trucks .essence-summary h3 {
    margin-bottom: 20px;
    color: #333;
}

body.admin-app.page-admin-trucks .summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

body.admin-app.page-admin-trucks .summary-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e0e0e0;
}

body.admin-app.page-admin-trucks .summary-card h4 {
    margin: 0 0 10px 0;
    color: #666;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.admin-app.page-admin-trucks .summary-card .big-number {
    font-size: 28px;
    font-weight: 700;
    color: #1976d2;
    margin: 0 0 5px 0;
}

body.admin-app.page-admin-trucks .summary-card small {
    color: #666;
    font-size: 12px;
}

/* modifier_immatriculation.php — couleurs de message (ex-inline PHP) */

body.admin-app.page-admin-trucks .immat-msg-ok {
    color: green;
}

body.admin-app.page-admin-trucks .immat-msg-err {
    color: red;
}

/* -------------------------------------------------------------------------- */
/* detail_camion.php — ex-<style>                                              */
/* -------------------------------------------------------------------------- */

body.admin-app.page-admin-truck-detail {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    margin: 0;
    line-height: 1.4;
}

body.admin-app.page-admin-truck-detail .admin-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px;
}

body.admin-app.page-admin-truck-detail h1,
body.admin-app.page-admin-truck-detail h2,
body.admin-app.page-admin-truck-detail h3 {
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0 0 18px;
}

body.admin-app.page-admin-truck-detail h1 {
    font-size: 30px;
}

body.admin-app.page-admin-truck-detail .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
}

body.admin-app.page-admin-truck-detail .toolbar-space {
    flex: 1;
}

body.admin-app.page-admin-truck-detail .card,
body.admin-app.page-admin-truck-detail .fiche-camion {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 26px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

body.admin-app.page-admin-truck-detail .financial-summary-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

body.admin-app.page-admin-truck-detail .fin-box {
    padding: 18px 20px;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

body.admin-app.page-admin-truck-detail .fin-box h4 {
    margin: 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

body.admin-app.page-admin-truck-detail .fin-box .value {
    font-size: 30px;
    font-weight: 700;
    margin-top: 8px;
}

body.admin-app.page-admin-truck-detail .fin-box.ca {
    background: linear-gradient(135deg, #e6f2ff, #cfe6ff);
}

body.admin-app.page-admin-truck-detail .fin-box.cost {
    background: linear-gradient(135deg, #fff3d6, #ffe7b3);
}

body.admin-app.page-admin-truck-detail .fin-box.benef {
    background: linear-gradient(135deg, #e6fbf0, #d1f5e2);
}

body.admin-app.page-admin-truck-detail .fin-box.loss {
    background: linear-gradient(135deg, #ffe4e2, #ffd0cc);
}

body.admin-app.page-admin-truck-detail .rentabilite-global {
    text-align: center;
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-primary);
}

body.admin-app.page-admin-truck-detail .dashboard-box {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

body.admin-app.page-admin-truck-detail .dashboard-item {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14px;
    position: relative;
}

body.admin-app.page-admin-truck-detail .dashboard-item b {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--c-muted);
    margin-bottom: 4px;
}

body.admin-app.page-admin-truck-detail .badge-warn {
    color: var(--c-warning);
    font-weight: 600;
}

body.admin-app.page-admin-truck-detail table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

body.admin-app.page-admin-truck-detail table th,
body.admin-app.page-admin-truck-detail table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--c-border);
}

body.admin-app.page-admin-truck-detail table th {
    background: var(--c-primary-soft);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--c-primary);
}

body.admin-app.page-admin-truck-detail table tr:last-child td {
    border-bottom: none;
}

body.admin-app.page-admin-truck-detail table tbody tr:hover {
    background: #f1f7ff;
}

body.admin-app.page-admin-truck-detail .msg-confirm {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

body.admin-app.page-admin-truck-detail .msg-confirm.warn {
    background: var(--c-warning-soft);
    color: #8b6400;
}

body.admin-app.page-admin-truck-detail .btn {
    --btn-bg: var(--c-primary);
    --btn-color: #fff;
    background: var(--btn-bg);
    color: var(--btn-color);
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    text-decoration: none;
    line-height: 1;
    transition: 0.18s;
}

body.admin-app.page-admin-truck-detail .btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.15);
}

body.admin-app.page-admin-truck-detail .btn:active {
    transform: translateY(1px);
}

body.admin-app.page-admin-truck-detail .btn-outline {
    background: #fff;
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
}

body.admin-app.page-admin-truck-detail .btn-danger {
    --btn-bg: var(--c-danger);
}

body.admin-app.page-admin-truck-detail .btn-success {
    --btn-bg: var(--c-success);
}

body.admin-app.page-admin-truck-detail .btn-warning {
    --btn-bg: var(--c-warning);
    --btn-color: #212121;
}

body.admin-app.page-admin-truck-detail .btn-back {
    --btn-bg: #34495e;
}

body.admin-app.page-admin-truck-detail .actions-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body.admin-app.page-admin-truck-detail .documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

body.admin-app.page-admin-truck-detail .document-item {
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
}

body.admin-app.page-admin-truck-detail .document-item-type {
    font-weight: bold;
    margin-bottom: 10px;
}

body.admin-app.page-admin-truck-detail .document-item-preview {
    margin: 10px 0;
}

body.admin-app.page-admin-truck-detail .document-thumb {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #d5dde5;
}

body.admin-app.page-admin-truck-detail .document-item-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

body.admin-app.page-admin-truck-detail .document-view-link {
    flex: 1;
    text-align: center;
    padding: 5px 10px;
    background: #005baa;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

body.admin-app.page-admin-truck-detail .document-delete-form {
    flex: 1;
}

body.admin-app.page-admin-truck-detail .document-delete-btn {
    width: 100%;
    padding: 5px 10px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

body.admin-app.page-admin-truck-detail .btn-add-document {
    margin-top: 20px;
    padding: 10px 20px;
}

body.admin-app.page-admin-truck-detail .btn-inline-heading {
    margin-top: 0;
}

body.admin-app.page-admin-truck-detail .btn-section-add {
    float: right;
    margin-top: -8px;
}

body.admin-app.page-admin-truck-detail .missing-data-actions {
    margin-top: 10px;
}

body.admin-app.page-admin-truck-detail .assurance-empty {
    color: #856404;
    background: #fff3cd;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

body.admin-app.page-admin-truck-detail .field-required-flag {
    color: red;
}

body.admin-app.page-admin-truck-detail .modal-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 32, 48, 0.4);
    z-index: 1000;
    backdrop-filter: blur(3px);
    padding: 40px 20px;
    overflow-y: auto;
}

body.admin-app.page-admin-truck-detail .modal-content {
    width: 100%;
    max-width: 520px;
    background: #fff;
    margin: 0 auto;
    border-radius: 16px;
    padding: 30px 34px;
    position: relative;
    transform-origin: center;
    animation: pop 0.35s ease;
}

@keyframes pop {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.admin-app.page-admin-truck-detail .close-modal {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 22px;
    cursor: pointer;
    color: var(--c-muted);
}

body.admin-app.page-admin-truck-detail form input[type="text"],
body.admin-app.page-admin-truck-detail form input[type="number"],
body.admin-app.page-admin-truck-detail form input[type="date"],
body.admin-app.page-admin-truck-detail form select,
body.admin-app.page-admin-truck-detail form input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: #fff;
    margin-top: 4px;
    font-size: 14px;
}

body.admin-app.page-admin-truck-detail form div {
    margin-bottom: 14px;
}

body.admin-app.page-admin-truck-detail hr {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: 22px 0;
}

body.admin-app.page-admin-truck-detail small {
    color: var(--c-muted);
}

body.admin-app.page-admin-truck-detail canvas {
    background: #fff;
    border: 1px solid var(--c-border);
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 26px;
}

body.admin-app.page-admin-truck-detail .section-title-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body.admin-app.page-admin-truck-detail .empty-hint {
    padding: 14px 16px;
    background: var(--c-warning-soft);
    border: 1px dashed #f0c05c;
    border-radius: 10px;
    font-size: 13px;
}

body.admin-app.page-admin-truck-detail .tag {
    display: inline-block;
    background: #eef3f8;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--c-primary);
    margin-left: 6px;
}

body.admin-app.page-admin-truck-detail .nowrap {
    white-space: nowrap;
}

body.admin-app.page-admin-truck-detail .grid-auto {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

body.admin-app.page-admin-truck-detail .flash-red {
    color: var(--c-danger);
    font-weight: 600;
}

@media (max-width: 820px) {
    body.admin-app.page-admin-truck-detail .toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    body.admin-app.page-admin-truck-detail h1 {
        font-size: 24px;
    }

    body.admin-app.page-admin-truck-detail .modal-content {
        padding: 26px 24px;
    }
}



/* ==========================================================================
   Public
   ========================================================================== */

/**
 * Portée publique hors chauffeur.
 * Consommateurs : index.php, pageconstruction.php.
 * Toutes les règles sont scopées sous .public-app + .page-public-*
 * pour éviter les fuites vers les autres contextes du refactor.
 *
 * Les var(--surface), var(--radius), var(--shadow), var(--primary),
 * var(--primary-light), var(--border) de la page d'accueil sont
 * volontairement non définies ici : style/styleindex.css ne les
 * définissait pas non plus. Les unifier casserait le rendu actuel.
 */

/* ------------------------------------------------------------------ */
/* Accueil — .page-public-home (ex style/styleindex.css)              */
/* ------------------------------------------------------------------ */

.public-app.page-public-home {
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f7f9fb;
    color: #222;
}

.public-app.page-public-home .stpp-portal-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 10px;
}

.public-app.page-public-home .stpp-logo img {
    max-width: 200px;
    margin-bottom: 24px;
}

.public-app.page-public-home .stpp-welcome-message {
    text-align: center;
    margin-bottom: 32px;
}

.public-app.page-public-home .stpp-welcome-message h1 {
    font-size: 2.3rem;
    color: #2c3e50;
    margin-bottom: 14px;
    font-weight: 700;
}

.public-app.page-public-home .stpp-welcome-message p {
    font-size: 1.15rem;
    color: #333;
    line-height: 1.6;
}

.public-app.page-public-home .stpp-access-btn {
    margin-bottom: 36px;
}

.public-app.page-public-home .btn-platform {
    display: inline-block;
    background: #2c3e50;
    color: #fff;
    padding: 18px 44px;
    border-radius: 32px;
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(26,35,126,0.08);
    transition: background 0.2s, transform 0.2s;
    border: none;
    outline: none;
}

.public-app.page-public-home .btn-platform:hover {
    background: #2c3e50;
    transform: translateY(-2px) scale(1.04);
}

.public-app.page-public-home .stpp-contact-form-container {
    background: var(--surface);
    padding: 28px 24px 20px 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 400px;
    width: 100%;
    margin-top: 10px;
}

.public-app.page-public-home .stpp-contact-form-container h2 {
    color: var(--primary-light);
    margin-bottom: 18px;
    font-size: 1.3rem;
    font-weight: 600;
}

.public-app.page-public-home .contact-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.public-app.page-public-home .contact-form input,
.public-app.page-public-home .contact-form textarea {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    background: #f5f7fa;
    transition: border 0.2s;
    resize: none;
}

.public-app.page-public-home .contact-form input:focus,
.public-app.page-public-home .contact-form textarea:focus {
    border: 1.5px solid var(--primary-light);
    outline: none;
    background: #fff;
}

.public-app.page-public-home .contact-form button {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 0;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.public-app.page-public-home .contact-form button:hover {
    background: var(--primary-light);
    transform: translateY(-1px) scale(1.02);
}

.public-app.page-public-home .stpp-contact-flash {
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    text-align: center;
}

.public-app.page-public-home .stpp-contact-flash--success {
    color: #388e3c;
    background: #e8f5e9;
}

.public-app.page-public-home .stpp-contact-flash--error {
    color: #c62828;
    background: #ffebee;
}

@media (max-width: 600px) {
    .public-app.page-public-home .stpp-contact-form-container {
        padding: 18px 6px 12px 6px;
    }
    .public-app.page-public-home .stpp-welcome-message h1 {
        font-size: 1.3rem;
    }
    .public-app.page-public-home .btn-platform {
        padding: 12px 10px;
        font-size: 1rem;
    }
}

/* ------------------------------------------------------------------ */
/* Construction — .page-public-construction (ex style inline)         */
/* ------------------------------------------------------------------ */

.public-app.page-public-construction {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.public-app.page-public-construction .container {
    text-align: center;
    background-color: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.public-app.page-public-construction h1 {
    font-size: 3rem;
    color: #ff6f61;
    margin-bottom: 20px;
}

.public-app.page-public-construction p {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 30px;
}

.public-app.page-public-construction .construction-icon {
    font-size: 5rem;
    color: #ff6f61;
    animation: bounce 2s infinite;
}

.public-app.page-public-construction .back-link {
    font-size: 1.2rem;
    color: #ff6f61;
    text-decoration: none;
    border: 2px solid #ff6f61;
    padding: 10px 20px;
    border-radius: 25px;
    transition: background-color 0.3s, color 0.3s;
}

.public-app.page-public-construction .back-link:hover {
    background-color: #ff6f61;
    color: #fff;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}


/* ==========================================================================
   Mobile admin
   ========================================================================== */

/**
 * Admin mobile PWA — AvityTransportSTPP
 *
 * Source historique (octet-identique entre ces arbres) :
 *   - phone/assets/css/style.css          (3d4227d, HEAD b27973c)
 *   - admin/phone/assets/css/style.css    (45b9de8, branche refactor-legacy)
 *
 * Tags : aucun.
 * git rev-list --all -- phone/assets/css/style.css :
 *   45b9de8, 3d4227d
 *
 * Migration mécanique, aucun redesign.
 * Portée HTML : body.mobile-admin-app
 *   + page-mobile-dashboard  (phone/index.php)
 *   + page-mobile-management (phone/gestion.php)
 *   + page-mobile-missions   (phone/missions.php)
 *   + page-mobile-planning   (phone/planning.php)
 *
 * Chargement depuis phone/ : ../assets/css/app.css
 */

/* ========================================
   RESET & VARIABLES
   ======================================== */
body.mobile-admin-app {
    /* Couleurs principales */
    --primary-color: #1a73e8;
    --primary-dark: #1557b0;
    --primary-light: #4285f4;
    
    /* Couleurs secondaires */
    --success-color: #34a853;
    --success-light: #e6f4ea;
    --warning-color: #fbbc04;
    --warning-light: #fef7e0;
    --danger-color: #ea4335;
    --danger-light: #fce8e6;
    --info-color: #4285f4;
    --info-light: #e8f0fe;
    
    /* Couleurs neutres */
    --text-primary: #202124;
    --text-secondary: #5f6368;
    --text-tertiary: #80868b;
    --border-color: #dadce0;
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f1f3f4;
    
    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.2);
    
    /* Espacements */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Tailles de police */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    
    /* Rayons de bordure */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Hauteurs fixes */
    --header-height: 70px;
    --bottom-nav-height: 60px;
}

body.mobile-admin-app, body.mobile-admin-app * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html:has(body.mobile-admin-app), body.mobile-admin-app {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

body.mobile-admin-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--font-md);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: var(--bottom-nav-height);
}

/* ========================================
   HEADER
   ======================================== */
body.mobile-admin-app .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

body.mobile-admin-app .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--spacing-md);
}

body.mobile-admin-app .header-title {
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--text-primary);
}

body.mobile-admin-app .header-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

body.mobile-admin-app .user-name {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

body.mobile-admin-app .header-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background-color: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color 0.2s;
}

body.mobile-admin-app .header-action-btn:active {
    background-color: var(--bg-tertiary);
}

body.mobile-admin-app .header-action-btn svg {
    width: 24px;
    height: 24px;
}

body.mobile-admin-app .header-welcome {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    margin-top: 2px;
    font-weight: 400;
}

body.mobile-admin-app .logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background-color: transparent;
    color: var(--danger-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
}

body.mobile-admin-app .logout-btn:active {
    background-color: var(--danger-light);
}

body.mobile-admin-app .logout-btn svg {
    width: 20px;
    height: 20px;
}

/* ========================================
   MAIN CONTENT
   ======================================== */
body.mobile-admin-app .main-content {
    margin-top: var(--header-height);
    padding: var(--spacing-md);
    padding-bottom: var(--spacing-xl);
    min-height: calc(100vh - var(--header-height) - var(--bottom-nav-height));
}

body.mobile-admin-app .section-title {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

/* ========================================
   CARTES STATISTIQUES
   ======================================== */
body.mobile-admin-app .stats-section {
    margin-bottom: var(--spacing-xl);
}

body.mobile-admin-app .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

body.mobile-admin-app .stat-card {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid var(--border-color);
}

body.mobile-admin-app .stat-card:active {
    transform: scale(0.98);
    box-shadow: var(--shadow-sm);
}

body.mobile-admin-app .stat-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
}

body.mobile-admin-app .stat-card__icon svg {
    width: 28px;
    height: 28px;
}

body.mobile-admin-app .stat-card--primary .stat-card__icon {
    background-color: var(--info-light);
    color: var(--primary-color);
}

body.mobile-admin-app .stat-card--success .stat-card__icon {
    background-color: var(--success-light);
    color: var(--success-color);
}

body.mobile-admin-app .stat-card--warning .stat-card__icon {
    background-color: var(--warning-light);
    color: var(--warning-color);
}

body.mobile-admin-app .stat-card--info .stat-card__icon {
    background-color: var(--info-light);
    color: var(--info-color);
}

body.mobile-admin-app .stat-card__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.mobile-admin-app .stat-card__label {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

body.mobile-admin-app .stat-card__value {
    font-size: var(--font-2xl);
    font-weight: 700;
    color: var(--text-primary);
}

/* ========================================
   ALERTES
   ======================================== */
body.mobile-admin-app .alerts-section {
    margin-bottom: var(--spacing-xl);
}

body.mobile-admin-app .alerts-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

body.mobile-admin-app .alert-card {
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

body.mobile-admin-app .alert-card--warning {
    border-left-color: var(--warning-color);
}

body.mobile-admin-app .alert-card--danger {
    border-left-color: var(--danger-color);
}

body.mobile-admin-app .alert-card--info {
    border-left-color: var(--info-color);
}

body.mobile-admin-app .alert-card__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

body.mobile-admin-app .alert-card--warning .alert-card__icon {
    color: var(--warning-color);
}

body.mobile-admin-app .alert-card--danger .alert-card__icon {
    color: var(--danger-color);
}

body.mobile-admin-app .alert-card--info .alert-card__icon {
    color: var(--info-color);
}

body.mobile-admin-app .alert-card__content {
    flex: 1;
}

body.mobile-admin-app .alert-card__title {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

body.mobile-admin-app .alert-card__message {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

/* ========================================
   RACCOURCIS RAPIDES
   ======================================== */
body.mobile-admin-app .shortcuts-section {
    margin-bottom: var(--spacing-xl);
}

body.mobile-admin-app .shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

body.mobile-admin-app .shortcut-btn {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    box-shadow: var(--shadow-sm);
}

body.mobile-admin-app .shortcut-btn:active {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
}

body.mobile-admin-app .shortcut-btn svg {
    width: 32px;
    height: 32px;
    color: var(--primary-color);
}

body.mobile-admin-app .shortcut-btn span {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

/* ========================================
   RECHERCHE ET FILTRES
   ======================================== */
body.mobile-admin-app .search-filter-bar {
    position: sticky;
    top: var(--header-height);
    background-color: var(--bg-secondary);
    padding: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    z-index: 50;
    border-bottom: 1px solid var(--border-color);
}

body.mobile-admin-app .search-box {
    flex: 1;
    position: relative;
}

body.mobile-admin-app .search-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-tertiary);
    pointer-events: none;
}

body.mobile-admin-app .search-input {
    width: 100%;
    height: 44px;
    padding: 0 var(--spacing-md) 0 44px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--bg-primary);
    font-size: var(--font-md);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
}

body.mobile-admin-app .search-input:focus {
    border-color: var(--primary-color);
}

body.mobile-admin-app .search-box-standalone {
    margin-bottom: var(--spacing-md);
    position: relative;
}

body.mobile-admin-app .filter-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

body.mobile-admin-app .filter-btn:active {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
}

body.mobile-admin-app .filter-btn svg {
    width: 20px;
    height: 20px;
}

/* Panel de filtres */
body.mobile-admin-app .filters-panel {
    display: none;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

body.mobile-admin-app .filters-panel.filters-panel--open {
    display: block;
}

body.mobile-admin-app .filters-content {
    padding: var(--spacing-lg);
}

body.mobile-admin-app .filters-title {
    font-size: var(--font-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

body.mobile-admin-app .filter-group {
    margin-bottom: var(--spacing-md);
}

body.mobile-admin-app .filter-label {
    display: block;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

body.mobile-admin-app .filter-select {
    width: 100%;
    height: 44px;
    padding: 0 var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    font-size: var(--font-md);
    color: var(--text-primary);
    outline: none;
}

body.mobile-admin-app .filter-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

/* ========================================
   LISTES (MISSIONS, PLANNING, GESTION)
   ======================================== */
body.mobile-admin-app .missions-container,
    body.mobile-admin-app .planning-container,
    body.mobile-admin-app .items-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

body.mobile-admin-app .mission-card,
    body.mobile-admin-app .planning-card,
    body.mobile-admin-app .item-card {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

body.mobile-admin-app .mission-card:active,
    body.mobile-admin-app .planning-card:active,
    body.mobile-admin-app .item-card:active {
    transform: scale(0.98);
    box-shadow: var(--shadow-md);
}

body.mobile-admin-app .mission-card__header,
    body.mobile-admin-app .planning-card__header,
    body.mobile-admin-app .item-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

body.mobile-admin-app .mission-card__title,
    body.mobile-admin-app .planning-card__title,
    body.mobile-admin-app .item-card__title {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-primary);
}

body.mobile-admin-app .mission-card__badge,
    body.mobile-admin-app .status-badge {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
}

body.mobile-admin-app .status-badge--success {
    background-color: var(--success-light);
    color: var(--success-color);
}

body.mobile-admin-app .status-badge--warning {
    background-color: var(--warning-light);
    color: var(--warning-color);
}

body.mobile-admin-app .status-badge--danger {
    background-color: var(--danger-light);
    color: var(--danger-color);
}

body.mobile-admin-app .status-badge--info {
    background-color: var(--info-light);
    color: var(--info-color);
}

body.mobile-admin-app .mission-card__details,
    body.mobile-admin-app .planning-card__details,
    body.mobile-admin-app .item-card__details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

body.mobile-admin-app .mission-card__detail,
    body.mobile-admin-app .planning-card__detail,
    body.mobile-admin-app .item-card__detail {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

body.mobile-admin-app .mission-card__detail svg,
    body.mobile-admin-app .planning-card__detail svg,
    body.mobile-admin-app .item-card__detail svg {
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

body.mobile-admin-app .item-card__actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

body.mobile-admin-app .item-card__action-btn {
    flex: 1;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

body.mobile-admin-app .item-card__action-btn:active {
    background-color: var(--bg-tertiary);
}

body.mobile-admin-app .item-card__action-btn--primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

body.mobile-admin-app .item-card__action-btn--danger {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

body.mobile-admin-app .item-card__action-btn svg {
    width: 16px;
    height: 16px;
}

/* ========================================
   TABS (GESTION)
   ======================================== */
body.mobile-admin-app .tabs-container {
    position: sticky;
    top: var(--header-height);
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    z-index: 50;
}

body.mobile-admin-app .tab-btn {
    flex: 1;
    padding: var(--spacing-md);
    border: none;
    background-color: transparent;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    transition: color 0.2s;
}

body.mobile-admin-app .tab-btn svg {
    width: 20px;
    height: 20px;
}

body.mobile-admin-app .tab-btn--active {
    color: var(--primary-color);
}

body.mobile-admin-app .tab-btn--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--primary-color);
}

body.mobile-admin-app .tab-content {
    display: none;
}

body.mobile-admin-app .tab-content--active {
    display: block;
}

/* ========================================
   PLANNING
   ======================================== */
body.mobile-admin-app .date-selector {
    background-color: var(--bg-primary);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: var(--header-height);
    z-index: 50;
}

body.mobile-admin-app .date-nav-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s;
}

body.mobile-admin-app .date-nav-btn:active {
    background-color: var(--bg-tertiary);
}

body.mobile-admin-app .date-nav-btn svg {
    width: 20px;
    height: 20px;
}

body.mobile-admin-app .current-date {
    position: relative;
}

body.mobile-admin-app .current-date span {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

body.mobile-admin-app .date-picker-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.mobile-admin-app .week-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

body.mobile-admin-app .week-day {
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
}

body.mobile-admin-app .week-day__header {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-color);
}

body.mobile-admin-app .week-day__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* ========================================
   FLOATING ACTION BUTTON (FAB)
   ======================================== */
body.mobile-admin-app .fab {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + var(--spacing-lg));
    right: var(--spacing-lg);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background-color: var(--primary-color);
    color: white;
    border: none;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    z-index: 90;
}

body.mobile-admin-app .fab:active {
    transform: scale(0.95);
    box-shadow: var(--shadow-md);
}

body.mobile-admin-app .fab svg {
    width: 24px;
    height: 24px;
}

/* ========================================
   MODALS
   ======================================== */
body.mobile-admin-app .modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: flex-end;
}

body.mobile-admin-app .modal.modal--open {
    display: flex;
}

body.mobile-admin-app .modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    animation: mobile-admin-fadeIn 0.2s ease-out;
}

body.mobile-admin-app .modal-content {
    position: relative;
    background-color: var(--bg-primary);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: mobile-admin-slideUp 0.3s ease-out;
}

body.mobile-admin-app .modal-content--small {
    max-height: 50vh;
}

body.mobile-admin-app .modal-content--form {
    max-height: 85vh;
}

body.mobile-admin-app .modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background-color: var(--bg-primary);
    z-index: 10;
}

body.mobile-admin-app .modal-title {
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--text-primary);
}

body.mobile-admin-app .modal-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color 0.2s;
}

body.mobile-admin-app .modal-close:active {
    background-color: var(--bg-tertiary);
}

body.mobile-admin-app .modal-close svg {
    width: 24px;
    height: 24px;
}

body.mobile-admin-app .modal-body {
    padding: var(--spacing-lg);
}

body.mobile-admin-app .modal-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

@keyframes mobile-admin-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mobile-admin-slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ========================================
   FORMULAIRES
   ======================================== */
body.mobile-admin-app .form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

body.mobile-admin-app .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

body.mobile-admin-app .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

body.mobile-admin-app .form-label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

body.mobile-admin-app .form-input,
    body.mobile-admin-app .form-select,
    body.mobile-admin-app .form-textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    font-size: var(--font-md);
    color: var(--text-primary);
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

body.mobile-admin-app .form-input:focus,
    body.mobile-admin-app .form-select:focus,
    body.mobile-admin-app .form-textarea:focus {
    border-color: var(--primary-color);
}

body.mobile-admin-app .form-textarea {
    resize: vertical;
    min-height: 80px;
}

body.mobile-admin-app .form-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* ========================================
   BOUTONS
   ======================================== */
body.mobile-admin-app .btn {
    flex: 1;
    padding: var(--spacing-md);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-md);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    text-align: center;
}

body.mobile-admin-app .btn:active {
    transform: scale(0.98);
}

body.mobile-admin-app .btn--primary {
    background-color: var(--primary-color);
    color: white;
}

body.mobile-admin-app .btn--primary:active {
    background-color: var(--primary-dark);
}

body.mobile-admin-app .btn--secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

body.mobile-admin-app .btn--secondary:active {
    background-color: var(--border-color);
}

body.mobile-admin-app .btn--danger {
    background-color: var(--danger-color);
    color: white;
}

body.mobile-admin-app .btn--danger:active {
    background-color: #c5221f;
}

/* ========================================
   ÉTATS VIDES & CHARGEMENT
   ======================================== */
body.mobile-admin-app .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-tertiary);
}

body.mobile-admin-app .empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-md);
    color: var(--text-tertiary);
}

body.mobile-admin-app .empty-state p {
    font-size: var(--font-md);
    margin-bottom: var(--spacing-md);
}

body.mobile-admin-app .loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-md);
}

body.mobile-admin-app .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--bg-tertiary);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: mobile-admin-spin 0.8s linear infinite;
}

@keyframes mobile-admin-spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   BOTTOM NAVIGATION
   ======================================== */
body.mobile-admin-app .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
}

body.mobile-admin-app .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--spacing-xs);
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color 0.2s;
    position: relative;
}

body.mobile-admin-app .nav-item svg {
    width: 24px;
    height: 24px;
}

body.mobile-admin-app .nav-item span {
    font-size: var(--font-xs);
    font-weight: 500;
}

body.mobile-admin-app .nav-item--active {
    color: var(--primary-color);
}

body.mobile-admin-app .nav-item:active {
    color: var(--primary-dark);
}

/* ========================================
   RESPONSIVE & SAFE AREAS
   ======================================== */
@supports (padding: env(safe-area-inset-top)) {
    body.mobile-admin-app .header {
        padding-top: env(safe-area-inset-top);
        height: calc(var(--header-height) + env(safe-area-inset-top));
    }
    
    body.mobile-admin-app .main-content {
        margin-top: calc(var(--header-height) + env(safe-area-inset-top));
    }
    
    body.mobile-admin-app .search-filter-bar,
    body.mobile-admin-app .tabs-container,
    body.mobile-admin-app .date-selector {
        top: calc(var(--header-height) + env(safe-area-inset-top));
    }
}

/* Tablettes et plus grand */
@media (min-width: 768px) {
    body.mobile-admin-app .main-content {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
    }
    
    body.mobile-admin-app .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    body.mobile-admin-app .shortcuts-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    body.mobile-admin-app .bottom-nav {
        max-width: 768px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Impression */
@media print {
    body.mobile-admin-app .header,
    body.mobile-admin-app .bottom-nav,
    body.mobile-admin-app .fab,
    body.mobile-admin-app .search-filter-bar,
    body.mobile-admin-app .filters-panel {
        display: none !important;
    }
    
    body.mobile-admin-app .main-content {
        margin-top: 0;
        padding-bottom: 0;
    }
}

/* Mode sombre (à implémenter si nécessaire) */
@media (prefers-color-scheme: dark) {
    /* Variables pour le mode sombre */
    /* À implémenter selon les besoins */
}