/* Brand colours pulled from the legacy site (Super.Master + Home.aspx):
 *   primary navy   #2C4182  (top navigation strip background)
 *   accent  navy   #3B4C80  ("Welcome to Cash Buddy" heading colour)
 */
:root,
:root[data-theme],
[data-theme="light"],
[data-theme="dark"] {
  --brand-navy: #2C4182;
  --brand-navy-dark: #1F2E5C;
  --brand-accent: #3B4C80;
  --brand-tint: #F0F3FA;

  --pico-primary: var(--brand-navy);
  --pico-primary-hover: var(--brand-navy-dark);
  --pico-primary-background: var(--brand-navy);
  --pico-primary-hover-background: var(--brand-navy-dark);
  --pico-primary-border: var(--brand-navy);
  --pico-primary-hover-border: var(--brand-navy-dark);
  --pico-primary-focus: rgba(44, 65, 130, 0.25);
  --pico-primary-inverse: #fff;
  --pico-color: #1f2937;
  --pico-h1-color: var(--brand-accent);
  --pico-h2-color: var(--brand-accent);
  --pico-h3-color: var(--brand-accent);
}

/* Top nav as the legacy navy strip */
body > nav.container-fluid {
  background: var(--brand-navy) !important;
  padding: 0.65rem 1.25rem !important;
  margin: 0 0 1.5rem !important;
  border-bottom: 3px solid var(--brand-navy-dark) !important;
}
body > nav.container-fluid ul li a,
body > nav.container-fluid ul li strong {
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.2px;
}
body > nav.container-fluid ul li strong {
  font-size: 1.05rem;
  letter-spacing: 1px;
}
body > nav.container-fluid ul li a:hover { color: #cfd6ec; }
body > nav.container-fluid .role-chip { color: rgba(255, 255, 255, 0.75); }
body > nav.container-fluid a[role="button"].outline {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
body > nav.container-fluid a[role="button"].outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* Headings in the accent navy */
main h1, main h2, main h3, hgroup > h1, hgroup > h2, hgroup > h3 {
  color: var(--brand-accent);
}

/* Tables — light navy hover, slightly tighter */
table { font-size: 0.95rem; }
table th { color: var(--brand-accent); }
table tbody tr:hover { background: var(--brand-tint); }
table code { color: var(--brand-navy); background: var(--brand-tint); padding: 0.1rem 0.35rem; border-radius: 3px; }

/* Cards on the dashboard */
main .grid > article { border-top: 3px solid var(--brand-navy); }
main .grid > article header { color: var(--brand-accent); font-weight: 600; }

/* Login screen accent */
.login-card { max-width: 26rem; margin: 4rem auto; }
.login-card hgroup h1 { color: var(--brand-navy); letter-spacing: 1px; }

/* Status colours */
.error { color: #b3261e; font-weight: 600; }
.success { color: #1a7f37; font-weight: 600; }
mark { background: #FFF6BD; color: var(--brand-accent); padding: 0.1rem 0.3rem; font-size: 0.7rem; border-radius: 3px; }

/* Buttons — compact action buttons used in row actions */
.deactivate-btn, .edit-btn, .generate-btn {
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
  margin: 0;
  white-space: nowrap;
}
.row-actions { display: flex; gap: 0.4rem; }
.filter { margin: 1rem 0; max-width: 22rem; }
.role-chip { font-size: 0.8rem; opacity: 0.75; }

/* Search / filter bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: end;
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  background: var(--brand-tint);
  border-radius: 6px;
}
.filter-bar label { margin: 0; font-size: 0.85rem; }
.filter-bar input, .filter-bar select { margin: 0; }
.result-meta { font-size: 0.85rem; opacity: 0.8; margin: 0.5rem 0; }
.pager { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.pager span { font-size: 0.85rem; opacity: 0.8; }
.pager a[role="button"] { padding: 0.25rem 0.8rem; margin: 0; }
.bundle-bar { display: flex; gap: 1rem; align-items: center; margin: 1rem 0 1.5rem; flex-wrap: wrap; }
.bundle-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
.bundle-bar small { color: #555; }
.batch-cb, #select-all { width: 1.1rem; height: 1.1rem; cursor: pointer; }
.reset-banner { border-left: 4px solid var(--brand-navy); background: var(--brand-tint); padding: 1rem 1.25rem; margin: 1rem 0; }
.reset-banner header { background: none; padding: 0; margin-bottom: 0.5rem; }
.reset-pwd { display: inline-block; padding: 0.4rem 0.8rem; background: #fff; border: 1px solid var(--brand-navy); color: var(--brand-navy); font-size: 1.05rem; user-select: all; cursor: text; }