/* ═══════ EXPOSIT MOBILE — RESPONSIVE ═══════ */
/* Cobre: 320px (celular small) → 4K */

/* ─── HAMBURGER BUTTON ─── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text2);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── SIDEBAR OVERLAY ─── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 199;
}
.sidebar-overlay.visible { display: block; }

/* ═══════ TABLET (≤ 1024px) ═══════ */
@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 200px 1fr;
  }
  .main-content { padding: 16px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ═══════ MOBILE/TABLET (≤ 768px) ═══════ */
@media (max-width: 768px) {
  /* ── Layout ── */
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 52px 1fr;
  }

  /* ── Topbar ── */
  .topbar {
    padding: 0 12px;
    gap: 8px;
    height: 52px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
  }
  .hamburger { display: flex; }
  .nav-brand { min-width: unset; }
  .nav-brand svg { width: 100px; height: 26px; }
  .topbar-actions { gap: 6px; }
  .nav-user { display: none; }
  .notif-btn { padding: 5px 8px; font-size: 13px; }
  .btn-ghost.btn-sm { font-size: .75rem; padding: 5px 8px; }

  /* ── Sidebar ── */
  .sidebar {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: -260px !important;
    width: 250px !important;
    height: 100vh !important;
    z-index: 999 !important;
    transition: left .28s ease, box-shadow .28s ease !important;
    padding-top: 56px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .sidebar.open {
    left: 0 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.45) !important;
  }

  /* ── Main content ── */
  .main-content {
    padding: 12px;
    margin-top: 52px;
    min-height: calc(100vh - 52px);
    overflow-x: hidden;
  }

  /* ── Page header ── */
  .page-hdr {
    gap: 8px;
    margin-bottom: 14px;
  }
  .page-title { font-size: 1.05rem; }

  /* ── Metric cards ── */
  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }
  .card { padding: 12px; }
  .card-num { font-size: 1.3rem; }
  .card-lbl { font-size: .7rem; }

  /* ── Tables → cards on mobile ── */
  .tbl-wrap { border-radius: 8px; overflow: hidden; }

  .tbl-mobile thead { display: none; }
  .tbl-mobile tbody tr {
    display: block;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 10px 12px;
  }
  .tbl-mobile tbody tr:hover { background: var(--bg3); }
  .tbl-mobile td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(48,54,61,.5);
    padding: 6px 0;
    font-size: .82rem;
    gap: 8px;
  }
  .tbl-mobile td:last-child { border-bottom: none; }
  .tbl-mobile td::before {
    content: attr(data-label);
    font-size: .7rem;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0;
    min-width: 90px;
  }
  .tbl-mobile td[data-label=""] { justify-content: flex-end; }
  .tbl-mobile td[data-label=""]::before { display: none; }

  /* ── Buttons ── */
  .btn { padding: 7px 12px; font-size: .8rem; }
  .btn-sm { padding: 5px 9px; font-size: .75rem; }

  /* ── Forms ── */
  .form-grid { grid-template-columns: 1fr !important; }
  .form-row { flex-direction: column; gap: 8px; }
  input, select, textarea {
    font-size: 16px !important; /* prevent iOS zoom */
    max-width: 100%;
  }
  .search-bar input { font-size: 16px !important; }

  /* ── Pedido/Orçamento item rows ── */
  .item-row td { padding: 6px 4px; font-size: .78rem; }
  #items-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #items-table table { min-width: 600px; }

  /* ── Modal ── */
  .modal-backdrop .modal-box {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 5vh auto !important;
    border-radius: 10px !important;
  }
  #modal-personalizar .modal-box {
    width: 98vw !important;
    padding: 14px !important;
  }

  /* ── Tabs ── */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { white-space: nowrap; padding: 7px 12px; font-size: .8rem; }

  /* ── Page-specific: dashboard ── */
  .dash-grid { grid-template-columns: 1fr !important; }

  /* ── Notif panel ── */
  #notif-panel {
    right: 4px !important;
    width: calc(100vw - 8px) !important;
    top: 52px !important;
  }

  /* ── Safe area (notch/home bar) ── */
  .main-content { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}

/* ═══════ SMALL MOBILE (≤ 480px) ═══════ */
@media (max-width: 480px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .card { padding: 10px; }
  .card-num { font-size: 1.15rem; }
  .main-content { padding: 8px; }
  .page-hdr { margin-bottom: 10px; }

  /* ── Item table scroll ── */
  #items-table table { min-width: 550px; }

  /* ── Cockpit: botões grandes touch ── */
  .cockpit-btn, .btn-cockpit, [class*="cockpit"] .btn {
    min-height: 48px !important;
    font-size: .85rem !important;
    padding: 10px 14px !important;
  }

  /* ── Kanban ── */
  .kanban-col { min-width: 260px !important; }
  .kanban-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; gap: 12px; padding-bottom: 12px; }
}

/* ═══════ VERY SMALL (≤ 360px) ═══════ */
@media (max-width: 360px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 5px; }
  .card-num { font-size: 1rem; }
  .topbar { padding: 0 8px; }
  .btn-ghost.btn-sm span { display: none; }
}

/* ═══════ LANDSCAPE MOBILE (height ≤ 500px) ═══════ */
@media (max-height: 500px) and (max-width: 900px) {
  .topbar { height: 44px; position: sticky; }
  .main-content { margin-top: 0; padding: 8px; }
  .sidebar { padding-top: 44px; }
}

/* ═══════ TABLET PORTRAIT (481–768px) ═══════ */
@media (min-width: 481px) and (max-width: 768px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  #items-table table { min-width: 640px; }
}

/* ═══════ 4K / LARGE SCREENS (≥ 2560px) ═══════ */
@media (min-width: 2560px) {
  .app-shell { grid-template-columns: 260px 1fr; }
  body { font-size: 16px; }
  .card-num { font-size: 2rem; }
  .main-content { padding: 32px; }
}

/* ═══════ PRINT OVERRIDE ═══════ */
@media print {
  .sidebar, .topbar, .hamburger, .sidebar-overlay { display: none !important; }
  .app-shell { display: block !important; }
  .main-content { margin: 0 !important; padding: 0 !important; }
}