/* ============================================
   A7SPS7 - COMPREHENSIVE RESPONSIVE CSS
   Version: 3.0 — Full mobile support
============================================ */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mobile-menu-btn { display: none; }

/* ── Auto-grid: reduce min on small screens ── */
.r-auto-grid { min-width: 0; }

/* ===========================================
   <= 1200px — Large tablets / small desktops
=========================================== */
@media (max-width: 1200px) {
  /* 4-col stat grids → 2 cols */
  .r-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Content + sidebar → stack */
  .r-content-sidebar { grid-template-columns: 1fr !important; }

  /* Dashboard */
  .dashboard-grid { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: repeat(4, 1fr); }
}

/* ===========================================
   <= 992px — Tablets
=========================================== */
@media (max-width: 992px) {
  /* Sidebar off-canvas */
  .sidebar {
    box-shadow: var(--shadow-2xl);
    z-index: calc(var(--z-sticky) + 10);
    width: 280px;
  }
  [dir="rtl"] .sidebar { transform: translateX(100%); right: 0; }
  [dir="ltr"] .sidebar { transform: translateX(-100%); left: 0; }

  /* Override collapsed state on mobile */
  .sidebar.collapsed { width: 280px !important; }
  [dir="rtl"] .sidebar.collapsed { transform: translateX(100%) !important; }
  [dir="ltr"] .sidebar.collapsed { transform: translateX(-100%) !important; }

  .sidebar.mobile-open { transform: translateX(0) !important; }

  /* Remove ALL margins from app-main (override collapsed specificity) */
  [dir="rtl"] .app-main,
  [dir="rtl"] .sidebar.collapsed ~ .app-main,
  [dir="rtl"] .sidebar ~ .app-main { margin-right: 0 !important; margin-left: 0 !important; }
  [dir="ltr"] .app-main,
  [dir="ltr"] .sidebar.collapsed ~ .app-main,
  [dir="ltr"] .sidebar ~ .app-main { margin-left: 0 !important; margin-right: 0 !important; }

  .mobile-menu-btn { display: flex; }
  .sidebar-toggle { display: none; }

  .sidebar-overlay.active { opacity: 1 !important; pointer-events: auto !important; }

  /* Settings layout → single column */
  .r-settings-layout { grid-template-columns: 1fr !important; }
  .r-settings-layout > .card:first-child {
    position: static !important;
  }
  .r-settings-layout > .card:first-child > div {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    flex-wrap: nowrap;
    padding-bottom: 8px !important;
  }
  .r-settings-layout .settings-nav-item {
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  /* Sidebar layouts (accounts list + main, etc.) */
  .r-sidebar-layout { grid-template-columns: 1fr !important; }

  /* 3-col grids → 1 col */
  .r-grid-3 { grid-template-columns: 1fr !important; }

  /* Work page and similar: tasks + sidebar → stack */
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1fr 300px"] {
    grid-template-columns: 1fr !important;
  }

  /* Auto-grid: reduce minmax */
  .r-auto-grid { grid-template-columns: 1fr !important; }

  /* Sidebar nav groups: ensure text is readable */
  .sidebar .nav-group-header { white-space: normal; }
  .sidebar .nav-text { opacity: 1 !important; width: auto !important; }
  .sidebar .sidebar-logo-text { opacity: 1 !important; width: auto !important; }
  .sidebar .sidebar-user-info { opacity: 1 !important; width: auto !important; }
  .sidebar .sidebar-section-title { opacity: 1 !important; }
  .sidebar .nav-badge { opacity: 1 !important; }
}

/* ===========================================
   <= 768px — Mobile landscape / small tablets
=========================================== */
@media (max-width: 768px) {
  /* Content padding */
  .app-content { padding: var(--space-3); }

  /* Page headers → stack */
  .app-content-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-3) !important;
  }
  .content-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100%;
  }
  .content-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    font-size: var(--text-xs) !important;
    padding: 6px 10px !important;
    white-space: nowrap;
  }

  /* Content titles */
  .content-title { font-size: var(--text-lg) !important; }
  .content-subtitle { font-size: var(--text-xs) !important; }

  /* Stat cards: stack to 1 col on mobile */
  .r-stats-grid { grid-template-columns: 1fr !important; gap: var(--space-3) !important; }
  .stats-row { grid-template-columns: 1fr !important; gap: var(--space-3) !important; }
  .stat-card { padding: var(--space-3) !important; }
  .stat-card .stat-icon { width: 36px !important; height: 36px !important; font-size: 1rem !important; }
  .stat-value { font-size: var(--text-lg) !important; }

  /* 2-column form grids → 1 col */
  .r-grid-2 { grid-template-columns: 1fr !important; }
  .r-grid-2 > [style*="grid-column:span 2"],
  .r-grid-2 > [style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }

  /* Modal form grids → 1 col */
  .modal-body [style*="grid-template-columns:1fr 1fr"],
  .modal-body [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .modal-body [style*="grid-column:span 2"],
  .modal-body [style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }

  /* Card form grids → 1 col */
  .card-body [style*="grid-template-columns:1fr 1fr"],
  .card-body [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Info grids inside cards */
  .card-body [style*="grid-template-columns:1fr 1fr"][style*="font-size:var(--text-xs)"] {
    grid-template-columns: 1fr !important;
  }

  /* Quick actions */
  .quick-actions { grid-template-columns: repeat(2, 1fr) !important; }
  .dashboard-grid { grid-template-columns: 1fr !important; }

  /* Filter forms: wrap */
  form [style*="display:flex"][style*="align-items:flex-end"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  form [style*="display:flex"][style*="align-items:flex-end"] .form-group {
    flex: 1 1 130px;
    min-width: 0;
  }
  form [style*="display:flex"][style*="align-items:flex-end"] input[style*="width:140px"],
  form [style*="display:flex"][style*="align-items:flex-end"] select[style*="width:140px"] {
    width: 100% !important;
  }

  /* Search box in header: hide */
  .header-search-box { display: none; }

  /* Tables: horizontal scroll for ALL table types */
  .table-wrap,
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Card body: scrollable when it contains wide content */
  .card-body { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* Standard tables */
  .table { font-size: var(--text-xs) !important; min-width: 600px; }
  .table th, .table td { padding: 8px 10px !important; }

  /* Freelance / custom tables */
  .fp-table, .fp-svc-table, .fp-inv-table { min-width: 580px; }
  .stmt-table { min-width: 700px; }
  .vaccinations-table { min-width: 700px; }

  /* Card headers: wrap on mobile */
  .card-header { flex-wrap: wrap !important; gap: var(--space-2) !important; }

  /* Freelance headers: wrap actions on mobile */
  .fp-header { overflow: visible !important; }
  .fp-header-top { flex-direction: column !important; align-items: stretch !important; }
  .fp-header-actions { flex-wrap: wrap !important; }
  .fp-header-actions .btn { font-size: var(--text-xs) !important; padding: 5px 10px !important; }
  .fp-stats-row { flex-direction: column !important; gap: var(--space-3) !important; }
  .fp-sub-actions { flex-wrap: wrap !important; }

  /* Modal: full width */
  .modal {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    margin: 12px !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
  }

  /* Buttons: compact */
  .btn-sm { padding: 6px 10px !important; font-size: var(--text-xs) !important; }

  /* Hide mobile-only elements */
  .hide-mobile { display: none !important; }

  /* Card hover: disable transform on touch */
  .card:hover {
    transform: none;
  }
  .stat-card:hover {
    transform: none;
  }

  /* Tabs: scrollable */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  /* Pagination: compact */
  .pagination { gap: 0; }
  .page-btn { width: 30px; height: 30px; font-size: var(--text-xs); }

  /* Dropdown: ensure visible & within viewport */
  .dropdown-menu {
    min-width: 160px;
    font-size: var(--text-xs);
  }
  /* Header user dropdown: flip alignment to stay in viewport */
  [dir="rtl"] .app-header-end .dropdown-menu {
    right: auto !important;
    left: 0 !important;
  }
  [dir="ltr"] .app-header-end .dropdown-menu {
    left: auto !important;
    right: 0 !important;
  }
}

/* ===========================================
   <= 576px — Mobile portrait
=========================================== */
@media (max-width: 576px) {
  .app-content { padding: var(--space-2) !important; }

  /* Stats: 1 column */
  .r-stats-grid { grid-template-columns: 1fr !important; }

  /* Smaller titles */
  .content-title { font-size: var(--text-lg) !important; }
  .content-subtitle { font-size: var(--text-xs) !important; }

  /* Cards: tighter */
  .card-header { padding: var(--space-3) var(--space-4) !important; }
  .card-body { padding: var(--space-3) !important; }
  .card { border-radius: var(--radius-lg) !important; }

  /* Stat icons smaller */
  .stat-icon { width: 32px !important; height: 32px !important; font-size: 0.9rem !important; }

  /* Avatar */
  .avatar-xl { width: 48px !important; height: 48px !important; font-size: 1.3rem !important; }

  /* Buttons */
  .btn { font-size: var(--text-xs) !important; }
  .btn-lg { font-size: var(--text-sm) !important; padding: 10px 16px !important; }

  /* Quick actions: 2 cols */
  .quick-actions { grid-template-columns: repeat(2, 1fr) !important; }

  /* Auto-grid: full width cards */
  .r-auto-grid { grid-template-columns: 1fr !important; }

  /* Toast: full width */
  .toast-container {
    left: var(--space-3) !important;
    right: var(--space-3) !important;
    max-width: 100% !important;
  }
  .toast { min-width: 0; }

  /* Sidebar on mobile: take full width */
  .sidebar {
    width: 85vw !important;
    max-width: 320px;
  }

  /* Forms: tighter */
  .form-group { margin-bottom: var(--space-3); }
  .form-control { padding: 0.5rem var(--space-3); font-size: var(--text-xs); }
  .form-label { font-size: var(--text-xs); }

  /* Empty state: smaller */
  .empty-state { padding: var(--space-8) var(--space-4); }
  .empty-icon { width: 60px; height: 60px; font-size: 1.5rem; }
  .empty-title { font-size: var(--text-base); }

  /* Alert: compact */
  .alert { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); }
}

/* ===========================================
   <= 400px — Very small phones
=========================================== */
@media (max-width: 400px) {
  .app-content { padding: var(--space-1) !important; }
  .card-header { padding: var(--space-2) var(--space-3) !important; }
  .card-body { padding: var(--space-2) !important; }
  .table { font-size: 10px !important; }

  /* Force all custom grids to 1 col */
  .r-grid-2, .r-grid-3 { grid-template-columns: 1fr !important; }

  /* Sidebar: nearly full width */
  .sidebar { width: 90vw !important; max-width: 300px; }

  /* Quick action icons smaller */
  .quick-action { padding: var(--space-3) var(--space-2); }
  .quick-action-icon { width: 36px; height: 36px; font-size: 1rem; }
  .quick-action-label { font-size: 10px; }
}

/* ===========================================
   LANDING / AUTH PAGES
=========================================== */
@media (max-width: 992px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .pricing-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  .auth-container { max-width: 100% !important; padding: var(--space-4) !important; }
  .auth-card { margin: var(--space-4) !important; }
  section[style*="padding"] { padding: var(--space-6) var(--space-4) !important; }
}

/* ===========================================
   ADMIN PAGES
=========================================== */
@media (max-width: 992px) {
  .admin-sidebar { transform: translateX(100%) !important; }
  [dir="ltr"] .admin-sidebar { transform: translateX(-100%) !important; }
  .admin-sidebar.mobile-open { transform: translateX(0) !important; }
  .admin-main { margin-right: 0 !important; margin-left: 0 !important; }
}

@media (max-width: 768px) {
  .admin-stats { grid-template-columns: 1fr 1fr !important; }
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 576px) {
  .admin-stats { grid-template-columns: 1fr !important; }
}

/* ===========================================
   TOUCH-SPECIFIC IMPROVEMENTS
=========================================== */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .nav-item { padding: 0.75rem var(--space-3); }
  .nav-sub-item { padding: 0.65rem var(--space-3); padding-left: var(--space-5); }
  .nav-group-header { padding: 0.75rem var(--space-3); }

  /* No hover transforms on touch */
  .card:hover { transform: none; box-shadow: var(--shadow-card); }
  .stat-card:hover { transform: none; box-shadow: var(--shadow-card); }
  .quick-action:hover { transform: none; }
  .btn:hover { transform: none; }
  .btn-primary:hover { transform: none; }
  .btn-gradient:hover { transform: none; }

  /* Remove hover sub-item slide effect */
  .nav-sub-item:hover { padding-left: var(--space-5); }

  /* Smoother scrolling */
  .sidebar-nav { -webkit-overflow-scrolling: touch; }
}

/* ===========================================
   SAFE AREA (notch devices)
=========================================== */
@supports (padding: max(0px)) {
  .app-header {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }
  .app-content {
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  }
}

/* ===========================================
   PRINT
=========================================== */
@media print {
  .sidebar, .app-header, .mobile-menu-btn, .sidebar-overlay, .no-print { display: none !important; }
  .app-main { margin: 0 !important; }
  .app-content { padding: 0 !important; }
  body { background: white !important; }
  .r-stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .r-content-sidebar { grid-template-columns: 1fr 280px !important; }
}