/* responsive.css — adaptive layout for phone / tablet / desktop.
 *
 * Mobile-first base lives in base.css; this file scales it UP so the app feels
 * native on tablet and desktop (not a blown-up phone).
 *
 * Breakpoints:
 *   <600     phone:        single column, fixed bottom tab bar
 *   >=600    large phone:  2-up grids, roomier spacing
 *   >=768    tablet+:      bottom bar -> LEFT SIDEBAR, framed content widths
 *   >=1024   desktop:      denser grids, settings card masonry, hover states
 *   >=1200   wide desktop: LABELLED sidebar, 3-up grids
 *
 * Uses Flexbox + Grid + container queries.
 */

/* =========================================================================
 * 1. PHONE BASE (<600) — ensure content clears the fixed bottom tab bar.
 * ====================================================================== */
.app-main {
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-6));
}
.app-main .list { container-type: inline-size; }

/* Narrow phones: declutter the header so the unit title isn't truncated. */
@media (max-width: 399px) {
  .app-header { gap: var(--sp-2); padding-inline: var(--sp-3); }
  .app-header .user-chip span:last-child { display: none; }   /* avatar only */
  .app-header .user-chip { padding-inline: var(--sp-2); }
  .app-header .title h1, .app-header .title .loc-btn-name { font-size: var(--fs-base); }
  /* Tiny screens: keep the pin + name; the "Schimbă ▾" label is redundant with the
     tap target, so drop it to avoid truncating the location name. */
  .loc-btn-cta { display: none; }
}

/* =========================================================================
 * 2. LARGE PHONE / SMALL TABLET (>=600) — 2-up grids, bigger targets.
 * ====================================================================== */
@media (min-width: 600px) {
  .app-main { padding: var(--sp-5); padding-bottom: calc(var(--tabbar-h) + var(--sp-8)); }

  #screen-dashboard .list,
  #screen-zone .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }
  #screen-dashboard .list .empty,
  #screen-zone .list .empty { grid-column: 1 / -1; }

  #screen-tasks .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }
  #screen-tasks .list .empty { grid-column: 1 / -1; }

  .chips { flex-wrap: wrap; overflow: visible; }
}

/* =========================================================================
 * 3. TABLET & UP (>=768) — bottom bar becomes a LEFT SIDEBAR; content is
 *    framed to comfortable widths so cards don't stretch full-bleed.
 * ====================================================================== */
@media (min-width: 768px) {
  /* Sidebar + content shell via grid. */
  #app {
    display: grid;
    grid-template-columns: 88px 1fr;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-areas:
      "sidebar header"
      "sidebar main";
    min-height: 100dvh;
  }
  .tabbar     { grid-area: sidebar; }
  .app-header { grid-area: header; position: sticky; top: 0; }
  .app-main {
    grid-area: main;
    /* NO overflow-y:auto here. #app uses min-height (not height), so making
       .app-main a scroll container never actually clips — the DOCUMENT scrolls
       instead. If .app-main were a (non-scrolling) scrollport, sticky children
       (the "De făcut" progress strip) would bind to it and never stick. Letting
       the document scroll — same as mobile — makes their sticky offsets work on
       both. The header + sidebar stay put via their own sticky positioning. */
    max-width: var(--maxw);
    margin-inline: auto;
    padding: var(--sp-5) var(--sp-6);
    padding-bottom: var(--sp-8);
  }

  /* TAB BAR -> vertical left sidebar */
  .tabbar {
    position: sticky; top: 0; left: 0; bottom: auto;
    flex-direction: column; justify-content: flex-start;
    width: 88px; height: 100dvh;
    border-top: none; border-right: 1px solid var(--border);
    padding: var(--sp-3) 0; gap: var(--sp-1);
    box-shadow: var(--shadow-sm);
    overflow-x: visible; overflow-y: auto;
  }
  .tabbar button {
    flex: none; height: auto; min-height: var(--touch-lg); gap: var(--sp-1); font-size: var(--fs-sm);
    border-radius: var(--radius); margin: 0 var(--sp-2);
    min-width: 0; white-space: normal; text-align: center;
  }
  .tabbar button .ico { font-size: 24px; }
  .tabbar button.active { background: var(--brand-light); }
  .tabbar button .lock { top: var(--sp-1); right: var(--sp-3); }
  /* active indicator: left edge bar instead of top bar */
  .tabbar button.active::before {
    top: 50%; left: 0; bottom: auto;
    transform: translateY(-50%);
    width: 3px; height: 26px;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
  }
  .tabbar button.active .ico { transform: none; }

  /* Sheets become centred modal dialogs on tablet/desktop */
  .sheet-backdrop { align-items: center; justify-content: center; }
  .sheet {
    max-width: 520px;
    border-radius: var(--radius-lg);
    max-height: 88dvh;
    animation: dialogIn .2s ease;
  }
  @keyframes dialogIn {
    from { transform: scale(.97); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
  .toast { top: calc(var(--header-h) + var(--sp-5)); }

  /* Comfortable, centred content widths per screen — the key fix that stops
     forms/cards from stretching the full viewport width. */
  #screen-dashboard, #screen-zone, #screen-report,
  #screen-operators, #screen-settings, #screen-tasks, #screen-types { margin-inline: auto; }
  #screen-operators { max-width: 1600px; }
  #screen-settings  { max-width: 720px; }
  #screen-report    { max-width: 980px; }
  #screen-zone      { max-width: 980px; }
  #screen-dashboard { max-width: 1080px; }
  #screen-tasks     { max-width: 1100px; }
  #screen-types     { max-width: 1100px; }
  /* #screen-structure uses the full canvas for its 3 columns. */
}

/* =========================================================================
 * 4. DESKTOP (>=1024) — denser grids, settings 2-col masonry, hover.
 * ====================================================================== */
@media (min-width: 1024px) {
  .app-main { padding: var(--sp-6) var(--sp-8); }
  .app-header .title h1, .app-header .title .loc-btn-name { font-size: var(--fs-xl); }

  #screen-dashboard .list,
  #screen-zone .list { grid-template-columns: repeat(2, 1fr); }
  #screen-tasks .list { grid-template-columns: repeat(2, 1fr); }

  /* report: non-conformities / entries flow two-up */
  #screen-report .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }
  #screen-report .list .empty { grid-column: 1 / -1; }

  /* settings: many small cards -> two-column masonry instead of one tall column */
  #screen-settings {
    max-width: 1040px;
    column-count: 2;
    column-gap: var(--sp-4);
  }
  #screen-settings > .breadcrumb,
  #screen-settings > h2 { column-span: all; }
  #screen-settings .card { break-inside: avoid; }
  #screen-settings > .btn { break-inside: avoid; }
}

/* =========================================================================
 * 5. WIDE DESKTOP (>=1200) — labelled sidebar + 3-up grids.
 * ====================================================================== */
@media (min-width: 1200px) {
  #app { grid-template-columns: 216px 1fr; }
  .tabbar { width: 216px; }
  .tabbar button {
    flex-direction: row; justify-content: flex-start;
    height: 52px; gap: var(--sp-3);
    padding: 0 var(--sp-4); margin: 0 var(--sp-2);
    font-size: var(--fs-sm); font-weight: 600;
  }
  .tabbar button .ico { font-size: 22px; }
  .tabbar button.active .ico { transform: none; }
  .tabbar button .lock { position: static; margin-left: auto; font-size: var(--fs-sm); top: auto; right: auto; }

  #screen-tasks .list { grid-template-columns: repeat(3, 1fr); }
  #screen-dashboard .list,
  #screen-zone .list { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
 * 6. HOVER AFFORDANCES — only on real pointer devices (mouse/trackpad).
 *    Touch screens keep the existing :active feedback from components.css.
 * ====================================================================== */
@media (hover: hover) and (pointer: fine) {
  button.row:hover { background: var(--surface); border-color: var(--accent); }
  .btn:not(:disabled):hover { filter: brightness(.97); }
  .btn-ghost:hover { background: var(--surface); filter: none; }
  .chip:hover { border-color: var(--accent); }
  .tabbar button:hover { color: var(--brand); background: var(--surface); }
  .icon-btn:hover { background: var(--surface-2); }
  .btn-camera:hover { background: var(--surface-2); }
  .task-toggle:hover { border-color: var(--accent); }
  summary:hover { cursor: pointer; color: var(--brand); }
  /* NOTE: control sizing is now compact in the BASE (variables.css tokens +
     base.css), applied on every device — so it is intentionally NOT re-set here.
     Keeping sizing out of this desktop-only media prevents desktop/touch from
     diverging (the root cause of the earlier "dense only on desktop" bug). */
}

/* =========================================================================
 * 7. CONTAINER QUERIES — list density adapts to the column it lives in.
 * ====================================================================== */
@supports (container-type: inline-size) {
  @container (max-width: 380px) {
    #screen-tasks .list,
    #screen-zone .list,
    #screen-dashboard .list { grid-template-columns: 1fr; }
  }
}

/* =========================================================================
 * 8. STRUCTURA — master-detail on columns (configuration UX).
 *    Mobile: one column (stack). Tablet: 2 columns (objects full-width below).
 *    Desktop: 3 columns (points | zones | objects) side-by-side.
 * ====================================================================== */
#screen-structure .struct-cols {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) {
  #screen-structure .struct-cols { grid-template-columns: 1fr 1fr; }
  #screen-structure .struct-col:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  #screen-structure .struct-cols {
    grid-template-columns: minmax(220px, .9fr) minmax(220px, .9fr) minmax(300px, 1.3fr);
  }
  #screen-structure .struct-col:last-child { grid-column: auto; }
}
#screen-structure .struct-placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 110px; text-align: center;
  border: 1px dashed var(--border); background: transparent;
}
#screen-structure .row.active {
  background: var(--brand-light);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* =========================================================================
 * 9. LANDSCAPE PHONE — keep the bottom bar (sidebar only >=768) and tighten.
 * ====================================================================== */
@media (max-width: 767px) and (orientation: landscape) and (max-height: 480px) {
  .temp-display { font-size: var(--fs-value); padding: var(--sp-3); }
  .numpad button { min-height: var(--touch-primary); }
  .numpad { margin: var(--sp-2) 0; }
}

/* =========================================================================
 * 9b. PLAN 2D — paleta de editare pe ecrane înguste: spațieri minime ca să
 * încapă mai multe butoane pe rând; grupurile (.map-toolgrp) se împachetează
 * ca blocuri întregi, deci rândurile rămân coerente.
 * ====================================================================== */
@media (max-width: 600px) {
  .map-tools { gap: 4px; }
  .map-tools .icon-btn { padding: 4px; }
  .map-toolrow { gap: 4px 8px; }
  .map-controls-actions { gap: 4px 8px; }
}

/* =========================================================================
 * 10. PRINT — daily report friendly (hide chrome).
 * ====================================================================== */
@media print {
  .tabbar, .app-header .ring, .btn, .icon-btn, .btn-camera,
  #btn-export-json, #btn-export-zip, #btn-import-backup { display: none !important; }
  #app { display: block; }
  .app-main { padding: 0; max-width: none; }
  .card, .row { box-shadow: none; border-color: var(--border); break-inside: avoid; }
}