/* ═══════════════════════════════════════════════════════════
   RESPONSIVE.CSS — All breakpoint overrides in one place
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   TABLET (≤1200px)
   ═══════════════════════════════════════ */
@media (max-width: 1200px) {
  .topbar__center { max-width: min(560px, 100%); }
}

/* ═══════════════════════════════════════
   DESKTOP: smooth details open
   ═══════════════════════════════════════ */
@media (min-width: 981px) {
  body.theme-hud .sidebar--right .sidebar__scroll {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    padding-right: 6px;
    box-sizing: border-box;
  }

  details.panel.is-collapsible[open] > :not(summary) {
    animation: detailsIn .16s ease-out;
    transform-origin: top;
  }

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

/* ═══════════════════════════════════════
   MOBILE (≤980px) — Bottom sheet layout
   ═══════════════════════════════════════ */
@media (max-width: 980px) {
  :root {
    --layout-gap: 8px;
    --hudbar-w: min(520px, calc(100% - 18px));
    --pm-top: 110px;
    --pm-right: 10px;
    --pm-btn: 40px;
    --pm-maxh: calc(100dvh - 230px);
  }

  /* ── Topbar mobile ── */
  body.theme-hud .topbar__row--1 {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  body.theme-hud #map-fullscreen-btn { display: none !important; }

  body.theme-hud .topbar__left .brand { display: none !important; }

  body.theme-hud .topbar__right { gap: 8px !important; }

  body.theme-hud .topbar__right .btn {
    height: 36px;
    min-width: 40px;
    padding: 0 10px;
  }

  /* ── Brand as pseudo-element ── */
  body.theme-hud .topbar::after {
    content: "ОПЕРАТИВНАЯ КАРТА";
    display: block;
    text-align: center;
    margin: 2px 10px 6px;
    padding: 6px 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-surface) 72%, transparent);
    box-shadow: var(--ui-shadow-soft);
    font-family: var(--font-title);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ui-accent) 72%, var(--ui-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: var(--ui-blur);
    -webkit-backdrop-filter: var(--ui-blur);
  }

  /* ── Layout ── */
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 8px;
  }

  /* ── Sidebars as bottom sheets ── */
  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6000;
    transform: translateY(calc(100% - 64px));
    transition: transform .22s ease;
    max-height: calc(100dvh - (var(--topbar-h) + var(--topbar-h2) + var(--sat) + 8px));
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
    touch-action: pan-y;
  }

  .sidebar.is-open { transform: translateY(0); }

  .sidebar--left,
  .sidebar--right {
    margin-bottom: var(--sab);
  }

  .map-wrapper {
    border-radius: var(--r-lg);
    height: calc(100dvh - (var(--topbar-h) + var(--topbar-h2) + var(--sat) + var(--sab) + 16px));
  }

  /* ── Mobile segment ── */
  body.theme-hud .m-seg {
    width: 100%;
    display: flex;
    gap: 8px;
    padding: 6px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--ui-surface) 85%, transparent);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-soft);
    backdrop-filter: var(--ui-blur);
    -webkit-backdrop-filter: var(--ui-blur);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.theme-hud .m-seg::-webkit-scrollbar { display: none; }

  body.theme-hud .m-seg__btn {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ui-text-2);
    font-family: var(--font-title);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.theme-hud .m-seg__btn.is-active {
    background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2));
    color: rgba(0, 0, 0, .92);
    border-color: color-mix(in srgb, var(--ui-accent) 55%, transparent);
    box-shadow: var(--ui-glow);
  }

  /* ── Callsign mobile ── */
  #hud-callsign-mobile { display: block !important; }

  /* ── Filters grid ── */
  body.theme-hud #filters-panel .chip-group {
    grid-template-columns: 1fr;
  }

  /* ── Analytics ── */
  body.theme-hud .analytics__row {
    grid-template-columns: 1fr;
  }

  /* ── Add point form ── */
  body.theme-hud .addPoint__coordsValue {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.theme-hud .addPoint__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* ── Image modal ── */
  body.theme-hud .img-modal__content {
    width: 96vw;
    max-height: 94vh;
    padding: 10px;
  }

  body.theme-hud .img-modal__img { max-height: 66vh; }

  /* ── Popup ── */
  body.theme-hud .leaflet-popup-content { min-width: 260px; }
  body.theme-hud .popup-coord-row { grid-template-columns: 64px 1fr; }

  /* ── Category dropdown ── */
  body.theme-hud .msel__list { max-height: min(380px, 52vh); }
}

/* ═══════════════════════════════════════
   LIGHT THEME: text overrides
   ═══════════════════════════════════════ */
body.theme-hud[data-ui-theme="light"] .topbar,
body.theme-hud[data-ui-theme="light"] .brand__subtitle,
body.theme-hud[data-ui-theme="light"] .status-indicator__text,
body.theme-hud[data-ui-theme="light"] .hud-meta,
body.theme-hud[data-ui-theme="light"] #hud-clock,
body.theme-hud[data-ui-theme="light"] .hud-mode {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

body.theme-hud[data-ui-theme="light"] .brand__subtitle {
  color: color-mix(in srgb, var(--ui-accent) 65%, var(--ui-text)) !important;
}

/* ── Light popup text ── */
body.theme-hud[data-ui-theme="light"] .popup-card.popup-card--clean { color: var(--ui-text) !important; }
body.theme-hud[data-ui-theme="light"] .popup-title { color: color-mix(in srgb, var(--ui-accent) 70%, var(--ui-text)) !important; }
body.theme-hud[data-ui-theme="light"] .popup-datetime,
body.theme-hud[data-ui-theme="light"] .popup-id,
body.theme-hud[data-ui-theme="light"] .popup-source { color: var(--ui-text-dim) !important; }
body.theme-hud[data-ui-theme="light"] .popup-label { color: color-mix(in srgb, var(--ui-accent) 65%, var(--ui-text)) !important; }
body.theme-hud[data-ui-theme="light"] .popup-text { color: var(--ui-text-2) !important; }
body.theme-hud[data-ui-theme="light"] .popup-text b { color: var(--ui-text) !important; }
body.theme-hud[data-ui-theme="light"] .popup-coord-k { color: var(--ui-text-dim) !important; }
body.theme-hud[data-ui-theme="light"] .popup-coord-v { color: var(--ui-text) !important; }

/* ── Light Geoman icons ── */
body.theme-hud[data-ui-theme="light"] .leaflet-pm-toolbar .button-container a .control-icon {
  filter: saturate(0) brightness(0.35) !important;
}

/* ── Auto light (system) ── */
@media (prefers-color-scheme: light) {
  body.theme-hud:not([data-ui-theme="dark"]) .topbar,
  body.theme-hud:not([data-ui-theme="dark"]) .brand__subtitle,
  body.theme-hud:not([data-ui-theme="dark"]) .status-indicator__text,
  body.theme-hud:not([data-ui-theme="dark"]) .hud-meta,
  body.theme-hud:not([data-ui-theme="dark"]) #hud-clock,
  body.theme-hud:not([data-ui-theme="dark"]) .hud-mode {
    color: var(--ui-text) !important;
    text-shadow: none !important;
  }

  body.theme-hud:not([data-ui-theme="dark"]) .brand__subtitle {
    color: color-mix(in srgb, var(--ui-accent) 65%, var(--ui-text)) !important;
  }

  body.theme-hud:not([data-ui-theme="dark"]) .popup-card.popup-card--clean { color: var(--ui-text) !important; }
  body.theme-hud:not([data-ui-theme="dark"]) .popup-title { color: color-mix(in srgb, var(--ui-accent) 70%, var(--ui-text)) !important; }
  body.theme-hud:not([data-ui-theme="dark"]) .popup-text { color: var(--ui-text-2) !important; }
  body.theme-hud:not([data-ui-theme="dark"]) .popup-text b { color: var(--ui-text) !important; }

  body.theme-hud:not([data-ui-theme="dark"]) .leaflet-pm-toolbar .button-container a .control-icon {
    filter: saturate(0) brightness(0.35) !important;
  }
}