/* Blue Jay Travels — Accounts Portal
   Every colour below derives from the client's logo. The blue and the grey
   were sampled from the artwork itself, not matched by eye. */

:root {
  /* Brand colours sampled directly from the Blue Jay logo:
       #1081B1 is 17.3% of the mark (the bird and the swoosh)
       #B0B0B0 is 5.0%  (the "TRAVELS" wordmark and the grey arc)
     Every tint and shade below holds the same 198deg hue, so nothing in the
     interface can drift away from the logo. */
  --brand: #1081B1;
  --brand-700: #0D6991;      /* hover / pressed */
  --brand-900: #09445D;      /* headings on tinted panels */
  --brand-400: #45A9D3;      /* accents on dark ground */
  --brand-200: #B8DBEA;      /* borders on tinted panels */
  --brand-light: #DBEDF5;    /* badge and active-nav background */
  --brand-wash: #EFF7FA;     /* very light panel tint */

  /* The logo's second colour, used where a neutral needs to feel deliberate
     rather than accidental. */
  --grey: #B0B0B0;

  /* Neutrals carry the same hue at very low saturation, so greys sit beside
     the blue instead of fighting it. */
  --ink: #1A2930;
  --muted: #5D7179;
  --muted-light: #8F9DA3;
  --bg: #F6F7F8;
  --line: #DEE3E5;
  --white: #fff;

  /* Status colours, nudged toward the brand hue so they belong to the same
     family. Green and amber keep enough separation to stay readable. */
  --ok: #12766B;
  --ok-wash: #E4F4F1;
  --pending: #B45309;
  --pending-wash: #FDF1E3;
  --danger: #B3261E;
  --danger-wash: #FCECEA;
  --warn: #92700C;
  --warn-wash: #FBF4E3;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(26,41,48,.06), 0 4px 12px rgba(26,41,48,.05);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; margin: 0 0 4px; font-weight: 700; letter-spacing: -.2px; }
h2 { font-size: 1.05rem; margin: 0 0 10px; font-weight: 650; }
h3 { font-size: .95rem; margin: 0 0 8px; font-weight: 650; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---------- demo banner ---------- */
.demo-banner {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  align-items: baseline; justify-content: center;
  padding: 7px 20px;
  background: var(--ink); color: #C4D2D8;
  font-size: 12px; text-align: center;
}
.demo-banner strong { color: var(--brand-400); font-weight: 700; letter-spacing: 1.1px; }
@media print { .demo-banner, .topbar, .footer, .page-actions, .no-print { display: none !important; } }

/* ---------- top bar ---------- */
.topbar { background: var(--white); border-bottom: 2px solid var(--brand); box-shadow: var(--shadow); }
.topbar-inner {
  max-width: 1360px; margin: 0 auto; padding: 10px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-text {
  color: var(--ink); font-weight: 600; font-size: 13.5px; white-space: nowrap;
  border-left: 1.5px solid var(--line); padding-left: 11px; letter-spacing: .2px;
}
.brand { flex: none; }
.nav { min-width: 0; }
.nav-links { flex-wrap: wrap; row-gap: 4px; }
.nav { display: flex; align-items: center; gap: 3px; }
.nav-links { display: flex; align-items: center; gap: 3px; }
.nav-links > a {
  color: var(--muted); font-weight: 550; font-size: 13.5px;
  padding: 7px 11px; border-radius: 7px; text-decoration: none; white-space: nowrap;
}
.nav-links > a:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.nav-links > a.active { background: var(--brand-light); color: var(--brand-700); font-weight: 650; }
/* Replaced by a real menu below 900px; pointless above it. */
.nav-toggle { display: none; }

/* Less-used pages grouped under "Import" / "More" rather than every page
   sitting on the bar at once - the flat list ran out of room at ordinary
   laptop widths once a role had more than about eight links. */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); font-weight: 550; font-size: 13.5px; font: inherit;
  padding: 7px 11px; border-radius: 7px; border: 0; background: none; cursor: pointer;
}
.nav-dropdown-trigger:hover { background: var(--bg); color: var(--ink); }
.nav-dropdown-trigger.active { background: var(--brand-light); color: var(--brand-700); font-weight: 650; }
.nav-dropdown-trigger svg { flex: none; }
.nav-dropdown-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 55;
  min-width: 170px; background: var(--white);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(26,41,48,.16); padding: 6px;
}
.nav-dropdown-menu a {
  display: block; padding: 8px 10px; border-radius: 6px;
  color: var(--ink); font-size: 13.5px; font-weight: 550; text-decoration: none; white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--bg); text-decoration: none; }
.nav-dropdown-menu a.active { background: var(--brand-light); color: var(--brand-700); font-weight: 650; }

.nav-profile { position: relative; margin-left: 8px; }
.nav-profile-trigger {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; font: inherit;
  padding: 4px 8px; border-radius: 8px; color: var(--ink);
}
.nav-profile-trigger:hover { background: var(--bg); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700;
}
.nav-user { font-size: 13px; font-weight: 600; }
.nav-profile-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  min-width: 250px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(26,41,48,.16); overflow: hidden;
}
.nav-profile-head { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.nav-profile-name { font-weight: 700; }
.nav-profile-role { margin: 5px 0; }
.nav-profile-region { font-size: 12px; color: var(--muted); }
.nav-profile-links { padding: 6px; border-bottom: 1px solid var(--line); }
.nav-profile-links:last-child { border-bottom: 0; }
.nav-profile-links a {
  display: block; padding: 8px 10px; border-radius: 6px;
  color: var(--ink); font-size: 13px; text-decoration: none;
}
.nav-profile-links a:hover { background: var(--bg); }
.nav-logout {
  width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--danger); font: inherit; font-size: 13px; cursor: pointer;
}
.nav-logout:hover { background: var(--danger-wash); }

/* ---------- layout ---------- */
.wrap { max-width: 1140px; margin: 26px auto 40px; padding: 0 22px; }
.wrap-wide { max-width: 1500px; }
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.card-tight { padding: 0; overflow: hidden; }
.card-head {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.card-head h2 { margin: 0; }
.card-body { padding: 18px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- stat tiles ---------- */
.stat {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.stat-label {
  font-size: 11px; font-weight: 650; letter-spacing: .8px;
  text-transform: uppercase; color: var(--muted-light); margin-bottom: 7px;
}
.stat-value { font-size: 1.5rem; font-weight: 750; letter-spacing: -.4px; line-height: 1.15; }
.stat-value.brand { color: var(--brand); }
.stat-value.ok { color: var(--ok); }
.stat-value.pending { color: var(--pending); }
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-hint {
  font-size: 12px; color: var(--brand-700); background: var(--brand-wash);
  border-top: 1px solid var(--brand-200); padding: 7px 12px; text-align: center;
}
.scroll-hint[hidden] { display: none; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  background: var(--ink); color: #fff; text-align: left;
  padding: 9px 11px; font-weight: 600; font-size: 11.5px;
  letter-spacing: .4px; text-transform: uppercase; white-space: nowrap;
}
table.data td { padding: 9px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tbody tr:nth-child(even) { background: #fafbfc; }
table.data tbody tr:hover { background: var(--brand-light); }
table.data tfoot td { padding: 10px 11px; font-weight: 700; border-top: 2px solid var(--ink); background: #fafbfc; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-refund { background: var(--warn-wash) !important; }
.row-refund:hover { background: #fdf0d4 !important; }

/* ---------- badges ---------- */
.badge {
  display: inline-block; padding: 2.5px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 650; letter-spacing: .2px;
  background: #eef1f4; color: var(--muted); white-space: nowrap;
}
.badge-ok { background: var(--ok-wash); color: var(--ok); }
.badge-pending { background: var(--pending-wash); color: var(--pending); }
.badge-danger { background: var(--danger-wash); color: var(--danger); }
.badge-warn { background: var(--warn-wash); color: var(--warn); }
.badge-info { background: var(--brand-light); color: var(--brand-700); }
.badge-brand { background: var(--brand); color: #fff; }
.badge-muted { background: #eef1f4; color: var(--muted-light); }

/* KYC marks — the brief asks specifically for a blue tick / red cross */
.kyc-verified { color: var(--brand); font-weight: 700; }
.kyc-unverified { color: var(--danger); font-weight: 700; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--bg); text-decoration: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-ok:hover { background: #126c34; }
.btn-danger { background: var(--white); border-color: #f0c8c4; color: var(--danger); }
.btn-danger:hover { background: var(--danger-wash); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------- forms ---------- */
label { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
label .hint { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=file], select, textarea {
  width: 100%; padding: 8px 11px; margin-top: 5px;
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 13.5px; background: var(--white); color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26,127,181,.12);
}
textarea { min-height: 80px; resize: vertical; }
.field-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.inline-form { display: inline; }

.region-filter { display: inline-flex; align-items: center; }
.region-filter label { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.region-filter select { margin-top: 0; width: auto; min-width: 190px; }

.search-box { position: relative; min-width: 240px; }
.search-box input { margin-top: 0; }

/* ---------- alerts ---------- */
.alert {
  padding: 11px 15px; border-radius: 8px; margin-bottom: 16px;
  font-size: 13.5px; border: 1px solid transparent;
}
.alert-success { background: var(--ok-wash); border-color: #bfe5cd; color: #14532d; }
.alert-error   { background: var(--danger-wash); border-color: #f4c3bd; color: #7f1d1d; }
.alert-warn    { background: var(--warn-wash); border-color: #f2dfae; color: #713f12; }
.alert-info    { background: var(--brand-light); border-color: #bfdcee; color: #0f4c6d; }
.alert strong { font-weight: 700; }
.alert ul { margin: 8px 0 0; padding-left: 20px; }

/* ---------- warning list (import review) ---------- */
.warn-item {
  border: 1px solid #f2dfae; background: var(--warn-wash);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 12px;
}
.warn-item.resolved { border-color: #bfe5cd; background: var(--ok-wash); }
.warn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.warn-name { font-weight: 700; }
.warn-actions { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; flex-wrap: wrap; }
.warn-actions label { margin: 0; }
.sim-bar {
  display: inline-block; width: 80px; height: 6px; border-radius: 3px;
  background: #e6dcc0; overflow: hidden; vertical-align: middle;
}
.sim-bar span { display: block; height: 100%; background: var(--warn); }

/* ---------- empty state ---------- */
.empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty h3 { color: var(--ink); }

/* ---------- sign-in ---------- */
.auth-body {
  /* overflow-x only - the decorative blobs below sit partly off-screen and
     need clipping sideways, but hiding overflow on both axes blocked the
     whole page from scrolling vertically whenever the content (the
     demo-logins list especially) ran taller than the viewport. */
  position: relative; overflow-x: hidden; min-height: 100vh;
  background: linear-gradient(160deg, var(--brand-wash) 0%, var(--bg) 55%);
}
/* Two soft, out-of-focus discs in the brand hue - depth behind the card
   without drawing the eye away from the form itself. */
.auth-body::before, .auth-body::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--brand-200) 0%, transparent 70%);
  opacity: .55; filter: blur(6px);
}
.auth-body::before { width: 520px; height: 520px; top: -220px; left: -180px; }
.auth-body::after {
  width: 420px; height: 420px; bottom: -200px; right: -140px;
  background: radial-gradient(circle, var(--brand-400) 0%, transparent 72%);
  opacity: .3;
}
.auth-shell { position: relative; display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.auth-card {
  position: relative; overflow: hidden;
  width: 100%; max-width: 430px; background: var(--white);
  border: 1px solid var(--line); border-radius: 16px; padding: 36px 30px 34px;
  box-shadow: 0 1px 2px rgba(9,68,93,.05), 0 24px 48px -12px rgba(9,68,93,.18);
  animation: bjtsAuthCardIn .5s cubic-bezier(.22,.9,.34,1) both;
}
.auth-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-400), var(--brand), var(--brand-700));
}
@keyframes bjtsAuthCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-logo {
  display: block; height: 46px; width: auto; margin: 4px auto 24px;
  animation: bjtsAuthCardIn .6s cubic-bezier(.22,.9,.34,1) both;
}
.auth-card h1 { text-align: center; margin-bottom: 4px; }
.auth-card > p.muted { text-align: center; margin-bottom: 22px; }

/* The sign-in button only, by id - a flourish for the one button on the
   page that matters, not a restyle of every primary button in the app. */
#signin {
  background: linear-gradient(180deg, var(--brand), var(--brand-700));
  border-color: var(--brand-700);
  box-shadow: 0 1px 2px rgba(9,68,93,.1), 0 8px 20px -6px rgba(16,129,177,.55);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#signin:hover {
  background: linear-gradient(180deg, var(--brand-700), var(--brand-900));
  box-shadow: 0 2px 4px rgba(9,68,93,.12), 0 12px 26px -6px rgba(16,129,177,.65);
  transform: translateY(-1px);
}
#signin:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(9,68,93,.1); }

#toggle-pw { position: relative; }
#toggle-pw svg { transition: opacity .15s ease; }

.demo-logins { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.demo-logins-title {
  margin: 0 0 10px; font-size: 11px; font-weight: 650; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--muted-light);
}
.demo-login {
  position: relative; display: block; width: 100%; margin-bottom: 8px; padding: 10px 12px 10px 16px;
  text-align: left; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; font: inherit;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* A thin colour-coded edge, same idea as the role badges elsewhere in the
   portal, so the three demo accounts read apart at a glance before anyone
   has read a word of the label. */
.demo-login::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 2px; background: var(--grey);
}
.demo-login-accounts_admin::before { background: var(--brand-400); }
.demo-login-super_admin::before { background: var(--brand); }
.demo-login:hover, .demo-login:focus-visible {
  border-color: var(--brand); background: var(--white);
  transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(9,68,93,.18);
}
.demo-login-role { display: block; font-weight: 650; font-size: 13px; }
.demo-login-email { display: block; font-size: 12px; color: var(--brand); word-break: break-all; }
.demo-login-blurb { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.demo-logins-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted-light); }
@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-logo { animation: none !important; }
  #signin, .demo-login { transition: none !important; }
}

/* ---------- footer ---------- */
/* A thin brand-coloured edge bookends the topbar's blue underline at the
   other end of the page, so the two feel like one frame rather than the
   footer being an afterthought tacked under whatever card ended the page. */
.footer {
  position: relative; text-align: center; padding: 26px 22px 22px;
  color: var(--muted-light); font-size: 12px; line-height: 1.75;
  background: linear-gradient(180deg, var(--white), var(--brand-wash) 260%);
}
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 3px 10px;
}
.footer-inner p { margin: 2px 0; }
.footer-copy { color: var(--muted); font-weight: 600; letter-spacing: .1px; }
.footer-sep { color: var(--line); }
.footer-credit { color: var(--muted-light); }
.footer-credit a {
  color: var(--muted); font-weight: 700; text-decoration: none;
  background-image: linear-gradient(var(--brand-400), var(--brand-400));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1.5px;
  transition: background-size .25s ease, color .25s ease; padding-bottom: 1px;
}
.footer-credit a:hover { color: var(--brand-700); background-size: 100% 1.5px; }
/* The heart is the one place a warm colour is allowed to sit outside the
   brand palette — it reads as a signature rather than as interface. A small
   beat on hover, because a static heart glyph is just punctuation. */
.footer-heart {
  display: inline-block; color: #d64545; font-style: normal;
  transition: transform .2s ease;
}
.footer-credit:hover .footer-heart { animation: bjtsHeartbeat .6s ease-in-out; }
@keyframes bjtsHeartbeat {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.35); }
  55% { transform: scale(.95); }
}
.footer-demo {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 14px 0 0 !important; padding: 4px 12px 4px 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; color: var(--muted-light); box-shadow: var(--shadow);
}
.footer-demo-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-400);
  flex: none; animation: bjtsPulseDot 2.4s ease-in-out infinite;
}
@keyframes bjtsPulseDot {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
}
@media (max-width: 560px) {
  .footer-sep { display: none; }
  .footer-inner { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-heart, .footer-demo-dot { animation: none !important; transition: none !important; }
}

/* ---------- detail lists ---------- */
.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; }
.dl-item { min-width: 0; }
.dl-label {
  font-size: 11px; font-weight: 650; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted-light); margin-bottom: 2px;
}
.dl-value { font-size: 13.5px; word-break: break-word; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; padding: 0 0 14px 20px; border-left: 2px solid var(--line);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: -6px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--brand);
}
.timeline .t-when { font-size: 11.5px; color: var(--muted-light); }

@media (max-width: 900px) {
  .brand-text { display: none; }

  /* The links used to scroll sideways with no affordance, which pushed the
     later items -- and the profile menu holding Sign out -- off the right
     edge where nobody would find them. They now collapse into a tap-to-open
     list and the profile button never leaves the bar. */
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px; margin-right: 4px;
    background: var(--white); border: 1px solid var(--line); border-radius: 8px;
    color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  }
  .nav-toggle:hover { background: var(--bg); }
  .nav-links {
    display: none; position: absolute; z-index: 60;
    left: 12px; right: 12px; top: calc(100% - 6px);
    flex-direction: column; align-items: stretch; gap: 2px; padding: 8px;
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: 0 10px 30px rgba(26,41,48,.18);
  }
  .nav-links.open { display: flex; }
  .nav-links > a { padding: 12px 14px; font-size: 15px; }
  .topbar-inner { position: relative; }
  .nav { margin-left: auto; }
  .nav-user { display: none; }

  /* Inside the already-vertical menu a floating box makes no sense - the
     group expands in place instead, indented like a sub-list. */
  .nav-dropdown-trigger { width: 100%; justify-content: space-between; padding: 12px 14px; font-size: 15px; }
  .nav-dropdown-menu {
    position: static; box-shadow: none; border: 0; border-radius: 0;
    padding: 0 0 0 14px; margin-top: 2px;
  }
  .nav-dropdown-menu a { padding: 10px 14px; font-size: 14.5px; }
}

@media (max-width: 620px) {
  /* Two tiles a row reads better than one tall column of five. */
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .page-actions { flex-wrap: wrap; }
  /* Long workbook names such as DAILY SALE ABJ 02-SEP-2026.xlsx were breaking
     one word to a line and turning a cell into a paragraph. */
  .filename, .break-word { overflow-wrap: anywhere; word-break: break-word; }
}

@media (max-width: 400px) { .nav-toggle-text { display: none; } }

/* Below this a two-up tile is too narrow for a figure like XOF 1 238 700. */
@media (max-width: 359px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }


/* ---------- brand accents derived from the logo ---------- */
.brand-logo { height: 34px; width: auto; display: block; }
.stat { border-top: 2px solid var(--brand-light); }
.stat-value.brand { color: var(--brand); }
table.data th { background: var(--ink); }
.card-head { background: linear-gradient(to bottom, var(--brand-wash), var(--white)); }
.badge-brand { background: var(--brand); color: #fff; }
.badge-info { background: var(--brand-light); color: var(--brand-900); }
.kyc-verified { color: var(--brand); }
/* The logo's grey, used for genuinely inactive things so the neutral is a
   brand decision rather than a default. */
.badge-muted { background: #F0F1F1; color: #6F7B80; }
.badge-muted.is-grey { background: var(--grey); color: #fff; }