/* ════════════════════════════════════════════════════════════════
   SecureVault — Mobile Responsive Stylesheet
   Loaded AFTER app.css, user.css, admin.css on every app page.
   Breakpoints:
     xs  — max 480px   (phones portrait)
     sm  — max 640px   (phones landscape / small)
     md  — max 768px   (tablets portrait)
     lg  — max 1024px  (tablets landscape / small laptop)
   ════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   MOBILE SIDEBAR TOGGLE — Hamburger button (hidden on desktop)
   Add this button to your _base.php header, hidden on desktop:
   <button class="mob-menu-btn" id="mobMenuBtn" aria-label="Menu">
     <svg ...hamburger icon...></svg>
   </button>
   ══════════════════════════════════════════════════════════════ */
.mob-menu-btn {
  display: none;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08);
  border: none; border-radius: var(--r);
  color: rgba(255,255,255,.8);
  align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .14s;
}
.mob-menu-btn:hover { background: rgba(255,255,255,.14); }
.mob-menu-btn svg   { width: 18px; height: 18px; pointer-events: none; }

/* Sidebar overlay (tap to close) */
.mob-sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 190;
  backdrop-filter: blur(2px);
}
.mob-sidebar-overlay.open { display: block; }

/* ══════════════════════════════════════════════════════════════
   LARGE TABLET — 1024px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Reduce sidebar width */
  :root { --sb-w: 220px; }

  /* Tighten content padding */
  .main-content { padding: 1.5rem 1.75rem; }
  .cv-main      { padding: 1.5rem 1.5rem 2rem; }

  /* Stats: 2 col */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .cv-stats   { grid-template-columns: repeat(2, 1fr); }

  /* Plans: 2 col */
  .plans-grid { grid-template-columns: repeat(2, 1fr); }

  /* Forms */
  .form-grid-3  { grid-template-columns: 1fr 1fr; }
  .cv-grid-3    { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   TABLET PORTRAIT — 768px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Root overrides ─────────────────────────────────────── */
  :root {
    --sb-w: 0px;
    --hh:   54px;
  }

  /* ── HEADER ─────────────────────────────────────────────── */
  .app-header {
    padding: 0 .9rem;
    gap: .6rem;
  }

  /* Show hamburger */
  .mob-menu-btn { display: flex; }

  /* Shrink search on tablet */
  .header-search       { max-width: 200px; }
  .cv-search           { max-width: 200px; }
  .header-search-input { font-size: .8rem; }

  /* Tighten header right */
  .header-right { gap: 0; }

  /* ── LAYOUT ─────────────────────────────────────────────── */
  .app-layout,
  .app-shell,
  .cv-layout {
    grid-template-columns: 1fr;
    display: block;
  }

  /* ── SIDEBAR — slide-in drawer ──────────────────────────── */
  .sidebar,
  .admin-sidebar,
  .cv-sidebar {
    position: fixed;
    left: -280px;
    top: var(--hh);
    width: 272px !important;
    height: calc(100vh - var(--hh));
    z-index: 195;
    transition: left .22s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    display: flex !important; /* override app.css display:none */
  }

  .sidebar.mob-open,
  .admin-sidebar.mob-open,
  .cv-sidebar.mob-open {
    left: 0;
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }

  /* ── MAIN CONTENT ───────────────────────────────────────── */
  .main-content {
    padding: 1.1rem 1rem;
    min-height: calc(100vh - var(--hh));
  }
  .cv-main { padding: 1.1rem 1rem 2rem; }
  .file-area { padding: 1rem; }

  /* ── PAGE HEADER ────────────────────────────────────────── */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
  }
  .page-title    { font-size: 1.25rem; }
  .page-actions  { width: 100%; }
  .cv-page-hdr   { flex-direction: column; align-items: flex-start; gap: .75rem; margin-bottom: 1.25rem; }
  .cv-hdr-actions { width: 100%; }

  /* ── STATS GRID ─────────────────────────────────────────── */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
  .cv-stats   { grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
  .stat-num   { font-size: 1.65rem; }

  /* ── CARDS ──────────────────────────────────────────────── */
  .card-body   { padding: 1rem; }
  .card-header { padding: .8rem 1rem; }
  .card-footer { padding: .75rem 1rem; }

  /* ── PLANS GRID ─────────────────────────────────────────── */
  .plans-grid { grid-template-columns: 1fr; max-width: 420px; }

  /* ── FORMS ──────────────────────────────────────────────── */
  .form-grid-2, .form-grid-3,
  .cv-grid-2, .cv-grid-3 { grid-template-columns: 1fr; }

  /* ── TABLES ─────────────────────────────────────────────── */
  .table-wrap,
  .cv-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-md);
  }
  .table    { min-width: 560px; }
  .cv-table { min-width: 560px; }
  .table-sm { min-width: 440px; }

  /* Hide less important columns on mobile via class */
  .col-hide-mobile { display: none; }

  /* ── FILE TOOLBAR ───────────────────────────────────────── */
  .file-toolbar,
  .content-toolbar {
    flex-wrap: wrap;
    gap: .5rem;
    padding: .6rem .75rem;
  }
  .file-toolbar-left,
  .file-toolbar-right,
  .toolbar-breadcrumbs,
  .toolbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  /* ── FILE GRID ──────────────────────────────────────────── */
  .frow2 { grid-template-columns: repeat(2, 1fr); gap: .6rem; }

  /* ── MODALS ─────────────────────────────────────────────── */
  .modal-overlay { padding: .75rem; align-items: flex-end; }
  .modal,
  .modal-box {
    max-width: 100% !important;
    max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: _mob_modal .2s cubic-bezier(.4,0,.2,1);
  }
  @keyframes _mob_modal {
    from { transform: translateY(100%); opacity: .8; }
    to   { transform: translateY(0);    opacity: 1;  }
  }
  .modal-header,
  .modal-hdr { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .modal-footer { border-radius: 0; }
  .modal-body { padding: 1rem 1.1rem; }

  /* ── AUTH PAGES ─────────────────────────────────────────── */
  .auth-page      { flex-direction: column; }
  .auth-splash    { display: none; }
  .auth-panel     { width: 100%; min-height: 100vh; box-shadow: none; }
  .auth-panel-header { padding: 1.5rem 1.5rem 1.25rem; }
  .auth-panel-body   { padding: 1.25rem 1.5rem; }
  .auth-panel-footer { padding: 1rem 1.5rem; }
  .auth-title     { font-size: 1.25rem; }

  /* ── NOTIFICATIONS ──────────────────────────────────────── */
  .notif-panel {
    position: fixed;
    right: .75rem; left: .75rem;
    width: auto;
    top: calc(var(--hh) + .4rem);
  }

  /* ── USER DROPDOWN ──────────────────────────────────────── */
  .user-dropdown { min-width: 200px; right: 0; }

  /* ── FILTER BAR ─────────────────────────────────────────── */
  .filter-bar { gap: .4rem; }
  .search-bar input { min-width: 160px; width: 100%; }

  /* ── COMPLIANCE ─────────────────────────────────────────── */
  .compliance-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .compliance-tab  { white-space: nowrap; }
  .compliance-score { flex-direction: column; text-align: center; gap: .75rem; }

  /* ── BUTTONS ────────────────────────────────────────────── */
  .btn-block-mobile { width: 100% !important; justify-content: center; }

  /* ── CV USER LAYOUT ─────────────────────────────────────── */
  .cv-nav { padding: 0 .9rem; gap: .6rem; }
  .cv-nav .cv-search { display: none; } /* hidden on mobile — use search page */

  /* ── ADMIN HEADER BAR ───────────────────────────────────── */
  .admin-header-bar { padding: 0 1rem; font-size: .52rem; }

  /* ── UPLOAD ZONE ────────────────────────────────────────── */
  .upload-zone { padding: 1.75rem 1.25rem; }

  /* ── PAGINATION ─────────────────────────────────────────── */
  .pagination,
  .cv-pagination { flex-wrap: wrap; gap: .25rem; }

  /* ── SETTINGS NAV ───────────────────────────────────────── */
  .settings-layout {
    flex-direction: column;
  }
  .settings-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: .25rem;
    padding-bottom: .5rem;
    border-right: none;
    border-bottom: 1px solid var(--bd);
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
  }
  .settings-nav-link {
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 20px;
  }
  .settings-nav-link.active { border-radius: 20px; }
}

/* ══════════════════════════════════════════════════════════════
   SMALL PHONE — 480px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Root ───────────────────────────────────────────────── */
  html { font-size: 13px; }
  :root { --hh: 52px; }

  /* ── Header ─────────────────────────────────────────────── */
  .header-search,
  .cv-search { display: none; } /* full hide on small phones */

  .logo-wordmark { font-size: .85rem; }

  /* ── Stats: single column ───────────────────────────────── */
  .stats-grid { grid-template-columns: 1fr; }
  .cv-stats   { grid-template-columns: 1fr; }

  /* ── File grid: single column ───────────────────────────── */
  .frow2 { grid-template-columns: 1fr; }

  /* ── Page title ─────────────────────────────────────────── */
  .page-title  { font-size: 1.1rem; }
  .cv-page-title { font-size: 1.1rem; }

  /* ── Cards ──────────────────────────────────────────────── */
  .card-body   { padding: .85rem; }
  .card-header { padding: .75rem .85rem; }

  /* ── Buttons — allow wrapping ───────────────────────────── */
  .page-actions { gap: .4rem; }
  .btn-sm { height: 28px; padding: 0 10px; font-size: .76rem; }

  /* ── Auth ───────────────────────────────────────────────── */
  .auth-panel-header { padding: 1.25rem 1.1rem 1rem; }
  .auth-panel-body   { padding: 1rem 1.1rem; }
  .auth-panel-footer { padding: .85rem 1.1rem; }
  .auth-title { font-size: 1.1rem; }
  .auth-logo-text { font-size: 1rem; }

  /* ── Modals — full screen ───────────────────────────────── */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal,
  .modal-box {
    max-height: 96vh;
    border-radius: 16px 16px 0 0;
  }

  /* ── Table action buttons ───────────────────────────────── */
  .row-actions  { gap: 1px; }
  .action-btn   { width: 26px; height: 26px; }
  .action-btn svg { width: 12px; height: 12px; }

  /* ── User dropdown ──────────────────────────────────────── */
  .user-dropdown { min-width: 190px; }

  /* ── CV stat cards ──────────────────────────────────────── */
  .cv-stat { padding: 1rem 1.1rem; }
  .cv-stat-val { font-size: 1.4rem; }
  .cv-stat-icon { width: 40px; height: 40px; border-radius: 11px; }
  .cv-stat-icon svg { width: 18px; height: 18px; }

  /* ── Storage widget in sidebar ──────────────────────────── */
  .sidebar-storage { margin: auto .75rem .75rem; }

  /* ── Flash messages ─────────────────────────────────────── */
  .cv-flash { font-size: .8rem; padding: .7rem .85rem; }
}

/* ══════════════════════════════════════════════════════════════
   TOUCH IMPROVEMENTS (all mobile)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Larger tap targets */
  .nav-item,
  .admin-sidebar-link,
  .cv-nav-link    { min-height: 44px; }

  .dropdown-item  { min-height: 44px; padding: .6rem .75rem; }

  .btn            { min-height: 40px; }
  .btn-sm         { min-height: 36px; }

  .form-control   { height: 42px; font-size: 16px; } /* 16px prevents iOS zoom */
  textarea.form-control { height: auto; font-size: 16px; }
  .form-select    { height: 42px; font-size: 16px; }
  .cv-input       { font-size: 16px; }

  /* Prevent double-tap zoom on buttons */
  button, a { touch-action: manipulation; }

  /* Smooth scrolling in overflow containers */
  .table-wrap,
  .cv-table-wrap,
  .modal-body,
  .sidebar,
  .cv-sidebar { -webkit-overflow-scrolling: touch; }
}

/* ══════════════════════════════════════════════════════════════
   JAVASCRIPT HOOK — Add this to your base template JS:

   const menuBtn     = document.getElementById('mobMenuBtn');
   const sidebar     = document.querySelector('.sidebar, .admin-sidebar, .cv-sidebar');
   const overlay     = document.querySelector('.mob-sidebar-overlay');

   function openSidebar()  {
     sidebar?.classList.add('mob-open');
     overlay?.classList.add('open');
     document.body.style.overflow = 'hidden';
   }
   function closeSidebar() {
     sidebar?.classList.remove('mob-open');
     overlay?.classList.remove('open');
     document.body.style.overflow = '';
   }

   menuBtn?.addEventListener('click', openSidebar);
   overlay?.addEventListener('click', closeSidebar);

   // Close on nav click (SPA-style)
   sidebar?.querySelectorAll('a').forEach(a =>
     a.addEventListener('click', closeSidebar)
   );
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   SPECIFICITY OVERRIDES — Fix conflicts with app.css line 723
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar,
  .admin-sidebar,
  .cv-sidebar {
    display: flex !important;
    position: fixed !important;
    left: -280px !important;
    top: var(--hh) !important;
    width: 272px !important;
    height: calc(100vh - var(--hh)) !important;
    z-index: 195 !important;
    transition: left .22s cubic-bezier(.4,0,.2,1) !important;
    overflow-y: auto !important;
    flex-direction: column !important;
  }

  .sidebar.mob-open,
  .admin-sidebar.mob-open,
  .cv-sidebar.mob-open {
    left: 0 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.35) !important;
  }

  /* Layout must be single column with no grid gap for sidebar */
  .app-layout,
  .app-shell {
    display: block !important;
    grid-template-columns: none !important;
    padding-top: var(--hh) !important;
  }
}

@media (max-width: 768px) {
  /* cv-layout is flexbox not grid */
  .cv-layout {
    flex-direction: column !important;
  }
  .cv-sidebar {
    display: none !important;
  }
  .cv-sidebar.mob-open {
    display: flex !important;
  }
  .cv-main {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding: 1rem !important;
  }
  /* Fix stats overflow */
  .cv-stats {
    grid-template-columns: repeat(2,1fr) !important;
    width: 100% !important;
  }
  body { overflow-x: hidden !important; }
}

/* ── FILE LIST TABLE — mobile fixes ─────────────────────── */
@media (max-width: 768px) {

  /* Hide less useful columns on small screens */
  .cv-table th:nth-child(3),
  .cv-table td:nth-child(3),
  .cv-table th:nth-child(4),
  .cv-table td:nth-child(4) {
    display: none !important;
  }

  /* Give filename column more room */
  .cv-table th:nth-child(2),
  .cv-table td:nth-child(2) {
    min-width: 160px;
  }

  /* File name shouldn't wrap */
  .fc-name,
  .file-name { 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  /* Tighten file row padding */
  .cv-table td,
  .cv-table th { padding: 8px 8px !important; }

  /* File meta info — stack vertically */
  .file-name-cell { flex-direction: column; align-items: flex-start; gap: 2px; }
  .file-meta      { font-size: .68rem; }
}

/* ── CV FILE LIST — mobile fixes ────────────────────────── */
@media (max-width: 768px) {

  /* List view rows */
  .cv-file-row {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 10px !important;
    gap: 4px;
    align-items: center;
  }
  .cv-file-row-icon  { flex-shrink: 0; }
  .cv-file-row-name  { flex: 1; min-width: 0; }
  .cv-file-row-fname {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    font-size: .82rem;
  }
  /* Hide date and meta on small screens */
  .cv-file-row-date  { display: none !important; }
  .cv-file-row-meta  { font-size: .7rem; color: var(--t3); }
  .cv-file-row-actions { flex-shrink: 0; }

  /* Grid view cards — 2 columns */
  .cv-file-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .6rem !important;
  }
  .cv-file-card-name {
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Files header controls */
  .cv-files-hdr      { flex-wrap: wrap; gap: .5rem; }
  .cv-files-controls { flex-wrap: wrap; gap: .4rem; }
}

@media (max-width: 480px) {
  .cv-file-row-fname { max-width: 120px; }
  .cv-file-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  /* Force stats into clean 2-col grid */
  .cv-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
}