body {
  background-color: #f4f6f9;
}
.card-header {
  font-weight: 600;
}
table input.form-control, table select.form-select {
  min-width: 100px;
}

/* Used on report pages (and anywhere else with a .no-print element) so the
   navbar, filter form, and action buttons disappear when printing, leaving
   just the report title and results table. */
@media print {
  .no-print {
    display: none !important;
  }
  body {
    background-color: #fff;
  }
}

/* Opposite of .no-print: hidden on screen, shown only when printing. Used
   for "print everything that matches the filter" tables on reports that
   are paginated on screen (e.g. a long list) — the on-screen table
   only shows the current page, but this one holds every matching row. */
.print-only {
  display: none;
}
@media print {
  .print-only {
    display: block !important;
  }
}

/* Small "(i)" info icon used next to a form label instead of a long
   helper-text paragraph underneath the field — keeps forms compact and
   readable on mobile. Full explanation shows as a tooltip on tap/hover. */
.field-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #6c757d;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  cursor: help;
  margin-left: 4px;
  vertical-align: middle;
}

/* ===================================================================
   Mobile phone sizing (entry forms, report tables, master-data lists,
   headings) — screens narrower than a small tablet.
   =================================================================== */
@media (max-width: 575.98px) {
  /* Entry forms: shrink inputs/buttons/labels so a form fits without
     needing to zoom or scroll horizontally. */
  .form-control, .form-select, .form-check-label, .form-label, .btn {
    font-size: 0.85rem;
  }
  .form-control, .form-select {
    padding: 0.3rem 0.55rem;
  }
  .btn-sm {
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
  }
  .card-body {
    padding: 0.85rem;
  }

  /* Report tables and master-data (Admin -> lookup) tables share the same
     Bootstrap .table markup — one rule covers both. */
  table.table {
    font-size: 0.78rem;
  }
  table.table th, table.table td {
    padding: 0.35rem 0.4rem;
  }

  /* Headings (report titles, entry form titles, card titles) — smaller so
     they don't wrap and crowd the page on a narrow screen. */
  h3 { font-size: 1.2rem; }
  h4 { font-size: 1.1rem; }
  h5 { font-size: 1rem; }
  h6, .card-title { font-size: 0.9rem; }
}

/* Home page's 4 colored stat cards (Today's Collection, Today's Expense,
   Today's Salary Paid, Staff Present) and every report's own colored
   summary cards (Opening Balance / Total In / Total Out / Closing Balance
   and similar, e.g. views/reports/statement.ejs, daybook.ejs,
   salary-statement.ejs, etc.) — always 4-per-row on every screen size
   including mobile and print, so they stay on a single line instead of
   wrapping to 2+ rows. Sizing shrinks further on phones and when printing
   so the numbers/labels still fit comfortably at quarter-width. */
.home-stat-value, .report-stat-value {
  font-size: 1.75rem;
  line-height: 1.2;
}
.home-stat-label, .report-stat-label {
  font-size: 0.8rem;
}
@media (max-width: 575.98px) {
  .home-stat-card .card-body, .report-stat-card .card-body {
    padding: 0.5rem 0.3rem;
  }
  .home-stat-value, .report-stat-value {
    font-size: 1rem;
  }
  .home-stat-label, .report-stat-label {
    font-size: 0.6rem;
    line-height: 1.15;
  }
}
@media print {
  .report-stat-card .card-body {
    padding: 0.3rem 0.2rem;
  }
  .report-stat-value {
    font-size: 0.95rem;
  }
  .report-stat-label {
    font-size: 0.55rem;
    line-height: 1.1;
  }
}

/* Any cell whose content looks like a formatted date (dd-mm-yyyy, or
   dd-mm-yyyy HH:MM) gets this class added automatically by
   public/js/reportView.js — keeps it on one line instead of wrapping
   awkwardly in a squeezed table column or a mobile report card. */
.nowrap-cell {
  white-space: nowrap;
}

/* ===================================================================
   Mobile report card/table view toggle (public/js/reportView.js builds
   the .report-cards markup and toggles these classes on .report-view-outer,
   the wrapper it creates around each report's existing .table-responsive).
   Card view is the default on mobile for report pages. Desktop and print
   always force table view regardless of the stored preference. The home
   page's own summary tables opt out of this via data-no-card-view and
   always show as a table (see views/home.ejs).
   =================================================================== */
.report-view-toggle {
  display: none;
  gap: 0.25rem;
}
@media (max-width: 767.98px) {
  .report-view-toggle {
    display: flex;
  }
}
.report-view-toggle .btn.active {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.report-cards {
  display: none;
}
/* Card view only ever takes effect on mobile-width screens. Scoping it here
   (rather than relying on the desktop/print overrides below to fight it via
   !important) avoids a CSS specificity trap: this selector has 3 chained
   classes, more specific than the 2-class desktop/print override selectors,
   so if both were unscoped and both used !important, THIS rule would win
   the tie on desktop too and leave every report blank (table clipped away,
   cards force-hidden by the desktop rule) until the stored preference was
   manually switched to "table". Scoping to a max-width query means the two
   rule sets simply never overlap. */
@media (max-width: 767.98px) {
  .report-view-outer.report-view-card .report-cards {
    display: block;
  }
  /* Visually hide the table while card view is active, but keep it
     "rendered" (not display:none) so any Copy-to-clipboard button reading
     the table's own text still works correctly. Same technique as
     Bootstrap's .visually-hidden utility. */
  .report-view-outer.report-view-card > .report-table-slot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

.report-card {
  border-left: 3px solid #0d6efd;
}
.report-card-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.report-card-value {
  font-size: 0.85rem;
  word-break: break-word;
}

/* Desktop and print: always table view, full content, no scrollbars. */
@media (min-width: 768px) {
  .report-view-outer .report-table-slot {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: auto !important;
    clip: auto !important;
    white-space: normal !important;
    border: 0 !important;
  }
  .report-view-outer .report-cards {
    display: none !important;
  }
}
@media print {
  .report-view-toggle {
    display: none !important;
  }
  /* Both selectors target the same thing — the second, more specific one is
     a safety net in case a browser's print rendering also happens to match
     the max-width:767.98px card-view query above (some do, based on the
     assumed print layout width), so the card-hiding rule would otherwise
     win the specificity tie despite this block. */
  .report-view-outer .report-table-slot,
  .report-view-outer.report-view-card > .report-table-slot {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border: 0 !important;
  }
  .report-view-outer .report-cards,
  .report-view-outer.report-view-card .report-cards {
    display: none !important;
  }
  /* No scrollbars / clipping in print — let the table render at full size
     across as many printed pages as it needs, instead of being clipped to
     the on-screen scrollable box. */
  .table-responsive {
    overflow: visible !important;
  }
  table.table {
    font-size: 10px;
  }
}

/* ---------------------------------------------------------------
   Staff & Salary entry grids (Attendance / Daily Salary / Commission)
   --------------------------------------------------------------- */
.entry-grid td { vertical-align: middle; }
.entry-grid input[type="number"] { text-align: right; min-width: 80px; }
.entry-grid input[type="time"] { min-width: 125px; }
.entry-grid select { min-width: 80px; }
.entry-grid tbody tr.opacity-50 input,
.entry-grid tbody tr.opacity-50 select { background-color: #f8f9fa; }
.calc-table td { padding: .35rem .25rem; }

/* Attendance register (staff x day grid) */
.register-table th, .register-table td { white-space: nowrap; padding: 2px 4px; font-size: .8rem; }
.register-table .sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; }
.register-table thead .sticky-col { background: #f8f9fa; }
@media print {
  .register-table th, .register-table td { font-size: 9px; padding: 1px 2px; }
  .entry-grid input, .entry-grid select { border: none; }
}