/* ═══════════════════════════════════════════════
   Lumied Mobile — targeted fixes for known issues
   Included in all portals via <link>

   Strategy: only fix what's broken, don't override
   working desktop styles with !important
   ═══════════════════════════════════════════════ */

/* ────────────────────────────────────────────
   PHONE (<= 768px)
   ──────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Topbar: compact on mobile ── */
  .topbar {
    padding: 0 10px;
    height: 50px;
    gap: 6px;
  }
  .topbar-brand h1 {
    font-size: 13px;
  }
  .topbar-brand span {
    display: none;
  }
  .topbar-brand .leaf,
  .topbar-brand img {
    height: 28px;
    max-height: 28px;
  }
  .topbar-user {
    gap: 4px;
    font-size: 11px;
  }
  .user-name {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
  }
  /* Hide lang switcher on very small screens */
  .lang-switcher {
    display: none;
  }
  /* Compact logout/perfil buttons */
  .topbar-user .logout-btn {
    padding: 4px 8px;
    font-size: 10px;
  }

  /* ── Tables: allow horizontal scroll ── */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 8px 10px;
    font-size: 12px;
  }

  .table-wrap th {
    font-size: 10px;
    padding: 6px 10px;
    white-space: nowrap;
  }

  /* ── Dias da semana: horizontal scroll like a carousel ── */
  .dias-semana-grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  .dias-semana-grid .dia-card {
    min-width: 200px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .dia-card-header {
    padding: 8px 12px;
  }

  .dia-card-header .dia-nome {
    font-size: 13px;
  }

  .dia-card-body {
    padding: 8px 10px;
    min-height: auto;
  }

  /* ── Stats grid: 2 cols ── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-value {
    font-size: 22px;
  }

  .stat-label {
    font-size: 10px;
  }

  .stat-sub {
    font-size: 10px;
  }

  /* ── Stats grids with inline 4-col: force 2 ── */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Ocupação grid: 1 col ── */
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Filter bar: scrollable ── */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .filter-bar .fb {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .filter-bar .p-search-input {
    width: 100%;
    min-width: 140px;
  }

  /* ── Section titles: smaller ── */
  .sec-title {
    font-size: 15px;
    margin-bottom: 10px;
  }

  /* ── Upload cards / form cards ── */
  .upload-card {
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 10px;
  }

  /* ── Form inputs: 16px to prevent iOS zoom ── */
  .ff input,
  .ff select,
  .ff textarea,
  .lf input,
  .lf select {
    font-size: 16px;
  }

  /* ── Almox requisition rows: stack ── */
  .alm-req-row {
    flex-direction: column;
    gap: 8px;
  }

  .alm-budget-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Kanban: stack columns ── */
  .kanban-board {
    flex-direction: column;
    gap: 10px;
  }

  .kanban-col {
    min-width: 100%;
  }

  .kanban-col-body {
    max-height: none;
  }

  /* ── Action buttons: bigger ── */
  .action-btn {
    min-height: 32px;
    padding: 4px 10px;
  }

  .btn-submit,
  .btn-create {
    min-height: 40px;
  }

  /* ── Impressoes/items inline flex: wrap ── */
  .content div[style*="display:flex"][style*="align-items:flex-start"][style*="gap:12px"] {
    flex-direction: column;
  }

  /* ── Search input: full width ── */
  .p-search-input,
  .search-input {
    width: 100%;
  }

  /* ── Modals: nearly full width ── */
  .modal-overlay > div,
  .modal {
    max-width: clamp(300px, 95vw, 540px);
    max-height: 90vh;
    padding: 16px;
  }

  #almModal > div {
    max-width: 95vw;
  }

  /* ── Form inputs/buttons: min touch height ── */
  .ff input,
  .ff select,
  .ff textarea,
  .lf input,
  .lf select,
  .form-group input,
  .form-group select,
  .form-group textarea {
    min-height: 44px;
  }

  button,
  .btn,
  .btn-create,
  .btn-submit,
  .btn-ghost {
    min-height: 44px;
  }

  /* ── Tables without .table-wrap: safety net ── */
  .card[style*="overflow-x:auto"],
  .card[style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: 12px;
  }

  /* ── Inline 2-col grids in forms: stack ── */
  .form-row,
  .ff-row {
    grid-template-columns: 1fr !important;
  }

  /* ── Content bottom padding for portals without bottom nav ── */
  .content {
    padding-bottom: 48px;
  }
}

/* ────────────────────────────────────────────
   SMALL PHONE (<= 480px)
   ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .stats-grid,
  .kpi-grid,
  .plans-grid {
    grid-template-columns: 1fr;
  }

  .stat-row {
    grid-template-columns: 1fr;
  }

  .stat-value {
    font-size: 22px;
  }

  .stat-card {
    padding: 10px;
  }
}

/* ────────────────────────────────────────────
   EXTRA SMALL PHONE (<= 400px)
   ──────────────────────────────────────────── */
@media (max-width: 400px) {
  .stat-value {
    font-size: 20px;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 6px 8px;
    font-size: 11px;
  }

  .modal-overlay > div,
  .modal {
    padding: 12px;
  }
}

/* ────────────────────────────────────────────
   TOUCH DEVICE IMPROVEMENTS
   ──────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover transforms on touch (they stick) */
  .stat-card:hover,
  .dia-card:hover,
  .upload-card:hover {
    transform: none;
  }

  /* Bigger nav tap targets */
  .ps-item,
  .nav-item,
  .ni {
    min-height: 40px;
  }

  .pbnav-item,
  .bnav-item {
    min-height: 44px;
  }
}

/* ────────────────────────────────────────────
   SAFE AREA (notch phones)
   ──────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .prof-bnav.visible,
  .ger-bottom-bar,
  .bbar,
  .bottom-bar {
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }
}