/* ============================================================================
   Bhatti Gym branding overlay (bhatti branch only)
   Loaded on top of style.css. Keeps per-gym branding isolated from core CSS.
   Brand colors: yellow #F5C518, ink #0D0D0D.
   Direction: athletic / bold — condensed display type, black + chrome-yellow,
   hairline borders instead of shadows.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Hanken+Grotesque:wght@400;500;600;700;800&display=swap');

:root {
  --brand-yellow: #f5c518;
  --brand-ink: #0d0d0d;
}

/* ---- 0.6s loading splash ------------------------------------------------- */
#brand-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%, #1c1c1c 0%, #0d0d0d 70%);
  transition: opacity .4s ease;
}
#brand-splash.brand-hide { opacity: 0; pointer-events: none; }
#brand-splash .brand-splash-logo {
  width: 170px;
  height: 170px;
  animation: brandPop .6s cubic-bezier(.2, .8, .3, 1.2) both;
  filter: drop-shadow(0 8px 28px rgba(245, 197, 24, .35));
}
@keyframes brandPop {
  0%   { transform: scale(.55); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #brand-splash .brand-splash-logo { animation: none; }
}

/* ---- Login page logo + title -------------------------------------------- */
.brand-login-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin-bottom: .25rem;
}
.brand-login-logo {
  width: 92px;
  height: 92px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .18));
}
.brand-login-head h1 {
  color: var(--brand-ink);
  letter-spacing: .5px;
  margin: 0;
}

/* ---- Sidebar (dashboard) top-left logo ----------------------------------- */
.sidebar-header.brand-sidebar-header {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.brand-sidebar-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}
.sidebar-header.brand-sidebar-header h2 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: .3px;
}

/* ---- Contact + social footer (login page) -------------------------------- */
.brand-footer {
  max-width: 760px;
  margin: 1.75rem auto 1rem;
  padding: 1.25rem 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, .08);
  text-align: center;
  color: var(--text-secondary, #5b6b60);
  font-size: .9rem;
}
.brand-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.4rem;
  margin-bottom: 1rem;
}
.brand-contact a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.brand-contact a:hover { color: var(--brand-ink); }
.brand-contact svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }

.brand-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-bottom: 1rem;
}
.brand-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.brand-social a:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .22); }
.brand-social svg { width: 20px; height: 20px; fill: #fff; }
/* brand-tinted hovers */
.brand-social .s-yt:hover     { background: #ff0000; }
.brand-social .s-wa:hover     { background: #25d366; }
.brand-social .s-fb:hover     { background: #1877f2; }
.brand-social .s-ig:hover     { background: #e1306c; }
.brand-social .s-sc:hover     { background: #fffc00; }
.brand-social .s-sc:hover svg { fill: #0d0d0d; }
.brand-social .s-tt:hover     { background: #000; }

.brand-copy { margin: .25rem 0 0; font-size: .8rem; opacity: .8; }

/* ============================================================================
   THEME — athletic black + chrome-yellow. Overrides the core green theme by
   re-pointing the shared CSS variables and restyling the key components.
   60/30/10: paper/ink surfaces, yellow as the single signal color.
   ============================================================================ */
:root {
  --primary-color: #0d0d0d;
  --primary-gradient: linear-gradient(135deg, #1f1f1f 0%, #0d0d0d 100%);
  --secondary-color: #ffffff;
  --bg-color: #f4f3f0;
  --bg-secondary: #ffffff;
  --bg-tertiary: #fbf4d4;
  --text-color: #161616;
  --text-secondary: #5e5e5e;
  --text-muted: #8b8b8b;
  --border-color: #e6e4de;        /* neutral hairline (was green) */
  --shadow: 0 1px 0 rgba(0, 0, 0, .04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .10);
  --shadow-glow: 0 0 0 4px rgba(245, 197, 24, .30);
}

/* ---- Type: condensed athletic display + clean grotesque body ------------- */
body { font-family: 'Hanken Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.brand-login-head h1,
.sidebar-header.brand-sidebar-header h2,
#pageTitle,
.content-header h1,
.dashboard-recent h2,
.dashboard-intro-copy h2,
.modal-header h2 {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-weight: 400;
  letter-spacing: .04em;
  -webkit-text-fill-color: currentColor;   /* cancel the green gradient text-clip */
  background: none;
}
.brand-login-head h1 { font-size: 3rem; line-height: 1; color: var(--brand-ink); }
.content-header h1, #pageTitle { font-size: 2rem; color: var(--brand-ink); }
.sidebar-header.brand-sidebar-header h2 { font-size: 1.5rem; }

::selection { background: var(--brand-yellow); color: var(--brand-ink); }

/* ---- Login surfaces: clean paper, hairline borders, no green glow -------- */
.login-container { background: var(--bg-color); animation: none; }
.login-container::before { display: none; }
.login-box { border-radius: 14px; border: 1px solid var(--border-color); }
.login-access-card,
.login-form-panel { box-shadow: none; border: 1px solid var(--border-color); border-radius: 10px; background: #fff; }
.access-intro { background: #faf7ea; border-color: var(--border-color); border-radius: 8px; }
.access-intro strong { color: var(--brand-ink); }
.login-divider span { box-shadow: none; }

/* ---- Badges -------------------------------------------------------------- */
.login-panel-badge { background: var(--brand-ink); color: var(--brand-yellow); border-radius: 6px; text-transform: uppercase; letter-spacing: .06em; }
.member-badge { background: var(--brand-yellow); color: var(--brand-ink); }

/* ---- Inputs: neutral border, yellow focus ring --------------------------- */
.form-group input, .form-group select, .form-group textarea,
.search-input, .lookup-input {
  border: 2px solid var(--border-color); border-radius: 8px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.search-input:focus, .lookup-input:focus {
  border-color: var(--brand-ink); box-shadow: 0 0 0 3px rgba(245, 197, 24, .45); transform: none;
}

/* ---- Buttons: yellow = the action color ---------------------------------- */
.btn { border-radius: 8px; box-shadow: none; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.btn::before { display: none; }                      /* kill the white ripple (wrong on yellow) */
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .16); }
.btn-primary { background: var(--brand-yellow); color: var(--brand-ink); }
.btn-primary:hover { background: #ffd72e; box-shadow: 0 6px 18px rgba(245, 197, 24, .45); }

/* ---- Tables -------------------------------------------------------------- */
.data-table { box-shadow: none; border: 1px solid var(--border-color); border-radius: 8px; }
.data-table thead { background: var(--brand-ink); color: #fff; }
.data-table tbody tr:hover { background: rgba(245, 197, 24, .10); transform: none; }

/* ---- Dashboard sidebar: ink slab with a yellow active marker ------------- */
.sidebar { background: #0d0d0d; box-shadow: none; border-right: 1px solid #1c1c1c; }
.sidebar-header.brand-sidebar-header { background: #111; border-bottom: 1px solid #232323; }
.sidebar-nav .nav-item { color: #cccccc; }
.sidebar-nav .nav-item:hover { color: #fff; }
.sidebar-nav .nav-item:hover::before,
.sidebar-nav .nav-item.active::before { background: rgba(245, 197, 24, .12); }
.sidebar-nav .nav-item.active {
  color: var(--brand-yellow);
  background: rgba(245, 197, 24, .10);
  box-shadow: inset 3px 0 0 var(--brand-yellow);
}

/* ---- Dashboard cards: flat with hairline borders ------------------------- */
.content-header { box-shadow: none; border-bottom: 1px solid var(--border-color); }
.stat-card, .dashboard-recent, .dashboard-intro-card {
  box-shadow: none; border: 1px solid var(--border-color); border-radius: 10px;
}
.stat-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .08); }
.stat-value { color: var(--brand-ink); }