/* =================================================================
   FitPassio Admin — Global Stylesheet
   Single source of truth for every reusable component.
   Page templates must NOT define their own <style> blocks; if a
   pattern is needed twice, promote it here.
   ================================================================= */

/* ===== CSS Variables ===== */
:root {
    --primary:        #C62828;
    --primary-hover:  #B71C1C;
    /* `*-light` tokens are used as background tint for chips, pills, avatars,
       small icons and hover states across the whole dashboard. They were too
       faint (almost white) — bumped one Tailwind shade so they read clearly
       without becoming saturated. */
    --primary-light:  #fde2e2;
    --primary-gradient: linear-gradient(135deg, #E53935 0%, #C62828 100%);
    --sidebar-bg:     #1a0a0a;
    --sidebar-hover:  rgba(255, 255, 255, 0.06);
    --sidebar-active: rgba(229, 57, 53, 0.18);
    --sidebar-accent: #ff8a80;
    --navbar-bg:      #ffffff;
    --body-bg:        #f5f6f8;
    --card-bg:        #ffffff;
    /* Slightly darker than body-bg — used by neutral pills/chips on the
       navbar (notif bell, user menu) so they read against the white navbar. */
    --chip-bg:        #e6e9ee;
    --chip-bg-hover:  #d8dde4;
    --text-primary:   #1e293b;
    --text-secondary: #64748b;
    --text-light:     #94a3b8;
    --border:         #e2e8f0;
    --success:        #059669;
    --success-light:  #d1fadf;
    --danger:         #dc2626;
    --danger-light:   #fde2e2;
    --warning:        #d97706;
    --warning-light:  #fef0c7;
    --purple:         #7c3aed;
    --purple-light:   #ede4ff;
    --radius:         10px;
    --radius-sm:      6px;
    --radius-lg:      16px;
    --shadow:         0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:      0 4px 16px rgba(0,0,0,.08);
    --shadow-lg:      0 10px 40px rgba(0,0,0,.12);
    --sidebar-width:  260px;
    --navbar-height:  64px;
    --font:           'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --transition:     0.25s ease;
}

/* ===== Reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--body-bg); color: var(--text-primary); line-height: 1.6; min-height: 100vh; }
a   { text-decoration: none; color: inherit; }
img { max-width: 100%; }
code{ font-size: .82rem; background:#f1f5f9; padding:2px 6px; border-radius:4px; color: var(--primary); }

/* ===== Layout ===== */
.layout       { display: flex; min-height: 100vh; }
.main-content { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; }
.page-body    { flex: 1; padding: 24px 28px; animation: pageFadeIn .25s ease-out; }
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Sidebar ===== */
.sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); color: #fff; position: fixed; top:0; left:0; bottom:0; z-index:100; display:flex; flex-direction:column; transition: transform var(--transition); overflow:hidden; }
.sidebar-brand { height: var(--navbar-height); display:flex; align-items:center; gap:12px; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.2); }
.sidebar-brand-logo { width: 36px; height: 36px; border-radius: 8px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.sidebar-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-brand-text { font-size: 1.2rem; font-weight: 800; letter-spacing: .3px; }
.sidebar-brand-text span { color: var(--sidebar-accent); }
.sidebar-tagline { font-size: .68rem; color: rgba(255,255,255,.5); font-weight: 500; margin-top: 2px; letter-spacing: .5px; }
.sidebar-nav { flex:1; padding: 8px 0; overflow-y:auto; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sidebar-section-label { padding: 16px 22px 6px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.32); }
/* Sidebar items styled as pills with full border treatment.
   - default: transparent border, muted text
   - hover  : faint red-tinted bg + soft red border (matches the bell hover)
   - active : stronger red bg + bright red-accent border + white text */
.sidebar-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px;
  margin: 2px 12px;
  color: rgba(255,255,255,.7);
  font-size: .88rem; font-weight: 500;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: all var(--transition);
}
.sidebar-nav a:hover {
  background: rgba(229, 57, 53, 0.10);
  color: #fff;
  border-color: rgba(229, 57, 53, 0.45);
}
.sidebar-nav a.active {
  background: var(--sidebar-active);
  color: #fff;
  border-color: var(--sidebar-accent);
}
.sidebar-nav a i { width: 18px; text-align:center; font-size: .92rem; opacity: .85; }
.sidebar-badge { background: var(--primary); color: #fff; font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-left: auto; }

/* ===== Navbar ===== */
.navbar { height: var(--navbar-height); background: var(--navbar-bg); border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding: 0 28px; position: sticky; top:0; z-index: 50; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.navbar-left, .navbar-right { display:flex; align-items:center; gap: 14px; }
.navbar-left h1 { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); }
.navbar-sub    { font-size: .78rem; color: var(--text-secondary); }
/* Top-bar pills: transparent border by default, colored border on hover —
   matches the notif-bell hover treatment so the navbar feels consistent. */
.role-pill { display: inline-flex; align-items:center; gap:6px; padding: 5px 12px; border-radius: 20px; background: var(--warning-light); color: var(--warning); font-size: .78rem; font-weight: 600; border: 1px solid transparent; transition: border-color var(--transition); }
.role-pill:hover { border-color: var(--warning); }
.role-pill.sa { background: var(--primary-light); color: var(--primary); }
.role-pill.sa:hover { border-color: var(--primary); }
.gym-chip { display: inline-flex; align-items:center; gap:7px; padding: 5px 13px; border-radius: 20px; background: var(--success-light); color: var(--success); font-size: .82rem; font-weight: 600; border: 1px solid transparent; transition: border-color var(--transition); }
.gym-chip:hover { border-color: var(--success); }
.gym-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }

.navbar-user { display:flex; align-items:center; gap: 8px; padding: 5px 14px; border-radius: 20px; background: var(--chip-bg); color: var(--text-secondary); font-size: .85rem; cursor: pointer; transition: background var(--transition), border-color var(--transition); position: relative; border: 1px solid transparent; }
.navbar-user:hover { background: var(--chip-bg-hover); border-color: var(--text-secondary); }
.navbar-user .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display:inline-flex; align-items:center; justify-content:center; font-weight: 700; font-size: .8rem; }
.navbar-user .avatar.sa { background: var(--primary); color: #fff; }

.user-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 240px; padding: 8px; display:none; z-index: 60; }
.user-menu.open { display: block; }
.user-menu-header { padding: 10px 14px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.user-menu-name  { font-weight: 600; font-size: .92rem; color: var(--text-primary); }
.user-menu-email { font-size: .78rem; color: var(--text-secondary); margin-top: 2px; }
.user-menu-item { width:100%; display:flex; align-items:center; gap: 10px; padding: 9px 14px; border:none; background:none; cursor:pointer; font-size: .88rem; color: var(--text-primary); border-radius: var(--radius-sm); text-align:left; font-family: var(--font); }
.user-menu-item:hover { background: var(--body-bg); }
.user-menu-item.logout { color: var(--danger); }
.user-menu-item.logout:hover { background: var(--danger-light); }

.btn-logout { background:none; border:1px solid var(--border); padding:7px 16px; border-radius: 20px; color: var(--text-secondary); cursor:pointer; font-size:.85rem; display:inline-flex; align-items:center; gap:6px; transition: all var(--transition); font-family: var(--font); }
.btn-logout:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-light); }
.btn-menu-toggle { display:none; width:36px; height:36px; align-items:center; justify-content:center; border:1px solid var(--border); border-radius: var(--radius-sm); background:none; cursor:pointer; font-size: 1.05rem; color: var(--text-primary); }

/* ===== Page Header ===== */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.page-header h2 { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); }
.page-header .page-sub { font-size: .85rem; color: var(--text-secondary); margin-top: 2px; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding: 9px 18px; border-radius: var(--radius); font-size: .88rem; font-weight: 500; cursor: pointer; border:none; transition: all var(--transition); font-family: var(--font); white-space: nowrap; line-height: 1; }
.btn-primary { background: var(--primary-gradient); color:#fff; box-shadow: 0 2px 8px rgba(198,40,40,.28); }
.btn-primary:hover { box-shadow: 0 4px 16px rgba(198,40,40,.4); transform: translateY(-1px); }
.btn-outline { background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.btn-success { background: var(--success); color:#fff; }
.btn-success:hover { opacity:.9; }
.btn-danger { background: var(--danger); color:#fff; }
.btn-danger:hover { opacity:.9; }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--body-bg); color: var(--text-primary); }
.btn-sm  { padding: 6px 12px; font-size: .82rem; border-radius: var(--radius-sm); }
.btn-xs  { padding: 4px 10px; font-size: .78rem; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
.btn:disabled { opacity:.55; cursor: not-allowed; transform:none !important; box-shadow:none !important; }

.btn-icon { width: 34px; height: 34px; display:inline-flex; align-items:center; justify-content:center; border-radius: var(--radius-sm); border:none; cursor:pointer; font-size:.88rem; transition: all var(--transition); background: transparent; }
.btn-edit   { color: var(--primary); }
.btn-edit:hover   { background: var(--primary-light); }
.btn-delete { color: var(--danger); }
.btn-delete:hover { background: var(--danger-light); }
.btn-view   { color: var(--success); }
.btn-view:hover   { background: var(--success-light); }
.btn-expand { color: var(--text-secondary); }
.btn-expand:hover { background: var(--primary-light); color: var(--primary); }

/* ===== Cards ===== */
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.card-header { display:flex; align-items:center; justify-content:space-between; padding: 14px 22px; border-bottom: 1px solid var(--border); background: #fafbfc; gap: 12px; flex-wrap: wrap; }
.card-title { font-size: .98rem; font-weight: 600; display:flex; align-items:center; gap:8px; color: var(--text-primary); }
.card-title i { color: var(--primary); font-size: .92rem; }
.card-body { padding: 22px; }
.card-footer { padding: 14px 22px; border-top: 1px solid var(--border); display:flex; justify-content: space-between; align-items: center; background: #fafbfc; gap: 12px; flex-wrap: wrap; }

/* ===== Tables ===== */
.table-wrapper { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead { background: #f8fafc; }
.data-table th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: .76rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; border-bottom: 2px solid var(--border); }
.data-table td { padding: 12px 16px; font-size: .88rem; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; }
.data-table tbody tr { transition: background var(--transition); }
.data-table tbody tr:hover { background: #f8fafc; }
.data-table .text-center { text-align:center; color: var(--text-light); padding: 36px 16px; }
.text-muted   { font-size: .82rem; color: var(--text-light); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.td-nowrap    { white-space: nowrap; }
.action-buttons { display:flex; gap: 4px; align-items: center; }

/* Cell helpers */
.user-cell { display:flex; align-items:center; gap: 10px; }
.user-cell-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display:inline-flex; align-items:center; justify-content:center; font-weight: 700; font-size: .82rem; flex-shrink: 0; overflow: hidden; }
.user-cell-avatar.alt { background: #e0e7ff; color: #3730a3; }
.user-cell-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-cell-name  { font-weight: 600; color: var(--text-primary); font-size: .9rem; }
.js-profile-link {
    color: var(--text-secondary);
    margin-left: 6px;
    font-size: .75rem;
    text-decoration: none;
    transition: color var(--transition);
}
.js-profile-link:hover { color: var(--primary); }
.user-cell-meta  { font-size: .76rem; color: var(--text-light); margin-top: 2px; }

/* Filter bar */
.filter-group { display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }
.table-info   { font-size: .82rem; color: var(--text-secondary); white-space: nowrap; }

/* ===== Forms ===== */
.form-group { margin-bottom: 16px; }
.form-group label { display:flex; align-items:center; gap: 6px; margin-bottom: 6px; font-weight: 500; font-size: .85rem; color: var(--text-primary); }
.form-group label i { font-size: .82rem; color: var(--text-secondary); }
.form-input, .form-select, .form-textarea { width: 100%; padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .9rem; font-family: var(--font); color: var(--text-primary); background: #fff; transition: all var(--transition); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(198,40,40,.1); }
.form-input.error,
.form-select.error,
.form-textarea.error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.1) !important; }
.form-textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row--3col { grid-template-columns: 1fr 1fr 1fr; }
.form-help { font-size: .74rem; color: var(--text-light); margin-top: 4px; }
.form-error { font-size: .76rem; color: var(--danger); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.input-icon-wrapper { position: relative; }
.input-icon-wrapper .form-input { padding-right: 42px; }
.input-icon-btn { position:absolute; right: 2px; top:50%; transform: translateY(-50%); width: 36px; height: 36px; display:flex; align-items:center; justify-content:center; border:none; background: transparent; color: var(--text-light); cursor:pointer; border-radius: var(--radius-sm); transition: color var(--transition); }
.input-icon-btn:hover { color: var(--primary); }

/* ===== Modals ===== */
.modal-overlay { display:none; position: fixed; inset:0; background: rgba(15,23,42,.5); backdrop-filter: blur(4px); z-index: 200; align-items:center; justify-content:center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal { background: var(--card-bg); border-radius: var(--radius-lg); width: 100%; max-width: 640px; max-height: 90vh; display:flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: modalIn .22s ease; }
/* When a <form> wraps the body+footer (Plan / Send Notification / etc.),
   the form itself must flex so the body can flex:1 and scroll inside it.
   Without this rule a tall modal pushes its footer below the viewport and
   the body becomes unscrollable. */
.modal > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Subtle tinted background on every form field inside any modal — the
   reference design has fields sit on a light gray fill so they read as
   distinct boxes against the white modal surface. Scoped to `.modal-body`
   so it only affects modal forms (search inputs, register fields and
   in-page forms keep their existing styles). */
.modal-body .form-input,
.modal-body .form-select,
.modal-body .form-textarea { background: #f3f5f9; }
.modal-body .form-input:focus,
.modal-body .form-select:focus,
.modal-body .form-textarea:focus { background: #fff; }
.modal-lg { max-width: 900px; }
.modal-xl { max-width: 1100px; }
@keyframes modalIn { from { opacity: 0; transform: scale(.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding: 14px 22px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 1.05rem; font-weight: 600; }
/* Small gray subtitle under a modal title (used by Create Plan, etc.) */
.modal-header-sub { font-size: .82rem; color: var(--text-secondary); font-weight: 400; margin-top: 2px; }
.modal-close { width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; border:none; background:none; font-size: 1.45rem; color: var(--text-secondary); cursor:pointer; border-radius: var(--radius-sm); transition: all var(--transition); }
.modal-close:hover { background: var(--danger-light); color: var(--danger); }
.modal-body   { padding: 22px; overflow-y: auto; flex: 1; }
.modal-footer { display:flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: #fafbfc; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.modal-footer-hint { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--warning); font-size: .85rem; font-weight: 500; }
.modal-footer-hint i { font-size: .95rem; }

/* ===== Modal Hero header (dark gradient with icon + title + sub) =====
   Use as a modifier class: <div class="modal-header modal-header--hero">.
   Replaces the plain header on important create/setup modals (e.g. Add Member). */
.modal-header--hero {
  background: linear-gradient(135deg, #2a1010 0%, #4a1818 100%);
  padding: 20px 22px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  align-items: flex-start;
  gap: 14px;
}
.modal-hero-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff; flex-shrink: 0;
}
.modal-hero-text { flex: 1; min-width: 0; }
.modal-header--hero h3 { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0 0 3px; }
.modal-hero-sub { font-size: .82rem; color: rgba(255,255,255,0.70); font-weight: 400; }
.modal-header--hero .modal-close {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.modal-header--hero .modal-close:hover {
  background: rgba(255,255,255,0.20); color: #fff;
}

/* ===== Stepper (Step 1 → Step 2 → Step 3) ===== */
.stepper {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  background: linear-gradient(135deg, #1c0808 0%, #3a1212 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stepper-step { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.45); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.stepper-step.done   { color: rgba(255,255,255,0.80); }
.stepper-step.active { color: #fff; }
.stepper-circle {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700;
  background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.14);
}
.stepper-step.done   .stepper-circle { background: var(--success); color: #fff; border-color: var(--success); }
.stepper-step.active .stepper-circle { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(229,57,53,.18); }
.stepper-line { flex: 1; height: 1px; background: rgba(255,255,255,0.10); }

/* ===== Modal info card (yellow / green / red banner inside modal body) ===== */
.modal-info-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid;
  margin-bottom: 14px;
}
.modal-info-card .info-icon {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: .92rem;
}
.modal-info-card-title { font-weight: 700; font-size: .92rem; margin-bottom: 2px; }
.modal-info-card-sub   { font-size: .82rem; line-height: 1.4; }
.modal-info-card.warning  { background: var(--warning-light); border-color: rgba(217,119,6,0.3);  color: var(--warning); }
.modal-info-card.warning  .info-icon { background: rgba(217,119,6,0.18); color: var(--warning); }
.modal-info-card.success  { background: var(--success-light); border-color: rgba(5,150,105,0.3);  color: var(--success); }
.modal-info-card.success  .info-icon { background: rgba(5,150,105,0.18); color: var(--success); }

/* ===== Section divider ("MEMBER DETAILS" line) ===== */
.section-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0 14px;
  font-size: .68rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-light);
}
.section-divider::before,
.section-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ===== Input with leading icon inside ===== */
.input-icon-left { position: relative; }
.input-icon-left .input-ico-l {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-light); pointer-events: none; font-size: .92rem;
}
.input-icon-left .form-input { padding-left: 38px; }

/* ===== Option grid (Male / Female / Other style chips) ===== */
.option-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.option-card {
  cursor: pointer; user-select: none;
  background: var(--body-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: .85rem; font-weight: 600; color: var(--text-secondary);
  transition: all var(--transition);
}
.option-card .option-emoji { font-size: 1.5rem; line-height: 1; }
.option-card:hover { border-color: var(--primary); color: var(--primary); }
.option-card.selected {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* ===== Pagination ===== */
.pagination { display:flex; align-items:center; gap: 4px; flex-wrap: wrap; }
.pagination button { min-width: 34px; height: 34px; padding: 0 9px; display:inline-flex; align-items:center; justify-content:center; border: 1px solid var(--border); background: var(--card-bg); border-radius: var(--radius-sm); font-size: .82rem; color: var(--text-primary); cursor:pointer; transition: all var(--transition); font-family: var(--font); }
.pagination button:hover:not(:disabled):not(.active) { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.pagination button.active { background: var(--primary-gradient); border-color: var(--primary); color:#fff; box-shadow: 0 2px 6px rgba(198,40,40,.3); }
.pagination button:disabled { opacity: .4; cursor: default; }

/* ===== Status Badges ===== */
.badge { display:inline-flex; align-items:center; padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 600; letter-spacing: .3px; white-space: nowrap; }
.badge-success { background: var(--success-light); color: var(--success); }
.badge-danger  { background: var(--danger-light);  color: var(--danger); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-purple  { background: var(--purple-light);  color: var(--purple); }
.badge-muted   { background: #f1f5f9; color: var(--text-secondary); }

/* ===== Stat Cards ===== */
.stats-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 18px; }
.stats-grid-4 { grid-template-columns: repeat(4, 1fr); }
.stats-grid-5 { grid-template-columns: repeat(5, 1fr); }
/* Compact horizontal stat-card — icon on the left, value + label stacked
   on the right. Set as the default for `.stat-card` so every page that
   already uses this component (dashboard, super-admin, notifications,
   member leaves modal, etc.) gets the same compact look without HTML
   changes. CSS Grid lets the existing `.stat-card-top` wrapper span
   both rows on the left while value/label stack on the right. */
.stat-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 14px 16px;
    box-shadow: var(--shadow); transition: all var(--transition);
    position: relative; overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-card-accent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.stat-card-accent.accent-blue::before   { background: linear-gradient(135deg,#2563eb,#60a5fa); }
.stat-card-accent.accent-red::before    { background: var(--primary-gradient); }
.stat-card-accent.accent-green::before  { background: linear-gradient(135deg,#059669,#34d399); }
.stat-card-accent.accent-orange::before { background: linear-gradient(135deg,#d97706,#fbbf24); }
.stat-card-accent.accent-purple::before { background: linear-gradient(135deg,#7c3aed,#a78bfa); }
.stat-card-top   { grid-row: 1 / span 2; align-self: center; margin-bottom: 0; display: flex; }
.stat-card .stat-label { font-size: .78rem; color: var(--text-secondary); margin-top: 0; font-weight: 500; grid-column: 2; align-self: start; }
.stat-card .stat-value { font-size: 1.4rem;  font-weight: 800; color: var(--text-primary); line-height: 1.15; grid-column: 2; align-self: end; }
.stat-card .stat-sub   { font-size: .72rem; color: var(--text-light); margin-top: 2px; grid-column: 2; }
.stat-card .stat-icon  { width: 40px; height: 40px; border-radius: var(--radius); display:inline-flex; align-items:center; justify-content:center; font-size: 1.05rem; flex-shrink: 0; }
.stat-icon.blue   { background: #eef2ff; color: #4f46e5; }
.stat-icon.red    { background: var(--primary-light); color: var(--primary); }
.stat-icon.green  { background: var(--success-light); color: var(--success); }
.stat-icon.orange { background: var(--warning-light); color: var(--warning); }
.stat-icon.purple { background: var(--purple-light);  color: var(--purple); }

/* Compact horizontal stat-card variant — used inside modals where the
   default top-icon-then-value layout is too tall. */
.stat-card--row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.stat-card--row .stat-icon { width: 38px; height: 38px; flex-shrink: 0; }
.stat-card--row .stat-value { font-size: 1.4rem; }
.stat-card--row .stat-label { margin-top: 0; font-size: .78rem; }

.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ===== Toast ===== */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 300; display:flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 12px 20px; border-radius: var(--radius); font-size: .88rem; font-weight: 500; box-shadow: var(--shadow-lg); animation: toastIn .3s ease; display:flex; align-items:center; gap: 8px; min-width: 280px; pointer-events: auto; }
.toast.success { background: var(--success); color:#fff; }
.toast.error   { background: var(--danger); color:#fff; }
.toast.warning { background: var(--warning); color:#fff; }
.toast.info    { background: #2563eb; color:#fff; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* ===== Loader ===== */
/* (Loader styles unified below in the GLOBAL LOADER section.) */
@keyframes spin { to { transform: rotate(360deg); } }

/* =================================================================
   GLOBAL LOADER — single style for first-paint splash AND
   per-request loader. Semi-transparent dim backdrop + centered
   white "Loading..." chip with red spinner. Page content stays
   visible behind the dim layer.
   - First-paint splash: <div class="app-loader" id="pageLoader">
     hide via .hidden class once page is ready.
   - Per-request loader: <div class="loader-overlay" id="loaderOverlay">
     show via .show class while a request is in-flight.
   ================================================================= */
.app-loader,
.loader-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    transition: opacity .3s ease, visibility .3s ease;
}
.app-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-overlay     { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-overlay.show{ opacity: 1; visibility: visible; pointer-events: auto; }

/* Brand-as-loader: text + integrated spinner, no card chrome */
.loader-chip {
    background: transparent;
    box-shadow: none;
    padding: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.loader-brand {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    line-height: 1;
}
.loader-brand-accent { color: var(--primary); }
.loader-tag { display: none; }
.loader-chip-ring,
.spinner {
    width: 36px; height: 36px;
    border: 4px solid rgba(229,57,53,.22);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
}

/* ── Legacy splash classes (kept as no-op fallback for any old markup) ── */
.app-loader-brand { font-size: 1.5rem; font-weight: 800; letter-spacing: .3px; color: var(--text-primary); }
.app-loader-tag   { font-size: .72rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-light); margin-top: 4px; }
.app-loader-ring  { width: 26px; height: 26px; border: 3px solid rgba(229,57,53,.18); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; margin-top: 10px; }

/* Button-internal spinner (used inside submit buttons during loading) */
/* Visible by default (block); add `.hidden` to suppress, same pattern as
   every other show/hide element in the app. */
.btn-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: spin .75s linear infinite; display: block; }

/* ===== Confirm Dialog ===== */
.confirm-overlay { display:none; position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(4px); z-index: 220; align-items:center; justify-content:center; padding: 20px; }
.confirm-overlay.open { display:flex; }
.confirm-box { background: var(--card-bg); border-radius: var(--radius-lg); padding: 24px; max-width: 420px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); animation: modalIn .2s ease; }
.confirm-box h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.confirm-box p { margin-bottom: 22px; font-size: .92rem; color: var(--text-secondary); }
.confirm-actions { display:flex; gap: 10px; justify-content: center; }

/* ===== Toggle Switch ===== */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position:absolute; cursor:pointer; inset:0; background: #cbd5e1; transition: .25s; border-radius: 22px; }
.slider:before { position:absolute; content:""; height: 16px; width: 16px; left: 3px; bottom: 3px; background:#fff; transition:.25s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .slider { background: var(--success); }
.switch input:checked + .slider:before { transform: translateX(18px); }
.switch input:disabled + .slider { opacity:.6; cursor: not-allowed; }
.status-text { margin-left: 8px; font-weight: 500; font-size: .82rem; display: inline-block; vertical-align: middle; }
.status-text.active   { color: var(--success); }
.status-text.inactive { color: var(--danger); }

/* ===== Tabs ===== */
.tab-bar { display: inline-flex; gap: 4px; padding: 5px; background: var(--primary-light); border-radius: 10px; margin-bottom: 14px; }
.tab-btn { position: relative; padding: 8px 18px; border-radius: 8px; border: none; background: transparent; color: var(--text-secondary); font-weight: 600; font-size: .87rem; cursor:pointer; transition: .2s; font-family: var(--font); }
.tab-btn:hover { background: rgba(198,40,40,.12); color: var(--primary); }
.tab-btn.active { background: var(--primary); color:#fff; box-shadow: 0 2px 6px rgba(198,40,40,.25); }
/* Subtle vertical divider between adjacent tabs (in the theme primary tint).
   Hidden next to the active tab and on the last button so the separator
   never sits beside the filled red pill. */
.tab-btn:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: rgba(198, 40, 40, 0.30);
    pointer-events: none;
}
.tab-btn.active::after,
.tab-btn.active + .tab-btn::before { content: none; }
.tab-btn.active + .tab-btn::after { /* keep separator after the next-of-active too */ }
/* Count chip inside tab labels — quietly indicates how many rows are in each tab. */
.tab-count { font-weight: 500; opacity: .75; margin-left: 4px; font-variant-numeric: tabular-nums; }
.tab-btn.active .tab-count { opacity: .9; }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ===== Empty state ===== */
.empty-state { text-align:center; padding: 50px 20px; color: var(--text-light); }
.empty-state-icon { font-size: 2.4rem; margin-bottom: 10px; opacity: .5; }
.empty-state p { font-size: .92rem; }

/* ===== Misc helpers ===== */
.flex      { display:flex; }
.gap-2     { gap: 8px; }
.gap-3     { gap: 12px; }
.mt-1      { margin-top: 2px; }
.mt-2      { margin-top: 8px; }
.mt-4      { margin-top: 4px; }
.mt-6      { margin-top: 6px; }
.mb-2      { margin-bottom: 8px; }
.text-right{ text-align: right; }
.hidden    { display: none !important; }

/* Color helpers (companions to existing .text-success / .text-danger / .text-muted) */
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary); }
.text-cap     { text-transform: capitalize; }
.nowrap       { white-space: nowrap; }

/* Action icon-button color variants — used inside table action cells.
   Pair with the existing `.btn-icon` base class:
     <button class="btn-icon btn-icon-success">…</button>             */
.btn-icon-success { color: var(--success); }
.btn-icon-success:hover { background: var(--success-light); }
.btn-icon-warning { color: var(--warning); }
.btn-icon-warning:hover { background: var(--warning-light); }
.btn-icon-danger  { color: var(--danger);  }
.btn-icon-danger:hover  { background: var(--danger-light); }

/* Description cell (long-text column rendered as muted, narrow text).
   Used in table rows for "reason / description / address" columns. */
.td-desc       { max-width: 240px; color: var(--text-secondary); font-size: .84rem; }
.td-desc--wide { max-width: 280px; color: var(--text-secondary); font-size: .84rem; }
.td-secondary  { color: var(--text-secondary); font-size: .84rem; }

/* Tiny badge variant (used for status chips inline next to a heading). */
.badge-xs     { font-size: .7rem; }
.ml-6         { margin-left: 6px; }
.ml-8         { margin-left: 8px; }

/* Common search input widths used in card-header filter rows.
   Each variant also renders a magnifying-glass icon on the left via SVG
   background — same look across every page (members, plans, leaves,
   notifications, super-admin lists, etc.) without HTML changes. */
.tbl-search,
.tbl-search--lg,
.tbl-search--sm,
.tbl-search--md,
.tbl-search--xs {
  padding-left: 38px;
  /* Slightly darker pill background so the search bar stands out from the
     white card the same way the navbar pills do. */
  background-color: var(--chip-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px 16px;
}
/* Tint icon to brand red when input is focused. */
.tbl-search:focus,
.tbl-search--lg:focus,
.tbl-search--sm:focus,
.tbl-search--md:focus,
.tbl-search--xs:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C62828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.tbl-search       { width: 280px; }
.tbl-search--lg   { width: 300px; }
.tbl-search--sm   { width: 220px; }
.tbl-search--md   { width: 200px; }
.tbl-search--xs   { width: 140px; }

/* Per-page size dropdown — compact themed select used in
   "Show 10 per page" controls. Themed red border on focus, same as
   form-input fields. Applied via the global `bindPageSize()` helper. */
.page-sizer { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .85rem; flex-wrap: wrap; }
.page-size-select {
  width: 72px;
  padding: 6px 28px 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 8px center / 14px;
  font-size: .88rem;
  font-family: var(--font);
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.page-size-select:hover { border-color: var(--primary); }
.page-size-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(198,40,40,.1); }

/* Small confirm-style modal (e.g. Change Password) */
.modal-sm { max-width: 440px; }

/* Card header variant with no top border (used on stacked cards) */
.card-header--no-top { border-top: none; }

/* Truncated text cell for narrow table columns */
.cell-text-sm { max-width: 240px; color: var(--text-secondary); font-size: .84rem; }
.cell-text-md { max-width: 280px; color: var(--text-secondary); font-size: .84rem; }

/* Stat-grid spacing override for super-admin pages */
.stats-grid--mb { margin-bottom: 18px; }

/* Inline icon-only flex rows used in modal content + version-control */
.flex-row     { display: flex; align-items: center; gap: 10px; }
.flex-row-sm  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Tiny chevron icon next to user name in topbar */
.icon-chevron-down { font-size: .7rem; color: var(--text-light); }

/* Inline header-icon spacing (used inside modal/card-header h3) */
.icon-mr  { margin-right: 6px; }
.icon-xs  { font-size: .7rem; }
.mb-12    { margin-bottom: 12px; }
.mb-60    { margin-bottom: 60px; }
.mb-100   { margin-bottom: 100px; }
.p-40     { padding: 40px; }

/* Required-asterisk marker used next to form labels. */
.text-required { color: var(--danger); margin-left: 2px; }

/* ===== Notification bell ===== */
.notif-bell-wrapper { position: relative; }
.notif-bell { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: var(--chip-bg); border: 1px solid var(--border); border-radius: 50%; color: var(--text-secondary); cursor: pointer; transition: all var(--transition); position: relative; }
.notif-bell:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--primary); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 360px; max-height: 460px; overflow: hidden; display: none; z-index: 60; }
.notif-panel.open { display: flex; flex-direction: column; }
.notif-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.notif-mark-all { background: none; border: none; color: var(--primary); font-size: .8rem; cursor: pointer; font-weight: 600; font-family: var(--font); }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item { padding: 12px 16px; display: flex; gap: 10px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--transition); }
.notif-item:hover { background: var(--body-bg); }
.notif-item.unread { background: var(--primary-light); }
.notif-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.notif-title { font-size: .88rem; font-weight: 600; color: var(--text-primary); }
.notif-body  { font-size: .8rem; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
.notif-time  { font-size: .72rem; color: var(--text-light); margin-top: 4px; }
.notif-empty      { padding: 30px; text-align: center; color: var(--text-light); font-size: .88rem; }
.notif-empty-icon { display: block; font-size: 1.6rem; margin-bottom: 6px; }
/* Secondary time line under a date in table cells (fmtDateTime helper). */
.fmt-time-sub     { font-size: .72rem; color: var(--text-light); margin-top: 1px; }

/* ===== Responsive ===== */
/* =================================================================
   LEGACY ALIASES — temporary safety net for any old class references
   leftover from the pre-refactor template code. New code should not
   use these; they map old names to new visuals.
   ================================================================= */
.wrap { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; }
.body { flex: 1; padding: 24px 28px; }
.section { display: block; }
.section.on { display: block; }

.tbl { width: 100%; border-collapse: collapse; }
.tbl thead { background: #f8fafc; }
.tbl th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: .76rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; border-bottom: 2px solid var(--border); }
.tbl td { padding: 12px 16px; font-size: .88rem; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; }
.tbl tbody tr:hover { background: #f8fafc; }
.table-scroll { overflow-x: auto; }

.bx { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 600; }
.bx-act, .bx-app { background: var(--success-light); color: var(--success); }
.bx-off, .bx-rej { background: var(--danger-light); color: var(--danger); }
.bx-pnd          { background: var(--warning-light); color: var(--warning); }

.mc  { display: flex; align-items: center; gap: 10px; }
.av  { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; flex-shrink: 0; }
.av.alt { background: #e0e7ff; color: #3730a3; }
.mn  { font-weight: 600; color: var(--text-primary); font-size: .9rem; }
.ms  { font-size: .76rem; color: var(--text-light); margin-top: 2px; }

.fc  { width: 100%; padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .9rem; font-family: var(--font); color: var(--text-primary); background: #fff; }
.fc:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(198,40,40,.1); }

.btn-dark { background: var(--primary-gradient); color: #fff; box-shadow: 0 2px 8px rgba(198,40,40,.28); }
.btn-dark:hover { box-shadow: 0 4px 16px rgba(198,40,40,.4); transform: translateY(-1px); }
.btn-no   { background: var(--danger); color: #fff; }
.btn-ok   { background: var(--success); color: #fff; }

.tbl-actions { display: flex; gap: 4px; align-items: center; }
.tbl-btn-edit, .tbl-btn-view, .tbl-btn-renew, .tbl-btn-assign { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: .82rem; transition: all var(--transition); }
.tbl-btn-edit  { color: var(--primary); }
.tbl-btn-edit:hover { background: var(--primary-light); }
.tbl-btn-view  { color: var(--success); }
.tbl-btn-view:hover { background: var(--success-light); }
.tbl-btn-renew { color: var(--warning); }
.tbl-btn-assign{ color: var(--success); }

.empty    { text-align: center; padding: 36px 16px; color: var(--text-light); }
.empty-ic { font-size: 2rem; margin-bottom: 8px; opacity: .55; }
.td-nil   { color: var(--text-light); font-size: .82rem; }
.td-truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-sm  { font-size: .82rem; }

.sh    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.sh-t  { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); }
.sh-s  { font-size: .85rem; color: var(--text-secondary); margin-top: 2px; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 18px; }
.sc    { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: space-between; transition: all var(--transition); }
.sc:hover  { box-shadow: var(--shadow-md); }
.sc-body   { flex: 1; }
.sc-lbl    { font-size: .8rem; color: var(--text-secondary); font-weight: 500; }
.sc-num    { font-size: 1.55rem; font-weight: 800; color: var(--text-primary); margin-top: 2px; }
.sc-ico    { width: 42px; height: 42px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.sc-ico.bl, .sc.bl .sc-ico  { background: #eef2ff; color: #4f46e5; }
.sc-ico.gr, .sc.gr .sc-ico  { background: var(--success-light); color: var(--success); }
.sc-ico.am, .sc.am .sc-ico  { background: var(--warning-light); color: var(--warning); }
.sc-ico.rd, .sc.rd .sc-ico  { background: var(--primary-light); color: var(--primary); }

.ftabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--primary-light); border-radius: 10px; margin-bottom: 14px; }
.ftab  { padding: 8px 18px; border-radius: 8px; border: none; background: transparent; color: var(--text-secondary); font-weight: 600; font-size: .87rem; cursor: pointer; transition: .2s; font-family: var(--font); }
.ftab:hover  { background: rgba(198,40,40,.12); color: var(--primary); }
.ftab.on     { background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(198,40,40,.25); }

.tbl-toolbar    { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--border); background: #fafbfc; gap: 12px; flex-wrap: wrap; }
.tbl-search     { flex: 1; max-width: 320px; }
.per-page-wrap  { display: inline-flex; align-items: center; gap: 6px; }
.per-page-label { font-size: .82rem; color: var(--text-secondary); }
.per-page-select{ padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .85rem; }

.pagination-container { display: flex; align-items: center; gap: 4px; padding: 14px 22px; border-top: 1px solid var(--border); background: #fafbfc; flex-wrap: wrap; }

.plan-tag { display: inline-flex; padding: 3px 10px; border-radius: 20px; background: var(--primary-light); color: var(--primary); font-size: .72rem; font-weight: 600; }
.amt-paid { font-weight: 700; color: var(--text-primary); }
.amt-due  { font-size: .76rem; color: var(--danger); }
.amt-ok   { font-size: .76rem; color: var(--success); }

/* Old loader splash classes (used by reverted layout pageLoader) */
.al-brand { font-size: 1.6rem; font-weight: 800; letter-spacing: .3px; color: var(--text-primary); }
.al-brand-red { color: var(--primary); }
.al-spin { display: inline-block; width: 18px; height: 18px; margin-left: 10px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }

/* Hero block (old dashboard hero) */
.hero { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; background: var(--primary-gradient); color: #fff; border-radius: var(--radius-lg); margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.hero-title { font-size: 1.4rem; font-weight: 800; }
.hero-pill  { display: inline-block; padding: 3px 10px; background: rgba(255,255,255,.2); border-radius: 12px; font-size: .72rem; font-weight: 700; margin-left: 8px; vertical-align: middle; }
.hero-sub   { font-size: .88rem; opacity: .9; margin-top: 4px; }
.hero-cta   { background: rgba(0,0,0,.25) !important; }

/* Old modal-overlay class .ov */
.ov { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(4px); z-index: 200; align-items: center; justify-content: center; padding: 20px; }
.ov.open { display: flex; }
.mbox { background: var(--card-bg); border-radius: var(--radius-lg); width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.mh { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--border); }
.mt { font-size: 1.05rem; font-weight: 600; }
.mst { font-size: .82rem; color: var(--text-secondary); margin-top: 2px; }
.mcl { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 1.2rem; }
.mb { padding: 22px; overflow-y: auto; flex: 1; }
.mf { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: #fafbfc; }

#toast { position: fixed; top: 20px; right: 20px; padding: 12px 20px; border-radius: var(--radius); background: var(--success); color: #fff; font-size: .88rem; box-shadow: var(--shadow-lg); z-index: 300; opacity: 0; transition: opacity .3s; pointer-events: none; }
#toast.show { opacity: 1; pointer-events: auto; }
#toast.error   { background: var(--danger); }
#toast.warning { background: var(--warning); }
#toast.info    { background: #2563eb; }

/* =================================================================
   RESPONSIVE — 4-tier system that covers every page in the app.
   Edit breakpoints here once and every page reflows consistently.

       xl  ≥1280px      desktop default (unstyled, the base rules win)
       lg  ≤1279px      small desktop / large tablet
       md  ≤1023px      tablet
       sm  ≤767px       large phone — sidebar slides out
       xs  ≤480px       small phone — buttons stack, modal full-width

   Utility classes:
       .hide-below-md      hidden at ≤1023px
       .hide-below-sm      hidden at ≤767px
       .hide-below-xs      hidden at ≤480px
       .show-only-mobile   hidden at ≥768px (visible on sm and below)

   Responsive table: add `.data-table--responsive` to a `.data-table`
   and put `data-label="ColumnName"` on every <td>. At ≤640px each row
   stacks as a card showing "Label: value" pairs.
   ================================================================= */

/* ----- lg (≤1279px) — drop a column off wide grids ------------- */
@media (max-width: 1279px) {
    .stats-grid-4    { grid-template-columns: repeat(3, 1fr); }
    .stats-grid-5    { grid-template-columns: repeat(3, 1fr); }
    .dashboard-grid  { grid-template-columns: 1fr 1fr; }
}

/* ----- md (≤1023px) — collapse big grids; trim topbar ---------- */
@media (max-width: 1023px) {
    .stats-grid-4   { grid-template-columns: repeat(2, 1fr); }
    .stats-grid-5   { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }

    /* Topbar — keep icons, drop the text labels so the row fits. */
    .role-pill,
    .gym-chip,
    .navbar-user > span:not(.dot)        { font-size: 0; }    /* hide text */
    .role-pill > i,
    .gym-chip > .dot,
    .navbar-user .avatar,
    .navbar-user .icon-chevron-down,
    .role-pill,
    .gym-chip,
    .navbar-user                          { font-size: initial; padding: 6px 10px; }
    .navbar                               { padding: 0 16px; }

    .hide-below-md { display: none !important; }
}

/* ----- sm (≤767px) — sidebar slides out, stacks ---------------- */
@media (max-width: 767px) {
    .sidebar             { transform: translateX(-100%); }
    .sidebar.open        { transform: translateX(0); }
    .main-content        { margin-left: 0; }
    .page-header         { flex-direction: column; align-items: flex-start; gap: 10px; }
    .page-actions        { width: 100%; }
    .form-row,
    .form-row--3col      { grid-template-columns: 1fr; }
    .stats-grid,
    .stats-grid-4,
    .stats-grid-5        { grid-template-columns: 1fr; }
    .dashboard-grid      { grid-template-columns: 1fr; }
    .btn-menu-toggle     { display: inline-flex; }
    .modal               { max-width: 95%; }
    .filter-group        { width: 100%; flex-direction: column; align-items: stretch; }
    .filter-group .form-input,
    .filter-group .form-select { width: 100% !important; }
    .notif-panel         { width: 320px; right: -50px; }

    /* Card footer (page-sizer + showing-info + pagination): wrap and drop
       the middle "Showing X of Y" line so only sizer + pagination show. */
    .card-footer .table-info { display: none; }

    /* Hide the gym chip entirely on tiny screens (still reachable via the
       sidebar's "Switch Business" link). */
    .gym-chip            { display: none; }
    /* Role pill keeps the icon but no text. */
    .role-pill           { padding: 6px 9px; }

    .hide-below-sm       { display: none !important; }
    .show-only-mobile    { display: initial; }
}
@media (min-width: 768px) {
    .show-only-mobile    { display: none !important; }
}

/* ----- xs (≤480px) — extreme compaction ------------------------ */
@media (max-width: 480px) {
    .modal-footer        { flex-direction: column-reverse; align-items: stretch; }
    .modal-footer .btn   { width: 100%; }
    .modal-footer-hint   { margin-right: 0; margin-bottom: 6px; }
    .modal-body          { padding: 16px; }
    .card-header,
    .card-footer         { padding: 12px 14px; }
    .data-table th,
    .data-table td       { padding: 10px 12px; font-size: .82rem; }
    .hide-below-xs       { display: none !important; }
}

/* =================================================================
   RESPONSIVE TABLE (card-stack mode)
   Apply `.data-table--responsive` and add `data-label="..."` on every
   <td>. At ≤640px each row becomes a vertical card with label/value
   pairs, header row is hidden.
   ================================================================= */
@media (max-width: 640px) {
    .data-table--responsive thead { display: none; }
    .data-table--responsive,
    .data-table--responsive tbody,
    .data-table--responsive tr,
    .data-table--responsive td    { display: block; width: 100%; }
    .data-table--responsive tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 10px;
        background: var(--card-bg);
        padding: 4px 0;
    }
    .data-table--responsive td {
        border: none;
        border-bottom: 1px solid var(--border);
        padding: 10px 14px;
        text-align: right;
        position: relative;
        padding-left: 44%;
    }
    .data-table--responsive td:last-child { border-bottom: none; }
    .data-table--responsive td::before {
        content: attr(data-label);
        position: absolute;
        left: 14px;
        width: 40%;
        text-align: left;
        font-weight: 600;
        font-size: .72rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: .4px;
    }
    /* Action cells: let buttons sit on the right with no label gap. */
    .data-table--responsive td[data-label="Actions"],
    .data-table--responsive td[data-label="Action"] {
        padding-left: 14px;
        text-align: left;
    }
    .data-table--responsive td[data-label="Actions"]::before,
    .data-table--responsive td[data-label="Action"]::before { content: none; }
}

/* =================================================================
   GYM PROFILE PAGE — extracted from gym_profile.html. All classes are
   namespaced .gp-* so they don't collide with anything else.
   ================================================================= */
.gp-banner { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.gp-avatar { width:88px; height:88px; border-radius:14px; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:800; overflow:hidden; flex-shrink:0; }
.gp-avatar img { width:100%; height:100%; object-fit:cover; }
.gp-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gp-info-tile { background:#f8fafc; border:1px solid var(--border); border-radius:10px; padding:13px; }
.gp-info-tile-label { font-size:.68rem; color:var(--text-light); font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; }
.gp-info-tile-value { font-size:.92rem; font-weight:600; color:var(--text-primary); }
.gp-section-title { font-size:.74rem; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:.6px; margin:18px 0 10px; }
.gp-facility { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; background:var(--success-light); color:var(--success); border-radius:20px; font-size:.78rem; font-weight:600; }
.gp-gallery { display:flex; flex-wrap:wrap; gap:10px; }
.gp-gallery-thumb { width:120px; height:90px; border-radius:8px; overflow:hidden; border:1px solid var(--border); position:relative; }
.gp-gallery-thumb img { width:100%; height:100%; object-fit:cover; }
.gp-fac-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; max-height:220px; overflow-y:auto; padding:6px; border:1px solid var(--border); border-radius:6px; }

/* Gym-profile inline-layout helpers (used inside JS-rendered banner / hours blocks). */
.gp-banner-info       { flex: 1; }
.gp-banner-title-row  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gp-banner-name       { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); }
.gp-info-tile--full   { grid-column: 1 / -1; }
.gp-hours-row         { gap: 18px; }
.gp-hours-block       { text-align: center; }
.gp-hours-time        { font-size: 1.1rem; font-weight: 700; }
.gp-hours-arrow       { font-size: 1.2rem; }
.gp-form-row          { gap: 14px; margin-bottom: 14px; }
.gp-gallery-edit-row  { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.gp-facility-row      { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-fac-check { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; cursor:pointer; transition:.18s; }
.gp-fac-check:hover { background:var(--body-bg); }
.gp-fac-check.checked { background:var(--success-light); color:var(--success); }
.gp-fac-check input { accent-color:var(--success); }
.gp-edit-thumb { width:90px; height:90px; border-radius:8px; overflow:hidden; border:1px solid var(--border); position:relative; }
.gp-edit-thumb img { width:100%; height:100%; object-fit:cover; }
.gp-thumb-remove { position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; background:rgba(220,38,38,.92); color:#fff; border:none; cursor:pointer; font-size:.7rem; }
.gp-thumb-new { position:absolute; bottom:3px; left:3px; background:var(--primary); color:#fff; font-size:.62rem; font-weight:700; padding:1px 6px; border-radius:8px; }

/* ===== Mobile-number typeahead dropdown (Add Member / Send Notification) ===== */
.typeahead-wrap { position: relative; }
.typeahead-dd {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    z-index: 50;
    max-height: 260px;
    overflow-y: auto;
}
.typeahead-dd.hidden { display: none; }
.typeahead-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.typeahead-item:last-child { border-bottom: none; }
.typeahead-item:hover { background: #f9fafb; }
.typeahead-mobile { font-weight: 600; color: #111827; }
.typeahead-meta { font-size: 12px; color: #6b7280; margin-top: 2px; }
.typeahead-empty { padding: 12px; color: #9ca3af; font-size: 13px; text-align: center; }

/* =================================================================
   TABS — global, reusable. Used by reports page and any future
   page that needs in-page tab switching. Set [data-active] on the
   button via JS to mark the active tab; .tab-panel.hidden hides
   inactive panels.
   ================================================================= */
.tabs {
    display: inline-flex;
    gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 6px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}
.tab-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font);
    font-weight: 600;
    font-size: .88rem;
    padding: 9px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn[data-active="true"] {
    background: var(--primary-gradient);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.tab-panel.hidden { display: none; }

/* =================================================================
   PILL FILTER GROUP — global, reusable. Date-range chip filters,
   status filters, etc. Set [data-active] on the active pill via JS.
   ================================================================= */
.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.pill-btn {
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-primary);
    font-family: var(--font);
    font-weight: 600;
    font-size: .82rem;
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.pill-btn:hover { border-color: var(--primary); color: var(--primary); }
.pill-btn[data-active="true"] {
    background: var(--primary-gradient);
    color: #fff;
    border-color: transparent;
}
.pill-group .pill-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: 0 2px;
}
.pill-group .pill-date {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-family: var(--font);
    font-size: .82rem;
    color: var(--text-primary);
    background: var(--card-bg);
}

/* =================================================================
   CHART CARD — wraps a <canvas> inside a .card body so the canvas
   has a fixed responsive height. Used on the analytics page; safe
   to reuse anywhere a chart needs a consistent box.
   ================================================================= */
.chart-card .card-body { padding: 16px 18px 20px; }
.chart-card .chart-title { font-weight: 700; font-size: 1.02rem; color: var(--text-primary); margin-bottom: 2px; }
.chart-card .chart-sub   { font-size: .82rem; color: var(--text-secondary); margin-bottom: 14px; }
.chart-wrap { position: relative; width: 100%; height: 280px; }
.chart-wrap canvas { width: 100% !important; height: 100% !important; }
.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 900px) {
    .chart-grid { grid-template-columns: 1fr; }
}

/* ── Error Logs page ──────────────────────────────────────── */
.code-block {
    background: #0f172a;
    color: #e2e8f0;
    padding: 12px 14px;
    border-radius: 6px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}
.code-block--scroll { max-height: 280px; overflow: auto; }
.ai-explanation {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
}
.ai-explanation h3, .ai-explanation h4 {
    margin: 14px 0 6px;
    color: #111827;
}
.ai-explanation code {
    background: #e2e8f0;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}
.ai-explanation ul { padding-left: 22px; margin: 6px 0; }
.card-divider {
    border-top: 1px solid #e5e7eb;
    margin: 18px 0;
}
.text-danger { color: #dc2626; }

/* ===== Column filters (global) =============================================
   Funnel icon sits inside the existing <th>; popover is appended to <body>. */
.col-filter-icon {
    margin-left: 6px;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent;
    color: var(--text-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    font-size: .72rem;
    vertical-align: middle;
}
.col-filter-icon:hover { background: var(--chip-bg); color: var(--text-secondary); }
.col-filter-icon.is-active { color: var(--primary); background: var(--primary-light); }
.col-filter-icon.is-active i { transform: scale(1.05); }

.col-filter-pop {
    position: absolute;
    z-index: 70;
    width: 260px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 10px 12px;
    font-size: .85rem;
    color: var(--text-primary);
}
.col-filter-pop__title {
    font-weight: 600;
    font-size: .82rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.col-filter-pop__body {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 10px;
}
.col-filter-pop__search {
    width: 100%;
    padding: 6px 10px;
    font-size: .82rem;
    margin-bottom: 6px;
    position: sticky;
    top: 0;
    background: var(--card-bg);
    z-index: 1;
}
.col-filter-pop__list {
    display: block;
}
.col-filter-pop__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.col-filter-pop__row:hover { background: var(--chip-bg); }
.col-filter-pop__row input { accent-color: var(--primary); }
.col-filter-pop__empty {
    padding: 8px 4px;
    color: var(--text-light);
    font-size: .82rem;
}
.col-filter-pop__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.col-filter-pop__preset {
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: .78rem;
    cursor: pointer;
    transition: all var(--transition);
}
.col-filter-pop__preset:hover { border-color: var(--primary); color: var(--primary); }
.col-filter-pop__preset.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.col-filter-pop__custom {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
    align-items: center;
}
.col-filter-pop__custom label {
    font-size: .78rem;
    color: var(--text-secondary);
}
.col-filter-pop__custom .form-input { padding: 6px 8px; font-size: .82rem; }
.col-filter-pop__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.col-filter-pop__clear,
.col-filter-pop__apply {
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    padding: 5px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .82rem;
    transition: all var(--transition);
}
.col-filter-pop__apply {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.col-filter-pop__clear:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.col-filter-pop__apply:hover { background: var(--primary-hover); border-color: var(--primary-hover); }