/* Apply box-sizing to all elements */
* { box-sizing: border-box; }
body {
  margin: 0;                         /* Remove default margin */
  font-family: 'Poppins', sans-serif;/* Global font */
  background: linear-gradient(135deg,#7b59c3,#3f1e87,#230661,#200246); /* Background */
  min-height: 100vh;                 /* Full screen height */
  display: flex;                     /* Center page */
  justify-content: center;           /* Horizontal center */
  align-items: center;               /* Vertical center */
  padding: 12px;                     /* Outer spacing */
}
/* Page wrapper */
.page {
  display: none;                     /* Hidden initially */
  width: 100%;                       /* Full width */
  max-width: 1100px;                 /* Limit width */
}
/* Glassmorphism card */
.glass-card {
  background: rgba(255,255,255,0.12);/* Transparent background */
  border: 1px solid rgba(255,255,255,0.25); /* Light border */
  backdrop-filter: blur(12px);       /* Blur effect */
  -webkit-backdrop-filter: blur(12px);/* Safari support */
  border-radius: 14px;               /* Rounded edges */
  box-shadow: 0 8px 25px rgba(0,0,0,0.25); /* Shadow */
  padding: 18px;                     /* Inner spacing */
}
/* Centered card */
.center-card {
  width: 100%;
  max-width: 480px;                  /* Card width */
  margin: 10px auto;                 /* Center align */
  text-align: center;                /* Center text */
}
/* Card heading */
.card-title {
  color: #fff;                       /* White text */
  font-size: 22px;                   /* Title size */
  margin-bottom: 12px;               /* Spacing */
}
/* Input and select fields */
input, select {
  width: 100%;                       /* Full width */
  padding: 12px;                     /* Inner padding */
  margin-top: 10px;                  /* Space above */
  border-radius: 10px;               /* Rounded edges */
  font-size: 15px;                   /* Text size */
  background: #fff !important;       /* White background */
  color: #000 !important;            /* Black text */
  border: 1px solid #ddd !important; /* Light border */
}

/* Base button */
.btn {
  border: none;                      /* Remove border */
  border-radius: 10px;               /* Rounded corners */
  padding: 10px 14px;                /* Button size */
  cursor: pointer;                   /* Pointer cursor */
  font-weight: 600;                  /* Bold text */
}

/* Button styles */
.primary { background:#e84b1b; color:#fff; }
.small   { padding:8px 12px; background:#e84e1b; color:#fff; }
.red     { background:#855343; color:#fff; }
.cancel  { background:#333; color:#fff; }

/* Dashboard wrapper */
.dashboard {
  display: flex;                     /* Flex layout */
  flex-direction: column;            /* Vertical layout */
  gap: 12px;                         /* Spacing */
  width: 100%;                       /* Full width */
}

/* Dashboard header */
.dash-header {
  display: flex;                     /* Flex layout */
  justify-content: space-between;    /* Space items */
  align-items: center;               /* Center vertically */
  color: rgb(23,10,10);              /* Text color */
}

/* Dashboard body */
.dash-body {
  display: flex;                     /* Side-by-side layout */
  gap: 16px;                         /* Space between */
  flex-wrap: wrap;                   /* Responsive wrap */
}

/* Sidebar profile */
.sidebar {
  width: 320px;                      /* Fixed width */
  min-width: 220px;                  /* Minimum width */
  color: #fff;                       /* Text color */
}

/* Main content */
.content {
  flex: 1;                           /* Take remaining space */
  min-width: 280px;                  /* Minimum width */
  display: flex;                     /* Flex layout */
  flex-direction: column;            /* Vertical layout */
  gap: 12px;                         /* Spacing */
}

/* Scrollable area */
.scroll-box {
  max-height: 200px;                 /* Height limit */
  overflow: auto;                    /* Scroll enabled */
  background: rgba(255,255,255,0.06);/* Light background */
  padding: 12px;                     /* Inner spacing */
  border-radius: 12px;               /* Rounded corners */
  border: 1px solid rgba(255,255,255,0.2); /* Border */
}

/* Appointment card */
.request-card {
  background: rgba(255,255,255,0.18);/* Card background */
  padding: 12px;                     /* Inner spacing */
  border-radius: 12px;               /* Rounded corners */
  margin-bottom: 12px;               /* Space below */
  display: flex;                     /* Flex layout */
  justify-content: space-between;    /* Space content */
  align-items: center;               /* Vertical center */
  border: 1px solid rgba(255,255,255,0.25); /* Border */
}

/* Status badge */
.badge {
  padding: 6px 12px;                 /* Size */
  border-radius: 20px;               /* Pill shape */
  font-weight: 700;                  /* Bold */
  font-size: 13px;                   /* Small text */
}

/* Badge colors */
.badge.approved  { background:#b6f0c6; color:#0a4d1a; }
.badge.pending   { background:#ffe9a3; color:#4a3900; }
.badge.rejected  { background:#ffb8b8; color:#5a0000; }
.badge.withdrawn { background:#c7c7c7; color:#1e1e1e; }

/* Popup overlay */
.overlay {
  position: fixed;                   /* Fixed position */
  inset: 0;                          /* Full screen */
  display: none;                     /* Hidden by default */
  justify-content: center;           /* Center horizontally */
  align-items: center;               /* Center vertically */
  background: rgba(0,0,0,0.55);      /* Dark overlay */
  z-index: 50;                       /* Above content */
}

/* Popup box */
.popup-box {
  width: 340px;                      /* Popup width */
  padding: 18px;                     /* Inner spacing */
}

/* Fade animation */
@keyframes fadeIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Apply animation */
.page, .glass-card {
  animation: fadeIn 0.45s ease;
}

/* Responsive layout */
@media (max-width:880px){
  .dash-body { flex-direction: column; }
  .sidebar, .content { width: 100%; }
}

/* Footer logo */
.footer-logo {
  position: fixed;                   /* Fixed position */
  bottom: 35px;                      /* From bottom */
  left: 97%;                         /* From left */
  transform: translateX(-97%);       /* Adjust position */
  z-index: 20;                       /* Above content */
  opacity: 0.9;                      /* Slight transparency */
}

.footer-logo img {
  height: 60px;                      /* Logo size */
  border-radius: 10px;               /* Rounded edges */
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* Shadow */
}

/* Coordinator profile box */
.co-profile-box {
  margin-top: 10px;                  /* Spacing */
  color: #fff;                       /* Text color */
}

/* Stats container */
.stats-container {
  display: flex;                     /* Flex layout */
  gap: 12px;                         /* Space */
  margin: 15px 0;                    /* Vertical margin */
  flex-wrap: wrap;                   /* Responsive */
}

/* Stat card */
.stat-box {
  flex: 1;                           /* Equal width */
  min-width: 160px;                  /* Minimum size */
  padding: 12px;                     /* Inner spacing */
  background: rgba(255,255,255,0.18);/* Background */
  border-radius: 12px;               /* Rounded corners */
  font-weight: 600;                  /* Bold text */
  color: #fff;                       /* White text */
  text-align: center;                /* Center text */
  border: 1px solid rgba(255,255,255,0.3); /* Border */
}

/* Stat indicators */
.stat-box.pending  { border-left:6px solid #FFE066; }
.stat-box.approved { border-left:6px solid #4CAF50; }
.stat-box.rejected { border-left:6px solid #F44336; }

/* Search and filter */
.search-filter {
  display: flex;                     /* Flex layout */
  gap: 12px;                         /* Space */
  margin-bottom: 15px;               /* Spacing */
}

#searchInput, #statusFilter {
  padding: 10px;                     /* Padding */
  border-radius: 10px;               /* Rounded corners */
  border: none;                      /* No border */
}

/* Credit popup text */
#creditPopup .popup-box p {
  font-size: 18px;                   /* Text size */
  color: #fff;                       /* White text */
  margin: 6px 0;                     /* Spacing */
}

#creditPopup h2 {
  color: #fff;                       /* White heading */
  margin-bottom: 10px;               /* Spacing */
}

#creditPopup button {
  margin-top: 12px;                  /* Space above */
}