/*
 * SRC Ops Suite — Mobile Responsive Layer
 * Injected into every page. Overrides desktop layout at ≤768px.
 * Handles: sidebar drawer, table→cards, grids, modals, touch targets.
 */

/* ── GLOBAL MOBILE FIXES ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden !important; }

  /* Prevent iOS input zoom (must be ≥16px) */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Ensure all touch targets are at least 44px */
  button, .nav-item, .tab-btn, .hdr-btn, .back-btn,
  .filter-select, .status-cell, .priority-badge,
  a[href], [role="button"] {
    min-height: 44px;
  }

  /* ── HAMBURGER BUTTON (injected by src_mobile.js) ── */
  .mob-ham {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--border, rgba(15,23,42,0.12));
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-dim, #64748B);
    font-size: 18px;
    flex-shrink: 0;
    transition: background 0.15s;
    margin-right: 8px;
  }
  .mob-ham:hover { background: var(--surface2, #F1F5F9); }

  /* ── SIDEBAR DRAWER ── */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    z-index: 400 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    padding-top: 60px !important;
  }
  .sidebar.mob-open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18) !important;
  }

  /* Overlay behind open sidebar */
  .mob-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 350;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .mob-overlay.active { display: block; }

  /* Layout wrappers — main content fills full width */
  .layout, .body-wrap, .app-shell {
    flex-direction: column !important;
  }
  .layout > .sidebar,
  .body-wrap > .sidebar,
  .body-wrap > nav.sidebar,
  .app-shell > .sidebar {
    /* handled by fixed positioning above */
    flex-shrink: 0 !important;
  }
  .main, .main-content, .view-area, .content-area,
  .layout > div:not(.sidebar),
  .body-wrap > div:not(.sidebar),
  .body-wrap > section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }

  /* ── HEADERS & TOPBARS ── */
  .app-header, .topbar, .hdr {
    padding: 0 12px !important;
    height: 54px !important;
    gap: 8px !important;
  }
  .app-title, .topbar-title, .header-title {
    font-size: 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }
  /* Hide secondary header items on small screens */
  .header-right .date-wrap,
  .header-right .countdown,
  .hdr-btn:not(.primary):not(.mob-keep),
  .topbar .location-input {
    display: none !important;
  }
  .header-right {
    gap: 6px !important;
  }
  /* Back button — compact */
  .back-btn, .sidebar-back-btn {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  /* ── APP HUB (Miami_Ops_Hub) ── */
  .apps-grid, .modules-grid, .hub-grid, .app-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 16px !important;
  }
  .app-card, .app-tile {
    padding: 18px 14px !important;
    border-radius: 14px !important;
    aspect-ratio: auto !important;
  }
  .app-icon { width: 60px !important; height: 60px !important; border-radius: 18px !important; font-size: 30px !important; }
  .app-name { font-size: 15px !important; }
  .app-category { font-size: 11px !important; }
  .app-tile { min-width: 0 !important; }
  .app-card-icon { font-size: 30px !important; }
  .app-card-title { font-size: 15px !important; }

  /* ── OVERVIEW / STATS PANELS ── */
  .overview {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 10px !important;
  }
  .stats-grid, .kpi-grid, .metrics-grid,
  .stat-cards, .cards-row, .cards-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .stat-card, .kpi-card, .metric-card {
    padding: 14px !important;
  }

  /* ── TOOLBAR / FILTERS ── */
  .toolbar, .filters-bar, .filter-row {
    padding: 10px 12px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    overflow-x: auto !important;
  }
  .filter-select, .search-input {
    font-size: 14px !important;
    padding: 8px 10px !important;
    min-height: 40px;
  }
  .search-input { width: 100% !important; }
  .spacer { display: none !important; }

  /* ── TAB BAR ── */
  .tab-bar {
    padding: 0 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn {
    padding: 0 10px !important;
    font-size: 12px !important;
    height: 42px !important;
    white-space: nowrap;
  }

  /* ── CONTENT AREA ── */
  .content, .main, .view {
    padding: 0 12px 80px !important;
  }

  /* ── CRITICAL PATH: TABLE → CARDS ── */
  .col-headers { display: none !important; }

  .group-header-row {
    grid-template-columns: 36px 1fr auto !important;
    height: 48px !important;
    padding: 0 8px !important;
    margin-top: 14px !important;
  }
  .group-header-row > *:not(.group-chevron):not(:nth-child(2)):not(:nth-child(3)) {
    display: none !important;
  }

  .task-row {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 12px 10px 10px !important;
    min-height: auto !important;
    gap: 6px !important;
    position: relative;
  }
  .task-row > .cell-check {
    position: absolute;
    top: 12px;
    left: 10px;
  }
  .task-row > .cell-name {
    padding-left: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .task-name-text {
    white-space: normal !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  /* Row 2: status + priority + date in one line */
  .task-row > .cell-status {
    padding-left: 32px !important;
    justify-content: flex-start !important;
  }
  .task-row > .cell-priority { display: none !important; }
  .task-row > .cell-owners  { display: none !important; }
  .task-row > .cell-date    { display: none !important; }
  .task-row > .cell-delete  { display: none !important; }
  .task-row > .cell-notes   { display: none !important; }

  /* Show a mini meta line below task name */
  .task-row .mob-meta {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding-left: 32px;
    flex-wrap: wrap;
  }

  .add-task-row {
    display: flex !important;
    padding: 10px 12px !important;
    min-height: 44px !important;
  }
  .add-task-row > *:not(.add-task-label) { display: none !important; }

  /* ── MODALS → BOTTOM SHEETS ── */
  .modal-overlay {
    align-items: flex-end !important;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    transform: translateY(30px) !important;
    padding: 20px 16px 32px !important;
  }
  .modal-overlay.open .modal {
    transform: translateY(0) !important;
  }
  .modal-close {
    top: 14px !important;
    right: 14px !important;
  }

  /* ── FORMS ── */
  .form-row {
    flex-direction: column !important;
  }
  .form-input {
    width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important;
  }

  /* ── TABLES ── */
  table { font-size: 13px !important; }
  th, td { padding: 8px 6px !important; }

  /* ── DASHBOARD / SITE VISIT CARDS ── */
  .visit-cards, .record-list, .card-list {
    grid-template-columns: 1fr !important;
  }

  /* ── MAINTENANCE / PERMIT / etc ── */
  .ticket-grid, .permit-grid, .vendor-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ── LOGIN PAGE ── */
  .login-card, .auth-card, .card {
    margin: 12px !important;
    padding: 32px 24px 28px !important;
    border-radius: 16px !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* ── OPS ASSISTANT SIDEBAR ── */
  .sidebar .sidebar-back-btn {
    font-size: 16px !important;
    padding: 14px 16px !important;
  }

  /* ── CALENDAR POPUP ── */
  .cal-pop {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 20px !important;
    top: auto !important;
    width: 300px !important;
    max-width: 95vw !important;
    z-index: 3000 !important;
  }
  .cal-pop.open { display: block !important; }

  /* ── STATUS / PRIORITY DROPDOWNS ── */
  .status-dropdown, .priority-dropdown {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 20px !important;
    top: auto !important;
    width: auto !important;
    min-width: auto !important;
    border-radius: 14px !important;
    padding: 10px !important;
    z-index: 600 !important;
  }
  .status-opt, .priority-opt {
    padding: 12px 14px !important;
    font-size: 14px !important;
    min-height: 44px;
  }

  /* ── MESSAGING ── */
  .msg-layout, .chat-layout {
    flex-direction: column !important;
  }
  .msg-sidebar, .thread-list {
    width: 100% !important;
    max-height: 40vh !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
  }

  /* ── ACCOUNTABILITY HUB ── */
  .changelog-table { overflow-x: auto !important; display: block !important; }
  .changelog-table table { min-width: 600px; }

  /* ── FINANCE ── */
  .finance-grid, .budget-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── EMPLOYEE / HR CARDS ── */
  .emp-grid, .staff-grid, .employee-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── CRM ── */
  .crm-columns, .contact-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── SAFE SCROLLABLE AREAS ── */
  .main, .view-content, .tab-content {
    -webkit-overflow-scrolling: touch;
  }
}

/* ── PHONE ONLY (≤480px) ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .apps-grid, .modules-grid, .hub-grid, .app-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .stats-grid, .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .app-title, .topbar-title {
    max-width: 120px !important;
  }
  /* Ops hub header */
  .header { padding: 0 10px !important; }
  .hdr-btn.primary { padding: 7px 12px !important; font-size: 12px !important; }
}

/* Hide hamburger on desktop */
.mob-ham { display: none; }