/* Pharaoh — Black Glass / Gold command theme */
/* Injected via /assets/custom.css (appearance.customCSS) */

:root {
  --ph-black: #000000;
  --ph-black-2: #0a0a0a;
  --ph-glass: rgba(255, 255, 255, 0.04);
  --ph-glass-hover: rgba(255, 255, 255, 0.07);
  --ph-gold: #d4af37;
  --ph-gold-bright: #f4d03f;
  --ph-gold-glow: rgba(212, 175, 55, 0.35);
  --ph-charcoal: rgba(18, 18, 18, 0.6);
}

/* Base black canvas */
body {
  background: linear-gradient(135deg,
    #000000 0%,
    #0a0a0a 30%,
    #080707 70%,
    #000000 100%);
  background-attachment: fixed;
  color: #f5f0e0;
}

/* Subtle golden radial glow + wireframe grid */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 22% 20%, var(--ph-gold-glow) 0%, transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.18) 0%, transparent 45%),
    linear-gradient(90deg, transparent 48%, rgba(212, 175, 55, 0.03) 49%, rgba(212, 175, 55, 0.03) 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(212, 175, 55, 0.02) 49%, rgba(212, 175, 55, 0.02) 51%, transparent 52%);
  background-size: 100% 100%, 100% 100%, 56px 56px, 56px 56px;
  animation: phPulse 22s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes phPulse {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0, 0 0; }
  50% { background-position: 100% 100%, 0% 0%, 28px 28px, 28px 28px; }
}

/* ---------- Login card (black glass) ---------- */
.login-card,
.login-body .login-card {
  background: linear-gradient(160deg, rgba(20, 20, 20, 0.82), rgba(8, 8, 8, 0.82));
  backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid var(--ph-gold-glow);
  border-radius: 22px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 60px var(--ph-gold-glow);
}

.login-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  background: conic-gradient(from 0deg,
    var(--ph-gold), transparent 40%,
    var(--ph-gold-bright), transparent 70%,
    var(--ph-gold));
  z-index: -1;
  opacity: 0.4;
  animation: phBorder 6s linear infinite;
}

@keyframes phBorder {
  to { transform: rotate(360deg); }
}
/* ---------- Brand / text ---------- */
.login-brand, .brand.login-brand {
  color: var(--ph-gold-bright);
  background: linear-gradient(135deg, #f4d03f, #b8860b 60%, #f4d03f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 24px var(--ph-gold-glow);
}

.login-title { color: #e8e0c8; }
.login-subtitle, .muted { color: #b0a888; }

.login-crown, #login-icon {
  color: var(--ph-gold);
  text-shadow: 0 0 30px var(--ph-gold-glow);
}

/* ---------- Buttons ---------- */
.button.primary, .btn, .btn-primary, .login-btn.button.primary {
  background: linear-gradient(135deg, #c9a227, #8a6d1a);
  border: 1px solid rgba(212, 175, 55, 0.6);
  color: #000000;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 0 24px var(--ph-gold-glow);
}

.button.primary:hover, .btn:hover, .btn-primary:hover {
  background: linear-gradient(135deg, #f4d03f, #c9a227);
  box-shadow: 0 0 40px var(--ph-gold-glow);
  transform: translateY(-2px);
}

/* ---------- Inputs ---------- */
.input-animated input, .form-input, input[type="text"], input[type="password"] {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #f5f0e0;
}

.input-animated input:focus, .form-input:focus {
  border-color: var(--ph-gold);
  box-shadow: 0 0 0 2px var(--ph-gold-glow);
}

/* ---------- Nav ---------- */
#top-nav, .top-nav {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(30px);
  border-bottom: 1px solid var(--ph-gold-glow);
}

.nav-brand {
  color: var(--ph-gold-bright);
  background: linear-gradient(135deg, #f4d03f, #b8860b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ---------- Cards (black glass) ---------- */
.glass-panel, .client-card, .dashboard-stat-card {
  background: linear-gradient(160deg, rgba(24, 24, 24, 0.72), rgba(8, 8, 8, 0.72));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 16px;
}

.client-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px var(--ph-gold-glow);
}

/* ---------- Status ---------- */
.client-online { border-left: 4px solid #2ecc71; }
.client-offline { border-left: 4px solid #e74c3c; opacity: 0.55; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c9a227, #8a6d1a);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: #f4d03f; }