/* ==========================================================================
   FinPlan | SIMS: Mobile & iPhone 12 Responsive Stylesheet
   Branding: Navy Blue Beige Wedding Dark (#FCF1D0 Main)
   Rule F.6 Compliant: Modular stylesheet (<300 lines) | Rule 2: Zero emoji
   ========================================================================== */

/* 1. Mobile Bottom Tab Bar (iOS Native Midnight Glass App Bar) */
.mobile-tab-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 62px;
  background: rgba(1, 7, 54, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
  padding: 0 8px calc(env(safe-area-inset-bottom, 6px) + 2px) 8px;
}

.mobile-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: rgba(252, 241, 208, 0.65);
  font-size: 10px;
  font-weight: 600;
  height: 100%;
  transition: var(--transition-fast);
}

.mobile-tab-item i {
  width: 19px;
  height: 19px;
  transition: var(--transition-fast);
}

.mobile-tab-item.active {
  color: var(--color-champagne-main, #FCF1D0);
  font-weight: 700;
}

.mobile-tab-item.active i {
  color: var(--color-champagne-main, #FCF1D0);
  transform: translateY(-1px);
}

/* Floating Action Button: Mobile-only */
#global-fab-btn,
.global-fab-btn {
  display: none !important;
}

/* Header fit (B-07): the nav wrapper may shrink, so its scrolling list takes the squeeze instead of widening the
   page (the page overflowed by up to 380px between 769px and 1280px), and the brand tagline yields space first. */
.top-header > nav { min-width: 0; }
@media (max-width: 1360px) {
  .brand-title span { display: none; }
}

/* 2. Media Queries for iPhone 12 (390px) & Mobile Screens (<= 768px) */
@media (max-width: 768px) {
  #global-fab-btn,
  .global-fab-btn {
    display: flex !important;
    position: fixed !important;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    right: 20px !important;
    z-index: 999 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0D1C42, #22396F) !important;
    border: 1px solid rgba(252, 241, 208, 0.4) !important;
    color: #FCF1D0 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  .mobile-tab-bar { display: flex; justify-content: space-around; align-items: center; }
  .main-wrapper { padding: 14px 12px calc(88px + env(safe-area-inset-bottom, 16px)) 12px; }
  
  .top-header { height: 56px; padding: 0 14px; }
  .header-brand { min-width: auto; gap: 8px; }
  .brand-badge { width: 30px; height: 30px; font-size: 13px; }
  .brand-title h1 { font-size: 15px; }
  .brand-title span, .profile-name, .profile-trigger i { display: none; }
  .profile-trigger { padding: 3px; border-radius: var(--radius-full); }
  .header-controls { min-width: auto; gap: 8px; }

  .page-header-strip, .header-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
  }

  .page-headline h2, .greeting h2 { font-size: 19px; line-height: 1.25; }
  .page-headline p, .greeting p { font-size: 12px; }
  .quick-actions { width: 100%; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  .quick-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 42px; }

  html, body, .app-wrapper, .main-wrapper {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .dashboard-columns { grid-template-columns: 1fr !important; gap: 16px; }
  .dashboard-charts-row { grid-template-columns: 1fr !important; gap: 16px !important;
    grid-template-areas: "velocity" "calendar" "allocation" !important; }
  .accounts-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .dashboard-goals-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  [style*="minmax(320px"], [style*="minmax(280px"], [style*="minmax(260px"],
  [style*="minmax(240px"], [style*="minmax(220px"], [style*="minmax(200px"],
  [style*="minmax(180px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  canvas { max-width: 100% !important; }
  .dashboard-charts-row .glass-card { overflow: hidden; }
  .glass-card { padding: 16px 14px !important; }

  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
  .kpi-card { padding: 12px 10px; }
  .kpi-title { font-size: 10.5px; }
  .kpi-value { font-size: 17px; }
  .kpi-sub { font-size: 10.5px; }

  .search-filter-box { flex-direction: column; gap: 8px; }
  #tx-filter-form > div { grid-template-columns: 1fr !important; gap: 10px !important; }
  .filter-btn-group { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; padding: 2px; }
  .filter-pill { padding: 6px 10px; font-size: 11.5px; white-space: nowrap; }

  .search-input, .form-control, select, input[type="text"], input[type="number"], input[type="date"] {
    font-size: 16px !important;
  }

  .section-title-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-title { font-size: 15px; }

  /* Visual Mobile Card Table System */
  .custom-table thead, .table-custom thead { display: none !important; }
  .custom-table, .custom-table tbody, .table-custom, .table-custom tbody {
    display: block;
    width: 100%;
  }

  .custom-table tr, .table-custom tr {
    display: flex;
    flex-direction: column;
    background: rgba(13, 28, 66, 0.85);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    position: relative;
    gap: 4px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .custom-table tr:active, .table-custom tr:active { transform: scale(0.992); }

  .custom-table tr:has(.badge-income) { border-left: 3.5px solid var(--accent-success); }
  .custom-table tr:has(.badge-expense) { border-left: 3.5px solid var(--accent-danger); }
  .custom-table tr:has(.badge-transfer) { border-left: 3.5px solid var(--accent-cyan); }

  .custom-table tr:has(td[colspan]) { align-items: center; text-align: center; }
  .custom-table td[colspan] { justify-content: center !important; text-align: center !important; }

  .custom-table td, .table-custom td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0 !important;
    border-bottom: 1px solid rgba(252, 241, 208, 0.08) !important;
    font-size: 13px;
    width: 100%;
  }

  .custom-table td:last-child, .table-custom td:last-child {
    border-bottom: none !important;
    padding-top: 8px !important;
  }

  .custom-table td[data-label]::before, .table-custom td[data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
    margin-right: 12px;
  }

  .custom-table td.card-cell-header {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 8px !important;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle) !important;
  }
  .custom-table td.card-cell-header::before { display: none !important; }
  .custom-table td.card-cell-header .card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #FFFFFF;
  }

  .custom-table td.card-cell-full {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .custom-table td.card-cell-full::before { margin-bottom: 2px; }

  .custom-table td.card-cell-actions { justify-content: flex-end; gap: 8px; }
  .custom-table td.card-cell-actions::before { display: none !important; }

  .app-footer {
    padding: 16px 14px 80px 14px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    font-size: 11.5px;
  }
  .footer-links { justify-content: center; flex-wrap: gap; gap: 10px; }
}

/* U-3 (B-14): icon-only header nav between 769 and 1100 px so no link is clipped next to the bell */
@media (min-width: 769px) and (max-width: 1100px) {
  .nav-link-item a span { display: none; }
  .nav-link-item a { padding: 8px 10px; }
  .cmd-trigger span, .cmd-trigger kbd { display: none; }
}
@media (max-width: 768px) {
  .cmd-trigger span, .cmd-trigger kbd { display: none; }
}