/* =========================================================
   Nabi Baksh Accounts — Design tokens
   Navy + white accounting theme, tabular figures for money.
   ========================================================= */
:root {
  --nb-navy-900: #0a1f38;
  --nb-navy-800: #0f2a4a;
  --nb-navy-700: #16395e;
  --nb-navy-600: #1f4d78;
  --nb-navy-100: #e7edf5;
  --nb-navy-50:  #f4f7fb;
  --nb-white:    #ffffff;
  --nb-gold:     #c99a3b;
  --nb-gold-dark:#a87c26;
  --nb-credit:   #1f7a4d;   /* money in */
  --nb-debit:    #b3392c;   /* money out */
  --nb-muted:    #5b6b80;
  --nb-border:   #dbe3ee;
  --nb-radius:   14px;
  --nb-radius-sm:10px;
  --nb-shadow:   0 2px 10px rgba(10, 31, 56, 0.07);
  --nb-shadow-lg:0 10px 30px rgba(10, 31, 56, 0.14);
}

@font-face {
  font-family: 'nb-fallback';
  src: local('Arial');
}

html, body {
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--nb-navy-50);
  color: var(--nb-navy-900);
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: 76px; /* space for bottom nav on mobile */
}

.figures, .money, table td.money, .table td.money {
  font-family: "IBM Plex Mono", "Roboto Mono", ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

/* =========================================================
   Top bar
   ========================================================= */
.nb-topbar {
  background: linear-gradient(180deg, var(--nb-navy-800), var(--nb-navy-900));
  color: var(--nb-white);
  box-shadow: var(--nb-shadow);
}

.nb-topbar .navbar-brand {
  color: var(--nb-white);
  font-weight: 700;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Real logo in the shared top header/offcanvas (replaces the old NB
   badge). Wrapped visually as a small white rounded chip because the
   logo file itself has an opaque white background — this keeps it
   reading as an intentional mark against the navy header rather than a
   stray white rectangle. Kept compact so the header never grows taller
   than before. This is the ONLY place besides the favicon that shows
   the logo — not the Dashboard content, not any report/print output. */
.nb-brand-logo {
  height: 40px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  background: var(--nb-white);
  border-radius: 8px;
  padding: 3px;
  vertical-align: middle;
  flex-shrink: 0;
}
@media (max-width: 359.98px) {
  .nb-brand-logo { height: 34px; }
}

.nb-topbar .btn-icon {
  color: var(--nb-white);
  background: rgba(255,255,255,.08);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.nb-topbar .btn-icon:active { background: rgba(255,255,255,.18); }

/* =========================================================
   Offcanvas navigation
   ========================================================= */
.offcanvas.nb-nav {
  background: var(--nb-navy-800);
  color: var(--nb-white);
  width: 280px;
}
.nb-nav .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.08); }
.nb-nav .nav-link {
  color: rgba(255,255,255,.82);
  border-radius: var(--nb-radius-sm);
  padding: .8rem .9rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 500;
  min-height: 48px;
}
.nb-nav .nav-link i { width: 20px; text-align: center; opacity: .85; }
.nb-nav .nav-link:hover, .nb-nav .nav-link:focus { background: rgba(255,255,255,.06); color: var(--nb-white); }
.nb-nav .nav-link.active { background: var(--nb-gold); color: var(--nb-navy-900); font-weight: 700; }
.nb-nav .nav-section-label {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.45);
  padding: .9rem .9rem .3rem;
}

/* =========================================================
   Bottom tab bar (mobile primary navigation)
   ========================================================= */
.nb-bottomnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--nb-white);
  border-top: 1px solid var(--nb-border);
  display: flex;
  z-index: 1030;
  box-shadow: 0 -4px 16px rgba(10,31,56,.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nb-bottomnav a {
  flex: 1;
  text-align: center;
  padding: .5rem .2rem .55rem;
  color: var(--nb-muted);
  font-size: .68rem;
  text-decoration: none;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
}
.nb-bottomnav a i { font-size: 1.15rem; }
.nb-bottomnav a.active { color: var(--nb-navy-800); font-weight: 700; }
.nb-bottomnav a.active i { color: var(--nb-gold-dark); }

@media (min-width: 992px) {
  .nb-bottomnav { display: none; }
  body { padding-bottom: 0; }
}

/* =========================================================
   Layout shell
   ========================================================= */
.nb-main {
  padding: 1rem .85rem 1.5rem;
}
@media (min-width: 768px) {
  .nb-main { padding: 1.5rem 1.5rem 2rem; }
}
@media (min-width: 992px) {
  .nb-shell { display: flex; }
  .nb-sidebar-static {
    width: 260px;
    flex-shrink: 0;
    background: var(--nb-navy-800);
    min-height: calc(100vh - 64px);
  }
  .nb-content { flex: 1; min-width: 0; }
}
.nb-sidebar-static .nav-link { color: rgba(255,255,255,.82); border-radius: var(--nb-radius-sm); padding: .75rem .9rem; display: flex; align-items:center; gap:.7rem; font-weight:500; }
.nb-sidebar-static .nav-link i { width: 20px; text-align:center; opacity:.85; }
.nb-sidebar-static .nav-link:hover { background: rgba(255,255,255,.06); color:#fff; }
.nb-sidebar-static .nav-link.active { background: var(--nb-gold); color: var(--nb-navy-900); font-weight:700; }
.nb-sidebar-static .nav-section-label { text-transform: uppercase; font-size:.7rem; letter-spacing:.08em; color: rgba(255,255,255,.45); padding: .9rem .9rem .3rem; }

/* =========================================================
   Cards / surfaces
   ========================================================= */
.nb-card {
  background: var(--nb-white);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow);
}
.nb-card-body { padding: 1rem 1.1rem; }
@media (min-width: 768px) { .nb-card-body { padding: 1.4rem 1.6rem; } }

/* =========================================================
   Dashboard — Recent Activity row
   Desktop: icon, description, amount all on one line (amount
   right-aligned), matching the previous Bootstrap-utility
   layout exactly. Mobile: the amount drops to its own
   full-width line below the description instead of being
   squeezed into the same row, and long descriptions (e.g.
   "Meezan Bank - Current A/C → Iran Purchase Account") wrap
   naturally instead of forcing horizontal overflow.
   ========================================================= */
.nb-activity-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}
.nb-activity-icon { flex-shrink: 0; }
.nb-activity-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.nb-activity-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nb-activity-meta { white-space: nowrap; }
.nb-activity-amount {
  flex-shrink: 0;
  text-align: right;
}

@media (max-width: 767.98px) {
  .nb-activity-row {
    flex-wrap: wrap;
    row-gap: .35rem;
  }
  .nb-activity-content {
    flex: 1 1 auto;
    min-width: 0;
  }
  .nb-activity-title,
  .nb-activity-meta {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .nb-activity-title {
    text-overflow: unset;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nb-activity-amount {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
    margin-top: .4rem;
    padding-left: calc(40px + 1rem);
  }
}

.nb-page-title {
  font-weight: 800;
  color: var(--nb-navy-900);
  margin-bottom: .15rem;
}
.nb-page-subtitle { color: var(--nb-muted); font-size: .92rem; }

.nb-stat-card {
  border-radius: var(--nb-radius);
  padding: 1rem 1.1rem;
  color: var(--nb-white);
  background: linear-gradient(135deg, var(--nb-navy-700), var(--nb-navy-900));
  box-shadow: var(--nb-shadow-lg);
  height: 100%;
}
.nb-stat-card .label { font-size: .78rem; opacity: .78; text-transform: uppercase; letter-spacing: .06em; }
.nb-stat-card .value { font-size: 1.5rem; font-weight: 800; margin-top: .25rem; }
.nb-stat-card .delta { font-size: .78rem; opacity: .85; margin-top: .35rem; }
.nb-stat-card.gold { background: linear-gradient(135deg, var(--nb-gold-dark), var(--nb-gold)); color: var(--nb-navy-900); }
.nb-stat-card.gold .label { opacity: .75; }

.nb-quick-actions .btn {
  border-radius: var(--nb-radius-sm);
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font-weight: 600;
  font-size: .85rem;
}
.nb-quick-actions .btn i { font-size: 1.35rem; }

/* =========================================================
   Forms — touch-friendly
   ========================================================= */
.form-label { font-weight: 600; color: var(--nb-navy-900); font-size: .9rem; }
.form-control, .form-select {
  min-height: 48px;
  border-radius: var(--nb-radius-sm);
  border-color: var(--nb-border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--nb-navy-600);
  box-shadow: 0 0 0 .2rem rgba(15,42,74,.15);
}
textarea.form-control { min-height: 90px; }
.invalid-feedback { font-weight: 500; }
.btn { border-radius: var(--nb-radius-sm); font-weight: 600; min-height: 46px; }
.btn-primary { background: var(--nb-navy-800); border-color: var(--nb-navy-800); }
.btn-primary:hover, .btn-primary:focus { background: var(--nb-navy-700); border-color: var(--nb-navy-700); }
.btn-gold { background: var(--nb-gold); border-color: var(--nb-gold); color: var(--nb-navy-900); }
.btn-gold:hover { background: var(--nb-gold-dark); border-color: var(--nb-gold-dark); color: var(--nb-navy-900); }

.nb-filter-bar {
  background: var(--nb-white);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius);
  padding: .85rem;
  box-shadow: var(--nb-shadow);
}

/* =========================================================
   Tables -> cards on small screens
   ========================================================= */
.nb-table thead th {
  background: var(--nb-navy-100);
  color: var(--nb-navy-800);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: none;
  white-space: nowrap;
}
.nb-table td, .nb-table th { vertical-align: middle; padding: .75rem .8rem; }
.nb-table.table-hover tbody tr:hover { background: var(--nb-navy-50); }

.text-credit { color: var(--nb-credit); font-weight: 700; }
.text-debit { color: var(--nb-debit); font-weight: 700; }

.badge-status { font-weight: 600; padding: .4em .65em; border-radius: 20px; }
.badge-paid { background: rgba(31,122,77,.12); color: var(--nb-credit); }
.badge-unpaid { background: rgba(179,57,44,.12); color: var(--nb-debit); }
.badge-partial { background: rgba(201,154,59,.18); color: var(--nb-gold-dark); }

@media (max-width: 767.98px) {
  .nb-table-responsive-cards thead { display: none; }
  .nb-table-responsive-cards, .nb-table-responsive-cards tbody, .nb-table-responsive-cards tr, .nb-table-responsive-cards td {
    display: block;
    width: 100%;
  }
  .nb-table-responsive-cards tr {
    background: var(--nb-white);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
    margin-bottom: .75rem;
    box-shadow: var(--nb-shadow);
    padding: .3rem .2rem;
  }
  .nb-table-responsive-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .55rem .85rem;
    border: none;
    text-align: right;
  }
  .nb-table-responsive-cards td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--nb-muted);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
  }
  .nb-table-responsive-cards td:not(:last-child) { border-bottom: 1px dashed var(--nb-border); }

  /* Defensive reinforcement: the desktop table card and the mobile
     card list use Bootstrap's own d-none/d-md-block and d-md-none
     utility classes, which already correctly show exactly one of the
     two at this same 767.98px breakpoint. This explicit, higher-
     specificity backup exists only in case some page-specific rule
     elsewhere ever overrides those utility classes without this file
     being updated to match - it enforces the same intended behavior a
     second way, at the identical breakpoint, rather than a different
     one that could itself create a mismatch. */
  .nb-card.d-none.d-md-block { display: none !important; }
}
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
}

/* =========================================================
   Misc
   ========================================================= */
.nb-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--nb-muted);
}
.nb-empty i { font-size: 2.2rem; color: var(--nb-navy-100); margin-bottom: .5rem; display:block; }

.nb-proto-banner {
  background: var(--nb-navy-100);
  color: var(--nb-navy-800);
  border-radius: var(--nb-radius-sm);
  padding: .55rem .85rem;
  font-size: .82rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

.nb-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top left, var(--nb-navy-700), var(--nb-navy-900) 60%);
  padding: 1.25rem;
}
.nb-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--nb-white);
  border-radius: 18px;
  box-shadow: var(--nb-shadow-lg);
  padding: 2rem 1.6rem;
}
.nb-login-logo-img {
  display: block;
  width: 110px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto .9rem;
}
@media (max-width: 575.98px) {
  .nb-login-logo-img { width: 85px; }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--nb-navy-900);
  color: #fff;
  padding: .6rem 1rem;
  z-index: 2000;
}
.skip-link:focus { left: .5rem; top: .5rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =========================================================
   Searchable combo box (shared component)
   Used for long picklists (Paid By, Company/Agent, Commodity,
   and future Customers/Receivers/Givers) where a plain <select>
   would be hard to scan on mobile. Backed by a real hidden
   <select> so only existing values can be submitted.
   ========================================================= */
.nb-combo { position: relative; }
.nb-combo-control { position: relative; }
.nb-combo-control .nb-combo-search { padding-right: 2.75rem; }
.nb-combo-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--nb-muted);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.nb-combo-toggle:hover { background: var(--nb-navy-50); color: var(--nb-navy-800); }
.nb-combo-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--nb-white);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-sm);
  box-shadow: var(--nb-shadow-lg);
  max-height: 260px;
  overflow-y: auto;
  z-index: 1060;
  padding: .3rem;
}
.nb-combo-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: .65rem .75rem;
  min-height: 44px;
  border-radius: 8px;
  font-size: .92rem;
  color: var(--nb-navy-900);
}
.nb-combo-option:hover,
.nb-combo-option:focus,
.nb-combo-option.active { background: var(--nb-navy-50); }
.nb-combo-empty {
  padding: .75rem;
  color: var(--nb-muted);
  font-size: .88rem;
  text-align: center;
}
.nb-combo.is-invalid .nb-combo-search { border-color: var(--nb-debit); }
.nb-combo.is-invalid .invalid-feedback { display: block; }

@media (max-width: 575.98px) {
  .nb-combo-menu { max-height: 220px; }
}

/* =========================================================
   Shared print/PDF report template
   ---------------------------------------------------------
   This is the master report template, proven working on the
   Purchases module (#purchasesPrintArea). Every rule in this
   section targets the generic `.nb-print-area` class (plus
   the .nb-print-* component classes below it), NOT a specific
   module ID, so any future module can reuse it unchanged:

     1. In footer.php's $page_print_area_html slot, render:
          <section id="xPrintArea" class="nb-print-area" aria-hidden="true"></section>
        (rendered as a direct child of <body>, a true sibling
        of #appScreen — see includes/header.php / footer.php —
        never nested inside #appScreen).
     2. Build the report's inner HTML with the same
        .nb-print-header / .nb-print-meta / .nb-print-table /
        .nb-print-footer component classes used below, right
        before calling window.print() (see buildPrintReport in
        iran_purchase.php for the working pattern, and
        nbFormatDatePrint / nbPrintedOnParts in app.js for the
        shared date/time helpers).

   No module-specific selectors belong in this section — module
   column widths/layout, if they ever need to differ, should be
   added as additional classes scoped to that module's own
   report markup, not by editing the rules here.
   ========================================================= */
.nb-print-area {
  display: none !important;
}

@media print {
  @page {
    size: A4 landscape;
    margin: 12mm 15mm;
  }

  #appScreen {
    display: none !important;
  }

  .nb-print-area {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    color: var(--nb-navy-900);
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
  }

  /* Blanket left-alignment for every report cell (heading or data) —
     belt-and-suspenders alongside the specific rules below, and covers
     any Bootstrap text-end/justify-content-end that might otherwise
     leak in. */
  .nb-print-area th,
  .nb-print-area td {
    text-align: left !important;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: white !important;
  }

  /* ---- Header: centered company name + report title ---- */
  .nb-print-header {
    text-align: center;
    margin-bottom: 6mm;
  }
  .nb-print-company {
    font-size: 20pt;
    font-weight: 800;
    color: var(--nb-navy-900);
    letter-spacing: .04em;
  }
  .nb-print-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    font-size: 12pt;
    font-weight: 600;
    color: var(--nb-navy-600);
    margin-top: 3mm;
  }
  .nb-print-rule {
    display: inline-block;
    width: 60px;
    height: 1px;
    background: var(--nb-navy-100);
    border-top: 1px solid var(--nb-navy-600);
  }

  /* ---- Filter summary (left) + printed-on (right), two-column ---- */
  .nb-print-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 9.5pt;
    margin-bottom: 4mm;
    color: var(--nb-navy-900);
  }
  .nb-print-meta-left div,
  .nb-print-meta-right div { line-height: 1.5; }
  .nb-print-meta-right { text-align: right !important; }

  /* ---- Report table ---- */
  .nb-print-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 9.5pt;
  }
  .nb-print-table thead { display: table-header-group; }
  .nb-print-table thead th {
    font-weight: 700;
    color: var(--nb-navy-900);
    padding: 5px 6px;
    border-top: 1.5pt solid var(--nb-navy-900);
    border-bottom: 1pt solid var(--nb-navy-900);
  }
  .nb-print-table tbody td {
    padding: 5px 6px;
    border-bottom: .5pt solid #ccd3dc;
    vertical-align: top;
    color: var(--nb-navy-900);
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
  }
  .nb-print-table tbody tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .nb-print-no { width: 4%; }
  .nb-print-remarks {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .nb-print-amount {
    font-family: "IBM Plex Mono", "Roboto Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .nb-print-table tfoot td {
    padding: 6px 6px 5px;
  }
  .nb-print-total-row td {
    border-top: 1pt solid var(--nb-navy-900);
    font-weight: 700;
  }
  .nb-print-total-label { font-weight: 700; }
  .nb-print-total { font-weight: 800; }

  .nb-print-empty {
    text-align: center;
    color: var(--nb-navy-900);
    padding: 10mm 0;
    font-size: 10.5pt;
  }

  /* ---- Footer ---- */
  .nb-print-footer {
    text-align: center;
    font-size: 9pt;
    color: var(--nb-navy-600);
    margin-top: 20px;
  }
}

/* =========================================================
   Fund Transfer report — page-specific refinements only
   ---------------------------------------------------------
   Everything here is scoped to .fund-transfer-report, a class
   present only on the Fund Transfer print area (see
   fund_transfer.php). Purchases, Customer Payment, Customer
   Ledger, Sales, and both other ledgers do not carry this
   class, so none of these rules can affect them. The A4
   portrait page size itself is set via a small inline <style>
   block in fund_transfer.php instead of here, since @page
   rules can't be scoped by a class selector — see that file
   for why a per-page inline block is the reliable approach.
   ========================================================= */
@media print {
  /* Keep "Transfer Date" on one line at the narrower portrait
     column width, rather than wrapping to two lines. */
  .fund-transfer-report .nb-print-table thead th {
    white-space: nowrap;
    font-size: 9pt;
  }

  /* Slightly tighter gap between the filter/printed-on block
     and the table, appropriate for the narrower portrait page. */
  .fund-transfer-report .nb-print-meta {
    margin-bottom: 3mm;
  }
}

/* Money Receivers Ledger report: no page-specific print CSS needed
   anymore - it now uses the shared A4 landscape @page rule (like every
   other multi-column report) instead of the narrow-column A4 portrait
   treatment this block used to provide, now that the corrected combined
   ledger (Fund Transfers + Purchases, with a Running Balance column)
   needs the extra width landscape provides. See money_receiver_
   ledger.php, which no longer declares its own portrait @page override
   either. */

/* Money Giver Ledger report: no page-specific print CSS needed anymore
   - it now uses the shared A4 landscape @page rule (like every other
   multi-column report, and like the corrected Money Receiver Ledger)
   instead of the narrow-column A4 portrait treatment this block used to
   provide, now that the combined ledger (Fund Transfers + Purchases,
   with a Running Total Given column) needs the extra width landscape
   provides. See money_giver_ledger.php, which no longer declares its
   own portrait @page override either. */

/* =========================================================
   Ledger filter row — vertical alignment fix
   ---------------------------------------------------------
   Scoped entirely to .nb-ledger-filter-combo-col, a class
   present only on the main combo's column inside
   nb_ledger_filter_row() (see includes/combo_field.php),
   used by Customer Ledger, Money Receiver Ledger, and Money
   Giver Ledger's filter rows only.

   nb_combo_field() wraps its own label+control in a
   <div class="mb-3"> so stacked form fields elsewhere in the
   app (Sales Entry, Customer Payment, Fund Transfer,
   Purchases, etc.) get normal 1rem spacing between fields.
   That wrapper is untouched and still applies everywhere.

   The ledger filter row is the one place align-items-end
   bottom-aligns each column, which makes that same trailing
   1rem margin push the combo's visible label/input 16px
   higher than the From/To Date fields (which have no such
   margin). This rule cancels the margin only inside that one
   combo column, in that one row template, without touching
   nb_combo_field()'s own markup or affecting any other page.
   ========================================================= */
.nb-ledger-filter-combo-col .mb-3 { margin-bottom: 0 !important; }

/* =========================================================
   Global large-amount responsive layout
   ---------------------------------------------------------
   Fixes horizontal overflow and amounts breaking out of their
   cards on narrow screens for genuinely large PKR values (e.g.
   PKR 178,947,088 / PKR -40,922,111) across the Dashboard and
   all three Ledgers (Customer, Money Giver, Money Receiver).
   Uses clamp() so the same rule scales smoothly rather than
   jumping between a fixed small size and a fixed large size at
   each breakpoint. Purely additive - does not remove or rename
   any existing class, and does not touch print/PDF styles
   (those remain under their own @media print rules elsewhere
   in this file, untouched).
   ========================================================= */
.nb-stat-card {
  min-width: 0;
  overflow: hidden;
}

.nb-stat-card .value,
.nb-responsive-money {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: clamp(1rem, 3.6vw, 1.5rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.nb-stat-card .value.money,
.nb-responsive-money.money {
  letter-spacing: -0.045em;
}

.nb-ledger-summary > [class*="col-"] {
  display: flex;
}

.nb-ledger-summary .nb-stat-card {
  width: 100%;
}

@media (max-width: 575.98px) {
  .nb-stat-card {
    padding: .85rem .8rem;
  }

  .nb-stat-card .label {
    font-size: .69rem;
    line-height: 1.2;
  }

  .nb-stat-card .value,
  .nb-responsive-money {
    font-size: clamp(.95rem, 5vw, 1.25rem);
  }

  .nb-ledger-toolbar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem !important;
  }

  .nb-ledger-toolbar .btn {
    width: 100%;
    min-width: 0;
    padding-left: .4rem;
    padding-right: .4rem;
    white-space: nowrap;
  }

  .nb-table-responsive-cards td {
    min-width: 0;
    align-items: flex-start;
    gap: .75rem;
  }

  .nb-table-responsive-cards td::before {
    flex: 0 0 38%;
    max-width: 38%;
  }

  .nb-table-responsive-cards td.money,
  .nb-table-responsive-cards td:not(.money) {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }
}

@media (max-width: 359.98px) {
  .nb-stat-card {
    padding: .75rem .65rem;
  }

  .nb-stat-card .value,
  .nb-responsive-money {
    font-size: .9rem;
  }

  .nb-ledger-toolbar .btn {
    font-size: .72rem;
  }
}

/* Belt-and-suspenders against horizontal page overflow from any
   unexpectedly wide inline content (e.g. a very long description
   string in a ledger table cell) - html/body already have no
   intentional overflow, this just guards against one appearing. */
html, body {
  overflow-x: hidden;
}