/* =============== DESKTOP (≥1025px) =============== */

/* ============ CARS (DESKTOP ≥1025) ============ */

.desktop-cars-list { display:block !important; }
.mobile-cars-screen { display:none !important; }

.cars-page{
  max-width: 980px;
  margin: 0 auto;
}

.cars-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.cars-title{
  font-size: 22px;
  font-weight: 900;
}

.cars-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.car-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:14px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition:.2s;
  /*cursor:pointer;*/
}

.car-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.car-left{
  display:flex;
  align-items:center;
  gap:14px;
  flex: 1;
  min-width: 0;
}

.car-badge{
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(42,75,216,0.10);
  color:#2a4bd8;
  flex:0 0 auto;
}

.car-badge i{ font-size: 22px; }

.car-info{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 0;
}

.car-plate-line{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.car-plate-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0.12);
  font-weight: 900;
  letter-spacing: 1px;
  background:#fff;
  text-transform: uppercase;
}

.car-cv-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(13,110,253,0.12);
  border: 1px solid rgba(13,110,253,0.25);
  font-weight: 900;
  font-size: 12px;
}

.car-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.car-brand{
  font-weight: 900;
  font-size: 14px;
}

.car-model{
  font-weight: 800;
  font-size: 14px;
  opacity: .85;
}

.car-sub{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size: 12px;
  color: rgba(0,0,0,0.60);
  font-weight: 800;
}

.car-sub-item{
  max-width: 420px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.car-right{
  flex:0 0 auto;
}

.car-actions{
  display:flex;
  gap:6px;
  align-items:center;
}

/* Plate input (desktop too) */
.car-plate-input{
  display:flex;
  align-items:stretch;
  border:2px solid #111;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.car-plate-eu{
  width:56px;
  background:#0b4bb3;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  font-weight:900;
}
.car-plate-eu-top{ font-size:16px; line-height:1; }
.car-plate-eu-bot{ font-size:11px; opacity:.95; line-height:1; }

.car-plate-field{
  width:100%;
  border:0;
  outline:none;
  padding: 12px 14px;
  font-size:18px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}

.cars-hint{
  margin-top:8px;
  font-size:12px;
  color:#666;
  font-weight:700;
}

.cars-parse-preview{
  margin-top:14px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  padding:12px;
  background: rgba(0,0,0,0.02);
}
.cars-parse-title{
  font-weight:900;
  margin-bottom:10px;
  font-size:13px;
}
.cars-parse-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  font-size:12px;
}
.cars-parse-grid div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  font-weight:800;
}
.cars-parse-grid span{ opacity:.7; font-weight:900; }
.cars-parse-grid strong{
  max-width: 180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.cars-meta{
  margin-top: 6px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  padding:12px;
  background: rgba(0,0,0,0.02);
}
.cars-meta-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
  font-weight:800;
  font-size:12px;
}
.cars-meta-row:last-child{ border-bottom:0; }
.cars-meta-row strong{
  max-width: 320px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


.desktop-ndf-list { display: block !important; }
.mobile-ndf-screen { display: none !important; }

/* DESKTOP */
.me-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  display: none;               /* <- enlever !important */
  justify-content: center;
  align-items: center;
  z-index: 999999;
  padding: 20px;
}

/* état ouvert */
.me-modal-overlay.is-open{
  display: flex !important;    /* <- garantit l'ouverture */
}

    .me-modal-box {
        width: 100%;
        max-width: 480px;
        background: #ffffff;
        border-radius: 16px;
        padding: 28px;
        box-shadow: 0 8px 26px rgba(0,0,0,0.25);
        animation: modalFadeInDesktop .25s ease-out;
        position: relative;
    }

    @keyframes modalFadeInDesktop {
        from { transform: translateY(-12px); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
    }

    /* Boutons du modal desktop */
    .me-modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 20px;
    }

    .me-btn-cancel,
    .me-btn-validate {
        padding: 10px 18px;
        border-radius: 10px;
        font-weight: 600;
        border: none;
        cursor: pointer;
    }

    .me-btn-cancel {
        background: #ddd;
    }

    .me-btn-validate {
        background: #2a4bd8;
        color: white;
    }

    .me-type-toggle {
        display: none !important;
    }

    nav.navbar {
        display: flex !important;
    }

    .me-bottom-bar {
        display: none !important;
    }


.expense-summary-mobile {
    display: none;
}

.btn-action-circle {
    display: none;
}

.expense-actions {
    display: flex;
    gap: 8px;
}

.expense-item {
    flex-direction: row;
}

.desktop-expense-list {
    display: block !important;
}
.mobile-expense-screen {
    display: none !important;
}

    /* ---------------------------------------------------- */
    /* FLOATING ACTION BUTTON */
    /* ---------------------------------------------------- */

    .me-fab {
        position: fixed;
        bottom: 90px;
        right: 24px;
        width: 62px;
        height: 62px;
        border-radius: 50%;
        background: #2a4bd8;
        border: none;
        color: white;
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 6px 22px rgba(0,0,0,0.25);
        z-index: 9999;
    }

    .me-fab:hover {
        transform: scale(1.08);
    }


.dash-desktop { display: block !important; }
.dash-mobile  { display: none !important; }

.dash-topbar{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.dash-title{ font-size: 22px; }
.dash-actions{ justify-content: flex-end; }

.dash-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (min-width: 1400px){
  .dash-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* Holidays desktop */
.holidays-header{
  align-items:center;
}

.holidays-title{ font-size:20px; }

.holidays-meters-grid{
  grid-template-columns: repeat(3, 1fr);
}

/* Requests: 2 ou 3 colonnes selon largeur écran */
.holiday-requests-grid{
  grid-template-columns: repeat(3, 1fr);
}

/* Modal: calendrier + sélection côte à côte */
.holiday-modal-grid{
  grid-template-columns: 1.1fr 0.9fr;
}

/* Un peu plus grand sur desktop */
.cal-day{
  min-height:48px;
  font-size:14px;
}

.selection-details{
  max-height: 320px;
}