/* =============================================================================
   MotoretaRent — navbar + zonă căutare (în rest, stiluri din pagini).
   ========================================================================== */

/* --- Fără scroll orizontal pe întreg site-ul --- */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* --- Navbar: spațiu între logo și grup dreapta (temă RO/EN, cont, burger) --- */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.5rem, 3vw, 1.25rem);
  flex-wrap: nowrap;
}

.logo {
  flex-shrink: 0;
}

.nav-links {
  min-width: 0;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.375rem, 2.5vw, 0.75rem);
  flex-shrink: 0;
}

/* --- Search box -------------------------------------------- */
.search-box {
  container-type: inline-size;
  container-name: motoreta-search;
  width: min(100%, calc(61.25rem + 4vw));
  max-width: calc(61.25rem + 4vw);
  margin-inline: auto;
  padding: clamp(0.75rem, 2vmin, 1.25rem);
  gap: clamp(0.625rem, 2vmin, 1rem);
  align-items: stretch;
  border-radius: clamp(0.625rem, 1.2vmin, 0.75rem);
}

@container motoreta-search (max-width: 40rem) {
  .search-box {
    flex-wrap: wrap;
  }

  .search-box .search-field,
  .search-box .search-field.search-date-wrap {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

.search-field label {
  font-size: 13px;
  margin-bottom: clamp(0.25rem, 1vmin, 0.4rem);
}

.search-field input,
.search-field select,
.search-dd-trigger,
.search-date-trigger {
  padding: 14px 16px;
  font-size: 16px;
  border-radius: clamp(0.45rem, 0.8vmin, 0.55rem);
}

.search-dd-panel {
  max-height: min(50vh, 14rem);
}

.search-dd-opt {
  padding: clamp(0.5rem, 1.2vmin, 0.625rem) clamp(0.6rem, 1.5vmin, 0.75rem);
  font-size: clamp(0.8rem, 0.76rem + 0.35vmin, 0.875rem);
}

.calendar-popover {
  box-sizing: border-box;
  width: min(38.75rem, calc(100vw - 1.25rem));
  max-width: min(calc(100vw - 1.25rem), 42rem);
  padding: clamp(0.75rem, 2vmin, 1rem);
}

/* Calendar pentru perioadă: o lună + celule mai încăpătoare pe ferestre înguste */
@media (max-width: 38rem) {
  .calendar-popover .calendar-luni > .calendar-month-block:nth-child(n + 2) {
    display: none;
  }

  .calendar-luni {
    display: block;
  }

  .calendar-popover {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    padding: clamp(0.65rem, 3vmin, 0.875rem);
  }

  .cal-zi,
  .cal-zi-gol {
    min-height: clamp(2rem, 10vmin, 2.375rem);
  }

  .cal-zi {
    font-size: clamp(0.68rem, 0.62rem + 0.55vmin, 0.8125rem);
  }
}

/* =============================================================================
   Mobil (≤768px) — aliniere burger + banner cookies lipit de marginea de jos
   ========================================================================== */
@media (max-width: 768px) {
  /* Grupul de acțiuni nu adaugă spațiu suplimentar la dreapta */
  .nav-actions {
    margin-right: 0;
    padding-right: 0;
  }

  .nav-burger-wrap {
    margin-right: 0;
  }

  /* Anulează padding-ul intern dreapta al butonului, ca pictograma să fie
     flush cu marginea dreaptă (simetric cu logo-ul din stânga). */
  .nav-burger {
    margin-right: -8px;
  }

  /* Banner cookies: lipit exact de marginea de jos a ecranului */
  .cc-banner {
    bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* --- Modal de rezervare: fără depășire orizontală --- */
  #modal-overlay .modal {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Calendarul din modal se încadrează în lățimea containerului (nu a viewport-ului) */
  .modal-rez-date-wrap .calendar-popover {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    left: 0;
    right: 0;
    transform: none;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Celulele calendarului se scalează proporțional (7 coloane egale) */
  .modal-rez-date-wrap .calendar-weekdays,
  .modal-rez-date-wrap .calendar-zile {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .modal-rez-date-wrap .cal-zi {
    min-width: 0;
    width: 100%;
  }
}

/* =============================================================================
   Admin (admin.html) — scope: #admin-app, ecrane < 768px
   ========================================================================== */
@media (max-width: 767px) {
  #admin-app nav {
    padding-inline: clamp(0.75rem, 3vw, 1rem);
    min-height: auto;
  }

  #admin-app #sectiune-masini .bara-cautare {
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
  }

  #admin-app #sectiune-masini .bara-cautare .btn-adauga {
    font-size: 13px;
    padding: 8px 14px;
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    text-align: center;
  }

  #admin-app .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1rem clamp(0.75rem, 3vw, 1rem);
    gap: 12px;
  }

  #admin-app .stat-sum-row {
    grid-template-columns: 1fr !important;
  }

  /* Tab-uri: un rând orizontal cu scroll */
  #admin-app .tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: 0 clamp(0.5rem, 2vw, 0.75rem);
    margin-bottom: 16px;
    scrollbar-width: thin;
  }

  #admin-app .tabs .tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 12px;
  }

  #admin-app .sectiune {
    padding: 0 clamp(0.75rem, 3vw, 1rem) 1.5rem;
  }

  /*
   Tabele: container block + overflow-x + touch scroll.
   Tabelul rămâne display:table pentru layout corect.
  */
  #admin-app .tabel-container,
  #admin-app .stat-tabel-wrap {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #admin-app .tabel-container table,
  #admin-app .stat-tabel-wrap table {
    display: table;
    width: max-content;
    max-width: none;
    min-width: 100%;
  }

  /* Butoane mai mici în coloana Acțiuni */
  #admin-app td .actiuni {
    gap: 6px;
    flex-wrap: wrap;
  }

  #admin-app .btn-editeaza,
  #admin-app .btn-sterge {
    padding: 5px 9px;
    font-size: 11px;
  }

  #admin-app .btn-ordine {
    padding: 3px 6px;
    font-size: 11px;
    min-width: 24px;
  }

  #admin-app .stat-btn-km {
    padding: 5px 9px;
    font-size: 11px;
  }

  /* Form modal adăugare/editare mașină — o coloană */
  #admin-app #modal-masina .form-rand {
    grid-template-columns: 1fr !important;
  }

  #admin-app #modal-masina .camp[style*='grid-column'] {
    grid-column: 1 / -1 !important;
  }

  /* Modaluri */
  #admin-app .modal-overlay .modal {
    width: 95vw;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 1.25rem 1rem 1.5rem;
    margin: 0;
  }

  #admin-app .modal-overlay .modal .modal-inchide {
    top: 10px;
    right: 12px;
  }
}