/* ============================================================================
   CTF-Admin Theme System  —  "terminal / forge" design language
   Look & feel copied from sudofoundry.com. Clean, token-based architecture.

   ARCHITECTURE
     1. TOKENS      — five [data-theme] blocks set the SAME token set per theme.
                      Themes differ ONLY in token values. No per-component
                      per-theme overrides anywhere below the token blocks.
     2. COMPONENTS  — each component is styled ONCE using var() tokens only.
                      No hardcoded colors in component rules. !important used
                      only where it must beat a Bootstrap default.

   All token names referenced by the existing views/Bootstrap mapping are
   preserved (values fixed). Every text/UI pair is WCAG 2.1 AA (computed).
   ============================================================================ */


/* ============================================================================
   1. THEME TOKENS
   ============================================================================ */

/* ----- PROFESSIONAL (= sudofoundry, the DEFAULT) ----- */
:root,
[data-theme="professional"] {
  /* Surfaces */
  --surface-deep:        #0E1117;
  --surface-base:        #131720;
  --surface-raised:      #1A1F2B;
  --surface-overlay:     #222838;

  /* Interactive surface = BUTTON / primary fill (NOT input bg) */
  --surface-interactive:          #C17F4E;
  --surface-interactive-hover:    #D49565;
  --surface-interactive-active:   #9E6839;
  --surface-interactive-disabled: #5A4A3A;

  /* Text */
  --text-primary:   #D5DCE6;
  --text-secondary: #9DA9BA;   /* AA on both surface-base and surface-raised */
  --text-muted:     #6B7689;   /* decorative only (>=3:1) */
  --text-inverse:   #0E1117;
  --on-primary:     #0E1117;   /* text on a solid --primary fill */

  /* Links */
  --link-color:   #D49565;     /* forge, AA on body */
  --link-hover:   #E2AC82;
  --link-visited: #C9A4C4;

  /* Borders */
  --border-subtle:   #21262E;
  --border-standard: #2A3144;
  --border-emphasis: #364055;

  /* Accent aliases (legacy names -> theme accents) */
  --ctf-primary:   #C17F4E;
  --ctf-secondary: #7AA2CC;
  --ctf-success:   #3FB950;
  --ctf-warning:   #D8A23A;
  --ctf-danger:    #F0564B;
  --ctf-info:      #58A6FF;
  --ctf-dark:      #0E1117;
  --ctf-light:     #1A1F2B;

  /* On-accent text (dark text reads on the light-ish dark-theme accents) */
  --on-success: #0E1117;
  --on-warning: #0E1117;
  --on-danger:  #0E1117;
  --on-info:    #0E1117;
  --on-secondary: #0E1117;

  /* Semantic alert triads (subtle dark bg, accent text, accent border) */
  --semantic-success-bg:     #14271A;
  --semantic-success-text:   #57D070;
  --semantic-success-border: #2C6B3A;
  --semantic-warning-bg:     #2A2110;
  --semantic-warning-text:   #E0B252;
  --semantic-warning-border: #6E5520;
  --semantic-danger-bg:      #2E1614;
  --semantic-danger-text:    #F47A72;
  --semantic-danger-border:  #7A2E2A;
  --semantic-info-bg:        #12233A;
  --semantic-info-text:      #74B6FF;
  --semantic-info-border:    #2A4E7A;

  /* Badge text colors (chosen per accent for >=4.5:1) */
  --badge-primary-text:   #0E1117;
  --badge-success-text:   #0E1117;
  --badge-warning-text:   #0E1117;
  --badge-danger-text:    #0E1117;
  --badge-info-text:      #0E1117;
  --badge-secondary-text: #0E1117;

  /* Focus ring (was undefined -> WCAG 2.4.7 fail). Now visible. */
  --focus-ring-color: #C17F4E;

  /* Mapped/compat tokens used by views & components */
  --body-bg:        var(--surface-base);
  --body-color:     var(--text-primary);
  --card-bg:        var(--surface-raised);
  --card-border:    var(--border-standard);
  --border-color:   var(--border-standard);
  --navbar-bg:      var(--surface-raised);
  --navbar-color:   var(--text-primary);
  --footer-bg:      var(--surface-base);
  --input-bg:       var(--surface-raised);
  --input-border:   var(--border-standard);
  --input-focus-border: var(--focus-ring-color);
  --dropdown-bg:    var(--surface-overlay);
  --table-stripe:   var(--surface-overlay);
  --table-hover:    #2B3242;
  --setting-name:   var(--link-color);
  --setting-value:  var(--text-primary);
  --setting-description: var(--text-secondary);
}

/* ----- DARK (neutral slate, steel accent) ----- */
[data-theme="dark"] {
  --surface-deep:        #0B1120;
  --surface-base:        #0F172A;
  --surface-raised:      #1E293B;
  --surface-overlay:     #334155;

  --surface-interactive:          #5B8DD6;
  --surface-interactive-hover:    #74A2E0;
  --surface-interactive-active:   #4574B8;
  --surface-interactive-disabled: #3A4A63;

  --text-primary:   #F1F5F9;
  --text-secondary: #B6C2D2;
  --text-muted:     #7C8AA0;
  --text-inverse:   #0B1120;
  --on-primary:     #0B1120;

  --link-color:   #7AA2CC;
  --link-hover:   #9BBBE0;
  --link-visited: #C4B5FD;

  --border-subtle:   #1E293B;
  --border-standard: #334155;
  --border-emphasis: #475569;

  --ctf-primary:   #5B8DD6;
  --ctf-secondary: #7AA2CC;
  --ctf-success:   #3FB950;
  --ctf-warning:   #D8A23A;
  --ctf-danger:    #F0564B;
  --ctf-info:      #58A6FF;
  --ctf-dark:      #0B1120;
  --ctf-light:     #1E293B;

  --on-success: #0B1120;
  --on-warning: #0B1120;
  --on-danger:  #0B1120;
  --on-info:    #0B1120;
  --on-secondary: #0B1120;

  --semantic-success-bg:     #11261A;
  --semantic-success-text:   #57D070;
  --semantic-success-border: #2C6B3A;
  --semantic-warning-bg:     #28200F;
  --semantic-warning-text:   #E0B252;
  --semantic-warning-border: #6E5520;
  --semantic-danger-bg:      #2C1513;
  --semantic-danger-text:    #F47A72;
  --semantic-danger-border:  #7A2E2A;
  --semantic-info-bg:        #102138;
  --semantic-info-text:      #74B6FF;
  --semantic-info-border:    #2A4E7A;

  --badge-primary-text:   #0B1120;
  --badge-success-text:   #0B1120;
  --badge-warning-text:   #0B1120;
  --badge-danger-text:    #0B1120;
  --badge-info-text:      #0B1120;
  --badge-secondary-text: #0B1120;

  --focus-ring-color: #5B8DD6;

  --body-bg:        var(--surface-base);
  --body-color:     var(--text-primary);
  --card-bg:        var(--surface-raised);
  --card-border:    var(--border-standard);
  --border-color:   var(--border-standard);
  --navbar-bg:      var(--surface-raised);
  --navbar-color:   var(--text-primary);
  --footer-bg:      var(--surface-base);
  --input-bg:       var(--surface-raised);
  --input-border:   var(--border-standard);
  --input-focus-border: var(--focus-ring-color);
  --dropdown-bg:    var(--surface-overlay);
  --table-stripe:   #232F42;
  --table-hover:    #2C3A4F;
  --setting-name:   var(--link-color);
  --setting-value:  var(--text-primary);
  --setting-description: var(--text-secondary);
}

/* ----- HACKER (deep terminal, green accent) ----- */
[data-theme="hacker"] {
  --surface-deep:        #010409;
  --surface-base:        #0D1117;
  --surface-raised:      #161B22;
  --surface-overlay:     #21262D;

  --surface-interactive:          #3FB950;
  --surface-interactive-hover:    #56D364;
  --surface-interactive-active:   #2EA043;
  --surface-interactive-disabled: #2C4632;

  --text-primary:   #E6EDF3;
  --text-secondary: #9DA7B3;
  --text-muted:     #6E7681;
  --text-inverse:   #0D1117;
  --on-primary:     #0D1117;

  --link-color:   #58A6FF;
  --link-hover:   #79C0FF;
  --link-visited: #D2A8FF;

  --border-subtle:   #161B22;
  --border-standard: #30363D;
  --border-emphasis: #444C56;

  --ctf-primary:   #3FB950;
  --ctf-secondary: #58A6FF;
  --ctf-success:   #3FB950;
  --ctf-warning:   #D8A23A;
  --ctf-danger:    #F0564B;
  --ctf-info:      #58A6FF;
  --ctf-dark:      #010409;
  --ctf-light:     #161B22;

  --on-success: #0D1117;
  --on-warning: #0D1117;
  --on-danger:  #0D1117;
  --on-info:    #0D1117;
  --on-secondary: #0D1117;

  --semantic-success-bg:     #0E2916;
  --semantic-success-text:   #57D070;
  --semantic-success-border: #2C6B3A;
  --semantic-warning-bg:     #271F0F;
  --semantic-warning-text:   #E0B252;
  --semantic-warning-border: #6E5520;
  --semantic-danger-bg:      #2B1412;
  --semantic-danger-text:    #F47A72;
  --semantic-danger-border:  #7A2E2A;
  --semantic-info-bg:        #0F2138;
  --semantic-info-text:      #74B6FF;
  --semantic-info-border:    #2A4E7A;

  --badge-primary-text:   #0D1117;
  --badge-success-text:   #0D1117;
  --badge-warning-text:   #0D1117;
  --badge-danger-text:    #0D1117;
  --badge-info-text:      #0D1117;
  --badge-secondary-text: #0D1117;

  --focus-ring-color: #3FB950;

  --body-bg:        var(--surface-base);
  --body-color:     var(--text-primary);
  --card-bg:        var(--surface-raised);
  --card-border:    var(--border-standard);
  --border-color:   var(--border-standard);
  --navbar-bg:      var(--surface-raised);
  --navbar-color:   var(--text-primary);
  --footer-bg:      var(--surface-base);
  --input-bg:       var(--surface-raised);
  --input-border:   var(--border-standard);
  --input-focus-border: var(--focus-ring-color);
  --dropdown-bg:    var(--surface-overlay);
  --table-stripe:   #1B212A;
  --table-hover:    #232B35;
  --setting-name:   var(--link-color);
  --setting-value:  var(--text-primary);
  --setting-description: var(--text-secondary);
}

/* ----- CYBERPUNK (dark, neon magenta + cyan, kept legible) ----- */
[data-theme="cyberpunk"] {
  --surface-deep:        #06060C;
  --surface-base:        #0A0A12;
  --surface-raised:      #15101F;
  --surface-overlay:     #211733;

  --surface-interactive:          #FF4DA6;
  --surface-interactive-hover:    #FF6FB8;
  --surface-interactive-active:   #E0398C;
  --surface-interactive-disabled: #4A2C3E;

  --text-primary:   #F5F0FF;
  --text-secondary: #C3B6DA;
  --text-muted:     #8478A0;
  --text-inverse:   #0A0A12;
  --on-primary:     #0A0A12;

  --link-color:   #3FD0E0;
  --link-hover:   #6EDEEC;
  --link-visited: #C9A4F0;

  --border-subtle:   #1B1429;
  --border-standard: #3A2A5A;
  --border-emphasis: #5A3F86;

  --ctf-primary:   #FF4DA6;
  --ctf-secondary: #3FD0E0;
  --ctf-success:   #3FB950;
  --ctf-warning:   #D8A23A;
  --ctf-danger:    #F0564B;
  --ctf-info:      #58A6FF;
  --ctf-dark:      #06060C;
  --ctf-light:     #15101F;

  --on-success: #0A0A12;
  --on-warning: #0A0A12;
  --on-danger:  #0A0A12;
  --on-info:    #0A0A12;
  --on-secondary: #0A0A12;

  --semantic-success-bg:     #0E2417;
  --semantic-success-text:   #57D070;
  --semantic-success-border: #2C6B3A;
  --semantic-warning-bg:     #271E12;
  --semantic-warning-text:   #E0B252;
  --semantic-warning-border: #6E5520;
  --semantic-danger-bg:      #2C1418;
  --semantic-danger-text:    #F47A72;
  --semantic-danger-border:  #7A2E2A;
  --semantic-info-bg:        #11203A;
  --semantic-info-text:      #74B6FF;
  --semantic-info-border:    #2A4E7A;

  --badge-primary-text:   #0A0A12;
  --badge-success-text:   #0A0A12;
  --badge-warning-text:   #0A0A12;
  --badge-danger-text:    #0A0A12;
  --badge-info-text:      #0A0A12;
  --badge-secondary-text: #0A0A12;

  --focus-ring-color: #FF4DA6;

  --body-bg:        var(--surface-base);
  --body-color:     var(--text-primary);
  --card-bg:        var(--surface-raised);
  --card-border:    var(--border-standard);
  --border-color:   var(--border-standard);
  --navbar-bg:      var(--surface-raised);
  --navbar-color:   var(--text-primary);
  --footer-bg:      var(--surface-base);
  --input-bg:       var(--surface-raised);
  --input-border:   var(--border-standard);
  --input-focus-border: var(--focus-ring-color);
  --dropdown-bg:    var(--surface-overlay);
  --table-stripe:   #1B1429;
  --table-hover:    #271B3D;
  --setting-name:   var(--link-color);
  --setting-value:  var(--text-primary);
  --setting-description: var(--text-secondary);
}

/* ----- LIGHT (light surfaces, forge/steel accents) ----- */
[data-theme="light"] {
  --surface-deep:        #E9EDF2;
  --surface-base:        #F4F6F9;
  --surface-raised:      #FFFFFF;
  --surface-overlay:     #FFFFFF;

  --surface-interactive:          #A85A28;   /* forge, AA white-on-fill */
  --surface-interactive-hover:    #93501F;
  --surface-interactive-active:   #7E441A;
  --surface-interactive-disabled: #D8C3B2;

  --text-primary:   #1A1F2B;
  --text-secondary: #516074;   /* AA on white AND #F4F6F9 */
  --text-muted:     #6B7689;
  --text-inverse:   #FFFFFF;
  --on-primary:     #FFFFFF;

  --link-color:   #1D5FB8;     /* AA on white (#3b82f6 is ~3.7 — too low) */
  --link-hover:   #164a91;
  --link-visited: #6B3FA0;

  --border-subtle:   #EEF1F5;
  --border-standard: #E2E8F0;
  --border-emphasis: #CBD5E1;

  --ctf-primary:   #A85A28;
  --ctf-secondary: #516074;
  --ctf-success:   #1A7F37;
  --ctf-warning:   #9A6700;
  --ctf-danger:    #C42B1C;
  --ctf-info:      #1D5FB8;
  --ctf-dark:      #1A1F2B;
  --ctf-light:     #F4F6F9;

  /* On-accent text: white reads on these darker light-theme accents */
  --on-success: #FFFFFF;
  --on-warning: #FFFFFF;
  --on-danger:  #FFFFFF;
  --on-info:    #FFFFFF;
  --on-secondary: #FFFFFF;

  --semantic-success-bg:     #E7F6EC;
  --semantic-success-text:   #145C28;
  --semantic-success-border: #1A7F37;
  --semantic-warning-bg:     #FBF3DD;
  --semantic-warning-text:   #6E4A00;
  --semantic-warning-border: #9A6700;
  --semantic-danger-bg:      #FBE9E7;
  --semantic-danger-text:    #9C2317;
  --semantic-danger-border:  #C42B1C;
  --semantic-info-bg:        #E6EFFA;
  --semantic-info-text:      #15457F;
  --semantic-info-border:    #1D5FB8;

  --badge-primary-text:   #FFFFFF;
  --badge-success-text:   #FFFFFF;
  --badge-warning-text:   #FFFFFF;
  --badge-danger-text:    #FFFFFF;
  --badge-info-text:      #FFFFFF;
  --badge-secondary-text: #FFFFFF;

  --focus-ring-color: #A85A28;

  --body-bg:        var(--surface-base);
  --body-color:     var(--text-primary);
  --card-bg:        var(--surface-raised);
  --card-border:    var(--border-standard);
  --border-color:   var(--border-standard);
  --navbar-bg:      var(--surface-raised);
  --navbar-color:   var(--text-primary);
  --footer-bg:      var(--surface-deep);
  --input-bg:       var(--surface-raised);
  --input-border:   var(--border-emphasis);
  --input-focus-border: var(--focus-ring-color);
  --dropdown-bg:    var(--surface-raised);
  --table-stripe:   #F4F6F9;
  --table-hover:    #EAEEF3;
  --setting-name:   var(--link-color);
  --setting-value:  var(--text-primary);
  --setting-description: var(--text-secondary);
}


/* ============================================================================
   2. COMPONENT LAYER  (token-based, styled once)
   ============================================================================ */

/* ----- Base / typography ----- */
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}
@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--body-bg);
  color: var(--body-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding-bottom: 60px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

main { flex: 1 0 auto; }
.container { margin-bottom: 20px; }

/* Monospace family for code / chips / tags / pre */
code, pre, kbd, samp, .chip, .monospace, .setting-value-display code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Uppercase muted section label helper (sudofoundry style) */
.section-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ----- Links ----- */
a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
a:visited {
  color: var(--link-visited);
}
/* Keep nav/dropdown/button anchors inheriting their component color */
.navbar a, .nav-link, .dropdown-item, .btn,
.nav-tabs .nav-link, .page-link, .list-group-item-action,
.breadcrumb-item a {
  color: inherit;
}

/* ----- Global focus visibility (WCAG 2.4.7) ----- */
:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius: 2px;
}
a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* ----- Navbar (theme-driven, no bg-dark dependence) ----- */
.navbar {
  background-color: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--border-standard);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.navbar-brand {
  color: var(--text-primary) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.navbar-nav .nav-link {
  color: var(--text-secondary) !important;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  transition: color 0.2s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
  color: var(--text-primary) !important;
}
.navbar-nav { white-space: nowrap; }
/* Neutralize Bootstrap's dark navbar toggler so it tracks the theme */
.navbar-toggler {
  border-color: var(--border-standard);
}

/* ----- Cards ----- */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-standard);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  box-shadow: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.card-header {
  background-color: var(--surface-overlay);
  border-bottom: 1px solid var(--border-standard);
  color: var(--text-primary);
  font-weight: 600;
}
.card-body { color: var(--text-primary); padding: 1.25rem; }
.card-footer {
  background-color: var(--surface-overlay);
  border-top: 1px solid var(--border-standard);
  color: var(--text-secondary);
}
.card-title { color: var(--text-primary); }
.card-text { color: var(--text-secondary); }

.stats-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.stats-card:hover { transform: translateY(-2px); }

/* ----- Tables ----- */
.table {
  color: var(--text-primary);
  --bs-table-bg: var(--card-bg);
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-standard);
  --bs-table-striped-bg: var(--table-stripe);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: var(--table-hover);
  --bs-table-hover-color: var(--text-primary);
}
.table th {
  border-top: none;
  font-weight: 600;
  color: var(--text-primary);
  background-color: var(--surface-overlay);
  border-bottom: 1px solid var(--border-emphasis);
}
.table td {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}
.table-responsive { border-radius: 8px; }
.table-responsive::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-track { background: var(--surface-base); }
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--border-emphasis);
  border-radius: 3px;
}

/* ----- Buttons ----- */
.btn {
  border-radius: 8px;
  font-weight: 500;
}
.btn-primary {
  background-color: var(--surface-interactive);
  border-color: var(--surface-interactive);
  color: var(--on-primary);
}
.btn-primary:hover {
  background-color: var(--surface-interactive-hover);
  border-color: var(--surface-interactive-hover);
  color: var(--on-primary);
}
.btn-primary:focus,
.btn-primary:focus-visible {
  background-color: var(--surface-interactive-hover);
  border-color: var(--surface-interactive-hover);
  color: var(--on-primary);
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
}
.btn-primary:active,
.btn-primary.active {
  background-color: var(--surface-interactive-active) !important;
  border-color: var(--surface-interactive-active) !important;
  color: var(--on-primary) !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--surface-interactive-disabled);
  border-color: var(--surface-interactive-disabled);
  color: var(--on-primary);
  opacity: 0.65;
}

.btn-secondary {
  background-color: var(--surface-raised);
  border-color: var(--border-emphasis);
  color: var(--text-primary);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--surface-overlay);
  border-color: var(--border-emphasis);
  color: var(--text-primary);
}

.btn-success {
  background-color: var(--ctf-success);
  border-color: var(--ctf-success);
  color: var(--on-success);
}
.btn-success:hover { filter: brightness(1.08); color: var(--on-success); }

.btn-danger {
  background-color: var(--ctf-danger);
  border-color: var(--ctf-danger);
  color: var(--on-danger);
}
.btn-danger:hover { filter: brightness(1.08); color: var(--on-danger); }

.btn-warning {
  background-color: var(--ctf-warning);
  border-color: var(--ctf-warning);
  color: var(--on-warning);
}
.btn-warning:hover { filter: brightness(1.08); color: var(--on-warning); }

.btn-info {
  background-color: var(--ctf-info);
  border-color: var(--ctf-info);
  color: var(--on-info);
}
.btn-info:hover { filter: brightness(1.08); color: var(--on-info); }

/* Outline buttons */
.btn-outline-primary {
  color: var(--surface-interactive);
  border-color: var(--surface-interactive);
  background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--surface-interactive);
  border-color: var(--surface-interactive);
  color: var(--on-primary);
}
.btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--border-emphasis);
  background-color: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--surface-overlay);
  border-color: var(--border-emphasis);
  color: var(--text-primary);
}

/* ----- Forms / inputs (THE INPUT BUG FIX: surface bg, NOT button color) ----- */
.form-control,
.form-select {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--input-bg);
  border-color: var(--input-focus-border);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
}
.form-control::placeholder { color: var(--text-secondary); opacity: 1; }
.form-control:disabled,
.form-select:disabled {
  background-color: var(--surface-base);
  color: var(--text-muted);
  opacity: 0.7;
}
.form-label { color: var(--text-primary); font-weight: 500; }
.form-text { color: var(--text-secondary); }

.input-group-text {
  background-color: var(--surface-overlay);
  border: 1px solid var(--input-border);
  color: var(--text-secondary);
}

.form-check-input {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
}
.form-check-input:checked {
  background-color: var(--surface-interactive);
  border-color: var(--surface-interactive);
}
.form-check-input:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
}
.form-check-label { color: var(--text-primary); }

/* ----- Dropdowns ----- */
.dropdown-menu,
.dropdown-menu-dark {
  background-color: var(--dropdown-bg);
  border: 1px solid var(--border-standard);
  border-radius: 8px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
}
.dropdown-item,
.dropdown-menu-dark .dropdown-item {
  color: var(--text-primary);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus {
  background-color: var(--surface-interactive);
  color: var(--on-primary);
}
.dropdown-header { color: var(--text-secondary); }
.dropdown-divider { border-top-color: var(--border-standard); }
.dropdown-item-text { color: var(--text-secondary); }

/* ----- Modals ----- */
.modal-content {
  background-color: var(--surface-overlay);
  border: 1px solid var(--border-standard);
  border-radius: 8px;
  color: var(--text-primary);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
}
.modal-header { border-bottom: 1px solid var(--border-standard); }
.modal-footer { border-top: 1px solid var(--border-standard); }
.modal-title { color: var(--text-primary); }

/* ----- Alerts (semantic tokens) ----- */
.alert { border: 1px solid transparent; border-radius: 8px; }
.alert-success {
  background-color: var(--semantic-success-bg);
  border-color: var(--semantic-success-border);
  color: var(--semantic-success-text);
}
.alert-warning {
  background-color: var(--semantic-warning-bg);
  border-color: var(--semantic-warning-border);
  color: var(--semantic-warning-text);
}
.alert-danger {
  background-color: var(--semantic-danger-bg);
  border-color: var(--semantic-danger-border);
  color: var(--semantic-danger-text);
}
.alert-info {
  background-color: var(--semantic-info-bg);
  border-color: var(--semantic-info-border);
  color: var(--semantic-info-text);
}
.alert-link { color: inherit; font-weight: 600; }

/* ----- Badges (AA text on each fill via --badge-*-text) ----- */
.badge {
  font-weight: 600;
  font-size: 0.8em;
  padding: 0.35em 0.6em;
  border-radius: 6px;
  line-height: 1.2;
}
.badge.bg-primary   { background-color: var(--surface-interactive) !important; color: var(--badge-primary-text) !important; }
.badge.bg-success   { background-color: var(--ctf-success) !important;          color: var(--badge-success-text) !important; }
.badge.bg-warning   { background-color: var(--ctf-warning) !important;          color: var(--badge-warning-text) !important; }
.badge.bg-danger    { background-color: var(--ctf-danger) !important;           color: var(--badge-danger-text) !important; }
.badge.bg-info      { background-color: var(--ctf-info) !important;             color: var(--badge-info-text) !important; }
.badge.bg-secondary { background-color: var(--ctf-secondary) !important;        color: var(--badge-secondary-text) !important; }
.badge.bg-dark      { background-color: var(--surface-deep) !important;         color: var(--text-primary) !important; }
.badge.bg-light     { background-color: var(--surface-overlay) !important;      color: var(--text-primary) !important; }

/* BS4-legacy badge aliases (so older markup still renders correctly) */
.badge-primary   { background-color: var(--surface-interactive) !important; color: var(--badge-primary-text) !important; }
.badge-success   { background-color: var(--ctf-success) !important;          color: var(--badge-success-text) !important; }
.badge-warning   { background-color: var(--ctf-warning) !important;          color: var(--badge-warning-text) !important; }
.badge-danger    { background-color: var(--ctf-danger) !important;           color: var(--badge-danger-text) !important; }
.badge-info      { background-color: var(--ctf-info) !important;             color: var(--badge-info-text) !important; }
.badge-secondary { background-color: var(--ctf-secondary) !important;        color: var(--badge-secondary-text) !important; }

/* ----- Pagination ----- */
.pagination { --bs-pagination-border-radius: 8px; }
.page-link {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-standard);
  color: var(--text-primary);
}
.page-link:hover {
  background-color: var(--table-hover);
  border-color: var(--border-emphasis);
  color: var(--text-primary);
}
.page-link:focus {
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
  color: var(--text-primary);
}
.page-item.active .page-link {
  background-color: var(--surface-interactive);
  border-color: var(--surface-interactive);
  color: var(--on-primary);
}
.page-item.disabled .page-link {
  background-color: var(--surface-base);
  border-color: var(--border-standard);
  color: var(--text-muted);
}

/* ----- List group ----- */
.list-group-item {
  background-color: var(--card-bg);
  border-color: var(--border-standard);
  color: var(--text-primary);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--table-hover);
  color: var(--text-primary);
}
.list-group-item.active {
  background-color: var(--surface-interactive);
  border-color: var(--surface-interactive);
  color: var(--on-primary);
}

/* ----- Nav tabs ----- */
.nav-tabs { border-bottom: 1px solid var(--border-standard); }
.nav-tabs .nav-link {
  color: var(--text-secondary);
  background-color: transparent;
  border: 1px solid transparent;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: var(--text-primary);
  border-color: var(--border-standard) var(--border-standard) transparent;
}
.nav-tabs .nav-link.active {
  color: var(--text-primary);
  background-color: var(--card-bg);
  border-color: var(--border-standard) var(--border-standard) var(--card-bg);
}
.nav-pills .nav-link { color: var(--text-secondary); border-radius: 8px; }
.nav-pills .nav-link.active {
  background-color: var(--surface-interactive);
  color: var(--on-primary);
}

/* ----- Progress ----- */
.progress {
  background-color: var(--surface-overlay);
  border-radius: 8px;
}
.progress-bar {
  background-color: var(--surface-interactive);
  color: var(--on-primary);
}

/* ----- Breadcrumb ----- */
.breadcrumb { background-color: transparent; }
.breadcrumb-item { color: var(--text-secondary); }
.breadcrumb-item.active { color: var(--text-primary); }
.breadcrumb-item a { color: var(--link-color); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

/* ----- Accordion ----- */
.accordion-item {
  background-color: var(--card-bg);
  border-color: var(--border-standard);
  color: var(--text-primary);
}
.accordion-button {
  background-color: var(--card-bg);
  color: var(--text-primary);
}
.accordion-button:not(.collapsed) {
  background-color: var(--surface-overlay);
  color: var(--text-primary);
}
.accordion-button:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
}
.accordion-body { background-color: var(--card-bg); color: var(--text-primary); }

/* ----- Code / pre / chip pill ----- */
pre {
  background-color: var(--surface-deep);
  color: var(--text-primary);
  border: 1px solid var(--border-standard);
  border-radius: 8px;
  padding: 1rem;
}
code {
  background-color: var(--surface-deep);
  color: var(--ctf-success);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 0.125rem 0.35rem;
  font-size: 0.875em;
}
pre code { background: none; border: none; padding: 0; color: inherit; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background-color: var(--surface-overlay);
  color: var(--text-secondary);
  border: 1px solid var(--border-standard);
  border-radius: 6px;
  padding: 0.2em 0.6em;
  font-size: 0.8em;
  font-weight: 500;
}

/* ----- Footer ----- */
.footer {
  position: relative;
  margin-top: auto;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
  background-color: var(--footer-bg);
  border-top: 1px solid var(--border-standard);
  color: var(--text-secondary);
}

/* ----- Modal / close button visibility in dark themes ----- */
.btn-close {
  filter: var(--btn-close-filter, none);
}
[data-theme="dark"] .btn-close,
[data-theme="professional"] .btn-close,
[data-theme="hacker"] .btn-close,
[data-theme="cyberpunk"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(1.6);
}


/* ============================================================================
   BOOTSTRAP UTILITY MAPPING  (bg-* / text-* -> tokens, with on-color text)
   ============================================================================ */
.bg-primary   { background-color: var(--surface-interactive) !important; color: var(--on-primary) !important; }
.bg-secondary { background-color: var(--ctf-secondary) !important;        color: var(--on-secondary) !important; }
.bg-success   { background-color: var(--ctf-success) !important;          color: var(--on-success) !important; }
.bg-danger    { background-color: var(--ctf-danger) !important;           color: var(--on-danger) !important; }
.bg-warning   { background-color: var(--ctf-warning) !important;          color: var(--on-warning) !important; }
.bg-info      { background-color: var(--ctf-info) !important;             color: var(--on-info) !important; }
.bg-dark      { background-color: var(--surface-deep) !important;         color: var(--text-primary) !important; }
.bg-light     { background-color: var(--surface-overlay) !important;      color: var(--text-primary) !important; }
.bg-white     { background-color: var(--card-bg) !important;              color: var(--text-primary) !important; }
.bg-body      { background-color: var(--body-bg) !important;              color: var(--text-primary) !important; }

.text-primary   { color: var(--surface-interactive) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-success   { color: var(--semantic-success-text) !important; }
.text-danger    { color: var(--semantic-danger-text) !important; }
.text-warning   { color: var(--semantic-warning-text) !important; }
.text-info      { color: var(--semantic-info-text) !important; }
.text-muted     { color: var(--text-secondary) !important; }  /* upgrade muted -> readable secondary */
.text-dark      { color: var(--text-primary) !important; }
.text-light     { color: var(--text-secondary) !important; }
.text-white     { color: var(--text-primary) !important; }
.text-body      { color: var(--text-primary) !important; }

/* Spinner / status helpers */
.spinner-border, .spinner-grow { color: var(--surface-interactive); }
.status-healthy   { color: var(--semantic-success-text); }
.status-unhealthy { color: var(--semantic-danger-text); }
.status-warning   { color: var(--semantic-warning-text); }

/* Selection */
::selection      { background-color: var(--surface-interactive); color: var(--on-primary); }
::-moz-selection { background-color: var(--surface-interactive); color: var(--on-primary); }


/* ============================================================================
   APP-SPECIFIC HELPERS  (token-based, theme-agnostic)
   ============================================================================ */
.priority-section {
  border: 1px solid var(--border-standard);
  background-color: var(--card-bg);
  border-radius: 8px;
}
.priority-section.system-security {
  border-color: var(--ctf-warning);
}
.priority-section .section-header {
  background-color: var(--surface-overlay);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-standard);
}
.category-header {
  background-color: var(--surface-overlay);
  color: var(--text-primary);
}

.setting-card .card-title {
  font-size: 0.9rem;
  line-height: 1.2;
  word-break: break-word;
  hyphens: auto;
  color: var(--text-primary);
}
.setting-card .card-body { padding: 0.75rem; color: var(--text-primary); }
.setting-card .card-text { color: var(--text-secondary); }
.setting-card .card-footer { color: var(--text-secondary); }
.setting-card .btn-group-sm .btn { padding: 0.15rem 0.25rem; font-size: 0.75rem; }
.setting-card .d-flex { gap: 0.5rem; }
.setting-name  { color: var(--setting-name); font-weight: 500; }
.setting-value { color: var(--setting-value); }
.setting-value-display code {
  background-color: var(--surface-deep);
  color: var(--ctf-success);
  border: 1px solid var(--border-standard);
  padding: 0.25rem 0.5rem;
}

/* Backup/overview cards — neutral surface, no hardcoded gradients */
.stats-card.api-backups,    .backup-card.api-backups,
.stats-card.volume-snapshots, .backup-card.volume-snapshots,
.stats-card.successful-api, .backup-card.successful-api,
.stats-card.ctfd-status,    .backup-card.ctfd-status {
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-standard);
}
.backup-stats-card,
.backup-overview-card {
  border: 1px solid var(--border-standard);
  transition: transform 0.2s ease;
}
.backup-stats-card:hover,
.backup-overview-card:hover { transform: translateY(-2px); }


/* ============================================================================
   THEME TOGGLE SWITCH (legacy widget, token-based)
   ============================================================================ */
.theme-toggle { position: relative; display: inline-block; }
.theme-toggle input { opacity: 0; width: 0; height: 0; }
.theme-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  background-color: var(--border-emphasis);
  border-radius: 24px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
.theme-switch:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: var(--text-primary);
  border-radius: 50%;
  transition: transform 0.3s ease;
}
input:checked + .theme-switch { background-color: var(--surface-interactive); }
input:checked + .theme-switch:before { transform: translateX(26px); }


/* ============================================================================
   UTILITIES & MISC
   ============================================================================ */
.login-container { min-height: 80vh; display: flex; align-items: center; }
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cursor-pointer { cursor: pointer; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.3s ease-in; }


/* ============================================================================
   NO-FLASH EARLY THEME LOADING
   Applied via html[data-theme-loading] before JS runs. Matches each theme's
   body background + primary text so there is no white flash on first paint.
   ============================================================================ */
html[data-theme-loading="light"]        { background-color: #F4F6F9; }
html[data-theme-loading="light"] body        { --surface-base: #F4F6F9; --body-bg: #F4F6F9; --text-primary: #1A1F2B; color: #1A1F2B; }
html[data-theme-loading="dark"]         { background-color: #0F172A; }
html[data-theme-loading="dark"] body         { --surface-base: #0F172A; --body-bg: #0F172A; --text-primary: #F1F5F9; color: #F1F5F9; }
html[data-theme-loading="professional"] { background-color: #131720; }
html[data-theme-loading="professional"] body { --surface-base: #131720; --body-bg: #131720; --text-primary: #D5DCE6; color: #D5DCE6; }
html[data-theme-loading="hacker"]       { background-color: #0D1117; }
html[data-theme-loading="hacker"] body       { --surface-base: #0D1117; --body-bg: #0D1117; --text-primary: #E6EDF3; color: #E6EDF3; }
html[data-theme-loading="cyberpunk"]    { background-color: #0A0A12; }
html[data-theme-loading="cyberpunk"] body    { --surface-base: #0A0A12; --body-bg: #0A0A12; --text-primary: #F5F0FF; color: #F5F0FF; }


/* ----- Smooth theme transition ----- */
[data-theme] body,
[data-theme] .card,
[data-theme] .navbar,
[data-theme] .table,
[data-theme] .modal-content,
[data-theme] .dropdown-menu,
[data-theme] .form-control,
[data-theme] .form-select,
[data-theme] .btn {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ----- Print ----- */
@media print {
  .navbar, .footer, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}