:root {
  --brand-primary: #0d6efd;
  --brand-dark: #0a2540;
  --brand-accent: #0ea5a5;
  --ink: #1a2233;
  --ink-muted: #5b6577;
}
/* Stops a single too-wide element (a long table, a stretched badge) from
   dragging the WHOLE page sideways on mobile — seen on Transactions where
   swiping the table horizontally scrolled the filter form and header off
   with it. html-only (not body) so position:sticky elements inside body
   (the mobile top navbar) keep working — setting overflow-x on body
   itself forces overflow-y:auto too, which breaks sticky children. */
html { overflow-x: hidden; }
body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--ink); max-width: 100%; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; }
.hero-gradient {
  background: linear-gradient(135deg, #0a2540 0%, #123a63 55%, #0d6efd 100%);
  color: #fff;
}
.score-gauge {
  width: 180px; height: 180px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(#28a745 0deg, #28a745 var(--pct, 250deg), rgba(255,255,255,.25) var(--pct, 250deg));
  margin: 0 auto;
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,.25);
}
.score-gauge-inner {
  width: 145px; height: 145px; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08); }
.sidebar-desktop { min-height: 100vh; }
@media (max-width: 991.98px) {
  .sidebar-desktop { display: none; }
}
/* Mobile nav drawer (admin/vendor/customer): the same sidebar partial
   used in the desktop column is reused here, so defend against it ever
   being forced taller than the drawer's own space again (that bug pushed
   Logout off-screen below the fold on mobile) — scroll inside the drawer
   body instead of growing past it. */
.offcanvas-body { overflow-y: auto; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------------ */
/* Admin panel — professional polish pass                              */
/* ------------------------------------------------------------------ */
.sidebar {
  background: linear-gradient(180deg, #0a2540 0%, #10203a 100%) !important;
  border-right: 1px solid rgba(255,255,255,.06);
}
.sidebar .nav-link {
  border-radius: .5rem;
  padding: .55rem .75rem;
  transition: background-color .15s ease, color .15s ease;
  opacity: .85;
}
.sidebar .nav-link:hover {
  background: rgba(255,255,255,.08);
  opacity: 1;
}
.sidebar .nav-link.active,
.sidebar .nav-link[aria-current="page"] {
  background: var(--brand-primary);
  color: #fff !important;
  opacity: 1;
}
.sidebar a.text-danger:hover { background: rgba(220,53,69,.15); }

/* Collapsible master-admin nav groups (Access Control, Payments, etc.)
   — was 17 flat links in one column; grouped + collapsed by default,
   auto-expanded server-side only for the group the current page is in. */
.sidebar .nav-group-toggle { cursor: pointer; }
.sidebar .nav-group-chevron { font-size: .65rem; transition: transform .15s ease; opacity: .6; }
.sidebar .nav-group-toggle[aria-expanded="true"] .nav-group-chevron { transform: rotate(180deg); }
.sidebar .nav-group-toggle.collapsed .nav-group-chevron { transform: rotate(0deg); }
.sidebar ul.collapse .nav-link { padding: .4rem .75rem; font-size: .82rem; opacity: .75; }
.sidebar ul.collapse .nav-link.active { opacity: 1; }

/* Admin identity block avatar reuses the same gradient token as the
   customer sidebar's .user-avatar (defined further down) so both panels
   share one visual language. */

@media (min-width: 992px) {
  /* No fixed height + overflow-y:auto here on purpose: that forced an
     inner scrollbar (with the master-admin-only groups clipped below the
     fold) any time the nav list grew taller than one screen. The sidebar
     now just flows with the page — it scrolls together with the main
     content, no separate scrollbar, nothing gets clipped. */
  .sidebar-desktop .sidebar { min-height: 100vh; }
}

/* Guards against Bootstrap's .nav flex-wrap:wrap creating a second,
   overlapping column once the nav list's content is taller than the
   sidebar (columns wrap sideways in a flex-column container by default).
   flex-nowrap is also set directly on the <ul> markup; this is a
   belt-and-braces fallback in case a future nav list omits that class.
   min-height:max-content is required alongside it: per spec, setting
   overflow-x to anything but visible forces the computed overflow-y to
   auto too (even though only overflow-x was ever meant to be touched
   here) — that silently turned this <ul> into its own tiny internal
   scroll container, separate from the mobile drawer's own visible
   scrollbar. Whichever master-admin group landed past this <ul>'s
   flex-computed height (e.g. "Logs") was clipped away inside that
   invisible inner scrollbar — unreachable, not just hidden below a
   fold. min-height:max-content keeps this box always exactly as tall
   as its real content, so overflow-y:auto never has anything left to
   clip; any genuine overflow is then handled by the one real,
   visible scrollbar on .offcanvas-body / the page. */
.sidebar ul.nav.flex-column { flex-wrap: nowrap; overflow-x: hidden; min-height: max-content; }

body.bg-light { background: #f4f6fb !important; }

.card { border-radius: .75rem; }
.card.shadow-sm { box-shadow: 0 .125rem .5rem rgba(20,30,60,.06) !important; }

.table thead th {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .04em;
  color: #6c7a94;
  border-bottom-width: 1px;
  background: #f8f9fc;
}

.badge.bg-danger { background-color: #dc3545 !important; }

.btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-primary:hover { background-color: #0b5ed7; border-color: #0a58ca; }

/* Stat / KPI cards on the admin dashboard */
.kpi-card {
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  box-shadow: 0 .125rem .5rem rgba(20,30,60,.06);
  border-left: 4px solid var(--brand-primary);
}
.kpi-card .kpi-value { font-size: 1.75rem; font-weight: 700; color: #0a2540; }
.kpi-card .kpi-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #8792a5; }

/* ------------------------------------------------------------------ */
/* Public site — full design pass                                      */
/* ------------------------------------------------------------------ */
.skip-link {
  position: absolute; top: -3rem; left: .5rem; z-index: 2000;
  background: var(--brand-primary); color: #fff; padding: .5rem 1rem; border-radius: .375rem;
}
.skip-link:focus { top: .5rem; }

.site-navbar {
  box-shadow: 0 1px 0 rgba(20,30,60,.06);
  backdrop-filter: saturate(180%) blur(6px);
}
.site-navbar .navbar-brand { padding: 0; }
.site-navbar .nav-link {
  font-weight: 500;
  color: var(--ink-muted);
  padding: .6rem .9rem;
  border-radius: .5rem;
  position: relative;
}
.site-navbar .nav-link:hover { color: var(--brand-primary); background: rgba(13,110,253,.06); }
.site-navbar .nav-link.active { color: var(--brand-primary); font-weight: 700; }
.site-navbar .nav-link.active::after {
  content: '';
  position: absolute;
  left: .9rem; right: .9rem; bottom: .15rem;
  height: 2px; border-radius: 2px;
  background: var(--brand-primary);
}
.site-navbar .btn-primary {
  background: linear-gradient(135deg, #0d6efd, #0a58ca);
  border: none;
  box-shadow: 0 .35rem .75rem rgba(13,110,253,.3);
}
.site-navbar .btn-primary:hover { box-shadow: 0 .5rem 1rem rgba(13,110,253,.4); transform: translateY(-1px); }

.topbar { background: var(--brand-dark); color: #c7d2e3; }
.topbar-link { color: #c7d2e3; text-decoration: none; }
.topbar-link:hover { color: #fff; }
.topbar-tag { color: #9db1d1; font-weight: 500; }

.btn { border-radius: .5rem; font-weight: 600; }
.btn-lg { padding: .75rem 1.5rem; }
.btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-primary:hover { background-color: #0b5ed7; border-color: #0a58ca; }

.section-eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .08em;
  font-size: .75rem; font-weight: 700; color: var(--brand-primary);
  background: rgba(13,110,253,.08); padding: .3rem .8rem; border-radius: 2rem;
}

.trust-bar {
  background: #f4f7fc; border-top: 1px solid #e7ecf5; border-bottom: 1px solid #e7ecf5;
}
.trust-bar .trust-item { color: var(--ink-muted); font-size: .875rem; font-weight: 600; }
.trust-bar .trust-item i { color: var(--brand-accent); }

.step-card { position: relative; }
.step-num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--brand-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem;
  flex-shrink: 0;
}

.icon-tile {
  width: 56px; height: 56px; border-radius: .75rem; background: rgba(13,110,253,.08);
  display: flex; align-items: center; justify-content: center; color: var(--brand-primary); font-size: 1.4rem;
}

.cta-band {
  background: linear-gradient(135deg, #0a2540 0%, #0d6efd 100%);
  color: #fff; border-radius: 1rem;
}

.content-page h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.content-page h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-top: 2rem; }
.content-page p, .content-page li { color: var(--ink-muted); line-height: 1.7; }

.site-footer { background: var(--brand-dark); }
.footer-link { color: #c7d2e3; text-decoration: none; }
.footer-link:hover { color: #fff; text-decoration: underline; }

.faq-page .accordion-button:not(.collapsed) { color: var(--brand-primary); background: rgba(13,110,253,.06); }
.faq-page .accordion-button:focus { box-shadow: none; border-color: rgba(13,110,253,.25); }

/* Mobile-first responsive tightening: smaller hero/section padding and
   full-width tap-friendly nav links on phones, so nothing feels cramped
   or requires horizontal scrolling on a small screen. */
@media (max-width: 991.98px) {
  .site-navbar .navbar-nav { padding: .75rem 0; gap: .25rem; }
  .site-navbar .nav-link { padding: .75rem 1rem; }
  .hero-gradient { text-align: center; }
  .hero-gradient .d-flex.gap-4 { justify-content: center; flex-wrap: wrap; row-gap: .5rem; }
}
@media (max-width: 575.98px) {
  .hero-gradient h1 { font-size: 1.85rem; }
  .score-gauge { width: 140px; height: 140px; }
  .score-gauge-inner { width: 112px; height: 112px; }
  .cta-band { border-radius: 0; }
}

/* ------------------------------------------------------------------ */
/* Customer dashboard — premium design pass                            */
/* ------------------------------------------------------------------ */
.customer-sidebar .nav-link {
  border-radius: .5rem;
  padding: .6rem .8rem;
  font-weight: 500;
  color: #4a5568;
  transition: background-color .15s ease, color .15s ease;
}
.customer-sidebar .nav-link:hover { background: rgba(13,110,253,.06); color: var(--brand-primary); }
.customer-sidebar .nav-link.active {
  background: var(--brand-primary);
  color: #fff !important;
  box-shadow: 0 .25rem .6rem rgba(13,110,253,.3);
}
.customer-sidebar .nav-link.text-danger:hover { background: rgba(220,53,69,.08); }
.user-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; flex-shrink: 0;
}

.page-header { margin-bottom: 1.5rem; }
.page-header h3 { font-weight: 700; color: var(--brand-dark); margin-bottom: .15rem; }
.page-header .text-muted { font-size: .92rem; }

.table-premium { border-collapse: separate; border-spacing: 0; }
.table-premium thead th {
  text-transform: uppercase; font-size: .72rem; letter-spacing: .04em;
  color: #8792a5; background: #f8f9fc; border-bottom: 1px solid #edf0f6;
  padding: .85rem 1rem; font-weight: 700; white-space: nowrap;
}
/* Default every data cell to nowrap — a date, status pill, amount, name
   etc. wrapping across 3-4 lines is what was blowing up row height and
   dragging whole pages sideways on mobile across nearly every admin/
   customer/vendor table in the app (Transactions, Refunds, Credit
   Requests, Support Tickets, CMS lists, ...). table-responsive already
   scrolls horizontally for anything that doesn't fit, so nowrap costs
   nothing except on genuinely long free text — those columns (a refund
   reason, a message, an audit detail, a long title/question) opt back
   into wrapping with .cell-wrap. */
.table-premium tbody td { padding: .85rem 1rem; vertical-align: middle; border-bottom: 1px solid #f0f2f7; white-space: nowrap; }
.table-premium tbody td.cell-wrap { white-space: normal; min-width: 220px; }
/* Long-but-unimportant single-value columns (email, gateway payment ID):
   truncate on desktop so a wide table's action buttons aren't pushed
   off-screen — full value is on hover (title attr), and undone below in
   the mobile card view where there's no width pressure. */
.table-premium tbody td.email-cell,
.table-premium tbody td.payment-id-cell { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
/* Date+time columns: stack "d M Y" / "h:i A" on two short lines instead
   of one long nowrap string — narrower column, same info. */
.table-premium tbody td.date-cell { line-height: 1.3; }
.table-premium tbody td.date-cell .small { font-size: .78em; }
.table-premium tbody tr:last-child td { border-bottom: none; }
.table-premium tbody tr:hover { background: #f8fafd; }
/* Compact icon-over-caption action button (e.g. refund) — replaces a
   full-width text button so the Actions column stays narrow instead of
   needing a sticky/pinned column. */
.btn-icon-action {
  display: inline-flex; flex-direction: column; align-items: center; gap: .15rem;
  background: none; border: none; padding: .2rem .35rem; cursor: pointer; line-height: 1.15;
}
.btn-icon-action i { font-size: 1rem; }
.btn-icon-action .btn-icon-label { font-size: .65rem; font-weight: 600; white-space: nowrap; }
.btn-icon-action.text-danger:hover { color: #b02a37 !important; }
.table-premium tbody tr:last-child td:first-child { border-bottom-left-radius: .75rem; }
.table-premium tbody tr:last-child td:last-child { border-bottom-right-radius: .75rem; }

.status-pill {
  display: inline-block; padding: .3rem .7rem; border-radius: 2rem;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.status-pill.status-active, .status-pill.status-success { background: #e6f7ec; color: #1e7e34; }
.status-pill.status-closed, .status-pill.status-inactive { background: #eef0f4; color: #5b6577; }
.status-pill.status-failed, .status-pill.status-cancelled { background: #fdecea; color: #c0392b; }
.status-pill.status-pending, .status-pill.status-open, .status-pill.status-processing, .status-pill.status-in_progress { background: #fff6e0; color: #a06b00; }
.status-pill.status-refunded, .status-pill.status-partial_refund { background: #e8f1ff; color: #0a58ca; }

.action-link { color: var(--brand-primary); font-weight: 600; text-decoration: none; font-size: .875rem; }
.action-link:hover { text-decoration: underline; }
.action-link.muted { color: #8792a5; }

/* Compact pill pagination — used by customer/partials/pagination.php.
   Active state sets color explicitly (don't rely on Bootstrap's default
   .page-item.active text color) so it can't go invisible/low-contrast
   if Bootstrap's CSS ever loads differently than expected. */
.pagination-compact { gap: .25rem; }
.pagination-compact .page-item { margin: 0; }
.pagination-compact .page-link {
  color: var(--brand-primary);
  border-color: #e7ecf5;
  border-radius: .5rem;
  min-width: 2.1rem;
  text-align: center;
  padding: .4rem .55rem;
  font-weight: 600;
  font-size: .85rem;
}
.pagination-compact .page-link:hover {
  background: rgba(13, 110, 253, .08);
  color: var(--brand-primary);
  border-color: #e7ecf5;
}
.pagination-compact .page-item.active .page-link {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff !important;
}
.pagination-compact .page-item.disabled .page-link {
  color: #adb5c4;
  background: transparent;
  border-color: #e7ecf5;
}
.pagination-compact .page-link:focus { box-shadow: 0 0 0 .15rem rgba(13,110,253,.15); }

.report-score-card {
  background: linear-gradient(135deg, #0a2540 0%, #123a63 60%, #0d6efd 100%);
  border-radius: 1rem; color: #fff; padding: 2rem;
}
.report-score-card .score-gauge-inner { color: #0a2540; }

@media (max-width: 767.98px) {
  .table-premium { font-size: .85rem; }
  .table-premium thead th, .table-premium tbody td { padding: .65rem .6rem; }
  .page-header h3 { font-size: 1.35rem; }
}

/* ------------------------------------------------------------------ */
/* Mobile "card" tables — opt-in via .table-responsive-cards on the    */
/* wrapping .table-responsive div.                                     */
/*                                                                      */
/* Containing a table's overflow (.table-responsive + nowrap cells,    */
/* above) stops it dragging the whole page sideways, but swiping to    */
/* read the Actions column is still awkward on a phone — not really    */
/* "responsive", just "not broken". Below 768px this instead drops the */
/* table layout entirely: each <tr> becomes a bordered card and each   */
/* <td> becomes a label/value row, reading data-label (the column      */
/* name) as its own left-hand heading. No horizontal scroll needed.    */
/* Requires data-label="Column" on every <td> — cells without one      */
/* (e.g. an Actions cell with no single label) just show the value.    */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .table-responsive-cards table.table-premium thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .table-responsive-cards table.table-premium,
  .table-responsive-cards table.table-premium tbody,
  .table-responsive-cards table.table-premium tr,
  .table-responsive-cards table.table-premium td { display: block; width: 100%; }
  .table-responsive-cards table.table-premium tr {
    border: 1px solid #edf0f6; border-radius: .75rem; margin-bottom: .75rem; padding: .35rem 0; background: #fff;
  }
  .table-responsive-cards table.table-premium tr:last-child { margin-bottom: 0; }
  .table-responsive-cards table.table-premium td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
    border-bottom: 1px solid #f4f6fb; padding: .55rem .85rem; white-space: normal; text-align: right;
  }
  .table-responsive-cards table.table-premium td:last-child { border-bottom: none; }
  .table-responsive-cards table.table-premium td[data-label]::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left; font-weight: 700; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .04em; color: #8792a5; padding-top: .1rem;
  }
  /* A pure-actions cell (buttons/links, no single value worth a label)
     stays left-aligned without a label row — set data-label="" on it. */
  .table-responsive-cards table.table-premium td[data-label=""] { justify-content: flex-start; }
  .table-responsive-cards table.table-premium td .d-flex.justify-content-end { justify-content: flex-end !important; }
  .table-responsive-cards table.table-premium td.email-cell,
  .table-responsive-cards table.table-premium td.payment-id-cell { max-width: none; overflow: visible; text-overflow: clip; }
  /* Keep the stacked date/time as one block on the right, not two
     separate flex children next to the data-label. */
  .table-responsive-cards table.table-premium td .date-cell-inner { text-align: right; }
}