/**
 * ETEA — App-wide mobile & tablet responsiveness
 * Breakpoints: phone ≤767 | tablet 768–1024 | desktop ≥1025
 * Touch-first, safe-area aware, overflow-safe
 */

:root {
  --et-topbar-h: 56px;
  --et-portal-nav-h: calc(56px + env(safe-area-inset-bottom, 0px));
  --et-touch-min: 44px;
  --et-mobile-pad: 12px;
  --et-bp-phone: 767px;
  --et-bp-tablet: 1024px;
}

/* ── Base / viewport ─────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

/* Do NOT target Leaflet map canvas/svg — global height:auto collapses vector
   overlays (routes, coverage, wildfire, GPS trails) to invisible. */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Chart canvases outside Leaflet only */
.dashboard-chart-box canvas {
  max-width: 100%;
  height: auto;
}

/* Belt-and-suspenders: Leaflet owns width/height of map vectors */
.leaflet-container canvas,
.leaflet-container svg,
.leaflet-pane > canvas,
.leaflet-pane > svg {
  max-width: none !important;
  max-height: none !important;
}

/* Prevent iOS input zoom */
@media (max-width: 767px) {
  input,
  select,
  textarea,
  .sergio-input,
  .sergio-select,
  .sergio-textarea,
  button,
  .ops-select {
    font-size: 16px !important;
  }
}

/* Touch targets */
@media (max-width: 1024px) {
  .sergio-btn,
  button.sergio-btn,
  .portal-mobile-nav a,
  .portal-mobile-nav__menu,
  .mobile-nav-btn,
  #mobileMenuBtn,
  .sec-admin__tab,
  .eq-stock-filter,
  .eq-stock-btn {
    min-height: var(--et-touch-min);
  }

  a,
  button,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* ── Topbar ──────────────────────────────────── */
@media (max-width: 767px) {
  .topbar {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .topbar h1,
  .topbar .topbar-title,
  #portalHeaderTitle {
    font-size: clamp(0.95rem, 4vw, 1.1rem) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(48vw, 200px);
  }

  .topbar-actions {
    gap: 4px !important;
  }

  .topbar .theme-toggle,
  #themeToggle {
    transform: scale(0.92);
  }

  /* Mission banner: full width under title on phone */
  #missionLockBanner {
    flex: 1 1 100%;
    order: 3;
    max-width: 100% !important;
    margin: 4px 0 0 !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  .weather-risk-badges,
  .weather-header-slot {
    max-width: 42vw;
    overflow: hidden;
  }

  .user-profile-trigger span.sm-show {
    display: none !important;
  }

  .user-profile-trigger {
    padding: 4px 6px !important;
    gap: 0 !important;
  }

  #userMenuBtn.user-menu-chevron {
    width: 36px;
    height: 42px;
  }

  #userDropdown {
    right: 0;
    left: auto;
    min-width: min(220px, calc(100vw - 24px));
    max-width: calc(100vw - 16px);
  }

  .portal-settings-modal {
    width: 100%;
    max-height: min(92dvh, 820px);
    border-radius: 16px 16px 0 0;
    margin-top: auto;
  }

  .portal-settings-overlay {
    align-items: flex-end;
    padding: 0;
  }
}

/* Tablet topbar */
@media (min-width: 768px) and (max-width: 1024px) {
  #portalHeaderTitle {
    max-width: min(40vw, 280px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #missionLockBanner {
    max-width: min(360px, 38vw);
  }
}

/* ── Main content shells ─────────────────────── */
@media (max-width: 767px) {
  main.flex-1:not(.atlasops-shell) {
    padding: var(--et-mobile-pad) !important;
    padding-left: max(var(--et-mobile-pad), env(safe-area-inset-left)) !important;
    padding-right: max(var(--et-mobile-pad), env(safe-area-inset-right)) !important;
    overflow-x: hidden;
  }

  main.flex-1 h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }

  .dashboard-chart-box {
    padding: 12px !important;
  }

  .dashboard-chart-title {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  .dashboard-chart-box canvas {
    max-height: 220px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  main.flex-1:not(.atlasops-shell) {
    padding: 16px !important;
  }
}

/* ── Sidebar (phone) ─────────────────────────── */
@media (max-width: 767px) {
  .sidebar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    max-width: min(280px, 86vw) !important;
  }

  .sidebar nav a {
    min-height: var(--et-touch-min);
    padding: 12px !important;
  }
}

/* ── Map module ──────────────────────────────── */
.et-map-page {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  min-height: 0;
  overflow: hidden;
}

.et-map-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 280px;
  height: calc(100dvh - var(--et-topbar-h));
  height: calc(var(--app-h, 100dvh) - var(--et-topbar-h));
}

body.mobile-portal-mode .et-map-shell {
  height: calc(100dvh - var(--et-topbar-h) - var(--et-portal-nav-h));
  height: calc(var(--app-h, 100dvh) - var(--et-topbar-h) - var(--et-portal-nav-h));
}

.et-map-shell #map {
  width: 100%;
  height: 100% !important;
  min-height: 0;
}

@media (max-width: 640px) {
  #mapLayersPanel,
  .etea-layers-panel {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  .map-toolbar,
  .map-filters-bar,
  .etea-geosearch {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
    max-width: 100%;
  }

  .map-toolbar::-webkit-scrollbar,
  .map-filters-bar::-webkit-scrollbar {
    display: none;
  }
}

/* ── Portal bottom nav ───────────────────────── */
@media (max-width: 767px) {
  .portal-mobile-nav a {
    font-size: 9px;
    gap: 2px;
    padding: 0 2px;
  }

  .portal-mobile-nav a svg {
    width: 18px;
    height: 18px;
  }
}

/* ── Generic tables (scroll + hint) ──────────── */
.et-table-scroll,
.eq-stock-table-wrap,
.sec-admin__table-wrap,
.hr-table-wrap,
[data-table-scroll] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}

@media (max-width: 767px) {
  .eq-stock-table-wrap,
  .sec-admin__table-wrap,
  .hr-table-wrap {
    margin-left: -4px;
    margin-right: -4px;
    border-radius: 10px;
  }

  .eq-stock-table,
  .sec-admin table,
  .hr-table {
    min-width: 560px;
  }

  .eq-stock-table-wrap::after,
  .sec-admin__table-wrap::after,
  .hr-table-wrap::after {
    content: '← σύρτε για περισσότερα →';
    display: block;
    text-align: center;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    padding: 6px 0 2px;
    letter-spacing: 0.04em;
  }

  .eq-stock-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .eq-stock-charge-select,
  .eq-stock-item-pick {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  .eq-stock-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .eq-stock-search {
    width: 100%;
    min-width: 0 !important;
  }

  .eq-stock-filters {
    width: 100%;
  }

  .eq-stock-filter {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ── Rescuers module ─────────────────────────── */
@media (max-width: 767px) {
  .et-rescuers-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .et-rescuers-toolbar .et-filters-row {
    width: 100%;
  }

  .et-rescuers-toolbar__actions {
    margin-left: 0;
    width: 100%;
  }

  .et-rescuers-toolbar__actions .sergio-btn {
    flex: 1 1 auto;
    min-height: var(--et-touch-min);
  }

  .et-filters-row .sergio-btn {
    flex: 1 1 calc(50% - 4px);
    min-height: var(--et-touch-min);
  }

  .et-filters-row .sergio-select,
  .et-filters-row select,
  #rescuerFilters select {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
}

@media (max-width: 420px) {
  .et-filters-row .sergio-select,
  .et-filters-row select,
  #rescuerFilters select {
    flex: 1 1 100% !important;
  }
}

@media (max-width: 640px) {
  #viewModalContainer .rescuer-view-grid,
  #editModalContainer .rescuer-view-grid,
  #addModalContainer .grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  #viewModalContainer .rescuer-view-row,
  #editModalContainer .rescuer-view-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  #viewModalContainer .rescuer-view-k,
  #editModalContainer .rescuer-view-k {
    font-size: 11px;
  }

  /* Tailwind-ish grids in rescuer modals */
  .md\:grid-cols-3,
  .md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ── Modals & overlays → bottom sheets on phone ─ */
@media (max-width: 640px) {
  .sergio-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .sergio-modal,
  .et-detail-modal-shell,
  #eventDetailsModal > div > div {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94dvh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0;
  }

  .sergio-modal__body {
    padding: 16px !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  .modal-backdrop > div,
  #viewModalContainer > div,
  #editModalContainer > div,
  #addModalContainer > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 94dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sergio-btn,
  button.sergio-btn {
    min-height: var(--et-touch-min);
  }

  .sergio-form-grid,
  .sergio-form-grid--two {
    grid-template-columns: 1fr !important;
  }

  .sergio-form-col-span-2 {
    grid-column: span 1 !important;
  }
}

/* ── Eventologio / Emergency ─────────────────── */
@media (max-width: 640px) {
  .et-month-nav {
    gap: 6px;
  }

  .et-month-title {
    font-size: 13px;
    padding: 8px 10px;
    order: -1;
    flex: 1 1 100%;
  }

  .et-calendar-grid,
  .et-cal-grid {
    gap: 4px;
  }

  .et-card__actions,
  .event-card > div:last-child {
    width: 100%;
  }

  .et-card__actions .sergio-btn,
  .event-card .sergio-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .et-cal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ── Security admin ──────────────────────────── */
@media (max-width: 767px) {
  .sec-admin__title {
    font-size: 18px !important;
  }

  .sec-admin__subtitle {
    font-size: 12px !important;
  }

  .sec-admin__header {
    flex-direction: column;
    align-items: stretch;
  }

  .sec-admin__header .sergio-btn {
    width: 100%;
  }

  .sec-admin__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sec-admin__tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .sec-admin__tabs::-webkit-scrollbar {
    display: none;
  }

  .sec-admin__tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 14px !important;
  }
}

/* ── Video Hub ───────────────────────────────── */
@media (max-width: 640px) {
  .vh-toolbar,
  .vh-head {
    flex-direction: column;
    align-items: stretch !important;
  }

  .vh-search,
  .vh-filters {
    width: 100%;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .vh-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── AtlasOps phone landscape ────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  body.atlasop-mobile .layout {
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.atlasop-mobile .mobile-panel-nav {
    height: calc(48px + env(safe-area-inset-bottom, 0px));
  }

  body.atlasop-mobile .mobile-nav-btn span {
    font-size: 9px;
  }

  body.atlasop-mobile #liveMap {
    min-height: 120px;
  }
}

/* ── Login / register ────────────────────────── */
@media (max-width: 767px) {
  .login-shell,
  .register-wizard-shell {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── Utility ─────────────────────────────────── */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }

  .stack-mobile {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .w-mobile-full {
    width: 100% !important;
  }

  .flex-wrap-mobile {
    flex-wrap: wrap !important;
  }
}

@media (min-width: 768px) {
  .show-mobile-only {
    display: none !important;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}