/* ==========================================================================
   RAW FITNESS — Official Brand Theme (Gym ID: 1)
   Palette: Warm Ivory, Crisp White, Deep Charcoal & Signature Athletic Gold
   Derived from: sample/Raw fitness (theme.css & theme-preview.html)
   Tagline: RAW EFFORT. REAL PROGRESS.
   ========================================================================== */

:root {
  /* 1. Core Surfaces & Backgrounds */
  --bg-desktop: #FAF9F6;
  --bg-gradient: linear-gradient(135deg, #FAF9F6 0%, #F5F3EC 50%, #ECE7DB 100%);
  --bg-sidebar: rgba(255, 255, 255, 0.92);
  --bg-card: #FFFFFF;
  --bg-card-solid: #FFFFFF;
  --bg-card-hover: #FFFFFF;
  --bg-input: #FFFFFF;
  --bg-modal: #FFFFFF;

  /* 2. Warm Refined Borders */
  --border-subtle: #E4E0D5;
  --border-light: rgba(32, 32, 27, 0.08);
  --border-glass: rgba(255, 255, 255, 0.95);
  --border-card: #E4E0D5;

  /* 3. High Contrast Typography & Ink */
  --text-primary: #20201B;
  --text-secondary: #66665E;
  --text-tertiary: #8C8C82;

  /* 4. Signature Athletic Gold & Charcoal Accents */
  --gold: #D4A72C;
  --gold-light: #FBF2D6;
  --gold-dark: #785B0C;
  --gold-glow: rgba(212, 167, 44, 0.32);

  /* Primary Accent Mapping (Seamlessly adapts all buttons, highlights, & tabs) */
  --apple-blue: #D4A72C;
  --apple-blue-hover: #C49923;
  --apple-blue-subtle: #FBF2D6;
  --apple-blue-glow: rgba(212, 167, 44, 0.28);
  --apple-indigo: #171714;

  /* Custom Warm Shadows */
  --shadow-sm: 0 2px 6px rgba(32, 32, 27, 0.04);
  --shadow-md: 0 6px 24px rgba(32, 32, 27, 0.06);
  --shadow-lg: 0 12px 36px rgba(32, 32, 27, 0.09);
  --shadow-modal: 0 24px 50px -10px rgba(32, 32, 27, 0.16), 0 0 0 1px #E4E0D5;
}

/* --------------------------------------------------------------------------
   BRAND LOGO & SIDEBAR HEADER
   -------------------------------------------------------------------------- */
.brand-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #000000;
  border-radius: 9px;
  border: 1px solid rgba(212, 167, 44, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  display: block;
}

.sidebar-header {
  background: rgba(250, 249, 246, 0.75) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.brand-name, .brand-info h2 {
  color: var(--text-primary) !important;
  letter-spacing: -0.02em !important;
}

.brand-tagline, .brand-info span {
  color: var(--gold-dark) !important;
  letter-spacing: 0.12em !important;
}

.sidebar-badge {
  background: var(--gold-light) !important;
  color: var(--gold-dark) !important;
  border: 1px solid rgba(212, 167, 44, 0.35) !important;
}

/* --------------------------------------------------------------------------
   NAVIGATION & ACTIVE STATES
   -------------------------------------------------------------------------- */
.nav-item.active {
  background: var(--gold-light) !important;
  color: var(--gold-dark) !important;
  font-weight: 800 !important;
  border: 1px solid rgba(212, 167, 44, 0.35) !important;
  box-shadow: 0 2px 10px rgba(212, 167, 44, 0.16) !important;
}

.nav-item.active .nav-icon {
  filter: drop-shadow(0 2px 4px rgba(212, 167, 44, 0.3));
}

.nav-item:hover:not(.active) {
  background: rgba(242, 239, 231, 0.7) !important;
  color: var(--text-primary) !important;
}

/* --------------------------------------------------------------------------
   BUTTONS (Primary Athletic Gold & Deep Charcoal)
   -------------------------------------------------------------------------- */
.btn-primary {
  background: linear-gradient(135deg, #D4A72C 0%, #B88E1E 100%) !important;
  color: #171714 !important;
  font-weight: 800 !important;
  border: 1px solid rgba(184, 142, 30, 0.4) !important;
  box-shadow: 0 4px 14px rgba(212, 167, 44, 0.30) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #E0B438 0%, #C49923 100%) !important;
  box-shadow: 0 6px 18px rgba(212, 167, 44, 0.40) !important;
  transform: translateY(-1px);
}

.btn-create-add {
  background: #171714 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(212, 167, 44, 0.3) !important;
  box-shadow: 0 4px 12px rgba(23, 23, 20, 0.25) !important;
}

.btn-create-add:hover {
  background: #303029 !important;
  border-color: #D4A72C !important;
}

.btn-secondary {
  background: #FFFFFF !important;
  color: #20201B !important;
  border: 1px solid var(--border-subtle) !important;
}

.btn-secondary:hover {
  background: #F2EFE7 !important;
  border-color: rgba(32, 32, 27, 0.2) !important;
}

/* --------------------------------------------------------------------------
   KPI METRIC CARDS & CONTAINER SURFACES
   -------------------------------------------------------------------------- */
.card, .kpi-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

.kpi-card:hover {
  border-color: rgba(212, 167, 44, 0.5) !important;
  box-shadow: 0 8px 26px rgba(212, 167, 44, 0.16) !important;
  transform: translateY(-2px);
}

.kpi-icon-box {
  background: var(--gold-light) !important;
  color: var(--gold-dark) !important;
  border: 1px solid rgba(212, 167, 44, 0.25) !important;
}

.kpi-value {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* --------------------------------------------------------------------------
   TABLES & DIRECTORIES (Raw Fitness Signature Styling)
   -------------------------------------------------------------------------- */
.table th, .custom-table th {
  background: #F2EFE7 !important;
  color: var(--text-secondary) !important;
  border-bottom: 2px solid var(--border-subtle) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
}

.table td, .custom-table td {
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  vertical-align: middle !important;
}

.table tr:hover td, .custom-table tr:hover td {
  background: rgba(251, 242, 214, 0.28) !important;
}

.member-avatar-box {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(212, 167, 44, 0.45) !important;
  box-shadow: 0 2px 6px rgba(32, 32, 27, 0.08) !important;
  background: #FAF9F6 !important;
}

.member-avatar-box:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 4px 12px rgba(212, 167, 44, 0.25) !important;
}

.member-avatar-initials {
  background: #171714 !important;
  color: var(--gold) !important;
  font-weight: 800 !important;
  border: 1px solid var(--gold) !important;
}

.member-name-text {
  color: #171714 !important;
  font-weight: 700 !important;
}

.member-name-text:hover {
  color: var(--gold-dark) !important;
}

.member-code-pill {
  background: rgba(32, 32, 27, 0.06) !important;
  color: #20201B !important;
  border: 1px solid rgba(32, 32, 27, 0.08) !important;
}

.table-page-btn.active {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #171714 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(212, 167, 44, 0.35) !important;
}

.btn-table-view {
  background: #171714 !important;
  color: #FAF9F6 !important;
  border: 1px solid #171714 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
}

.btn-table-view:hover {
  background: #2D2D26 !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

.btn-table-plan {
  background: var(--gold-light) !important;
  color: var(--gold-dark) !important;
  border: 1px solid rgba(212, 167, 44, 0.45) !important;
}

.btn-table-plan:hover {
  background: var(--gold) !important;
  color: #171714 !important;
  border-color: var(--gold) !important;
  box-shadow: 0 2px 8px rgba(212, 167, 44, 0.3) !important;
}

.btn-table-pt {
  background: #FFFFFF !important;
  color: #20201B !important;
  border: 1px solid var(--border-subtle) !important;
}

.btn-table-pt:hover {
  background: #F2EFE7 !important;
  border-color: #8C8C82 !important;
}

.btn-table-icon {
  background: #FFFFFF !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}

.btn-table-icon:hover {
  background: #F2EFE7 !important;
  border-color: var(--gold) !important;
  color: #171714 !important;
}

/* --------------------------------------------------------------------------
   BADGES & STATUS PILLS
   -------------------------------------------------------------------------- */
.badge-primary, .status-pill.active {
  background: var(--gold-light) !important;
  color: var(--gold-dark) !important;
  border: 1px solid rgba(212, 167, 44, 0.35) !important;
  font-weight: 800 !important;
}

.badge-secondary {
  background: #F2EFE7 !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
}

/* --------------------------------------------------------------------------
   TOPBAR & SEARCH
   -------------------------------------------------------------------------- */
.topbar {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.global-search-container {
  background: #FFFFFF !important;
  border: 1px solid var(--border-subtle) !important;
}

.global-search-container:focus-within {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 167, 44, 0.18) !important;
}

.user-profile-pill {
  background: #FAF9F6 !important;
  border: 1px solid var(--border-subtle) !important;
}

.avatar.user-avatar, #topbar-avatar-initial {
  background: #171714 !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
  font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   FORMS & INPUTS
   -------------------------------------------------------------------------- */
.form-control, select.form-control {
  background: #FFFFFF !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

.form-control:focus, select.form-control:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 167, 44, 0.20) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   SELECTION ACCENT
   -------------------------------------------------------------------------- */
::selection {
  background: var(--gold) !important;
  color: #171714 !important;
}

/* --------------------------------------------------------------------------
   POS BILLING MODAL (Raw Fitness Brand Theme)
   -------------------------------------------------------------------------- */
.pos-type-tab.active {
  background: #171714 !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
}

.pos-member-avatar {
  background: #171714 !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
}

.pos-pricing-field.highlight-field .form-control {
  border-color: rgba(212, 167, 44, 0.6) !important;
  background: #FFFDF5 !important;
  color: #171714 !important;
}

.pos-pricing-field.highlight-field .form-control:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 167, 44, 0.22) !important;
}

.pos-footer-amount {
  color: var(--gold-dark) !important;
}