/* ============================================================
   mobile.css — Mobile-specific overrides (max-width: 768px)
   FinDom Financial Management App
   ============================================================ */

@media (max-width: 768px) {

  /* ── Layout: sidebar becomes slide-in drawer ──────────────── */
  .sidebar {
    transform: translateX(-240px);
    transition: transform 0.25s ease;
    z-index: var(--z-modal);
    box-shadow: none;
  }

  .sidebar.sidebar--open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.4);
  }

  /* Backdrop overlay */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-modal) - 1);
    cursor: pointer;
  }

  .sidebar-backdrop.visible {
    display: block;
  }

  /* Close button — visible only on mobile */
  .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font-size: 1rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    margin-left: auto;
    padding: 0;
  }

  .sidebar-close-btn:hover {
    background: var(--color-surface-1);
    color: var(--color-text-primary);
  }

  .page-container {
    margin-left: 0;
  }

  /* Add bottom padding so content is not hidden behind tab bar */
  .page-content {
    margin-left: 0;
    padding: var(--space-4);
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  /* Show mobile app header */
  .app-header {
    display: flex;
  }

  /* Hamburger button */
  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    color: var(--color-text-primary);
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    padding: 0;
  }

  .hamburger-btn:hover {
    background: var(--color-surface-1);
  }

  /* ── Tab bar: show ────────────────────────────────────────── */
  .tab-bar {
    display: flex;
  }

  /* ── FAB: reposition to bottom-center above tab bar ────────── */
  .fab {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    right: 50%;
    transform: translateX(50%);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.55);
  }

  .fab:hover {
    transform: translateX(50%) translateY(-2px) scale(1.05);
  }

  .fab:active {
    transform: translateX(50%) translateY(0) scale(0.97);
  }

  /* ── Page header adjustments ─────────────────────────────── */
  .page-header {
    display: none; /* mobile uses .app-header instead */
  }

  /* ── Cards: full width, less padding ─────────────────────── */
  .card-body {
    padding: var(--space-4);
  }

  .card-header {
    padding: var(--space-3) var(--space-4);
  }

  .card-footer {
    padding: var(--space-3) var(--space-4);
    flex-wrap: wrap;
  }

  /* ── Typography scaling ───────────────────────────────────── */
  h1  { font-size: var(--font-size-xl); }
  h2  { font-size: var(--font-size-lg); }
  h3  { font-size: var(--font-size-md); }

  .amount-large {
    font-size: var(--font-size-xl);
  }

  /* ── Forms: full width ────────────────────────────────────── */
  .form-group {
    width: 100%;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px; /* prevents iOS zoom */
    min-height: 48px;
  }

  .btn {
    min-height: 48px;
  }

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

  .btn-icon {
    width: 48px;
    height: 48px;
    min-height: 48px;
  }

  /* ── Grids: collapse to single column ────────────────────── */
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  /* ── Tables: horizontal scroll ────────────────────────────── */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
  }

  table {
    min-width: 560px;
  }

  th, td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
  }

  /* ── Toolbar: stack vertically ────────────────────────────── */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-left,
  .toolbar-right {
    width: 100%;
  }

  /* ── Section header ───────────────────────────────────────── */
  .section {
    margin-bottom: var(--space-6);
  }

  /* ── Modal: bottom sheet style ────────────────────────────── */
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    animation: sheet-in var(--transition-normal) forwards;
  }

  @keyframes sheet-in {
    from { transform: translateY(100%); opacity: 0.8; }
    to   { transform: translateY(0); opacity: 1; }
  }

  .modal-header {
    padding: var(--space-4) var(--space-5);
    /* Sheet drag handle */
    position: relative;
  }

  .modal-header::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background-color: var(--color-border);
    border-radius: var(--radius-full);
    margin: 0 auto var(--space-4);
  }

  .modal-body {
    padding: var(--space-4) var(--space-5);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }

  .modal-footer {
    padding: var(--space-3) var(--space-5);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    flex-direction: column-reverse;
    gap: var(--space-2);
  }

  .modal-footer .btn {
    width: 100%;
  }

  /* ── Toast: stack from top, full width ───────────────────── */
  .toast-container {
    top: var(--space-3);
    right: var(--space-3);
    left: var(--space-3);
    width: auto;
    max-width: none;
  }

  /* ── Stat cards: 2-column grid ────────────────────────────── */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .stat-card {
    padding: var(--space-4);
  }

  .stat-value {
    font-size: var(--font-size-lg);
  }

  /* ── List items: larger tap targets ──────────────────────── */
  .list-item {
    padding: var(--space-3) var(--space-3);
    min-height: 56px;
  }

  /* ── Nav link tap targets ────────────────────────────────── */
  .nav-link {
    min-height: 48px;
  }

  /* ── Horizontal scroll for month/period selectors ────────── */
  .scroll-x {
    display: flex;
    overflow-x: auto;
    gap: var(--space-2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-1);
  }

  .scroll-x::-webkit-scrollbar {
    display: none;
  }

  .scroll-x > * {
    flex-shrink: 0;
  }

  /* ── Hide desktop-only elements ──────────────────────────── */
  .desktop-only {
    display: none !important;
  }

  /* ── Show mobile-only elements ───────────────────────────── */
  .mobile-only {
    display: block !important;
  }

  /* ── Filter chips ────────────────────────────────────────── */
  .filter-chips {
    display: flex;
    overflow-x: auto;
    gap: var(--space-2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .filter-chips::-webkit-scrollbar {
    display: none;
  }

  .filter-chip {
    flex-shrink: 0;
  }

  /* ── Page content section spacing ───────────────────────── */
  .section-header {
    margin-bottom: var(--space-3);
  }

  /* ── Pocket summary cards: horizontal scroll ─────────────── */
  .pocket-cards {
    display: flex;
    overflow-x: auto;
    gap: var(--space-3);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-1);
  }

  .pocket-cards::-webkit-scrollbar {
    display: none;
  }

  .pocket-cards > .card {
    flex-shrink: 0;
    min-width: 200px;
  }

  /* ── FAB — no label on mobile ────────────────────────────── */
  .fab .fab-label {
    display: none;
  }

  /* ── Ensure full-bleed cards on narrow screens ───────────── */
  .card-flush {
    border-left: none;
    border-right: none;
    border-radius: 0;
    margin-left: calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
  }

  /* ── Empty state: less padding ───────────────────────────── */
  .empty-state {
    padding: var(--space-8) var(--space-4);
  }

}

/* ── Show sidebar, hide tab bar above breakpoint ────────────── */
@media (min-width: 769px) {
  .tab-bar {
    display: none !important;
  }

  .app-header {
    display: none !important;
  }

  .mobile-only {
    display: none !important;
  }

  .desktop-only {
    display: block !important;
  }

  /* Hide mobile-only sidebar elements on desktop */
  .sidebar-close-btn {
    display: none;
  }

  .sidebar-logo-row {
    display: contents; /* transparent wrapper, logo keeps its own styles */
  }

  .sidebar-backdrop {
    display: none !important;
  }

  .hamburger-btn {
    display: none;
  }
}