/* =============================================================
   BeYouWorld — Global Theme v2
   Bootstrap 5 + Custom Design System
   ============================================================= */

/* ─── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ─── CSS Custom Properties ──────────────────────────────────── */
:root {
  /* Backgrounds */
  --byw-bg:           #0D0F14;
  --byw-surface:      #161B27;
  --byw-surface-2:    #1E2436;
  --byw-surface-3:    #252B3B;
  --byw-border:       #2E3650;

  /* Accents */
  --byw-accent:       #6C63FF;
  --byw-accent-hover: #5A52D5;
  /* Accent as TEXT needs to be lighter than accent as a BACKGROUND. #6C63FF
     reads 3.27:1 on surface-3, below the 4.5 body text needs, but white on
     that same #6C63FF is 4.32:1 and fine for a button. Lightening one token
     for both would fix the link and break the button, so they are separate. */
  --byw-accent-text:  #8982FF;   /* 4.51:1 on surface-3 */
  --byw-teal:         #00D4AA;
  --byw-gold:         #F5C842;

  /* Text */
  --byw-text:         #EDF0F7;
  --byw-text-muted:   #9AA2B4;   /* 5.51:1 on surface-3, was 4.58 */
  --byw-text-dim:     #8C96B3;   /* 4.79:1 on surface-3, was 2.27 and failed everywhere */

  /* Status */
  --byw-success:      #22D37A;
  --byw-warning:      #F5A623;
  --byw-danger:       #FF6B83;   /* 5.17:1 on surface-3, was 4.38 */
  --byw-info:         #3DB8F5;

  /* Stat colors */
  --stat-mana:        #9B8FFF;
  --stat-wellness:    #22D37A;
  --stat-energy:      #3DB8F5;
  --stat-hygiene:     #00D4AA;
  --stat-reputation:  #F5C842;
  --stat-mood:        #FF7BAC;
  --stat-social:      #F5A623;
  --stat-dedication:  #6C63FF;

  /* Bootstrap 5 variable overrides */
  --bs-body-bg:                var(--byw-bg);
  --bs-body-color:             var(--byw-text);
  --bs-border-color:           var(--byw-border);
  --bs-card-bg:                var(--byw-surface);
  --bs-card-border-color:      var(--byw-border);
  --bs-card-border-radius:     12px;
  --bs-modal-bg:               var(--byw-surface);
  --bs-modal-border-color:     var(--byw-border);
  --bs-link-color:             var(--byw-accent);
  --bs-link-hover-color:       var(--byw-accent-hover);
  --bs-primary:                var(--byw-accent);
  --bs-primary-rgb:            108, 99, 255;
  --bs-secondary-rgb:          30, 36, 54;
  --bs-table-bg:               transparent;
  --bs-table-border-color:     var(--byw-border);
  --bs-table-striped-bg:       rgba(30, 36, 54, 0.5);
  --bs-table-hover-bg:         rgba(108, 99, 255, 0.06);
  --bs-dropdown-bg:            var(--byw-surface-2);
  --bs-dropdown-border-color:  var(--byw-border);
  --bs-dropdown-link-color:    var(--byw-text);
  --bs-dropdown-link-hover-bg: var(--byw-surface-3);
  --bs-dropdown-link-hover-color: var(--byw-text);
}

/* ─── Base ───────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--byw-bg) !important;
  background-image: none !important;
  color: var(--byw-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ─── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  font-family: 'Outfit', sans-serif;
  color: var(--byw-text);
}

h1, .h1 { font-size: 2rem;    font-weight: 700; }
h2, .h2 { font-size: 1.5rem;  font-weight: 700; }
h3, .h3 { font-size: 1.25rem; font-weight: 600; }
h4, .h4 { font-size: 1rem;    font-weight: 600; letter-spacing: 0.04em; }

a             { color: var(--byw-accent-text); text-decoration: none; }
a:hover       { color: var(--byw-accent-hover); }

p { color: var(--byw-text); }

small, .small { color: var(--byw-text-muted); font-size: 0.8125rem; }

/* ─── Environment Banner ─────────────────────────────────────── */
.env-top-banner {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 0;
}
.env-top-banner-local { background-color: var(--byw-success); color: #0D0F14; }
.env-top-banner-dev   { background-color: var(--byw-warning); color: #0D0F14; }

.env-badge {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: middle;
  margin-left: 6px;
}
.env-badge-local { background: var(--byw-success); color: #0D0F14; }
.env-badge-dev   { background: var(--byw-warning); color: #0D0F14; }

/* ─── Navbar ─────────────────────────────────────────────────── */
.byw-navbar {
  background-color: var(--byw-surface);
  border-bottom: 1px solid var(--byw-border);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
  padding: 0 1.5rem;
  min-height: 64px;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.byw-navbar .navbar-brand {
  padding: 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.byw-navbar .navbar-brand .byw-logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--byw-text);
  letter-spacing: -0.02em;
}

.byw-navbar .navbar-brand .byw-logo-dot {
  color: var(--byw-gold);
}

.byw-navbar .nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--byw-text-muted);
  padding: 1.25rem 0.875rem;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.byw-navbar .nav-link:hover,
.byw-navbar .nav-link:focus {
  color: var(--byw-text);
  border-bottom-color: var(--byw-accent);
}

.byw-navbar .nav-link.active {
  color: var(--byw-text);
  border-bottom-color: var(--byw-accent);
}

.byw-navbar .dropdown-toggle::after {
  border-color: currentColor transparent transparent;
  opacity: 0.6;
}

.byw-navbar .dropdown-menu {
  background-color: var(--byw-surface-2);
  border: 1px solid var(--byw-border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  padding: 0.5rem;
  margin-top: 0;
  min-width: 180px;
}

.byw-navbar .dropdown-item {
  color: var(--byw-text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: background 0.1s ease, color 0.1s ease;
}

.byw-navbar .dropdown-item:hover,
.byw-navbar .dropdown-item:focus {
  background-color: var(--byw-surface-3);
  color: var(--byw-text);
}

.byw-navbar .dropdown-divider {
  border-color: var(--byw-border);
  margin: 0.375rem 0;
}

.byw-navbar .navbar-toggler {
  border: 1px solid var(--byw-border);
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
}

.byw-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28237,240,247,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px) {
  .byw-navbar { padding: 0 1rem; min-height: 56px; }

  .byw-navbar .nav-link {
    padding: 0.5rem 0.75rem;
    border-bottom: none;
    border-left: 3px solid transparent;
  }

  .byw-navbar .nav-link:hover,
  .byw-navbar .nav-link.active {
    border-bottom: none;
    border-left-color: var(--byw-accent);
  }

  .byw-navbar .navbar-collapse {
    background-color: var(--byw-surface);
    margin: 0 -1rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--byw-border);
  }
}

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  background-color: var(--byw-surface);
  border: 1px solid var(--byw-border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  color: var(--byw-text);
}

.card-header {
  background-color: var(--byw-surface-2);
  border-bottom: 1px solid var(--byw-border);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  color: var(--byw-text);
  border-radius: 11px 11px 0 0 !important;
  padding: 1rem 1.25rem;
}

.card-footer {
  background-color: var(--byw-surface-2);
  border-top: 1px solid var(--byw-border);
  border-radius: 0 0 11px 11px !important;
}

.card-body { padding: 1.25rem; }

/* The wrapper a profile block puts around its content. It was .block-panel, whose only rule
   -- margin-bottom: 0 -- lives in v2/stylesheets/style.css; WEB-11 renamed the element to a
   card and the class went with it, so these 14 wrappers picked up a bottom margin they never
   had. The legacy item-tracking page still uses .block-panel, so that rule stays where it is. */
.block-card { margin-bottom: 0; }

/* Custom card class for pages that haven't migrated yet */
.byw-card {
  background-color: var(--byw-surface);
  border: 1px solid var(--byw-border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.byw-card-header {
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--byw-text);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--byw-border);
}

/* Bootstrap 3 .panel → theme mapping */
.panel {
  background-color: var(--byw-surface) !important;
  border: 1px solid var(--byw-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
  color: var(--byw-text);
  overflow: hidden !important;
}

.panel-default > .panel-heading {
  background-color: var(--byw-surface-2) !important;
  border-color: var(--byw-border) !important;
  color: var(--byw-text) !important;
  border-radius: 0 !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
}

/* Custom panel heading variant used across v2 templates */
.panel-heading-fd {
  background: var(--byw-surface-2) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--byw-border) !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: 0 !important;
}
.panel-title-fd {
  color: var(--byw-text) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
}
.panel-title-fd-locked {
  color: var(--byw-danger) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
}
.panel-sub-title-fd {
  color: var(--byw-gold) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: var(--byw-border) !important;
}

.panel-body { color: var(--byw-text); padding: 1.25rem; }

.panel-title { color: var(--byw-text); font-family: 'Outfit', sans-serif; }

.panel-footer {
  background-color: var(--byw-surface-2) !important;
  border-top-color: var(--byw-border) !important;
  border-radius: 0 0 11px 11px !important;
}

.well {
  background-color: var(--byw-surface-2);
  border: 1px solid var(--byw-border);
  border-radius: 8px;
  color: var(--byw-text);
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.625rem 1.25rem;
  transition: all 0.15s ease;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--byw-accent) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none;
  text-shadow: none !important;
  padding: 0.5rem 1rem !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--byw-accent-hover) !important;
  background-image: none !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 99, 255, 0.4) !important;
  color: #fff !important;
}

.btn-secondary,
.btn-default {
  background-color: var(--byw-surface-2);
  border: 1px solid var(--byw-border);
  color: var(--byw-text);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-default:hover,
.btn-default:focus {
  background-color: var(--byw-surface-3);
  color: var(--byw-text);
  border-color: var(--byw-border);
}

.btn-danger {
  background-color: var(--byw-danger);
  color: #fff;
  border: none;
}
.btn-danger:hover {
  background-color: #e0365a;
  transform: translateY(-1px);
  color: #fff;
}

.btn-success {
  background-color: var(--byw-success);
  color: #0D0F14;
  border: none;
}
.btn-success:hover {
  background-color: #1ab868;
  color: #0D0F14;
  transform: translateY(-1px);
}

.btn-warning {
  background-color: var(--byw-warning);
  color: #0D0F14;
  border: none;
}
.btn-warning:hover {
  background-color: #e09620;
  color: #0D0F14;
}

.btn-info {
  background: var(--byw-info) !important;
  background-image: none !important;
  color: #0D0F14 !important;
  border: none !important;
  border-radius: 8px !important;
  text-shadow: none !important;
}
.btn-info:hover {
  background: #2da4de !important;
  background-image: none !important;
  color: #0D0F14 !important;
}

.btn-outline-primary {
  background-color: transparent;
  border: 1px solid var(--byw-accent);
  color: var(--byw-accent-text);
}
.btn-outline-primary:hover {
  background-color: rgba(108, 99, 255, 0.1);
  color: var(--byw-accent-text);
  border-color: var(--byw-accent);
}

.btn-sm {
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  border-radius: 6px;
}

.btn-xs {
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 5px;
}

.btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  border-radius: 10px;
}

/* Link styled button */
.btn-link {
  background: none;
  border: none;
  color: var(--byw-accent-text);
  padding: 0;
  font-weight: 500;
}
.btn-link:hover { color: var(--byw-accent-hover); text-decoration: underline; }

/* Disabled */
.btn:disabled,
.btn.disabled,
a.btn.disabled {
  opacity: 0.5;
  pointer-events: all;
  cursor: not-allowed;
  transform: none;
}

/* ─── Forms ──────────────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea {
  background-color: var(--byw-bg) !important;
  border: 1px solid var(--byw-border) !important;
  color: var(--byw-text) !important;
  border-radius: 8px !important;
  min-height: 42px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--byw-accent) !important;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2) !important;
  outline: none;
  background-color: var(--byw-bg) !important;
  color: var(--byw-text) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder { color: var(--byw-text-dim); }

/* Select option colors */
select option {
  background-color: var(--byw-surface-2);
  color: var(--byw-text);
}

label, .control-label {
  color: var(--byw-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.375rem;
}

/* Bootstrap 3 input groups */
.input-group-addon {
  background-color: var(--byw-surface-2);
  border: 1px solid var(--byw-border);
  color: var(--byw-text-muted);
}

/* Bootstrap 3 form validation states */
.has-error .form-control { border-color: var(--byw-danger) !important; }
.has-success .form-control { border-color: var(--byw-success) !important; }
.has-warning .form-control { border-color: var(--byw-warning) !important; }
.help-block { color: var(--byw-text-muted); font-size: 0.8125rem; }

/* Checkbox / radio */
.form-check-input {
  background-color: var(--byw-surface-2);
  border-color: var(--byw-border);
}
.form-check-input:checked {
  background-color: var(--byw-accent);
  border-color: var(--byw-accent);
}

/* ─── Tables ─────────────────────────────────────────────────── */
.table {
  color: var(--byw-text);
  border-color: var(--byw-border);
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--byw-text);
  border-bottom-color: var(--byw-border);
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

.table thead th,
.table > thead > tr > th {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--byw-text-muted) !important;
  border-bottom: 1px solid var(--byw-border) !important;
  border-top: none;
  padding: 0.75rem 1rem;
  background-color: var(--byw-surface-2);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
  border-top: 1px solid var(--byw-border);
  border-bottom-color: var(--byw-border);
  color: var(--byw-text);
  vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(108, 99, 255, 0.06);
  color: var(--byw-text);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(30, 36, 54, 0.5);
}

.table-wrapper {
  border: 1px solid var(--byw-border);
  border-radius: 12px;
  overflow: hidden;
}

/* Bootstrap 3 table condensed */
.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > thead > tr > th {
  padding: 0.4rem 0.75rem;
}

/* ─── Modals ─────────────────────────────────────────────────── */
.modal-content {
  --bs-modal-bg: var(--byw-surface);
  background-color: var(--byw-surface) !important;
  border: 1px solid var(--byw-border) !important;
  border-radius: 16px !important;
  color: var(--byw-text) !important;
}

.modal-header {
  background-color: var(--byw-surface-2) !important;
  border-bottom: 1px solid var(--byw-border) !important;
  border-radius: 15px 15px 0 0 !important;
  padding: 1.25rem 1.5rem;
}

.modal-header .modal-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--byw-text) !important;
  margin: 0;
}

.modal-body {
  background-color: var(--byw-surface) !important;
  color: var(--byw-text) !important;
  padding: 1.5rem;
}

.modal-footer {
  background-color: var(--byw-surface-2) !important;
  border-top: 1px solid var(--byw-border) !important;
  border-radius: 0 0 15px 15px !important;
  padding: 1rem 1.5rem;
}

.modal-backdrop {
  background-color: #000;
}

.modal-backdrop.show { opacity: 0.75; }

/* Close buttons */
.modal-header .close,
button.close {
  color: var(--byw-text-muted) !important;
  opacity: 0.7;
  font-size: 1.5rem;
  background: none;
  border: none;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  text-shadow: none;
}
.modal-header .close:hover,
button.close:hover {
  color: var(--byw-text) !important;
  opacity: 1;
}

/* Put the close control last, whatever order the markup puts it in.
   Bootstrap 3 opened a header with the close button and put the title after it,
   because .close floated right and float ignores source order. 168 buttons
   across 117 templates are written that way. Bootstrap 5 lays .modal-header out
   as a flex row instead, where source order is exactly what decides position,
   so every one of those renders as an x to the LEFT of its heading -- and on a
   header carrying anything else, such as a paragraph of warning text, the
   heading gets squeezed into a narrow column beside it.

   One rule rather than 117 edits: order moves the button to the end of the flex
   row and the auto margin pushes it to the far edge. Harmless on the handful of
   headers already written title-first, and on .btn-close, which Bootstrap 5
   already gives a margin-left of auto. */
.modal-header > .close,
.modal-header > .btn-close {
  order: 99;
  margin-inline-start: auto;
}

/* ─── bootstrap-datetimepicker 4.17 ─────────────────────────────
   A Bootstrap 3 plugin, used by about sixteen templates. It marks its open panel
   `collapse in`; Bootstrap 5 only shows `collapse show`, so the date panel stayed
   hidden and the picker opened as an empty box. Its arrows and the date/time
   switch are glyphicons, which are no longer loaded, so they are drawn here. */
.bootstrap-datetimepicker-widget .collapse.in { display: block; }

.bootstrap-datetimepicker-widget td.day { color: var(--byw-text); }
.bootstrap-datetimepicker-widget td.day.old,
.bootstrap-datetimepicker-widget td.day.new,
.bootstrap-datetimepicker-widget td.day.disabled { color: var(--byw-text-dim); }

.bootstrap-datetimepicker-widget .glyphicon::before {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.bootstrap-datetimepicker-widget .glyphicon-chevron-left::before  { content: "\2039"; font-size: 1.3em; }
.bootstrap-datetimepicker-widget .glyphicon-chevron-right::before { content: "\203A"; font-size: 1.3em; }
.bootstrap-datetimepicker-widget .glyphicon-chevron-up::before    { content: "\25B4"; }
.bootstrap-datetimepicker-widget .glyphicon-chevron-down::before  { content: "\25BE"; }
.bootstrap-datetimepicker-widget .glyphicon-time::before          { content: "Time"; font-size: 0.8em; }
.bootstrap-datetimepicker-widget .glyphicon-calendar::before      { content: "Date"; font-size: 0.8em; }

.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.6;
}
.btn-close:hover { opacity: 1; }

/* ─── Progress Bars ──────────────────────────────────────────── */
.progress {
  background-color: var(--byw-surface-3);
  border-radius: 6px;
  height: 8px;
  margin-bottom: 0;
  overflow: hidden;
}

.progress-bar {
  border-radius: 6px;
  transition: width 0.6s ease;
  background-color: var(--byw-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  white-space: nowrap;
}

/* Stat bars and level bars contain text labels — needs enough height to read */
.stats-progress,
.lep-progress {
  height: 1.625rem !important;
  width: 100% !important;
  max-width: 180px;
}

.stats-progress .progress-bar,
.lep-progress .progress-bar {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.625rem;
  justify-content: flex-end;
  padding-right: 0.375rem;
}

.stats-progress .progress-bar label,
.lep-progress .progress-bar label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  padding: 0;
  line-height: 1;
  pointer-events: none;
  /* Override col-md-12 / control-label / modal-label box styling */
  width: auto !important;
  flex: none !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  display: inline !important;
  text-align: right !important;
  white-space: nowrap;
}

/* Level bar: show label to the right of the track when fill is small */
.lep-progress {
  position: relative;
  overflow: visible !important;
}
.lep-progress .progress-bar {
  min-width: 3rem;
  overflow: visible;
}
.lep-progress .progress-bar label {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center !important;
  color: var(--byw-text) !important;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  pointer-events: none;
}

/* Default Bootstrap 3 progress bar colors */
.progress-bar-success { background-color: var(--byw-success) !important; }
.progress-bar-info    { background-color: var(--byw-info) !important; }
.progress-bar-warning { background-color: var(--byw-warning) !important; }
.progress-bar-danger  { background-color: var(--byw-danger) !important; }

/* XP / level bar */
.byw-xp-bar .progress {
  height: 14px;
  border-radius: 7px;
  border: 1px solid var(--byw-border);
}
.byw-xp-bar .progress-bar {
  background: linear-gradient(to right, var(--byw-accent), var(--byw-teal));
  box-shadow: 0 0 10px rgba(0, 212, 170, 0.35);
}

/* Per-stat colored bars */
.stat-bar-mana       .progress-bar { background-color: var(--stat-mana); }
.stat-bar-wellness   .progress-bar { background-color: var(--stat-wellness); }
.stat-bar-energy     .progress-bar { background-color: var(--stat-energy); }
.stat-bar-hygiene    .progress-bar { background-color: var(--stat-hygiene); }
.stat-bar-reputation .progress-bar { background-color: var(--stat-reputation); }
.stat-bar-mood       .progress-bar { background-color: var(--stat-mood); }
.stat-bar-social     .progress-bar { background-color: var(--stat-social); }
.stat-bar-dedication .progress-bar { background-color: var(--stat-dedication); }

/* ─── Badges & Labels ────────────────────────────────────────── */
.badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.625rem;
  border-radius: 20px;
}

/* Bootstrap 3 labels → theme */
.label {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25em 0.6em;
  border-radius: 20px;
}
.label-default  { background-color: var(--byw-surface-3); color: var(--byw-text-muted); }
.label-primary  { background-color: rgba(108, 99, 255, 0.2); color: var(--byw-accent-text); }
.label-success  { background-color: rgba(34, 211, 122, 0.2); color: var(--byw-success); }
.label-info     { background-color: rgba(61, 184, 245, 0.2); color: var(--byw-info); }
.label-warning  { background-color: rgba(245, 166, 35, 0.2); color: var(--byw-warning); }
.label-danger   { background-color: rgba(255, 77, 106, 0.2); color: var(--byw-danger); }

/* Custom badge variants */
.badge-accent { background-color: rgba(108, 99, 255, 0.15); color: var(--byw-accent-text); }
.badge-teal   { background-color: rgba(0, 212, 170, 0.15);  color: var(--byw-teal); }
.badge-gold   { background-color: rgba(245, 200, 66, 0.15); color: var(--byw-gold); }

/* ─── Nav Tabs ───────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--byw-border);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tabs .nav-link,
.nav-tabs > li > a {
  color: var(--byw-text-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 0.625rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 !important;
  background: transparent !important;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-tabs .nav-link:hover,
.nav-tabs > li > a:hover {
  color: var(--byw-text) !important;
  border-bottom-color: var(--byw-border) !important;
  background: transparent !important;
}

.nav-tabs .nav-link.active,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--byw-text) !important;
  border-bottom: 2px solid var(--byw-accent) !important;
  background: transparent !important;
}

/* Doubled class raises specificity so these win over v2/stylesheets/style.css,
   which is loaded after this file and sets `.tab-content { overflow: auto }`
   together with an asymmetric `padding: 25px 0 0 15px`. That combination gave
   every tabbed page a 16px horizontal scrollbar: the left padding pushed
   full-width children past the right edge, and `overflow: auto` turned the
   overhang into a scrollbar instead of letting it collapse.

   The load order is the underlying problem. The theme should load last so it
   can override the legacy stylesheets without specificity tricks. That is
   tracked as task 4.3. */
.tab-content.tab-content {
  padding: 1.25rem 0 0;
  overflow-x: clip;                           /* no horizontal scrollbar */
  /* --byw-surface-1 was never defined, so this declaration was invalid and the
     tab content fell back to whatever sat behind it. The surface tokens are
     --byw-surface, --byw-surface-2 and --byw-surface-3. */
  background: var(--byw-surface) !important; /* match page background */
}

/* ─── Profile bottom tabs — wrapped grid layout ──────────────── */
.profile-nav-tabs {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  border-bottom: none !important;
  gap: 3px;
  padding-bottom: 0;
}

.profile-nav-tabs > li {
  width: 182px;
  margin: 0;
  flex-shrink: 0;
}

.profile-nav-tabs > li > a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 6px 8px !important;
  border: 1px solid var(--byw-border) !important;
  border-radius: 4px !important;
  border-bottom: 1px solid var(--byw-border) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  color: var(--byw-text-muted) !important;
  background: var(--byw-surface-2) !important;
  transition: background 0.15s, color 0.15s;
}

.profile-nav-tabs > li > a:hover {
  background: var(--byw-surface-3) !important;
  color: var(--byw-text) !important;
  border-color: var(--byw-accent) !important;
}

/* BS3 initial state: active on <li> */
.profile-nav-tabs > li.active > a,
.profile-nav-tabs > li.active > a:hover,
.profile-nav-tabs > li.active > a:focus,
/* BS5 click state: active on <a> */
.profile-nav-tabs > li > a.active,
.profile-nav-tabs > li > a.active:hover,
.profile-nav-tabs > li > a.active:focus {
  background: var(--byw-surface-3) !important;
  color: var(--byw-gold) !important;
  border-color: var(--byw-gold) !important;
  border-bottom: 1px solid var(--byw-gold) !important;
}

/* Nav pills */
.nav-pills .nav-link {
  color: var(--byw-text-muted);
  background-color: var(--byw-surface-2);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.375rem 1rem;
  transition: all 0.15s ease;
}
.nav-pills .nav-link:hover        { color: var(--byw-text); background-color: var(--byw-surface-3); }
.nav-pills .nav-link.active       { background-color: var(--byw-accent); color: #fff; }

/* ─── Alerts ─────────────────────────────────────────────────── */
.alert {
  border-radius: 8px;
  font-size: 0.9375rem;
  padding: 0.875rem 1rem;
}

.alert-info    { background-color: rgba(61, 184, 245, 0.12);  border: 1px solid rgba(61, 184, 245, 0.3);  color: var(--byw-info); }
.alert-success { background-color: rgba(34, 211, 122, 0.12);  border: 1px solid rgba(34, 211, 122, 0.3);  color: var(--byw-success); }
.alert-warning { background-color: rgba(245, 166, 35, 0.12);  border: 1px solid rgba(245, 166, 35, 0.3);  color: var(--byw-warning); }
.alert-danger  { background-color: rgba(255, 77, 106, 0.12);  border: 1px solid rgba(255, 77, 106, 0.3);  color: var(--byw-danger); }

/* Status flash messages — match top spacing to bottom */
.comment-alert { margin-top: 1rem; }

/* Info/help popover icons — normalise to 16px site-wide */
img[src*="Info.png"] {
  width:  16px !important;
  height: 16px !important;
  vertical-align: middle;
}

/* Alert close button */
.alert .close {
  color: inherit;
  opacity: 0.6;
  text-shadow: none;
}
.alert .close:hover { opacity: 1; }

/* ─── Dropdowns ──────────────────────────────────────────────── */
.dropdown-menu {
  background-color: var(--byw-surface-2);
  border: 1px solid var(--byw-border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  padding: 0.5rem;
}

.dropdown-item {
  color: var(--byw-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: background 0.1s ease, color 0.1s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--byw-surface-3);
  color: var(--byw-text);
}

.dropdown-divider,
.divider { border-color: var(--byw-border); margin: 0.375rem 0; }

.dropdown-header {
  color: var(--byw-text-dim);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.375rem 1rem;
}

/* ─── Popovers & Tooltips ────────────────────────────────────── */
.popover {
  background-color: var(--byw-surface-2);
  border: 1px solid var(--byw-border);
  border-radius: 10px;
  max-width: 600px;
}

.popover-header {
  background-color: var(--byw-surface-3);
  border-bottom-color: var(--byw-border);
  color: var(--byw-text);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  border-radius: 9px 9px 0 0;
}

.popover-body,
.popover-content {
  color: var(--byw-text);
}

.popover-title {
  color: var(--byw-text);
  font-weight: 600;
  background-color: var(--byw-surface-2);
}

.tooltip-inner {
  background-color: var(--byw-surface-2);
  color: var(--byw-text);
  border: 1px solid var(--byw-border);
  border-radius: 6px;
  font-size: 0.8125rem;
}

/* ─── jstree Dark Theme Override ────────────────────────────── */

/* Base container */
.jstree-default {
  background: transparent;
  font-family: 'Inter', sans-serif;
}
.jstree-default .jstree-container-ul,
.jstree-default ul { font-size: 0.875rem; }

/* Kill the sprite on ALL icon elements (both selectors jstree uses) */
.jstree-default .jstree-icon,
.jstree-default .jstree-icon:empty {
  background-image: none !important;
  width: 22px;
  height: 22px;
  line-height: 26px;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Toggle arrows (OCL) — higher specificity via .jstree-icon.jstree-ocl ── */
.jstree-default .jstree-closed > .jstree-icon.jstree-ocl {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 5l6 5-6 5V5z' fill='%238A93A8'/%3E%3C/svg%3E") !important;
  background-size: 11px 11px;
  cursor: pointer;
}
.jstree-default .jstree-open > .jstree-icon.jstree-ocl {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7l5 6 5-6H5z' fill='%238A93A8'/%3E%3C/svg%3E") !important;
  background-size: 11px 11px;
  cursor: pointer;
}
.jstree-default .jstree-leaf > .jstree-icon.jstree-ocl {
  background-image: none !important;
  cursor: default;
}

/* ── Folder icon: closed (gold) — via .jstree-icon.jstree-themeicon ── */
.jstree-default .jstree-icon.jstree-themeicon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 6a2 2 0 012-2h4l2 2h6a2 2 0 012 2v7a2 2 0 01-2 2H4a2 2 0 01-2-2V6z' fill='%23F5C842'/%3E%3C/svg%3E") !important;
  background-size: 15px 15px;
}
/* Folder open — same blue as closed */
.jstree-default .jstree-open > .jstree-anchor > .jstree-icon.jstree-themeicon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 6a2 2 0 012-2h4l2 2h6a2 2 0 012 2v7a2 2 0 01-2 2H4a2 2 0 01-2-2V6z' fill='%233DB8F5'/%3E%3C/svg%3E") !important;
  background-size: 18px 18px;
}

/* ── glyphicon-leaf → muted file icon ── */
.jstree-default .jstree-icon.jstree-themeicon.glyphicon-leaf,
.jstree-default .jstree-icon.jstree-themeicon-custom.glyphicon-leaf {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H6a2 2 0 01-2-2V4z' fill='%238A93A8'/%3E%3Cpath d='M10 2v4h4' fill='none' stroke='%23161B27' stroke-width='1.2'/%3E%3C/svg%3E") !important;
  background-size: 13px 13px;
}
.jstree-default .jstree-icon.jstree-themeicon.glyphicon-leaf::before,
.jstree-default .jstree-icon.jstree-themeicon-custom.glyphicon-leaf::before { content: none; }

/* ── glyphicon-download → accent file icon ── */
.jstree-default .jstree-icon.jstree-themeicon.glyphicon-download,
.jstree-default .jstree-icon.jstree-themeicon-custom.glyphicon-download {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H6a2 2 0 01-2-2V4z' fill='%236C63FF'/%3E%3Cpath d='M10 8v4M8 10l2 2 2-2' stroke='%23fff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
  background-size: 13px 13px;
}
.jstree-default .jstree-icon.jstree-themeicon.glyphicon-download::before,
.jstree-default .jstree-icon.jstree-themeicon-custom.glyphicon-download::before { content: none; }

/* ── Anchor (node text row) ── */
.jstree-default .jstree-anchor {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--byw-text-muted) !important;
  height: 26px;
  line-height: 26px;
  padding: 0 6px;
  border-radius: 5px;
  transition: background 0.1s ease, color 0.1s ease;
}
.jstree-default .jstree-hovered {
  background: var(--byw-surface-3) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  color: var(--byw-text) !important;
}
.jstree-default .jstree-clicked {
  background: rgba(108, 99, 255, 0.15) !important;
  border-left: 2px solid var(--byw-accent) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  color: var(--byw-text) !important;
}

/* ── Search match ── */
.jstree-default .jstree-search {
  color: var(--byw-gold) !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

/* ── Context menu ── */
.jstree-contextmenu {
  background: var(--byw-surface-2) !important;
  border: 1px solid var(--byw-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  padding: 0.25rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
}
.jstree-contextmenu a {
  color: var(--byw-text-muted) !important;
  padding: 0.4rem 0.75rem !important;
  border-radius: 5px !important;
  display: block;
}
.jstree-contextmenu a:hover {
  background: var(--byw-surface-3) !important;
  color: var(--byw-text) !important;
}

/* ─── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb {
  background-color: var(--byw-surface-2);
  border-radius: 8px;
  padding: 0.5rem 1rem;
}
.breadcrumb-item a      { color: var(--byw-accent-text); }
.breadcrumb-item.active { color: var(--byw-text-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--byw-text-dim); }

/* Bootstrap 3 breadcrumb */
.breadcrumb > li + li::before { color: var(--byw-text-dim); }
.breadcrumb > .active         { color: var(--byw-text-muted); }

/* ─── Pagination ─────────────────────────────────────────────── */
.pagination .page-link,
.pagination > li > a {
  background-color: var(--byw-surface-2);
  border-color: var(--byw-border);
  color: var(--byw-text-muted);
  transition: all 0.15s ease;
}
.pagination .page-link:hover,
.pagination > li > a:hover {
  background-color: var(--byw-surface-3);
  color: var(--byw-text);
  border-color: var(--byw-border);
}
.pagination .page-item.active .page-link,
.pagination > li.active > a {
  background-color: var(--byw-accent);
  border-color: var(--byw-accent);
  color: #fff;
}

/* ─── List Groups ────────────────────────────────────────────── */
.list-group-item {
  background-color: var(--byw-surface);
  border-color: var(--byw-border);
  color: var(--byw-text);
}
.list-group-item:hover {
  background-color: var(--byw-surface-2);
}
.list-group-item.active {
  background-color: var(--byw-accent);
  border-color: var(--byw-accent);
}

/* ─── Tabulator in a grid row ────────────────────────────────── */
/* Many pages put the table straight inside .row, so Bootstrap 5 gives the table
   element itself the 12px gutter padding. Tabulator's fitColumns sizes columns to
   that padded width, 24px wider than the scrolling area inside, and every such
   table scrolls sideways by 24px (WEB-5). Same position, gutter as margin instead. */
.row > .tabulator {
  padding-left: 0;
  padding-right: 0;
  margin-left:  calc(var(--bs-gutter-x, 1.5rem) * .5);
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  width: calc(100% - var(--bs-gutter-x, 1.5rem));
}

/* DataTables' Bootstrap build wraps its controls and table in .row, whose negative
   gutter margins overflow a .table-responsive by 12px and give it a scrollbar
   (WEB-5). Dropping the margins and the column padding together leaves the table
   exactly where it was. */
.table-responsive > .dataTables_wrapper > .row {
  margin-left: 0;
  margin-right: 0;
}
.table-responsive > .dataTables_wrapper > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* ─── Thumbnails ─────────────────────────────────────────────── */
.thumbnail {
  background-color: var(--byw-surface-2);
  border: 1px solid var(--byw-border);
  border-radius: 8px;
}

/* Bootstrap 3 sized and centred a thumbnail's image and Bootstrap 5 has no .thumbnail at all,
   so the rule was lost in the upgrade. Without it an image keeps whatever width attribute the
   markup gives it: the achievement, mission and staff-achievement blocks hard-code 200x200
   inside a card about 192px wide, so every picture -- the "no image available" placeholder
   most visibly -- sat hard against the left edge and hung over the card on the right
   (Adrian, 2026-09-21). */
.thumbnail > img,
.thumbnail > a > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Utility Classes ────────────────────────────────────────── */
.byw-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--byw-text-muted);
}

.text-accent   { color: var(--byw-accent-text)      !important; }
.text-teal     { color: var(--byw-teal)        !important; }
.text-gold     { color: var(--byw-gold)        !important; }
.text-muted    { color: var(--byw-text-muted)  !important; }
.text-dimmed   { color: var(--byw-text-dim)    !important; }
.text-success  { color: var(--byw-success)     !important; }
.text-warning  { color: var(--byw-warning)     !important; }
.text-danger   { color: var(--byw-danger)      !important; }
.text-info     { color: var(--byw-info)        !important; }
.text-white    { color: var(--byw-text)        !important; }

.bg-surface    { background-color: var(--byw-surface)   !important; }
.bg-surface-2  { background-color: var(--byw-surface-2) !important; }
.bg-surface-3  { background-color: var(--byw-surface-3) !important; }

.border-subtle { border-color: var(--byw-border) !important; }

/* Height utilities (legacy compat) */
.height-5  { height: 5px; }
.height-10 { height: 10px; }
.height-15 { height: 15px; }
.height-20 { height: 20px; }
.height-30 { height: 30px; }
.height-40 { height: 40px; }
.pad-25-top { padding-top: 25px; }

/* Scrollable containers */
.scrollable {
  overflow-y: auto;
  max-height: 600px;
  scrollbar-width: thin;
  scrollbar-color: var(--byw-border) transparent;
}
.scrollable::-webkit-scrollbar       { width: 6px; }
.scrollable::-webkit-scrollbar-track { background: transparent; }
.scrollable::-webkit-scrollbar-thumb { background-color: var(--byw-border); border-radius: 3px; }

/* Centered text */
.centered-text { text-align: center; }

/* Legacy color classes */
.red-highlight   { color: var(--byw-danger)  !important; }
.green-highlight { color: var(--byw-success) !important; }
.date-range      { color: var(--byw-gold); }
.star-rating     { color: var(--byw-gold); }

/* ─── Legacy Component Overrides ─────────────────────────────── */
.container-background {
  background: var(--byw-surface) !important;
  border-radius: 12px;
}

.profile-block-background {
  background: var(--byw-surface-2) !important;
}

/* ─── Profile tab block normalization ───────────────────────────
   All profile blocks load as AJAX fragments into .tab-pane.profile-block.
   These rules make every block look seamless regardless of its own markup.
   ─────────────────────────────────────────────────────────────── */

/* Kill the leading height-30/20/10 spacer that every block starts with */
.tab-pane.profile-block > .col-xs-12:first-child,
.tab-pane.profile-block > div.height-30:first-child,
.tab-pane.profile-block > div.height-20:first-child {
  display: none !important;
}

/* Transparent .main wrapper — blends with tab-content background */
.tab-pane.profile-block .main {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Consistent top padding for all block content */
.tab-pane.profile-block {
  padding: 1rem 0.5rem !important;
}

/* Inner nav-pills (sub-tabs within a block) — dark theme */
.tab-pane.profile-block .nav-pills .nav-link,
.tab-pane.profile-block .nav-pills > li > a {
  color: var(--byw-text-muted) !important;
  background: var(--byw-surface-2) !important;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 4px 12px;
  margin-right: 3px;
  margin-bottom: 3px;
}
.tab-pane.profile-block .nav-pills .nav-link.active,
.tab-pane.profile-block .nav-pills > li.active > a,
.tab-pane.profile-block .nav-pills > li > a.active {
  background: var(--byw-accent) !important;
  color: #fff !important;
}
.tab-pane.profile-block .nav-pills {
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 0.75rem;
}

/* Panels inside blocks — match theme surface */
.tab-pane.profile-block .panel {
  background: var(--byw-surface-2) !important;
  border-color: var(--byw-border) !important;
  border-radius: 8px;
}
.tab-pane.profile-block .panel-body {
  background: transparent !important;
}

/* Alert info inside blocks — softer look */
.tab-pane.profile-block .alert-info {
  background: rgba(56, 115, 169, 0.15) !important;
  border-color: var(--byw-accent) !important;
  color: var(--byw-text) !important;
}

/* Bootstrap switch (profession toggles) */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
  background: var(--byw-accent);
  color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-off {
  background: var(--byw-surface-3);
  color: var(--byw-text-muted);
}
.bootstrap-switch .bootstrap-switch-label {
  background: var(--byw-surface-2);
}
div.bootstrap-switch-container { height: 35px; }

/* Status panel */
.status-panel {
  background: var(--byw-surface-2);
  border-radius: 8px;
  padding: 10px 20px;
  margin-bottom: 20px;
  border: 2px solid var(--byw-warning);
}

/* Admin comment highlight */
.admin-comment {
  background-color: rgba(108, 99, 255, 0.12);
  border-left: 3px solid var(--byw-accent);
}

/* Profile borders */
.user-image-panel,
.user-profile-border {
  border-radius: 8px;
  border: 2px solid var(--byw-border);
}

/* Spinning glyphicon */
.glyphicon.spinning {
  animation: byw-spin 1s infinite linear;
}
/* Icon-agnostic spinner, for markup that has moved off glyphicons. */
.byw-spin {
  display: inline-block;
  line-height: 1;
  vertical-align: -2px;
  animation: byw-spin 1s infinite linear;
}
@keyframes byw-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .glyphicon.spinning,
  .byw-spin { animation-duration: 2.5s; }
}

/* Modal size */
@media (min-width: 768px) {
  .modal-xl { width: 90%; max-width: 1200px; }
}

/* Table responsive */
.table-responsive { height: auto; }

/* Carousel captions */
.carousel-caption-top    { top: 8%; bottom: auto; color: var(--byw-danger); }
.carousel-caption-bottom { color: var(--byw-gold); }

/* ─── Top Utility Bar ────────────────────────────────────────── */
.byw-topbar {
  background-color: var(--byw-surface-2);
  border-bottom: 1px solid var(--byw-border);
  padding: 6px 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
}
.byw-topbar-link {
  color: var(--byw-text-muted);
  font-weight: 500;
  transition: color 0.15s ease;
}
.byw-topbar-link:hover { color: var(--byw-text); }
.byw-topbar-stat       { color: var(--byw-text-dim); font-size: 0.75rem; }
.byw-topbar-count      { color: var(--byw-gold); font-weight: 600; margin-left: 3px; }

/* ─── Nav Logo ───────────────────────────────────────────────── */
.byw-nav-logo { height: 36px; width: auto; }

/* ─── Footer ─────────────────────────────────────────────────── */
.byw-footer {
  background-color: var(--byw-surface);
  border-top: 1px solid var(--byw-border);
  padding: 2.5rem 0 1.5rem;
  margin-top: 3rem;
}
.byw-footer-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--byw-text);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.byw-new-users         { display: flex; flex-direction: column; gap: 0.875rem; }
.byw-new-user-item     { display: flex; align-items: center; gap: 0.875rem; }
.byw-new-user-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--byw-border); flex-shrink: 0; }
.byw-new-user-name     { font-weight: 600; font-size: 0.875rem; color: var(--byw-text); }
.byw-new-user-date     { font-size: 0.75rem; color: var(--byw-text-dim); }
.byw-new-user-welcome  { font-size: 0.75rem; color: var(--byw-teal); }
.byw-footer-brand      { text-align: right; }
.byw-footer-brand .byw-logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--byw-text);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 0.5rem;
}
.byw-footer-copy        { font-size: 0.8125rem; color: var(--byw-text-dim); margin: 0; }
.byw-footer-copy a      { color: var(--byw-text-muted); }

/* ─── Bootstrap 3 → 5 Layout Compat ─────────────────────────── */

/* col-xs-* (Bootstrap 3 extra-small, only applied at xs viewport so
   col-sm-*, col-md-* etc. properly override at larger breakpoints) */
@media (max-width: 575.98px) {
  .col-xs-1  { flex: 0 0 auto; width: 8.3333%; }
  .col-xs-2  { flex: 0 0 auto; width: 16.6667%; }
  .col-xs-3  { flex: 0 0 auto; width: 25%; }
  .col-xs-4  { flex: 0 0 auto; width: 33.3333%; }
  .col-xs-5  { flex: 0 0 auto; width: 41.6667%; }
  .col-xs-6  { flex: 0 0 auto; width: 50%; }
  .col-xs-7  { flex: 0 0 auto; width: 58.3333%; }
  .col-xs-8  { flex: 0 0 auto; width: 66.6667%; }
  .col-xs-9  { flex: 0 0 auto; width: 75%; }
  .col-xs-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-xs-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-xs-12 { flex: 0 0 auto; width: 100%; }

  .col-xs-offset-1  { margin-left: 8.3333%; }
  .col-xs-offset-2  { margin-left: 16.6667%; }
  .col-xs-offset-3  { margin-left: 25%; }
  .col-xs-offset-4  { margin-left: 33.3333%; }
  .col-xs-offset-5  { margin-left: 41.6667%; }
  .col-xs-offset-6  { margin-left: 50%; }
  .col-xs-offset-7  { margin-left: 58.3333%; }
  .col-xs-offset-8  { margin-left: 66.6667%; }
}

/* col-md-offset-* */
@media (min-width: 768px) {
  .col-md-offset-1  { margin-left: 8.3333%; }
  .col-md-offset-2  { margin-left: 16.6667%; }
  .col-md-offset-3  { margin-left: 25%; }
  .col-md-offset-4  { margin-left: 33.3333%; }
  .col-md-offset-5  { margin-left: 41.6667%; }
  .col-md-offset-6  { margin-left: 50%; }
}

/* Bootstrap 3 .form-horizontal: make .form-group behave like .row */
.form-horizontal .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
  margin-left:  calc(var(--bs-gutter-x, 1.5rem) * -.5);
  margin-bottom: 0.75rem;
}
.form-horizontal .form-group > [class*="col-"] {
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-left:  calc(var(--bs-gutter-x, 1.5rem) * .5);
}

/* Bootstrap 3 .control-label in horizontal forms */
.form-horizontal .control-label {
  text-align: right;
  padding-top: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-weight: 500;
  color: var(--byw-text-muted);
}

/* Bootstrap 3 .row-fluid → same as .row in BS5 */
.row-fluid {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
  margin-left:  calc(var(--bs-gutter-x, 1.5rem) * -.5);
}
.row-fluid > [class*="span"] {
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-left:  calc(var(--bs-gutter-x, 1.5rem) * .5);
}

/* Bootstrap 3 .span* grid (12-col, used in old pages) */
.span1  { flex: 0 0 auto; width: 8.3333%; }
.span2  { flex: 0 0 auto; width: 16.6667%; }
.span3  { flex: 0 0 auto; width: 25%; }
.span4  { flex: 0 0 auto; width: 33.3333%; }
.span5  { flex: 0 0 auto; width: 41.6667%; }
.span6  { flex: 0 0 auto; width: 50%; }
.span7  { flex: 0 0 auto; width: 58.3333%; }
.span8  { flex: 0 0 auto; width: 66.6667%; }
.span9  { flex: 0 0 auto; width: 75%; }
.span10 { flex: 0 0 auto; width: 83.3333%; }
.span11 { flex: 0 0 auto; width: 91.6667%; }
.span12 { flex: 0 0 auto; width: 100%; }

/* Bootstrap 3 .pull-right / .pull-left */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }

/* Bootstrap 3 spacer helpers used across templates */
.height-5  { height: 5px; }
.height-10 { height: 10px; }
.height-20 { height: 20px; }
.height-30 { height: 30px; }
.height-40 { height: 40px; }
.height-50 { height: 50px; }
.padTop1   { padding-top: 1rem; }
.padTop2   { padding-top: 2rem; }
.padBot1   { padding-bottom: 1rem; }
.padBot2   { padding-bottom: 2rem; }
.byw-footer-copy a:hover { color: var(--byw-accent-text); }

/* ─── Profession Cards (editprofessions modal) ───────────────── */
.byw-prof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  padding: 0.25rem 0;
}

.byw-prof-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--byw-surface-2);
  border: 1px solid var(--byw-border);
  border-radius: 10px;
  padding: 0.875rem 0.625rem 0.75rem;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.byw-prof-card:hover {
  border-color: rgba(108, 99, 255, 0.4);
}

.byw-prof-active {
  border-color: var(--byw-accent) !important;
  box-shadow: 0 0 0 1px var(--byw-accent), 0 4px 16px rgba(108, 99, 255, 0.25);
  background-color: rgba(108, 99, 255, 0.08);
}

.byw-prof-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
}

.byw-prof-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--byw-text);
  line-height: 1.3;
}

.byw-prof-name a {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.byw-prof-name a:hover { opacity: 1; }

.byw-prof-locked {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--byw-warning);
  background-color: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1.4;
}

/* Why a switch is unavailable right now: set by the server or by profession-choices.js. */
.byw-prof-note {
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--byw-text-muted, #9aa0a6);
  text-align: center;
  min-height: 0.9rem;
}
.byw-prof-note:empty { display: none; }

.byw-prof-toggle {
  margin: 0;
  cursor: pointer;
}

/* Native checkbox styled as a pill toggle inside profession cards */
.byw-prof-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  background-color: var(--byw-surface-3);
  border: 1px solid var(--byw-border);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: block;
  min-height: unset;
}

.byw-prof-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--byw-text-dim);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.byw-prof-toggle input[type="checkbox"]:checked {
  background-color: var(--byw-accent);
  border-color: var(--byw-accent);
}

.byw-prof-toggle input[type="checkbox"]:checked::after {
  transform: translateX(20px);
  background-color: #fff;
}

.byw-prof-toggle input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── Form dialogs ──────────────────────────────────────────────
   Dialogs rebuilt in Bootstrap 5 with labels above their fields (Edit Profile, staff ticket
   comment). Labels muted and small, fields on the darker surface, the same look as the new
   support ticket and profession practice dialogs. */
.byw-form-dialog .modal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}
.byw-form-dialog .form-label,
.byw-form-dialog .form-check-label {
  color: var(--byw-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.byw-form-dialog .form-control,
.byw-form-dialog .form-select {
  background-color: var(--byw-surface-3);
  border-color: var(--byw-border);
  color: var(--byw-text);
}
.byw-form-dialog .form-control[readonly] {
  color: var(--byw-text-muted);
}
.byw-form-dialog .form-text {
  color: var(--byw-text-muted);
  font-size: 0.8rem;
}