/* Orange & Red Gradient Theme Overrides for Admin Dashboard */

/* Root Gradient Colors */
:root {
  --orange-light: #ff7a3d;
  --orange-medium: #ff5a3d;
  --red-medium: #ff3d3d;
  --red-dark: #d91414;
}

/* Page Background */
.dashboard {
  background: linear-gradient(135deg,
    var(--orange-light) 0%,
    var(--orange-medium) 25%,
    var(--red-medium) 60%,
    var(--red-dark) 100%);
  background-size: 200% 200%;
  animation: gradientShift 25s ease infinite;
}

/* Dashboard Header */
.dashboard-header {
  background: linear-gradient(135deg,
    var(--orange-light) 0%,
    var(--orange-medium) 40%,
    var(--red-medium) 80%,
    var(--red-dark) 100%);
  background-size: 200% 200%;
  animation: gradientShift 20s ease infinite;
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* Lines / Accents */
.section::before,
.dashboard-card::before,
.stat-card::before,
.form-container::before,
.data-table th {
  background: linear-gradient(90deg,
    var(--orange-light),
    var(--orange-medium),
    var(--red-medium),
    var(--red-dark),
    var(--orange-light));
  background-size: 220% 100%;
}

/* Card Text Gradients */
.section h2,
.section h3,
.dashboard-card h3,
.stat-card .stat-value {
  background: linear-gradient(135deg,
    var(--orange-light) 0%,
    var(--orange-medium) 45%,
    var(--red-medium) 70%,
    var(--red-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Primary Buttons */
.btn-primary {
  background: linear-gradient(135deg,
    var(--orange-light) 0%,
    var(--orange-medium) 40%,
    var(--red-medium) 80%,
    var(--red-dark) 100%);
  background-size: 200% 200%;
  color: #fff;
  border: 2px solid transparent;
}
.btn-primary:hover {
  background-position: 100% 50%;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 28px rgba(255, 90, 60, 0.4);
}

/* Dashboard Card Icon Backgrounds */
.dashboard-card-icon {
  background: linear-gradient(135deg,
    rgba(255, 122, 61, 0.25) 0%,
    rgba(255, 61, 61, 0.22) 80%);
}

/* Stat Cards & Attendance Cards Hover Border */
.stat-card,
.attendance-card {
  border-color: rgba(255, 90, 60, 0.12);
}

.stat-card:hover,
.attendance-card:hover {
  border-color: rgba(255, 90, 60, 0.4);
  box-shadow: 0 20px 50px rgba(255, 61, 61, 0.34),
    0 10px 30px rgba(255, 122, 61, 0.24);
}

/* Update badges */
.badge-success {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #065f46;
}
.badge-danger {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #b91c1c;
}
.badge-warning {
  background: linear-gradient(135deg, #fff1c0 0%, #ffdd7b 100%);
  color: #b45309;
}

/* Glassy effect enhancement */
.dashboard-card,
.stat-card,
.attendance-card,
.form-container,
.data-table,
.profile-card {
  backdrop-filter: blur(16px) saturate(120%);
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.25) 100%) !important;
  border: 2px solid rgba(255,255,255,0.3);
}

/* Icon pseudo for Stat Cards (adds subtle icon) */
.stat-card::after {
  content: '📈';
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 28px;
  opacity: 0.15;
}

/* High-contrast overrides for dashboard cards */
.dashboard-card h3,
.dashboard-card p {
  background: none !important;
  color: #ffffff !important; /* pure white for contrast */
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.dashboard-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--orange-light) 0%, var(--red-medium) 100%) !important;
  border: 2px solid rgba(255,255,255,0.8);
  color: #ffffff !important;
  font-size: 36px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25); /* subtle shadow, not blur */
  filter: none !important; /* remove blur */
}

/* Strengthen 3-D white text */
.dashboard-card h3,
.dashboard-card p {
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  /* multi-layer shadow for 3-D depth */
  text-shadow:
    0 2px 4px rgba(0,0,0,0.35),
    0 5px 10px rgba(0,0,0,0.25),
    0 8px 14px rgba(0,0,0,0.15);
}

/* Live clock banner */
.dashboard-header{ position:relative; }

.live-clock-banner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px 20px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--orange-light)0%,var(--red-medium)100%);
  color:#fff;
  font-weight:600;
  font-size:15px;
  text-shadow:0 2px 4px rgba(0,0,0,0.4);
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  box-shadow:0 4px 18px rgba(0,0,0,0.35);
  border:2px solid rgba(255,255,255,0.45);
  backdrop-filter:blur(14px) saturate(135%);
  animation:
    gradientShift 10s ease infinite,
    pulseClock 2s ease-in-out infinite;
}

.live-clock-banner .clock-icon{
  text-shadow:none;
  font-size:20px;
}

@keyframes pulseClock{
  0%{
    transform:translateX(-50%) scale(1);
    box-shadow:0 4px 18px rgba(0,0,0,0.35);
  }
  50%{
    transform:translateX(-50%) scale(1.06);
    box-shadow:0 8px 26px rgba(0,0,0,0.45);
  }
  100%{
    transform:translateX(-50%) scale(1);
    box-shadow:0 4px 18px rgba(0,0,0,0.35);
  }
}

.clock-popup{
  position:fixed;
  top:70px;
  left:50%;
  transform:translateX(-50%);
  padding:10px 18px;
  background:linear-gradient(135deg,var(--orange-light)0%,var(--red-medium)100%);
  color:#fff;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,0.25);
  border:2px solid rgba(255,255,255,0.45);
  font-weight:700;
  letter-spacing:0.5px;
  z-index:9999;
  animation: popupSlide 0.3s ease, popupFade 3.5s ease forwards;
}

@keyframes popupSlide{
  from{opacity:0; transform:translate(-50%,-10px);}
  to{opacity:1; transform:translate(-50%,0);}
}

@keyframes popupFade{
  0%{opacity:1;}
  80%{opacity:1;}
  100%{opacity:0; transform:translate(-50%,-6px);}
}

/* Glassy overrides for additional buttons */
.logout-btn,
.chat-send-btn {
  background: linear-gradient(135deg,
    var(--orange-light) 0%,
    var(--orange-medium) 40%,
    var(--red-medium) 80%,
    var(--red-dark) 100%);
  background-size: 200% 200%;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: 0 4px 16px rgba(255, 90, 60, 0.35);
  backdrop-filter: blur(14px) saturate(120%);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.logout-btn:hover,
.chat-send-btn:hover {
  background-position: 100% 50%;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(255, 61, 61, 0.45);
}

.logout-btn::after,
.chat-send-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 60%);
  transform: translateX(-100%) rotate(45deg);
  transition: transform 0.9s ease;
}

.logout-btn:hover::after,
.chat-send-btn:hover::after {
  transform: translateX(100%) rotate(45deg);
}

/* Animated shine on buttons */
.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 60%);
  transform: translateX(-100%) rotate(45deg);
  transition: transform 0.9s ease;
}
.btn-primary:hover::after {
  transform: translateX(100%) rotate(45deg);
}

/* =============================
   Login Page Overrides
   ============================= */

.login-graphic {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}

.login-illustration-svg {
  max-width: 240px;
  width: 80%;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(255, 90, 60, 0.25));
}

.login-page {
  background: linear-gradient(135deg,
    var(--orange-light) 0%,
    var(--orange-medium) 35%,
    var(--red-medium) 65%,
    var(--red-dark) 100%);
  background-size: 200% 200%;
  animation: gradientShift 30s ease infinite;
}

.login-box {
  backdrop-filter: blur(20px) saturate(120%);
  background: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.25) 100%);
  border: 2px solid rgba(255,255,255,0.35);
}

.login-btn {
  background: linear-gradient(135deg,
    var(--orange-light) 0%,
    var(--orange-medium) 40%,
    var(--red-medium) 80%,
    var(--red-dark) 100%);
  background-size: 200% 200%;
  color: #fff !important;
  border: 2px solid transparent;
  box-shadow: 0 6px 20px rgba(255, 90, 60, 0.45);
  position: relative;
  overflow: hidden;
}

.login-btn:hover {
  background-position: 100% 50%;
  transform: translateY(-3px) scale(1.05);
  animation: none;
  box-shadow: 0 12px 30px rgba(255, 61, 61, 0.55);
}

.login-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 60%);
  transform: translateX(-100%) rotate(45deg);
  transition: transform 0.9s ease;
}

.login-btn:hover::after {
  transform: translateX(100%) rotate(45deg);
}