/* ==========================================================================
   Blue Ridge CRM — Mobile / phone layout. Loaded AFTER style.css so these
   rules win. Turns the desktop sidebar into a slide-in drawer, adds a top app
   bar, and makes content, tables, and modals fit a phone screen.
   ========================================================================== */

/* Hidden on desktop; only shown inside the phone breakpoint below. */
.mobile-topbar { display: none; }
.nav-scrim { display: none; }

@media (max-width: 640px) {
  /* One column — the sidebar leaves the grid and becomes an overlay drawer. */
  .app { grid-template-columns: 1fr; }

  /* ---- top app bar ---- */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 60;
    height: 56px;
    padding: 0 12px;
    background: var(--navy-900);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .mobile-topbar .mt-burger {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 10px; cursor: pointer;
    color: #fff; background: rgba(255,255,255,.10);
  }
  .mobile-topbar .mt-burger svg { width: 22px; height: 22px; }
  .mobile-topbar .mt-logo { height: 26px; width: auto; display: block; }
  .mobile-topbar .mt-spacer { flex: 1; }

  /* ---- drawer (restores full-label sidebar over the 56px icon-rail rules) ---- */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    z-index: 80;
    width: 272px;
    max-width: 84vw;
    height: 100dvh;
    padding: 14px 12px 18px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 44px rgba(0,0,0,.55);
    overscroll-behavior: contain;
  }
  .app.nav-open .sidebar { transform: translateX(0); }

  .sidebar-logo { padding: 10px 12px 16px; }
  .sidebar-logo img { display: block; max-width: 180px; }

  .nav-section-label {
    font-size: 11px; height: auto;
    padding: 16px 13px 6px; margin: 0;
    border-top: none;
    color: rgba(255,255,255,.45);
  }
  .nav-item {
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 12px;
    font-size: 15px;
    border-left-width: 3px;
  }
  .nav-item svg { width: 20px; height: 20px; }
  .sidebar-search { display: flex; }

  /* scrim behind the open drawer */
  .nav-scrim {
    display: block;
    position: fixed; inset: 0;
    z-index: 70;
    background: rgba(6,12,24,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .app.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  /* ---- content ---- */
  .content { padding: 16px 14px 40px; }
  .page-header { margin-bottom: 16px; gap: 10px; }
  .page-title { font-size: 20px; }
  .page-actions { display: flex; flex-wrap: wrap; gap: 8px; }

  /* comfortable inputs (16px prevents mobile zoom-on-focus) & bigger tap targets */
  .input, .select, .textarea { font-size: 16px; }
  .btn { padding: 11px 15px; }
  .btn-sm { padding: 8px 12px; }

  /* stat tiles: 2-up, then 1-up on the smallest phones */
  .stat-grid { grid-template-columns: 1fr 1fr; }

  /* ---- modals become bottom sheets that fit the screen ---- */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    max-width: 100%;
    width: 100%;
    max-height: 94dvh;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    animation: br-sheet-up .2s ease-out;
  }
  .modal-header { flex: none; }
  .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  @keyframes br-sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

  /* command palette: give it breathing room from the top */
  .cmdk-overlay { padding: 8vh 12px 12px; }
}

@media (max-width: 380px) {
  .stat-grid { grid-template-columns: 1fr; }
}