/* ============================================================
   site.css — Vagula Chit Fund project overrides
   Keep azia.css untouched; put all customizations here so
   template upgrades don't get clobbered.
   ============================================================ */

.az-logo {
  text-transform: none;
}

/* ============================================================
   Global mobile responsiveness fix
   ------------------------------------------------------------
   Root cause: most pages build form rows / filter bars / stat
   cards using col-md-N (or col-lg-N) with no col-12/col-sm-N
   base class. In Bootstrap 4, a column's width is only set
   inside a @media(min-width) block for its own breakpoint, so
   without a smaller-breakpoint class the column has NO width
   rule below that point — on phones it doesn't stack to 100%,
   it just shrinks to fit its content. That's what was making
   inputs, selects, buttons and dashboard cards look cramped or
   overlapping on mobile across almost every page.
   This forces any column that's missing a smaller-breakpoint
   class to go full width below its own breakpoint, restoring
   normal mobile-first stacking sitewide. Existing mg-b-10/
   mg-md-b-0 spacing classes on those columns already handle
   the gap between stacked fields, so no markup changes needed.
   ============================================================ */
@media (max-width: 767.98px) {
  .row > [class*="col-md-"]:not([class*="col-sm-"]),
  .row > [class*="col-lg-"]:not([class*="col-sm-"]):not([class*="col-md-"]),
  .row > [class*="col-xl-"]:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Slightly tighter page padding on phones so cards/tables get
   more usable width instead of losing it to side gutters. */
@media (max-width: 575.98px) {
  .az-content {
    padding-left: 10px;
    padding-right: 10px;
  }
  .az-content-title {
    font-size: 20px;
  }
}

/* Prevent any stray fixed-width element from forcing the whole
   page to scroll horizontally on small screens. */
@media (max-width: 767.98px) {
  body {
    overflow-x: hidden;
  }
}

/* ============================================================
   Data table mobile fix
   ------------------------------------------------------------
   Root cause: the data-grid pages (customer, group, collection,
   reports, etc.) use text-nowrap on every column, so a 6-8
   column table is always wider than a phone screen no matter
   how much padding/scroll-affordance you add to it — it will
   never actually "fit". The only real fix is to stop laying
   the data out as a table on small screens: each row becomes
   its own stacked card, and each cell shows its own field name
   above its value instead of relying on a column header.
   This needs each <td> to know which column it belongs to,
   since CSS can't read a <th> from three rows up. Every page's
   <td> now carries a data-label="<column name>" attribute
   (added mechanically from each table's own <thead>/<tfoot>
   text, one build step, not a per-page redesign) — azia.css
   and every page's visible desktop markup are otherwise
   untouched; this only matters below 768px.
   ============================================================ */
@media (max-width: 767.98px) {
  .table-responsive {
    overflow-x: visible;
  }

  .table-responsive .table,
  .table-responsive .table thead,
  .table-responsive .table tbody,
  .table-responsive .table tfoot,
  .table-responsive .table tr,
  .table-responsive .table th,
  .table-responsive .table td {
    display: block;
    width: 100% !important;
    white-space: normal !important;
  }

  /* Real column headers are replaced by each cell's own label
     below, so hide the header row itself. This only targets a
     <thead> that's a direct child of <table> — the couple of
     "detail" tables that use inline <th> label rows inside
     <tbody> instead of a <thead> are left alone, since those
     labels are the only labels those tables have. */
  .table-responsive .table > thead {
    display: none;
  }

  .table-responsive .table tbody tr,
  .table-responsive .table tfoot tr {
    margin-bottom: 10px;
    padding: 4px 12px;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    background: #fff;
  }

  .table-responsive .table td {
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid #f1f3f7;
    text-align: left;
  }
  .table-responsive .table td:last-child {
    border-bottom: none;
  }

  /* Field name, shown above the cell's own value. */
  .table-responsive .table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #96a2b8;
    margin-bottom: 2px;
  }

  /* Cells with no data-label are captions or unlabeled utility
     columns (a "Total" row caption, a bare checkbox column) —
     nothing to head them with, so they're left as plain text. */
  .table-responsive .table td[colspan] {
    font-weight: 600;
  }
}