/* =====================================================================
   Divine Life Damayan — enhancements.css
   Additive layer loaded AFTER style.css. Adds styles for the new features
   (active-members indicator, Need Help modal, rank progress, status pills,
   withdrawal methods) plus mobile responsiveness touch-ups.
   Reuses the design tokens (--dl-*) already defined in style.css :root.
   ===================================================================== */

/* ----- Active members indicator (green dot) ----- */
.dl-active-indicator{
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(29,106,89,.08); border:1px solid rgba(29,106,89,.2);
  color:var(--dl-pine-deep); font-weight:700; font-size:.82rem;
  padding:.4rem .75rem; border-radius:999px; white-space:nowrap;
}
.dl-active-indicator .dot{
  width:10px; height:10px; border-radius:50%; background:#22c55e;
  animation:dl-pulse 1.8s infinite;
}
@keyframes dl-pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5); }
  70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* ----- Need Help button + modal category options ----- */
.dl-help-options{ display:grid; gap:.6rem; }
.dl-help-option{
  display:flex; align-items:center; gap:.75rem; cursor:pointer; margin:0;
  border:1.5px solid var(--dl-line); border-radius:14px; padding:.8rem .95rem;
  transition:border-color .15s, background .15s;
}
.dl-help-option:hover{ border-color:var(--dl-amber); background:var(--dl-cream); }
.dl-help-option input{ margin:0; flex:0 0 auto; }
.dl-help-option.selected{ border-color:var(--dl-pine); background:rgba(29,106,89,.06); }
.dl-help-option .ic{
  width:40px; height:40px; flex:0 0 auto; border-radius:10px; display:flex;
  align-items:center; justify-content:center; font-size:1.2rem;
  background:rgba(244,165,34,.15); color:var(--dl-amber-deep);
}
.dl-help-option .t{ font-weight:600; color:var(--dl-ink); line-height:1.15; }
.dl-help-option .s{ font-size:.78rem; color:var(--dl-muted); }

/* ----- Low donation balance stat card ----- */
.stat-card.stat-danger{
  border-color:rgba(192,57,43,.45);
  background:linear-gradient(180deg,rgba(192,57,43,.06),#fff);
}
.stat-card.stat-danger h3,
.stat-card.stat-danger small{ color:var(--dl-danger) !important; }
.stat-card.stat-danger .stat-ic{ color:var(--dl-danger); opacity:.3; }

/* ----- Rank progress (admin member profile) ----- */
.dl-rank-progress .progress{ height:16px; border-radius:999px; background:var(--dl-sand); }
.dl-rank-progress .progress-bar{ font-size:.72rem; font-weight:700; }
.dl-req-row{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.5rem 0; border-top:1px dashed var(--dl-line);
}
.dl-req-row:first-child{ border-top:0; }
.dl-req-row .lbl{ font-size:.85rem; color:var(--dl-ink); display:flex; align-items:center; gap:.4rem; }
.dl-req-row .val{ font-variant-numeric:tabular-nums; font-weight:700; font-size:.85rem; }
.dl-req-row .val .ok{ color:var(--dl-success); }
.dl-req-row .val .no{ color:var(--dl-muted); }

/* ----- Shared status pills ----- */
.dl-pill{ display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; line-height:1.4; }
.dl-pill-pending{ background:rgba(217,138,12,.15); color:var(--dl-warn); }
.dl-pill-approved{ background:rgba(29,106,89,.13); color:var(--dl-pine); }
.dl-pill-declined{ background:rgba(192,57,43,.13); color:var(--dl-danger); }
.dl-pill-collected{ background:rgba(42,127,184,.13); color:var(--dl-info); }

/* ----- Withdrawal method dynamic fields ----- */
.dl-method-fields{ display:none; }
.dl-method-fields.active{ display:block; }

/* ----- Small helper ----- */
.dl-fee-note{ font-size:.82rem; color:var(--dl-muted); }
.dl-fee-note strong{ color:var(--dl-pine-deep); }

/* =====================================================================
   RESPONSIVENESS — mobile touch-ups (additive, never breaks desktop)
   ===================================================================== */
@media (max-width: 767.98px){
  /* Profile header actions move below and span full width */
  .dl-profile-actions{ width:100%; align-items:stretch !important; }
  .dl-profile-actions .btn{ width:100%; }
  .dl-profile-actions .dl-active-indicator{ justify-content:center; width:100%; }
}

@media (max-width: 575.98px){
  main.container, .container{ padding-left:14px; padding-right:14px; }
  h1{ font-size:1.5rem; }
  h5{ font-size:1.05rem; }
  .card{ border-radius:14px; }
  .card.p-4{ padding:1.1rem !important; }

  .stat-card{ padding:.85rem .9rem; }
  .stat-card h3{ font-size:1.3rem; }
  .stat-card small{ font-size:.62rem; }
  .stat-card .stat-ic{ font-size:1.15rem; right:.6rem; top:.6rem; }

  .dl-active-indicator{ font-size:.74rem; padding:.35rem .6rem; }

  /* Tables: scroll horizontally instead of clipping or squashing */
  .dl-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-responsive table, .dl-tablewrap table{ min-width:520px; }

  /* Data-table toolbar (search + page size) + footer stack neatly */
  .dl-tabletools{ flex-direction:column; align-items:stretch !important; gap:.5rem; }
  .dl-tabletools .form-control, .dl-tabletools .form-select, .dl-tabletools .input-group{ width:100% !important; }
  .dl-tablefoot{ flex-direction:column; gap:.5rem; text-align:center; }

  /* Modals fit small screens */
  .modal-dialog{ margin:.6rem; }

  /* Buttons may wrap rather than overflow */
  .btn{ white-space:normal; }
}

/* =====================================================================
   FINALIZED MOBILE NAVIGATION (TopNav) — additive polish
   Complements the .app-nav rules in style.css. Fixes the hamburger
   contrast on the dark-green nav, makes the collapsed menu comfortable to
   tap, and lays out the right side (bell + account) cleanly on phones.
   (Right-side wrapper now carries .dl-nav-right so the existing rules apply.)
   ===================================================================== */
@media (max-width: 991.98px){
  /* High-contrast hamburger on the dark nav */
  .app-nav .navbar-toggler{ border-color:rgba(255,255,255,.35); }
  .app-nav .navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(255,255,255,.2); }
  .app-nav .navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2.2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
  }

  /* Breathing room + full-width tap targets in the opened menu */
  .app-nav .navbar-collapse{ padding-bottom:.4rem; }
  .app-nav .navbar-nav .nav-item{ width:100%; }
  .app-nav .navbar-nav .nav-link{ width:100%; padding:.7rem .9rem; border-radius:10px; }
  .app-nav .navbar-nav .nav-link span{ font-size:.95rem; }

  /* Right-side row: full width, pushed apart, divider on top */
  .app-nav .dl-nav-right{
    width:100%; justify-content:flex-end; gap:.6rem;
    padding-top:.5rem; margin-top:.35rem;
    border-top:1px solid rgba(255,255,255,.12);
  }

  /* Account & notification dropdowns: never overflow the viewport */
  .app-nav .dl-usermenu .dropdown-menu,
  .app-nav .dl-notif-panel{ width:min(92vw, 320px); }
  .app-nav .dl-notif-panel{ right:0; left:auto; }

  /* Comfortable minimum tap targets */
  .app-nav .dl-bell,
  .app-nav .dl-usermenu .dropdown-toggle{ min-height:42px; }
}

@media (max-width: 360px){
  .app-nav .container-fluid{ padding-left:10px; padding-right:10px; }
}

/* =====================================================================
   REPORTS / PRINT MODE — clean, professional output
   Strengthens the @media print in style.css: also hides toasts, popups,
   the confirm modal and notification panel; prints full table grid lines;
   repeats table headers; and avoids ugly mid-row page breaks.
   Use class "print-only" for blocks that should appear ONLY when printing
   (e.g. a report header), and "no-print" to hide on paper.
   ===================================================================== */
.print-only{ display:none !important; }

@media print{
  /* Render backgrounds/colours faithfully */
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }

  /* Hide every interactive / chrome element */
  .app-nav, .site-nav, .site-footer, .dl-bell, .dl-usermenu,
  .dl-notif-panel, .dl-toast-wrap, #dlPopup, #dlConfirm, #docModal,
  #archiveViewModal, .dl-tabletools, .dl-tablefoot, .no-print,
  .btn, .btn-group, .navbar, form, .modal, .modal-backdrop{
    display:none !important;
  }

  body{ background:#fff !important; color:#000; font-size:12px; }
  main, main.container{
    padding:0 !important; margin:0 !important;
    max-width:100% !important; width:100% !important;
  }

  /* Print-only header/footer blocks become visible */
  .print-only{ display:block !important; }

  /* Cards / table wrappers become plain bordered blocks; keep together */
  .card, .dl-tablewrap, .members-table-container, .code-table-container, .table-responsive{
    box-shadow:none !important; border:1px solid #999 !important; border-radius:0 !important;
    max-height:none !important; overflow:visible !important;
    break-inside:avoid; page-break-inside:avoid; margin-bottom:12px;
  }

  /* Full grid lines for a professional report look */
  table{ width:100% !important; border-collapse:collapse !important; }
  table th, table td{ border:1px solid #999 !important; padding:5px 7px !important; color:#000 !important; }
  thead{ display:table-header-group; }       /* repeat header on each page */
  tr{ break-inside:avoid; page-break-inside:avoid; }

  /* Keep headings with their content */
  h1,h2,h3,h4,h5{ break-after:avoid; page-break-after:avoid; color:#000; }

  /* Badges print as outlined text (coloured fills look muddy / waste ink) */
  .badge{ border:1px solid #666 !important; background:transparent !important; color:#000 !important; font-weight:600; }

  @page{ margin:14mm; }
}
/* ============================================================
   v3 — Responsive overflow fix (admin + member UI)
   Keeps every authenticated page within the viewport: no sideways
   page scroll and no white strip covering the right edge when the
   browser narrows. Wide content fits or scrolls inside its own
   wrapper instead of pushing the whole page wider. Loaded globally.
   ============================================================ */
html, body{
  max-width:100%;
  overflow-x:hidden;            /* kill the horizontal page scroll / white gutter */
}
*, *::before, *::after{ box-sizing:border-box; }

/* Media + embeds never exceed their column */
img, svg, video, canvas, iframe{ max-width:100%; }

/* Bootstrap layout primitives stay inside the viewport */
.container, .container-fluid{ max-width:100%; }
main.container{ width:100%; }

/* Wide data tables scroll INSIDE their own wrapper, not the page */
.table-responsive, .dl-tablewrap, .members-table-container,
.code-table-container{
  max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
}

/* Long unbreakable values (emails, GCash numbers, access codes, URLs)
   wrap instead of forcing the page wider */
.card, dd, .dl-data-table td, .stat-card, .text-break-any{ overflow-wrap:anywhere; }

/* Split cards (e.g. Pending Accounts): when columns stack on small
   screens, drop the vertical divider so nothing pokes past the edge */
@media (max-width: 991.98px){
  .card .row > [class*="col-"].border-end{ border-right:0 !important; }
}