/* ==========================================================================
   KEYMASTER - MODERN GLASS THEME (loaded after style.css)
   Soft aurora background + frosted-glass surfaces. Dark text stays readable.
   Custom wallpapers (body.has-custom-bg) keep working on top of this.
   ========================================================================== */

:root {
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-blur: blur(18px) saturate(180%);
}

/* ---------- Aurora background ---------- */
body:not(.has-custom-bg) {
  background:
    radial-gradient(circle at 12% 18%, rgba(99, 102, 241, 0.38) 0%, transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(6, 182, 212, 0.32) 0%, transparent 40%),
    radial-gradient(circle at 78% 88%, rgba(236, 72, 153, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 18% 90%, rgba(16, 185, 129, 0.22) 0%, transparent 40%),
    linear-gradient(135deg, #e0e7ff 0%, #f0f9ff 50%, #fdf2f8 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* ---------- Navbar ---------- */
.navbar {
  background: rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 24px rgba(31, 38, 135, 0.08) !important;
}
.nav-link { border-radius: 12px; transition: all 0.2s ease; }
.nav-link:hover { background: rgba(255, 255, 255, 0.7); }
.nav-link.active { background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 2px 10px rgba(79, 70, 229, 0.15); }

.officer-badge {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border) !important;
}

/* ---------- Glass surfaces ---------- */
body:not(.has-custom-bg) .stat-card,
body:not(.has-custom-bg) .controls-card,
body:not(.has-custom-bg) .table-card,
body:not(.has-custom-bg) .key-card,
body:not(.has-custom-bg) .tabs-container,
body:not(.has-custom-bg) .building-pills,
body:not(.has-custom-bg) .sheet-preview-card,
body:not(.has-custom-bg) .qr-preview-box {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

.stat-card, .key-card { transition: transform 0.25s cubic-bezier(.16,1,.3,1), box-shadow 0.25s ease; }
.stat-card:hover, .key-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(79, 70, 229, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* ---------- Modals ---------- */
.modal-overlay {
  background: rgba(15, 23, 42, 0.38) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-card {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  border-radius: 24px !important;
}
.modal-header, .modal-footer { background: transparent !important; border-color: rgba(148, 163, 184, 0.25) !important; }

/* ---------- Inputs ---------- */
.form-control, .select-custom, .search-input-wrap input {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1.5px solid rgba(203, 213, 225, 0.8) !important;
  border-radius: 12px !important;
  transition: all 0.2s ease;
}
.form-control:focus, .select-custom:focus, .search-input-wrap input:focus {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18) !important;
  outline: none;
}

/* ---------- Buttons ---------- */
.btn { border-radius: 12px; transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn-outline {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
}
.btn-outline:hover:not(:disabled) { background: rgba(255, 255, 255, 0.9) !important; }
.btn-primary { box-shadow: 0 8px 20px -6px rgba(79, 70, 229, 0.55); }
.btn-success { box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.5); }

/* ---------- Tabs & pills ---------- */
.tab-btn, .pill-btn { border-radius: 12px; transition: all 0.2s ease; }
.tab-btn.active, .pill-btn.active {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.2);
}

/* ---------- Tables ---------- */
.table-card table thead th { background: rgba(241, 245, 249, 0.55) !important; backdrop-filter: blur(6px); }
.table-card table tbody tr { transition: background 0.15s ease; }
.table-card table tbody tr:hover { background: rgba(255, 255, 255, 0.6) !important; }

/* ---------- Toasts ---------- */
.toast {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.4); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(79, 70, 229, 0.55); background-clip: padding-box; }

/* ---------- Public request portal (request.html) ---------- */
.portal-box {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 24px 60px rgba(31, 38, 135, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

@media print {
  body { background: #fff !important; }
  .navbar { display: none !important; }
}