/* ==========================================================================
   AJ's Fitness Gym — Theme v2
   Bold, colorful, high-energy design system. Every page in the rebuild
   loads this single file — keep new components namespaced with `ajs-`
   so nothing here collides with page-specific styles.
   ========================================================================== */

:root{
  /* Core palette — bold gym energy */
  --ajs-black:      #0c0c11;
  --ajs-surface:    #16171f;
  --ajs-surface-2:  #1e2029;
  --ajs-border:     #2a2c38;
  --ajs-text:       #f5f6fa;
  --ajs-muted:      #9799ab;

  --ajs-orange:     #ff4d1c;
  --ajs-orange-dk:  #e13c10;
  --ajs-lime:       #d4ff3e;
  --ajs-pink:       #ff2e7e;
  --ajs-blue:       #3d8bff;
  --ajs-success:    #2fe28a;
  --ajs-warning:    #ffc93c;
  --ajs-danger:     #ff3b5c;

  --ajs-gradient:   linear-gradient(135deg, var(--ajs-orange) 0%, var(--ajs-pink) 100%);
  --ajs-gradient-2: linear-gradient(135deg, var(--ajs-lime) 0%, var(--ajs-success) 100%);

  --ajs-radius:     16px;
  --ajs-radius-sm:  10px;
  --ajs-radius-lg:  22px;
  --ajs-shadow:     0 10px 30px rgba(0,0,0,.35);
}

/* ---------- Reset & base ---------- */
*{ box-sizing:border-box; }
body.ajs-body{
  margin:0;
  background:var(--ajs-black);
  color:var(--ajs-text);
  font-family:'Poppins', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.ajs-body.ajs-light{
  --ajs-black:#f3f4f8; --ajs-surface:#ffffff; --ajs-surface-2:#f7f7fb;
  --ajs-border:#e6e7f0; --ajs-text:#14151c; --ajs-muted:#6b6d7e;
}
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.01em; }
a{ color:inherit; }
p{ margin:0; }

::selection{ background:var(--ajs-orange); color:#fff; }

/* ---------- Layout shell ---------- */
.ajs-shell{ display:flex; min-height:100vh; }

.ajs-sidebar{
  width:252px; flex-shrink:0;
  background:var(--ajs-surface);
  border-right:1px solid var(--ajs-border);
  position:fixed; top:0; left:0; bottom:0; z-index:40;
  display:flex; flex-direction:column;
  transition:transform .2s ease;
}
.ajs-sidebar__brand{
  display:flex; align-items:center; gap:.7rem;
  padding:1.3rem 1.4rem;
}
.ajs-sidebar__brand img{ width:34px; height:34px; }
.ajs-sidebar__brand span{ font-size:1.02rem; font-weight:800; letter-spacing:-.01em; line-height:1.1; }
.ajs-sidebar__brand small{ display:block; font-size:.65rem; font-weight:700; color:var(--ajs-orange); letter-spacing:.08em; }

.ajs-sidebar__nav{ flex:1; padding:.6rem .8rem; display:flex; flex-direction:column; gap:.3rem; overflow-y:auto; }
.ajs-sidebar__nav a{
  display:flex; align-items:center; gap:.85rem;
  padding:.75rem .95rem; border-radius:12px;
  color:var(--ajs-muted); text-decoration:none;
  font-size:.9rem; font-weight:600;
  transition:background .15s, color .15s, transform .1s;
}
.ajs-sidebar__nav a i{ width:18px; text-align:center; font-size:1rem; }
.ajs-sidebar__nav a:hover{ background:var(--ajs-surface-2); color:var(--ajs-text); }
.ajs-sidebar__nav a.active{
  background:var(--ajs-gradient);
  color:#fff;
  box-shadow:0 6px 16px rgba(255,77,28,.35);
}

.ajs-sidebar__footer{ padding:.8rem; border-top:1px solid var(--ajs-border); display:flex; flex-direction:column; gap:.25rem; }
.ajs-theme-toggle, .ajs-logout{
  display:flex; align-items:center; gap:.85rem;
  padding:.65rem .95rem; border-radius:12px;
  border:none; background:transparent;
  color:var(--ajs-muted); font-size:.86rem; font-weight:600;
  cursor:pointer; text-decoration:none; width:100%; text-align:left;
  font-family:inherit;
}
.ajs-theme-toggle:hover{ background:var(--ajs-surface-2); color:var(--ajs-text); }
.ajs-logout{ color:var(--ajs-danger); }
.ajs-logout:hover{ background:rgba(255,59,92,.1); }

.ajs-main-wrap{ margin-left:252px; flex:1; min-width:0; display:flex; flex-direction:column; }

.ajs-topbar{
  height:68px; flex-shrink:0;
  display:flex; align-items:center; gap:1rem;
  padding:0 1.6rem;
  border-bottom:1px solid var(--ajs-border);
  background:var(--ajs-surface);
  position:sticky; top:0; z-index:30;
}
.ajs-burger{ display:none; background:none; border:none; color:var(--ajs-text); font-size:1.2rem; cursor:pointer; }
.ajs-topbar__title{ font-weight:800; font-size:1.1rem; flex:1; }
.ajs-topbar__user{ display:flex; align-items:center; gap:.7rem; }
.ajs-topbar__name{ font-size:.87rem; color:var(--ajs-muted); font-weight:600; }
.ajs-role-chip{
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  background:var(--ajs-gradient-2); color:#0c0c11;
  padding:.3rem .7rem; border-radius:999px;
}

.ajs-main{ padding:1.7rem; flex:1; }

@media (max-width:900px){
  .ajs-sidebar{ transform:translateX(-100%); }
  .ajs-sidebar.open{ transform:translateX(0); box-shadow:0 0 0 100vmax rgba(0,0,0,.55); }
  .ajs-main-wrap{ margin-left:0; }
  .ajs-burger{ display:block; }
  .ajs-topbar__name{ display:none; }
}

/* ---------- Flash messages ---------- */
.ajs-flash{ padding:.9rem 1.2rem; border-radius:var(--ajs-radius-sm); margin-bottom:1.3rem; font-size:.9rem; font-weight:600; }
.ajs-flash-success{ background:rgba(47,226,138,.12); color:var(--ajs-success); border:1px solid rgba(47,226,138,.35); }
.ajs-flash-error{ background:rgba(255,59,92,.12); color:var(--ajs-danger); border:1px solid rgba(255,59,92,.35); }

/* ---------- Cards ---------- */
.ajs-card{
  background:var(--ajs-surface);
  border:1px solid var(--ajs-border);
  border-radius:var(--ajs-radius);
  padding:1.5rem;
}
.ajs-card--pop{
  background:var(--ajs-gradient);
  color:#fff;
  border:none;
  box-shadow:0 12px 28px rgba(255,77,28,.3);
}

/* ---------- Stat cards ---------- */
.ajs-stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem; margin-bottom:1.6rem; }
.ajs-stat{
  background:var(--ajs-surface);
  border:1px solid var(--ajs-border);
  border-radius:var(--ajs-radius);
  padding:1.3rem;
  display:flex; align-items:center; gap:1rem;
  position:relative; overflow:hidden;
  transition:transform .15s;
}
.ajs-stat:hover{ transform:translateY(-3px); }
.ajs-stat__icon{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; flex-shrink:0; color:#fff;
}
.ajs-stat__icon.orange{ background:var(--ajs-gradient); }
.ajs-stat__icon.lime{ background:var(--ajs-gradient-2); color:#0c0c11; }
.ajs-stat__icon.blue{ background:linear-gradient(135deg,#3d8bff,#7c4dff); }
.ajs-stat__icon.pink{ background:linear-gradient(135deg,#ff2e7e,#ff4d1c); }
.ajs-stat__num{ font-size:1.9rem; font-weight:800; line-height:1; }
.ajs-stat__label{ font-size:.82rem; color:var(--ajs-muted); font-weight:600; margin-top:.25rem; }

/* ---------- Buttons ---------- */
.ajs-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.4rem;
  border-radius:var(--ajs-radius-sm);
  border:none; cursor:pointer;
  font-family:inherit; font-size:.9rem; font-weight:700;
  transition:transform .1s, box-shadow .15s, opacity .15s;
  text-decoration:none;
}
.ajs-btn:active{ transform:scale(.97); }
.ajs-btn-primary{ background:var(--ajs-gradient); color:#fff; box-shadow:0 8px 20px rgba(255,77,28,.3); }
.ajs-btn-primary:hover{ box-shadow:0 10px 26px rgba(255,77,28,.42); }
.ajs-btn-lime{ background:var(--ajs-gradient-2); color:#0c0c11; box-shadow:0 8px 20px rgba(212,255,62,.25); }
.ajs-btn-outline{ background:transparent; border:1.5px solid var(--ajs-border); color:var(--ajs-text); }
.ajs-btn-outline:hover{ border-color:var(--ajs-orange); color:var(--ajs-orange); }
.ajs-btn-danger{ background:var(--ajs-danger); color:#fff; }
.ajs-btn-ghost{ background:var(--ajs-surface-2); color:var(--ajs-text); }
.ajs-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.ajs-btn-block{ width:100%; }
.ajs-btn-sm{ padding:.5rem .9rem; font-size:.8rem; }

/* ---------- Badges & pills ---------- */
.ajs-badge{ display:inline-block; padding:.3rem .75rem; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
/* Badges inside a table get a smaller footprint — they repeat down a long
   list, so the same size that reads fine standalone (e.g. on an ID card
   or profile page) feels bulky at scale here. */
.ajs-table .ajs-badge{ padding:.2rem .55rem; font-size:.64rem; letter-spacing:.01em; white-space:nowrap; }
.ajs-badge-member{ background:rgba(212,255,62,.15); color:var(--ajs-lime); }
.ajs-badge-guest{ background:rgba(255,201,60,.15); color:var(--ajs-warning); }
.ajs-badge-daily{ background:rgba(61,139,255,.15); color:var(--ajs-blue); }
.ajs-badge-monthly{ background:rgba(255,46,126,.15); color:var(--ajs-pink); }
.ajs-badge-longterm{ background:rgba(255,77,28,.15); color:var(--ajs-orange); }
.ajs-badge-expired{ background:rgba(255,59,92,.18); color:var(--ajs-danger); }
.ajs-badge-active{ background:rgba(47,226,138,.15); color:var(--ajs-success); }

.ajs-id-pill{
  display:inline-block; padding:.25rem .7rem; border-radius:999px;
  font-size:.78rem; font-weight:700; letter-spacing:.03em;
  background:rgba(61,139,255,.15); color:#7db2ff; border:1px solid rgba(61,139,255,.4);
}
.ajs-id-pill.monthly{ background:rgba(255,46,126,.15); color:#ff7fb0; border-color:rgba(255,46,126,.4); }
.ajs-id-none{ color:var(--ajs-muted); font-style:italic; font-size:.82rem; }

/* ---------- Forms ---------- */
.ajs-field{ margin-bottom:1.1rem; position:relative; }
.ajs-field label{ display:block; font-size:.82rem; font-weight:700; color:var(--ajs-muted); margin-bottom:.4rem; }
.ajs-field input,
.ajs-field select,
.ajs-field textarea{
  width:100%;
  padding:.85rem 1rem;
  background:var(--ajs-surface-2);
  border:1.5px solid var(--ajs-border);
  border-radius:var(--ajs-radius-sm);
  color:var(--ajs-text);
  font-family:inherit; font-size:.92rem;
  transition:border-color .15s, box-shadow .15s;
}
.ajs-field input:focus,
.ajs-field select:focus,
.ajs-field textarea:focus{
  outline:none; border-color:var(--ajs-orange);
  box-shadow:0 0 0 3px rgba(255,77,28,.15);
}
.ajs-field.has-error input,
.ajs-field.has-error select{ border-color:var(--ajs-danger); }
.ajs-field__error{ display:block; color:var(--ajs-danger); font-size:.78rem; margin-top:.35rem; font-weight:600; }
.ajs-field__hint{ display:block; color:var(--ajs-muted); font-size:.76rem; margin-top:.35rem; }
.ajs-row{ display:flex; gap:1rem; flex-wrap:wrap; }
.ajs-row > .ajs-field{ flex:1 1 45%; }
@media (max-width:700px){ .ajs-row > .ajs-field{ flex:1 1 100%; } }

.ajs-checkbox{ display:flex; align-items:flex-start; gap:.65rem; padding:.7rem .9rem; border-radius:var(--ajs-radius-sm); border:1.5px solid var(--ajs-border); margin-bottom:.7rem; }
.ajs-checkbox input{ margin-top:.2rem; accent-color:var(--ajs-orange); width:16px; height:16px; }
.ajs-checkbox.has-error{ border-color:var(--ajs-danger); }
.ajs-checkbox label{ font-size:.85rem; color:var(--ajs-text); font-weight:500; }
.ajs-checkbox a{ color:var(--ajs-orange); font-weight:700; text-decoration:none; }

/* ---------- Tables ---------- */
.ajs-table-wrap{
  background:var(--ajs-surface);
  border:1px solid var(--ajs-border);
  border-radius:var(--ajs-radius);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.ajs-table{ width:100%; min-width:760px; border-collapse:collapse; }
@media (max-width:760px){
  .ajs-table{ min-width:640px; }
  .ajs-table th, .ajs-table td{ padding:.7rem .8rem; font-size:.83rem; white-space:nowrap; }
  .ajs-member-cell{ min-width:170px; white-space:normal; }
}
.ajs-table th{
  text-align:left; padding:.9rem 1.1rem; font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ajs-muted);
  border-bottom:1px solid var(--ajs-border); background:var(--ajs-surface-2);
}
.ajs-table td{ padding:.9rem 1.1rem; border-bottom:1px solid var(--ajs-border); font-size:.88rem; }
.ajs-table tr:last-child td{ border-bottom:none; }
.ajs-table tr.ajs-row-hover:hover{ background:var(--ajs-surface-2); cursor:pointer; }
.ajs-table-empty td{ text-align:center; padding:2.4rem 1rem; color:var(--ajs-muted); }

.ajs-avatar{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  background:var(--ajs-surface-2); display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--ajs-orange); vertical-align:middle;
}

/* ---------- Tabs ---------- */
.ajs-tabs{ display:flex; gap:.4rem; border-bottom:1px solid var(--ajs-border); margin-bottom:1.3rem; overflow-x:auto; }
.ajs-tab{ padding:.8rem 1.2rem; font-weight:700; font-size:.88rem; color:var(--ajs-muted); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; }
.ajs-tab.active{ color:var(--ajs-orange); border-bottom-color:var(--ajs-orange); }
.ajs-tab-pane{ display:none; }
.ajs-tab-pane.active{ display:block; }

/* ---------- Modal ---------- */
.ajs-modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:100; align-items:center; justify-content:center; padding:1rem; backdrop-filter:blur(3px); }
.ajs-modal.show{ display:flex; }
.ajs-modal__box{ background:var(--ajs-surface); border:1px solid var(--ajs-border); border-radius:var(--ajs-radius-lg); padding:1.8rem; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; position:relative; }
.ajs-modal__close{ position:absolute; top:1rem; right:1rem; background:var(--ajs-surface-2); border:none; width:32px; height:32px; border-radius:50%; color:var(--ajs-muted); cursor:pointer; font-size:1.1rem; }

/* ---------- Auth (login/register) pages ---------- */
.ajs-auth-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,77,28,.25), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(212,255,62,.15), transparent 45%),
    var(--ajs-black);
}
.ajs-auth-card{ width:100%; max-width:460px; background:var(--ajs-surface); border:1px solid var(--ajs-border); border-radius:var(--ajs-radius-lg); padding:2.2rem; box-shadow:var(--ajs-shadow); }
.ajs-auth-card--wide{ max-width:680px; }
.ajs-auth-logo{ display:flex; flex-direction:column; align-items:center; gap:.6rem; margin-bottom:1.4rem; text-align:center; }
.ajs-auth-logo img{ width:46px; height:46px; }
.ajs-auth-logo h1{ font-size:1.3rem; }
.ajs-auth-logo p{ color:var(--ajs-muted); font-size:.85rem; font-weight:600; }

/* ---------- ID card ---------- */
.ajs-idcard-wrap{ max-width:320px; margin:0 auto; }
.ajs-idcard{
  background:var(--ajs-gradient);
  border-radius:var(--ajs-radius-lg);
  padding:1.7rem 1.4rem;
  text-align:center;
  color:#fff;
  box-shadow:0 16px 34px rgba(255,77,28,.35);
}
.ajs-idcard__photo{
  width:128px; height:128px; border-radius:12px; margin:0 auto .9rem; overflow:hidden;
  background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
  font-size:2.6rem; font-weight:800; border:3px solid rgba(255,255,255,.6);
}
.ajs-idcard__photo img{ width:100%; height:100%; object-fit:cover; }
.ajs-idcard__name{ font-size:1.15rem; font-weight:800; margin-bottom:.15rem; }
.ajs-idcard__type{ font-size:.8rem; opacity:.85; margin-bottom:.9rem; font-weight:600; }
.ajs-idcard__ids{ display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin-bottom:.9rem; }
.ajs-idcard__ids .ajs-id-pill{ background:rgba(255,255,255,.2); color:#fff; border-color:rgba(255,255,255,.4); }
.ajs-idcard__ids .ajs-id-none{ color:rgba(255,255,255,.75); }
.ajs-idcard__expiry{ font-size:.76rem; opacity:.85; margin-bottom:.9rem; }
.ajs-idcard__qr{ display:flex; justify-content:center; padding:.9rem; background:#fff; border-radius:12px; margin-bottom:1rem; }
.ajs-idcard__brand{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.25); opacity:.9; }
.ajs-idcard__brand-logo{ width:20px; height:20px; display:inline-flex; flex-shrink:0; }
.ajs-idcard__brand-logo svg{ width:100%; height:100%; display:block; }
.ajs-idcard__brand-text{ font-size:.7rem; font-weight:800; letter-spacing:.1em; }
.ajs-idcard__download{ width:100%; margin-top:1rem; }
.ajs-photo-preview{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--ajs-border); display:none; margin-top:.6rem; }

/* ---------- Misc ---------- */
.ajs-muted{ color:var(--ajs-muted); }
.ajs-spinner{ width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top:2px solid #fff; border-radius:50%; display:inline-block; animation:ajsSpin 1s linear infinite; }
@keyframes ajsSpin{ to{ transform:rotate(360deg); } }