/* ==========================================================================
   gltx-theme.css — Grand Lodge of Texas skin for Bootstrap 5.3.x
   --------------------------------------------------------------------------
   Install: add ONE line after the Bootstrap CDN <link> in each page:
     <link rel="stylesheet" href="/shared/gltx-theme.css">
   No changes to header.js — the existing data-bs-theme toggle
   (light / dark / auto + localStorage) drives everything below.
   Fonts: Libre Caslon Text (headings), Public Sans (body/UI),
          IBM Plex Mono (member IDs, dollar amounts).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Public+Sans:ital,wght@0,400..800;1,400..700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* --------------------------------------------------------------------------
   LIGHT (default)
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  /* Surfaces & text */
  --bs-body-bg: #FAFAF7;
  --bs-body-color: #1C2433;
  --bs-secondary-color: #5A6272;          /* muted text */
  --bs-tertiary-bg: #F1EFE9;              /* navbar bg-body-tertiary, list hovers */
  --bs-secondary-bg: #F1EFE9;
  --bs-border-color: #DDD9CF;
  --bs-heading-color: #1C2433;
  --bs-emphasis-color: #10151F;

  /* Brand */
  --bs-primary: #1E3A66;
  --bs-primary-rgb: 30, 58, 102;
  --bs-link-color: #1E3A66;
  --bs-link-color-rgb: 30, 58, 102;
  --bs-link-hover-color: #16305B;
  --bs-link-hover-color-rgb: 22, 48, 91;

  /* Status (badges, alerts, contextual classes) */
  --bs-success: #2E6B4F;  --bs-success-rgb: 46, 107, 79;
  --bs-warning: #9A6B1F;  --bs-warning-rgb: 154, 107, 31;
  --bs-danger:  #8C2F39;  --bs-danger-rgb: 140, 47, 57;
  --bs-info:    #1E3A66;  --bs-info-rgb: 30, 58, 102;

  /* Gold — GLTX custom tokens */
  --gltx-gold: #B8923F;                    /* rules, icons, focus */
  --gltx-gold-text: #8C6D2F;               /* AA-safe on light bg */

  --bs-focus-ring-color: rgba(184, 146, 63, 0.35);
  --bs-border-radius: 0.375rem;

  --bs-body-font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

/* --------------------------------------------------------------------------
   DARK — driven by the app's existing data-bs-theme attribute
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --bs-body-bg: #10151F;
  --bs-body-color: #E9E7E0;
  --bs-secondary-color: #9AA3B2;
  --bs-tertiary-bg: #171E2B;
  --bs-secondary-bg: #1E2736;
  --bs-border-color: #2C3648;
  --bs-heading-color: #E9E7E0;
  --bs-emphasis-color: #FFFFFF;

  --bs-primary: #8FAEDD;
  --bs-primary-rgb: 143, 174, 221;
  --bs-link-color: #8FAEDD;
  --bs-link-color-rgb: 143, 174, 221;
  --bs-link-hover-color: #A5BFE7;
  --bs-link-hover-color-rgb: 165, 191, 231;

  --bs-success: #6FBF97;  --bs-success-rgb: 111, 191, 151;
  --bs-warning: #D9A959;  --bs-warning-rgb: 217, 169, 89;
  --bs-danger:  #E08790;  --bs-danger-rgb: 224, 135, 144;
  --bs-info:    #8FAEDD;  --bs-info-rgb: 143, 174, 221;

  --gltx-gold: #D4B36A;
  --gltx-gold-text: #D4B36A;

  --bs-focus-ring-color: rgba(212, 179, 106, 0.35);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body {
  font-size: 0.9375rem;                    /* 15px — matches design preview */
  line-height: 1.55;
  font-feature-settings: "tnum" 1;         /* tabular figures for dues/rosters */
}

h1, h2, h3, .h1, .h2, .h3,
.navbar-brand, .card-header .card-title {
  font-family: "Libre Caslon Text", serif;
  letter-spacing: -0.01em;
}

/* Member IDs / amounts */
.font-monospace, code, .mono { font-family: var(--bs-font-monospace); }

/* --------------------------------------------------------------------------
   Buttons — Bootstrap 5.3 buttons read component-scoped vars, so
   --bs-primary alone doesn't restyle them. Override per variant.
   -------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: #1E3A66;
  --bs-btn-border-color: #1E3A66;
  --bs-btn-hover-bg: #16305B;
  --bs-btn-hover-border-color: #16305B;
  --bs-btn-active-bg: #11264A;
  --bs-btn-active-border-color: #11264A;
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-disabled-bg: #1E3A66;
  --bs-btn-disabled-border-color: #1E3A66;
  --bs-btn-focus-shadow-rgb: 184, 146, 63;
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #8FAEDD;
  --bs-btn-border-color: #8FAEDD;
  --bs-btn-hover-bg: #A5BFE7;
  --bs-btn-hover-border-color: #A5BFE7;
  --bs-btn-active-bg: #B8CCEC;
  --bs-btn-active-border-color: #B8CCEC;
  --bs-btn-color: #10151F;                 /* dark text on light-blue = AA */
  --bs-btn-hover-color: #10151F;
  --bs-btn-active-color: #10151F;
  --bs-btn-disabled-bg: #8FAEDD;
  --bs-btn-disabled-border-color: #8FAEDD;
  --bs-btn-focus-shadow-rgb: 212, 179, 106;
}

.btn-outline-primary {
  --bs-btn-color: #1E3A66;
  --bs-btn-border-color: #C9C4B8;
  --bs-btn-hover-bg: #F1EFE9;
  --bs-btn-hover-color: #16305B;
  --bs-btn-hover-border-color: #C9C4B8;
  --bs-btn-active-bg: #F1EFE9;
  --bs-btn-active-color: #16305B;
  --bs-btn-active-border-color: #C9C4B8;
  --bs-btn-focus-shadow-rgb: 184, 146, 63;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #8FAEDD;
  --bs-btn-border-color: #3A455B;
  --bs-btn-hover-bg: #1E2736;
  --bs-btn-hover-color: #A5BFE7;
  --bs-btn-hover-border-color: #3A455B;
  --bs-btn-active-bg: #1E2736;
  --bs-btn-active-color: #A5BFE7;
  --bs-btn-active-border-color: #3A455B;
  --bs-btn-focus-shadow-rgb: 212, 179, 106;
}

.btn-secondary {
  --bs-btn-bg: #5A6272;
  --bs-btn-border-color: #5A6272;
  --bs-btn-hover-bg: #4A5260;
  --bs-btn-hover-border-color: #4A5260;
  --bs-btn-active-bg: #3D4451;
  --bs-btn-active-border-color: #3D4451;
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-focus-shadow-rgb: 184, 146, 63;
}
[data-bs-theme="dark"] .btn-secondary {
  --bs-btn-bg: #9AA3B2;
  --bs-btn-border-color: #9AA3B2;
  --bs-btn-hover-bg: #ABB3C0;
  --bs-btn-hover-border-color: #ABB3C0;
  --bs-btn-active-bg: #BCC3CE;
  --bs-btn-active-border-color: #BCC3CE;
  --bs-btn-color: #10151F;
  --bs-btn-hover-color: #10151F;
  --bs-btn-active-color: #10151F;
  --bs-btn-focus-shadow-rgb: 212, 179, 106;
}

.btn-outline-secondary {
  --bs-btn-color: #5A6272;
  --bs-btn-border-color: #C9C4B8;
  --bs-btn-hover-bg: #F1EFE9;
  --bs-btn-hover-color: #4A5260;
  --bs-btn-hover-border-color: #C9C4B8;
  --bs-btn-active-bg: #F1EFE9;
  --bs-btn-active-color: #3D4451;
  --bs-btn-active-border-color: #C9C4B8;
  --bs-btn-focus-shadow-rgb: 184, 146, 63;
}
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #9AA3B2;
  --bs-btn-border-color: #3A455B;
  --bs-btn-hover-bg: #1E2736;
  --bs-btn-hover-color: #ABB3C0;
  --bs-btn-hover-border-color: #3A455B;
  --bs-btn-active-bg: #1E2736;
  --bs-btn-active-color: #ABB3C0;
  --bs-btn-active-border-color: #3A455B;
  --bs-btn-focus-shadow-rgb: 212, 179, 106;
}

.btn-danger {
  --bs-btn-bg: #8C2F39;
  --bs-btn-border-color: #8C2F39;
  --bs-btn-hover-bg: #75262F;
  --bs-btn-hover-border-color: #75262F;
  --bs-btn-active-bg: #611F27;
  --bs-btn-active-border-color: #611F27;
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-focus-shadow-rgb: 184, 146, 63;
}
[data-bs-theme="dark"] .btn-danger {
  --bs-btn-bg: #E08790;
  --bs-btn-border-color: #E08790;
  --bs-btn-hover-bg: #E89DA5;
  --bs-btn-hover-border-color: #E89DA5;
  --bs-btn-active-bg: #EFB3B9;
  --bs-btn-active-border-color: #EFB3B9;
  --bs-btn-color: #10151F;
  --bs-btn-hover-color: #10151F;
  --bs-btn-active-color: #10151F;
  --bs-btn-focus-shadow-rgb: 212, 179, 106;
}

.btn-outline-danger {
  --bs-btn-color: #8C2F39;
  --bs-btn-border-color: #8C2F39;
  --bs-btn-hover-bg: #8C2F39;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-border-color: #8C2F39;
  --bs-btn-active-bg: #75262F;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-border-color: #75262F;
  --bs-btn-focus-shadow-rgb: 184, 146, 63;
}
[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #E08790;
  --bs-btn-border-color: #E08790;
  --bs-btn-hover-bg: #E08790;
  --bs-btn-hover-color: #10151F;
  --bs-btn-hover-border-color: #E08790;
  --bs-btn-active-bg: #E89DA5;
  --bs-btn-active-color: #10151F;
  --bs-btn-active-border-color: #E89DA5;
  --bs-btn-focus-shadow-rgb: 212, 179, 106;
}

.btn-warning {
  --bs-btn-bg: #9A6B1F;
  --bs-btn-border-color: #9A6B1F;
  --bs-btn-hover-bg: #845B1A;
  --bs-btn-hover-border-color: #845B1A;
  --bs-btn-active-bg: #6E4C16;
  --bs-btn-active-border-color: #6E4C16;
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-focus-shadow-rgb: 184, 146, 63;
}
[data-bs-theme="dark"] .btn-warning {
  --bs-btn-bg: #D9A959;
  --bs-btn-border-color: #D9A959;
  --bs-btn-hover-bg: #E0B870;
  --bs-btn-hover-border-color: #E0B870;
  --bs-btn-active-bg: #E7C788;
  --bs-btn-active-border-color: #E7C788;
  --bs-btn-color: #10151F;
  --bs-btn-hover-color: #10151F;
  --bs-btn-active-color: #10151F;
  --bs-btn-focus-shadow-rgb: 212, 179, 106;
}

.btn-outline-warning {
  --bs-btn-color: #9A6B1F;
  --bs-btn-border-color: #9A6B1F;
  --bs-btn-hover-bg: #9A6B1F;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-border-color: #9A6B1F;
  --bs-btn-active-bg: #845B1A;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-border-color: #845B1A;
  --bs-btn-focus-shadow-rgb: 184, 146, 63;
}
[data-bs-theme="dark"] .btn-outline-warning {
  --bs-btn-color: #D9A959;
  --bs-btn-border-color: #D9A959;
  --bs-btn-hover-bg: #D9A959;
  --bs-btn-hover-color: #10151F;
  --bs-btn-hover-border-color: #D9A959;
  --bs-btn-active-bg: #E0B870;
  --bs-btn-active-color: #10151F;
  --bs-btn-active-border-color: #E0B870;
  --bs-btn-focus-shadow-rgb: 212, 179, 106;
}

.btn-success {
  --bs-btn-bg: #2E6B4F;
  --bs-btn-border-color: #2E6B4F;
  --bs-btn-hover-bg: #255A42;
  --bs-btn-hover-border-color: #255A42;
  --bs-btn-active-bg: #1D4A36;
  --bs-btn-active-border-color: #1D4A36;
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-focus-shadow-rgb: 184, 146, 63;
}
[data-bs-theme="dark"] .btn-success {
  --bs-btn-bg: #6FBF97;
  --bs-btn-border-color: #6FBF97;
  --bs-btn-hover-bg: #85CCA7;
  --bs-btn-hover-border-color: #85CCA7;
  --bs-btn-active-bg: #9BD8B7;
  --bs-btn-active-border-color: #9BD8B7;
  --bs-btn-color: #10151F;
  --bs-btn-hover-color: #10151F;
  --bs-btn-active-color: #10151F;
  --bs-btn-focus-shadow-rgb: 212, 179, 106;
}

.btn-outline-success {
  --bs-btn-color: #2E6B4F;
  --bs-btn-border-color: #2E6B4F;
  --bs-btn-hover-bg: #2E6B4F;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-border-color: #2E6B4F;
  --bs-btn-active-bg: #255A42;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-border-color: #255A42;
  --bs-btn-focus-shadow-rgb: 184, 146, 63;
}
[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color: #6FBF97;
  --bs-btn-border-color: #6FBF97;
  --bs-btn-hover-bg: #6FBF97;
  --bs-btn-hover-color: #10151F;
  --bs-btn-hover-border-color: #6FBF97;
  --bs-btn-active-bg: #85CCA7;
  --bs-btn-active-color: #10151F;
  --bs-btn-active-border-color: #85CCA7;
  --bs-btn-focus-shadow-rgb: 212, 179, 106;
}

.btn-info {
  --bs-btn-bg: #1E3A66;
  --bs-btn-border-color: #1E3A66;
  --bs-btn-hover-bg: #16305B;
  --bs-btn-hover-border-color: #16305B;
  --bs-btn-active-bg: #11264A;
  --bs-btn-active-border-color: #11264A;
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-focus-shadow-rgb: 184, 146, 63;
}
[data-bs-theme="dark"] .btn-info {
  --bs-btn-bg: #8FAEDD;
  --bs-btn-border-color: #8FAEDD;
  --bs-btn-hover-bg: #A5BFE7;
  --bs-btn-hover-border-color: #A5BFE7;
  --bs-btn-active-bg: #B8CCEC;
  --bs-btn-active-border-color: #B8CCEC;
  --bs-btn-color: #10151F;
  --bs-btn-hover-color: #10151F;
  --bs-btn-active-color: #10151F;
  --bs-btn-focus-shadow-rgb: 212, 179, 106;
}

/* Accent button — gold, for actions that need extra visual pop */
.btn-accent {
  --bs-btn-bg: #B8923F;
  --bs-btn-border-color: #B8923F;
  --bs-btn-hover-bg: #9A7A34;
  --bs-btn-hover-border-color: #9A7A34;
  --bs-btn-active-bg: #8C6D2F;
  --bs-btn-active-border-color: #8C6D2F;
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-focus-shadow-rgb: 184, 146, 63;
  font-weight: 600;
}
[data-bs-theme="dark"] .btn-accent {
  --bs-btn-bg: #D4B36A;
  --bs-btn-border-color: #D4B36A;
  --bs-btn-hover-bg: #E0C47E;
  --bs-btn-hover-border-color: #E0C47E;
  --bs-btn-active-bg: #EBD593;
  --bs-btn-active-border-color: #EBD593;
  --bs-btn-color: #10151F;
  --bs-btn-hover-color: #10151F;
  --bs-btn-active-color: #10151F;
  --bs-btn-focus-shadow-rgb: 212, 179, 106;
}

/* --------------------------------------------------------------------------
   Forms — gold focus treatment
   -------------------------------------------------------------------------- */
.form-control, .form-select {
  --bs-border-color: #C9C4B8;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  --bs-border-color: #3A455B;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gltx-gold);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}
.form-check-input:checked {
  background-color: #1E3A66;
  border-color: #1E3A66;
}
[data-bs-theme="dark"] .form-check-input:checked {
  background-color: #8FAEDD;
  border-color: #8FAEDD;
}

/* --------------------------------------------------------------------------
   Navbar / cards / tables
   -------------------------------------------------------------------------- */
.gltx-navbar {
  background-color: var(--bs-tertiary-bg) !important;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.gltx-navbar .navbar-brand {
  color: var(--bs-heading-color);
  font-weight: 700;
}
.gltx-navbar .navbar-brand .brand-accent { color: var(--gltx-gold-text); }
.gltx-navbar .text-body-secondary { color: var(--bs-secondary-color) !important; }

.navbar-brand { font-weight: 700; }
.navbar-brand .brand-accent { color: var(--gltx-gold-text); }

.card {
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-bg: #FFFFFF;
  --bs-card-cap-bg: transparent;
}
[data-bs-theme="dark"] .card {
  --bs-card-bg: #171E2B;
}

/* Remove Bootstrap's striped-row coloring — use clean borders only */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-striped-bg: transparent;
}

/* --------------------------------------------------------------------------
   Tables — match preview: uppercase headers, clean minimal borders
   -------------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  font-size: 0.875rem;                     /* 14px — matches preview */
}
.table > thead th {
  font-family: var(--bs-body-font-family);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bs-secondary-color);
  border-bottom-color: var(--bs-border-color);
  padding: 0.5rem 0.75rem;
}
.table > tbody > tr > td {
  border-bottom-color: var(--bs-border-color);
  vertical-align: middle;
  padding: 0.625rem 0.75rem;
}
.table > tbody > tr:last-child > td {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   Badges — outline pill style (matching preview)
   -------------------------------------------------------------------------- */
.badge {
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
}
.badge.bg-success {
  background: transparent !important;
  color: var(--bs-success);
  border: 1px solid var(--bs-success);
}
.badge.bg-warning {
  background: transparent !important;
  color: var(--bs-warning);
  border: 1px solid var(--bs-warning);
}
.badge.bg-danger {
  background: transparent !important;
  color: var(--bs-danger);
  border: 1px solid var(--bs-danger);
}
.badge.bg-primary {
  background: transparent !important;
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
}
.badge.bg-secondary {
  background: transparent !important;
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
}
.badge.bg-dark {
  background: transparent !important;
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
}
.badge.bg-info {
  background: transparent !important;
  color: var(--bs-info);
  border: 1px solid var(--bs-info);
}

/* --------------------------------------------------------------------------
   Section headings — gold underline rule (auto-applied to card-title h5)
   -------------------------------------------------------------------------- */
.card-title {
  font-family: "Libre Caslon Text", serif;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  display: inline-block;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--gltx-gold);
  margin-bottom: 1rem;
}

.rule-gold {
  display: inline-block;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gltx-gold);
}

/* --------------------------------------------------------------------------
   Subtitles / muted text — slightly larger for readability
   -------------------------------------------------------------------------- */
.text-body-secondary {
  color: var(--bs-secondary-color) !important;
}

/* --------------------------------------------------------------------------
   Links — bold like preview
   -------------------------------------------------------------------------- */
a { font-weight: 600; }

/* Gold text utility (AA-safe value per mode) */
.text-gold { color: var(--gltx-gold-text) !important; }

/* --------------------------------------------------------------------------
   Page hero — H1 + subtitle below the navbar
   -------------------------------------------------------------------------- */
.gltx-page-hero {
  padding: 0 20px;
  margin: 20px 0 6px;
}
.gltx-page-hero h1 {
  font-family: "Libre Caslon Text", serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 0.25rem;
  color: var(--bs-heading-color);
}
.gltx-page-hero p {
  margin: 0;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Quality floor
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--gltx-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}