/* ================================================================
   NiveshOne — Mobile Responsive CSS
   Full coverage: 320px phones → 1024px tablets → desktop
   ================================================================ */

/* ── Base touch improvements ─────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
input, select, textarea, button { font-size: 16px !important; } /* prevent iOS zoom */

/* ── Page content spacing ────────────────────────────────────── */
@media (max-width: 768px) {
  .page-content { padding: 12px !important; }
  .card-body    { padding: 14px !important; }
  .card-header  { padding: 12px 16px !important; }
}

/* ── Typography scale-down ───────────────────────────────────── */
@media (max-width: 480px) {
  html { font-size: 14px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }
  h5 { font-size: .95rem; }
}

/* ── Topbar ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar { padding: 0 10px !important; }
  .topbar-right .avatar-wrap small { display: none; }
  .topbar-right { gap: 8px; }
}
@media (max-width: 480px) {
  .topbar-right .avatar-wrap span { display: none; }
  .topbar-right .btn { display: none; } /* hide topbar logout on mobile — use sidebar */
  .breadcrumb { font-size: .75rem; max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* ── Sidebar mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%) !important;
    width: 280px !important;
    z-index: 300;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 24px rgba(0,0,0,.35);
  }
  .main-content { margin-left: 0 !important; }
}

/* ── Grids → stack on mobile ─────────────────────────────────── */
@media (max-width: 768px) {
  .g2, .g3 { grid-template-columns: 1fr !important; gap: 12px !important; }
  .g4       { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}
@media (max-width: 420px) {
  .g4 { grid-template-columns: 1fr !important; }
}

/* ── Stat cards ──────────────────────────────────────────────── */
@media (max-width: 560px) {
  .stat-card { padding: 14px 12px; gap: 10px; }
  .stat-icon { width: 40px; height: 40px; font-size: 1.1rem; }
  .stat-info h4 { font-size: 1.2rem; }
  .stat-info p  { font-size: .75rem; }
}

/* ── Tables — scrollable + compact ──────────────────────────── */
@media (max-width: 768px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap::after {
    content: '← scroll →';
    display: block;
    text-align: center;
    font-size: .7rem;
    color: #aaa;
    padding: 4px 0 2px;
  }
  table { min-width: 580px; font-size: .82rem; }
  thead th { padding: 9px 10px; font-size: .78rem; }
  tbody td  { padding: 8px 10px; }
}
@media (max-width: 480px) {
  table { min-width: 480px; font-size: .78rem; }
}

/* ── Buttons ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .btn    { padding: 8px 14px !important; font-size: .84rem !important; }
  .btn-sm { padding: 5px 10px !important; font-size: .78rem !important; }
  .btn-lg { padding: 11px 20px !important; font-size: .92rem !important; }
}

/* ── Page header — stack title & buttons ─────────────────────── */
@media (max-width: 600px) {
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .page-header > div:last-child,
  .page-header > a,
  .page-header > button {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .page-header .btn { flex: 1; min-width: 120px; justify-content: center; }
}

/* ── Forms ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-control, .form-select {
    padding: 10px 12px !important;
  }
  .form-group { margin-bottom: .9rem !important; }
  .form-label { font-size: .85rem !important; }

  /* Two-column form grids become 1 column */
  .g2.form-row, div.g2 { grid-template-columns: 1fr !important; }
}

/* ── Cards ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .card { margin-bottom: 14px !important; border-radius: 8px; }
  .card-header h5 { font-size: .92rem; }
}

/* ── Alerts ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .alert { font-size: .84rem; padding: 10px 12px; flex-wrap: wrap; }
}

/* ── Badges ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .badge { font-size: .65rem; padding: 2px 7px; }
}

/* ── Modal overlays (close loan, reject, edit user etc.) ─────── */
@media (max-width: 600px) {
  /* All fixed modals */
  div[style*="position:fixed"][style*="inset:0"] > .card,
  #closeLoanBox > .card,
  #rejectLoanBox > .card,
  #editUserBox > .card {
    width: 96% !important;
    max-width: 100% !important;
    margin: 8px !important;
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* ── Admin topbar avatar initials box ───────────────────────── */
@media (max-width: 380px) {
  .topbar-right > a:not(:last-child) { display: none; }
}

/* ── Loan / Account view detail tables ──────────────────────── */
@media (max-width: 600px) {
  table[style*="width:100%"] td { padding: 6px 4px !important; font-size: .82rem; }
}

/* ── Collapsible sidebar on mobile (snav styles) ─────────────── */
@media (max-width: 768px) {
  .snav-header { padding: 13px 16px !important; }
  .snav-body .nav-item { padding-left: 30px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  .snav-body { max-height: 0; }
  .snav-group.open > .snav-body { max-height: 500px !important; }
}

/* ── Pagination ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .pagination { gap: 2px; }
  .pagination li a { width: 30px; height: 30px; font-size: .8rem; border-radius: 6px; }
}

/* ── Progress bar ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .progress-bar { height: 6px; }
}

/* ── EMI calculator result table (loan add page) ─────────────── */
@media (max-width: 600px) {
  #emiResult table td { padding: 5px 4px !important; font-size: .82rem !important; }
  #emiCard .card-body { padding: 12px !important; }
}

/* ── Loan types guide table ──────────────────────────────────── */
@media (max-width: 600px) {
  .snav-group + div table thead th,
  table th[style*="padding:8px 10px"] { padding: 6px 8px !important; font-size: .75rem !important; }
  table td[style*="padding:7px 10px"] { padding: 6px 8px !important; font-size: .8rem !important; }
}

/* ── Customer portal nav ─────────────────────────────────────── */
@media (max-width: 600px) {
  .cust-nav { padding: 0 8px; gap: 0; }
  .cust-nav a { padding: 10px 8px; font-size: .78rem; }
}

/* ── Public site hero ────────────────────────────────────────── */
@media (max-width: 600px) {
  .hero { min-height: auto; padding: 40px 0; }
  .hero .wrap { padding: 30px 16px; gap: 24px; }
  .hero h2 { font-size: 1.5rem; }
  .hero p   { font-size: .9rem; }
  .hero-stats { gap: 20px; }
  .hero-stat h3 { font-size: 1.4rem; }
}

/* ── Public site footer ──────────────────────────────────────── */
@media (max-width: 600px) {
  .footer-top { padding: 32px 0; }
  .footer-top .g4 { grid-template-columns: 1fr 1fr !important; gap: 20px; }
}
@media (max-width: 380px) {
  .footer-top .g4 { grid-template-columns: 1fr !important; }
}

/* ── Section cards (services, plans) ────────────────────────── */
@media (max-width: 600px) {
  .svc-card { padding: 20px 14px; }
  .plan-card .plan-head { padding: 16px 14px; }
  .plan-card .plan-body, .plan-card .plan-foot { padding: 14px; }
  .plan-price { font-size: 1.5rem; }
}

/* ── Login page ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .login-box { border-radius: 10px; margin: 12px; }
  .login-hd { padding: 22px 18px; }
  .login-bd, .login-ft { padding: 18px; }
}

/* ── Table action button groups ──────────────────────────────── */
@media (max-width: 600px) {
  td > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
}

/* ── Fix overflow on very small screens ──────────────────────── */
@media (max-width: 360px) {
  .page-content { padding: 8px !important; }
  .card-body    { padding: 10px !important; }
  .btn-sm { padding: 4px 8px !important; font-size: .72rem !important; }
}

/* ── iOS safe area (notch phones) ────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  .sidebar-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .topbar { padding-left: max(10px, env(safe-area-inset-left)); }
}

/* ── Utility: hide on mobile ─────────────────────────────────── */
@media (max-width: 600px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 601px) {
  .show-mobile { display: none !important; }
}