/* =========================================================
   RED CARPET VIP — Portal / Dashboard layout
   (Customer / Merchant / Ambassador / Admin shells)
   ========================================================= */

.portal-body{ background: var(--black); min-height:100vh; }

.portal-shell{
  display:grid; grid-template-columns: 268px 1fr; min-height:100vh;
}

/* ---- Sidebar ---- */
.portal-sidebar{
  background: var(--black-2); border-right: 1px solid var(--line);
  padding: 26px 20px; position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column; z-index: 40;
}
.portal-sidebar .brand{ padding: 6px 8px 26px; }
.portal-sidebar .brand img{ height:34px; }
.side-role{
  display:flex; align-items:center; gap:12px; padding: 12px; margin-bottom:22px;
  background: rgba(255,255,255,.03); border:1px solid var(--line-soft); border-radius: var(--radius);
}
.side-role .avatar{
  width:42px; height:42px; border-radius:50%; background: var(--grad-red); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--white); font-weight:800; font-size:15px;
}
.side-role .who b{ display:block; font-size:13.5px; color:var(--white); }
.side-role .who span{ font-size:11.5px; color: var(--muted); }

.side-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.side-nav .side-label{ font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted-2); margin: 18px 10px 8px; }
.side-nav .side-label:first-child{ margin-top:4px; }
.side-nav button, .side-nav a{
  display:flex; align-items:center; gap:12px; padding: 11px 12px; border-radius: 10px;
  background:transparent; border:none; text-align:left; cursor:pointer; width:100%;
  color: var(--muted); font-size: 14px; font-weight:600; transition: all .25s var(--ease);
}
.side-nav svg{ width:18px; height:18px; flex-shrink:0; }
.side-nav button:hover, .side-nav a:hover{ background: rgba(255,255,255,.05); color: var(--ink); }
.side-nav button.active, .side-nav a.active{
  background: linear-gradient(90deg, rgba(212,175,55,.14), rgba(212,175,55,.02));
  color: var(--gold-300); box-shadow: inset 2px 0 0 var(--gold);
}
.side-nav .count{
  margin-left:auto; background: var(--red); color:var(--white); font-size:10.5px; font-weight:800;
  padding: 2px 7px; border-radius: var(--radius-pill);
}
.portal-sidebar .side-foot{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line-soft); }
.portal-sidebar .side-foot a, .portal-sidebar .side-foot button{
  display:flex; align-items:center; gap:12px; padding:11px 12px; font-size:13.5px; font-weight:600;
  color: var(--muted); border-radius:10px; background:none; border:none; width:100%; text-align:left; cursor:pointer;
}
.portal-sidebar .side-foot svg{ width:17px; height:17px; }
.portal-sidebar .side-foot a:hover, .portal-sidebar .side-foot button:hover{ color:var(--gold-300); background:rgba(255,255,255,.04); }

/* ---- Main column ---- */
.portal-main{ min-width:0; }
.portal-topbar{
  position:sticky; top:0; z-index:30; background: rgba(10,10,13,.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); padding: 18px 34px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.portal-topbar h1{ font-size: 21px; color: var(--white); margin:0; }
.portal-topbar .sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.topbar-actions{ display:flex; align-items:center; gap:14px; }
.icon-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-soft); background: rgba(255,255,255,.03);
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;
}
.icon-btn svg{ width:17px; height:17px; }
.icon-btn .dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background: var(--red-400); }
.mobile-sidebar-toggle{ display:none; }

.portal-content{ padding: 30px 34px 70px; max-width: 1360px; }
.portal-panel{ display:none; }
.portal-panel.active{ display:block; animation: fadeIn .5s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none;} }

/* ---- Stat cards ---- */
.stat-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; margin-bottom: 30px; }
.stat-card{
  background: linear-gradient(180deg, var(--black-3), var(--black-2)); border:1px solid var(--line-soft);
  border-radius: var(--radius); padding: 22px 22px; position:relative; overflow:hidden;
}
.stat-card .top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.stat-card .ic{ width:38px; height:38px; border-radius:10px; background: rgba(212,175,55,.1); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--gold-300); }
.stat-card .ic svg{ width:18px; height:18px; }
.stat-card .delta{ font-size:11.5px; font-weight:800; padding:3px 9px; border-radius: var(--radius-pill); }
.stat-card .delta.up{ color:#6fd394; background: rgba(63,174,103,.14); }
.stat-card .delta.down{ color:#ff8a95; background: rgba(200,30,58,.14); }
.stat-card .value{ font-family: var(--font-display); font-size: 30px; color: var(--white); margin-bottom:4px; }
.stat-card .label{ font-size:12.8px; color:var(--muted); }

/* ---- Panel card / section wrapper ---- */
.panel-card{
  background: var(--black-2); border:1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 26px 26px; margin-bottom: 26px;
}
.panel-card-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.panel-card-head h3{ font-size:17.5px; color:var(--white); margin:0; }
.panel-card-head .sub{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.two-col{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items:start; }

/* ---- Tables ---- */
.table-wrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse: collapse; min-width: 560px; }
.data-table th{
  text-align:left; font-size:11px; letter-spacing:1px; text-transform:uppercase; color: var(--muted-2);
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft); white-space:nowrap;
}
.data-table td{ padding: 15px 14px; border-bottom:1px solid var(--line-soft); font-size:13.8px; color: var(--ink); vertical-align:middle; }
.data-table tr:last-child td{ border-bottom:none; }
.data-table tr{ transition: background .25s; }
.data-table tbody tr:hover{ background: rgba(255,255,255,.02); }
.data-table td svg{ width:16px; height:16px; margin:0 auto; }
.cell-main{ display:flex; align-items:center; gap:12px; }
.cell-thumb{ width:38px; height:38px; border-radius:9px; object-fit:cover; flex-shrink:0; background: var(--grad-red); }
.cell-main b{ display:block; color:var(--white); font-size:13.8px; }
.cell-main span{ font-size:12px; color: var(--muted); }
.row-actions{ display:flex; gap:8px; }
.row-actions button{
  width:32px; height:32px; border-radius:8px; border:1px solid var(--line-soft); background:rgba(255,255,255,.03);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
}
.row-actions button:hover{ border-color: var(--gold); color: var(--gold-300); }
.row-actions button.danger:hover{ border-color: var(--red-400); color:#ff8a95; }
.row-actions svg{ width:14px; height:14px; }

/* ---- Tabs (in-panel, e.g. filters) ---- */
.subtabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.subtabs button{
  padding: 9px 16px; border-radius: var(--radius-pill); border:1px solid var(--line-soft); background:transparent;
  color:var(--muted); font-size:13px; font-weight:700; cursor:pointer; transition: all .25s;
}
.subtabs button.active{ background: rgba(212,175,55,.12); color:var(--gold-300); border-color: rgba(212,175,55,.4); }

/* ---- Progress / bars ---- */
.bar-row{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.bar-row .lbl{ width: 120px; flex-shrink:0; font-size:12.8px; color:var(--muted); }
.bar-track{ flex:1; height:8px; border-radius:6px; background: rgba(255,255,255,.06); overflow:hidden; }
.bar-fill{ height:100%; border-radius:6px; background: var(--grad-gold); transition: width 1.1s var(--ease); }
.bar-row .val{ width:56px; text-align:right; font-size:12.8px; font-weight:700; color:var(--white); flex-shrink:0; }

/* simple css bar chart */
.chart-bars{ display:flex; align-items:flex-end; gap: 14px; height: 200px; padding-top:20px; }
.chart-bars .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; height:100%; justify-content:flex-end; }
.chart-bars .bar{ width:100%; max-width:34px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--gold-400), var(--red-700)); transition: height 1s var(--ease); position:relative; }
.chart-bars .bar:hover::after{
  content: attr(data-val); position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  background:var(--black-4); border:1px solid var(--line); padding:3px 8px; border-radius:6px; font-size:11px; white-space:nowrap; color:var(--white);
}
.chart-bars .month{ font-size:11px; color:var(--muted-2); }

/* donut */
.donut-wrap{ display:flex; align-items:center; gap:24px; }
.donut{ width:140px; height:140px; border-radius:50%; flex-shrink:0; }
.donut-legend{ display:flex; flex-direction:column; gap:10px; }
.donut-legend .dl-item{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink); }
.donut-legend .sw{ width:11px; height:11px; border-radius:3px; flex-shrink:0; }

/* ---- Membership / VIP card (digital card) ---- */
.member-card{
  border-radius: 20px; padding: 26px 28px; position:relative; overflow:hidden; color:var(--white);
  background: linear-gradient(135deg, #17171c 0%, #0d0d10 55%, #1c1116 100%);
  border: 1px solid rgba(212,175,55,.35);
  min-height: 200px; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.6);
}
.member-card::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background: radial-gradient(120% 100% at 100% 0%, rgba(212,175,55,.22), transparent 55%), radial-gradient(80% 80% at 0% 100%, rgba(142,14,31,.35), transparent 60%);
}
.member-card.tier-black{ border-color: rgba(212,175,55,.5); }
.member-card .mc-top{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1; }
.member-card .mc-logo{ height:24px; opacity:.92; }
.member-card .mc-tier{ font-size:11px; letter-spacing:2px; text-transform:uppercase; font-weight:800; color: var(--gold-300); }
.member-card .mc-mid{ position:relative; z-index:1; margin: 22px 0; }
.member-card .mc-name{ font-family: var(--font-display); font-size:22px; letter-spacing:.5px; }
.member-card .mc-id{ font-size:12.5px; color: var(--muted); letter-spacing:2px; margin-top:6px; font-family: 'Courier New', monospace; }
.member-card .mc-bottom{ display:flex; justify-content:space-between; align-items:flex-end; position:relative; z-index:1; }
.member-card .mc-valid{ font-size:11px; color:var(--muted); }
.member-card .mc-qr{ width:52px; height:52px; background:#fff; border-radius:8px; padding:5px; display:flex; align-items:center; justify-content:center; }
.member-card .mc-qr svg{ color:#0a0a0d; }

/* ---- Kanban-ish request/ticket queue ---- */
.queue-item{
  display:flex; gap:16px; align-items:flex-start; padding:18px; border:1px solid var(--line-soft); border-radius: var(--radius);
  margin-bottom:12px; background: rgba(255,255,255,.015); transition: border-color .25s;
}
.queue-item:hover{ border-color: var(--line); }
.queue-item .qi-ic{ width:40px; height:40px; border-radius:10px; background: rgba(200,30,58,.14); color:#ff8a95; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.queue-item .qi-ic svg{ width:18px; height:18px; }
.queue-item .qi-body{ flex:1; min-width:0; }
.queue-item .qi-body .qi-top{ display:flex; justify-content:space-between; gap:10px; margin-bottom:4px; }
.queue-item .qi-body b{ color:var(--white); font-size:14px; }
.queue-item .qi-body p{ font-size:13px; margin:0 0 8px; }
.queue-item .qi-meta{ display:flex; gap:10px; flex-wrap:wrap; font-size:11.5px; color:var(--muted-2); }
.queue-item .qi-actions{ display:flex; gap:8px; flex-shrink:0; }

/* ---- Empty state ---- */
.empty-state{ text-align:center; padding: 60px 20px; }
.empty-state .ic{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background: rgba(212,175,55,.08); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--gold-300); }
.empty-state .ic svg{ width:26px; height:26px; }
.empty-state h4{ color:var(--white); font-size:16px; margin-bottom:8px; }
.empty-state p{ max-width:320px; margin:0 auto 18px; font-size:13.5px; }

/* ---- Wizard (onboarding) ---- */
.wizard-shell{ max-width: 760px; margin: 0 auto; }
.wizard-steps{ display:flex; justify-content:space-between; margin-bottom:44px; position:relative; }
.wizard-steps::before{ content:''; position:absolute; top:17px; left:0; right:0; height:1px; background: var(--line-soft); z-index:0; }
.wizard-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; }
.wizard-step .dot{
  width:36px; height:36px; border-radius:50%; background: var(--black-2); border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:var(--muted); transition: all .35s;
}
.wizard-step span{ font-size:11.5px; color:var(--muted-2); font-weight:700; text-align:center; }
.wizard-step.done .dot{ background: var(--grad-gold); color:#241a03; border-color:transparent; }
.wizard-step.current .dot{ border-color: var(--gold); color:var(--gold-300); box-shadow: 0 0 0 5px rgba(212,175,55,.12); }
.wizard-step.current span{ color: var(--gold-300); }
.wizard-panel{ display:none; }
.wizard-panel.active{ display:block; animation: fadeIn .45s var(--ease); }
.wizard-actions{ display:flex; justify-content:space-between; margin-top:36px; padding-top:26px; border-top:1px solid var(--line-soft); }
.plan-pick-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.plan-pick{
  border:1px solid var(--line-soft); border-radius: var(--radius); padding:20px; cursor:pointer; transition: all .3s;
}
.plan-pick:hover{ border-color: var(--line); }
.plan-pick.selected{ border-color: var(--gold); background: rgba(212,175,55,.06); box-shadow: 0 0 0 3px rgba(212,175,55,.1); }
.plan-pick b{ display:block; color:var(--white); font-size:15.5px; margin-bottom:6px; }
.plan-pick .p{ font-family: var(--font-display); color:var(--gold-300); font-size:22px; margin-bottom:8px; }
.plan-pick p.d{ font-size:12.5px; margin:0; }
.upload-box{
  border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 30px; text-align:center; cursor:pointer;
  transition: all .3s;
}
.upload-box:hover{ border-color: var(--gold); background: rgba(212,175,55,.03); }
.upload-box svg{ width:26px; height:26px; color:var(--gold-300); margin: 0 auto 10px; }
.upload-box b{ display:block; color:var(--white); font-size:13.5px; margin-bottom:4px; }
.upload-box span{ font-size:12px; color:var(--muted-2); }
.file-chip{ display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,.05); border:1px solid var(--line-soft); padding:8px 12px; border-radius:8px; font-size:12.5px; margin: 8px 8px 0 0; }
.file-chip svg{ width:13px; height:13px; color:var(--gold-300); }

/* mobile portal */
@media (max-width: 1080px){
  .portal-shell{ grid-template-columns: 1fr; }
  .portal-sidebar{
    position:fixed; left:0; top:0; bottom:0; width: 280px; transform: translateX(-100%);
    transition: transform .4s var(--ease); box-shadow: 30px 0 60px rgba(0,0,0,.5);
  }
  .portal-sidebar.open{ transform: translateX(0); }
  .mobile-sidebar-toggle{ display:flex; }
  .stat-row{ grid-template-columns: repeat(2,1fr); }
  .two-col{ grid-template-columns: 1fr; }
  .plan-pick-grid{ grid-template-columns: 1fr; }
  .portal-content{ padding: 24px 18px 60px; }
  .portal-topbar{ padding: 16px 18px; }
}
@media (max-width: 560px){
  .stat-row{ grid-template-columns: 1fr; }
  .wizard-step span{ display:none; }
  .donut-wrap{ flex-direction:column; }
}

.sidebar-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.55); z-index:35; opacity:0; visibility:hidden; transition: opacity .35s; }
.sidebar-backdrop.open{ opacity:1; visibility:visible; }