/* ============================================================
   Hyde Legal Group Admin — mobile.css
   Fortune-500 mobile experience. Loaded LAST so its rules win.

   Strategy (inspired by Linear / Notion / Asana mobile apps):
     • Slim 56px topnav with logo + page title + hamburger
     • Off-canvas sidebar drawer (slides in from left)
     • Tables → vertical card stacks with label : value pairs
     • Filter bars stack vertically, full-width inputs
     • All grids collapse to single column
     • Modals go full-screen (top-to-bottom, bottom sheet pattern)
     • Floating docks (chat, timer, team-pulse) consolidate into a
       bottom-tab launcher so only one thing is on screen at a time
     • All touch targets ≥ 44×44px
     • iPhone notch / home-indicator safe-area handled
   ============================================================ */

/* ─── PHONE (≤ 720px) — primary mobile breakpoint ─────────── */
@media (max-width: 720px) {

  /* ── ROOT TOKENS ──────────────────────────────────────── */
  :root {
    --nav-h: 64px !important;
    --mobile-fab-bottom: max(20px, env(safe-area-inset-bottom));
  }

  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }

  /* Min touch target on every button-ish element */
  button, .btn, a.btn, [role="button"] {
    min-height: 44px;
  }
  .btn-ghost, .topnav-btn, .modal-close { min-height: 40px; min-width: 40px; }

  /* ── TOPNAV — slim 64px ───────────────────────────────── */
  .topnav {
    height: 64px !important;
    padding: 0 12px !important;
    padding-top: env(safe-area-inset-top) !important;
    background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%) !important;
  }
  .topnav-left { gap: 6px !important; flex: 1; min-width: 0; }

  /* Hamburger always visible */
  .sb-hamburger {
    display: inline-flex !important;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    color: #fff;
    background: rgba(255,255,255,.08);
    border-radius: 10px;
    border: none;
  }
  .sb-hamburger svg { width: 22px; height: 22px; stroke: #fff; }

  /* Brand: shrink to a small logo card; hide wordmark on phone */
  .topnav-brand {
    background: rgba(255,255,255,.96) !important;
    padding: 4px 8px !important;
    height: 44px !important;
    border-radius: 10px !important;
    flex-shrink: 0;
  }
  .topnav-brand img {
    width: 36px !important; height: 36px !important;
  }
  .topnav-brand > span { display: none !important; }

  /* Search collapses to icon — actual search is in the drawer / global-search overlay */
  .topnav-search {
    width: 40px !important;
    min-width: 40px !important;
    background: rgba(255,255,255,.14) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    height: 40px !important;
    align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.22) !important;
  }
  .topnav-search input { display: none !important; }
  .topnav-search svg { stroke: #fff; opacity: .9; }

  /* Topnav right: collapse buttons to icons only */
  .topnav-right { gap: 4px !important; }
  .topnav-user { padding: 0 !important; }
  .topnav-user .topnav-avatar { width: 36px !important; height: 36px !important; }
  .topnav-user span:not(.topnav-avatar) { display: none !important; }
  .topnav-btn { width: 40px; height: 40px; padding: 0 !important; }
  .topnav-btn span { display: none !important; }

  /* Start Time button → icon only on phones */
  .clock-btn {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
  }
  .clock-btn span, .clock-btn .clock-label { display: none !important; }

  /* Team Pulse pill → compact bubble */
  #teamPulseBtn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  #teamPulseBtn .tp-label { display: none !important; }

  /* Hide the horizontal mega-menu on mobile — drawer takes over */
  .primary-nav { display: none !important; }

  /* ── SIDEBAR DRAWER ──────────────────────────────────── */
  .sidebar {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    width: 86vw; max-width: 320px;
    transform: translateX(-100%);
    transition: transform .25s var(--ease);
    z-index: 9500;
    box-shadow: 4px 0 32px rgba(0,0,0,.18);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open { overflow: hidden; }

  .sb-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.45) !important;
    z-index: 9400 !important;
    display: none;
    backdrop-filter: blur(2px);
  }
  .sb-overlay.show { display: block !important; }

  /* Push the in-drawer scrollable list below safe-area on iPhones */
  .sidebar-foot {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  /* ── MAIN CONTENT WRAP ───────────────────────────────── */
  .main-wrap {
    margin-left: 0 !important;
    margin-top: var(--nav-h) !important;
    padding: 14px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    min-height: calc(100vh - var(--nav-h));
  }

  /* Page header: stack title above actions, actions wrap */
  .page-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .page-head-text h1 { font-size: 22px !important; line-height: 1.15; }
  .page-head-text p  { font-size: 13px !important; }
  .page-head-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start !important;
  }
  .page-head-actions .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }

  /* ── CARDS ───────────────────────────────────────────── */
  .card { border-radius: 12px !important; }
  .card-hd { padding: 14px 16px !important; }
  .card-bd { padding: 14px 16px !important; }

  /* ── GRIDS — collapse to single column ──────────────── */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* But keep tight 2-up for things explicitly tagged .grid-keep-2 */
  .grid-keep-2 { grid-template-columns: 1fr 1fr !important; }

  /* KPI / stat-card grid: 2-col so they don't all stack */
  [class*="stats"], [class*="kpi"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .stat-card, .stat-tile {
    padding: 14px !important;
  }
  .stat-value { font-size: 22px !important; }

  /* ── FILTER BARS — stack vertically, full width ─────── */
  .filter-bar,
  [class*="filter"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .filter-bar > *,
  .filter-bar .form-group {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
  .filter-bar input,
  .filter-bar select,
  .filter-bar textarea {
    width: 100% !important;
  }

  /* Make every native input touch-friendly */
  input, select, textarea {
    font-size: 16px !important;   /* prevents iOS zoom-in on focus */
    min-height: 44px;
    padding: 10px 12px;
  }
  textarea { min-height: 88px; }

  /* ── TABLES → CARD STACK ─────────────────────────────
     Standard pattern: each row becomes a labelled card. Pages can
     opt-out by adding .tbl-keep-grid to the table. */
  .tbl-wrap { overflow-x: visible !important; }
  .tbl:not(.tbl-keep-grid) { display: block !important; }
  .tbl:not(.tbl-keep-grid) thead { display: none !important; }
  .tbl:not(.tbl-keep-grid) tbody { display: block !important; }
  .tbl:not(.tbl-keep-grid) tr {
    display: block !important;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
  }
  .tbl:not(.tbl-keep-grid) tr:hover td { background: transparent !important; }
  .tbl:not(.tbl-keep-grid) td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 0 !important;
    border-bottom: 1px dashed #f1f3f5 !important;
    font-size: 14px;
    text-align: right;
    gap: 10px;
  }
  .tbl:not(.tbl-keep-grid) td:last-child { border-bottom: none !important; }
  .tbl:not(.tbl-keep-grid) td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-500, #6b6b6b);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    flex-shrink: 0;
  }
  /* If a td has no data-label, just centre its content */
  .tbl:not(.tbl-keep-grid) td:not([data-label]) { justify-content: flex-start !important; }
  .tbl:not(.tbl-keep-grid) td:not([data-label])::before { content: none; }
  /* Row actions stay as a small toolbar */
  .tbl:not(.tbl-keep-grid) td .row-actions { justify-content: flex-end; }

  /* ── TABS — horizontal scroll if too wide ──────────── */
  .tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px 14px;
    padding: 0 14px;
    gap: 4px !important;
  }
  .tab, .tabs > button, .tabs > a {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 40px;
  }
  .tabs::-webkit-scrollbar { display: none; }

  /* ── MODALS — full-screen bottom sheet ─────────────── */
  .modal { padding: 0 !important; align-items: flex-end !important; }
  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - env(safe-area-inset-top)) !important;
    border-radius: 18px 18px 0 0 !important;
    animation: slideUp .22s var(--ease, cubic-bezier(.4,0,.2,1));
  }
  .modal-card.lg, .modal-card.xl { max-width: 100% !important; }
  .modal-hd {
    position: sticky; top: 0; z-index: 1;
    background: #fff;
    padding: 14px 16px !important;
    border-radius: 18px 18px 0 0;
  }
  .modal-hd::before {
    /* Drag handle indicator */
    content: '';
    position: absolute; top: 6px; left: 50%;
    width: 36px; height: 4px;
    background: #d1d5db; border-radius: 2px;
    transform: translateX(-50%);
  }
  .modal-bd { padding: 16px !important; }
  .modal-ft {
    position: sticky; bottom: 0;
    background: #fff;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom)) !important;
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-ft .btn { width: 100%; justify-content: center; }

  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* ── FLOATING DOCKS — keep docks from overlapping ──── */
  /* Stack vertically along the right edge. Each FAB is 48px with 8px gap. */
  #hlgTimerToggle {
    width: 48px !important; height: 48px !important;
    right: 16px !important;
    bottom: calc(var(--mobile-fab-bottom) + 64px) !important;
    z-index: 9300 !important;
    font-size: 18px !important;
  }
  #hlgTimerDock {
    width: calc(100vw - 24px) !important;
    max-width: 380px !important;
    right: 12px !important;
    left: auto !important;
    bottom: calc(var(--mobile-fab-bottom) + 64px) !important;
    max-height: 60vh !important;
    border-radius: 14px !important;
  }

  /* Chat dock FAB (.hlgd-launcher etc.) */
  .hlgd-launcher,
  #hlgChatLauncher,
  [data-hlgd-launcher] {
    right: 16px !important;
    bottom: var(--mobile-fab-bottom) !important;
  }
  .hlgd-panel {
    position: fixed !important;
    right: 12px !important;
    left: 12px !important;
    bottom: calc(var(--mobile-fab-bottom) + 70px) !important;
    width: auto !important;
    max-width: none !important;
    height: 70vh !important;
    border-radius: 16px !important;
  }

  /* Team Pulse flyout becomes a bottom sheet too */
  .tp-flyout {
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: calc(var(--mobile-fab-bottom) + 64px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: 70vh !important;
    border-radius: 16px !important;
  }

  /* ── TOAST / SNACKBAR full-width on phone ─────────── */
  .ui-toast, .toast {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    bottom: calc(var(--mobile-fab-bottom) + 130px) !important;
  }

  /* ── DASHBOARD QUICK ACTIONS — tighter grid ────────── */
  .quick-actions, [class*="quick-create"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .quick-actions .qa-tile, .qa-card {
    padding: 12px 8px !important;
    font-size: 11px !important;
  }

  /* ── TEAM CARDS / DIRECTORY ─────────────────────────── */
  .team-card, .person-card { padding: 14px !important; }

  /* ── CHARTS — tighten vertical room ─────────────────── */
  canvas, .chart-host { max-width: 100% !important; }

  /* ── HIDE PURELY-DECORATIVE THINGS ──────────────────── */
  .desktop-only, [data-desktop-only] { display: none !important; }
  .mobile-only-flex { display: flex !important; }
}

/* ─── SMALL PHONE (≤ 420px) — extra tight ─────────────────── */
@media (max-width: 420px) {
  :root { --nav-h: 60px !important; }
  .topnav { height: 60px !important; }
  .topnav-brand img { width: 32px !important; height: 32px !important; }
  .main-wrap { padding: 12px !important; }
  .page-head-text h1 { font-size: 20px !important; }
  .quick-actions, [class*="quick-create"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .stat-value { font-size: 20px !important; }
  .modal-bd { padding: 14px !important; }
  /* Hide notification button on smallest phones — drawer access */
  .topnav-btn[title="Help"],
  .topnav-btn[aria-label="Help"] { display: none !important; }
}

/* ─── LANDSCAPE TINY (height ≤ 480px) — squeeze topnav ────── */
@media (max-height: 480px) and (max-width: 900px) {
  :root { --nav-h: 52px !important; }
  .topnav { height: 52px !important; }
  .topnav-brand img { width: 32px !important; height: 32px !important; }
  .modal-card { max-height: 100vh !important; border-radius: 0 !important; }
}

/* ─── HIGH-DENSITY DISPLAYS — sharper borders ─────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .card, .modal-card, .tp-flyout {
    border-color: rgba(0,0,0,.08);
  }
}