/* CSS Variables (Palette, etc.) */
:root {
  --pri-50: #e8f1ff;
  --pri-100: #c2d6ff;
  --pri-500: #3f6dff;   /* primary buttons */
  --pri-700: #2848d4;
  --sec-green: #4caf50; /* OPEN */
  --sec-red:   #f44336; /* errors */
  --sec-yellow:#ff9800; /* pending */
  --grey-100: #f9fafb;
  --grey-200: #e1e8ed;
  --grey-800: #333;
  --white:    #fff;

  /* Responsive Breakpoints (as custom properties for potential JS use) */
  --sm: 480px;
  --md: 768px;
  --lg: 1024px;
}

/* Basic Reset & Body Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", sans-serif;
  font-size: 1rem; /* 16px default */
  line-height: 1.6;
  color: var(--grey-800);
  background-color: var(--white);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

h1 { font-size: 2.0rem; }
h2 { font-size: 1.5rem; }

a {
  color: var(--pri-500);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Utility Classes */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-primary {
  display: inline-block; /* Allows padding/margin */
  background: var(--pri-500);
  color: var(--white);
  padding: .6rem 1.2rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  cursor: pointer;
  transition: filter .2s, background-color 0.2s;
}

.btn-primary:hover {
  filter: brightness(1.05);
  background: var(--pri-700);
  text-decoration: none; /* Prevent underline on hover */
}

.btn-secondary {
  /* Define secondary button style if needed, e.g., for Copy Link */
  display: inline-block;
  background: var(--grey-200);
  color: var(--grey-800);
  padding: .6rem 1.2rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
  cursor: pointer;
  transition: filter .2s, background-color 0.2s;
}

.btn-secondary:hover {
  filter: brightness(1.05);
  background: var(--grey-300); /* Needs --grey-300 or similar */
  text-decoration: none;
}


.card {
  background: var(--white);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,.08);
}

.input {
  width: 100%;
  padding: .6rem;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}

.input:focus {
  outline: 2px solid var(--pri-500);
  border-color: transparent;
}

/* General Component Styles */
.component {
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,.08);
}

button {
  /* Applied to .btn-* as well, but good base */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  transition: filter .2s;
  font-family: inherit; /* Ensure buttons use Inter */
}

button:hover {
  filter: brightness(1.05);
}

/* Responsive considerations (placeholders) */
/* Example for mobile button width */
@media (max-width: 767px) { /* Below --md */
  header .btn-primary {
      width: 100%;
      max-width: 300px; /* Optional: prevent overly wide button */
  }
  h1 { font-size: 1.5rem; }
}

/* --- Base Timetable Styles --- */
#timetable {
    /* Existing styles */
    border-collapse: collapse;
    margin-top: 1.5rem;
}

#timetable td.timeslot-cell {
    /* Existing styles */
    border: 1px solid var(--grey-200);
    padding: 0.5rem;
    text-align: center;
    vertical-align: middle;
    min-width: 60px;
}

/* --- Slot States --- */
#timetable .available {
    /* Existing styles */
    background-color: var(--grey-100);
    color: var(--grey-700);
    cursor: pointer;
}
#timetable .available:hover {
    /* Existing styles */
    background-color: var(--grey-300);
}

#timetable .unavailable {
    /* Existing styles */
    background-color: var(--sec-red); /* Changed for student */
    color: var(--white);
    cursor: not-allowed;
    font-weight: 600;
}

/* ADDED: Student Pending State */
#timetable .pending-student {
    background-color: var(--sec-yellow); /* Orange */
    color: var(--grey-800); /* Darker text for contrast */
    font-weight: 600;
    cursor: not-allowed; /* Can't click while pending */
}

.summary-card {
    background-color: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.summary-card .value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--pri-500);
    margin-bottom: 0.5rem;
}

.summary-card .label {
    font-size: 0.9rem;
    color: var(--grey-600);
}

.summary-card.has-pending-requests {
    background-color: #FFF3E0;
    border: 2px solid #FF9800;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(255, 152, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); }
}

/* Homepage Hero Section Adjustments */
.hero-image-container {
    transform: translateX(50px);
}

/* Video Modal Styling */
#videoModal .modal-content {
    background-color: #2b2d42; /* Dark theme from footer */
    color: var(--white);
    border: none;
    border-radius: var(--border-radius, 12px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

#videoModal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.5rem;
}

#videoModal .modal-title {
    font-weight: 600;
}

#videoModal .btn-close {
    filter: invert(1) grayscale(100) brightness(200%);
    transition: transform 0.3s ease;
}

#videoModal .btn-close:hover {
    transform: scale(1.1);
}

#videoModal .modal-body {
    padding: 0;
}

#videoModal .ratio {
    border-bottom-left-radius: var(--border-radius, 12px);
    border-bottom-right-radius: var(--border-radius, 12px);
    overflow: hidden; /* Ensures the iframe respects the border-radius */
}