/* ═══ FIȘIER PARTAJAT (afood-shared/css/shell.css) — nu edita în aplicație; editează în afood-shared, apoi: python sync_shared.py --apply ═══ */

/* Stiluri de bază = tabletă (640–1023). Mobilul și desktopul le suprascriu la final. */

/* ─── 8. Cadrul aplicației ─────────────────────────────────────────────── */
.app { min-height: 100dvh; }

/* ─── 8.1 Rail (bara laterală) — la bază este sertar (§8.3) ───────────── */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--drawer-w);
  display: flex; flex-direction: column;
  background: var(--rail-bg); border-right: 1px solid var(--rail-line);
  z-index: var(--z-drawer); transform: translateX(-100%); box-shadow: none;
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out);
}
.app.is-drawer-open .rail { transform: none; box-shadow: var(--shadow-3); }

/* Lockup de brand */
.rail-brand {
  display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto;
  height: var(--topbar-h); padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--rail-line);
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: var(--r-2);
  background: var(--accent); color: var(--on-accent);
}
.brand-mark .material-icons { font-size: var(--icon-18); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-size: var(--fs-14); font-weight: 600; line-height: 20px; color: var(--ink-1); }
.brand-tagline { font-size: var(--fs-12); font-weight: 400; line-height: 16px; color: var(--ink-3); }
.rail-close { margin-left: auto; flex: 0 0 auto; }

/* Navigație */
.rail-nav { flex: 1; min-height: 0; padding: var(--sp-2); overflow-y: auto; scrollbar-width: none; }
.rail-nav::-webkit-scrollbar { width: 0; height: 0; }
.rail-label {
  display: block; padding: var(--sp-4) var(--sp-3) var(--sp-1);
  font-size: var(--fs-12); font-weight: 500; line-height: 16px; color: var(--rail-label);
}
.rail-nav > .rail-label:first-child { padding-top: var(--sp-2); }

.nav-item {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; height: 40px; padding: 0 var(--sp-3); margin: 0 0 2px;
  border: 0; border-radius: var(--r-2); background: none; text-align: left; cursor: pointer;
  color: var(--rail-text); font-family: inherit; font-size: var(--fs-13); font-weight: 500; line-height: 20px;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nav-item .material-icons { font-size: var(--icon-20); }
.nav-item-label { flex: 1; }
.nav-item:focus-visible { outline: none; box-shadow: var(--ring); }
.nav-item.active { background: var(--rail-active-bg); color: var(--rail-active-fg); }
.nav-item.active .material-icons { color: var(--accent); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }

/* Contor pe item de nav / clopoțel / buton de filtre */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto; height: 20px; min-width: 20px; padding: 0 6px;
  border-radius: var(--r-full); background: var(--danger); color: var(--on-accent);
  font-size: var(--fs-12); font-weight: 600; line-height: 20px;
}
.nav-badge.is-neutral { background: var(--subtle); color: var(--ink-2); }

/* Subsol: butonul de restrângere (ascuns în modul sertar) */
.rail-footer { display: none; flex: 0 0 auto; padding: var(--sp-2); border-top: 1px solid var(--rail-line); }
.rail-collapse { margin-bottom: 0; }

/* Trunchiere comună a etichetelor din shell (§4.3) */
.brand-name, .brand-tagline, .nav-item-label, .topbar-title, .topbar-subtitle,
.account-name, .account-head-name, .account-head-user {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── 8.3 Scrim + sertar ──────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-scrim);
  animation: scrim-in var(--dur-2) var(--ease-out);
}
@keyframes scrim-in { from { opacity: 0; } }
body.is-drawer-open { overflow: hidden; }

/* ─── 8.2 Bara de aplicație ───────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; right: 0; left: 0; height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-6);
  background: var(--surface); border-bottom: 1px solid var(--line-1);
  box-shadow: none; z-index: var(--z-topbar);
}
.topbar-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); }
.topbar-menu, .topbar-back { flex: 0 0 auto; }
.topbar-menu .material-icons { font-size: var(--icon-24); }
.topbar-heading { display: flex; flex-direction: column; gap: var(--sp-half); min-width: 0; }
.topbar-title {
  margin: 0; font-size: var(--fs-18); font-weight: 600; line-height: 24px;
  letter-spacing: -0.01em; color: var(--ink-1);
}
.topbar-subtitle { margin: 0; font-size: var(--fs-12); font-weight: 400; line-height: 16px; color: var(--ink-3); }
.topbar-right { display: flex; align-items: center; gap: var(--sp-1); flex: 0 0 auto; }
.topbar-bell { position: relative; }
.topbar-bell .nav-badge {
  position: absolute; top: var(--sp-1); right: var(--sp-1); margin-left: 0;
  height: 16px; min-width: 16px; padding: 0 var(--sp-1); line-height: 16px;
}

/* ─── 8.7 Căutare globală (declanșator + paletă) ──────────────────────── */
.topbar-search {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--ctl-md); padding: 0 var(--sp-3); margin-right: var(--sp-1);
  background: var(--subtle); border: 1px solid var(--line-1); border-radius: var(--r-2);
  color: var(--ink-3); font-family: inherit; font-size: var(--fs-13); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.topbar-search:hover { background: var(--surface); border-color: var(--line-3); color: var(--ink-2); }
.topbar-search:focus-visible { outline: none; box-shadow: var(--ring); }
.topbar-search .material-icons { font-size: var(--icon-20); }
.topbar-search-label { min-width: 88px; text-align: left; }
.topbar-search-kbd, .search-hints kbd {
  font-family: var(--font-mono); font-size: var(--fs-12); line-height: 16px;
  padding: 0 var(--sp-1); border: 1px solid var(--line-1); border-radius: var(--r-1);
  background: var(--surface); color: var(--ink-4);
}

.search-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh var(--sp-4) var(--sp-4); background: var(--scrim);
}
.search-overlay[hidden] { display: none; }
.search-panel {
  width: 100%; max-width: 640px; max-height: 68dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-1);
  border-radius: var(--r-4); box-shadow: var(--shadow-3);
}
.search-field {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-1); flex: 0 0 auto;
}
.search-field-icon { color: var(--ink-3); font-size: var(--icon-20); flex: 0 0 auto; }
/* Specificitate 0,2,0: forms.css se încarcă DUPĂ shell.css, iar `.form-input`
   (+ starea de focus) ar redesena altfel un chenar în interiorul câmpului. */
.search-field .search-global-input {
  flex: 1 1 auto; min-width: 0; height: var(--ctl-md); padding: 0;
  border: none; background: transparent; box-shadow: none;
  font-size: var(--fs-16); color: var(--ink-1);
}
.search-field .search-global-input:focus,
.search-field .search-global-input:focus-visible {
  outline: none; box-shadow: none; border: none;
}
.search-field .search-global-input::-webkit-search-cancel-button { display: none; }

.search-results { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-2); }
.search-results.is-busy { opacity: 0.55; }
.search-group + .search-group { margin-top: var(--sp-2); }
.search-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
}
.search-group-label { font-size: var(--fs-12); font-weight: 600; color: var(--ink-3); }
.search-group-more { font-size: var(--fs-12); color: var(--ink-4); }
.search-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-2) var(--sp-3); border: none; background: none;
  border-radius: var(--r-2); text-align: left; cursor: pointer; color: var(--ink-1);
}
.search-item.is-active { background: var(--accent-softer); }
.search-item-icon { flex: 0 0 auto; font-size: var(--icon-20); color: var(--ink-3); }
.search-item.is-active .search-item-icon { color: var(--accent); }
.search-item-text { display: flex; flex-direction: column; min-width: 0; gap: var(--sp-half); }
.search-item-title {
  font-size: var(--fs-14); font-weight: 500; line-height: 20px; color: var(--ink-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-item-sub {
  font-size: var(--fs-12); line-height: 16px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-message {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-10) var(--sp-4); text-align: center;
  color: var(--ink-3); font-size: var(--fs-13);
}
.search-message .material-icons { font-size: 32px; color: var(--ink-4); }
.search-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--line-2); flex: 0 0 auto;
  font-size: var(--fs-12); color: var(--ink-4);
}
.search-hints { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
body.is-search-open { overflow: hidden; }

/* ─── 10.31 Banner global sub bara de aplicație ───────────────────────── */
/* Este un .alert-banner.is-warning fixat; specificitatea 0,2,0 învinge regula
   de bază din components.css (încărcat mai târziu). */
.alert-banner.app-banner {
  position: sticky; top: var(--topbar-h); z-index: var(--z-sticky);
  border-radius: 0; border-width: 0 0 1px;
}

/* ─── 10.27 Meniul de cont ────────────────────────────────────────────── */
.account-trigger {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--ctl-md); padding: 0 var(--sp-2) 0 var(--sp-1);
  border: 0; border-radius: var(--r-2); background: none; cursor: pointer;
  color: var(--ink-1); font-family: inherit;
  transition: background-color var(--dur-1) var(--ease-out);
}
.account-trigger:focus-visible { outline: none; box-shadow: var(--ring); }
.account-name { font-size: var(--fs-13); font-weight: 500; line-height: 20px; max-width: 160px; }
.account-trigger > .material-icons { font-size: var(--icon-18); color: var(--ink-3); }
.account-menu { width: 260px; --left: auto; }
.account-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.account-head-info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); min-width: 0; }
.account-head-name { font-size: var(--fs-14); font-weight: 600; line-height: 20px; color: var(--ink-1); }
.account-head-user { font-size: var(--fs-12); line-height: 16px; color: var(--ink-3); }
.account-head-name, .account-head-user { max-width: 100%; }

/* ─── 8.4 Container de conținut ───────────────────────────────────────── */
.main {
  margin-left: 0; padding-top: var(--topbar-h); min-height: 100dvh;
  transition: margin-left var(--dur-3) var(--ease-out);
}
.page {
  width: 100%; max-width: var(--content-max); margin: 0 auto; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-6) var(--sp-10);
  animation: page-in var(--dur-2) var(--ease-out);
}
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } }

/* ─── 9. Antet de secțiune ────────────────────────────────────────────── */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); min-height: 32px;
}
.section-title {
  margin: 0; font-size: var(--fs-16); font-weight: 600; line-height: 24px;
  letter-spacing: -0.01em; color: var(--ink-1);
}

/* ─── 9.1–9.2 Toolbar (bază = tabletă) ────────────────────────────────── */
.toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-2) var(--sp-4); flex-wrap: nowrap;
}
.toolbar-filters {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 1 1 auto; min-width: 0; flex-wrap: wrap;
}
.toolbar-actions {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-left: auto; flex: 0 0 auto; align-self: flex-start;
}
.toolbar-filters .search-input-wrapper { width: 220px; flex: 0 0 auto; }
.toolbar-filters .form-select { width: auto; min-width: 150px; max-width: 220px; }
.toolbar-filters .month-picker { width: 224px; }
.toolbar-filters .date-range-inputs .form-input { width: 148px; }
.toolbar--sticky {
  position: sticky; top: var(--topbar-h); z-index: var(--z-sticky);
  background: var(--canvas); padding: var(--sp-2) 0; margin: calc(-1 * var(--sp-2)) 0;
}
.toolbar--sticky.is-stuck { box-shadow: 0 1px 0 var(--line-1); }

/* ─── 9.3 Toolbar mobil (structura; vizibilă doar sub 640) ────────────── */
.toolbar-main { display: flex; align-items: center; gap: var(--sp-2); }
.toolbar-main .search-input-wrapper { flex: 1 1 auto; min-width: 0; width: auto; }
.toolbar-main > .btn, .toolbar-main > .dropdown { flex: 0 0 auto; }
.toolbar-filter-btn { position: relative; flex: 0 0 auto; }
.toolbar-filter-btn .nav-badge {
  position: absolute; top: calc(-1 * var(--sp-1)); right: calc(-1 * var(--sp-1)); margin-left: 0;
  height: 16px; min-width: 16px; padding: 0 var(--sp-1); line-height: 16px;
}
.toolbar-sheet {
  display: none; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line-1); border-radius: var(--r-3);
}
.toolbar-sheet.is-open { display: flex; }
.toolbar-sheet .form-select, .toolbar-sheet .form-input, .toolbar-sheet .ms { width: 100%; max-width: none; }
.toolbar-sheet .date-range-inputs { flex-wrap: wrap; }
.toolbar-sheet .date-range-inputs .form-input { width: auto; flex: 1 1 140px; min-width: 0; }
.toolbar-sheet .toolbar-reset { align-self: flex-end; }

/* ─── 11. Ecranul de autentificare (două panouri) ─────────────────────── */
/* Mobil: brand compact sus + formular dedesubt. ≥ 960: panou de brand la stânga
   (tentă de accent) și formularul la dreapta, ambele pe toată înălțimea. */
.login { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; background: var(--canvas); }

.login-aside {
  display: flex; flex-direction: column; gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-6) var(--sp-4);
  background: var(--accent-softer); border-bottom: 1px solid var(--line-1);
}
.login-brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.login-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: var(--r-3);
  background: var(--accent); color: var(--on-accent);
}
.login-mark .material-icons { font-size: var(--icon-24); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.login-brand-text { display: flex; flex-direction: column; gap: var(--sp-half); min-width: 0; }
.login-title {
  margin: 0; font-size: var(--fs-22); font-weight: 600; line-height: 28px;
  letter-spacing: -0.02em; color: var(--ink-1);
}
.login-tagline { margin: 0; font-size: var(--fs-13); font-weight: 400; line-height: 18px; color: var(--ink-3); }
.login-points { display: none; }
.login-aside-foot { display: none; }

.login-main {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: var(--sp-4); padding: var(--sp-8) var(--sp-4) var(--sp-6);
}
.login-card {
  width: 100%; max-width: 400px; padding: var(--sp-8) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-5);
  background: var(--surface); border: 1px solid var(--line-1);
  border-radius: var(--r-4); box-shadow: var(--shadow-1);
}
.login-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.login-heading {
  margin: 0; font-size: var(--fs-18); font-weight: 600; line-height: 24px;
  letter-spacing: -0.01em; color: var(--ink-1);
}
.login-sub { margin: 0; font-size: var(--fs-13); line-height: 18px; color: var(--ink-3); }
.login-error { margin: 0; }
.login-fields { display: flex; flex-direction: column; gap: var(--sp-4); }
.login-fields .btn-block { margin-top: var(--sp-2); }
.login-footer { margin: 0; font-size: var(--fs-12); line-height: 16px; color: var(--ink-3); text-align: center; }
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--surface) inset; -webkit-text-fill-color: var(--ink-1);
}

/* ─── 8.6 Pagina de hartă ─────────────────────────────────────────────── */
.page--map {
  position: relative; padding: 0; max-width: none; gap: 0;
  height: calc(100dvh - var(--topbar-h));
}
.map-panel {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  width: 320px; max-height: calc(100% - var(--sp-8));
  display: flex; flex-direction: column; overflow: hidden; z-index: var(--z-map-ui);
  background: var(--surface); border: 1px solid var(--line-1);
  border-radius: var(--r-3); box-shadow: var(--shadow-2);
}
.map-panel-head { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; padding: var(--sp-3); }
.map-panel-head .search-input-wrapper { flex: 1 1 auto; min-width: 0; width: auto; }
.map-panel-toggle { flex: 0 0 auto; }
.map-panel .chip-row { flex: 0 0 auto; padding: 0 var(--sp-3) var(--sp-3); }
.map-panel-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.map-panel-list .list-row.is-selected { background: var(--accent-softer); }
.map-panel-list .row-group {
  position: sticky; top: 0; z-index: 1; padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-12); font-weight: 600; line-height: 16px;
  color: var(--ink-2); background: var(--subtle);
}
/* Leaflet: containerul primește un context de stivuire propriu, ca panourile
   (200–700) să nu urce peste .map-panel, bara de aplicație sau sertar. */
.page--map .leaflet-container, .map-embed.leaflet-container { z-index: 0; }
.page--map .leaflet-top, .page--map .leaflet-bottom,
.map-embed .leaflet-top, .map-embed .leaflet-bottom { z-index: var(--z-map-ui); }
.page--map .leaflet-bar, .map-embed .leaflet-bar { border: 0; border-radius: var(--r-2); box-shadow: var(--shadow-2); overflow: hidden; }
.page--map .leaflet-bar a, .map-embed .leaflet-bar a {
  width: 40px; height: 40px; line-height: 40px;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-1);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.page--map .leaflet-control-zoom, .map-embed .leaflet-control-zoom { margin: 0 var(--sp-4) var(--sp-4) 0; }
.page--map .leaflet-control-attribution, .map-embed .leaflet-control-attribution {
  padding: 0 var(--sp-1); border-radius: var(--r-1);
  background: var(--overlay-surface); color: var(--ink-3); font-size: var(--fs-12); line-height: 16px;
}

.map-embed { height: 400px; }
.gps-map .leaflet-popup-content-wrapper,
.map-embed .leaflet-popup-content-wrapper {
  padding: var(--sp-3); background: var(--surface); color: var(--ink-1);
  border: 1px solid var(--line-1); border-radius: var(--r-3); box-shadow: var(--shadow-2);
}
.gps-map .leaflet-popup-content,
.map-embed .leaflet-popup-content { margin: 0; font: 400 var(--fs-13)/18px var(--font-ui); }
.gps-map .leaflet-popup-tip,
.map-embed .leaflet-popup-tip { background: var(--surface); box-shadow: none; }
.gps-map .leaflet-popup-content .detail-grid { gap: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; }

/* Mânerul de sheet apare doar când panoul CHIAR e sheet (telefon) — vezi blocul ≤ 639. */

/* Pista de presetări din panou: 4 chip-uri nu încap pe un rând în 320 px */
.map-panel .filter-presets { height: auto; max-width: 100%; flex-wrap: wrap; }
.map-panel .preset-chip { height: var(--ctl-sm); }

/* ─── Hover (doar pe dispozitive cu cursor) ───────────────────────────── */
@media (hover: hover) {
  .nav-item:hover { background: var(--rail-hover); color: var(--ink-1); }
  .nav-item.active:hover { background: var(--rail-active-bg); color: var(--rail-active-fg); }
  .account-trigger:hover { background: var(--subtle); }
  .page--map .leaflet-bar a:hover, .map-embed .leaflet-bar a:hover { background: var(--subtle); color: var(--ink-1); }
}

/* ─── Mobil ≤ 639 ─────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .topbar { padding: 0 var(--sp-4); }
  .topbar-title {
    font-size: var(--fs-16); line-height: 22px; white-space: normal; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .topbar-subtitle { display: none; }

  /* Căutarea globală devine buton-pictogramă: bara de sus e îngustă (§8.7). */
  .topbar-search { width: var(--ctl-md); padding: 0; justify-content: center; margin-right: 0; }
  .topbar-search-label, .topbar-search-kbd { display: none; }
  .search-overlay { padding: 0; }
  .search-panel { max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  /* Scurtăturile de tastatură n-au sens pe touch — rămâne doar numărul de rezultate. */
  .search-hints { display: none; }
  .search-foot { justify-content: flex-end; }

  .account-trigger { width: var(--ctl-md); padding: 0; justify-content: center; }
  .account-name, .account-trigger > .material-icons { display: none; }
  .account-menu {
    position: fixed; inset: auto 0 0 0; width: auto; max-width: none;
    border-radius: var(--r-4) var(--r-4) 0 0; box-shadow: var(--shadow-3);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .page { gap: var(--sp-4); padding: var(--sp-4) var(--sp-4) var(--sp-8); }

  .toolbar { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .toolbar .month-picker, .toolbar .date-range-picker { width: 100%; }
  .toolbar-main .month-picker { width: auto; flex: 1 1 auto; min-width: 0; }
  .map-embed { height: 320px; }
  .map-panel .filter-presets { height: var(--ctl-md); max-width: none; flex-wrap: nowrap; }
  .map-panel .preset-chip { height: 100%; }

  .login-aside { padding: var(--sp-6) var(--sp-4) var(--sp-3); }
  .login-main { padding: var(--sp-6) var(--sp-4); }
  .login-card { padding: var(--sp-6) var(--sp-5); }

  /* Panoul hărții devine bottom-sheet cu două trepte (§8.6).
     `--sheet-collapsed` = mâner 24 + antet 68 + rândul de chip-uri 56: exact cât
     trebuie ca treapta strânsă să arate CHIAR căutarea și chip-urile. */
  .map-panel {
    --sheet-collapsed: 148px;
    inset: auto 0 0 0; width: auto; height: var(--sheet-collapsed); max-height: 60dvh;
    border-width: 1px 0 0; border-radius: var(--r-4) var(--r-4) 0 0;
    box-shadow: var(--shadow-3); padding-bottom: env(safe-area-inset-bottom);
    transition: height var(--dur-3) var(--ease-out);
    /* Deasupra controalelor Leaflet: extins, sheet-ul le acoperă curat. */
    z-index: calc(var(--z-map-ui) + 1);
  }
  .map-panel.is-expanded { height: 60dvh; }
  .map-panel > .sheet-grabber { display: flex; }
  .page--map .leaflet-bottom { bottom: calc(148px + var(--sp-4) + env(safe-area-inset-bottom)); }
}

/* Telefon în peisaj: fără toolbar lipicios, login compact (§7) */
@media (max-width: 639px) and (max-height: 500px) {
  .toolbar--sticky { position: static; box-shadow: none; }
  .login-aside { padding: var(--sp-3) var(--sp-4); }
  .login-main { padding: var(--sp-3) var(--sp-4); }
}

/* ─── Desktop ≥ 1024 ──────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .map-embed { height: 480px; }
  .rail { width: var(--rail-w); transform: none; box-shadow: none; z-index: var(--z-rail); }
  .app.is-collapsed .rail { width: var(--rail-w-collapsed); }
  /* Specificitate 0,2,0: `.btn` din forms.css (încărcat mai târziu) ar câștiga altfel. */
  .topbar .topbar-menu, .rail .rail-close, .scrim { display: none; }
  .rail-footer { display: block; }

  .topbar { left: var(--rail-w); padding: 0 var(--sp-8); transition: left var(--dur-3) var(--ease-out); }
  .app.is-collapsed .topbar { left: var(--rail-w-collapsed); }
  .main { margin-left: var(--rail-w); }
  .app.is-collapsed .main { margin-left: var(--rail-w-collapsed); }

  .page { gap: var(--sp-6); padding: var(--sp-6) var(--sp-8) var(--sp-12); }
  .toolbar-filters .search-input-wrapper { width: 260px; }

  /* Rail restrâns: doar pictograme */
  .app.is-collapsed .rail-brand { justify-content: center; padding: 0; }
  .app.is-collapsed .brand-text,
  .app.is-collapsed .nav-item-label { display: none; }
  .app.is-collapsed .nav-item { justify-content: center; padding: 0; }
  .app.is-collapsed .rail-label {
    height: 1px; padding: 0; margin: var(--sp-2) var(--sp-3); background: var(--rail-line);
    overflow: hidden; white-space: nowrap; text-indent: 100%;
  }
  .app.is-collapsed .nav-badge {
    position: absolute; top: var(--sp-2); right: var(--sp-4); margin-left: 0;
    width: 8px; height: 8px; min-width: 0; padding: 0;
    overflow: hidden; white-space: nowrap; text-indent: 100%;
  }
}

/* Tooltip pentru rail-ul restrâns (doar cu cursor) */
@media (min-width: 1024px) and (hover: hover) {
  .app.is-collapsed .nav-item[data-label]:hover::after {
    content: attr(data-label); position: absolute; left: calc(100% + var(--sp-2));
    top: 50%; transform: translateY(-50%); z-index: var(--z-tooltip);
    height: 32px; padding: 0 var(--sp-3); white-space: nowrap;
    font-size: var(--fs-13); font-weight: 500; line-height: 32px;
    background: var(--ink-1); color: var(--on-accent);
    border-radius: var(--r-2); box-shadow: var(--shadow-2);
  }
}

/* ─── Autentificare pe ecran lat ≥ 960 ────────────────────────────────── */
@media (min-width: 960px) {
  .login { grid-template-rows: 1fr; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .login-aside {
    position: relative; justify-content: center; gap: var(--sp-8);
    padding: var(--sp-12); border-bottom: none; border-right: 1px solid var(--line-1);
  }
  .login-aside-foot { position: absolute; left: var(--sp-12); bottom: var(--sp-12); }
  .login-brand { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .login-mark { width: 56px; height: 56px; border-radius: var(--r-4); }
  .login-mark .material-icons { font-size: 28px; }
  .login-title { font-size: var(--fs-28); line-height: 34px; }
  .login-tagline { font-size: var(--fs-16); line-height: 24px; }
  .login-points { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
  .login-point { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-14); color: var(--ink-2); }
  .login-point .material-icons { font-size: var(--icon-20); color: var(--accent); flex: 0 0 auto; }
  .login-aside-foot { display: block; margin: 0; font-size: var(--fs-12); color: var(--ink-3); }
  .login-main { justify-content: center; padding: var(--sp-12); }
  .login-card { max-width: 380px; padding: 0; border: none; box-shadow: none; background: transparent; }
  .login-main .login-footer { display: none; }
}