/* ==========================================================================
   HARSAF Loyalty Portal — shared styles
   Premium barber-shop identity: charcoal + white + gold/yellow accents
   ========================================================================== */

:root{
  --charcoal:#1c1c1d;
  --charcoal-soft:#262627;
  --gold:#D4AF37;
  --yellow:#F2C230;
  --green:#1E8449;
  --green-light:#e8f7ee;
  --red:#C0392B;
  --red-light:#fbeceb;
  --gray-mid:#6b6664;
  --gray-light:#e9e6e4;
  --white-soft:#f8f6f5;
  --font-display:'Cinzel', serif;
  --font-body:'Poppins', sans-serif;
}

*{box-sizing:border-box;}

body{
  font-family:var(--font-body);
  background:var(--white-soft);
  color:var(--charcoal);
}

h1,h2,h3,h4,.font-display{font-family:var(--font-display); letter-spacing:.02em;}

a{text-decoration:none;}

.eyebrow{
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--gold);
}

/* ---------------- Buttons ---------------- */
.btn-gold{
  background:var(--yellow);
  border:1px solid var(--yellow);
  color:var(--charcoal);
  font-weight:700;
  letter-spacing:.03em;
  border-radius:8px;
  transition:all .2s ease;
}
.btn-gold:hover{background:#e0ac1c;border-color:#e0ac1c;color:var(--charcoal);}
.btn-gold:disabled{opacity:.65;cursor:not-allowed;}

.btn-charcoal{
  background:var(--charcoal);
  border:1px solid var(--charcoal);
  color:#fff;
  font-weight:600;
  border-radius:8px;
}
.btn-charcoal:hover{background:#000;color:#fff;}

.btn-outline-charcoal{
  background:transparent;
  border:1.5px solid var(--charcoal);
  color:var(--charcoal);
  font-weight:600;
  border-radius:8px;
}
.btn-outline-charcoal:hover{background:var(--charcoal);color:#fff;}

/* ---------------- Auth pages ---------------- */
.auth-wrapper{
  min-height:100vh;
  display:flex;
  align-items:stretch;
  background:var(--charcoal);
}
.auth-side{
  background:linear-gradient(160deg, var(--charcoal) 0%, #000 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:3.5rem;
  position:relative;
  overflow:hidden;
}
.auth-side::after{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg, var(--gold) 0 8px, transparent 8px 16px);
  opacity:.05;
}
.auth-side .logo-badge{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
  color:var(--charcoal);
  margin-bottom:1.5rem;
}
.auth-card{
  background:#fff;
  border-radius:14px;
  padding:2.4rem;
  box-shadow:0 20px 50px rgba(0,0,0,.15);
}
.auth-form-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
}
.form-label-h{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--charcoal);
}
.form-control:focus, .form-select:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 .2rem rgba(212,175,55,.2);
}

/* ---------------- Sidebar layout ---------------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:260px;
  background:var(--charcoal);
  color:#fff;
  flex-shrink:0;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  transition:transform .25s ease;
  z-index:1030;
}
.sidebar .brand{
  padding:1.5rem 1.4rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:.7rem;
}
.sidebar .brand .badge-logo{
  width:42px;height:42px;border-radius:50%;
  background:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  color:var(--charcoal);font-weight:700;
}
.sidebar .brand-text{font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.1;}
.sidebar .brand-text small{display:block; font-family:var(--font-body); font-size:.62rem; letter-spacing:.14em; color:var(--gold); text-transform:uppercase;}
.sidebar-nav{padding:1rem .7rem;}
.sidebar-nav .nav-link{
  color:rgba(255,255,255,.75);
  padding:.7rem .9rem;
  border-radius:8px;
  font-weight:500;
  font-size:.92rem;
  margin-bottom:.2rem;
  display:flex;align-items:center;gap:.7rem;
}
.sidebar-nav .nav-link i{width:18px;text-align:center;color:var(--gold);}
.sidebar-nav .nav-link.active,
.sidebar-nav .nav-link:hover{background:rgba(255,255,255,.08); color:#fff;}
.sidebar-nav .nav-link.disabled{opacity:.4; cursor:not-allowed; pointer-events:none;}
.sidebar-user{
  padding:1rem 1.4rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.85rem;
}

.main-content{flex:1; min-width:0; background:var(--white-soft);}
.topbar-app{
  background:#fff;
  border-bottom:1px solid var(--gray-light);
  padding:.85rem 1.4rem;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:1020;
}
.sidebar-toggle-btn{display:none;}

@media (max-width: 991.98px){
  .sidebar{position:fixed; left:0; transform:translateX(-100%); box-shadow:0 0 40px rgba(0,0,0,.3);}
  .sidebar.show{transform:translateX(0);}
  .sidebar-toggle-btn{display:inline-flex;}
  .sidebar-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1025; display:none;
  }
  .sidebar-backdrop.show{display:block;}
}

.page-wrap{padding:1.6rem;}
@media (min-width:768px){.page-wrap{padding:2.2rem;}}

/* ---------------- Cards ---------------- */
.card-h{
  background:#fff;
  border:1px solid var(--gray-light);
  border-radius:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.04);
}
.stat-card{
  background:#fff;
  border:1px solid var(--gray-light);
  border-radius:14px;
  padding:1.3rem 1.4rem;
  height:100%;
}
.stat-card .icon-wrap{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;
  margin-bottom:.8rem;
}
.stat-card .stat-value{font-family:var(--font-display); font-weight:700; font-size:1.7rem;}
.stat-card .stat-label{font-size:.8rem; color:var(--gray-mid); text-transform:uppercase; letter-spacing:.05em;}

.bg-gold-soft{background:#FBF3DD; color:#8a6d1a;}
.bg-green-soft{background:var(--green-light); color:var(--green);}
.bg-red-soft{background:var(--red-light); color:var(--red);}
.bg-charcoal-soft{background:#ececed; color:var(--charcoal);}

/* ---------------- Profile header ---------------- */
.profile-header{
  background:linear-gradient(120deg, var(--charcoal), #000);
  border-radius:16px;
  color:#fff;
  padding:2rem;
  position:relative;
  overflow:hidden;
}
.profile-avatar{
  width:96px;height:96px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--yellow);
  background:#333;
}

/* ---------------- Progress ---------------- */
.progress-h{height:14px; border-radius:20px; background:rgba(0,0,0,.06);}
.progress-h .progress-bar{background:linear-gradient(90deg, var(--gold), var(--yellow)); border-radius:20px;}

/* ---------------- Validate button ---------------- */
.validate-btn{
  width:100%;
  padding:1.4rem 1rem;
  border-radius:16px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:.03em;
  border:none;
  transition:all .2s ease;
  text-transform:uppercase;
}
.validate-btn.state-ready{background:var(--yellow); color:var(--charcoal); box-shadow:0 10px 26px rgba(242,194,48,.4);}
.validate-btn.state-ready:hover{background:#e0ac1c;}
.validate-btn.state-pending{background:#e9e6e4; color:var(--gray-mid); cursor:not-allowed;}
.validate-btn.state-approved{background:var(--green); color:#fff; cursor:default;}
.validate-btn.state-rejected{background:var(--red); color:#fff;}

/* ---------------- Reward card ---------------- */
.reward-card{
  background:linear-gradient(135deg, #123524, #1E8449 60%, #D4AF37);
  border-radius:16px;
  color:#fff;
  padding:1.8rem;
  text-align:center;
  box-shadow:0 16px 40px rgba(30,132,73,.35);
}
.reward-card h3{font-family:var(--font-display); font-size:1.6rem; margin-bottom:.4rem;}

/* ---------------- Badges ---------------- */
.badge-status{font-size:.72rem; padding:.4em .7em; border-radius:20px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;}

/* ---------------- Customer card grid (admin) ---------------- */
.customer-card{
  background:#fff;
  border:1px solid var(--gray-light);
  border-radius:14px;
  padding:1.2rem;
  height:100%;
}
.customer-card .avatar-sm{width:56px;height:56px;border-radius:50%; object-fit:cover; background:#eee;}
.customer-card .cc-name{font-weight:700; font-size:1rem;}
.customer-card .cc-meta{font-size:.8rem; color:var(--gray-mid);}

/* Notification bell */
.notif-bell{position:relative;}
.notif-bell .badge-count{
  position:absolute; top:-6px; right:-6px;
  background:var(--red); color:#fff;
  border-radius:50%; font-size:.65rem; min-width:18px; height:18px;
  display:flex;align-items:center;justify-content:center; padding:0 4px;
}

/* Utility */
.rounded-h{border-radius:14px;}
.text-gold{color:var(--gold) !important;}
.bg-charcoal{background:var(--charcoal) !important;}

@media (max-width:575.98px){
  .validate-btn{font-size:1.05rem; padding:1.1rem .8rem;}
  .profile-header{padding:1.4rem;}
}

/* ---------------- VIP Subscription card ---------------- */
.vip-card-outer{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:2rem;
}
.vip-card-id{
  text-align:center;
  min-width:180px;
}
.vip-card-id .vip-avatar{
  width:120px;height:120px;border-radius:50%;
  object-fit:cover;
  border:3px solid var(--gold);
  margin:0 auto 1rem;
  display:block;
}
.vip-card-id h4{font-family:var(--font-display); font-weight:700; margin-bottom:.3rem;}
.vip-card-id p{font-size:.78rem; color:var(--gray-mid);}

.vip-card-body{flex:1; min-width:260px;}
.vip-tabs{display:flex;}
.vip-tab{
  border:none;
  padding:.6rem 1.3rem .8rem;
  font-weight:700;
  font-size:.85rem;
  color:#fff;
  cursor:pointer;
  clip-path:polygon(0 0, 100% 0, 88% 100%, 0 100%);
  margin-right:-14px;
  opacity:.55;
  transition:opacity .2s ease, transform .2s ease;
  position:relative;
}
.vip-tab:last-child{margin-right:0;}
.vip-tab.active{opacity:1; transform:translateY(-2px);}
.vip-tab:nth-child(1){background:#4FA8D8; z-index:4;}
.vip-tab:nth-child(2){background:#F2994A; z-index:3;}
.vip-tab:nth-child(3){background:var(--red); z-index:2;}
.vip-tab:nth-child(4){background:var(--yellow); color:var(--charcoal); z-index:1;}

.vip-card-panel{
  background:linear-gradient(160deg, #4FA8D8, #2E6F94);
  border-radius:0 12px 12px 12px;
  padding:2rem 1.5rem;
  text-align:center;
  color:#fff;
}
.vip-card-panel .vip-qr-holder{
  background:#fff;
  display:inline-block;
  padding:14px;
  border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  max-width:260px;
}
.vip-card-panel .vip-qr-holder svg{width:100%; height:auto; display:block;}
.vip-token-panel{display:none;}
.vip-token-panel.active{display:block;}
.vip-card-caption{font-size:.72rem; letter-spacing:.03em; color:rgba(255,255,255,.85); margin-top:1rem;}
.vip-card-valid{font-size:.75rem; color:rgba(255,255,255,.75); margin-top:.6rem;}