/* OFF CLUB — Light sidebar, Metronic Demo 1 style
   Bootstrap 5.3 + Bootstrap Icons on CDN */

:root{
  --oc-ink:#1b84ff;
  --oc-ink-rgb:27,132,255;
  --oc-ink-light:#e9f3ff;
  --oc-paper:#f9f9f9;
  --oc-ok:#17c653;
  --oc-no:#f8285a;
  --oc-warn:#f6c000;
  --oc-font:"Inter","Open Sans",system-ui,-apple-system,sans-serif;
  --oc-radius:8px;
  --oc-sidebar-w:260px;
  --oc-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --oc-shadow-md:0 4px 16px rgba(0,0,0,.08);
  --oc-font-scale:1;
  --bs-primary:var(--oc-ink);
  --bs-primary-rgb:var(--oc-ink-rgb);
  --bs-success:var(--oc-ok);
  --bs-danger:var(--oc-no);
  --bs-body-font-family:var(--oc-font);
  --bs-body-bg:var(--oc-paper);
  --bs-border-radius:var(--oc-radius);
}

*{box-sizing:border-box}
html{ font-size:calc(16px * var(--oc-font-scale)); }
body{font-family:var(--oc-font);background:var(--oc-paper);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:var(--oc-ink)}

/* ─── Cards ─── */
.card{background:#fff;border:1px solid #f1f1f4;border-radius:var(--oc-radius);box-shadow:none}
.card-header{background:transparent;border-bottom:1px solid #f1f1f4;padding:14px 18px;font-size:13px;font-weight:600;color:#252f4a;display:flex;align-items:center;gap:8px}
.card-body{padding:18px}

/* ─── Buttons ─── */
.btn{border-radius:var(--oc-radius);font-weight:600;font-size:13px}
.btn-primary{background:var(--oc-ink);border-color:var(--oc-ink);color:#fff}
.btn-primary:hover{background:#0a74f7;border-color:#0a74f7;color:#fff}
.btn-sm{font-size:12px;padding:5px 12px}

/* ─── Forms ─── */
.form-control,.form-select{border-radius:var(--oc-radius);font-size:13px;border-color:#dbdfe9}
.form-control:focus,.form-select:focus{border-color:var(--oc-ink);box-shadow:0 0 0 3px rgba(27,132,255,.12)}
.form-label{font-size:12px;font-weight:600;color:#3f4254;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}

/* ─── Tables ─── */
.table{font-size:13px}
.table th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#a1a5b7;border-bottom:1px solid #f1f1f4;padding:10px 14px}
.table td{padding:11px 14px;vertical-align:middle;border-color:#f9f9f9;color:#252f4a}
.table-hover tbody tr:hover td{background:#fafafa}

/* Prevent member/staff photos expanding to fill table cells.
   Bootstrap sets img{max-width:100%} which overrides width/height HTML attrs. */
td img, .kt-avatar, .kt-cell-user img { max-width:none; display:inline-block; flex-shrink:0; }

/* ─── Badges / alerts ─── */
.badge{border-radius:6px;font-weight:600;font-size:11px;padding:3px 8px}
.alert{border:0;border-radius:var(--oc-radius);font-size:13px}
.alert-success{background:#e9fff0;color:#036e39}
.alert-danger{background:#fff5f8;color:#a30030}

/* ─── Section headings ─── */
.oc-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#a1a5b7;margin:24px 0 12px}
.oc-h:first-child{margin-top:0}

/* ─────────────────────────────────────────
   KPI STAT CARDS
───────────────────────────────────────── */
.oc-stat{background:#fff;border:1px solid #f1f1f4;border-radius:var(--oc-radius);padding:20px;display:flex;flex-direction:column;gap:4px}
.oc-stat__icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:8px}
.oc-stat__icon-pur{background:#f5f0ff}
.oc-stat__icon-grn{background:#e9fff0}
.oc-stat__icon-amb{background:#fff9e6}
.oc-stat__icon-blu{background:#e9f3ff}
.oc-stat__icon-red{background:#fff5f8}
.oc-stat__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#a1a5b7}
.oc-stat__val{font-size:24px;font-weight:700;color:#252f4a;line-height:1.2;margin:2px 0}
.oc-stat__trend{font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px}
.oc-stat__trend--up{color:#17c653}
.oc-stat__trend--dn{color:#f8285a}
.oc-stat__trend--neu{color:#a1a5b7}
.oc-live{width:7px;height:7px;border-radius:50%;background:var(--oc-ok);animation:oc-pulse 2s infinite;display:inline-block;vertical-align:middle}
@keyframes oc-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ─────────────────────────────────────────
   KT-TABLE design system
───────────────────────────────────────── */
.kt-table{width:100%;border-collapse:collapse;font-size:13px}
.kt-table thead th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#a1a5b7;padding:10px 14px;border-bottom:1px solid #f1f1f4;white-space:nowrap}
.kt-table tbody tr.kt-row td{padding:11px 14px;vertical-align:middle;border-bottom:1px solid #f9f9f9;color:#252f4a}
.kt-table tbody tr.kt-row:last-child td{border-bottom:0}
.kt-table tbody tr.kt-row:hover td{background:#fafafa}
.kt-strong{font-weight:600;color:#252f4a}
.kt-muted{color:#a1a5b7}
.kt-mono{font-family:monospace;font-size:12px}
.kt-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap}
.kt-badge-active{background:#e9fff0;color:#036e39}
.kt-badge-expired{background:#f1f1f4;color:#5e6278}
.kt-badge-suspended{background:#fff9e6;color:#b07d00}
.kt-badge-revoked{background:#fff5f8;color:#a30030}
.kt-toolbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f1f1f4;flex-wrap:wrap}
.kt-toolbar__title{font-size:14px;font-weight:700;color:#252f4a;flex:1}
.kt-toolbar__count{font-size:11px;font-weight:600;color:#a1a5b7;margin-left:6px}
.kt-toolbar__search{display:flex;align-items:center;gap:8px;background:#f9f9f9;border:1px solid #f1f1f4;border-radius:6px;padding:6px 12px}
.kt-toolbar__search i{color:#a1a5b7;font-size:13px}
.kt-toolbar__search input{border:0;background:none;outline:none;font-size:13px;width:160px;font-family:inherit}
.kt-pager{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid #f1f1f4;flex-wrap:wrap}
.kt-pager__show{display:flex;align-items:center;gap:6px;font-size:12px;color:#a1a5b7}
.kt-pager__show select{border:1px solid #f1f1f4;border-radius:4px;padding:2px 6px;font-size:12px;background:#fff;font-family:inherit}
.kt-pager__info{font-size:12px;color:#a1a5b7;flex:1;text-align:center}
.kt-pager__nav{display:flex;gap:3px}
.kt-pager__btn{border:1px solid #f1f1f4;background:#fff;border-radius:4px;padding:3px 9px;font-size:12px;cursor:pointer;color:#5e6278;font-family:inherit}
.kt-pager__btn:disabled{opacity:.4;cursor:default}
.kt-pager__btn.is-active{background:var(--oc-ink);color:#fff;border-color:var(--oc-ink)}
.kt-menu-btn{background:none;border:0;cursor:pointer;color:#a1a5b7;padding:4px 6px;border-radius:4px}
.kt-menu-btn:hover{background:#f1f1f4;color:#252f4a}
.kt-dropdown .dropdown-item{font-size:13px;padding:8px 16px;display:flex;align-items:center;gap:8px}
.kt-dropdown .dropdown-item i{width:16px;text-align:center}
.kt-dropdown .dropdown-item.is-danger{color:#f8285a}

/* ─────────────────────────────────────────
   ACCORDION (products page)
───────────────────────────────────────── */
.oc-accordion{background:#fff;border:1px solid #e9ecef;border-radius:12px;margin-bottom:20px;overflow:hidden}
.oc-accordion__hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer;user-select:none;gap:12px}
.oc-accordion__hd:hover{background:#f9f9f9}
.oc-accordion__title{font-size:15px;font-weight:700;color:#252f4a;margin:0}
.oc-accordion__icon{width:28px;height:28px;border-radius:50%;background:#f1f5ff;color:#1b84ff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:300;line-height:1;transition:transform .2s;flex-shrink:0}
.oc-accordion.is-open .oc-accordion__icon{transform:rotate(45deg)}
.oc-accordion__body{display:none;padding:0 20px 20px}
.oc-accordion.is-open .oc-accordion__body{display:block}

/* ─────────────────────────────────────────
   LIGHT SIDEBAR — Metronic style
───────────────────────────────────────── */
.oc-app{display:flex;min-height:100vh;background:var(--oc-paper)}

.oc-sidebar{
  width:var(--oc-sidebar-w);flex:0 0 var(--oc-sidebar-w);
  background:#fff;
  border-right:1px solid #f1f1f4;
  height:100vh;position:sticky;top:0;align-self:flex-start;
  display:flex;flex-direction:column;overflow:hidden;
}

/* Brand */
.oc-sidebar__brand{
  display:flex;align-items:center;gap:10px;padding:20px 22px 16px;
  text-decoration:none;border-bottom:1px solid #f1f1f4;flex-shrink:0;
}
.oc-sidebar__brand-logo{
  width:34px;height:34px;border-radius:8px;background:var(--oc-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#fff;flex:0 0 34px;letter-spacing:.5px;
}
.oc-sidebar__brand img{max-height:28px;display:block}
.oc-sidebar__brand-name{font-size:15px;font-weight:700;color:#252f4a;letter-spacing:-.1px}
.oc-sidebar__brand-sub{font-size:10px;color:#a1a5b7;text-transform:uppercase;letter-spacing:.5px}

/* Section labels */
.oc-sidebar__section{
  padding:18px 22px 6px;flex-shrink:0;
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.9px;color:#a1a5b7;
}

/* Nav list — scrollable, fills available height */
.oc-sidebar__nav{list-style:none;margin:0;padding:2px 10px;display:flex;flex-direction:column;gap:1px;flex:1 1 auto;overflow-y:auto}
.oc-sidebar__nav a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;
  color:#78829d;font-size:13.5px;font-weight:500;text-decoration:none;transition:all .12s;
}
.oc-sidebar__nav a i{font-size:17px;width:20px;text-align:center;flex:0 0 20px;color:#a1a5b7;transition:color .12s}
.oc-sidebar__nav a:hover{color:#252f4a;background:#f9f9f9}
.oc-sidebar__nav a:hover i{color:#252f4a}

/* Active */
.oc-sidebar__nav a.is-on{color:var(--oc-ink);font-weight:600;background:#fff}
.oc-sidebar__nav a.is-on i{color:var(--oc-ink)}
.oc-sidebar__nav a.is-on::before{
  content:'';display:block;position:absolute;
  left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;background:var(--oc-ink);border-radius:0 3px 3px 0;
}
.oc-sidebar__nav li{position:relative}

/* Badge */
.oc-sidebar__badge{
  margin-left:auto;background:#f1f1f4;color:#5e6278;
  font-size:10px;padding:1px 7px;border-radius:5px;font-weight:700;
}
.oc-sidebar__nav a.is-on .oc-sidebar__badge{background:var(--oc-ink-light);color:var(--oc-ink)}

/* Footer — pinned at bottom */
.oc-sidebar__footer{
  flex-shrink:0;padding:12px 10px 16px;border-top:1px solid #f1f1f4;
}
.oc-sidebar__user{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  border-radius:6px;cursor:pointer;transition:background .12s;
}
.oc-sidebar__user:hover{background:#f9f9f9}
.oc-sidebar__avatar{
  width:34px;height:34px;border-radius:50%;background:var(--oc-ink-light);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--oc-ink);flex:0 0 34px;
}
.oc-sidebar__uname{font-size:13px;font-weight:600;color:#252f4a;line-height:1.3}
.oc-sidebar__urole{font-size:11px;color:#a1a5b7}
.oc-sidebar__version{
  padding:6px 12px;margin-top:4px;font-size:11px;color:#a1a5b7;display:block;
}
a.oc-sidebar__version{text-decoration:none}
a.oc-sidebar__version:hover{color:var(--oc-ink)}

/* ─────────────────────────────────────────
   TOPBAR
───────────────────────────────────────── */
.oc-app-content{flex:1;min-width:0;display:flex;flex-direction:column}

.oc-topbar{
  background:#fff;border-bottom:1px solid #f1f1f4;
  padding:0 24px;height:60px;
  display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:100;
}
.oc-topbar__toggle{display:none;border:0;background:none;font-size:22px;color:#78829d;cursor:pointer;padding:4px}
.oc-topbar__title{font-size:15px;font-weight:700;color:#252f4a;flex:1}
.oc-topbar__live{display:flex;align-items:center;gap:6px;font-size:12px;color:#17c653;font-weight:600;background:#e9fff0;padding:4px 12px;border-radius:6px}
.oc-topbar__time{font-size:12px;color:#a1a5b7}
.oc-topbar__btn{background:var(--oc-ink);color:#fff;border:0;padding:7px 16px;border-radius:var(--oc-radius);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.oc-topbar__btn:hover{background:#0a74f7;color:#fff}

.oc-main{padding:24px;flex:1}

/* ─────────────────────────────────────────
   FRONT-END NAV
───────────────────────────────────────── */
.oc-fnav{
  background:#fff;border-bottom:1px solid #f1f1f4;padding:0 28px;height:60px;
  display:flex;align-items:center;gap:20px;
  position:sticky;top:0;z-index:100;box-shadow:var(--oc-shadow);
}
.oc-fnav__brand{font-size:16px;font-weight:800;color:#252f4a;letter-spacing:-.2px;text-decoration:none;margin-right:auto}
.oc-fnav__link{font-size:13px;font-weight:500;color:#78829d;text-decoration:none;padding:6px 2px;transition:color .12s}
.oc-fnav__link:hover,.oc-fnav__link.on{color:#252f4a}
.oc-fnav__btn{background:var(--oc-ink);color:#fff;font-size:12px;font-weight:700;padding:7px 16px;border-radius:var(--oc-radius);text-decoration:none}
.oc-fnav__btn:hover{background:#0a74f7;color:#fff}

/* ─────────────────────────────────────────
   MEMBER CARD / SCANNER / POS / MISC
───────────────────────────────────────── */
.oc-card__head{background:var(--oc-ink);color:#fff;font-weight:700;font-size:24px;letter-spacing:2px;padding:16px 0;border-radius:var(--oc-radius) var(--oc-radius) 0 0}
.oc-card__qr{display:flex;justify-content:center;padding:22px 0 10px}
.oc-card__name{font-weight:700;font-size:19px}
.oc-scan__result{font-weight:700;font-size:22px;border-radius:var(--oc-radius);transition:background-color .15s}
.oc-scan__result span{display:block;font-size:14px;font-weight:600;margin-top:6px}
.oc-prog__img{display:block;width:100%;height:auto;border-radius:var(--oc-radius) var(--oc-radius) 0 0}
.oc-step-icon{width:20px;flex:0 0 20px;text-align:center;line-height:1.5}
.oc-step-text{line-height:1.5}

/* POS */
.oc-pay-btn{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--oc-radius);border:2px solid #e0e4eb;background:#fff;cursor:pointer;text-align:left;transition:all .15s ease}
.oc-pay-btn:hover{border-color:#d0d5e0;background:#f9fafb}
.oc-pay-btn.active{border-color:#28a745;background:#f0fdf4}
.oc-pay-btn:active{transform:scale(.98)}
.oc-pay-btn__icon{font-size:24px;flex-shrink:0;display:flex;align-items:center}
.oc-pay-btn__label{flex:1}
.oc-pay-btn__title{font-weight:600;font-size:14px;margin:0;color:#1e2938}
.oc-pay-btn__desc{font-size:12px;color:#697a8d;margin:4px 0 0}
.oc-pill{display:flex;align-items:center;justify-content:center;padding:10px 14px;border:1.5px solid #dbdfe9;background:#fff;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;font-family:inherit;transition:all .12s}
.oc-pill:hover{border-color:#a1a5b7}
.oc-pill.on{background:var(--oc-ink);color:#fff;border-color:var(--oc-ink)}

/* POS modals */
.oc-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.oc-modal{background:#fff;border-radius:16px;padding:28px 24px;max-width:340px;width:100%;text-align:center}

/* kt-table cards must not clip dropdown menus */
.card:has(.kt-table) { overflow: visible; }
.card:has(.kt-table) .table-responsive { overflow-x: auto; }

/* ─── Mobile ─── */
@media(max-width:991.98px){
  .oc-sidebar{position:fixed;left:0;top:0;z-index:1040;transform:translateX(-100%);transition:transform .2s ease;height:100vh}
  .oc-sidebar.is-open{transform:translateX(0)}
  .oc-topbar__toggle{display:inline-block}
  .oc-main{padding:16px}
}