/*
 * Good Standing Room — Design System
 *
 * Brand identity applied to Credential Guardian.
 * Calm, professional, warm — not sterile or corporate.
 *
 * File structure
 * ──────────────
 *  1. Google Fonts import
 *  2. Design tokens (light)
 *  3. Dark theme tokens ([data-theme="dark"])
 *  4. Base reset & typography
 *  5. Navigation
 *  6. Layout
 *  7. Flash messages
 *  8. Cards
 *  9. Tables
 * 10. Status chips / badges
 * 11. Buttons
 * 12. Forms
 * 13. Page header
 * 14. Alert boxes
 * 15. Section title
 * 16. Stats grid
 * 17. Utility classes
 * 18. Code / pre (monospace)
 * 19. Scrollbar (Webkit)
 * 20. Responsive
 */

/* ============================================================
   1. Google Fonts
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&family=Sora:wght@600;800&display=swap');

/* ============================================================
   2. Design tokens — Light theme
   ============================================================ */
:root {
  /* Bootstrap 5 CSS variable overrides — map GSR brand to BS tokens */
  --bs-primary:         #2BAA9A;
  --bs-primary-rgb:     43, 170, 154;
  --bs-link-color:      #2BAA9A;
  --bs-link-hover-color: #239487;
  --bs-border-radius:   8px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);

  /* Brand palette */
  --gsr-navy:  #0E1A2B;
  --gsr-jade:  #2BAA9A;
  --gsr-mint:  #DDF3EE;
  --gsr-sand:  #F5E9DA;
  --gsr-clay:  #E6A79A;
  --gsr-slate: #657385;
  --gsr-white: #FFFFFF;
  --gsr-ink:   #071523;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Semantic colors — surfaces */
  --color-bg:           #F8FAFC;
  --color-bg-card:      var(--gsr-white);
  --color-bg-nav:       var(--gsr-navy);
  --color-bg-table-hd:  #F1F5F9;
  --color-bg-table-row: #F8FAFC;
  --color-bg-input:     var(--gsr-white);
  --color-bg-stat:      var(--gsr-white);

  /* Semantic colors — text */
  --color-text:         var(--gsr-navy);
  --color-text-muted:   var(--gsr-slate);
  --color-text-subtle:  #94A3B8;
  --color-text-heading: var(--gsr-navy);
  --color-text-label:   #374151;
  --color-text-th:      var(--gsr-slate);
  --color-text-section: var(--gsr-slate);
  --color-text-nav:     #AAB6C5;
  --color-text-nav-act: #F8FAFC;
  --color-text-brand:   #F8FAFC;

  /* Borders */
  --color-border:       #E2E8F0;
  --color-border-input: #D1D5DB;
  --color-border-table: #F1F5F9;

  /* Links & accents */
  --color-link:         var(--gsr-jade);
  --color-focus:        var(--gsr-jade);
  --color-accent:       var(--gsr-jade);
  --color-accent-light: var(--gsr-mint);
  --color-primary:      var(--gsr-jade);
  --color-primary-light: var(--gsr-mint);
  --color-primary-border: #A7E8D8;

  /* Buttons */
  --color-btn-primary-bg:      var(--gsr-jade);
  --color-btn-primary-text:    var(--gsr-white);
  --color-btn-primary-hover:   #239487;
  --color-btn-secondary-bg:    transparent;
  --color-btn-secondary-text:  var(--gsr-navy);
  --color-btn-secondary-hover: #F1F5F9;
  --color-btn-secondary-border: var(--gsr-slate);
  --color-btn-danger-bg:       #DC2626;
  --color-btn-danger-text:     var(--gsr-white);
  --color-btn-danger-hover:    #B91C1C;

  /* Status chips */
  --color-badge-active-bg:    var(--gsr-mint);
  --color-badge-active-text:  #0D6B5E;
  --color-badge-expired-bg:   #FEE2E2;
  --color-badge-expired-text: #991B1B;
  --color-badge-pending-bg:   var(--gsr-sand);
  --color-badge-pending-text: #92400E;
  --color-badge-neutral-bg:   #F1F5F9;
  --color-badge-neutral-text: var(--gsr-slate);
  --color-badge-clay-bg:      #FDE8E4;
  --color-badge-clay-text:    #9A3412;

  /* Alerts / messages */
  --color-success-bg:   var(--gsr-mint);
  --color-success-text: #0D6B5E;
  --color-success-bdr:  #A7E8D8;
  --color-error-bg:     #FEE2E2;
  --color-error-text:   #991B1B;
  --color-error-bdr:    #FECACA;
  --color-warning-bg:   var(--gsr-sand);
  --color-warning-text: #92400E;
  --color-warning-bdr:  #E6D5C3;
  --color-info-bg:      #DBEAFE;
  --color-info-text:    #1E40AF;
  --color-info-bdr:     #BFDBFE;

  /* Status indicators */
  --color-good: var(--gsr-jade);
  --color-bad:  #DC2626;

  /* Danger aliases (mirrors --color-error-* for semantic clarity) */
  --color-danger:        #DC2626;
  --color-danger-bg:     #FEE2E2;
  --color-danger-border: #F87171;

  /* Subtle surface (very light gray, for callout backgrounds) */
  --color-bg-subtle: #F9FAFB;

  /* Shadows */
  --shadow-card: 0 8px 24px rgba(14, 26, 43, 0.06);
  --shadow-nav:  0 2px 8px rgba(14, 26, 43, 0.12);
}

/* ============================================================
   3. Dark theme tokens
   ============================================================ */
[data-theme="dark"] {
  --color-bg:           var(--gsr-ink);
  --color-bg-card:      var(--gsr-navy);
  --color-bg-nav:       #050D18;
  --color-bg-table-hd:  #162032;
  --color-bg-table-row: var(--gsr-ink);
  --color-bg-input:     #162032;
  --color-bg-stat:      var(--gsr-navy);

  --color-text:         #F8FAFC;
  --color-text-muted:   #AAB6C5;
  --color-text-subtle:  #657385;
  --color-text-heading: #F8FAFC;
  --color-text-label:   #CBD5E1;
  --color-text-th:      #AAB6C5;
  --color-text-section: #AAB6C5;
  --color-text-nav:     #657385;
  --color-text-nav-act: #F8FAFC;
  --color-text-brand:   #F8FAFC;

  --color-border:       #1E3044;
  --color-border-input: #334155;
  --color-border-table: #162032;

  --color-link:         #5DD4C4;
  --color-focus:        #5DD4C4;
  --color-accent:       #5DD4C4;
  --color-accent-light: #0E2A26;
  --color-primary:      #5DD4C4;
  --color-primary-light: #0E2A26;
  --color-primary-border: #145C52;

  /* Buttons */
  --color-btn-primary-bg:      var(--gsr-jade);
  --color-btn-primary-text:    var(--gsr-white);
  --color-btn-primary-hover:   #34C4B2;
  --color-btn-secondary-bg:    transparent;
  --color-btn-secondary-text:  #F8FAFC;
  --color-btn-secondary-hover: #1E3044;
  --color-btn-secondary-border: #657385;
  --color-btn-danger-bg:       #EF4444;
  --color-btn-danger-text:     var(--gsr-white);
  --color-btn-danger-hover:    #DC2626;

  /* Status chips */
  --color-badge-active-bg:    #0E2A26;
  --color-badge-active-text:  #5DD4C4;
  --color-badge-expired-bg:   #3B0A0A;
  --color-badge-expired-text: #FCA5A5;
  --color-badge-pending-bg:   #2C1E0F;
  --color-badge-pending-text: #FDE68A;
  --color-badge-neutral-bg:   #1E3044;
  --color-badge-neutral-text: #AAB6C5;
  --color-badge-clay-bg:      #2C1510;
  --color-badge-clay-text:    #FCA5A5;

  /* Alerts / messages */
  --color-success-bg:   #0E2A26;
  --color-success-text: #5DD4C4;
  --color-success-bdr:  #145C52;
  --color-error-bg:     #3B0A0A;
  --color-error-text:   #FCA5A5;
  --color-error-bdr:    #991B1B;
  --color-warning-bg:   #2C1E0F;
  --color-warning-text: #FDE68A;
  --color-warning-bdr:  #854D0E;
  --color-info-bg:      #0C1E3F;
  --color-info-text:    #93C5FD;
  --color-info-bdr:     #1E40AF;

  /* Status indicators */
  --color-good: #5DD4C4;
  --color-bad:  #F87171;

  /* Danger aliases */
  --color-danger:        #FCA5A5;
  --color-danger-bg:     #3B0A0A;
  --color-danger-border: #991B1B;

  /* Subtle surface */
  --color-bg-subtle: #162032;

  /* Shadows */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-nav:  0 2px 8px rgba(0, 0, 0, 0.4);

  /* Bootstrap variable overrides for dark mode */
  --bs-body-color:       #F8FAFC;
  --bs-body-bg:          var(--gsr-ink);
  --bs-secondary-color:  #AAB6C5;
  --bs-border-color:     #1E3044;
  --bs-emphasis-color:   #F8FAFC;
  --bs-link-color:       #5DD4C4;
  --bs-link-hover-color: #7EDFCF;
  --bs-table-color:      #F8FAFC;
  --bs-table-bg:         transparent;
  --bs-table-border-color: #1E3044;
  --bs-table-striped-bg: #0E1A2B;
  --bs-table-hover-bg:   #162032;
  --bs-card-bg:          #0E1A2B;
  --bs-card-border-color: #1E3044;
}

/* ============================================================
   3b. Dark theme — Form field overrides
   Ensures all form fields use dark backgrounds, light text,
   and visible borders in dark mode, overriding any Tailwind
   Forms plugin defaults or crispy-tailwind class styles.
   ============================================================ */
[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=date],
[data-theme="dark"] input[type=datetime-local],
[data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=url],
[data-theme="dark"] input[type=password],
[data-theme="dark"] input[type=search],
[data-theme="dark"] input[type=tel],
[data-theme="dark"] input[type=time],
[data-theme="dark"] input[type=week],
[data-theme="dark"] input[type=month],
[data-theme="dark"] input:not([type]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .select,
[data-theme="dark"] .textinput,
[data-theme="dark"] .emailinput,
[data-theme="dark"] .passwordinput,
[data-theme="dark"] .numberinput,
[data-theme="dark"] .urlinput,
[data-theme="dark"] .textarea {
  background-color: #162032 !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

[data-theme="dark"] input[type=text]::placeholder,
[data-theme="dark"] input[type=email]::placeholder,
[data-theme="dark"] input[type=password]::placeholder,
[data-theme="dark"] input[type=search]::placeholder,
[data-theme="dark"] input[type=tel]::placeholder,
[data-theme="dark"] input[type=url]::placeholder,
[data-theme="dark"] input[type=number]::placeholder,
[data-theme="dark"] input:not([type])::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #657385;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .select:focus,
[data-theme="dark"] .textinput:focus,
[data-theme="dark"] .emailinput:focus,
[data-theme="dark"] .passwordinput:focus {
  border-color: #5DD4C4 !important;
  box-shadow: 0 0 0 3px rgba(93, 212, 196, 0.2);
  outline: none;
}

/* Dark mode: select option elements (dropdown items) */
[data-theme="dark"] select option {
  background-color: #162032;
  color: #F8FAFC;
}

/* Dark mode: file inputs */
[data-theme="dark"] input[type=file] {
  background-color: #162032 !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

/* Dark mode: checkbox and radio (keep accent color, don't force background) */
[data-theme="dark"] input[type=checkbox],
[data-theme="dark"] input[type=radio] {
  background-color: #162032 !important;
  border-color: #334155 !important;
}

/* ============================================================
   3c. Dark theme — Bootstrap component overrides
   Targets Bootstrap 5 components that hard-code light colours
   and don't automatically pick up our custom CSS variables.
   ============================================================ */

/* Bootstrap .text-muted → use our muted token */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary {
  color: var(--color-text-muted) !important;
}

/* Bootstrap body text */
[data-theme="dark"] body {
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Bootstrap tables */
[data-theme="dark"] .table {
  --bs-table-color: var(--color-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--color-border-table);
  --bs-table-striped-bg: #0E2132;
  --bs-table-hover-bg: var(--color-bg-table-hd);
  color: var(--color-text);
  border-color: var(--color-border-table);
}
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  color: var(--color-text);
  border-color: var(--color-border-table);
}
[data-theme="dark"] .table thead th {
  background: var(--color-bg-table-hd);
  color: var(--color-text-th);
}
[data-theme="dark"] .table-hover tbody tr:hover > * {
  background-color: var(--color-bg-table-hd);
  color: var(--color-text);
}

/* Bootstrap .card (where Bootstrap's own card class is used) */
[data-theme="dark"] .bs-card,
[data-theme="dark"] .card.bs-card {
  background-color: var(--color-bg-card);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Bootstrap .badge overrides */
[data-theme="dark"] .badge.bg-warning.text-dark {
  color: #1a1a1a !important; /* keep dark text on yellow — contrast is fine */
}

/* Bootstrap .border-top used in footer */
[data-theme="dark"] .border-top {
  border-color: var(--color-border) !important;
}

/* Bootstrap progress bar background */
[data-theme="dark"] .progress {
  background-color: var(--color-bg-table-hd);
}

/* Bootstrap small/muted in nav dropdowns */
[data-theme="dark"] small,
[data-theme="dark"] .small {
  color: inherit;
}

/* ============================================================
   3b. Dark theme — Form field overrides
   Ensures all form fields use dark backgrounds, light text,
   and visible borders in dark mode, overriding any Tailwind
   Forms plugin defaults or crispy-tailwind class styles.
   ============================================================ */
[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=date],
[data-theme="dark"] input[type=datetime-local],
[data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=url],
[data-theme="dark"] input[type=password],
[data-theme="dark"] input[type=search],
[data-theme="dark"] input[type=tel],
[data-theme="dark"] input[type=time],
[data-theme="dark"] input[type=week],
[data-theme="dark"] input[type=month],
[data-theme="dark"] input:not([type]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .select,
[data-theme="dark"] .textinput,
[data-theme="dark"] .emailinput,
[data-theme="dark"] .passwordinput,
[data-theme="dark"] .numberinput,
[data-theme="dark"] .urlinput,
[data-theme="dark"] .textarea {
  background-color: #162032 !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

[data-theme="dark"] input[type=text]::placeholder,
[data-theme="dark"] input[type=email]::placeholder,
[data-theme="dark"] input[type=password]::placeholder,
[data-theme="dark"] input[type=search]::placeholder,
[data-theme="dark"] input[type=tel]::placeholder,
[data-theme="dark"] input[type=url]::placeholder,
[data-theme="dark"] input[type=number]::placeholder,
[data-theme="dark"] input:not([type])::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #657385;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .select:focus,
[data-theme="dark"] .textinput:focus,
[data-theme="dark"] .emailinput:focus,
[data-theme="dark"] .passwordinput:focus {
  border-color: #5DD4C4 !important;
  box-shadow: 0 0 0 3px rgba(93, 212, 196, 0.2);
  outline: none;
}

/* Dark mode: select option elements (dropdown items) */
[data-theme="dark"] select option {
  background-color: #162032;
  color: #F8FAFC;
}

/* Dark mode: file inputs */
[data-theme="dark"] input[type=file] {
  background-color: #162032 !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

/* Dark mode: checkbox and radio (keep accent color, don't force background) */
[data-theme="dark"] input[type=checkbox],
[data-theme="dark"] input[type=radio] {
  background-color: #162032 !important;
  border-color: #334155 !important;
}

/* ============================================================
   4. Base reset & typography
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  background: var(--color-bg);
  color: var(--color-text);
  transition: background 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 800;
  color: var(--color-text-heading);
  line-height: 1.25;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ============================================================
   5. Navigation — Two-tier dropdown system
   ============================================================ */
.main-nav {
  background: var(--color-bg-nav);
  color: var(--color-text-nav-act);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-nav);
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  height: 60px;
}

.main-nav .brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-text-brand);
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: var(--space-5);
  flex-shrink: 0;
}
.main-nav .brand:hover {
  text-decoration: none;
  color: var(--color-text-brand);
}

.main-nav .brand .brand-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.main-nav .brand .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
}

/* Nav menu container */
.nav-menu {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0;
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

/* Nav links */
.nav-link {
  color: var(--color-text-nav);
  font-size: 0.84rem;
  font-weight: 500;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.nav-link:hover {
  color: var(--color-text-nav-act);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
}

/* Dropdown container */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  color: var(--color-text-nav);
}

.dropdown-arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.nav-dropdown.is-open .dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown.is-open .nav-dropdown-toggle {
  color: var(--color-text-nav-act);
  background: rgba(255, 255, 255, 0.07);
}

/* Dropdown menu panel */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 36px rgba(14, 26, 43, 0.12), 0 4px 12px rgba(14, 26, 43, 0.08);
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 1100;
}

.nav-dropdown-menu--right {
  left: auto;
  right: 0;
}

.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown items */
.dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: 0.84rem;
  font-weight: 450;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.dropdown-item:hover {
  background: var(--color-accent-light);
  color: var(--color-accent);
  text-decoration: none;
}
.dropdown-item--danger {
  color: var(--color-btn-danger-bg);
}
.dropdown-item--danger:hover {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) 0;
}

/* Org Switcher Dropdown */
.nav-dropdown--org .org-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.nav-dropdown--org .org-icon {
  opacity: 0.7;
}
.nav-dropdown--org .org-current-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-item--active {
  background: var(--color-accent-light);
  font-weight: 600;
}
.dropdown-item .org-item-name {
  display: block;
}
.dropdown-item .org-item-role {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* User avatar circle */
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gsr-jade);
  color: var(--gsr-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Role-specific avatar tints (#141) */
.user-avatar--superuser {
  background: var(--gsr-gold, #b45309);
}
.user-avatar--admin {
  background: var(--gsr-teal, #0891b2);
}

/* Role badge pill displayed next to nav labels (#141) */
.nav-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.4;
  flex-shrink: 0;
}
.nav-role-badge--superuser {
  background: rgba(180, 83, 9, 0.2);
  color: #b45309;
  border: 1px solid rgba(180, 83, 9, 0.35);
}
[data-theme="dark"] .nav-role-badge--superuser {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}
.nav-role-badge--admin {
  background: rgba(8, 145, 178, 0.15);
  color: #0891b2;
  border: 1px solid rgba(8, 145, 178, 0.3);
}
[data-theme="dark"] .nav-role-badge--admin {
  background: rgba(34, 211, 238, 0.12);
  color: #22d3ee;
  border-color: rgba(34, 211, 238, 0.25);
}

/* Nav link accent colors for elevated roles */
.nav-link--superuser {
  color: #b45309;
}
[data-theme="dark"] .nav-link--superuser {
  color: #fbbf24;
}
.nav-link--org-admin {
  color: #0891b2;
}
[data-theme="dark"] .nav-link--org-admin {
  color: #22d3ee;
}

.user-name {
  font-size: 0.84rem;
  color: var(--color-text-nav);
  font-weight: 500;
}

.user-toggle:hover .user-name {
  color: var(--color-text-nav-act);
}

/* Role-aware avatar variants (issues #140, #141) */
.user-avatar--superuser {
  background: #B45309; /* amber-700 — distinct from jade, accessible contrast */
}

.user-avatar--admin {
  background: #0D6B5E; /* deeper jade — elevated but not alarming */
}

/* Role badge pill shown next to nav buttons and user avatar (#141) */
.nav-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  vertical-align: middle;
  margin-left: 4px;
  flex-shrink: 0;
}

.nav-role-badge--admin {
  background: rgba(43, 170, 154, 0.25); /* jade tint */
  color: #DDF3EE;
  border: 1px solid rgba(43, 170, 154, 0.5);
}

.nav-role-badge--superuser {
  background: rgba(180, 83, 9, 0.3); /* amber tint */
  color: #FDE68A;
  border: 1px solid rgba(180, 83, 9, 0.5);
}

/* Nav link color variants for elevated-role menus (#141) */
.nav-link--org-admin {
  /* subtle jade tint to signal elevated org context */
  color: var(--gsr-mint) !important;
}

.nav-link--superuser {
  /* amber tint to signal system admin context */
  color: #FDE68A !important;
}

.nav-link--org-admin:hover,
.nav-link--superuser:hover {
  opacity: 0.85;
}

/* Mobile hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  margin-left: auto;
}

.hamburger {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text-nav-act);
  position: relative;
  transition: background 0.2s;
  border-radius: 2px;
}
.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--color-text-nav-act);
  transition: transform 0.2s;
  border-radius: 2px;
}
.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

.nav-toggle.is-active .hamburger {
  background: transparent;
}
.nav-toggle.is-active .hamburger::before {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle.is-active .hamburger::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Theme toggle button */
.theme-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-text-nav);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-text-nav-act);
}

/* ============================================================
   6. Layout
   ============================================================ */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  /* Establish a stacking context so page content is always interactive
     even when the mobile nav drawer is in the DOM (closed, off-screen) */
  position: relative;
  z-index: 1;
}

/* ============================================================
   7. Flash messages
   ============================================================ */
.messages { list-style: none; margin-bottom: var(--space-5); }
.messages li {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
  font-weight: 500;
}
.messages .success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-bdr); }
.messages .error   { background: var(--color-error-bg);   color: var(--color-error-text);   border: 1px solid var(--color-error-bdr); }
.messages .warning { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-bdr); }
.messages .info    { background: var(--color-info-bg);    color: var(--color-info-text);    border: 1px solid var(--color-info-bdr); }

/* ============================================================
   8. Cards
   ============================================================ */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.card h2 {
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: var(--space-4);
  color: var(--color-text-heading);
}

/* ============================================================
   9. Tables
   ============================================================ */
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-table-hd);
  color: var(--color-text-th);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-border);
}
td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-table);
  color: var(--color-text);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-bg-table-row); }

/* ============================================================
   10. Status chips / badges
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Good Standing / Current / Verified → jade/mint */
.badge-active     { background: var(--color-badge-active-bg);  color: var(--color-badge-active-text); }
.badge-redeemed   { background: var(--color-badge-active-bg);  color: var(--color-badge-active-text); }

/* Renewal Soon → warm sand/clay */
.badge-pending    { background: var(--color-badge-pending-bg); color: var(--color-badge-pending-text); }
.badge-in_renewal { background: var(--color-badge-pending-bg); color: var(--color-badge-pending-text); }
.badge-applied    { background: var(--color-badge-pending-bg); color: var(--color-badge-pending-text); }

/* Expiring Soon → amber/warning tone */
.badge-expiring   { background: var(--color-warning-bg);       color: var(--color-warning-text); }

/* Incomplete credential — amber, same family as expiring-soon */
.badge-incomplete { background: var(--color-warning-bg);       color: var(--color-warning-text); }

/* Action Needed → muted clay */
.badge-sent       { background: var(--color-badge-clay-bg);    color: var(--color-badge-clay-text); }

/* Expired → restrained red */
.badge-expired    { background: var(--color-badge-expired-bg); color: var(--color-badge-expired-text); }
.badge-lapsed     { background: var(--color-badge-expired-bg); color: var(--color-badge-expired-text); }

/* Unknown / Self-Reported → slate/neutral */
.badge-prospect   { background: var(--color-badge-neutral-bg); color: var(--color-badge-neutral-text); }
.badge-revoked    { background: var(--color-badge-neutral-bg); color: var(--color-badge-neutral-text); }
.badge-inactive   { background: var(--color-badge-neutral-bg); color: var(--color-text-subtle); }
.badge-retired    { background: var(--color-badge-neutral-bg); color: var(--color-text-subtle); }
.badge-dismissed  { background: var(--color-badge-neutral-bg); color: var(--color-text-subtle); }

/* Requirement / Task status badges */
.badge-complete      { background: var(--color-badge-active-bg);   color: var(--color-badge-active-text); }
.badge-passed        { background: var(--color-badge-active-bg);   color: var(--color-badge-active-text); }
.badge-in_progress   { background: var(--color-badge-pending-bg);  color: var(--color-badge-pending-text); }
.badge-scheduled     { background: var(--color-badge-pending-bg);  color: var(--color-badge-pending-text); }
.badge-pending_score { background: var(--color-badge-pending-bg);  color: var(--color-badge-pending-text); }
.badge-not_started   { background: var(--color-badge-neutral-bg);  color: var(--color-text-subtle); }
.badge-waived        { background: var(--color-badge-neutral-bg);  color: var(--color-text-subtle); }
.badge-cancelled     { background: var(--color-badge-neutral-bg);  color: var(--color-text-subtle); }
.badge-failed        { background: var(--color-badge-expired-bg);  color: var(--color-badge-expired-text); }

/* ============================================================
   11. Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.5rem 1.15rem;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.4;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  box-shadow: 0 2px 8px rgba(43, 170, 154, 0.2);
}
.btn-primary:hover {
  background: var(--color-btn-primary-hover);
  color: var(--color-btn-primary-text);
  box-shadow: 0 4px 12px rgba(43, 170, 154, 0.3);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-text);
  border: 1px solid var(--color-btn-secondary-border);
}
.btn-secondary:hover {
  background: var(--color-btn-secondary-hover);
  color: var(--color-btn-secondary-text);
}

.btn-danger {
  background: var(--color-btn-danger-bg);
  color: var(--color-btn-danger-text);
}
.btn-danger:hover {
  background: var(--color-btn-danger-hover);
  color: var(--color-btn-danger-text);
  transform: translateY(-1px);
}

.btn-sm {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
}

/* ============================================================
   12. Forms
   ============================================================ */
.form-group { margin-bottom: var(--space-5); }
label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-label);
  margin-bottom: var(--space-2);
}
input[type=text],
input[type=email],
input[type=date],
input[type=number],
input[type=url],
input[type=password],
select,
textarea {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  background: var(--color-bg-input);
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgba(43, 170, 154, 0.15);
}
.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.helptext {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.errorlist {
  list-style: none;
  padding: 0;
  margin-top: var(--space-1);
}
.errorlist li {
  font-size: 0.8rem;
  color: var(--color-error-text);
}

/* ============================================================
   13. Page header
   ============================================================ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.page-header h1 {
  font-family: 'Sora', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-text-heading);
}

/* ============================================================
   14. Alert boxes
   ============================================================ */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
}
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-bdr); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-bdr); }
.alert-danger  { background: var(--color-error-bg);   color: var(--color-error-text);   border: 1px solid var(--color-error-bdr); }
.alert-info    { background: var(--color-info-bg);    color: var(--color-info-text);    border: 1px solid var(--color-info-bdr); }

/* Override Bootstrap's own alert color variables so BS-styled alerts also adapt */
[data-theme="dark"] .alert-success {
  --bs-alert-color: var(--color-success-text);
  --bs-alert-bg: var(--color-success-bg);
  --bs-alert-border-color: var(--color-success-bdr);
  color: var(--color-success-text);
}
[data-theme="dark"] .alert-warning {
  --bs-alert-color: var(--color-warning-text);
  --bs-alert-bg: var(--color-warning-bg);
  --bs-alert-border-color: var(--color-warning-bdr);
  color: var(--color-warning-text);
}
[data-theme="dark"] .alert-danger {
  --bs-alert-color: var(--color-error-text);
  --bs-alert-bg: var(--color-error-bg);
  --bs-alert-border-color: var(--color-error-bdr);
  color: var(--color-error-text);
}
[data-theme="dark"] .alert-info {
  --bs-alert-color: var(--color-info-text);
  --bs-alert-bg: var(--color-info-bg);
  --bs-alert-border-color: var(--color-info-bdr);
  color: var(--color-info-text);
}

/* ============================================================
   15. Section title
   ============================================================ */
.section-title {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text-heading);
  margin: var(--space-6) 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border);
}

/* ============================================================
   16. Stats grid
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.stat-card {
  background: var(--color-bg-stat);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(14, 26, 43, 0.1);
}
.stat-card .stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-text-heading);
}
.stat-card .stat-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ============================================================
   17. Utility classes
   ============================================================ */
.text-good    { color: var(--color-good) !important; }
.text-bad     { color: var(--color-bad)  !important; }
.text-muted   { color: var(--color-text-muted) !important; }
.text-accent  { color: var(--color-accent) !important; }
.text-warning { color: var(--color-warning-text) !important; }
.text-danger  { color: var(--color-error-text) !important; }
.bg-success   { background: var(--color-success-bg) !important; border-color: var(--color-success-bdr) !important; }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }

/* ============================================================
   18. Code / pre (monospace — IBM Plex Mono)
   ============================================================ */
code {
  font-family: 'IBM Plex Mono', monospace;
  background: var(--color-bg-table-hd);
  color: var(--color-text);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.82em;
}
pre {
  font-family: 'IBM Plex Mono', monospace;
  background: var(--color-bg-table-hd);
  color: var(--color-text);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.6;
}

/* ============================================================
   19. Scrollbar (Webkit)
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); }

/* ============================================================
   20. Responsive
   ============================================================ */
/* ── Mobile nav backdrop ──────────────────────────────────── */
/* Sits behind the drawer, covers the page, closes the menu on tap */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 35, 0.55);
  z-index: 999;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-backdrop.is-visible {
  display: block;
  opacity: 1;
}

@media (max-width: 900px) {
  /* Navbar bar itself: single-row, no wrapping */
  .nav-inner {
    padding: 0 var(--space-4);
    flex-wrap: nowrap;
    height: 56px;
    min-height: 56px;
    position: relative;
  }

  /* Show the hamburger button */
  .nav-toggle {
    display: flex;
    align-items: center;
    /* Move to the right end of the bar */
    margin-left: auto;
    order: 99;
    flex-shrink: 0;
  }

  /* ── Side drawer ── */
  .nav-menu {
    /* Take the drawer out of normal flow */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 85vw);
    z-index: 1000;

    /* Slide off-screen to the left by default */
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);

    /* IMPORTANT: when closed, don't intercept pointer events on the page */
    pointer-events: none;
    visibility: hidden;

    /* Layout */
    display: flex !important; /* always in DOM; visibility controlled by transform + pointer-events */
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* Styling */
    background: var(--color-bg-nav);
    box-shadow: 4px 0 24px rgba(7, 21, 35, 0.35);
    padding: 0;
    gap: 0;
    border-top: none;
  }

  /* Drawer open state: slide in and re-enable interaction */
  .nav-menu.is-open {
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
  }

  /* Drawer header: brand + close button */
  .nav-menu::before {
    content: '';
    display: block;
    height: 56px;           /* matches navbar height */
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Scrollable content area inside the drawer */
  .nav-primary {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-3) 0;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Right-side controls (theme, bell, org, user) sit at the bottom of the drawer */
  .nav-right {
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 0;
    padding: var(--space-3) var(--space-3) var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
  }

  /* Org name truncation: tighter on mobile */
  .nav-dropdown--org .org-current-name {
    max-width: 90px;
  }

  /* User name: hide to save space */
  .user-name {
    display: none;
  }

  .nav-link {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
  }

  /* Dropdown on mobile: inline expand (accordion-style) */
  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
    margin: 0 0 var(--space-1) var(--space-5);
    padding: var(--space-1) 0;
    /* Override the desktop opacity/visibility/transform animation */
    opacity: 1;
    visibility: visible;
    transform: none;
    /* Hidden by default; shown when parent has .is-open */
    display: none;
    transition: none;
  }

  /* On mobile, show/hide via display instead of opacity */
  .nav-dropdown.is-open .nav-dropdown-menu {
    display: block;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  /* Notification dropdown: constrain width to viewport on mobile */
  .notification-dropdown-menu {
    min-width: 0 !important;
    width: calc(100vw - 2 * var(--space-4));
    max-width: 360px;
    right: 0;
    left: auto;
  }

  .dropdown-item {
    padding: var(--space-2) var(--space-4);
    color: var(--color-text-nav);
    white-space: normal;
  }
  .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--color-text-nav-act);
  }

  /* Keep brand text visible in the drawer header */
  .main-nav .brand .brand-text { display: flex; }
}

@media (max-width: 768px) {
  .container { padding: var(--space-4); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .page-header h1 { font-size: 1.3rem; }

  /* Page header: stack title and actions vertically on mobile */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-header > div,
  .page-header > a {
    width: 100%;
  }
  /* Button groups inside page headers should wrap */
  .page-header [style*="display:flex"],
  .page-header .d-flex {
    flex-wrap: wrap;
  }

  /* Form actions: stack buttons on mobile */
  .form-actions {
    flex-direction: column;
  }
  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Tables: ensure all tables have horizontal scroll */
  .table-responsive,
  [style*="overflow-x:auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Inline edit forms: stack on mobile */
  .inline-edit-form {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .card { padding: var(--space-4); }

  /* Stat values: slightly smaller on very small screens */
  .stat-card .stat-value { font-size: 1.8rem; }

  /* Buttons: full-width stacking for primary action areas */
  .action-btn-list .btn {
    width: 100%;
    justify-content: center;
  }

  /* Code blocks: always break-word to prevent overflow */
  code {
    word-break: break-all;
    white-space: pre-wrap;
  }
}

/* ============================================================
   21. Form grid (crispy layouts)
   ============================================================ */
.form-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.form-col-2  { grid-column: span 2; }
.form-col-3  { grid-column: span 3; }
.form-col-4  { grid-column: span 4; }
.form-col-6  { grid-column: span 6; }
.form-col-8  { grid-column: span 8; }
.form-col-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .form-col-2,
  .form-col-3,
  .form-col-4,
  .form-col-6,
  .form-col-8,
  .form-col-12 {
    grid-column: span 1;
  }
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-5) 0;
}
fieldset legend {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-heading);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

/* ============================================================
   22. Inline editing (HTMX)
   ============================================================ */
.inline-edit-cell {
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.inline-edit-cell:hover {
  background: var(--color-accent-light);
}
.inline-edit-form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.inline-edit-form select,
.inline-edit-form input {
  padding: 0.3rem 0.5rem;
  font-size: 0.82rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-input);
  min-width: 100px;
}
.inline-edit-form button {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
}
.inline-edit-form button.cancel-btn {
  background: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-text);
  border: 1px solid var(--color-border-input);
}

/* ============================================================
   Notification Center (Issue #182)
   ============================================================ */

.notification-bell-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-nav-link);
  padding: 0.25rem 0.35rem;
  display: flex;
  align-items: center;
  line-height: 1;
}

.notification-bell-btn:hover,
.notification-bell-btn:focus-visible {
  color: var(--color-nav-link-hover);
  outline: none;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.6rem;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.notification-dropdown-menu {
  min-width: 320px !important;
}

.notification-item {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item--unread {
  background-color: var(--color-accent-light, rgba(13, 110, 253, 0.05));
}

.notification-item:hover {
  background-color: var(--color-hover-bg, rgba(0, 0, 0, 0.04));
}

.notification-dropdown-header {
  background: var(--color-nav-bg, #fff);
  position: sticky;
  top: 0;
  z-index: 1;
}

.nav-dropdown--notifications .nav-dropdown-menu {
  padding: 0;
}

/* ============================================================
   24. Mobile-specific improvements
   Targeted fixes for flows, tables, and components that need
   extra attention on small screens.
   ============================================================ */

/* ── Scrollable tab bars ──────────────────────────────────── */
/* Bootstrap nav-tabs: allow horizontal scroll on small screens
   instead of wrapping into multiple rows */
@media (max-width: 768px) {
  .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar visually but keep it functional */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .nav-tabs .nav-item {
    flex-shrink: 0;
  }
  .nav-tabs .nav-link {
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
  }
}

/* ── Credential detail: hero layout ──────────────────────── */
/* Stack the hero columns earlier (lg → sm) */
@media (max-width: 768px) {
  /* Bootstrap col-lg-8 / col-lg-4 already stack at <992px,
     but we want the action panel to appear BEFORE the vitals
     on very small screens — use order instead */
  .cred-hero .col-lg-4 { order: -1; }
  .cred-hero .col-lg-8 { order: 0; }

  /* Action buttons in the right panel: full-width on mobile */
  .action-btn-list .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ── Credential detail: tab content two-column sub-layouts ── */
/* col-xl-7 / col-xl-5 and col-xl-6 stay side-by-side until 1200px.
   Force them to stack at 768px so they're readable on phones. */
@media (max-width: 991px) {
  .tab-content .col-xl-7,
  .tab-content .col-xl-5,
  .tab-content .col-xl-6 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── Action cells in tables: wrap instead of nowrap ─────── */
/* Tables use white-space:nowrap on action cells to keep Edit/Delete
   on one line. On mobile this causes horizontal overflow. Instead,
   we let them wrap and stack the buttons. */
@media (max-width: 600px) {
  td[style*="white-space:nowrap"],
  td[style*="white-space: nowrap"] {
    white-space: normal !important;
  }
  /* Give action buttons in table cells a small gap when they wrap */
  td[style*="white-space"] .btn,
  td[style*="white-space"] form {
    display: inline-block;
    margin-bottom: 2px;
  }
}

/* ── Task table partial: add responsive wrapper ─────────── */
/* The partial renders a card > table with no .table-responsive.
   We target the card that wraps it via the overflow:hidden style. */
@media (max-width: 768px) {
  .card[style*="overflow:hidden"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Settings page: code URL overflow ───────────────────── */
@media (max-width: 768px) {
  /* Public profile URL and calendar feed URLs */
  code#public-profile-url,
  .card code {
    display: block;
    word-break: break-all;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  /* Public profile share row: stack vertically */
  .card > div[style*="display:flex"][style*="align-items:center"] {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .card > div[style*="display:flex"][style*="align-items:center"] .btn {
    align-self: flex-start;
  }

  /* Calendar feed inline checkboxes: stack vertically */
  .form-group[style*="inline-flex"] {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    margin-right: 0 !important;
    margin-bottom: var(--space-3) !important;
  }
}

/* ── Dashboard alerts: expiring-soon inline forms ───────── */
@media (max-width: 600px) {
  /* The alert embeds credential links + inline forms in a text flow.
     Remove nowrap so items can wrap naturally. */
  .alert span[style*="white-space:nowrap"] {
    white-space: normal !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }
}

/* ── Credential list: page header button group ───────────── */
@media (max-width: 768px) {
  /* The header wraps already (flex-wrap:wrap) but buttons are small
     and the group can still be wide. Ensure they fill available width. */
  .page-header > div[style*="display:flex"] {
    width: 100%;
  }
  .page-header > div[style*="display:flex"] .btn {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
  }
}

/* ── Credential add guided: picker tabs ─────────────────── */
@media (max-width: 480px) {
  .picker-tab-btn {
    font-size: 0.8rem;
    padding: var(--space-2) var(--space-3);
  }
  /* Template card: stack name and action button vertically */
  .template-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .template-card .tc-action {
    align-self: flex-end;
    margin-top: var(--space-2);
  }
  .template-card .tc-name {
    white-space: normal;
  }
  /* Badge preview fields: stack label + value */
  .badge-preview-field {
    flex-direction: column;
    gap: var(--space-1);
  }
  .badge-preview-field .bpf-label {
    min-width: unset;
  }
}

/* ── Settings: API key table ─────────────────────────────── */
/* Already wrapped in overflow-x:auto but the action cell with
   3 buttons needs to be able to wrap on very narrow viewports */
@media (max-width: 480px) {
  .card table td:last-child {
    white-space: normal;
  }
  .card table td:last-child .btn,
  .card table td:last-child form {
    display: inline-block;
    margin-bottom: 2px;
  }
}

/* ── Notification dropdown: mobile position fix ─────────── */
/* When the bell is near the right edge, the dropdown can clip.
   On mobile it's already handled in the @900px block above,
   but also handle the desktop-width dropdown on mid-size screens. */
@media (max-width: 600px) {
  .nav-dropdown--notifications .nav-dropdown-menu {
    position: fixed;
    top: 56px;
    left: var(--space-4);
    right: var(--space-4);
    width: auto;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: var(--radius-md);
    z-index: 1200;
  }
}

/* ── Credential form: max-width card on mobile ───────────── */
@media (max-width: 768px) {
  /* Remove the max-width constraint so the form fills the screen */
  .card.credential-form {
    max-width: 100%;
  }
}

/* ── Tab section headers: wrap on mobile ─────────────────── */
@media (max-width: 480px) {
  .tab-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .tab-actions {
    width: 100%;
  }
  .tab-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================================
   25. Mobile nav drawer — header & close button
   ============================================================ */

/* The drawer header is hidden on desktop */
.nav-drawer-header {
  display: none;
}

@media (max-width: 900px) {
  /* Show the header inside the drawer */
  .nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--space-4);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Brand inside the drawer */
  .brand--drawer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-text-brand);
    text-decoration: none;
    margin-right: 0;
  }
  .brand--drawer .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    font-size: 0.7rem;
    letter-spacing: 0.01em;
  }
  .brand--drawer .brand-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  /* Close (×) button */
  .nav-drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-nav);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
  }
  .nav-drawer-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-nav-act);
  }

  /* Remove the CSS ::before spacer now that we have a real header */
  .nav-menu::before {
    display: none;
  }

  /* Ensure the main-nav bar brand stays visible on the top bar */
  .main-nav > .nav-inner > .brand {
    display: flex;
  }
}

/* ============================================================
   21. Form grid (crispy layouts)
   ============================================================ */
.form-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.form-col-2  { grid-column: span 2; }
.form-col-3  { grid-column: span 3; }
.form-col-4  { grid-column: span 4; }
.form-col-6  { grid-column: span 6; }
.form-col-8  { grid-column: span 8; }
.form-col-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .form-col-2,
  .form-col-3,
  .form-col-4,
  .form-col-6,
  .form-col-8,
  .form-col-12 {
    grid-column: span 1;
  }
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-5) 0;
}
fieldset legend {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-heading);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

/* ============================================================
   22. Inline editing (HTMX)
   ============================================================ */
.inline-edit-cell {
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.inline-edit-cell:hover {
  background: var(--color-accent-light);
}
.inline-edit-form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.inline-edit-form select,
.inline-edit-form input {
  padding: 0.3rem 0.5rem;
  font-size: 0.82rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-input);
  min-width: 100px;
}
.inline-edit-form button {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
}
.inline-edit-form button.cancel-btn {
  background: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-text);
  border: 1px solid var(--color-border-input);
}