/* =============================================================================
   Concrete Rust — the app-wide theme (shadcn/ui tokens · Montserrat · radius 0.4rem)

   Loaded last (resources/views/partials/theme-head.blade.php) by every Blade page:
   the admin and gym-owner portals (Bootstrap 3 + Gentelella), the auth pages
   (Bootstrap 4) and the landing page (Gymer). The React login uses the same
   tokens through Tailwind (resources/css/app.css).
   ========================================================================== */

:root {
  --background: #f5f3ef;
  --foreground: #1c1c1c;
  --card: #ffffff;
  --card-foreground: #1c1c1c;
  --popover: #ffffff;
  --popover-foreground: #1c1c1c;
  --primary: #0a0a0a;
  --primary-hover: #2b2b2b;
  --primary-foreground: #f5f5f5;
  --secondary: #dc5f00;
  --secondary-hover: #bf5200;
  --secondary-foreground: #ffffff;
  --accent: #8fd1c9;
  --accent-foreground: #0a0a0a;
  --muted: #ababab;
  --muted-foreground: #4a4a4a;
  --destructive: #e8001b;
  --destructive-hover: #c40017;
  --destructive-foreground: #ffffff;
  --border: #e2e0da;
  --hairline: rgba(0, 0, 0, 0.1);
  --input: #dc5f00;
  --input-background: #f3f4f6;
  --ring: rgba(220, 95, 0, 0.28);
  --radius: 0.4rem;
  --radius-lg: calc(var(--radius) + 4px);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.25);
  --font-sans: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------ */
html,
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--background);
  color: var(--foreground);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  color: var(--foreground);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: var(--foreground); }
a:hover,
a:focus { color: var(--secondary); }

::selection { background: var(--secondary); color: var(--secondary-foreground); }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--primary); }

.text-muted,
.help-block,
small.text-muted { color: var(--muted-foreground) !important; }

.text-danger,
.invalid-feedback,
.invalid-feedback strong { color: var(--destructive) !important; }

.text-primary { color: var(--primary) !important; }
.text-success { color: #1f7a4d !important; }

hr { border-color: var(--hairline); }

/* ---------------------------------------------------------------------------
   Logo (resources/views/partials/logo.blade.php)
   ------------------------------------------------------------------------ */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
}
.brand-logo__mark {
  display: block;
  width: 36px;
  height: 36px;
  flex: none;
}
.brand-logo__word {
  font-family: var(--font-sans);
  font-weight: 900;
  font-style: italic;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-logo__ifit { color: var(--foreground); }
.brand-logo__clients { color: var(--secondary); }
.brand-logo--light .brand-logo__ifit { color: #ffffff; }
.brand-logo--light .brand-logo__mark rect { stroke: rgba(255, 255, 255, 0.18); stroke-width: 2; }

/* ---------------------------------------------------------------------------
   Buttons  (primary = black, secondary = rust, outline, ghost, destructive)
   ------------------------------------------------------------------------ */
.btn {
  border-radius: var(--radius) !important;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

.btn:focus,
.btn:focus-visible,
.btn.focus {
  outline: 0 !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--primary-foreground) !important;
}

.btn-success,
.btn-secondary,
.btn-warning,
.btn-success:focus,
.btn-secondary:focus,
.btn-warning:focus {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
}
.btn-success:hover,
.btn-secondary:hover,
.btn-warning:hover,
.btn-success:active,
.btn-secondary:active,
.btn-warning:active {
  background: var(--secondary-hover) !important;
  border-color: var(--secondary-hover) !important;
  color: var(--secondary-foreground) !important;
}

.btn-danger,
.btn-danger:focus {
  background: var(--destructive) !important;
  border-color: var(--destructive) !important;
  color: var(--destructive-foreground) !important;
}
.btn-danger:hover,
.btn-danger:active {
  background: var(--destructive-hover) !important;
  border-color: var(--destructive-hover) !important;
  color: var(--destructive-foreground) !important;
}

.btn-info,
.btn-info:focus {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-foreground) !important;
}
.btn-info:hover { filter: brightness(0.94); }

.btn-default,
.btn-light,
.btn-outline,
.btn-outline-primary,
.btn-outline-secondary {
  background: transparent !important;
  border-color: var(--secondary) !important;
  color: var(--foreground) !important;
}
.btn-default:hover,
.btn-light:hover,
.btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: rgba(220, 95, 0, 0.1) !important;
  color: var(--foreground) !important;
}

.btn-link {
  color: var(--foreground) !important;
  background: transparent !important;
  border-color: transparent !important;
}
.btn-link:hover { background: rgba(0, 0, 0, 0.06) !important; text-decoration: none; }

.btn.disabled,
.btn[disabled],
.btn:disabled,
fieldset[disabled] .btn {
  opacity: 0.45 !important;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Forms  (rust-bordered inputs on concrete)
   ------------------------------------------------------------------------ */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  background-color: var(--input-background) !important;
  border: 1px solid var(--input) !important;
  border-radius: var(--radius) !important;
  color: var(--foreground) !important;
  box-shadow: none !important;
  font-family: var(--font-sans);
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.form-control:focus {
  background-color: #d8d8d8 !important;
  border-color: var(--secondary) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
  outline: 0;
}

.form-control::placeholder { color: #6f6f6f !important; opacity: 1; }

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #bdbdbd !important;
  border-color: var(--border) !important;
  color: var(--muted-foreground) !important;
}

.form-control.is-invalid,
.has-error .form-control { border-color: var(--destructive) !important; }

label,
.control-label,
.col-form-label,
.form-group > label {
  color: var(--foreground);
  font-weight: 600;
  font-size: 13px;
}

input[type="file"].form-control { padding-top: 5px; }

/* ---------------------------------------------------------------------------
   Surfaces: cards, panels, wells
   ------------------------------------------------------------------------ */
.card,
.x_panel,
.well,
.panel,
.panel-default {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--card-foreground);
}

.card-header,
.panel-heading,
.x_title {
  background: transparent !important;
  border-bottom: 1px solid var(--hairline) !important;
  color: var(--foreground) !important;
  font-weight: 700;
}

.card-footer,
.panel-footer {
  background: transparent !important;
  border-top: 1px solid var(--hairline) !important;
}

.x_title h2 { color: var(--foreground); font-weight: 700; }

/* ---------------------------------------------------------------------------
   Search box (pill input with a leading icon: client/user search bars)
   ------------------------------------------------------------------------ */
.search-box { position: relative; display: flex; align-items: center; }
.search-box .fa-search {
  position: absolute;
  left: 15px;
  color: var(--muted-foreground);
  font-size: 13px;
  pointer-events: none;
}
.search-box input.form-control {
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: var(--input-background) !important;
  padding: 9px 16px 9px 38px !important;
  font-size: 14px;
  box-shadow: none !important;
  width: 100%;
}
.search-box input.form-control:focus {
  border-color: var(--secondary) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}
.search-box input.form-control::placeholder { color: var(--muted-foreground) !important; }

/* ---------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------ */
.table {
  color: var(--foreground);
  background: transparent !important;
}

.table > thead > tr > th,
.table thead th,
table.jambo_table thead,
table.jambo_table thead th,
.headings th,
.column-title {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--muted-foreground) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: 0 !important;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table td,
.table th {
  border-top-color: var(--hairline) !important;
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(odd) { background: rgba(0, 0, 0, 0.035) !important; }

.table-hover > tbody > tr:hover,
table.jambo_table tbody tr:hover td,
.table > tbody > tr:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: var(--hairline) !important;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--hairline) !important; }

/* ---------------------------------------------------------------------------
   Alerts
   ------------------------------------------------------------------------ */
.alert {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.alert-info {
  background: var(--card) !important;
  border-color: var(--border) !important;
  border-left: 4px solid var(--secondary) !important;
}

.alert-success {
  background: var(--accent) !important;
  border-color: #5fb0a6 !important;
  color: var(--accent-foreground) !important;
}

.alert-danger,
.alert-error {
  background: #f0c1c5 !important;
  border-color: var(--destructive) !important;
  color: #7a0012 !important;
}

.alert-warning {
  background: #f1cfb5 !important;
  border-color: var(--secondary) !important;
  color: #5c2800 !important;
}

.alert .close,
.close {
  color: inherit;
  opacity: 0.55;
  text-shadow: none;
}
.alert .close:hover,
.close:hover { opacity: 0.9; }

/* ---------------------------------------------------------------------------
   Badges & labels
   ------------------------------------------------------------------------ */
.badge,
.label {
  border-radius: var(--radius) !important;
  font-weight: 600;
  background: var(--primary);
  color: var(--primary-foreground);
}
.label-success,
.badge-success,
.bg-green { background: var(--accent) !important; color: var(--accent-foreground) !important; }
.label-danger,
.badge-danger,
.bg-red { background: var(--destructive) !important; color: var(--destructive-foreground) !important; }
.label-warning,
.badge-warning,
.label-primary,
.badge-primary { background: var(--secondary) !important; color: var(--secondary-foreground) !important; }
.label-default,
.badge-secondary { background: transparent !important; border: 1px solid var(--border); color: var(--foreground) !important; }

/* ---------------------------------------------------------------------------
   Modals & dropdowns
   ------------------------------------------------------------------------ */
.modal-content {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--foreground);
}

.modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--hairline) !important;
  position: relative;
}

.modal-title { color: var(--foreground) !important; font-weight: 700 !important; }
.modal-footer { border-top: 1px solid var(--hairline) !important; }
.modal-body { background: transparent !important; }
.modal-backdrop { background: #000; }
.modal-backdrop.in,
.modal-backdrop.show { opacity: 0.55; }

/* Fields inside a modal sit on a white surface, so give them a tinted field
   background instead of the app-wide rust border (only accent on focus). */
.modal-body .form-control,
.modal-body input.form-control,
.modal-body select.form-control,
.modal-body textarea.form-control {
  background-color: #f4f5f7 !important;
  border: 1px solid #e2e5ea !important;
}
.modal-body .form-control:focus {
  background-color: #ffffff !important;
  border-color: var(--secondary) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

/* Close button: the circular close.png, sized and positioned consistently,
   with a little lift on hover instead of sitting flat. */
.modal-header .close {
  position: absolute;
  top: 14px;
  right: 18px;
  float: none;
  opacity: 1 !important;
  line-height: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.modal-header .close:hover { transform: scale(1.08); opacity: 0.85 !important; }
.modal-header .close img { width: 28px; height: 28px; display: block; }

/* Entrance: scale + fade instead of Bootstrap 3's slide-from-the-top */
@media (prefers-reduced-motion: no-preference) {
  .modal.fade .modal-dialog {
    transform: scale(0.95) translateY(-8px);
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0;
  }
  .modal.in .modal-dialog,
  .modal.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.dropdown-menu {
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px;
}
.dropdown-menu > li > a,
.dropdown-item {
  color: var(--foreground);
  border-radius: calc(var(--radius) - 2px);
  padding: 7px 12px;
}
.dropdown-menu > li > a:hover,
.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(0, 0, 0, 0.07);
  color: var(--foreground);
}

/* ---------------------------------------------------------------------------
   Tabs & pagination
   ------------------------------------------------------------------------ */
.nav-tabs {
  border-bottom: 1px solid var(--hairline) !important;
}
.nav-tabs > li > a,
.nav-tabs .nav-link {
  color: var(--muted-foreground) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li > a:hover,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover,
.project-tab #tabs .nav-tabs .nav-item.show .nav-link {
  color: var(--foreground) !important;
  border-bottom-color: var(--secondary) !important;
}

.pagination > li > a,
.pagination > li > span,
.page-link {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--foreground) !important;
}
.pagination > li > a:hover,
.page-link:hover { background: rgba(0, 0, 0, 0.07) !important; }
.pagination > .active > a,
.pagination > .active > span,
.page-item.active .page-link {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.page-item:first-child .page-link { border-radius: var(--radius) 0 0 var(--radius) !important; }
.pagination > li:last-child > a,
.pagination > li:last-child > span,
.page-item:last-child .page-link { border-radius: 0 var(--radius) var(--radius) 0 !important; }

/* Progress (black fill on a grey track, like the theme's slider) */
.progress,
.progress-bar { background-color: var(--muted) !important; box-shadow: none !important; }
.progress-bar .bar,
.progress .progress-bar { background-color: var(--primary) !important; }

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--input-background) !important;
  border: 1px solid var(--input) !important;
  border-radius: var(--radius) !important;
  min-height: 34px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  box-shadow: 0 0 0 3px var(--ring);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--primary) !important;
  border: 0 !important;
  color: var(--primary-foreground) !important;
  border-radius: calc(var(--radius) - 2px) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--primary-foreground) !important; }
.select2-dropdown {
  background: var(--popover) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] { background: rgba(0, 0, 0, 0.08) !important; }

/* =============================================================================
   Portal shell (Gentelella: layouts/admin + layouts/user)
   ========================================================================== */
body.nav-md,
body.nav-sm { background: var(--background); color: var(--foreground); }

.main_container,
.right_col,
.nav-md .container.body .right_col { background: var(--background) !important; color: var(--foreground); }

/* Sidebar: a full-height dark gradient (independent of the light/dark content
   theme, like most admin dashboards). Actual height is kept in sync with page
   content by public/js/sidebar-height.js — Gentelella's position:absolute +
   percentage min-height can only ever match the viewport, not content taller
   than it, and background-attachment:fixed tricks for this are unreliable
   across browsers/devices. Do not remove that script without re-solving this. */
.left_col,
.left_col.scroll-view {
  background:
    radial-gradient(circle at 18% 0%, rgba(220, 95, 0, 0.25), transparent 42%),
    linear-gradient(165deg, #0a0a0a 0%, #1a1a1a 46%, #262626 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.nav_title {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  height: 57px;
}
.site_title,
.site_title:hover,
.site_title:focus {
  background: transparent !important;
  color: #ffffff !important;
}
.site_title {
  display: flex !important;
  align-items: center;
  height: 57px !important;
  line-height: 1 !important;
  padding-left: 16px !important;
  text-decoration: none !important;
}
.site_title .brand-logo__mark { width: 34px; height: 34px; }
.site_title .brand-logo__word { font-size: 19px; }
.nav-sm .site_title { justify-content: center; padding-left: 0 !important; }
.nav-sm .site_title .brand-logo__word { display: none; }

.profile_info span { color: rgba(255, 255, 255, 0.55) !important; }
.profile_info h2 { color: #ffffff !important; font-weight: 700 !important; }
.img-circle.profile_img {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.menu_section h3 {
  color: rgba(255, 255, 255, 0.38) !important;
  text-shadow: none !important;
  letter-spacing: 0.1em;
  font-size: 11px;
  font-weight: 700;
}

.nav.side-menu > li {
  margin: 2px 10px;
  border-radius: var(--radius);
  border-right: 0 !important;
}
.nav.side-menu > li > a {
  color: rgba(255, 255, 255, 0.82) !important;
  text-shadow: none !important;
  font-weight: 600;
  border-radius: var(--radius);
  padding: 11px 12px;
}
.nav.side-menu > li > a:hover,
.nav.side-menu > li > a:focus { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; }
.nav.side-menu > li.active > a,
.nav.side-menu > li.current-page > a,
.nav.side-menu > li.active-sm > a {
  background: linear-gradient(90deg, var(--secondary) 0%, var(--secondary-hover) 100%) !important;
  color: var(--secondary-foreground) !important;
  box-shadow: 0 4px 14px rgba(220, 95, 0, 0.35) !important;
}
.nav.side-menu > li.active,
.nav.side-menu > li.current-page,
.nav li.current-page { background: transparent !important; border-right: 0 !important; }
.nav.side-menu > li > a > .fa-chevron-down { color: inherit; opacity: 0.6; }

/* The Groups icon is a white PNG — no inverting needed against a dark sidebar. */
.nav.side-menu > li > a > img { filter: none; opacity: 0.82; }
.nav.side-menu > li.active > a > img,
.nav.side-menu > li.current-page > a > img { filter: none; opacity: 1; }

.nav.child_menu li,
.nav.child_menu li:hover,
.nav.child_menu li.active { background: transparent !important; }
.nav.child_menu > li > a,
.nav.child_menu li li a {
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 500;
}
.nav.child_menu > li > a:hover,
.nav.child_menu li.current-page > a,
.nav li li.current-page a {
  color: var(--secondary) !important;
  font-weight: 700;
}
.nav-md ul.nav.child_menu li:before { background: rgba(255, 255, 255, 0.16) !important; }
.nav-md ul.nav.child_menu li:after { border-color: rgba(255, 255, 255, 0.16) !important; background: #1a1a1a !important; }
.nav-md ul.nav.child_menu li.current-page:after { background: var(--secondary) !important; border-color: var(--secondary) !important; }

/* Collapsed sidebar fly-outs: a dark popover to match, not the light theme's. */
.nav-sm ul.nav.child_menu {
  background: #1c1c1c !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Top bar */
.nav_menu {
  background: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
}
.toggle a,
.toggle a i,
.nav_menu .user-profile,
.nav.navbar-nav > li > a { color: var(--foreground) !important; }
.nav.navbar-nav > li > a:hover,
.nav.navbar-nav > .open > a { background: rgba(0, 0, 0, 0.06) !important; }
.nav_menu .user-profile img {
  border: 1px solid var(--border);
  border-radius: 50%;
}

/* Page headings */
.page-title .title_left h3,
.page-title h3,
.right_col > h3,
.right_col h3 { color: var(--foreground); font-weight: 700; }
.page-title .title_right .input-group .form-control { border-radius: var(--radius) !important; }

/* Content blocks that the views paint white */
.table-content,
#tabs .table,
#tabs .table-content,
.project-tab,
.x_content .table-responsive { background: var(--card) !important; }

.table-content {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
}

/* Blue action icons (edit, add user, re-send…) rendered as PNGs: make them ink-coloured. */
.right_col img[src$="edit.png"],
.right_col img[src$="add-user.png"],
.right_col img[src$="re-send.png"],
.right_col img[src$="notification.png"],
.right_col img[src$="group.png"],
.modal img[src$="close.png"] { filter: grayscale(1) brightness(0.35); }

.right_col .fa-eye,
.right_col a > .fa-eye { color: var(--foreground) !important; }

/* Footer */
.main_container footer {
  background: var(--background) !important;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground) !important;
}
.main_container footer a { color: var(--foreground) !important; font-weight: 700; }

/* admin-style/style.css paints these white or blue */
.main_container .table > tbody > tr > td { background: transparent !important; }
.main_container thead,
.main_container tr.headings,
.main_container .table-content table thead,
.main_container table.jambo_table thead { background: rgba(0, 0, 0, 0.06) !important; }
.main_container thead th,
.main_container tr.headings th,
.main_container .table > thead > tr > th { background: transparent !important; }
.main_container thead a,
.main_container thead a:hover { color: inherit !important; }
.main_container .btn.add-button:not([disabled]):not([style*="e81b3f"]) {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}
.main_container .btn.add-button:not([disabled]):not([style*="e81b3f"]):hover { background: var(--primary-hover) !important; }
.main_container .x_content {
  background: var(--card) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm) !important;
}
.main_container .x_panel .x_content { border: 0; box-shadow: none !important; }
.page-title button:not(.btn) {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: var(--radius) !important;
}
.main_container .bg-white {
  background: var(--card) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.main_container .view-all,
.main_container a.read-more { color: var(--secondary) !important; font-family: var(--font-sans) !important; font-weight: 600; }
.main_container .form-group span { color: inherit; font-family: inherit; }
.group-content .header { background: rgba(0, 0, 0, 0.06) !important; color: var(--foreground) !important; }
.upload-btn-wrapper .btns {
  background: transparent !important;
  border: 1px dashed var(--secondary) !important;
  border-radius: var(--radius) !important;
  color: var(--foreground) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.upload-btn-wrapper:hover .btns { background: rgba(220, 95, 0, 0.08) !important; }
.notification-data .lines,
.group-content .lines {
  background-color: transparent !important;
  border-bottom-color: var(--hairline) !important;
}
.select2-results__option:before {
  border-color: var(--border) !important;
  background-color: var(--input-background) !important;
  border-radius: calc(var(--radius) - 2px) !important;
}
.select2-results__option[aria-selected=true]:before {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

/* On/off switch (admin gym owner status): black when on, like the theme's toggle */
.slider { background-color: var(--muted) !important; }
input:checked + .slider { background-color: var(--primary) !important; }
input:focus + .slider { box-shadow: 0 0 0 3px var(--ring) !important; }
.slider:before { background-color: var(--primary-foreground) !important; }

/* "Remove …" buttons: disabled until rows are ticked (inline grey), then inline red */
.btn.add-button[disabled] {
  background: var(--muted) !important;
  border-color: var(--muted) !important;
  color: var(--muted-foreground) !important;
  opacity: 0.7 !important;
}
.btn.add-button[style*="e81b3f"] {
  background: var(--destructive) !important;
  border-color: var(--destructive) !important;
  color: var(--destructive-foreground) !important;
}

/* NProgress bar */
#nprogress .bar { background: var(--secondary) !important; }
#nprogress .peg { box-shadow: 0 0 10px var(--secondary), 0 0 5px var(--secondary) !important; }

/* =============================================================================
   Landing page (Gymer template, resources/views/landing — body.theme-landing)
   The template is dark with mint highlights; here it becomes concrete with rust
   accents. The hero keeps its video under a dark overlay.
   ========================================================================== */
body.theme-landing {
  background: var(--background);
  color: var(--muted-foreground);
  font-weight: 400;
  font-size: 1rem;
}
.theme-landing .site-wrap { background: var(--background); }
.theme-landing p { color: var(--muted-foreground); }
.theme-landing .intro-section p.lead { color: rgba(255, 255, 255, 0.9); }

.theme-landing .btn {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
.theme-landing .intro-section .btn-primary,
.theme-landing .footer-section .btn-primary {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
}
.theme-landing .intro-section .btn-primary:hover,
.theme-landing .footer-section .btn-primary:hover {
  background: var(--secondary-hover) !important;
  border-color: var(--secondary-hover) !important;
}
.theme-landing .intro-section .btn-outline-light {
  border-radius: var(--radius) !important;
  border-width: 1px;
}

/* Navbar: white over the hero, concrete once it sticks */
.theme-landing .site-logo a { display: inline-block; text-decoration: none; }
.theme-landing .site-navbar .site-menu-toggle { color: #ffffff !important; }
@media (max-width: 575.98px) {
  .theme-landing .site-navbar .container-fluid { padding-left: 16px; padding-right: 16px; }
  .theme-landing .site-logo .brand-logo__mark { width: 32px; height: 32px; }
  .theme-landing .site-logo .brand-logo__word { font-size: 17px; }
}
.theme-landing .sticky-wrapper.is-sticky .site-logo .brand-logo__ifit { color: var(--foreground); }
.theme-landing .sticky-wrapper.is-sticky .site-logo .brand-logo__mark rect { stroke: none; }
.theme-landing .site-navbar .site-navigation .site-menu > li > a:hover,
.theme-landing .site-navbar .site-navigation .site-menu .active { color: var(--secondary) !important; }
.theme-landing .site-navbar .site-navigation .site-menu > li > a.active:after,
.theme-landing .sticky-wrapper.is-sticky .site-navbar .site-menu > li > a.active:after { background: var(--secondary) !important; }
.theme-landing .sticky-wrapper.is-sticky .site-navbar {
  background: var(--background);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.theme-landing .sticky-wrapper.is-sticky .site-navbar .site-logo a,
.theme-landing .sticky-wrapper.is-sticky .site-navbar .site-menu > li > a,
.theme-landing .sticky-wrapper.is-sticky .site-menu-toggle { color: var(--foreground) !important; }
.theme-landing .sticky-wrapper.is-sticky .site-navbar .site-menu > li > a:hover { color: var(--secondary) !important; }

.theme-landing .cta a span {
  background: var(--secondary);
  border-color: var(--secondary) !important;
  color: var(--secondary-foreground);
  border-radius: var(--radius) !important;
  font-weight: 700;
}
.theme-landing .cta a:hover span {
  background: var(--secondary-hover);
  border-color: var(--secondary-hover) !important;
  color: var(--secondary-foreground);
}

.theme-landing .site-mobile-menu { background: var(--background); }
.theme-landing .site-mobile-menu .site-nav-wrap a { color: var(--foreground); }
.theme-landing .site-mobile-menu .site-nav-wrap a:hover,
.theme-landing .site-mobile-menu .site-nav-wrap li .active { color: var(--secondary); }
.theme-landing .site-mobile-menu .site-mobile-menu-close span { color: var(--foreground); }

/* Section headings */
.theme-landing .section-title {
  color: var(--foreground);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.theme-landing .section-sub-title { color: var(--secondary); }

/* Stat cards, like the theme's dashboard cards */
.theme-landing .section-1 .counter {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
}
.theme-landing .counter .text-primary { color: var(--secondary) !important; }
.theme-landing .counter .counter-text strong { color: var(--foreground); font-weight: 800; }
.theme-landing .counter .counter-text span { color: var(--muted-foreground); font-weight: 500; }

/* Images: rust offset shadow instead of mint */
.theme-landing .img-shadow,
.theme-landing .person img {
  box-shadow: 10px 10px 0 0 var(--secondary);
  border-radius: var(--radius-lg);
}
.theme-landing .person .opacity-7 { color: var(--secondary); opacity: 1; font-weight: 600; }

/* Class carousel */
.theme-landing .section-2 { background: var(--card); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.theme-landing .section-2 + .section-2 { border-top: 0; }
.theme-landing .work-thumb,
.theme-landing .work-thumb img { border-radius: var(--radius-lg); overflow: hidden; }
.theme-landing .work-thumb:after { background: rgba(220, 95, 0, 0.85); }
.theme-landing .owl-dots .owl-dot span { background-color: var(--muted) !important; }
.theme-landing .owl-dots .owl-dot.active span { background-color: var(--secondary) !important; }

/* Schedule */
.theme-landing .table-custom { background: var(--background) !important; border-radius: var(--radius-lg); overflow: hidden; }
.theme-landing .table-custom td { color: var(--foreground); border-color: var(--hairline) !important; }
.theme-landing .table-custom a { color: var(--secondary); font-weight: 700; }
.theme-landing .table-custom a:hover { color: var(--secondary-hover); }

/* Feature cards: black with rust icons */
.theme-landing .service {
  background: var(--primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--primary);
}
.theme-landing .service h3 { color: var(--primary-foreground); }
.theme-landing .service p { color: rgba(245, 245, 245, 0.72); }
.theme-landing .service span[class*="flaticon-"].text-white { color: var(--secondary) !important; }

/* Contact */
.theme-landing #contact-section.bg-dark {
  background: var(--card) !important;
  border-top: 1px solid var(--hairline);
}
.theme-landing #contact-section .section-title { color: var(--foreground); }
.theme-landing #contact-section form {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 12px;
  box-shadow: var(--shadow-sm);
}
.theme-landing #contact-section .form-group .form-control { height: 44px; }
.theme-landing #contact-section textarea.form-control { height: auto; }

/* Footer: black band */
.theme-landing .footer-section { background: var(--primary); }
.theme-landing .footer-section h3 { color: var(--primary-foreground); }
.theme-landing .footer-section p,
.theme-landing .footer-section a:not(.btn) { color: rgba(245, 245, 245, 0.7); }
.theme-landing .footer-section a:not(.btn):hover { color: var(--secondary); }

/* =============================================================================
   Auth pages (layouts/app: password reset & co.)
   ========================================================================== */
#app { min-height: 100vh; background: var(--background); }
#app main { padding-top: 24px !important; }
#app .auth-brand { display: flex; justify-content: center; padding-top: 48px; }
#app .auth-brand .brand-logo__mark { width: 42px; height: 42px; }
#app .auth-brand .brand-logo__word { font-size: 24px; }

/* =============================================================================
   Data tables (portal): card tables after the shadcn data-table pattern — a light
   surface, muted column headings, roomy rows, dark readable text, ghost icon
   actions. Row numbers (.rn-cell) come from public/js/data-tables.js.
   ========================================================================== */
:root { --surface: #ffffff; }

.main_container table.table {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg);
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 0;
}

.main_container .table-content,
.main_container .table-responsive,
.main_container .x_content:has(> table.table),
.main_container .x_content:has(> .table-responsive) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: auto !important;
}

/* Some create pages use .table-content / .table-responsive as the form wrapper: keep those as form cards. */
.main_container .table-content:has(.form-group),
.main_container .table-responsive:has(.form-group) {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm) !important;
  padding: 28px !important;
  overflow: visible !important;
}

/* A panel that only wraps a table becomes the table card itself (no card-in-card).
   Row-level <form>s (e.g. a Remove button) don't count; panels with real form fields keep their card. */
.main_container .x_panel:has(table.table):not(:has(.form-group, textarea, select, .form-control)) {
  background: var(--surface) !important;
  padding: 0 !important;
  overflow: hidden;
}
.main_container .x_panel:has(table.table):not(:has(.form-group, textarea, select, .form-control)) .x_content { padding: 0 !important; margin: 0 !important; }
.main_container .x_panel:has(table.table):not(:has(.form-group, textarea, select, .form-control)) table.table {
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
}

.main_container thead,
.main_container tr.headings,
.main_container .table-content table thead,
.main_container table.jambo_table thead { background: transparent !important; }

.main_container .table > thead > tr > th {
  background: transparent !important;
  color: var(--muted-foreground) !important;
  font-size: 13px;
  font-weight: 500 !important;
  padding: 14px 16px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--hairline) !important;
  height: auto !important;
  vertical-align: middle !important;
  white-space: normal;
}
.main_container .table > thead > tr > th .fa-sort { color: var(--muted-foreground); margin-left: 4px; cursor: pointer; }

/* Select-row checkbox and the row's name on one line */
.main_container .table td .custom-control,
.main_container .table th .custom-control {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding-left: 0 !important;
  min-height: 0;
}
.main_container .table .custom-control-input {
  position: static !important;
  opacity: 1 !important;
  z-index: auto !important;
  margin: 0 !important;
  flex: none;
  width: 16px;
  height: 16px;
}
.main_container .table .custom-control-label { padding-left: 0 !important; }
.main_container .table .custom-control-label:before,
.main_container .table .custom-control-label:after { display: none !important; }

.main_container .table > tbody > tr > td {
  background: transparent !important;
  padding: 16px !important;
  color: var(--foreground) !important;
  font-size: 14px;
  border-top: 1px solid var(--hairline) !important;
  vertical-align: middle !important;
}
.main_container .table > tbody > tr:first-child > td { border-top: 0 !important; }
.main_container .table > tbody > tr:hover > td { background: rgba(0, 0, 0, 0.035) !important; }
.main_container .table-striped > tbody > tr:nth-of-type(odd) { background: transparent !important; }

.main_container .table td a:not(.btn):not(.read-more):not(.view-all) { color: var(--foreground); }
.main_container .table td label,
.main_container .table td .custom-control-label {
  color: var(--foreground) !important;
  font-weight: 600 !important;
  margin: 0;
}
.main_container .table td img { border-radius: calc(var(--radius) - 1px); }

/* Rich-text excerpts (recipe descriptions) stay body-sized inside a cell */
.main_container .table td h1,
.main_container .table td h2,
.main_container .table td h3,
.main_container .table td h4,
.main_container .table td h5 { font-size: 13px; font-weight: 700; margin: 8px 0 2px; }
.main_container .table td p { margin: 0 0 4px; }
.main_container .table td ul,
.main_container .table td ol { margin: 0; padding-left: 18px; color: var(--muted-foreground); }

.rn-cell {
  width: 56px;
  text-align: center !important;
  color: var(--muted-foreground) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
}
.main_container .table > thead > tr > th.rn-cell { font-weight: 500 !important; }
.main_container .table .select-cell { width: 48px; }

/* admin-style/style.css hard-codes "table.notification-table thead th { text-align:
   left }" with higher specificity than the .text-left/.text-center/.text-right
   utility classes these list pages (Groups, Recipes, Challenges, Weekly Challenges,
   Meal Plan, Overview, Workout …) put on their header cells — so those utilities
   were silently losing on every one of them. Restore them explicitly. */
table.notification-table thead th.text-left,
table.notification-table tbody td.text-left { text-align: left !important; }
table.notification-table thead th.text-center,
table.notification-table tbody td.text-center { text-align: center !important; }
table.notification-table thead th.text-right,
table.notification-table tbody td.text-right { text-align: right !important; }

/* The Action column is one small icon button — with no width hint, table auto-layout
   was giving it the same width as the free-text Description column next to it.
   Scoped to .text-center specifically (not a blanket :last-child) since a couple of
   these tables end in a real content column — e.g. workout/sub-category's video list
   ends in a thumbnail link, not an action icon, and must stay wide. */
table.notification-table th.text-center:last-child,
table.notification-table td.text-center:last-child {
  width: 90px;
  white-space: nowrap;
}

/* Row actions (edit / add user / re-send icons) as ghost icon buttons */
.main_container .table td a:has(> img[src$="edit.png"]),
.main_container .table td a:has(> img[src$="add-user.png"]),
.main_container .table td a:has(> img[src$="re-send.png"]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 2px !important;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s;
}
.main_container .table td a:has(> img[src$="edit.png"]):hover,
.main_container .table td a:has(> img[src$="add-user.png"]):hover,
.main_container .table td a:has(> img[src$="re-send.png"]):hover { background: rgba(0, 0, 0, 0.08); }
.main_container .table td a > img[src$="edit.png"],
.main_container .table td a > img[src$="add-user.png"],
.main_container .table td a > img[src$="re-send.png"] { width: 20px; height: 20px; float: none !important; border-radius: 0; }
.main_container .table td a:has(> .fa-eye) {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}
.main_container .table td a:has(> .fa-eye):hover { background: rgba(0, 0, 0, 0.08); }

/* Row action icon buttons built from Font Awesome glyphs (crisp at any size,
   unlike the raster edit.png/add-user.png icons above). */
.row-action-btn,
.main_container .table td a.row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 2px;
  border-radius: var(--radius);
  color: var(--foreground) !important;
  font-size: 15px;
  cursor: pointer;
}
.row-action-btn:hover { background: rgba(0, 0, 0, 0.08); color: var(--secondary) !important; }
.row-action-btn.row-action-btn--danger:hover { color: var(--destructive) !important; }

/* =============================================================================
   Forms (portal, auth pages and modals)
   ========================================================================== */
.form-group { margin-bottom: 18px; }
.main_container label,
.modal label,
#app label { margin-bottom: 6px; }

.form-control { height: 40px; padding: 8px 12px; line-height: 1.4; }
textarea.form-control { height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; }

select.form-control:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
}

input[type="file"].form-control { height: auto; padding: 6px 8px !important; line-height: 28px; }
input[type="file"]::file-selector-button {
  border: 0;
  border-radius: calc(var(--radius) - 1px);
  background: var(--primary);
  color: var(--primary-foreground);
  font: 600 13px var(--font-sans);
  padding: 6px 12px;
  margin-right: 12px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--primary-hover); }

.form-horizontal .control-label,
.form-horizontal .col-form-label { padding-top: 10px; }

form .btn[type="submit"],
form input.btn[type="submit"] { min-height: 40px; padding-left: 20px; padding-right: 20px; }

.main_container .x_panel { padding: 22px 24px !important; }

.modal-header { padding: 18px 24px !important; }
.modal-title { font-size: 18px !important; }
.modal-body { padding: 24px !important; }
.modal-footer { padding: 14px 24px !important; }

/* Form card: heading, fields in a two-column grid, actions in a footer */
.form-card {
  max-width: 720px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px;
}
.form-card__header { margin-bottom: 22px; }
.form-card__header h2 { font-size: 20px; margin: 0 0 4px; }
.form-card__header p { margin: 0; color: var(--muted-foreground); font-size: 14px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}
.form-grid__full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .form-card { padding: 20px; }
  .form-grid { grid-template-columns: 1fr; }
}
.form-card .help-block { margin: 6px 0 0; font-size: 12.5px; }
.form-card .alert ul { margin: 0; padding-left: 18px; }
.form-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.form-card__footer .btn { min-height: 40px; padding-left: 18px; padding-right: 18px; display: inline-flex; align-items: center; }

/* Confirmation dialogs (SweetAlert2 via public/js/confirm.js) */
.swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, 0.45) !important; }
.swal2-popup.cr-swal {
  /* px, not em: Bootstrap 3 sets the root font size to 10px */
  width: min(448px, calc(100vw - 32px)) !important;
  padding: 28px 28px 24px !important;
  background: var(--popover) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-sans) !important;
}
.cr-swal .swal2-icon.cr-swal__icon { margin: 4px auto 16px !important; transform: scale(0.78); }
.cr-swal .swal2-icon.swal2-warning { border-color: var(--destructive) !important; color: var(--destructive) !important; }
.cr-swal .swal2-icon.swal2-question { border-color: var(--secondary) !important; color: var(--secondary) !important; }
.cr-swal .cr-swal__title {
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--foreground) !important;
}
.cr-swal .cr-swal__text {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.5;
  color: var(--muted-foreground) !important;
}
.cr-swal .cr-swal__actions { gap: 10px; margin: 24px 0 0 !important; width: 100%; }
.cr-swal .cr-swal__actions .btn {
  margin: 0 !important;
  min-width: 112px;
  min-height: 40px;
  font-size: 14px;
}

/* CKEditor frame */
.cke_chrome {
  border: 1px solid var(--input) !important;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: none !important;
}
.cke_top,
.cke_bottom {
  background: var(--card) !important;
  border-color: var(--hairline) !important;
  box-shadow: none !important;
}

/* =============================================================================
   Collapsed sidebar (body.nav-sm)
   ========================================================================== */
body.nav-sm .navbar.nav_title a span.brand-logo { display: inline-flex !important; }
body.nav-sm .navbar.nav_title a span.brand-logo__word { display: none !important; }

body.nav-sm .nav.side-menu > li { margin: 3px 6px; }
body.nav-sm .nav.side-menu > li > a {
  padding: 10px 2px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.25;
  text-align: center !important;
}
body.nav-sm .nav.side-menu > li > a > i {
  display: block;
  width: 100% !important;
  font-size: 20px !important;
  margin: 0 0 5px !important;
}
body.nav-sm .nav.side-menu > li > a > img { display: block; margin: 0 auto 5px !important; }

body.nav-sm .nav.side-menu > li:not(.active):not(.active-sm):not(.current-page) > a { color: rgba(255, 255, 255, 0.82) !important; }
body.nav-sm .nav.side-menu > li.active > a,
body.nav-sm .nav.side-menu > li.active-sm > a,
body.nav-sm .nav.side-menu > li.current-page > a {
  background: linear-gradient(90deg, var(--secondary) 0%, var(--secondary-hover) 100%) !important;
  color: var(--secondary-foreground) !important;
  box-shadow: 0 4px 14px rgba(220, 95, 0, 0.35) !important;
}
body.nav-sm .nav.side-menu li.active,
body.nav-sm .nav.side-menu li.active-sm,
body.nav-sm .nav.child_menu li.active { border-right: 0 !important; }

body.nav-sm ul.nav.child_menu {
  left: 100% !important;
  top: 0;
  width: 210px;
  margin-left: 6px;
  padding: 6px !important;
  background: #1c1c1c !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg);
}
body.nav-sm ul.nav.child_menu li { padding: 0 !important; background: transparent !important; }
body.nav-sm ul.nav.child_menu li:before,
body.nav-sm ul.nav.child_menu li:after { display: none !important; }
body.nav-sm ul.nav.child_menu li a {
  display: block;
  text-align: left !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.75) !important;
}
body.nav-sm ul.nav.child_menu li a:hover { background: rgba(255, 255, 255, 0.08); color: var(--secondary) !important; }
#app .card { box-shadow: var(--shadow) !important; }
#app .card-header {
  font-size: 18px;
  padding: 20px 24px 14px;
}
#app .card-body { padding: 24px; }

/* =============================================================================
   Motion & polish — sidebar, cards, tables and buttons across both portals
   (admin: layouts/admin + shared.left_nav, gym owner: layouts/user +
   usershared.left_nav). Pure additions on top of the tokens/rules above:
   no colours are redefined here, so this layers safely over either portal.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* No page-content fade/rise here. Every modal in this app (Add New User,
     Add/Edit Category, Groups, Meal Plan…) is written as a plain descendant
     of the page's content wrapper rather than appended to <body>. ANY CSS
     animation on that wrapper — even an opacity-only one — makes Chrome
     hold it in its own stacking context for as long as the animation is
     "in effect" (indefinitely, under fill-mode both/forwards). That detaches
     the modal's z-index:1050 from the root stacking context, so
     .modal-backdrop (z-index:1040, appended straight to <body>) ends up
     painting above the modal and eats every click on it — confirmed live
     with a headless-Chrome hit-test (elementFromPoint over a modal field
     resolved to the backdrop, not the field). Do not animate
     .right_col > div:first-of-type / > .row:first-of-type again without
     re-running that check. */

  /* Sidebar links: sliding accent bar + icon nudge on hover/active */
  .nav.side-menu > li > a {
    position: relative;
    overflow: hidden;
    transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
  }
  .nav.side-menu > li > a:before {
    content: '';
    position: absolute;
    left: 0; top: 15%;
    width: 3px; height: 70%;
    border-radius: 2px;
    background: var(--secondary);
    transform: scaleY(0);
    transition: transform 0.2s ease;
  }
  .nav.side-menu > li.active > a:before,
  .nav.side-menu > li.current-page > a:before {
    transform: scaleY(1);
    background: rgba(255, 255, 255, 0.7); /* the active pill is already rust — contrast against it, not blend in */
  }
  .nav.side-menu > li > a:hover { padding-left: 16px; }
  /* Collapsed sidebar: icons are centred, so skip the accent bar + padding shift. */
  body.nav-sm .nav.side-menu > li > a:before { display: none; }
  body.nav-sm .nav.side-menu > li > a:hover { padding-left: inherit; }

  .nav.side-menu > li > a > i,
  .nav.side-menu > li > a > .fa {
    display: inline-block;
    transition: transform 0.18s ease;
  }
  .nav.side-menu > li > a:hover > i,
  .nav.side-menu > li > a:hover > .fa { transform: scale(1.15); }

  .nav.child_menu > li > a { transition: color 0.18s ease, padding-left 0.18s ease; }
  .nav.child_menu > li > a:hover { padding-left: 4px; }

  /* Cards / panels settle with a soft lift where they're interactive */
  .x_panel,
  .card { transition: box-shadow 0.2s ease; }

  /* Table rows: smoother hover */
  .table > tbody > tr,
  .main_container .table > tbody > tr { transition: background-color 0.15s ease; }

  /* Buttons: a gentle lift + shadow on hover, settle on press */
  .btn {
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s,
                transform 0.12s ease, box-shadow 0.15s ease;
  }
  .btn:hover:not(:disabled):not([disabled]) { transform: translateY(-1px); box-shadow: var(--shadow) !important; }
  .btn:active:not(:disabled):not([disabled]) { transform: translateY(0); box-shadow: var(--shadow-sm) !important; }

  /* Row action ghost buttons: a lively pop on hover */
  .row-action-btn,
  .main_container .table td a:has(> img[src$="edit.png"]),
  .main_container .table td a:has(> img[src$="add-user.png"]),
  .main_container .table td a:has(> img[src$="re-send.png"]),
  .main_container .table td a:has(> .fa-eye) {
    transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
  }
  .row-action-btn:hover,
  .main_container .table td a:has(> img[src$="edit.png"]):hover,
  .main_container .table td a:has(> img[src$="add-user.png"]):hover,
  .main_container .table td a:has(> img[src$="re-send.png"]):hover,
  .main_container .table td a:has(> .fa-eye):hover { transform: scale(1.12); }

  /* Chevrons and sort carets settle instead of snapping */
  .fa-chevron-down,
  .fa-sort,
  .fa-sort-asc,
  .fa-sort-desc { transition: transform 0.18s ease, color 0.15s ease; }

  /* Toggle switches: a touch of spring */
  .slider,
  .slider:before { transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
}

/* Keyboard focus: a visible ring regardless of motion preference */
a:focus-visible,
button:focus-visible,
.nav.side-menu > li > a:focus-visible,
.row-action-btn:focus-visible {
  outline: 2px solid var(--secondary) !important;
  outline-offset: 2px;
}

/* nav_title and the active nav-item gradient are defined once, in the Sidebar
   section above — kept out of here so there's a single source of truth. */

/* Table header: a thin brand-coloured underline instead of a flat grey rule */
.table > thead > tr > th,
table.jambo_table thead th,
.main_container .table > thead > tr > th {
  border-bottom: 2px solid var(--secondary) !important;
}