/* =====================================================================
   Rajendra Tyre Service — Panel styles
   ---------------------------------------------------------------------
   Built on Bootstrap 5.3. This file only adds:
     1. Colour tokens (brand navy + red from the logo)
     2. Layout: sidebar, top bar, mobile bottom bar
     3. Small components: stat cards, section titles, info grid, totals
     4. Gate pass popup + print styles
     7. THEME PATTERN used by every page:
          .page-head   title + one help line + main buttons
          .filter-bar  filters above a list
          .card.list-card + .rts-table   the list (DataTable)
   Sections are numbered so they are easy to find.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  --rts-navy: #261a5c;
  --rts-navy-2: #3b2f86;
  --rts-red: #e3141c;
  --rts-bg: #f3f5fa;
  --rts-card: #ffffff;
  --rts-border: #e3e7f0;
  --rts-text: #1d2333;
  --rts-muted: #6b7489;
  --rts-success: #12805c;
  --rts-warning: #b26b00;
  --rts-sidebar-w: 248px;
  --rts-topbar-h: 60px;
  --rts-radius: 12px;

  /* Bootstrap overrides */
  --bs-primary: var(--rts-navy);
  --bs-primary-rgb: 38, 26, 92;
  --bs-link-color: var(--rts-navy-2);
  --bs-link-hover-color: var(--rts-navy);
  --bs-body-color: var(--rts-text);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-border-color: var(--rts-border);
}

body {
  background: var(--rts-bg);
  font-size: 0.94rem;
}
.btn-primary {
  --bs-btn-bg: var(--rts-navy);
  --bs-btn-border-color: var(--rts-navy);
  --bs-btn-hover-bg: var(--rts-navy-2);
  --bs-btn-hover-border-color: var(--rts-navy-2);
  --bs-btn-active-bg: var(--rts-navy-2);
  --bs-btn-disabled-bg: var(--rts-navy);
  --bs-btn-disabled-border-color: var(--rts-navy);
}
.btn-outline-primary {
  --bs-btn-color: var(--rts-navy);
  --bs-btn-border-color: var(--rts-navy);
  --bs-btn-hover-bg: var(--rts-navy);
  --bs-btn-hover-border-color: var(--rts-navy);
  --bs-btn-active-bg: var(--rts-navy);
}
.text-brand {
  color: var(--rts-navy) !important;
}
.text-red {
  color: var(--rts-red) !important;
}
.form-label {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}
.form-control,
.form-select {
  border-radius: 8px;
  min-height: 42px;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--rts-navy-2);
  box-shadow: 0 0 0 0.2rem rgba(59, 47, 134, 0.15);
}
.required::after {
  content: " *";
  color: var(--rts-red);
}
.card {
  border: 1px solid var(--rts-border);
  border-radius: var(--rts-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--rts-border);
  font-weight: 700;
}
.table > :not(caption) > * > * {
  padding: 0.55rem 0.6rem;
}
.table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rts-muted);
  background: #f8f9fc;
  white-space: nowrap;
}
.tabular {
  font-variant-numeric: tabular-nums;
}

/* ---------- 2. LAYOUT ---------- */
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rts-sidebar-w);
  background: #fff;
  border-right: 1px solid var(--rts-border);
  display: flex;
  flex-direction: column;
  z-index: 1040;
}
.app-sidebar .brand {
  display: block;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rts-border);
}
.app-sidebar .brand img {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
}
.app-nav {
  list-style: none;
  margin: 0;
  padding: 12px 10px;
  overflow-y: auto;
  flex: 1;
}
.app-nav .nav-group {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rts-muted);
  padding: 14px 10px 6px;
}
.app-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--rts-text);
  text-decoration: none;
  font-weight: 500;
}
.app-nav a i {
  width: 18px;
  text-align: center;
  color: var(--rts-muted);
}
.app-nav a:hover {
  background: #f1f2f8;
}
.app-nav a.active {
  background: var(--rts-navy);
  color: #fff;
}
.app-nav a.active i {
  color: #fff;
}
.app-sidebar .sidebar-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--rts-border);
  font-size: 0.8rem;
  color: var(--rts-muted);
}

.app-main {
  margin-left: var(--rts-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--rts-topbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rts-border);
}
.app-topbar .page-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}
.app-topbar .mobile-logo img {
  height: 34px;
  width: auto;
}
.app-content {
  padding: 20px;
  flex: 1;
}
.app-footer {
  padding: 14px 20px;
  font-size: 0.8rem;
  color: var(--rts-muted);
  text-align: center;
}
.branch-pill {
  background: #eef0fb;
  color: var(--rts-navy);
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Mobile bottom bar (phones only) */
.app-bottombar {
  display: none;
}

@media (max-width: 991.98px) {
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
  }
  .app-sidebar.open {
    transform: translateX(0);
  }
  .app-main {
    margin-left: 0;
    padding-bottom: 64px;
  }
  .app-content {
    padding: 14px;
  }
  .app-topbar {
    padding: 0 12px;
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 35, 0.35);
    z-index: 1035;
  }
  .app-bottombar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    height: 60px;
    background: #fff;
    border-top: 1px solid var(--rts-border);
  }
  .app-bottombar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.7rem;
    color: var(--rts-muted);
    text-decoration: none;
    font-weight: 600;
  }
  .app-bottombar a i {
    font-size: 1.1rem;
  }
  .app-bottombar a.active {
    color: var(--rts-navy);
  }
}

/* Section heading between groups of boxes */
.section-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rts-navy);
  margin: 4px 0 10px;
}
.section-label .text-muted {
  text-transform: none;
  letter-spacing: 0;
}

/* Colour of the small icon square on a summary box */
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--tone, var(--rts-navy));
}
.tone-navy {
  --tone: var(--rts-navy);
  --tone-bg: #eef0fb;
}
.tone-green {
  --tone: #12805c;
  --tone-bg: #e7f6ef;
}
.tone-blue {
  --tone: #1f6feb;
  --tone-bg: #e8f0fe;
}
.tone-violet {
  --tone: #7048e8;
  --tone-bg: #f0ebff;
}
.tone-amber {
  --tone: #b26b00;
  --tone-bg: #fff4e0;
}
.tone-red {
  --tone: #d0202a;
  --tone-bg: #fdecec;
}
.stat-card .stat-icon {
  background: var(--tone-bg, #eef0fb);
  color: var(--tone, var(--rts-navy));
}

/* Summary box that is a link (tap = open the list behind it) */
.stat-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}
.stat-link:hover,
.stat-link:focus-visible {
  color: inherit;
  transform: translateY(-2px);
  border-color: var(--tone, var(--rts-navy));
  box-shadow: 0 8px 20px rgba(38, 26, 92, 0.1);
}
.stat-link .stat-go {
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tone, var(--rts-navy));
}
.stat-link .stat-go i {
  transition: transform 0.15s ease;
}
.stat-link:hover .stat-go i {
  transform: translateX(3px);
}

/* Branch tile (Dashboard + Daybook) */
.branch-tile {
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 14px 16px;
  background: #fff;
  color: var(--rts-text);
  text-decoration: none;
  border: 1px solid var(--rts-border);
  border-radius: var(--rts-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}
a.branch-tile:hover,
button.branch-tile:not(:disabled):hover {
  color: var(--rts-text);
  transform: translateY(-2px);
  border-color: var(--rts-navy-2);
  box-shadow: 0 8px 20px rgba(38, 26, 92, 0.1);
}
.branch-tile:disabled,
.branch-tile.is-static {
  cursor: default;
  opacity: 1;
}
.branch-tile.active {
  background: linear-gradient(135deg, var(--rts-navy), var(--rts-navy-2));
  border-color: var(--rts-navy);
  color: #fff;
}

.branch-tile.active,
a.branch-tile.active:hover,
button.branch-tile.active:hover {
  background: linear-gradient(135deg, var(--rts-navy), var(--rts-navy-2));
  border-color: var(--rts-navy);
  color: #fff;
}
.branch-tile .name {
  font-weight: 700;
}
.branch-tile .code {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: #eef0fb;
  color: var(--rts-navy);
}
.branch-tile .amount {
  font-size: 1.35rem;
  font-weight: 800;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.branch-tile .meta {
  font-size: 0.8rem;
  color: var(--rts-muted);
}
.branch-tile .parts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--rts-muted);
}
.branch-tile .parts b {
  color: var(--rts-text);
  font-variant-numeric: tabular-nums;
}
.branch-tile.active .meta,
.branch-tile.active .parts,
.branch-tile.active .parts b {
  color: rgba(255, 255, 255, 0.85);
}
.branch-tile.active .code {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
@media (max-width: 575.98px) {
  .branch-tile .amount {
    font-size: 1.15rem;
  }
  .stat-link .stat-go {
    display: none;
  }
}

/* ---------- 3. COMPONENTS ---------- */
.stat-card {
  padding: 16px;
  height: 100%;
}
.stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--rts-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-card .stat-value {
  font-size: 1.45rem;
  font-weight: 800;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stat-card .stat-sub {
  font-size: 0.78rem;
  color: var(--rts-muted);
  margin-top: 2px;
}
.stat-card .stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 9px 12px;
  border-left: 4px solid var(--rts-navy);
  background: #f3f4fb;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 700;
}
.section-title i {
  color: var(--rts-navy);
}
.section-title small {
  font-weight: 500;
  color: var(--rts-muted);
}

/* ---------- Form grid: every box in a row lines up ----------
   Fields sit on one 4-column grid (col-md-3). If a label wraps to two lines
   on a phone, the box still lines up with its neighbour (pushed to the bottom). */
.form-grid > [class*="col"] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* boxes start at the same height; hints under a box don't push its neighbours */
}
.form-grid .form-label {
  margin-bottom: 6px;
  line-height: 1.25;
  white-space: nowrap; /* one-line labels keep every box in a row level */
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-grid .form-text:empty {
  display: none;
}

/* Tyre / tube / other-service rows: same grid, a thin line between rows */
.dyn-row {
  padding: 0 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--rts-border);
}
.dyn-row .btn-remove {
  height: 42px; /* same height as an input (.form-control min-height) */
  padding-block: 0;
}
/* Qty boxes are narrow: centre the number, no spinner arrows */
.dyn-row input[data-f="quantity"] {
  text-align: center;
  padding-inline: 4px;
  -moz-appearance: textfield;
}
.dyn-row input[data-f="quantity"]::-webkit-outer-spin-button,
.dyn-row input[data-f="quantity"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Multiple Payments split: same grid as the fields above */
.split-box {
  border-top: 1px dashed var(--rts-border);
  padding-top: 12px;
}

/* Membership coupon on the gate pass (27-Oct, MOM #4) */
.coupon-box {
  border: 1px solid var(--rts-border);
  border-left: 4px solid var(--rts-navy);
  border-radius: var(--rts-radius);
  padding: 12px 14px;
  background: #f8f7ff;
}
.coupon-box.is-off #couponFields .form-control { opacity: 0.5; }

/* Daybook QR check (27-Oct, MOM #3) */
.qr-check { white-space: nowrap; }
.qr-check .btn { padding: 0.1rem 0.45rem; font-size: 0.78rem; }

.filter-bar {
  background: #fff;
  border: 1px solid var(--rts-border);
  border-radius: var(--rts-radius);
  padding: 12px;
  margin-bottom: 14px;
}
.filter-bar .form-label {
  font-size: 0.75rem;
}

/* Totals panel on the gate pass form */
.totals-panel .row-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--rts-border);
}
.totals-panel .row-line:last-child {
  border-bottom: 0;
}
.totals-panel .grand {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--rts-success);
}
@media (min-width: 1200px) {
  .sticky-xl {
    position: sticky;
    top: calc(var(--rts-topbar-h) + 16px);
  }
}

/* Sticky action bar at the bottom of the gate pass form */
.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
  border-top: 1px solid var(--rts-border);
  padding: 10px 16px;
  margin: 0 -1px -1px;
  border-radius: 0 0 var(--rts-radius) var(--rts-radius);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
@media (max-width: 991.98px) {
  .form-actions {
    bottom: 60px;
  }
}

/* Status badges */
.badge-status {
  font-weight: 700;
  text-transform: capitalize;
  padding: 0.4em 0.7em;
}
.badge-draft {
  background: #eef0f5;
  color: #48506a;
}
.badge-frozen {
  background: #fff3cd;
  color: #7a5300;
}
.badge-submitted,
.badge-saved,
.badge-active {
  background: #d9f2e6;
  color: #0d6b47;
}
.badge-inactive {
  background: #fde2e3;
  color: #a3131a;
}
/*tr.row-frozen > td {*/
/*  background: #fffbea !important;*/
/*}*/
tr.row-frozen > td {
  background: #ffeeb0 !important;   /* pehle #fffbea tha */
}

/* Suggestions dropdown under an input */
.suggest-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1050;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}
.suggest-box .list-group-item {
  cursor: pointer;
  font-size: 0.85rem;
}

/* ---------- 4. GATE PASS POPUP (MOM #6) ---------- */
.gp-view .gp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.gp-view .gp-name {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
}
.gp-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.gp-info .item {
  border: 1px solid var(--rts-border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
.gp-info .item .lbl {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #39405a;
}
.gp-info .item .val {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #000;
  word-break: break-word;
}
.gp-billbox {
  border: 2px solid var(--rts-navy);
  border-radius: 12px;
  padding: 12px 14px;
  background: #f7f7fd;
}
.gp-billbox .row-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  padding: 3px 0;
}
.gp-billbox .bill-title {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rts-navy);
  margin-bottom: 6px;
}
.gp-billbox .bill-amount {
  border-top: 1px solid var(--rts-border);
  margin-top: 4px;
  padding-top: 8px;
  font-size: 1.05rem;
  font-weight: 800;
}
.gp-billbox .net-box {
  margin: 8px 0 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--rts-border);
}
.gp-billbox .net-box .row-line {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--rts-navy);
  padding: 0;
}
.gp-billbox .net-note {
  text-align: right;
  font-size: 0.75rem;
  color: var(--rts-muted);
}
.gp-billbox .paid-by {
  font-size: 0.85rem;
}
.gp-view .gp-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 20px;
  background: #eef0fb;
  color: var(--rts-navy);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: 1px;
}
.gp-view .gp-table tfoot th {
  font-weight: 600;
  background: #fafbfe;
}
.gp-view .gp-table tfoot tr.fw-total th {
  font-weight: 800;
}
.gp-view h6.gp-sec {
  margin: 18px 0 8px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  border-left: 4px solid var(--rts-navy);
  padding-left: 8px;
}
.gp-view table td,
.gp-view table th {
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .gp-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gp-view .gp-name {
    font-size: 1.2rem;
  }
}

/* ---------- 5. LOGIN ---------- */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(1200px 500px at 10% -10%, #dfe2f7 0, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, #fde2e3 0, transparent 60%), var(--rts-bg);
}
.login-card {
  width: 100%;
  max-width: 400px;
}
.login-card .logo {
  max-width: 220px;
  width: 70%;
  height: auto;
}

/* ---------- 6. PRINT ---------- */
@media print {
  .app-sidebar,
  .app-topbar,
  .app-bottombar,
  .app-footer,
  .no-print,
  .form-actions,
  .dt-length,
  .dt-search,
  .dt-paging {
    display: none !important;
  }
  .app-main {
    margin: 0 !important;
    padding: 0 !important;
  }
  .app-content {
    padding: 0 !important;
  }
  body {
    background: #fff;
    font-size: 12px;
  }
  .card {
    box-shadow: none;
    border-color: #bbb;
  }
  /* Printing from the gate pass popup prints only the popup */
  body.printing-modal > *:not(.modal) {
    display: none !important;
  }
  body.printing-modal .modal {
    position: static !important;
    display: block !important;
  }
  body.printing-modal .modal-dialog {
    max-width: 100% !important;
    margin: 0 !important;
  }
  body.printing-modal .modal-content {
    border: 0 !important;
  }
  body.printing-modal .modal-footer,
  body.printing-modal .btn-close {
    display: none !important;
  }
  body.printing-modal .modal-body {
    overflow: visible !important;
  }
  .gp-info .item,
  .gp-billbox {
    break-inside: avoid;
  }
  /* Print: details left, Bill Total right (like the screen), a bit smaller to fit one page */
  body.printing-modal .gp-view .col-lg-8 {
    flex: 0 0 62%;
    max-width: 62%;
  }
  body.printing-modal .gp-view .col-lg-4 {
    flex: 0 0 38%;
    max-width: 38%;
  }
  body.printing-modal .gp-view {
    font-size: 12px;
  }
  body.printing-modal .gp-info .item {
    padding: 6px 8px;
  }
  body.printing-modal .gp-info .item .val {
    font-size: 12.5px;
  }
  body.printing-modal .gp-view .table > :not(caption) > * > * {
    padding: 3px 6px;
  }
  body.printing-modal .gp-view h6.gp-sec {
    margin: 10px 0 5px;
  }
}

/* Placeholders stay in normal case even in UPPERCASE inputs */
.text-uppercase::placeholder {
  text-transform: none;
}

/* Simple numbered steps at the top of the gate pass form */
.steps-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 16px;
  padding: 10px 14px 10px 32px;
  background: #f7f8fd;
  border: 1px dashed var(--rts-border);
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--rts-muted);
}
.steps-hint li {
  padding-left: 2px;
}

/* ---------- 7. THEME PATTERN (every page) ---------- */

/* Page header: title, one line of help, main buttons */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  margin-bottom: 14px;
}
.page-head h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
}
.page-head .help {
  font-size: 0.85rem;
  color: var(--rts-muted);
  margin: 2px 0 0;
}
.page-head .actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Filter bar: same look everywhere */
.filter-bar .row {
  --bs-gutter-y: 0.5rem;
}
.filter-bar .form-control,
.filter-bar .form-select {
  min-height: 36px;
}
.filter-bar .filter-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rts-muted);
  margin-bottom: 6px;
}

/* List card: header with title + count + export buttons */
.list-card > .card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.list-card > .card-header .count {
  font-weight: 600;
  color: var(--rts-muted);
  font-size: 0.85rem;
}
.list-card > .card-header .tools {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* DataTables in the theme colours */
div.dt-container {
  font-size: 0.9rem;
}
div.dt-container .dt-search input {
  min-height: 36px;
  border-radius: 8px;
  min-width: 220px;
  margin-left: 0;
}
div.dt-container .dt-length select {
  min-height: 34px;
  border-radius: 8px;
}
div.dt-container .dt-paging .page-link {
  color: var(--rts-navy);
  border-radius: 8px;
  margin: 0 2px;
  border: 1px solid var(--rts-border);
}
div.dt-container .dt-paging .page-item.active .page-link {
  background: var(--rts-navy);
  border-color: var(--rts-navy);
  color: #fff;
}
div.dt-container .dt-info {
  color: var(--rts-muted);
}
table.rts-table td {
  vertical-align: middle;
}
table.rts-table tbody tr:hover > td {
  background: #f7f8fd;
}
/* The "+" that opens hidden columns on phones */
table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
table.dataTable > tbody > tr > td.dtr-control:before {
  border-color: var(--rts-navy);
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
  padding: 6px 0;
}
table.dataTable > tbody > tr.child span.dtr-title {
  min-width: 110px;
  color: var(--rts-muted);
  font-weight: 600;
}
.card .dt-container {
  /* margin (not padding): DataTables "+" folding measures the box width */
  margin: 12px;
}
.card .dt-container .dt-layout-row:first-child {
  margin-top: 0;
}

/* Small "number list" tables on Dashboard / Daybook */
.num-table td.num,
.num-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.num-table tfoot td {
  font-weight: 800;
  background: #f8f9fc;
}

/* Phones */
@media (max-width: 575.98px) {
  .page-head .actions {
    margin-left: 0;
    width: 100%;
  }
  .page-head .actions .btn {
    flex: 1;
  }
  div.dt-container .dt-search input {
    min-width: 0;
    width: 100%;
  }
  div.dt-container .dt-layout-row {
    gap: 6px;
  }
  .stat-card .stat-value {
    font-size: 1.15rem;
  }
  .stat-card {
    padding: 12px;
  }
}

/* Dates read left-to-right like text (DataTables right-aligns them by default) */
table.rts-table th.dt-type-date,
table.rts-table td.dt-type-date {
  text-align: left;
  white-space: nowrap;
}
table.rts-table td.num,
table.rts-table td .badge {
  white-space: nowrap;
}
table.rts-table th.dt-type-date .dt-column-header {
  flex-direction: row;
}

/* Links in the theme colour; table links without underline */
a {
  color: var(--rts-navy-2);
}
a:hover {
  color: var(--rts-navy);
}
table.rts-table a {
  text-decoration: none;
}
table.rts-table td.dtr-control {
  white-space: nowrap;
}

/* Never let a list push the page sideways on a phone */
div.dt-container .dt-layout-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin-left: 0;
  margin-right: 0;
}
/* No gutter around the table itself, so "+" folding measures the real width */
div.dt-container .dt-layout-table > div {
  padding-left: 0;
  padding-right: 0;
}
table.rts-table td {
  overflow-wrap: break-word;
}

/* Long codes without spaces (e.g. tyre item codes) may break anywhere on small screens */
table.rts-table td.wrap-any {
  overflow-wrap: anywhere;
  min-width: 140px;
}

/* Admin-only menu links (partials/menu.php 'admin' => true): shown after login check */
[data-admin-menu] {
  display: none !important;
}
body.is-admin [data-admin-menu] {
  display: list-item !important;
}

/* Admin-only parts of a page (e.g. Daybook on the Dashboard): hidden for staff */
body:not(.is-admin) [data-admin-only] {
  display: none !important;
}

/* Simple "label ........ number" list (Dashboard → Membership) */
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.link-list li + li {
  border-top: 1px solid var(--rts-border);
}
.link-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: var(--rts-text);
  text-decoration: none;
}
.link-list a:hover {
  background: #f7f8fd;
}
.link-list b {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* "How it adds up" box (Dashboard + Daybook) */
.eq-box {
  background: #fff;
  border: 1px solid var(--rts-border);
  border-radius: var(--rts-radius);
  padding: 12px 16px;
}
.eq-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rts-muted);
  margin-bottom: 6px;
}
.eq-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  font-variant-numeric: tabular-nums;
}
.eq-line + .eq-line {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--rts-border);
}
.eq-term {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.eq-sign {
  font-weight: 800;
  color: var(--rts-muted);
}
.eq-label {
  font-size: 0.85rem;
  color: var(--rts-muted);
}
.eq-total b {
  color: var(--rts-success);
  font-size: 1.05rem;
}
.eq-note {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--rts-muted);
}
@media (max-width: 575.98px) {
  .eq-term {
    white-space: normal;
  }
}

/* "No bills yet" note (Daybook) */
.empty-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--rts-border);
  border-left: 4px solid #1f6feb;
  border-radius: var(--rts-radius);
  padding: 14px 16px;
}
.empty-note > i {
  color: #1f6feb;
  margin-top: 3px;
}

/* Bill Total box: labels stay on one line ("Net Received" never breaks) */
.gp-billbox .row-line > span:first-child {
  white-space: nowrap;
}
.gp-billbox .row-line > span:last-child {
  text-align: right;
}

/* Popup: Bill No. / amount / discount right under the customer name (client 26-Oct "upar lo") */
.gp-view .gp-billno {
  margin-top: 4px;
  font-size: 1rem;
  color: #39405a;
}
.gp-view .gp-billno b {
  color: #000;
  font-weight: 800;
}