/* ================================================================
   Divisional Secretariat Koralaipattu — Hall Booking System
   CSS v5 · Font: Nunito · Theme: Crimson #8B0836 · No gradients
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Playfair+Display:wght@600;700&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --cr:          #8B0836;
  --cr-dark:     #6b062a;
  --cr-deep:     #4a0420;
  --cr-mid:      #b30a45;
  --cr-light:    #d4547a;
  --cr-pale:     #f9eaef;
  --cr-soft:     #fdf4f7;

  --white:       #ffffff;
  --bg:          #f7f7fa;
  --bg-card:     #ffffff;
  --bg-soft:     #f2f2f6;
  --text:        #1a1a2e;
  --text-2:      #3d3d5c;
  --text-muted:  #7a7a9a;
  --border:      #e8e8f0;
  --border-2:    #d8d8ec;

  --success:        #16a34a;
  --success-bg:     #f0fdf4;
  --success-border: #bbf7d0;
  --danger:         #dc2626;
  --danger-bg:      #fef2f2;
  --danger-border:  #fecaca;
  --warning:        #d97706;
  --warning-bg:     #fffbeb;
  --warning-border: #fde68a;
  --info:           #2563eb;
  --info-bg:        #eff6ff;
  --info-border:    #bfdbfe;
  --pending:        #92400e;
  --pending-bg:     #fef3c7;
  --pending-border: #fcd34d;

  --sh-xs:  0 1px 3px rgba(139,8,54,.06);
  --sh-sm:  0 2px 8px rgba(139,8,54,.08);
  --sh:     0 4px 16px rgba(139,8,54,.10);
  --sh-md:  0 8px 24px rgba(139,8,54,.13);
  --sh-lg:  0 20px 48px rgba(139,8,54,.16);

  --r:     12px;
  --r-sm:   8px;
  --r-xs:   5px;

  --sidebar-w:  256px;
  --topbar-h:    68px;

  --ease:   cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.28,.64,1);
  --t:      all .2s var(--ease);
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Nunito',sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5 { font-family:'Playfair Display',serif; }
a { text-decoration:none; color:inherit; }
button { font-family:'Nunito',sans-serif; }
input,select,textarea { font-family:'Nunito',sans-serif; }

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes pgIn    { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes popIn   { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }
@keyframes pulse   { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
@keyframes rowIn   { from{opacity:0;transform:translateX(-4px)} to{opacity:1;transform:none} }
@keyframes toastIn { from{transform:translateX(110%);opacity:0} to{transform:none;opacity:1} }
@keyframes toastOut{ from{opacity:1;transform:none} to{opacity:0;transform:translateX(110%)} }

/* ── BG IMAGE ANIMATION (login + index) ─────────────────────── */
@keyframes bgZoom  { 0%,100%{transform:scale(1) translate(0,0)} 33%{transform:scale(1.04) translate(-8px,5px)} 66%{transform:scale(1.02) translate(5px,-4px)} }
@keyframes bgOverIn{ from{opacity:0} to{opacity:1} }

.bg-img-wrap {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.bg-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  animation: bgZoom 22s ease-in-out infinite;
  transform-origin: center center;
}
.bg-img-overlay {
  position: absolute; inset: 0;
  background: rgba(139,8,54,.62);
  animation: bgOverIn .8s ease;
}
/* Light overlay variant for booking page */
.bg-img-overlay.light {
  background: rgba(74,4,32,.52);
}

/* ── Page animation ─────────────────────────────────────────── */
.page-content { animation:pgIn .35s var(--ease); }

/* ── Layout ─────────────────────────────────────────────────── */
.admin-layout { display:flex; min-height:100vh; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════ */
.sidebar {
  width:var(--sidebar-w);
  background:var(--cr-deep);
  position:fixed; top:0; left:0; height:100vh;
  display:flex; flex-direction:column;
  z-index:1000;
  transition:transform .3s var(--ease);
  box-shadow:4px 0 20px rgba(139,8,54,.22);
}
.sidebar-logo {
  padding:18px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; gap:11px;
}
.sidebar-logo .logo-icon {
  width:40px; height:40px; background:var(--cr);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.sidebar-logo .logo-icon svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sidebar-logo .logo-text h2  { font-size:12px; font-weight:800; color:#fff; line-height:1.3; font-family:'Playfair Display',serif; }
.sidebar-logo .logo-text span{ font-size:9.5px; color:rgba(255,255,255,.45); font-family:'Nunito',sans-serif; }
.sidebar-nav { flex:1; padding:10px 8px; overflow-y:auto; }
.nav-section-label {
  font-size:9px; font-weight:800; text-transform:uppercase;
  letter-spacing:1.6px; color:rgba(255,255,255,.28);
  padding:14px 10px 4px;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-sm);
  color:rgba(255,255,255,.65); font-size:13px; font-weight:600;
  cursor:pointer; transition:var(--t); margin-bottom:1px;
}
.nav-item:hover { background:rgba(255,255,255,.1); color:#fff; }
.nav-item.active { background:var(--cr); color:#fff; box-shadow:0 2px 10px rgba(139,8,54,.4); font-weight:700; }
.nav-item .nav-icon { width:17px; height:17px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.nav-item .nav-icon svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
.nav-badge { margin-left:auto; background:#ef4444; color:#fff; font-size:9px; font-weight:800; padding:2px 6px; border-radius:10px; min-width:17px; text-align:center; animation:pulse 2.4s infinite; }
.sidebar-footer { padding:8px; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-footer .nav-item { color:rgba(255,160,160,.8); }
.sidebar-footer .nav-item:hover { background:rgba(239,68,68,.15); color:#fca5a5; }

/* ══════════════════════════════════════════════════════════════
   TOPBAR  v3  —  new layout with notification on left of profile
══════════════════════════════════════════════════════════════ */
.main-content {
  margin-left:var(--sidebar-w); flex:1;
  min-height:100vh; display:flex; flex-direction:column;
}

.topbar {
  height:var(--topbar-h);
  background:#fff;
  border-bottom:2px solid var(--cr-pale);
  display:flex; align-items:center;
  padding:0 20px 0 22px;
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 12px rgba(139,8,54,.07);
  animation:slideDown .28s var(--ease);
  gap:12px;
}

/* Left block */
.topbar-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }

.mobile-menu-btn {
  display:none; width:36px; height:36px;
  border:1.5px solid var(--border); background:#fff;
  border-radius:var(--r-sm); align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.mobile-menu-btn svg { width:17px; height:17px; stroke:var(--text); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.topbar-info { display:flex; flex-direction:column; gap:1px; min-width:0; overflow:hidden; }

/* Breadcrumb */
.topbar-breadcrumb { display:flex; align-items:center; gap:3px; }
.bc-link { font-size:11px; font-weight:700; color:var(--text-muted); white-space:nowrap; transition:color .15s; }
.bc-link:hover { color:var(--cr); }
.bc-sep svg { width:11px; height:11px; stroke:var(--border-2); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; display:block; }
.bc-current { font-size:11px; font-weight:800; color:var(--cr); white-space:nowrap; }
.topbar-title { font-size:17px; font-weight:800; color:var(--cr-deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:'Playfair Display',serif; }

/* Right block */
.topbar-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* Date pill */
.topbar-datetime {
  display:flex; align-items:center; gap:6px;
  background:var(--cr-soft); border:1.5px solid var(--cr-pale);
  border-radius:20px; padding:5px 12px;
  font-size:11.5px; font-weight:700; color:var(--cr-deep);
  white-space:nowrap; flex-shrink:0;
}
.topbar-datetime svg { width:13px; height:13px; stroke:var(--cr); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* Divider */
.topbar-div { width:1px; height:28px; background:var(--border); margin:0 4px; flex-shrink:0; }

/* Icon buttons (settings, etc.) */
.topbar-icon-btn {
  width:36px; height:36px; border-radius:9px;
  border:1.5px solid var(--border); background:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  position:relative; transition:var(--t); text-decoration:none; flex-shrink:0;
}
.topbar-icon-btn:hover,.topbar-icon-btn.active { background:var(--cr-pale); border-color:var(--cr-light); }
.topbar-icon-btn svg { width:16px; height:16px; stroke:var(--text-muted); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
.topbar-icon-btn:hover svg,.topbar-icon-btn.active svg { stroke:var(--cr); }

/* NOTIFICATION button — styled prominently beside profile */
.topbar-notif-btn {
  position:relative; display:flex; align-items:center; gap:7px;
  background:var(--cr-pale); border:1.5px solid var(--cr-light);
  border-radius:9px; padding:6px 12px 6px 10px;
  cursor:pointer; transition:var(--t); text-decoration:none; flex-shrink:0;
}
.topbar-notif-btn:hover { background:var(--cr); border-color:var(--cr); }
.topbar-notif-btn svg { width:17px; height:17px; stroke:var(--cr); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.topbar-notif-btn:hover svg { stroke:#fff; }
.topbar-notif-btn span.nb-label { font-size:12px; font-weight:800; color:var(--cr); }
.topbar-notif-btn:hover span.nb-label { color:#fff; }
.topbar-badge {
  background:var(--danger); color:#fff;
  font-size:9px; font-weight:800;
  border-radius:10px; padding:1px 5px; min-width:17px; text-align:center; line-height:1.4;
}
.topbar-notif-btn:hover .topbar-badge { background:#fff; color:var(--cr); }

/* Profile pill */
.topbar-profile {
  display:flex; align-items:center; gap:9px;
  background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:10px; padding:5px 10px 5px 5px;
  cursor:pointer; transition:var(--t); flex-shrink:0;
}
.topbar-profile:hover { border-color:var(--cr-light); background:var(--cr-soft); }
.topbar-avatar { width:30px; height:30px; background:var(--cr); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800; flex-shrink:0; box-shadow:0 2px 6px rgba(139,8,54,.28); }
.topbar-profile-info { display:flex; flex-direction:column; gap:0; }
.tp-name { font-size:12.5px; font-weight:800; color:var(--text); line-height:1.2; }
.tp-role { font-size:10px; font-weight:700; color:var(--text-muted); }
.tp-chevron { width:14px; height:14px; stroke:var(--text-muted); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.topbar-profile:hover .tp-chevron { stroke:var(--cr); }

/* ── Page content ───────────────────────────────────────────── */
.page-content { padding:24px; flex:1; }

/* ══════════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════════ */
.card {
  background:#fff; border-radius:var(--r);
  box-shadow:var(--sh); border:1.5px solid var(--border);
  overflow:hidden; transition:box-shadow .25s var(--ease);
  animation:fadeIn .3s var(--ease) both;
}
.card:hover { box-shadow:var(--sh-md); }
.card-header {
  padding:14px 20px;
  border-bottom:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--cr-soft);
}
.card-title { font-size:14px; font-weight:800; color:var(--cr-deep); display:flex; align-items:center; gap:8px; }
.card-title svg { width:15px; height:15px; stroke:var(--cr); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.card-body { padding:20px; }

/* ══════════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════════ */
.table-wrapper { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead tr { background:var(--cr); }
th { padding:11px 16px; text-align:left; font-weight:800; font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:#fff; white-space:nowrap; font-family:'Nunito',sans-serif; }
tbody tr { border-bottom:1px solid var(--border); transition:background .14s var(--ease); animation:rowIn .25s var(--ease) both; }
tbody tr:last-child { border-bottom:none; }
tbody tr:nth-child(odd)  td { background:#ffffff; }
tbody tr:nth-child(even) td { background:#fdf5f7; }
tbody tr:hover td { background:var(--cr-pale) !important; }
tbody tr:hover { box-shadow:inset 3px 0 0 var(--cr); }
td { padding:12px 16px; vertical-align:middle; color:var(--text-2); font-family:'Nunito',sans-serif; }
td code { background:var(--bg-soft); padding:2px 6px; border-radius:4px; font-size:11.5px; font-family:monospace; color:var(--cr-dark); }

/* Hall type row colouring */
tbody tr.hall-main  td:first-child { border-left:3px solid var(--cr); }
tbody tr.hall-mini  td:first-child { border-left:3px solid var(--info); }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:20px;
  font-size:11px; font-weight:800; white-space:nowrap; border:1px solid transparent;
}
.badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.badge-pending   { background:var(--pending-bg);  color:var(--pending);  border-color:var(--pending-border); }
.badge-confirmed { background:var(--success-bg);  color:var(--success);  border-color:var(--success-border); }
.badge-rejected  { background:var(--danger-bg);   color:var(--danger);   border-color:var(--danger-border); }
.badge-cancelled { background:var(--bg-soft);     color:var(--text-muted); border-color:var(--border-2); }
.badge-hall1 { background:#fdf4f7; color:var(--cr); border-color:var(--cr-pale); font-size:10px; }
.badge-hall2 { background:var(--info-bg); color:var(--info); border-color:var(--info-border); font-size:10px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 16px; border-radius:var(--r-sm);
  font-size:13px; font-weight:800; border:none;
  cursor:pointer; transition:var(--t);
  font-family:'Nunito',sans-serif; white-space:nowrap; line-height:1;
}
.btn:active { transform:scale(.96); }
.btn svg { width:14px; height:14px; flex-shrink:0; display:block; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-sm     { padding:5px 11px; font-size:12px; }
.btn-sm svg { width:13px; height:13px; }
.btn-icon   { padding:6px 9px; }

.btn-primary { background:var(--cr); color:#fff; box-shadow:0 2px 8px rgba(139,8,54,.3); }
.btn-primary:hover { background:var(--cr-dark); box-shadow:0 4px 14px rgba(139,8,54,.38); transform:translateY(-1px); }
.btn-primary svg { stroke:#fff; }

.btn-accent  { background:var(--cr-mid); color:#fff; box-shadow:0 2px 8px rgba(179,10,69,.28); }
.btn-accent:hover  { background:var(--cr); transform:translateY(-1px); }
.btn-accent svg  { stroke:#fff; }

.btn-success { background:var(--success); color:#fff; box-shadow:0 2px 8px rgba(22,163,74,.28); }
.btn-success:hover { background:#15803d; transform:translateY(-1px); }
.btn-success svg { stroke:#fff; }

.btn-danger  { background:var(--danger); color:#fff; box-shadow:0 2px 8px rgba(220,38,38,.28); }
.btn-danger:hover  { background:#b91c1c; transform:translateY(-1px); }
.btn-danger svg  { stroke:#fff; }

.btn-warning { background:var(--warning); color:#fff; box-shadow:0 2px 8px rgba(217,119,6,.25); }
.btn-warning:hover { background:#b45309; transform:translateY(-1px); }
.btn-warning svg { stroke:#fff; }

.btn-info    { background:var(--info); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.25); }
.btn-info:hover    { background:#1d4ed8; transform:translateY(-1px); }
.btn-info svg    { stroke:#fff; }

.btn-outline { background:#fff; color:var(--cr); border:1.5px solid var(--cr-light); box-shadow:var(--sh-xs); }
.btn-outline:hover { background:var(--cr-pale); border-color:var(--cr); transform:translateY(-1px); }
.btn-outline svg { stroke:currentColor; }

.btn-ghost   { background:transparent; color:var(--text-muted); border:1.5px solid var(--border); }
.btn-ghost:hover   { background:var(--bg-soft); color:var(--text); }
.btn-ghost svg   { stroke:currentColor; }

/* WhatsApp button — circular icon button */
.btn-whatsapp {
  background: #25D366; color: #fff;
  box-shadow: 0 2px 8px rgba(37,211,102,.35);
  width: 32px; height: 32px;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  border: none;
}
.btn-whatsapp:hover { background:#128C7E; transform:scale(1.12); box-shadow:0 4px 14px rgba(37,211,102,.45); }
.btn-whatsapp svg { stroke:none !important; fill:#fff !important; width:17px !important; height:17px !important; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group  { margin-bottom:16px; }
.form-label  { display:block; font-size:12.5px; font-weight:800; color:var(--text); margin-bottom:5px; font-family:'Nunito',sans-serif; }
.form-label .req { color:var(--danger); margin-left:2px; }

.form-control {
  width:100%; padding:9px 13px;
  border:1.5px solid var(--border-2); border-radius:var(--r-sm);
  font-size:13px; font-family:'Nunito',sans-serif;
  color:var(--text); background:#fff; outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.form-control:focus { border-color:var(--cr-light); box-shadow:0 0 0 3px rgba(139,8,54,.1); }
.form-control[readonly] { background:var(--bg-soft); color:var(--text-muted); cursor:not-allowed; }
select.form-control  { cursor:pointer; }
textarea.form-control{ resize:vertical; min-height:86px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* Duration display — RED text */
.hours-display {
  background:var(--cr-pale); border:1.5px solid var(--cr-light);
  color:var(--cr-dark) !important;
  border-radius:var(--r-sm); padding:9px 13px;
  text-align:center; font-weight:800; font-size:15px;
  font-family:'Nunito',sans-serif;
}
.hours-display.invalid { color:var(--danger) !important; background:var(--danger-bg); border-color:var(--danger-border); }

/* ── Search / Filter ────────────────────────────────────────── */
.search-input,.filter-select {
  padding:8px 13px; border:1.5px solid var(--border-2);
  border-radius:var(--r-sm); font-size:13px;
  font-family:'Nunito',sans-serif; outline:none;
  background:#fff; transition:border-color .18s, box-shadow .18s;
}
.search-input { min-width:210px; }
.search-input:focus,.filter-select:focus { border-color:var(--cr-light); box-shadow:0 0 0 3px rgba(139,8,54,.1); }
.filter-select { cursor:pointer; }

/* ── Inline alerts ──────────────────────────────────────────── */
.alert {
  padding:11px 15px; border-radius:var(--r-sm);
  font-size:13px; font-weight:700;
  display:flex; align-items:center; gap:9px;
  margin-bottom:14px; animation:slideDown .25s var(--ease);
}
.alert svg { width:16px; height:16px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.alert-success { background:var(--success-bg); color:var(--success); border-left:4px solid var(--success); }
.alert-danger  { background:var(--danger-bg);  color:var(--danger);  border-left:4px solid var(--danger); }
.alert-warning { background:var(--warning-bg); color:var(--warning); border-left:4px solid var(--warning); }
.alert-info    { background:var(--info-bg);    color:var(--info);    border-left:4px solid var(--info); }

/* ── Stats cards ────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card { background:#fff; border-radius:var(--r); padding:18px; border:1.5px solid var(--border); box-shadow:var(--sh); display:flex; align-items:center; gap:14px; transition:var(--t); animation:fadeIn .3s var(--ease) both; }
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); }
.stat-icon { width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon svg { width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.stat-icon.cr     { background:var(--cr-pale);    color:var(--cr); }
.stat-icon.green  { background:var(--success-bg); color:var(--success); }
.stat-icon.amber  { background:var(--warning-bg); color:var(--warning); }
.stat-icon.red    { background:var(--danger-bg);  color:var(--danger); }
.stat-icon.info   { background:var(--info-bg);    color:var(--info); }
.stat-icon.blue   { background:var(--info-bg);    color:var(--info); }
.stat-icon.yellow { background:var(--warning-bg); color:var(--warning); }
.stat-icon.gold   { background:#fefce8; color:#b45309; }
.stat-value { font-size:26px; font-weight:900; font-family:'Nunito',sans-serif; color:var(--cr-deep); line-height:1; }
.stat-label { font-size:11.5px; color:var(--text-muted); margin-top:3px; font-weight:700; }

/* ── Page header ────────────────────────────────────────────── */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:14px; flex-wrap:wrap; }
.page-header h2  { font-size:21px; color:var(--cr-deep); }
.page-header p   { font-size:12.5px; color:var(--text-muted); margin-top:2px; font-weight:600; }

/* ── Empty state ────────────────────────────────────────────── */
.empty-state { text-align:center; padding:44px 20px; color:var(--text-muted); }
.empty-state svg { width:40px; height:40px; stroke:var(--border-2); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-bottom:10px; }
.empty-state .empty-icon { font-size:34px; margin-bottom:10px; opacity:.4; }
.empty-state p { font-size:13.5px; font-weight:600; }

/* ── Popup / Modal ──────────────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(74,4,32,.52);
  z-index:9000; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(5px); animation:fadeIn .18s var(--ease);
}
.modal-overlay.active { display:flex; }
.modal {
  background:#fff; border-radius:16px;
  max-width:700px; width:100%; max-height:90vh; overflow-y:auto;
  box-shadow:var(--sh-lg);
  animation:slideUp .28s var(--spring);
}

/* Alert popup */
.alert-popup-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(74,4,32,.48);
  z-index:99999; align-items:center; justify-content:center;
  backdrop-filter:blur(5px);
}
.alert-popup-overlay.active { display:flex; }
.alert-popup {
  background:#fff; border-radius:18px;
  max-width:390px; width:90%;
  box-shadow:0 28px 64px rgba(74,4,32,.28);
  animation:popIn .26s var(--spring); overflow:hidden;
}
.ap-header { padding:26px 26px 0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.ap-icon-ring { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; animation:popIn .32s var(--spring) .06s both; }
.ap-icon-ring svg { width:30px; height:30px; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ap-icon-ring.success { background:var(--success-bg); } .ap-icon-ring.success svg { stroke:var(--success); }
.ap-icon-ring.error   { background:var(--danger-bg); }  .ap-icon-ring.error svg   { stroke:var(--danger); }
.ap-icon-ring.warning { background:var(--warning-bg); } .ap-icon-ring.warning svg { stroke:var(--warning); }
.ap-icon-ring.info    { background:var(--info-bg); }    .ap-icon-ring.info svg    { stroke:var(--info); }
.ap-icon-ring.confirm { background:var(--cr-pale); }    .ap-icon-ring.confirm svg { stroke:var(--cr); }
.ap-title   { font-size:17px; font-weight:800; color:var(--cr-deep); font-family:'Playfair Display',serif; }
.ap-message { font-size:13.5px; color:var(--text-muted); line-height:1.6; padding:0 4px; font-weight:600; }
.ap-body    { padding:16px 26px 24px; }
.ap-actions { display:flex; gap:10px; justify-content:center; margin-top:16px; }
.ap-actions .btn { min-width:104px; }

/* Modal parts */
.modal-header { padding:18px 22px; border-bottom:1.5px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff; z-index:1; border-radius:16px 16px 0 0; background:var(--cr-soft); }
.modal-title { font-size:16px; color:var(--cr-deep); font-weight:800; }
.modal-close { width:30px; height:30px; border:none; background:var(--bg-soft); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--t); }
.modal-close:hover { background:var(--danger-bg); transform:rotate(90deg); }
.modal-close svg { width:14px; height:14px; stroke:var(--text-muted); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.modal-close:hover svg { stroke:var(--danger); }
.modal-body   { padding:20px 22px; }
.modal-footer { padding:14px 22px; border-top:1.5px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

/* ══════════════════════════════════════════════════════════════
   BOOKING / PUBLIC PAGE  — bg image version
══════════════════════════════════════════════════════════════ */
.booking-page {
  min-height:100vh; padding:40px 20px;
  position:relative; overflow:hidden;
  background:#fff8f9;
}
.booking-page .bg-img-overlay { background:rgba(74,4,32,.52); }
.booking-container { max-width:900px; margin:0 auto; position:relative; z-index:1; }

.booking-hero { text-align:center; margin-bottom:28px; animation:slideUp .45s var(--ease); }
.booking-hero .hall-icon { width:68px; height:68px; background:var(--cr); border-radius:18px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; box-shadow:0 8px 24px rgba(139,8,54,.3); animation:popIn .45s var(--spring) .1s both; }
.booking-hero .hall-icon svg { width:32px; height:32px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.booking-hero h1 { font-size:26px; font-weight:700; color:#fff; margin-bottom:4px; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.booking-hero .org-sub-title { font-size:14px; color:rgba(255,255,255,.8); font-weight:600; }

.booking-card { background:#fff; border-radius:20px; box-shadow:0 20px 56px rgba(139,8,54,.22); overflow:hidden; animation:slideUp .45s var(--ease) .12s both; border:1.5px solid var(--cr-pale); }

/* Calendar (booking page) */
.calendar-section { padding:26px 28px; border-bottom:1.5px solid var(--border); }
.calendar-section h3 { font-size:15px; color:var(--cr-deep); margin-bottom:14px; display:flex; align-items:center; gap:8px; font-family:'Playfair Display',serif; }
.calendar-section h3 svg { width:17px; height:17px; stroke:var(--cr); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.calendar-wrapper { background:var(--bg-soft); border-radius:var(--r); padding:16px; border:1.5px solid var(--border); }
.calendar-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.calendar-nav-btn { width:33px; height:33px; border:1.5px solid var(--border-2); background:#fff; border-radius:var(--r-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--t); }
.calendar-nav-btn svg { width:14px; height:14px; stroke:var(--text-muted); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.calendar-nav-btn:hover { background:var(--cr); border-color:var(--cr); }
.calendar-nav-btn:hover svg { stroke:#fff; }
.calendar-month-year { font-size:15px; font-weight:800; color:var(--cr-deep); font-family:'Playfair Display',serif; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-day-name { text-align:center; font-size:10px; font-weight:800; color:var(--text-muted); text-transform:uppercase; padding:6px 0; letter-spacing:.5px; }
.cal-day { text-align:center; padding:8px 4px; border-radius:var(--r-sm); font-size:13px; cursor:pointer; transition:var(--t); font-weight:600; }
.cal-day:hover:not(.disabled):not(.empty):not(.booked):not(.past) { background:var(--cr-pale); color:var(--cr); transform:scale(1.07); }
.cal-day.today { font-weight:800; color:var(--cr); }
.cal-day.today::after { content:''; display:block; width:4px; height:4px; border-radius:50%; background:var(--cr); margin:2px auto 0; }
.cal-day.selected { background:var(--cr); color:#fff; font-weight:800; box-shadow:0 3px 10px rgba(139,8,54,.35); transform:scale(1.1); }
.cal-day.booked   { background:var(--danger-bg); color:var(--danger); cursor:not-allowed; text-decoration:line-through; opacity:.65; }
.cal-day.past     { color:#ccc; cursor:not-allowed; }
.cal-day.empty    { cursor:default; }
.cal-legend { display:flex; gap:14px; margin-top:12px; flex-wrap:wrap; }
.legend-item { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted); font-weight:700; }
.legend-dot  { width:10px; height:10px; border-radius:3px; }
.selected-dates-preview { margin-top:12px; padding:10px 14px; background:var(--cr-pale); border-radius:var(--r-sm); border:1.5px solid rgba(139,8,54,.2); font-size:13px; color:var(--cr-dark); display:none; animation:slideDown .2s var(--ease); font-weight:700; }
.selected-dates-preview.active { display:block; }

/* QR */
.qr-container { text-align:center; padding:30px; }
.qr-box { display:inline-block; background:#fff; border:3px solid var(--cr-light); border-radius:16px; padding:16px; box-shadow:var(--sh-md); margin-bottom:14px; transition:var(--t); }
.qr-box:hover { transform:scale(1.03); }
.qr-status { display:inline-flex; align-items:center; gap:7px; padding:8px 18px; border-radius:30px; font-size:14px; font-weight:800; margin-top:10px; }
.qr-status svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.qr-status.pending   { background:var(--pending-bg);  color:var(--pending); }
.qr-status.confirmed { background:var(--success-bg);  color:var(--success); }
.qr-status.rejected  { background:var(--danger-bg);   color:var(--danger); }

/* QR centering */
/* QR centering — do NOT force-show hidden elements (qrcodejs hides duplicate) */
#qrCodeDiv, #qrCodePrint, #bookingQR, #qrCodeEl, .qr-code-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}
/* Only show the canvas (primary output); let qrcodejs keep img hidden */
#qrCodeDiv > canvas,
#qrCodePrint > canvas,
#bookingQR > canvas,
#qrCodeEl > canvas {
  display: block !important;
  margin: 0 auto !important;
}
/* Keep the img hidden as qrcodejs intends (it uses img as fallback only) */
#qrCodeDiv > img,
#qrCodePrint > img,
#bookingQR > img,
#qrCodeEl > img {
  display: none !important;
}
.qr-card-body { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 20px; gap:12px; }

/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════════════════════ */
.login-page {
  min-height:100vh; position:relative;
  display:flex; align-items:center; justify-content:center; padding:20px;
  overflow:hidden;
}
.login-card {
  position:relative; z-index:1;
  background:rgba(255,255,255,.97); border-radius:20px; padding:40px 36px;
  width:100%; max-width:420px;
  box-shadow:0 24px 56px rgba(139,8,54,.28);
  border:1.5px solid var(--cr-pale);
  animation:slideUp .4s var(--spring);
}
.login-header { text-align:center; margin-bottom:26px; }
.login-logo { width:60px; height:60px; background:var(--cr); border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; box-shadow:0 6px 20px rgba(139,8,54,.32); }
.login-logo svg { width:26px; height:26px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.login-header h1 { font-size:20px; color:var(--cr-deep); margin-bottom:3px; }
.login-header .login-org { font-size:11.5px; color:var(--cr); font-weight:700; margin-bottom:4px; }
.login-header p  { color:var(--text-muted); font-size:12.5px; font-weight:600; }

/* Terms */
.terms-box { background:var(--bg-soft); border:1.5px solid var(--border); border-radius:var(--r-sm); padding:13px; margin-bottom:12px; font-size:12.5px; line-height:1.65; color:var(--text); font-weight:600; }
.terms-box .terms-ta { color:var(--danger); font-weight:700; margin-top:7px; display:block; }
.checkbox-group { display:flex; align-items:flex-start; gap:9px; padding:11px 13px; background:var(--warning-bg); border-radius:var(--r-sm); border:1.5px solid var(--warning-border); cursor:pointer; transition:var(--t); }
.checkbox-group:hover { border-color:var(--warning); }
.checkbox-group input[type="checkbox"] { width:16px; height:16px; cursor:pointer; margin-top:1px; accent-color:var(--cr); flex-shrink:0; }
.checkbox-group label { font-size:13px; font-weight:600; color:var(--text); cursor:pointer; line-height:1.5; }

/* Toast */
.toast-container { position:fixed; bottom:20px; right:20px; z-index:99998; display:flex; flex-direction:column; gap:7px; pointer-events:none; }
.toast { background:#fff; border-radius:10px; padding:12px 16px; box-shadow:0 8px 28px rgba(74,4,32,.15); display:flex; align-items:center; gap:10px; min-width:260px; max-width:360px; border-left:4px solid var(--cr); animation:toastIn .3s var(--spring); font-size:13px; font-weight:700; pointer-events:all; }
.toast svg { width:17px; height:17px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.toast.success { border-left-color:var(--success); } .toast.success svg { stroke:var(--success); }
.toast.error   { border-left-color:var(--danger);  } .toast.error   svg { stroke:var(--danger); }
.toast.warning { border-left-color:var(--warning); } .toast.warning svg { stroke:var(--warning); }
.toast.info    { border-left-color:var(--info);    } .toast.info    svg { stroke:var(--info); }
.toast span    { color:var(--text); }

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--cr-pale); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--cr-light); }

/* Responsive */
@media(max-width:768px){
  :root{ --sidebar-w:0px; }
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:none; width:256px; }
  .main-content{ margin-left:0; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .form-row  { grid-template-columns:1fr; }
  .page-content{ padding:14px; }
  .mobile-menu-btn{ display:flex!important; }
  .topbar-datetime,.tp-role,.topbar-div{ display:none; }
}

/* Print / A4 */
@media print{
  @page{ size:A4 portrait; margin:0; }
  *{ -webkit-print-color-adjust:exact!important; print-color-adjust:exact!important; }
  .sidebar,.topbar,.no-print,.btn{ display:none!important; }
  .main-content{ margin-left:0!important; }
  body{ background:#fff!important; }
  .card{ box-shadow:none!important; border:1px solid #ddd!important; }
  .bg-img-wrap{ display:none!important; }
}

/* Dashboard number counts — Nunito font (override Playfair) */
.sb-val, .sec-v {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
}

/* ================================================================
   SCREEN FIT — no horizontal scrollbar, compact layout
   Optimised for 1280px+ laptop/desktop at 100% browser zoom
================================================================ */

/* Prevent horizontal overflow on the whole page */
html, body { overflow-x: hidden; }
.admin-layout { overflow-x: hidden; }
.main-content { min-width: 0; overflow-x: hidden; }
.page-content  { overflow-x: hidden; }

/* Tables that must scroll internally stay contained */
.table-wrapper {
  overflow-x: auto;
  max-width: 100%;
}

/* Cap all cards so they don't grow beyond their container */
.card { max-width: 100%; }

/* Dashboard grid — compact at any viewport */
.summary-bar { grid-template-columns: repeat(4,1fr); }
.sec-row      { grid-template-columns: repeat(4,1fr); }

@media (max-width: 1280px) {
  :root { --sidebar-w: 220px; }
  .summary-bar { grid-template-columns: repeat(2,1fr); }
  .sec-row      { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 960px) {
  .summary-bar, .sec-row { grid-template-columns: repeat(2,1fr); }
}

/* Contact action buttons (Call, Message, WhatsApp) */
.contact-actions {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 4px;
}
.btn-call {
  background: #2563eb; color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
  width: 32px; height: 32px;
  border-radius: 50% !important; padding: 0 !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  flex-shrink: 0; border: none; cursor: pointer;
  transition: var(--t);
}
.btn-call:hover { background: #1d4ed8; transform: scale(1.12); box-shadow: 0 4px 14px rgba(37,99,235,.45); }
.btn-call svg { width: 15px !important; height: 15px !important; stroke: #fff !important; fill: none !important; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn-sms {
  background: #059669; color: #fff;
  box-shadow: 0 2px 8px rgba(5,150,105,.3);
  width: 32px; height: 32px;
  border-radius: 50% !important; padding: 0 !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  flex-shrink: 0; border: none; cursor: pointer;
  transition: var(--t);
}
.btn-sms:hover { background: #047857; transform: scale(1.12); box-shadow: 0 4px 14px rgba(5,150,105,.45); }
.btn-sms svg { width: 15px !important; height: 15px !important; stroke: #fff !important; fill: none !important; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.contact-number-text {
  font-size: 14.5px; font-weight: 700; color: var(--text);
}

/* Sidebar narrower on medium screens */
@media (max-width: 1366px) {
  :root { --sidebar-w: 230px; }
}