/* =====================================================
   admin-style.css — SMS Royal Residency Admin Panel
   Colors: dark navy + gold (matches site theme)
===================================================== */

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { font-size:16px; }
body { font-family:'Lato',sans-serif; background:#290e35; color:#fff; min-height:100vh; }
a { text-decoration:none; color:inherit; }

/* ── Auth Views (Setup / Login) ───────────────────── */
.auth-view {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 16px;
  background: radial-gradient(ellipse at top, #4a2058 0%, #290e35 60%);
}

.auth-card {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(201,162,75,0.25);
  border-radius:14px;
  padding:48px 40px;
  width:100%;
  max-width:460px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.auth-logo {
  width:90px;
  filter:drop-shadow(0 0 20px rgba(201,162,75,0.4));
}

.auth-title {
  font-family:'Playfair Display',serif;
  font-size:1.8rem;
  color:#c9a24b;
}

.auth-sub {
  font-size:0.9rem;
  color:#b9a6c4;
  text-align:center;
  line-height:1.6;
}

.auth-form {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:8px;
}

.af-group { display:flex; flex-direction:column; gap:6px; }

.af-group label {
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#b9a6c4;
}

.af-group input {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(201,162,75,0.2);
  border-radius:6px;
  padding:13px 16px;
  color:#fff;
  font-size:0.95rem;
  font-family:'Lato',sans-serif;
  outline:none;
  transition:border-color 0.3s;
}

.af-group input:focus { border-color:#c9a24b; }
.af-group input::placeholder { color:rgba(255,255,255,0.25); }

.auth-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px;
  background:linear-gradient(135deg,#9c7a2c,#ecd08a,#9c7a2c);
  background-size:200% auto;
  color:#4a2058;
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:1px;
  text-transform:uppercase;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:background-position 0.4s, box-shadow 0.3s;
  box-shadow:0 4px 20px rgba(201,162,75,0.35);
  margin-top:6px;
}

.auth-btn:hover {
  background-position:right center;
  box-shadow:0 6px 28px rgba(201,162,75,0.55);
}

.auth-msg {
  font-size:0.88rem;
  font-weight:600;
  padding:10px 14px;
  border-radius:6px;
}

.auth-msg--error   { background:rgba(192,57,43,0.2); border:1px solid #c0392b; color:#e74c3c; }
.auth-msg--success { background:rgba(39,174,96,0.2); border:1px solid #27ae60; color:#2ecc71; }

.back-website {
  font-size:0.85rem;
  color:#b9a6c4;
  margin-top:8px;
  transition:color 0.3s;
}
.back-website:hover { color:#c9a24b; }

/* ── Dashboard Header ────────────────────────────── */
.adm-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  background:rgba(6,14,45,0.98);
  border-bottom:1px solid rgba(201,162,75,0.2);
  position:sticky;
  top:0;
  z-index:100;
  gap:16px;
  flex-wrap:wrap;
}

.adm-header-left { display:flex; align-items:center; gap:14px; }

.adm-nav-logo {
  width:46px;
  filter:drop-shadow(0 0 8px rgba(201,162,75,0.3));
}

.adm-nav-title {
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  color:#fff;
}

.adm-nav-sub {
  display:block;
  font-size:0.72rem;
  color:#c9a24b;
  letter-spacing:2px;
  text-transform:uppercase;
}

.adm-header-right {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.adm-refresh-text {
  font-size:0.75rem;
  color:#6e5a73;
}

.adm-icon-btn {
  width:38px; height:38px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(201,162,75,0.2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#c9a24b; font-size:0.9rem;
  cursor:pointer; transition:background 0.3s, transform 0.2s;
}
.adm-icon-btn:hover { background:rgba(201,162,75,0.15); transform:scale(1.1); }

.adm-logout-btn {
  display:flex; align-items:center; gap:7px;
  padding:9px 18px;
  background:rgba(192,57,43,0.15);
  border:1px solid rgba(192,57,43,0.4);
  border-radius:6px;
  color:#e74c3c; font-size:0.82rem; font-weight:700;
  cursor:pointer; transition:background 0.3s;
  letter-spacing:1px; text-transform:uppercase;
}
.adm-logout-btn:hover { background:rgba(192,57,43,0.3); }

/* ── Dashboard Body ──────────────────────────────── */
.adm-body { padding:28px; max-width:1300px; margin:0 auto; }

.adm-welcome {
  background:linear-gradient(135deg,#4a2058,#5b2870);
  border:1px solid rgba(201,162,75,0.2);
  border-radius:10px;
  padding:28px 32px;
  margin-bottom:28px;
}

.adm-welcome h2 {
  font-family:'Playfair Display',serif;
  font-size:1.5rem;
  color:#fff;
  margin-bottom:6px;
}

.adm-welcome p { font-size:0.9rem; color:#b9a6c4; }

/* ── Stats Row ───────────────────────────────────── */
.adm-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:32px;
}

.adm-stat-card {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(201,162,75,0.15);
  border-radius:10px;
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.asc-label {
  font-size:0.75rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#6e5a73;
}

.asc-num {
  font-family:'Playfair Display',serif;
  font-size:2.4rem;
  font-weight:700;
  color:#c9a24b;
  line-height:1;
}

.asc--available .asc-num { color:#2ecc71; }
.asc--occupied  .asc-num { color:#e74c3c; }
.asc--reserved  .asc-num { color:#f0b429; }

/* ── Section ─────────────────────────────────────── */
.adm-section {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(201,162,75,0.12);
  border-radius:10px;
  padding:28px;
  margin-bottom:28px;
}

.adm-section-title {
  font-family:'Playfair Display',serif;
  font-size:1.2rem;
  color:#c9a24b;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}

/* ── Legend ──────────────────────────────────────── */
.adm-legend {
  display:flex;
  gap:24px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.adm-legend span {
  display:flex; align-items:center; gap:8px;
  font-size:0.82rem; color:#b9a6c4;
}

.leg-dot { width:10px; height:10px; border-radius:50%; }
.leg--available .leg-dot { background:#2ecc71; }
.leg--occupied  .leg-dot { background:#e74c3c; }
.leg--reserved  .leg-dot { background:#f0b429; }

/* ── Admin Room Grid ─────────────────────────────── */
.adm-floor { margin-bottom:24px; }

.adm-floor-label {
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#6e5a73;
  margin-bottom:12px;
}

.adm-floor-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
}

.adm-room-card {
  border-left:3px solid;
  border-radius:6px;
  padding:14px 16px;
  background:rgba(255,255,255,0.03);
  transition:transform 0.2s;
}
.adm-room-card:hover { transform:translateX(4px); }

.arc-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}

.arc-number { font-weight:700; font-size:0.92rem; color:#fff; }

.arc-badge {
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:20px;
  color:#4a2058;
}

.arc-type {
  font-size:0.72rem;
  letter-spacing:1px;
  color:#6e5a73;
  text-transform:uppercase;
}

/* ── Bookings List ───────────────────────────────── */
.adm-list-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.adm-list-header .adm-section-title { margin-bottom:0; }

.filter-btns { display:flex; gap:8px; flex-wrap:wrap; }

.filter-btn {
  padding:7px 16px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(201,162,75,0.2);
  border-radius:20px;
  color:#b9a6c4;
  font-size:0.8rem;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s;
}

.filter-btn.filter--active,
.filter-btn:hover {
  background:rgba(201,162,75,0.12);
  border-color:#c9a24b;
  color:#c9a24b;
}

.no-bookings {
  text-align:center;
  padding:60px 20px;
  color:#b9a6c4;
  font-size:1rem;
}

.no-bookings i { font-size:3rem; display:block; margin-bottom:14px; }

/* ── Booking Card ────────────────────────────────── */
.bk-card {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(201,162,75,0.15);
  border-radius:10px;
  margin-bottom:16px;
  overflow:hidden;
  transition:border-color 0.3s;
}
.bk-card:hover { border-color:rgba(201,162,75,0.35); }

.bk-card--cancelled {
  border-color:rgba(192,57,43,0.2);
}
/* dim only the details of a cancelled booking — never the action buttons */
.bk-card--cancelled .bk-header,.bk-card--cancelled .bk-grid,.bk-card--cancelled .bk-created,.bk-card--cancelled .bk-expiry{opacity:0.75}

.bk-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.bk-id { font-size:0.85rem; color:#c9a24b; font-weight:700; display:flex; align-items:center; gap:8px; }

.bk-status {
  font-size:0.7rem;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:20px;
}
.bs--confirmed { background:rgba(39,174,96,0.15); color:#2ecc71; border:1px solid #27ae60; }
.bs--cancelled { background:rgba(192,57,43,0.15); color:#e74c3c; border:1px solid #c0392b; }

.bk-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  padding:4px 0;
}

.bk-field {
  padding:12px 20px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.bk-field--full  { grid-column:1/-1; }

.bk-field label {
  display:block;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#6e5a73;
  margin-bottom:4px;
}

.bk-field span { font-size:0.88rem; color:#d9ccdf; }
.bk-total { color:#c9a24b !important; font-weight:700; font-size:1rem !important; }

.bk-footer {
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 20px;
  background:rgba(255,255,255,0.02);
  border-top:1px solid rgba(255,255,255,0.04);
  flex-wrap:wrap;
}

.bk-created { font-size:0.78rem; color:#b9a6c4; }

.bk-expiry {
  font-size:0.78rem;
  color:#6e5a73;
  display:flex;
  align-items:center;
  gap:5px;
  margin-right:auto;
}
.exp--soon { color:#f0b429 !important; }

.bk-act-btn {
  padding:7px 16px;
  border-radius:6px;
  font-size:0.78rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  border:none;
  letter-spacing:0.5px;
  transition:background 0.2s;
}

.bk-cancel { background:rgba(192,57,43,0.2); color:#e74c3c; border:1px solid rgba(192,57,43,0.4); }
.bk-cancel:hover { background:rgba(192,57,43,0.35); }

.bk-delete { background:rgba(100,100,100,0.15); color:#b9a6c4; border:1px solid rgba(100,100,100,0.3); }
.bk-delete:hover { background:rgba(100,100,100,0.3); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 1024px) {
  .adm-stats { grid-template-columns:repeat(2,1fr); }
  .bk-grid   { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 768px) {
  .adm-body { padding:16px; }
  .adm-stats { grid-template-columns:1fr 1fr; gap:12px; }
  .adm-floor-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
  .bk-grid { grid-template-columns:1fr 1fr; }
  .adm-header { padding:12px 16px; }
  .auth-card { padding:32px 22px; }
  .adm-list-header { flex-direction:column; align-items:flex-start; }
}

@media (max-width: 480px) {
  .adm-stats { grid-template-columns:1fr 1fr; }
  .bk-grid { grid-template-columns:1fr; }
  .adm-floor-grid { grid-template-columns:repeat(2,1fr); }
}

/* ── Notification, tools, import ── */
.adm-newbanner{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f6e7cd;border:1px solid #c9a24b;color:#4a2058;padding:12px 18px;border-radius:8px;margin-bottom:14px;animation:pulse-b 1.6s infinite}
@keyframes pulse-b{50%{box-shadow:0 0 0 4px rgba(201,162,75,.35)}}
.adm-tools{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.adm-tool-btn{background:#4a2058;color:#fff;border:1px solid #c9a24b;padding:9px 16px;border-radius:6px;cursor:pointer;font-weight:600}
.adm-tool-gold{background:#c9a24b;color:#4a2058;margin-top:10px}
.adm-imp{width:100%;border:1px solid #e6d3ae;border-radius:6px;padding:10px;font-family:inherit;resize:vertical}

/* server-backed admin additions */
.adm-reminder{background:#f6e7cd;color:#7a5200;border:1px solid #e9c46a;gap:12px;flex-wrap:wrap}
.adm-tools a.adm-tool-btn,.adm-reminder a.adm-tool-btn{text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.bk-footer .bk-act-btn+.bk-act-btn{margin-left:6px}
.bk-new{background:#c9a24b;color:#4a2058;border-radius:4px;font-size:.65rem;font-weight:800;padding:2px 6px;margin-left:6px;vertical-align:middle}
.adm-menu-link{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;padding:8px 12px;border:1px solid rgba(201,162,75,.5);border-radius:6px;white-space:nowrap}
.adm-menu-link:hover{background:rgba(201,162,75,.18);color:#c9a24b}
@media(max-width:600px){.adm-menu-link{font-size:0;gap:0;padding:8px 10px}.adm-menu-link i{font-size:.95rem}}

.bk-walk{background:rgba(201,162,75,.2);color:#c9a24b;border:1px solid rgba(201,162,75,.5);border-radius:6px;padding:1px 7px;font-size:.68rem;margin-left:6px}
.wk-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:end}
.wk-field label{display:block;font-size:.72rem;color:#8fa0c8;margin-bottom:4px}
.wk-field input,.wk-field select{width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(201,162,75,.3);background:rgba(255,255,255,.06);color:#e8edf8;font:inherit;color-scheme:dark}
.wk-field select option{color:#4a2058;background:#fff}
.wk-total{color:#c9a24b;font-weight:700;align-self:center}
.wk-form .auth-msg{grid-column:1/-1}

/* walk-in: choose one or more rooms */
.wk-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.wk-rooms .wk-room-opt{display:flex;justify-content:flex-start;text-align:left;line-height:1.25;align-items:center;gap:6px;padding:8px 10px;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:rgba(255,255,255,.06);color:#e8ecff;cursor:pointer;font-size:.85rem}
.wk-rooms .wk-room-opt input{accent-color:#c9a24b;width:auto;min-width:0;flex:0 0 auto;margin:0;padding:0;border:0;background:none;box-shadow:none}
.wk-rooms .wk-room-opt.on{border-color:#c9a24b;background:rgba(201,162,75,.2);color:#fff}
.wk-rooms .wk-none{grid-column:1/-1;color:#9aa6cf;font-size:.9rem}
.bk-rooms-list{display:flex;flex-wrap:wrap;gap:6px}
.bk-rooms-list .bk-room-chip{background:rgba(201,162,75,.16);color:#f0d98a;border:1px solid rgba(201,162,75,.35);border-radius:12px;padding:2px 10px;font-size:.85rem}

/* ── Royal theme (plum + gold) polish ── */
body{background:radial-gradient(900px 500px at 80% -10%,rgba(201,162,75,.12),transparent 60%),#290e35}
.auth-card{box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(236,208,138,.25);backdrop-filter:blur(6px)}
.adm-header{background:rgba(41,14,53,.95);border-bottom:1px solid rgba(201,162,75,.35)}
.auth-btn,.adm-tool-gold{background:linear-gradient(135deg,#ecd08a,#c9a24b 55%,#9c7a2c);color:#2a1d02;box-shadow:0 4px 0 #9c7a2c,0 10px 18px rgba(0,0,0,.3)}

/* ═══════════════════════════════════════════════════════
   WHITE + CREAM THEME (admin panel) — replaces the purple
   ═══════════════════════════════════════════════════════ */
:root{--cream:#faf5ea;--cream2:#f6ecd6;--white:#fff;--line:#e6d3ae;--ink:#3a2e1f;--muted:#7a6a52;--gold:#b88a2a;--gold2:#c9a24b}
body{background:var(--cream);color:var(--ink)}
.auth-view{background:radial-gradient(ellipse at top,#fffdf8 0%,var(--cream) 70%)}
.auth-card{background:var(--white);border:1px solid var(--line);box-shadow:0 18px 44px rgba(120,90,30,.14);backdrop-filter:none}
.auth-logo{filter:none}
.auth-title{color:var(--gold)}
.auth-sub,.back-website{color:var(--muted)}
.back-website:hover{color:var(--gold)}
.af-group label{color:var(--muted)}
.af-group input{background:#fffdf8;border:1px solid var(--line);color:var(--ink)}
.af-group input:focus{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(201,162,75,.18)}
.af-group input::placeholder{color:#b3a58b}
.auth-btn,.adm-tool-gold{background:linear-gradient(135deg,#ecd08a,#c9a24b 55%,#b88a2a);color:#3a2a06;box-shadow:0 3px 10px rgba(184,138,42,.35)}
.auth-btn:hover{box-shadow:0 5px 16px rgba(184,138,42,.5)}
.auth-msg--error{background:#fdecea;border-color:#e0a29a;color:#a93226}
.auth-msg--success{background:#e8f6ee;border-color:#9ad3b0;color:#1e8449}

.adm-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(120,90,30,.06)}
.adm-nav-logo{filter:none}
.adm-nav-title{color:var(--ink)}
.adm-nav-sub{color:var(--gold)}
.adm-refresh-text{color:var(--muted)}
.adm-icon-btn{background:var(--cream);border:1px solid var(--line);color:var(--gold)}
.adm-icon-btn:hover{background:var(--cream2)}
.adm-menu-link{color:var(--ink);border:1px solid var(--line);background:var(--cream)}
.adm-menu-link:hover{background:var(--cream2);color:var(--gold)}
.adm-logout-btn{background:#fdecea;border:1px solid #e0a29a;color:#a93226}
.adm-logout-btn:hover{background:#f9d6d1}

.adm-welcome{background:linear-gradient(135deg,#fffdf8,var(--cream2));border:1px solid var(--line);box-shadow:0 4px 14px rgba(120,90,30,.07)}
.adm-welcome h2{color:var(--ink)}
.adm-welcome h2 #admin-welcome-name{color:var(--gold)}
.adm-welcome p{color:var(--muted)}

.adm-stat-card,.adm-section{background:var(--white);border:1px solid var(--line);box-shadow:0 2px 10px rgba(120,90,30,.06)}
.asc-label,.adm-floor-label,.arc-type,.bk-field label{color:var(--muted)}
.asc-num{color:var(--gold)}
.asc--available .asc-num{color:#1e8449}.asc--occupied .asc-num{color:#c0392b}.asc--reserved .asc-num{color:#b9770e}
.adm-section-title{color:var(--gold)}
.adm-legend span{color:var(--muted)}
.arc-number{color:var(--ink)}
.arc-badge{color:#fff}
.filter-btn{background:var(--cream);border:1px solid var(--line);color:var(--muted)}
.filter-btn.filter--active,.filter-btn:hover{background:var(--cream2);border-color:var(--gold2);color:var(--gold)}
.no-bookings{color:var(--muted)}

.bk-card{background:var(--white);border:1px solid var(--line)}
.bk-card:hover{border-color:var(--gold2)}
.bk-header,.bk-footer{background:var(--cream);border-color:var(--line)}
.bk-field{border-bottom:1px solid #f1e6cf}
.bk-id{color:var(--gold)}
.bk-field span{color:var(--ink)}
.bk-total{color:var(--gold)!important}
.bs--confirmed{background:#e8f6ee;color:#1e8449;border-color:#9ad3b0}
.bs--cancelled{background:#fdecea;color:#a93226;border-color:#e0a29a}
.bk-created{color:var(--muted)}.bk-expiry{color:var(--muted)}.exp--soon{color:#b9770e!important}
.bk-cancel{background:#fdecea;color:#a93226;border:1px solid #e0a29a}.bk-cancel:hover{background:#f9d6d1}
.bk-delete{background:var(--cream);color:var(--muted);border:1px solid var(--line)}.bk-delete:hover{background:var(--cream2)}
.bk-new,.bk-walk{background:var(--cream2);color:var(--gold);border:1px solid var(--gold2)}
.bk-rooms-list .bk-room-chip{background:var(--cream2);color:#7a5a12;border:1px solid var(--line)}

.adm-newbanner{background:var(--cream2);border:1px solid var(--gold2);color:var(--ink)}
.adm-reminder{background:#fff6dd;color:#7a5200;border:1px solid #e9c46a}
.adm-tool-btn{background:var(--white);color:var(--ink);border:1px solid var(--gold2)}
.adm-tool-btn:hover{background:var(--cream2)}
.adm-tool-gold{color:#3a2a06;border-color:var(--gold2)}
.adm-imp{background:#fffdf8;color:var(--ink)}

.wk-field label{color:var(--muted)}
.wk-field input,.wk-field select{background:#fffdf8;border:1px solid var(--line);color:var(--ink);color-scheme:light}
.wk-field input:focus{outline:none;border-color:var(--gold2);box-shadow:0 0 0 3px rgba(201,162,75,.18)}
.wk-total{color:var(--gold)}
.wk-rooms .wk-room-opt{background:#fffdf8;border:1px solid var(--line);color:var(--ink)}
.wk-rooms .wk-room-opt.on{border-color:var(--gold2);background:var(--cream2);color:var(--ink)}
.wk-rooms .wk-none{color:var(--muted)}

/* walk-in calendar */
.wk-dp{position:relative}
.wk-datebtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:#fffdf8;color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.wk-datebtn:hover,.wk-datebtn.wk-active{border-color:var(--gold2)}
.wk-datebtn i{color:var(--gold)}
.wk-datebtn .wk-ph{color:#b3a58b}
.wk-datebtn.wk-locked{background:#ece8df;border-color:#ddd6c6;color:#a39a89;cursor:not-allowed}
.wk-datebtn.wk-locked i,.wk-datebtn.wk-locked .wk-ph{color:#b9b09f}
.wk-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:80;width:min(320px,calc(100vw - 32px));background:var(--white);border:2px solid var(--gold2);border-radius:12px;padding:14px;box-shadow:0 16px 40px rgba(90,65,15,.22)}
.wk-pop[hidden]{display:none}
.wk-cnav{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.wk-cmonth{font-weight:700;color:var(--ink)}
.wk-carrow{width:34px;height:34px;border:1px solid var(--gold2);border-radius:8px;background:var(--cream);color:var(--ink);cursor:pointer}
.wk-carrow:disabled{opacity:.35;cursor:not-allowed}
.wk-cgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.wk-cdow span{font-size:.75rem;font-weight:700;color:var(--gold);padding:4px 0}
.wk-cell{display:flex;align-items:center;justify-content:center;height:38px;border-radius:8px;font-size:.95rem;font-weight:600;color:var(--ink)}
.wk-empty{visibility:hidden}
.wk-live{cursor:pointer}.wk-live:hover{background:var(--cream2)}
.wk-off{color:#c9bfa9;font-weight:400;cursor:not-allowed;background:#f6f3ec}
.wk-range{background:var(--cream2)}
.wk-sel{background:var(--gold2)!important;color:#fff!important}
@media(max-width:480px){.wk-pop{left:50%;transform:translateX(-50%)}}
.wk-anchor{box-shadow:inset 0 0 0 2px var(--gold2);color:var(--gold)!important;font-weight:700}
.wk-form .wk-full{grid-column:1/-1}

/* Delete button: always clearly active (also on cancelled bookings) */
.bk-delete,.bk-card--cancelled .bk-delete{background:#c0392b;color:#fff;border:1px solid #a93226;opacity:1;cursor:pointer}
.bk-delete:hover,.bk-card--cancelled .bk-delete:hover{background:#a93226}

/* ═══════════════════════════════════════════════════════
   PURPLE + GOLD + CREAM (same 3 colours as the website)
   ═══════════════════════════════════════════════════════ */
:root{--plum:#4a2058;--plum2:#6a3480;--plum3:#31133f}
body{background:var(--cream)}
/* login / setup */
.auth-view{background:radial-gradient(ellipse at top,var(--plum2) 0%,var(--plum) 55%,var(--plum3) 100%)}
.auth-card{background:var(--cream);border:2px solid var(--gold2);box-shadow:0 22px 54px rgba(32,10,42,.55)}
.auth-title{color:var(--plum)}
.auth-sub{color:var(--plum2)}
.back-website{color:var(--cream)}.back-website:hover{color:var(--gold2)}
.af-group label{color:var(--plum2)}
.af-group input{background:#fff;border:1px solid var(--line);color:var(--plum)}
.af-group input:focus{border-color:var(--plum2);box-shadow:0 0 0 3px rgba(106,52,128,.18)}
/* header */
.adm-header{background:linear-gradient(135deg,var(--plum3),var(--plum) 60%,var(--plum2));border-bottom:3px solid var(--gold2);box-shadow:0 4px 16px rgba(49,19,63,.35)}
.adm-nav-title{color:var(--cream)}
.adm-nav-sub{color:var(--gold2)}
.adm-refresh-text{color:var(--plum2)}
.adm-header .adm-refresh-text{color:#e6dbea}
.adm-legend span,.no-bookings{color:var(--plum2)}
.bk-created,.bk-expiry{color:var(--plum2)}
.adm-icon-btn{background:rgba(255,255,255,.1);border:1px solid rgba(201,162,75,.6);color:var(--gold2)}
.adm-icon-btn:hover{background:rgba(255,255,255,.2)}
.adm-menu-link{background:rgba(255,255,255,.1);color:var(--cream);border:1px solid rgba(201,162,75,.6)}
.adm-menu-link:hover{background:var(--gold2);color:var(--plum3)}
.adm-logout-btn{background:var(--gold2);color:var(--plum3);border:1px solid var(--gold)}
.adm-logout-btn:hover{background:#ecd08a}
/* welcome banner */
.adm-welcome{background:linear-gradient(135deg,var(--plum3),var(--plum) 55%,var(--plum2));border:2px solid var(--gold2);box-shadow:0 8px 22px rgba(74,32,88,.28)}
.adm-welcome h2{color:var(--cream)}
.adm-welcome h2 #admin-welcome-name{color:var(--gold2)}
.adm-welcome p{color:#e6dbea}
/* cards & sections */
.adm-stat-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--plum2);box-shadow:0 4px 14px rgba(74,32,88,.1)}
.adm-section{background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold2);box-shadow:0 4px 14px rgba(74,32,88,.08)}
.asc-label,.adm-floor-label{color:var(--plum2)}
.asc-num{color:var(--plum)}
.asc--available .asc-num{color:#1e8449}.asc--occupied .asc-num{color:#c0392b}.asc--reserved .asc-num{color:#b9770e}
.adm-section-title{color:var(--plum)}
.adm-section-title i{color:var(--gold)}
.adm-floor-label{border-color:var(--line)}
.arc-number{color:var(--plum)}
.filter-btn{background:var(--cream);border:1px solid var(--line);color:var(--plum2)}
.filter-btn.filter--active,.filter-btn:hover{background:var(--plum);border-color:var(--plum);color:var(--gold2)}
/* booking cards */
.bk-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--plum2)}
.bk-card--cancelled{border-left-color:#c0392b}
.bk-header{background:linear-gradient(135deg,var(--plum),var(--plum2));border-color:var(--plum)}
.bk-id{color:var(--gold2)}
.bk-footer{background:var(--cream);border-color:var(--line)}
.bk-field label{color:var(--plum2)}
.bk-field span{color:var(--plum)}
.bk-total{color:var(--gold)!important}
.bk-rooms-list .bk-room-chip{background:var(--plum);color:var(--gold2);border:1px solid var(--plum2)}
.bk-new,.bk-walk{background:var(--gold2);color:var(--plum3);border:1px solid var(--gold)}
.bs--confirmed{background:#e8f6ee;color:#1e8449;border-color:#9ad3b0}
/* tools & walk-in */
.adm-newbanner{background:var(--cream2);border:1px solid var(--gold2);border-left:4px solid var(--plum2);color:var(--plum)}
.adm-tool-btn{background:var(--plum);color:var(--gold2);border:1px solid var(--plum2)}
.adm-tool-btn:hover{background:var(--plum2)}
.adm-tool-gold,.auth-btn,.wk-btn{background:linear-gradient(135deg,#ecd08a,#c9a24b 55%,#b88a2a);color:var(--plum3);border:1px solid var(--gold)}
.wk-field label{color:var(--plum2)}
.wk-field input,.wk-field select,.wk-datebtn{border:1px solid var(--line);color:var(--plum)}
.wk-field input:focus{border-color:var(--plum2);box-shadow:0 0 0 3px rgba(106,52,128,.18)}
.wk-datebtn:hover,.wk-datebtn.wk-active{border-color:var(--plum2)}
.wk-datebtn i{color:var(--plum2)}
.wk-datebtn.wk-locked{background:#ece8df;color:#a39a89;border-color:#ddd6c6}
.wk-total{color:var(--plum)}
.wk-rooms .wk-room-opt.on{border-color:var(--plum2);background:var(--plum);color:var(--gold2)}
.wk-pop{border:2px solid var(--plum2)}
.wk-cmonth{color:var(--plum)}
.wk-carrow{background:var(--plum);color:var(--gold2);border-color:var(--plum)}
.wk-cdow span{color:var(--plum2)}
.wk-cell{color:var(--plum)}
.wk-live:hover{background:var(--cream2)}
.wk-range{background:var(--cream2)}
.wk-sel{background:var(--plum)!important;color:var(--gold2)!important}
.wk-anchor{box-shadow:inset 0 0 0 2px var(--plum2);color:var(--plum)!important}
.adm-reminder{background:#fff6dd;color:#7a5200;border:1px solid #e9c46a;border-left:4px solid #e9c46a}

/* ── PIN inputs and the Change PIN window ── */
.pin-input{letter-spacing:.35em;text-align:center;font-size:1.15rem}
.pin-input::placeholder{letter-spacing:normal;font-size:.9rem;text-align:center}
.pin-modal{position:fixed;inset:0;z-index:3000;background:rgba(32,10,42,.65);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.pin-modal[hidden]{display:none}
.pin-card{position:relative;padding:36px 32px;max-height:100%;overflow-y:auto}
.pin-x{position:absolute;top:10px;right:14px;background:none;border:none;color:#c9a24b;font-size:1.8rem;line-height:1;cursor:pointer}
.pin-cancel{background:none;border:none;color:#7a6a52;font-size:.9rem;cursor:pointer;padding:6px;text-decoration:underline}
.pin-cancel:hover{color:#b88a2a}
.pin-note{font-size:.8rem;margin:0}
.pin-card .auth-form{width:100%}
@media(max-width:480px){.pin-card{padding:30px 20px}}

/* ── Back to Website button (admin header) ───────── */
.adm-back-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:6px;
  background:var(--gold2,#e3c46f);color:var(--plum3,#3a1646);border:1px solid var(--gold,#c9a24b);
  font-size:.82rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-decoration:none;
  white-space:nowrap;transition:background .3s,transform .2s}
.adm-back-btn:hover{background:#ecd08a;transform:translateY(-1px)}
@media(max-width:600px){.adm-back-btn{padding:9px 11px}.adm-back-btn span{display:none}}

/* ── Login: "Back to Website" always visible (was cream-on-cream until hover) ── */
.auth-card .back-website{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;align-self:center;
  margin-top:14px;padding:9px 20px;border-radius:6px;
  background:var(--plum,#4a2058);color:var(--cream,#faf5ea);border:1px solid var(--gold2,#c9a24b);
  font-size:.85rem;font-weight:700;letter-spacing:.5px;text-decoration:none;opacity:1;visibility:visible;
  transition:background .3s,color .3s}
.auth-card .back-website:hover{background:var(--gold2,#c9a24b);color:var(--plum3,#31133f)}