/*
 * responsive.css — Mobile & Tablet Adaptation
 * DimeWell Loan Processing Platform
 * TWOFOUR DIMEWELL LIMITED
 * Version 2.0 — Production Ready
 *
 * Breakpoints:
 *   - 576px  : Small phones
 *   - 768px  : Tablets / large phones
 *   - 992px  : Small laptops / landscape tablets
 *   - 1200px : Desktops
 *
 * Covers:
 *   - Collapses data tables into card-style layouts
 *   - Converts multi-column grids to single-column stacks
 *   - Enlarges touch targets (min 44×44px per WCAG)
 *   - Adjusts font sizes for small screens
 *   - Converts multi-step wizard to vertical layout
 *   - Hides non-essential elements on mobile
 *   - Responsive navigation
 *   - Responsive forms
 *
 * v2.0.1 FIXES:
 *   - FIX 1: Removed all dead landing.css responsive rules across all
 *     breakpoints. landing.css is being deleted and its class names
 *     (.hero-section, .product-cards-grid, .how-it-works-steps,
 *     .cta-btn, .landing-section, .landing-section-header, .testimonials-grid,
 *     .trust-indicators, .eligibility-bar-content, .final-cta-section,
 *     .product-card, .security-badges) were never used in the current
 *     index.html which uses a fully self-contained style block with different
 *     class names (.hero-wrap, .product-card-new, .step-card-new, etc.).
 *     Removed from 1200px, 992px, 768px, and 576px breakpoints.
 *
 *   - FIX 2: Removed dead custom navbar drawer references from the 992px
 *     breakpoint block (.navbar-hamburger { display: flex } and
 *     .navbar-mobile-drawer { display: block }). These toggled a custom
 *     mobile drawer system that was removed from navbar.css — the HTML
 *     elements don't exist in any template. Bootstrap's navbar-expand-lg
 *     handles mobile collapse via data-bs-toggle="collapse". The remaining
 *     user-button simplification rules in that block are kept.
 *
 *   - FIX 3: Removed .navbar { padding: 0 1rem } from the 768px block.
 *     This targeted Bootstrap's own .navbar class and was paired with
 *     the now-removed .navbar { padding: 0 1.5rem } in navbar.css. Without
 *     its parent rule it became redundant. Navbar padding is handled by
 *     Bootstrap's container-fluid and the responsive rules in navbar.css.
 *
 *   - FIX 4: Removed .navbar-mobile-drawer { width: 100%; max-width: 100vw }
 *     from the 480px block. Dead rule — the custom drawer HTML elements
 *     don't exist in any template.
 */

/* ==========================================================================
   BREAKPOINT: 1200px — Desktop Adjustments
   ========================================================================== */

@media (max-width: 1200px) {
  /* Grid adjustments */
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .officer-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }

  .finance-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }

  /* Review grid */
  .officer-review-grid {
    grid-template-columns: 1fr 350px;
  }

  /*
   * FIX 1: Removed .product-cards-grid and .how-it-works-steps rules.
   * These were landing.css class names — dead since landing.css is deleted.
   */

  /* Dashboard containers */
  .officer-dashboard,
  .finance-dashboard {
    padding: 1.25rem;
  }
}

/* ==========================================================================
   BREAKPOINT: 992px — Small Laptops / Landscape Tablets
   ========================================================================== */

@media (max-width: 992px) {
  /*
   * FIX 2: Removed .navbar-hamburger { display: flex } and
   * .navbar-mobile-drawer { display: block }. These activated a custom
   * mobile drawer system removed from navbar.css. Bootstrap's
   * navbar-expand-lg handles the mobile collapse natively.
   *
   * FIX 1: Removed .navbar-nav { display: none } — Bootstrap's
   * navbar-expand-lg already collapses the nav at this breakpoint.
   * The custom rule was redundant and part of the dead drawer system.
   *
   * FIX 1: Removed .hero-section .hero-title and .how-it-works-steps::before
   * — dead landing.css class names.
   */

  /* Simplify user button on smaller screens */
  .navbar-user-btn .user-name,
  .navbar-user-btn .dropdown-arrow {
    display: none;
  }

  .navbar-user-btn {
    padding: 0.35rem;
    border-radius: 50%;
  }

  /* Two-column layouts become single column */
  .two-column-layout {
    grid-template-columns: 1fr;
  }

  /* Review grid */
  .officer-review-grid {
    grid-template-columns: 1fr;
  }

  .officer-decision-panel {
    position: static;
  }

  /* Stat grids go to 2 columns */
  .stats-grid,
  .officer-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  /* Form rows */
  .form-row-3,
  .form-row-4 {
    grid-template-columns: 1fr 1fr;
  }

  /* Arrears buckets */
  .arrears-buckets {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  /* Disbursement channel select */
  .disbursement-channel-select {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BREAKPOINT: 768px — Tablets / Large Phones
   ========================================================================== */

@media (max-width: 768px) {
  /* ── Global Spacing ── */
  .dashboard-container,
  .container-fluid.py-4 {
    padding: 1rem;
  }

  .officer-dashboard,
  .finance-dashboard {
    padding: 1rem;
  }

  /* ── Dashboard Headers ── */
  .dashboard-header {
    padding: 1.25rem 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-header .d-flex.justify-content-between {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-header h1 {
    font-size: 1.35rem;
  }

  .dashboard-title {
    font-size: 1.25rem;
  }

  .officer-dashboard .dashboard-header,
  .finance-dashboard .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-actions {
    flex-direction: column;
    width: 100%;
  }

  .header-actions .btn,
  .header-actions a {
    width: 100%;
    text-align: center;
  }

  .btn-toolbar {
    margin-top: 0.75rem;
  }

  /* ── Navigation ── */
  /*
   * FIX 3: Removed .navbar { padding: 0 1rem } — targeted Bootstrap's
   * own .navbar class directly and was paired with the now-removed
   * .navbar { padding: 0 1.5rem } in navbar.css. Navbar padding is
   * handled by Bootstrap's container-fluid and navbar.css breakpoint rules.
   */

  .navbar-logo .logo-text {
    font-size: 1rem;
  }

  .navbar-logo img,
  .navbar-logo .logo-image {
    height: 30px;
  }

  .navbar-right {
    gap: 0.25rem;
  }

  .navbar-notification-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .navbar-user-btn {
    width: 36px;
    height: 36px;
  }

  /* ── Stat Cards ── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .officer-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .finance-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .stat-card,
  .finance-stat-card,
  .officer-stat-card {
    padding: 1rem;
  }

  .stat-value,
  .finance-stat-card .stat-value,
  .officer-stat-card .stat-value {
    font-size: 1.4rem;
  }

  .card.stat-card .stat-value {
    font-size: 1.4rem;
  }

  /* ── Forms ── */
  .form-row-2,
  .form-row-3,
  .form-row-4 {
    grid-template-columns: 1fr;
  }

  .form-section {
    padding: 1.25rem;
  }

  .form-card-select {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-step-indicator {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .form-step-connector {
    display: none;
  }

  .form-step-label {
    font-size: 0.625rem;
  }

  .form-actions {
    flex-direction: column;
    gap: 0.5rem;
  }

  .form-actions .form-btn {
    width: 100%;
    justify-content: center;
  }

  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .form-inline .form-group {
    min-width: 100%;
  }

  /* ── Applicant Dashboard ── */
  .officer-applicant-detail {
    grid-template-columns: 1fr;
  }

  /* ── Document Upload ── */
  .document-grid {
    grid-template-columns: 1fr;
  }

  .upload-zone {
    padding: 1.75rem 1.25rem;
  }

  .upload-zone-title {
    font-size: 0.9375rem;
  }

  .document-viewer-modal {
    max-height: 95vh;
    border-radius: var(--officer-card-radius, 0.75rem);
    margin: 0.5rem;
  }

  .document-viewer-body iframe {
    height: 50vh;
  }

  .document-card {
    padding: 0.75rem;
  }

  /* ── Loan Officer ── */
  .officer-document-tabs {
    overflow-x: auto;
  }

  .officer-search-bar input {
    width: 150px;
  }

  /* ── Finance ── */
  .disbursement-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .disbursement-item-amount {
    text-align: left;
  }

  .payroll-letter-body {
    padding: 1.25rem;
    font-size: 0.8125rem;
    min-height: 250px;
  }

  .finance-summary-footer {
    flex-direction: column;
    text-align: center;
  }

  .finance-summary-divider {
    width: 100%;
    height: 1px;
  }

  /* ── Repayment Health ── */
  .repayment-health-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .repayment-health-item {
    padding: 1rem;
  }

  /* ── Queue Tables ── */
  .queue-table th:nth-child(4),
  .queue-table td:nth-child(4),
  .queue-table th:nth-child(5),
  .queue-table td:nth-child(5) {
    display: none;
  }

  .officer-queue-table th:nth-child(4),
  .officer-queue-table td:nth-child(4),
  .officer-queue-table th:nth-child(5),
  .officer-queue-table td:nth-child(5) {
    display: none;
  }

  /*
   * FIX 1: Removed entire "Landing Page" block from this breakpoint.
   * Removed: .hero-section, .hero-section .hero-title, .hero-section .hero-subtitle,
   * .hero-section .hero-stats, .hero-section .hero-actions, .cta-btn (width:100%),
   * .landing-section, .landing-section-header h2, .landing-section-header p,
   * .product-cards-grid, .how-it-works-steps, .testimonials-grid,
   * .trust-indicators, .eligibility-bar-content, .final-cta-section,
   * .final-cta-section h2, .final-cta-section .cta-actions.
   * All were dead landing.css class names — landing.css is being deleted.
   * The current homepage (index.html) uses a self-contained <style> block
   * with its own responsive rules for .hero-wrap, .product-card-new, etc.
   */

  /* ── Urgent Arrears ── */
  .urgent-arrears-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* ── Disbursement Modal ── */
  .disbursement-modal {
    margin: 0.5rem;
  }

  /* ── Admin Dashboard ── */
  .d-flex.justify-content-between.flex-wrap.flex-md-nowrap {
    flex-direction: column;
    gap: 1rem;
  }

  .btn-toolbar {
    width: 100%;
  }
}

/* ==========================================================================
   BREAKPOINT: 576px — Small Phones
   ========================================================================== */

@media (max-width: 576px) {
  /* ── Stat Grids: Single Column ── */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .officer-stats-grid {
    grid-template-columns: 1fr;
  }

  .finance-stat-grid {
    grid-template-columns: 1fr;
  }

  /* ── Dashboard ── */
  .dashboard-header .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .officer-dashboard {
    padding: 0.75rem;
  }

  .finance-dashboard {
    padding: 0.75rem;
  }

  /* ── Logo: Hide text on very small screens ── */
  .navbar-logo .logo-text {
    display: none;
  }

  /*
   * FIX 2: Removed .navbar-mobile-drawer { width: 100%; max-width: 100vw }.
   * Dead rule — the custom drawer HTML elements don't exist in any template.
   */

  /* ── Tables: Hide additional columns ── */
  .queue-table th:nth-child(3),
  .queue-table td:nth-child(3) {
    display: none;
  }

  .officer-queue-table th:nth-child(3),
  .officer-queue-table td:nth-child(3) {
    display: none;
  }

  /* ── Quick Filters: Horizontal scroll ── */
  .quick-filters,
  .officer-quick-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Forms ── */
  .form-section {
    padding: 1rem;
  }

  .form-card-select {
    grid-template-columns: 1fr;
  }

  .form-step-circle {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  fieldset {
    padding: 1rem;
  }

  /* ── Documents ── */
  .document-actions {
    flex-direction: column;
    gap: 0.35rem;
  }

  .document-action-btn {
    justify-content: center;
  }

  .upload-zone-formats {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
  }

  .document-checklist-item {
    padding: 0.6rem 0.75rem;
  }

  /* ── Officer ── */
  .officer-document-actions {
    flex-direction: column;
  }

  .officer-doc-action-btn {
    justify-content: center;
  }

  .decision-buttons {
    gap: 0.5rem;
  }

  /* ── Finance ── */
  .arrears-buckets {
    grid-template-columns: 1fr;
  }

  .repayment-health-grid {
    grid-template-columns: 1fr;
  }

  .repayment-health-item {
    border-right: none;
    border-bottom: 1px solid #f1f5f9;
  }

  .repayment-health-item:last-child {
    border-bottom: none;
  }

  /*
   * FIX 1: Removed dead landing.css rules from this breakpoint:
   * .hero-section .hero-title, .hero-section .hero-badge,
   * .product-card { padding }, .security-badges.
   * All were old class names — the current homepage uses different classes.
   */

  /* ── Admin ── */
  .system-health-dot {
    width: 14px;
    height: 14px;
  }
}

/* ==========================================================================
   BREAKPOINT: 480px and below — Extra Small Phones
   ========================================================================== */

@media (max-width: 480px) {
  /* ── Typography ── */
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.25rem; }
  h3, .h3 { font-size: 1.125rem; }

  /* ── Stat Values ── */
  .stat-value,
  .finance-stat-card .stat-value,
  .officer-stat-card .stat-value {
    font-size: 1.25rem;
  }

  /* ── Navbar: Hide logo text ── */
  .navbar-logo .logo-text {
    display: none;
  }

  /*
   * FIX 4: Removed .navbar-mobile-drawer { width: 100%; max-width: 100vw }.
   * Dead rule — custom drawer HTML elements don't exist in any template.
   * Bootstrap's navbar-expand-lg handles the mobile collapse natively.
   */
}

/* ==========================================================================
   TOUCH TARGET ENLARGEMENT (WCAG 2.1 — Minimum 44×44px)
   ========================================================================== */

@media (pointer: coarse) {
  /* Enlarge interactive elements for touch */
  .btn,
  button,
  .nav-link,
  .navbar-user-btn,
  .navbar-notification-btn,
  .navbar-hamburger,
  .quick-filter-btn,
  .officer-quick-filter-btn,
  .form-btn,
  .cta-btn,
  .document-action-btn,
  .officer-doc-action-btn,
  .decision-btn,
  .upload-trigger-btn,
  .finance-btn,
  .checkbox-item,
  .radio-item,
  .navbar-dropdown-item,
  .navbar-mobile-nav .nav-link {
    min-height: 44px;
    min-width: 44px;
  }

  /* Ensure spacing between touch targets */
  .navbar-nav .nav-link {
    padding: 0.625rem 1rem;
  }

  .navbar-mobile-nav .nav-link {
    padding: 1rem 1.25rem;
  }

  /* Checkboxes and radios */
  .checkbox-item .checkbox-custom,
  .radio-item .radio-custom {
    width: 24px;
    height: 24px;
  }

  /* Form inputs */
  .form-input,
  .form-control,
  select.form-input,
  textarea.form-input {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Table row click targets */
  .queue-table tbody tr,
  .officer-queue-table tbody tr {
    min-height: 44px;
  }

  .queue-table td,
  .officer-queue-table td {
    padding: 0.75rem 0.5rem;
  }

  /* Dropdown items */
  .navbar-dropdown-item {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }
}

/* ==========================================================================
   RESPONSIVE DATA TABLES — Card Layout on Mobile
   ========================================================================== */

@media (max-width: 768px) {
  /* Convert tables to card layout */
  .table-responsive-card table,
  .table-responsive-card thead,
  .table-responsive-card tbody,
  .table-responsive-card th,
  .table-responsive-card td,
  .table-responsive-card tr {
    display: block;
  }

  .table-responsive-card thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .table-responsive-card tr {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: #ffffff;
  }

  .table-responsive-card td {
    border: none;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
    padding-left: 40%;
    text-align: left;
    min-height: 36px;
  }

  .table-responsive-card td:last-child {
    border-bottom: none;
  }

  .table-responsive-card td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 35%;
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   RESPONSIVE MULTI-STEP WIZARD
   ========================================================================== */

@media (max-width: 768px) {
  .form-step-indicator {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0;
  }

  .form-step {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
  }

  .form-step:last-child {
    border-bottom: none;
  }

  .form-step-circle {
    width: 36px;
    height: 36px;
    font-size: 0.8125rem;
    flex-shrink: 0;
  }

  .form-step-label {
    margin-top: 0;
    text-align: left;
    font-size: 0.8125rem;
  }

  .form-step-connector {
    display: none;
  }
}

/* ==========================================================================
   RESPONSIVE CHARTS
   ========================================================================== */

@media (max-width: 768px) {
  #registrationChart,
  #portfolioChart {
    max-height: 250px;
  }

  .chart-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   RESPONSIVE MODALS
   ========================================================================== */

@media (max-width: 768px) {
  .modal-dialog,
  .document-viewer-modal,
  .disbursement-modal {
    width: calc(100% - 1rem);
    max-width: none;
    margin: 0.5rem;
    border-radius: 0.5rem;
  }

  .modal-body {
    padding: 1rem;
  }

  .modal-header,
  .modal-footer {
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 480px) {
  .modal-dialog {
    margin: 0;
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* ==========================================================================
   RESPONSIVE CARDS ON DASHBOARD
   ========================================================================== */

@media (max-width: 768px) {
  /* Stack dashboard card columns */
  .row.g-3.mb-4 > [class*="col-"] {
    margin-bottom: 0.75rem;
  }

  .row.g-4.mb-4 > [class*="col-"] {
    margin-bottom: 1rem;
  }

  /* Full width cards */
  .card-body .row.g-3 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   RESPONSIVE PRINT (screen media: hide print elements)
   ========================================================================== */

@media screen {
  .print-only,
  .visible-print-block,
  .visible-print-inline,
  .visible-print-inline-block {
    display: none !important;
  }
}

/* ==========================================================================
   HIGH-DPI SCREENS (Retina)
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp borders */
  .navbar,
  .card,
  .stat-card,
  .panel,
  .officer-panel {
    border-width: 0.5px;
  }

  /* High-res images if available */
  .navbar-logo img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ==========================================================================
   DARK MODE PREFERENCE (Future-proofing — does not change brand)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /*
   * DimeWell does not currently support dark mode.
   * This block is reserved for future implementation.
   * All styles remain light-mode as per brand guidelines.
   */
}

/* ==========================================================================
   REDUCED MOTION PREFERENCE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .product-card:hover,
  .stat-card:hover,
  .card.stat-card:hover,
  .cta-btn-primary:hover {
    transform: none;
  }

  .how-it-works-step .step-number::after {
    animation: none;
  }
}

/* ==========================================================================
   RESPONSIVE UTILITY CLASSES
   ========================================================================== */

@media (max-width: 576px) {
  .d-sm-none  { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex  { display: flex !important; }
}

@media (max-width: 768px) {
  .d-md-none    { display: none !important; }
  .d-md-block   { display: block !important; }
  .d-md-flex    { display: flex !important; }
  .text-md-center { text-align: center !important; }
  .text-md-left   { text-align: left !important; }
  .w-md-100     { width: 100% !important; }
}

@media (max-width: 992px) {
  .d-lg-none  { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex  { display: flex !important; }
}

@media (max-width: 1200px) {
  .d-xl-none  { display: none !important; }
  .d-xl-block { display: block !important; }
}