/* =========================================================
   MBGA COUPON SYSTEM - Dashboard / Panel styles
   Shared by admin/, hotel/, agent/, customer/
   ========================================================= */
:root{
  --p-navy:#12185a;
  --p-navy2:#1c2470;
  --p-orange:#f5821f;
  --p-orange2:#ffb347;
  --p-bg:#f3f4fa;
  --p-radius:14px;
}
body.panel-body{
  background:var(--p-bg);
  font-family:'Segoe UI', 'Poppins', Arial, sans-serif;
  min-height:100vh;
}

/* SIDEBAR */
.sidebar{
  width:250px;
  min-height:100vh;
  background:linear-gradient(180deg, var(--p-navy) 0%, var(--p-navy2) 100%);
  position:fixed; top:0; left:0; bottom:0;
  padding:1.2rem 0;
  z-index:1030;
  transition:.25s;
}
.sidebar .brand{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem 1.2rem 1.4rem;
  border-bottom:1px solid rgba(255,255,255,.1);
  margin-bottom:1rem;
}
.sidebar .brand img{ height:38px; background:#fff; border-radius:8px; padding:3px; }
.sidebar .brand span{ color:#fff; font-weight:700; font-size:.95rem; line-height:1.2; }
.sidebar .nav-link{
  color:#c9cdf0; font-weight:600; padding:.7rem 1.3rem;
  border-left:3px solid transparent;
  display:flex; align-items:center; gap:.7rem;
}
.sidebar .nav-link i{ width:20px; text-align:center; }
.sidebar .nav-link:hover{ color:#fff; background:rgba(255,255,255,.06); }
.sidebar .nav-link.active{
  color:#fff; background:rgba(255,255,255,.1);
  border-left-color:var(--p-orange);
}
.sidebar .role-tag{
  margin:1rem 1.2rem 0; padding:.5rem .8rem;
  background:rgba(245,130,31,.15); color:var(--p-orange2);
  border-radius:8px; font-size:.78rem; font-weight:700; text-align:center;
  text-transform:uppercase; letter-spacing:1px;
}

/* MAIN AREA */
.main-content{ margin-left:250px; padding:0 0 2rem; }
.topbar{
  background:#fff; box-shadow:0 2px 12px rgba(18,24,90,.06);
  padding:.9rem 1.6rem; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:1020;
}
.topbar h5{ margin:0; font-weight:700; color:var(--p-navy); }
.topbar .user-chip{
  background:var(--p-bg); border-radius:50px; padding:.4rem .9rem .4rem .4rem;
  display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--p-navy);
}
.topbar .user-chip .avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--p-orange),var(--p-orange2));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800;
}
.page-wrap{ padding:1.6rem; }

/* CARDS */
.stat-card{
  border:none; border-radius:var(--p-radius);
  padding:1.4rem; color:#fff; height:100%;
  box-shadow:0 10px 24px rgba(18,24,90,.12);
}
.stat-card .icon{
  width:50px;height:50px;border-radius:12px;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.8rem;
}
.stat-card h3{ font-weight:800; margin-bottom:0; }
.stat-card .lbl{ opacity:.9; font-weight:600; font-size:.9rem; }
.bg-grad-navy{ background:linear-gradient(135deg,var(--p-navy),var(--p-navy2)); }
.bg-grad-orange{ background:linear-gradient(135deg,var(--p-orange),var(--p-orange2)); }
.bg-grad-green{ background:linear-gradient(135deg,#1a9e6b,#3fc98a); }
.bg-grad-purple{ background:linear-gradient(135deg,#5b3fd6,#8a6fef); }

.card-panel{
  background:#fff; border:none; border-radius:var(--p-radius);
  box-shadow:0 6px 20px rgba(18,24,90,.06);
}
.card-panel .card-header{
  background:#fff; border-bottom:1px solid #eef0fa;
  font-weight:700; color:var(--p-navy); border-radius:var(--p-radius) var(--p-radius) 0 0 !important;
  padding:1rem 1.4rem;
}
.card-panel .card-body{ padding:1.4rem; }

.table-panel thead{ background:var(--p-bg); }
.table-panel th{ color:var(--p-navy); font-weight:700; border-bottom:none; font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; }
.table-panel td{ vertical-align:middle; }
.table-panel tbody tr:hover{ background:#fbfbff; }

.btn-panel-brand{
  background:linear-gradient(135deg,var(--p-orange),var(--p-orange2));
  border:none; color:#fff; font-weight:600; border-radius:8px; padding:.55rem 1.3rem;
}
.btn-panel-brand:hover{ color:#fff; opacity:.92; }
.btn-panel-navy{
  background:var(--p-navy); border:none; color:#fff; font-weight:600; border-radius:8px; padding:.55rem 1.3rem;
}
.btn-panel-navy:hover{ color:#fff; opacity:.9; }

.login-page{
  min-height:100vh;
  background:linear-gradient(120deg, var(--p-navy), var(--p-navy2));
  display:flex; align-items:center; justify-content:center; padding:2rem;
}
.login-card{
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.3); max-width:900px; width:100%;
}
.login-card .side{
  background:linear-gradient(160deg,var(--p-orange),var(--p-orange2));
  color:#fff; padding:3rem 2rem; display:flex; flex-direction:column; justify-content:center;
}
.login-card .form-side{ padding:3rem 2.4rem; }

.coupon-card{
  border-radius:16px; padding:1.6rem;
  background:linear-gradient(135deg,var(--p-navy),var(--p-navy2));
  color:#fff; position:relative; overflow:hidden;
}
.coupon-card::after{
  content:""; position:absolute; right:-40px; top:-40px; width:150px;height:150px;
  border-radius:50%; background:rgba(245,130,31,.25);
}
.coupon-card .card-number{ font-size:1.3rem; letter-spacing:2px; font-weight:800; }

/* WELCOME HERO (customer dashboard) */
.welcome-hero{
  background:linear-gradient(120deg, var(--p-navy) 0%, var(--p-navy2) 60%, #2a2f8f 100%);
  border-radius:var(--p-radius); color:#fff; padding:1.8rem 2rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
}
.welcome-hero .avatar-lg{
  width:56px;height:56px;border-radius:50%; background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;
}
.welcome-hero h4{ font-weight:800; margin-bottom:.2rem; }
.welcome-hero .hero-stats{ display:flex; gap:.8rem; flex-wrap:wrap; }
.welcome-hero .hero-stat-box{
  background:rgba(255,255,255,.12); border-radius:12px; padding:.7rem 1.4rem; text-align:center; min-width:90px;
}
.welcome-hero .hero-stat-box .n{ font-size:1.5rem; font-weight:800; }
.welcome-hero .hero-stat-box .l{ font-size:.75rem; opacity:.85; text-transform:uppercase; letter-spacing:.5px; }

/* PLAN INFO GRID (coupon detail pages) */
.info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:#eef0fa; border:1px solid #eef0fa; border-radius:var(--p-radius); overflow:hidden; }
.info-grid .info-box{ background:#fff; padding:1rem 1.2rem; }
.info-grid .info-box .lbl{ font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color:#8a8fb0; font-weight:700; margin-bottom:.3rem; }
.info-grid .info-box .val{ font-weight:800; color:var(--p-navy); font-size:1.05rem; }

/* GALLERY */
.gallery-strip{ display:flex; gap:.8rem; overflow-x:auto; padding-bottom:.5rem; }
.gallery-strip img{ height:160px; border-radius:10px; object-fit:cover; flex:0 0 auto; }
.gallery-thumb-wrap{ position:relative; flex:0 0 auto; }
.gallery-thumb-wrap .remove-img{
  position:absolute; top:6px; right:6px; background:rgba(0,0,0,.6); color:#fff; border:none;
  width:24px;height:24px;border-radius:50%; font-size:.8rem; line-height:1;
}

/* ITEM CATEGORY GROUP + COLOURFUL BANNERS */
.category-heading{
  background:var(--p-bg); font-weight:800; color:var(--p-navy);
  padding:.6rem 1rem; border-radius:8px; margin:1rem 0 .6rem; font-size:.9rem; text-transform:uppercase; letter-spacing:.5px;
}
.item-banner{
  display:inline-block; color:#fff; font-weight:700; padding:.5rem 1rem; border-radius:8px; font-size:.9rem;
}
.banner-1{ background:linear-gradient(120deg,#7b4b25,#a9713f); }
.banner-2{ background:linear-gradient(120deg,#ff5f6d,#e0447a); }
.banner-3{ background:linear-gradient(120deg,#8e1f1f,#c0392b); }
.banner-4{ background:linear-gradient(120deg,#1a9e6b,#3fc98a); }
.banner-5{ background:linear-gradient(120deg,#1c2470,#3949ab); }
.banner-6{ background:linear-gradient(120deg,#f5821f,#ffb347); }
.banner-7{ background:linear-gradient(120deg,#5b3fd6,#8a6fef); }
.banner-8{ background:linear-gradient(120deg,#0f8b8d,#37c9cb); }
.item-banner{ max-width: 420px; white-space: normal; line-height:1.35; }

/* ITEM NOTES (usage / included / terms) shown under the banner */
.item-usage-note{
  background:#eafaf0; color:#1a7a4f; padding:.5rem .75rem; border-radius:6px;
  font-size:.82rem; margin-top:.4rem; max-width:420px;
}
.item-included-list{
  background:#eafaf0; color:#1a7a4f; padding:.5rem .75rem; border-radius:6px;
  font-size:.82rem; margin-top:.4rem; max-width:420px;
}
.item-included-list div{ margin-bottom:.15rem; }
.item-terms-note{
  background:#fdecec; color:#b0301f; padding:.5rem .75rem; border-radius:6px;
  font-size:.78rem; margin-top:.4rem; max-width:420px;
}

/* ITEM THUMBNAIL */
.item-thumb{ width:44px; height:44px; object-fit:cover; border-radius:8px; }
.item-thumb-placeholder{
  width:44px; height:44px; border-radius:8px; background:var(--p-bg); color:#aaa;
  display:flex; align-items:center; justify-content:center;
}

@media (max-width: 991px){
  .sidebar{ left:-250px; }
  .sidebar.show{ left:0; }
  .main-content{ margin-left:0; }
}