/* ============================================================
   mobile.css — NaijaTrust MFB | Mobile-First Responsive Layer
   Link this AFTER style.css in index.html:
   <link rel="stylesheet" href="mobile.css" />
   ============================================================ */

/* ============================================================
   SECTION 1 — LOGIN PAGE
   ============================================================ */

@media (max-width: 600px) {

  .login-page {
    min-height: 100dvh;
    align-items: flex-start;
    overflow-y: auto;
  }

  /* Subtle full-bleed gradient, rings feel too heavy on small screens */
  .login-page::before {
    background:
      radial-gradient(ellipse 120% 55% at 50% 0%, rgba(26,79,73,0.65) 0%, transparent 70%),
      radial-gradient(ellipse 80% 40% at 80% 100%, rgba(201,168,76,0.07) 0%, transparent 60%);
  }

  /* Topbar: tighten padding, hide "Secure" note on very narrow screens */
  .login-topbar {
    padding: 16px 20px;
  }

  .login-topbar-note {
    display: none;
  }

  /* Center column: comfortable vertical rhythm */
  .login-right {
    padding: 88px 20px 48px;
    gap: 0;
  }

  /* Headline: scale down gracefully */
  .login-headline {
    margin-bottom: 28px;
  }

  .login-headline h1 {
    font-size: 2rem;
    letter-spacing: -0.5px;
  }

  .login-headline p {
    font-size: 13px;
  }

  .login-headline .lh-eyebrow {
    font-size: 10px;
    padding: 4px 12px;
    margin-bottom: 16px;
  }

  /* Form card: full-width with edge breathing room */
  .login-form {
    width: 100%;
    max-width: 100%;
    padding: 28px 22px 24px;
    border-radius: 18px;
    box-shadow:
      0 4px 24px rgba(0,0,0,0.28),
      0 0 0 1px rgba(255,255,255,0.07);
  }

  .form-top-label {
    margin-bottom: 22px;
    padding-bottom: 18px;
  }

  .form-top-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }

  .form-top-label .ftl-text h2 {
    font-size: 1rem;
  }

  /* Inputs: larger touch targets */
  .input-group {
    margin-bottom: 16px;
  }

  .input-group input,
  .input-group select {
    padding: 13px 14px;
    font-size: 15px;
    border-radius: 12px;
  }

  .password-box button {
    width: 48px;
    border-radius: 12px;
    font-size: 16px;
  }

  .remember-box {
    font-size: 13.5px;
    margin-bottom: 20px;
  }

  /* CTA button: prominent & easy to tap */
  .login-btn {
    padding: 15px;
    font-size: 15px;
    border-radius: 12px;
    letter-spacing: 0.01em;
  }

  .login-secure-note {
    font-size: 11px;
    margin-top: 14px;
  }

  /* Stat strip: tighten gap */
  .login-stat-strip {
    gap: 20px;
    padding: 22px 0 30px;
  }

  .login-stat .ls-num {
    font-size: 1.4rem;
  }

  .login-stat .ls-label {
    font-size: 9.5px;
  }
}

/* ============================================================
   SECTION 2 — TOPBAR
   ============================================================ */

@media (max-width: 768px) {

  .topbar {
    padding: 0 14px;
    height: 58px;
  }

  .topbar-left {
    gap: 10px;
  }

  .menu-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 10px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .brand-name {
    font-size: 15px;
    letter-spacing: -0.2px;
  }

  .topbar-nav {
    display: none; /* hidden on mobile; nav is in sidebar */
  }

  /* Right side: collapse to essentials */
  .user-box {
    gap: 8px;
  }

  .theme-toggle {
    width: 36px;
    height: 36px;
  }

  /* Topbar action button: icon-only on small screens */
  .topbar-action {
    padding: 9px 14px;
    font-size: 13px;
    border-radius: 10px;
  }

  #displayUser {
    font-size: 13px;
    gap: 6px;
  }

  #displayUser i.fa-circle-user {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .topbar-action span {
    display: none; /* icon only */
  }

  .topbar-action {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
}

/* ============================================================
   SECTION 3 — SIDEBAR
   ============================================================ */

@media (max-width: 768px) {

  .sidebar {
    width: 88vw;
    max-width: 320px;
  }

  .sidebar-header {
    padding: 22px 18px 18px;
  }

  .sidebar-badge {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }

  .sidebar-brand-name {
    font-size: 16px;
  }

  .sidebar-brand-sub {
    font-size: 10.5px;
  }

  .sidebar-menu {
    padding: 0 10px;
  }

  .sidebar-menu li {
    padding: 14px 16px;
    margin-bottom: 3px;
    border-radius: 14px;
  }

  .sb-label {
    font-size: 14.5px;
  }

  .sb-icon {
    font-size: 17px;
  }

  .sidebar-footer-card {
    margin: 10px 10px 16px;
    padding: 12px 12px;
    border-radius: 14px;
  }
}

/* ============================================================
   SECTION 4 — MAIN CONTENT WRAPPER
   ============================================================ */

@media (max-width: 768px) {
  .main-content {
    padding: 72px 14px 32px;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding: 66px 12px 28px;
  }
}

/* ============================================================
   SECTION 5 — HERO BANNER
   ============================================================ */

@media (max-width: 768px) {

  .hero-banner {
    min-height: auto;
    border-radius: 16px;
    margin-bottom: 18px;
  }

  .hero-content {
    flex-direction: column;
    padding: 28px 22px 22px;
    gap: 20px;
    align-items: flex-start;
  }

  .hero-text {
    min-width: unset;
    width: 100%;
  }

  .hero-text h1 {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
  }

  .hero-text p {
    font-size: 13.5px;
    line-height: 1.65;
    margin-bottom: 18px;
  }

  .hero-buttons {
    gap: 10px;
    flex-wrap: nowrap;
  }

  .hero-btn {
    padding: 10px 18px;
    font-size: 13px;
    border-radius: 10px;
    flex: 1;
    text-align: center;
    white-space: nowrap;
  }

  /* Hero stats card: horizontal strip */
  .hero-card {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 16px 18px;
    border-radius: 14px;
    gap: 0;
  }

  .hero-stat {
    flex: 1;
    padding: 0 14px;
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,0.12);
    text-align: center;
  }

  .hero-stat:last-child {
    border-right: none;
  }

  .hero-stat h2 {
    font-size: 18px;
    margin-bottom: 3px;
  }

  .hero-stat span {
    font-size: 10.5px;
  }
}

@media (max-width: 400px) {
  .hero-card {
    flex-direction: column;
    gap: 0;
  }

  .hero-stat {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
  }

  .hero-stat:last-child {
    border-bottom: none;
  }

  .hero-stat h2 {
    font-size: 17px;
  }
}

/* ============================================================
   SECTION 6 — STAT / KPI CARDS
   ============================================================ */

@media (max-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }

  .stat-card {
    padding: 14px 13px;
    border-radius: 12px;
    gap: 11px;
  }

  .stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    font-size: 18px;
    flex-shrink: 0;
  }

  .stat-info h3 {
    font-size: 10.5px;
    white-space: normal;
    line-height: 1.3;
  }

  .stat-info h2,
  .stat-info h1 {
    font-size: 17px;
    letter-spacing: -0.3px;
  }

  .stat-sub {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .cards {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .stat-card {
    padding: 12px 11px;
    gap: 9px;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
    border-radius: 10px;
  }

  .stat-info h2,
  .stat-info h1 {
    font-size: 16px;
  }
}

/* ============================================================
   SECTION 7 — ANALYTICS GRID
   ============================================================ */

@media (max-width: 768px) {
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
}

@media (max-width: 480px) {
  .analytics-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }
}

/* ============================================================
   SECTION 8 — CHARTS
   ============================================================ */

@media (max-width: 900px) {
  .charts,
  .chart-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .chart-row-pair {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 768px) {

  .chart-card,
  .chart-box {
    padding: 16px;
    border-radius: 14px;
  }

  .chart-card canvas,
  .chart-box canvas {
    height: 200px !important;
  }

  .chart-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 12px;
  }

  .chart-card-header h3,
  .chart-card h3,
  .chart-box h3 {
    font-size: 13px;
  }

  /* Period tabs: scrollable row */
  .chart-period-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding: 3px 2px;
    gap: 3px;
    scrollbar-width: none;
  }

  .chart-period-tabs::-webkit-scrollbar {
    display: none;
  }

  .cpt-btn {
    font-size: 11px;
    padding: 5px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .gauge-center-label span {
    font-size: 20px;
  }

  .gauge-center-label em {
    font-size: 10px;
  }

  .gauge-legend {
    font-size: 11px;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ============================================================
   SECTION 9 — SECTION HEADERS & ACTIONS
   ============================================================ */

@media (max-width: 768px) {

  .section-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }

  .section-top h2 {
    font-size: 17px;
  }

  .section-top p {
    font-size: 12px;
  }

  .top-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .top-actions input,
  .top-actions select {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 10px;
  }

  .top-actions button,
  .section-top > button {
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 10px;
    white-space: nowrap;
  }
}

/* ============================================================
   SECTION 10 — TABLES
   ============================================================ */

@media (max-width: 768px) {

  .table-wrapper {
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 560px; /* horizontal scroll below this */
  }

  th {
    padding: 12px 14px;
    font-size: 12px;
  }

  td {
    padding: 12px 14px;
    font-size: 13px;
  }

  .customer-avatar {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .customer-cell {
    gap: 9px;
  }

  .customer-cell h4 {
    font-size: 13px;
  }

  .customer-cell span {
    font-size: 11px;
  }

  .status,
  .modern-status {
    padding: 3px 10px;
    font-size: 11px;
  }

  .loan-actions {
    gap: 6px;
  }

  .action-btn,
  .icon-btn {
    width: 32px;
    height: 32px;
    font-size: 12px;
    border-radius: 8px;
  }
}

/* Loan table specific */
@media (max-width: 768px) {
  #loanTable {
    min-width: 640px;
  }

  #loanTable th,
  #loanTable td {
    padding: 12px 14px;
    font-size: 12.5px;
  }
}

/* ============================================================
   SECTION 11 — MODALS (slide-in drawer)
   ============================================================ */

@media (max-width: 768px) {

  /* Full-width bottom sheet on mobile */
  .modal {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 48px rgba(0,0,0,0.18);
    animation: sheetUp 0.32s cubic-bezier(0.34, 1.28, 0.64, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  @keyframes sheetUp {
    from { transform: translateY(100%); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* Drag handle pill at top of sheet */
  .modal-content::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 0 auto 18px;
  }

  .modal-content {
    padding: 18px 20px 32px;
  }

  .modal-top {
    margin-bottom: 18px;
    padding-bottom: 14px;
  }

  .modal-top h3 {
    font-size: 16px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 14px;
  }

  .form-grid input,
  .form-grid select,
  .form-grid textarea {
    padding: 13px 13px;
    font-size: 14px;
    border-radius: 12px;
  }

  .save-btn {
    padding: 15px;
    font-size: 15px;
    border-radius: 12px;
  }

  .loan-summary {
    padding: 16px;
    border-radius: 12px;
  }

  .loan-summary p {
    font-size: 13px;
  }
}

/* ============================================================
   SECTION 12 — CONTRIBUTION SECTION
   ============================================================ */

@media (max-width: 900px) {
  .contrib-tables-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 768px) {

  .contribution-cards {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }

  .contrib-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .contrib-title-row h2 {
    font-size: 17px;
  }

  .contrib-actions {
    width: 100%;
    gap: 8px;
  }

  .contrib-actions input {
    flex: 1;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  .contrib-actions button {
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 10px;
    white-space: nowrap;
  }

  .contrib-col-title {
    font-size: 13px;
    height: auto;
    margin-bottom: 6px;
  }

  .collector-title {
    font-size: 15px;
    margin-bottom: 8px;
  }
}

/* ============================================================
   SECTION 13 — COLLECTOR DASHBOARD CARDS
   ============================================================ */

@media (max-width: 768px) {

  .top-collector-card {
    padding: 16px;
    border-radius: 14px;
    min-height: 110px;
  }

  .tc-name {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .tc-stats {
    gap: 12px;
  }

  .tc-stat-val {
    font-size: 14px;
  }

  .tc-label {
    font-size: 10px;
  }

  .daily-progress-card {
    padding: 14px;
    border-radius: 14px;
  }

  .dp-amounts span:first-child {
    font-size: 17px;
  }

  .dp-pct-circle {
    width: 46px;
    height: 46px;
  }
}

/* ============================================================
   SECTION 14 — PAGINATION
   ============================================================ */

@media (max-width: 600px) {

  .pagination {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    font-size: 12.5px;
  }

  .page-btns {
    gap: 4px;
    flex-wrap: wrap;
  }

  .page-btns button {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
}

/* ============================================================
   SECTION 15 — CUSTOMER DETAIL POPUP
   ============================================================ */

@media (max-width: 768px) {

  /* Full-screen bottom sheet */
  .cust-detail-popup {
    top: auto;
    bottom: -100%;
    left: 0;
    right: 0;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    transition: bottom 0.36s cubic-bezier(0.34, 1.20, 0.64, 1), opacity 0.2s ease;
  }

  .cust-detail-popup.open {
    bottom: 0;
    transform: none !important;
    opacity: 1;
  }

  .cdp-header {
    padding: 18px 18px 14px;
    gap: 12px;
  }

  .cdp-avatar {
    width: 46px;
    height: 46px;
    font-size: 16px;
  }

  .cdp-title h2 {
    font-size: 17px;
  }

  .cdp-badge {
    font-size: 10.5px;
    padding: 3px 10px;
  }

  /* Info grid: 2 columns on mobile */
  .cdp-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cdp-info-item:nth-child(3n) {
    border-right: 1px solid var(--border);
  }

  .cdp-info-item:nth-child(2n) {
    border-right: none;
  }

  .cdp-info-item {
    padding: 12px 14px;
    gap: 9px;
  }

  .cdp-info-item strong {
    font-size: 13px;
  }

  /* Tabs: scrollable */
  .cdp-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding: 10px 14px 0;
    scrollbar-width: none;
    gap: 0;
  }

  .cdp-tabs::-webkit-scrollbar {
    display: none;
  }

  .cdp-tab {
    font-size: 12.5px;
    padding: 8px 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .cdp-tab-content {
    padding: 14px 14px;
  }

  /* CDP tables: scroll */
  .cdp-table {
    min-width: 460px;
  }

  .cdp-table th {
    padding: 10px 12px;
    font-size: 11.5px;
  }

  .cdp-table td {
    padding: 10px 12px;
    font-size: 12.5px;
  }
}

/* ============================================================
   SECTION 16 — FULL RECORDS POPUP
   ============================================================ */

@media (max-width: 768px) {

  .fr-popup {
    width: 100vw;
    border-radius: 18px 18px 0 0;
  }

  .fr-header {
    padding: 14px 16px;
    gap: 10px;
  }

  .fr-title h3 {
    font-size: 15px;
  }

  .fr-header-right {
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
  }

  .fr-search-box {
    flex: 1;
    min-width: 0;
  }

  .fr-search-box input {
    width: 100%;
    min-width: 0;
  }

  .fr-close {
    width: 32px;
    height: 32px;
    font-size: 14px;
    flex-shrink: 0;
  }

  .fr-table {
    min-width: 520px;
  }

  .fr-table th {
    padding: 11px 12px;
    font-size: 12px;
  }

  .fr-table td {
    padding: 11px 12px;
    font-size: 12.5px;
  }

  .fr-footer {
    padding: 10px 16px;
    font-size: 12px;
  }
}

/* ============================================================
   SECTION 17 — CUSTOMER PROFILE MODAL
   ============================================================ */

@media (max-width: 768px) {

  .cust-profile-modal {
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cust-profile-content {
    padding: 0 0 24px;
  }

  .cust-profile-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 16px;
  }

  .cust-profile-meta h2 {
    font-size: 17px;
  }

  .cust-profile-actions-top {
    margin-left: auto;
  }

  /* Tabs scroll on mobile */
  .cp-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .cp-tabs::-webkit-scrollbar {
    display: none;
  }

  .cp-tab {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12.5px;
    padding: 9px 12px;
  }

  /* Tables inside profile: scroll */
  .cp-table {
    min-width: 400px;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   SECTION 18 — COLLECTOR PROFILE PANEL
   ============================================================ */

@media (max-width: 768px) {

  .cp-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .cp-period-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .cp-stat-card,
  .cp-period-card {
    padding: 12px;
    border-radius: 12px;
  }

  .cp-section-title {
    font-size: 13px;
  }

  .cp-perf-header strong {
    font-size: 16px;
  }
}

/* ============================================================
   SECTION 19 — REPORTS DASHBOARD
   ============================================================ */

@media (max-width: 780px) {
  .rpt-charts-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 768px) {

  .reports-dashboard {
    padding: 16px;
    border-radius: 14px;
  }

  .rpt-header-left h2 {
    font-size: 17px;
  }

  /* Tab bar: scrollable row */
  .rpt-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .rpt-tabs::-webkit-scrollbar {
    display: none;
  }

  .rpt-tab {
    font-size: 12.5px;
    padding: 10px 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .rpt-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .rpt-kpi {
    padding: 13px 14px;
    border-radius: 12px;
    gap: 5px;
  }

  .rpt-kpi-value {
    font-size: 1.25rem;
  }

  .rpt-kpi-label {
    font-size: 10.5px;
  }

  .rpt-chart-card {
    padding: 14px 16px;
    border-radius: 12px;
  }

  /* PAR gauges: 2 per row */
  .rpt-par-gauges {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .rpt-par-gauge {
    padding: 14px 12px;
    border-radius: 12px;
  }

  .rpt-par-gauge-ring {
    width: 76px;
    height: 76px;
  }

  .rpt-par-gauge-ring svg {
    width: 76px;
    height: 76px;
  }

  /* Aging bands: 2 per row */
  .rpt-aging-bands {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .rpt-aging-band {
    padding: 13px 14px;
    border-radius: 12px;
  }

  .rpt-ab-value {
    font-size: 1.1rem;
  }

  /* Tables: scroll */
  .rpt-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  .rpt-table {
    min-width: 480px;
  }

  .rpt-table th {
    padding: 9px 12px;
    font-size: 11px;
  }

  .rpt-table td {
    padding: 9px 12px;
    font-size: 12.5px;
  }

  .rpt-table-hd {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 6px;
  }

  .rpt-select {
    padding: 7px 10px;
    font-size: 12.5px;
    border-radius: 8px;
  }

  /* Print modal */
  .rpt-print-content {
    padding: 22px 18px;
    border-radius: 14px;
  }

  .rpt-print-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .rpt-print-actions button {
    padding: 12px 20px;
    font-size: 14px;
    justify-content: center;
  }

  .prpt-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .prpt-summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ============================================================
   SECTION 20 — FAQ GRID
   ============================================================ */

@media (max-width: 768px) {

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 16px 0 0;
  }

  .faq-item {
    padding: 18px;
    border-radius: 14px;
  }

  .faq-item h3 {
    font-size: 14px;
  }

  .faq-item p {
    font-size: 13px;
  }
}

/* ============================================================
   SECTION 21 — FOOTER
   ============================================================ */

@media (max-width: 768px) {

  .footer {
    margin-top: 40px;
    padding-top: 32px;
  }

  .footer-container {
    flex-direction: column;
    gap: 24px;
    padding: 0 20px 28px;
  }

  .footer-brand {
    min-width: unset;
    width: 100%;
  }

  .footer-brand h2 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .footer-brand p {
    font-size: 13px;
    line-height: 1.65;
  }

  .footer-links,
  .footer-contact {
    min-width: unset;
    width: 100%;
  }

  .footer-links h3,
  .footer-contact h3 {
    font-size: 13.5px;
    margin-bottom: 10px;
  }

  .footer-links li,
  .footer-contact p {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .footer-bottom {
    padding: 14px 16px;
    font-size: 12px;
  }
}

/* ============================================================
   SECTION 22 — STATEMENT MODAL
   ============================================================ */

@media (max-width: 768px) {

  .statement-modal {
    padding: 16px;
    align-items: flex-end;
  }

  .statement-content {
    width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 85dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .statement-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 10px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: white;
    border-top: 1px solid #e8edf3;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
    z-index: 10;
  }

  .statement-actions button {
    flex: 1;
    padding: 13px;
    font-size: 14px;
    border-radius: 12px;
    justify-content: center;
  }
}

/* ============================================================
   SECTION 23 — DARK MODE ADJUSTMENTS FOR MOBILE
   ============================================================ */

@media (max-width: 768px) {

  body.dark-mode .modal {
    box-shadow: 0 -12px 48px rgba(0,0,0,0.50);
  }

  body.dark-mode .cust-detail-popup {
    border-top: 1px solid #334155;
  }

  body.dark-mode .fr-popup {
    border-top: 1px solid #334155;
  }

  body.dark-mode .statement-actions {
    background: #1e293b;
    border-top-color: #334155;
  }

  body.dark-mode .modal-content::before {
    background: #475569;
  }
}

/* ============================================================
   SECTION 24 — TOUCH & SCROLL UTILITY
   ============================================================ */

/* Smooth momentum scrolling everywhere on iOS */
@media (max-width: 768px) {

  .sidebar-nav,
  .cdp-tab-content,
  .fr-table-wrap,
  .table-wrapper,
  .rpt-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  /* Remove tap highlight flashes on tappable elements */
  button,
  a,
  [onclick],
  .sidebar-menu li,
  .cdp-tab,
  .rpt-tab,
  .cp-tab {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Prevent text resizing on rotation */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* ============================================================
   SECTION 25 — SAFE AREA INSETS (iPhone notch / home bar)
   ============================================================ */

@supports (padding: env(safe-area-inset-bottom)) {

  @media (max-width: 768px) {

    .modal {
      padding-bottom: env(safe-area-inset-bottom);
    }

    .fr-popup.open,
    .cust-detail-popup.open {
      padding-bottom: env(safe-area-inset-bottom);
    }

    .topbar {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }

    .sidebar {
      padding-left: env(safe-area-inset-left);
    }

    .main-content {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
    }
  }
}