/* ═══════════════════════════════════════════════
   THE DOORS PASSPORT — Shared Stylesheet
   thedoorsnightclubsa.co.za
═══════════════════════════════════════════════ */

/* ── Reset & Variables ── */
@font-face{font-family:'DoorsCyberpunk';src:url('/fonts/Cyberpunks-MVWRY.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --red:       #c0392b;
  --red-glow:  rgba(192,57,43,0.35);
  --bg:        #080808;
  --surface:   #111111;
  --surface2:  #1a1a1a;
  --border:    rgba(255,255,255,0.08);
  --text:      #e8e4dd;
  --muted:     #aaa;
  --radius:    4px;
}

/* ── Base ── */
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:'Rajdhani',sans-serif;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:0;
}

a{ color:var(--red); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ── Typography ── */
.cinzel{ font-family:'Cinzel',serif; }

.page-label{
  display:block;
  font-family:'Cinzel',serif;
  font-size:0.6rem;
  letter-spacing:0.5em;
  color:var(--red);
  text-transform:uppercase;
  margin-bottom:0.5rem;
}

.page-title{
  font-family:'DoorsCyberpunk','Cinzel',serif;
  font-size:clamp(1.2rem,5vw,1.8rem);
  font-weight:400;
  letter-spacing:0.06em;
  color:var(--text);
}

.page-sub{
  font-size:0.95rem;
  color:var(--muted);
  margin-top:0.5rem;
  line-height:1.6;
}

.section-label{
  display:block;
  font-family:'Cinzel',serif;
  font-size:0.6rem;
  letter-spacing:0.4em;
  color:var(--red);
  text-transform:uppercase;
  margin-bottom:0.5rem;
}

/* ── Layout ── */
.container{
  position:relative;
  z-index:1;
  max-width:680px;
  margin:0 auto;
  padding:3rem 1.25rem 5rem;
}

.main{
  max-width:1200px;
  margin:0 auto;
  padding:2rem 1.5rem;
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin-bottom:2rem;
}

@media(max-width:700px){ .grid-2{ grid-template-columns:1fr; } }

/* ── Divider ── */
.divider{
  width:100%;
  height:1px;
  background:linear-gradient(to right,transparent,var(--red),transparent);
  margin:1.5rem 0;
  opacity:0.4;
}

/* ── Logo ── */
.passport-logo{
  max-width:200px;
  width:100%;
  filter:drop-shadow(0 0 30px var(--red-glow));
  margin-bottom:1.5rem;
}

/* ── Topbar (admin pages) ── */
.topbar{
  background:var(--surface);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:1rem 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.5rem;
}

.topbar h1{
  font-family:'Cinzel',serif;
  font-size:0.9rem;
  letter-spacing:0.3em;
  color:var(--red);
}

.topbar-links{
  display:flex;
  gap:1rem;
  align-items:center;
  flex-wrap:wrap;
}

.topbar-links a{
  font-size:0.8rem;
  color:#888;
  border:1px solid rgba(255,255,255,0.1);
  padding:0.3rem 0.75rem;
  border-radius:3px;
  text-decoration:none;
  transition:color 0.2s;
}

.topbar-links a:hover{ color:var(--text); }
.topbar-links a.danger{ background:rgba(192,57,43,0.12); color:var(--red); border-color:rgba(192,57,43,0.3); }

/* ── Cards ── */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  margin-bottom:1.5rem;
}

.card-title{
  font-family:'Cinzel',serif;
  font-size:0.65rem;
  letter-spacing:0.35em;
  color:#aaa;
  text-transform:uppercase;
  margin-bottom:1.25rem;
}

/* ── Forms ── */
label{
  display:block;
  font-size:0.72rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:0.4rem;
  margin-top:0.75rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea{
  width:100%;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:'Rajdhani',sans-serif;
  font-size:0.95rem;
  padding:0.7rem 1rem;
  outline:none;
  transition:border-color 0.2s;
  -webkit-appearance:none;
}

input:focus,select:focus,textarea:focus{ border-color:var(--red); }
textarea{ min-height:160px; resize:vertical; line-height:1.6; }
input[type="file"]{ padding:0.5rem; color:#aaa; }
input[type="checkbox"]{ width:auto; }

/* ── Buttons ── */
.btn{
  display:inline-block;
  padding:0.75rem 1.5rem;
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  font-family:'Cinzel',serif;
  font-size:0.75rem;
  letter-spacing:0.25em;
  text-transform:uppercase;
  text-decoration:none;
  transition:opacity 0.2s;
  margin-top:0.75rem;
}

.btn-primary{ background:var(--red); color:#fff; box-shadow:0 4px 16px var(--red-glow); }
.btn-primary:hover{ opacity:0.9; text-decoration:none; }

.btn-secondary{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border);
}
.btn-secondary:hover{ border-color:var(--red); color:var(--text); text-decoration:none; }

.btn-full{ width:100%; text-align:center; }

.btn-sm{
  padding:0.2rem 0.6rem;
  font-size:0.65rem;
  letter-spacing:0.1em;
  font-family:'Rajdhani',sans-serif;
  border-radius:3px;
  border:none;
  cursor:pointer;
  margin-top:0;
}

.btn-danger-sm{ background:rgba(192,57,43,0.15); color:#e74c3c; border:1px solid rgba(192,57,43,0.3); }
.btn-danger-sm:hover{ background:rgba(192,57,43,0.3); }
.btn-gold-sm{ background:rgba(212,160,23,0.15); color:#d4a017; border:1px solid rgba(212,160,23,0.3); }
.btn-gold-sm:hover{ background:rgba(212,160,23,0.3); }
.btn-green-sm{ background:#1a3a1a; color:#2ecc71; border:1px solid rgba(39,174,96,0.3); }
.btn-green-sm:hover{ background:rgba(39,174,96,0.15); }

/* ── Messages ── */
.msg{
  padding:0.75rem 1rem;
  border-radius:var(--radius);
  margin-bottom:1.5rem;
  font-size:0.9rem;
  line-height:1.6;
}
.msg.success{ background:rgba(39,174,96,0.1); border:1px solid rgba(39,174,96,0.3); color:#2ecc71; }
.msg.error{ background:rgba(192,57,43,0.1); border:1px solid rgba(192,57,43,0.3); color:#e74c3c; }

/* ── Tables ── */
.table-wrap{ overflow-x:auto; }

table{ width:100%; border-collapse:collapse; font-size:0.88rem; }

th{
  font-size:0.62rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#aaa;
  text-align:left;
  padding:0.6rem 0.75rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

td{
  padding:0.6rem 0.75rem;
  border-bottom:1px solid rgba(255,255,255,0.04);
  vertical-align:middle;
}

tr:last-child td{ border-bottom:none; }

.td-muted{ color:#888; font-size:0.82rem; }
.td-dim{ color:#555; font-size:0.78rem; }
.td-red{ font-family:'Cinzel',serif; color:var(--red); }
.td-green{ color:#2ecc71; font-family:'Cinzel',serif; }

/* ── Badges ── */
code{
  background:var(--surface2);
  padding:0.2rem 0.5rem;
  border-radius:3px;
  font-size:0.82rem;
  color:#e0e0e0;
  font-family:monospace;
}

.badge{
  display:inline-block;
  padding:0.15rem 0.5rem;
  border-radius:3px;
  font-size:0.65rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

.badge-active{ background:rgba(39,174,96,0.15); color:#2ecc71; }
.badge-inactive{ background:rgba(255,255,255,0.05); color:#444; }

/* ── Filter Tabs ── */
.filter-row{
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
  margin-bottom:1.5rem;
  align-items:center;
}

.filter-label{
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#555;
  margin-right:0.25rem;
}

.filter-sep{ width:1px; height:20px; background:rgba(255,255,255,0.1); margin:0 0.25rem; }

.tab{
  padding:0.35rem 1rem;
  border-radius:var(--radius);
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.1);
  color:#888;
  text-decoration:none;
  display:inline-block;
  transition:all 0.2s;
}
.tab.active{ background:var(--red); color:#fff; border-color:var(--red); }
.tab:hover:not(.active){ color:var(--text); text-decoration:none; }

/* ── Search Box ── */
.search-box{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:'Rajdhani',sans-serif;
  font-size:0.9rem;
  padding:0.4rem 0.85rem;
  outline:none;
  width:220px;
}
.search-box:focus{ border-color:var(--red); }

/* ── Tier Dot ── */
.tier-dot{
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  margin-right:5px;
  vertical-align:middle;
  flex-shrink:0;
}

/* ── Profile Pic Thumb ── */
.pic-thumb{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.1);
}

/* ── Passport Header (public pages) ── */
.passport-header{
  text-align:center;
  margin-bottom:3rem;
}

/* ── CTA Section ── */
.cta{
  text-align:center;
  margin-top:2.5rem;
}

/* ── Footer ── */
.passport-footer{
  text-align:center;
  margin-top:2rem;
  font-size:0.65rem;
  letter-spacing:0.2em;
  color:#333;
  text-transform:uppercase;
}

.passport-legal{
  text-align:center;
  margin-top:1.25rem;
  font-size:0.65rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

.passport-legal a{ color:#888; }
.passport-legal a:hover{ color:var(--text); }

.passport-copyright{
  text-align:center;
  margin-top:0.75rem;
  font-size:0.62rem;
  letter-spacing:0.12em;
  color:#555;
  text-transform:uppercase;
  line-height:1.6;
}

/* ── Count stat ── */
.stat-count{ font-family:'Cinzel',serif; font-size:0.75rem; color:#555; margin-bottom:1rem; }

/* ── Inline form ── */
.inline-form{ display:inline; }

/* ── Logout button ── */
.btn-logout{
  background:none;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:3px;
  color:#888;
  padding:0.3rem 0.75rem;
  cursor:pointer;
  font-family:'Rajdhani',sans-serif;
  font-size:0.8rem;
  letter-spacing:0.1em;
}
.btn-logout:hover{ color:var(--text); }

/* ── Responsive ── */
@media(max-width:768px){
  .container{ padding:2rem 1rem 4rem; }
  .topbar{ padding:1rem 1.25rem; }
  .main{ padding:1.5rem 1rem; }
  .card{ padding:1.25rem; }
}

.btn-gold{background:transparent;color:#d4a017;border:1px solid #d4a017;padding:0.2rem 0.7rem;border-radius:3px;font-size:0.72rem;cursor:pointer;font-family:'Rajdhani',sans-serif;letter-spacing:0.1em;}
.btn-gold:hover{background:rgba(212,160,23,0.15);}
.btn-danger{background:transparent;color:#c0392b;border:1px solid #c0392b;padding:0.2rem 0.7rem;border-radius:3px;font-size:0.72rem;cursor:pointer;font-family:'Rajdhani',sans-serif;letter-spacing:0.1em;}
.btn-danger:hover{background:rgba(192,57,43,0.15);}