:root {
  --primary: #0d6efd;
  --primary-dark: #0b5ed7;
  --page: #f6f7fb;          /* Solid page background fixes the "column" */
  --card-bg: #ffffff;
  --radius: 16px;
  --transition: 0.25s ease;
}

/* Reset & base */
* { box-sizing: border-box; }
html { height: 100%; }
body {
  min-height: 100svh;
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--page);
  display: grid;
  place-items: center;       /* centers the card */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Card ---------- */
.card {
  width: 100%;
  max-width: 420px;
  padding: 32px 28px 36px;
  background: var(--card-bg);       /* solid white, no frosted blur */
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
  text-align: center;
  animation: fade-in 0.45s ease both;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.logo {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--primary);
}

.subtitle {
  font-size: 0.95rem;
  color: #6b7280;
  margin-bottom: 24px;
}

/* ---------- Form ---------- */
.field { position: relative; margin-bottom: 14px; }

.field input {
  width: 100%;
  padding: 14px 44px 14px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.field input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.12);
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  color: #9ca3af;
  padding: 2px 6px;
  border-radius: 8px;
}

.toggle-password:hover { color: var(--primary); }

/* ---------- Button ---------- */
.btn {
  width: 100%;
  padding: 14px;
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition), transform 0.05s ease;
}

.btn:hover,
.btn:focus-visible { background: var(--primary-dark); }
.btn:active { transform: translateY(1px); }

/* ---------- Messages ---------- */
#message {
  margin-top: 14px;
  font-size: 0.93rem;
  font-weight: 500;
  min-height: 1.2em;
}

.error { color: #d52731; }
.success { color: #269f53; }

/* ---------- Logout button ---------- */
/* Tiny logout icon (top-left of the page) */
.logout-icon {
  position: fixed;
  top: 12px;
  left: 12px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.12);
  transition: background var(--transition), transform 0.05s ease;
  z-index: 1000;
}
.logout-icon i {
  font-size: 14px;   /* slightly larger than before */
  line-height: 1;
}

.logout-icon:hover { background: var(--primary-dark); }
.logout-icon:active { transform: translateY(1px); }



.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Creates 2 equal columns */
  gap: 20px;
  align-items: start;
}

/* Switch back to 1 column on small mobile screens */
@media (max-width: 768px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}

.work-card {
  position: relative; /* This line is new */
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: all 0.2s ease;
}

.work-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--primary);
}

/* --- Top Right Lock Icon --- */
.header-lock-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 0.9rem;
  color: #16a34a;
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  cursor: pointer;
  z-index: 50;
  transition: all 0.3s ease;
  border: 1px solid #86efac;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.2);
}

.header-lock-icon:hover {
  background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
}

/* Style when the card is locked */
.work-card.locked .header-lock-icon {
  color: #dc2626;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-color: #fca5a5;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.work-card.locked .header-lock-icon:hover {
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

/* Card Header: Avatar & Name */
.card-header {
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #f1f5f9;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avatar-circle {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary) 0%, #0b5ed7 100%);
  color: #ffffff;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-info h3 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
  color: #111827;
  font-weight: 700;
  line-height: 1.3;
}

.department-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: #059669;
  background: #d1fae5;
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 600;
}

.department-label::before {
  content: "🏢";
  font-size: 0.9em;
}


/* --- Split Container --- */
.shift-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 14px;
}

/* --- Common Box Styles --- */
.shift-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
  border-radius: 16px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid transparent; 
}

/* Hover Effect for interaction */
.shift-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* --- Left Side: Work Schedule (Blue Theme) --- */
.shift-box:not(.approval-box) {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: #bae6fd;
}

.shift-box:not(.approval-box) .shift-label {
  color: #0284c7; /* Vivid Blue */
}

.shift-box:not(.approval-box) .shift-time {
  color: #0c4a6e; /* Deep Blue */
}

/* --- Right Side: Approval (Green Theme) --- */
.approval-box {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #86efac;
}

.approval-box .shift-label {
  color: #16a34a; /* Vivid Green */
}

.approval-box .shift-time {
  color: #14532d; /* Deep Green */
}

/* --- Typography --- */
.shift-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.shift-label i {
  font-size: 0.85rem;
}

.shift-time {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
}


/* View Image Button */
.view-image-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.view-image-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.view-image-btn i {
  font-size: 1rem;
}


/* Badge for Meeting Image */
.meeting-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none;
  z-index: 10;
  transition: background 0.2s ease;
  border: 1px solid #bae6fd;
}

.meeting-badge:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

/* Add Meeting Link Button */
.add-link-btn {
  position: absolute;
  top: 12px;
  right: 125px; /* Positioned to the left of the meeting badge */
  background: #f3f4f6;
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none;
  z-index: 10;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.add-link-btn:hover {
  background: #e5e7eb;
  color: #111;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  animation: fade-in 0.2s;
}

.modal-box {
  background: white;
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 350px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.modal-box h3 {
  margin-top: 0;
  color: #111;
}

.modal-box input {
  width: 100%;
  padding: 10px;
  margin: 10px 0 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-cancel {
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  font-weight: 600;
}

.btn-confirm {
  background: #0d6efd;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}



/* --- New Work Meeting Badge (Purple) --- */
.work-meeting-badge {
  position: absolute;
  top: 12px;
  right: 125px; /* Automatically places it to the left of the other badge */
  background: #f3e8ff; /* Light Purple background */
  color: #6b21a8;      /* Dark Purple text */
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none;
  z-index: 10;
  transition: all 0.2s ease;
  border: 1px solid #d8b4fe;
}

.work-meeting-badge:hover {
  background: #7e22ce; /* Vivid Purple on hover */
  color: #ffffff;
  border-color: #7e22ce;
  transform: translateY(-1px);
}


/* ========== CALCULATED TIME SECTION ========== */
.calc-section {
  margin: 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
}

.calc-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #cbd5e1;
}

.calc-section-header i {
  font-size: 0.9rem;
  color: #6366f1;
}

.calc-section-header span {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #475569;
}

.calc-section-body {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.calc-item {
  flex: 1;
  min-width: 120px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.calc-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
  border-color: #a5b4fc;
}

.calc-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 6px;
}

.calc-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: #6366f1;
  letter-spacing: -0.5px;
}

/* Different color variations for future items */
.calc-item.green .calc-value {
  color: #10b981;
}

.calc-item.green:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
  border-color: #6ee7b7;
}

.calc-item.orange .calc-value {
  color: #f59e0b;
}

.calc-item.orange:hover {
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  border-color: #fcd34d;
}

.calc-item.blue .calc-value {
  color: #0ea5e9;
}

.calc-item.blue:hover {
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
  border-color: #7dd3fc;
}


/* Purple theme - Calculated Time */
.stat-card.purple {
  border-color: #e9d5ff;
}

.stat-card.purple:hover {
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.2);
  border-color: #c4b5fd;
}

.stat-card.purple .stat-icon {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}

.stat-card.purple .stat-value {
  color: #7c3aed;
}

/* Green theme - Approved Time */
.stat-card.green {
  border-color: #bbf7d0;
}

.stat-card.green:hover {
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.2);
  border-color: #86efac;
}

.stat-card.green .stat-icon {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
}

.stat-card.green .stat-value {
  color: #16a34a;
}

/* Blue theme - for future use */
.stat-card.blue {
  border-color: #bfdbfe;
}

.stat-card.blue:hover {
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.2);
  border-color: #93c5fd;
}

.stat-card.blue .stat-icon {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.stat-card.blue .stat-value {
  color: #2563eb;
}

/* Orange theme - for future use */
.stat-card.orange {
  border-color: #fed7aa;
}

.stat-card.orange:hover {
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.2);
  border-color: #fdba74;
}

.stat-card.orange .stat-icon {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
}

.stat-card.orange .stat-value {
  color: #ea580c;
}




/* ========== UPDATED CARD HEADER ========== */
.card-header {
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
}



/* ========== REMOVE OLD CARD BODY ========== */
.card-body {
  display: none;
}


/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
  .schedule-pill {
    margin-top: 10px;
  }
  
  .schedule-pill span {
    font-size: 0.9rem;
  }
  
  .approve-fab {
    width: 36px;
    height: 36px;
    bottom: 12px;
    right: 12px;
  }
}


/* ========== SECTION HEADER (Shared) ========== */
.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.section-header i {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  border-radius: 8px;
}

.section-header span {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #64748b;
}

/* ========== WORKING SHIFT SECTION ========== */
.shift-section {
  padding: 16px 20px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.section-header-row .section-header {
  margin-bottom: 0;
}

.section-header-row .request-stats-badges {
  margin: 0;
  padding: 0;
  border: none;
}

.shift-section .section-header i {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #2563eb;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.shifts-container .section-header i {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #2563eb;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.shift-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.shift-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  transition: all 0.2s ease;
}

.shift-info-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.shift-info-item i {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #64748b;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.shift-info-item.time-item {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
  color: #1e40af;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 14px;
}

.shift-info-item.time-item i {
  color: #3b82f6;
  background: #ffffff;
  width: 32px;
  height: 32px;
}

@media (max-width: 480px) {
  .shift-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.shift-info-item.time-item i {
  color: #3b82f6;
}
/* ========== STATS SECTION (Redesigned) ========== */
.stats-section {
  padding: 20px;
  background: linear-gradient(135deg, #fafbfc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
  position: relative;
}

.stats-section .section-header {
  margin-bottom: 16px;
}

.stats-section .section-header i {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
  color: #7c3aed;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 16px;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 20px 20px 0 0;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Icon Ring */
.stat-icon-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.stat-icon-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.stat-icon-ring i {
  font-size: 1.3rem;
  z-index: 1;
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
}

/* Purple Theme - Calculated */
.stat-card.purple {
  border: 1px solid #ede9fe;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08);
}

.stat-card.purple::before {
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
}

.stat-card.purple:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
  border-color: #c4b5fd;
}

.stat-card.purple .stat-icon-ring {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

.stat-card.purple .stat-icon-ring::before {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
}

.stat-card.purple .stat-icon-ring i {
  color: #7c3aed;
}

.stat-card.purple .stat-value {
  color: #6d28d9;
}

/* Green Theme - Approved */
.stat-card.green {
  border: 1px solid #dcfce7;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.08);
}

.stat-card.green::before {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
}

.stat-card.green:hover {
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2);
  border-color: #86efac;
}

.stat-card.green .stat-icon-ring {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.stat-card.green .stat-icon-ring::before {
  background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
}

.stat-card.green .stat-icon-ring i {
  color: #16a34a;
}

.stat-card.green .stat-value {
  color: #15803d;
}



/* ========== HIDE OLD ELEMENTS ========== */
.card-body {
  display: none;
}

.card-footer {
  display: none;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .shift-info-grid {
    gap: 8px;
  }
  
  .shift-info-item {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  
  .approve-fab {
    width: 38px;
    height: 38px;
    bottom: 12px;
    right: 12px;
  }

}

/* ========== CARD SUBMIT BUTTON (Bottom Left) ========== */
.card-submit-btn {
  position: absolute;
  bottom: 16px;
  left: 16px;
  height: 42px;             /* Fixed height */
  width: 42px;              /* Start as a circle */
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 50px;      /* High radius for Pill shape */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align content to start so icon stays left */
  padding: 0;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
  cursor: pointer;
  z-index: 20;
  overflow: hidden;         /* Hides text when collapsed */
  
  /* Animation for the slide effect */
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.2s ease, 
              transform 0.2s ease,
              opacity 0.2s ease;

  /* Hidden by default until card hover */
  opacity: 0;
  pointer-events: none;
}

/* Show button when hovering the CARD */
.work-card:hover .card-submit-btn {
  opacity: 1;
  pointer-events: auto;
}

/* HOVER STATE: Slide to the right */
.card-submit-btn:hover {
  width: 145px; /* Expands width to reveal text */
  background: var(--primary-dark);
  box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4);
}

/* The Icon Container - Keeps icon fixed in place */
.card-submit-btn .icon-container {
  width: 42px; /* Same as button initial width */
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Prevents icon from squishing */
}

.card-submit-btn i {
  font-size: 1rem;
}

/* The Text - Fades in on slide */
.card-submit-btn .btn-text {
  white-space: nowrap; /* Prevents text wrapping */
  opacity: 0;
  font-weight: 600;
  font-size: 0.9rem;
  padding-right: 16px;
  transform: translateX(-10px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s; /* 0.1s delay */
}

/* Show text on hover */
.card-submit-btn:hover .btn-text {
  opacity: 1;
  transform: translateX(0);
}

/* Show button when hovering the CARD */
.work-card:hover .card-submit-btn {
  opacity: 1;
  pointer-events: auto;
}

/* HOVER STATE: Slide to the right */
.card-submit-btn:hover {
  width: 145px; /* Expands width to reveal text */
  background: var(--primary-dark);
  box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4);
}

/* The Icon Container - Keeps icon fixed in place */
.card-submit-btn .icon-container {
  width: 42px; /* Same as button initial width */
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Prevents icon from squishing */
}

.card-submit-btn i {
  font-size: 1rem;
}

/* The Text - Fades in on slide */
.card-submit-btn .btn-text {
  white-space: nowrap; /* Prevents text wrapping */
  opacity: 0;
  font-weight: 600;
  font-size: 0.9rem;
  padding-right: 16px;
  transform: translateX(-10px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s; /* 0.1s delay */
}

/* Show text on hover */
.card-submit-btn:hover .btn-text {
  opacity: 1;
  transform: translateX(0);
}
/* --- New Request Modal Styles --- */
.request-box {
  max-width: 450px; /* Slightly wider than the small link modal */
  text-align: left;
}

.modal-section {
  margin-bottom: 16px;
}

.modal-section label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #374151; /* Dark gray */
  margin-bottom: 6px;
}

.modal-section textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical; /* Allow user to stretch height only */
  min-height: 80px;
}

.modal-section textarea:focus,
.modal-section input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Style specifically for the inputs inside this modal to match textarea */
.request-box input {
  margin: 0; /* Override previous margin */
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}


/* ========== TEACHER REQUEST SECTION ========== */
.request-section {
  padding: 16px 20px 20px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-top: 1px solid #fcd34d;
  margin-top: 0;
}

.request-section .section-header i {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #b45309;
}

.request-content {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid #fde68a;
}

.request-detail {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.request-detail i {
  color: #d97706;
  font-size: 0.9rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.request-detail p {
  margin: 0;
  color: #78350f;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 500;
}

.request-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.request-duration {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fcd34d;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #92400e;
}

.request-duration i {
  font-size: 0.85rem;
  color: #d97706;
}

.request-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  color: #9a3412;
  border: 1px solid #fb923c;
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.request-link-badge:hover {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.request-link-badge i {
  font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .request-footer {
    flex-direction: column;
    align-items: stretch;
  }
  
  .request-link-badge {
    justify-content: center;
  }
}

/* ========== CARD APPROVE BUTTON (Bottom Right - Mirrors Send Request) ========== */
.card-approve-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  height: 42px;
  width: 42px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border: none;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
  cursor: pointer;
  z-index: 20;
  overflow: hidden;
  
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.2s ease, 
              background 0.2s ease,
              opacity 0.2s ease;

  opacity: 0;
  pointer-events: none;
}

.work-card:hover .card-approve-btn {
  opacity: 1;
  pointer-events: auto;
}

.card-approve-btn:hover {
  width: 130px;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

.card-approve-btn .icon-container {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-approve-btn i {
  font-size: 1rem;
}

.card-approve-btn .btn-text {
  white-space: nowrap;
  opacity: 0;
  font-weight: 600;
  font-size: 0.9rem;
  padding-left: 16px;
  transform: translateX(10px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

.card-approve-btn:hover .btn-text {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 480px) {
  .card-approve-btn {
    width: 38px;
    height: 38px;
    bottom: 12px;
    right: 12px;
  }
  
  .card-approve-btn .icon-container {
    width: 38px;
    height: 38px;
  }
}

/* --- Grant Button Hover Logic --- */
.req-card .grant-btn {
  opacity: 0;           /* Hidden by default */
  pointer-events: none; /* Cannot be clicked when hidden */
  transition: all 0.2s ease;
  transform: translateY(5px);
}

.req-card:hover .grant-btn {
  opacity: 1;           /* Show on hover */
  pointer-events: auto; /* Enable clicking */
  transform: translateY(0);
}


/* ========== GRANT MODAL STYLES ========== */
.grant-box {
  max-width: 400px;
}

.grant-box h3 {
  color: #16a34a;
}

.btn-grant {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}

.btn-grant:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}

/* Mini Grant Button on Request Cards */
.mini-grant-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mini-grant-btn:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.mini-grant-btn i {
  font-size: 0.65rem;
}

/* ========== REQUEST STATS BADGES ========== */
.request-stats-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: default;
  transition: all 0.2s ease;
}

.stat-badge:hover {
  transform: scale(1.05);
}

.stat-badge i {
  font-size: 0.65rem;
}

/* Total - Blue theme */
.stat-badge.total {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

/* Granted - Green theme */
.stat-badge.granted {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

/* Pending/Needs Attention - Orange/Red theme */
.stat-badge.pending {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fcd34d;
  animation: pulse-attention 2s infinite;
}

@keyframes pulse-attention {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0);
  }
}

/* Responsive */
@media (max-width: 480px) {
  .request-stats-badges {
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .stat-badge {
    padding: 3px 8px;
    font-size: 0.7rem;
  }

  /* ========== APPROVE MODAL STYLES ========== */
.approve-box {
  max-width: 400px;
}

.approve-box h3 {
  color: #16a34a;
}

.btn-approve-confirm {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}

.btn-approve-confirm:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}

/* ========== WARNING MODAL STYLES ========== */
.warning-box {
  max-width: 400px;
  text-align: center;
}

.warning-box h3 {
  color: #d97706;
}

.warning-box .btn-confirm {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  width: 100%;
}

.warning-box .btn-confirm:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}


}



/* ========== LOCK ICON STYLES ========== */
.lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

.lock-badge:hover {
  transform: scale(1.05);
  background: #e5e7eb;
}

.lock-badge.locked {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.lock-badge.locked:hover {
  background: #fee2e2;
}

/* Denied Badge */
.stat-badge.denied {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* Locked Card Styling */
.work-card.locked {
  position: relative;
  /* Normal border, no background color change */
  border: 1px solid #e5e7eb !important;
  background: #ffffff;
}

/* Ensure the lock icon remains clickable for admins */
.work-card.locked .lock-badge {
  z-index: 50; 
  cursor: pointer;
}

/* Comment Button */
.comment-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comment-btn:hover {
  background: #dbeafe;
  transform: translateY(-1px);
}

.comment-btn.has-comment {
  background: #dcfce7;
  color: #16a34a;
  border-color: #86efac;
}

/* Deny Button */
.deny-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.deny-btn:hover {
  background: #fee2e2;
  transform: translateY(-1px);
}

/* Denied Request Card Style */
.request-denied {
  opacity: 0.6;
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}

.request-denied::before {
  content: 'ĐÃ TỪ CHỐI';
  position: absolute;
  top: 5px;
  right: 5px;
  background: #dc2626;
  color: white;
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

/* Comment Display */
.comment-display {
  margin-top: 8px;
  padding: 8px 10px;
  background: #f0f9ff;
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #1e40af;
}

.comment-display i {
  margin-right: 6px;
  color: #3b82f6;
}


/* Wrapper for the comment section */
.all-comments-container {
  margin-top: 8px;
  background: #f8fafc; /* Light gray background */
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

/* Header strip "Discussion (2)" */
.comments-header {
  background: #f1f5f9;
  padding: 6px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

/* Scroll area (prevents card from getting huge if 20 comments) */
.comments-scroll-area {
  padding: 0;
  max-height: 200px; /* Optional: Limits height */
  overflow-y: auto;
}

/* Individual comment box */
.single-comment-item {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}

.single-comment-item:last-child {
  border-bottom: none;
}

/* Meta info line (Index #1 - Date) */
.comment-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 0.65rem;
  color: #94a3b8;
}

.comment-index {
  font-weight: 700;
  color: #cbd5e1;
}

/* The actual text */
.comment-text {
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.4;
  word-break: break-word; /* Prevents long text from breaking layout */
}


/* ========== LOADING SPINNER ========== */
.loading-overlay {
  grid-column: 1 / -1;       /* This forces the spinner to span full width */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;         /* Gives it vertical space to sit in the middle */
  gap: 24px;
  animation: fade-in 0.3s ease;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(13, 110, 253, 0.15); /* Light transparent blue ring */
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s ease-in-out infinite; /* Smoother spin */
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2); /* Nice glow effect */
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 1rem;
  color: #6b7280;
  font-weight: 600;
  letter-spacing: 0.5px;
  animation: pulse-text 1.5s infinite ease-in-out;
}

@keyframes pulse-text {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Fade transition for smooth updates */
.work-grid {
  transition: opacity 0.2s ease;
}

.work-grid.updating {
  opacity: 0.6;
}

/* Card fade-in animation */
.work-card {
  animation: cardFadeIn 0.3s ease;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Comment Delete Icon Styles --- */
.single-comment-item {
  position: relative; /* Required to position the icon inside */
}

.delete-comment-btn {
  position: absolute;
  bottom: 5px;
  right: 8px;
  background: white; /* White bg ensures text behind it doesn't show through */
  border: 1px solid #fee2e2;
  border-radius: 4px;
  color: #ef4444; /* Red color */
  cursor: pointer;
  font-size: 0.75rem;
  padding: 4px 6px;
  opacity: 0; /* Hidden by default */
  pointer-events: none; /* Cannot click when hidden */
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  z-index: 10;
}

.delete-comment-btn:hover {
  background: #fef2f2;
  color: #dc2626;
  transform: scale(1.1);
}

/* Show icon when hovering the comment item */
.single-comment-item:hover .delete-comment-btn {
  opacity: 1;
  pointer-events: auto;
}


/* ---------- FILTER SECTION ---------- */
.filter-section {
  display: flex;
  gap: 15px;
  background: #ffffff;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  flex-wrap: wrap; /* Stacks on mobile */
  border: 1px solid #e5e7eb;
}

.filter-group {
  position: relative;
  flex: 1;
  min-width: 200px; /* Prevents them from getting too small */
}

.filter-group i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 0.9rem;
}

.filter-group input {
  width: 100%;
  padding: 12px 12px 12px 40px; /* Padding left makes room for icon */
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.95rem;
  outline: none;
  background: #f9fafb;
  transition: all 0.2s ease;
  font-family: inherit;
}

.filter-group input:focus {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Mobile tweak */
@media (max-width: 600px) {
  .filter-section {
    flex-direction: column;
    gap: 10px;
  }
}

/* ---------- SUMMARY STATS IN FILTER ---------- */
.filter-summary {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto; /* Pushes summary to the right on desktop */
}

.summary-item {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.2;
  border: 1px solid #ddd;
  min-width: 110px;
}

.summary-item span {
  font-weight: 600;
  opacity: 0.8;
  margin-bottom: 2px;
}

.summary-item strong {
  font-size: 1.1rem;
}

/* Colors matching your cards */
.summary-item.purple {
  background: #f5f3ff;
  border-color: #d8b4fe;
  color: #7c3aed;
}

.summary-item.green {
  background: #f0fdf4;
  border-color: #86efac;
  color: #16a34a;
}

/* Mobile: Stack them */
@media (max-width: 768px) {
  .filter-summary {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
  .summary-item {
    flex: 1;
    text-align: center;
  }
}

/* ========== DUPLICATE CARD MESSAGE ========== */
.duplicate-card-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 20px;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  color: #64748b;
  text-align: center;
  transition: all 0.2s ease;
}

.duplicate-card-message:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #475569;
}

.duplicate-card-message i {
  font-size: 1.5rem;
  color: #94a3b8;
  transform: rotate(90deg); /* Points the arrow up-left */
}

.duplicate-card-message span {
  font-size: 0.9rem;
  font-weight: 600;
}


/* ========== NEW COMPACT SHIFT SECTION ========== */

/* Badges Row */
.shift-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 12px 0;
  border-bottom: 1px dashed #e2e8f0;
  margin-bottom: 12px;
}

.shift-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shift-badge:hover {
  transform: translateY(-1px);
}

/* Department Badge - Green */
.shift-badge.dept {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #047857;
  border: 1px solid #6ee7b7;
}

.shift-badge.dept:hover {
  background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
}

/* Meeting Image Badge - Blue */
.shift-badge.meeting {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

.shift-badge.meeting:hover {
  background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
}

/* Work Meeting Badge - Purple */
.shift-badge.work-meet {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #6d28d9;
  border: 1px solid #c4b5fd;
}

.shift-badge.work-meet:hover {
  background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
}

/* Add Meeting Button Badge - Gray */
.shift-badge.add-meet {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  color: #4b5563;
  border: 1px solid #d1d5db;
}

.shift-badge.add-meet:hover {
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  color: #1f2937;
}

.shift-compact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Switched back to 4 */
  gap: 8px;
}

.shift-compact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  transition: all 0.2s ease;
}

.shift-compact-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.shift-compact-item i {
  font-size: 0.85rem;
  color: #64748b;
}

/* Primary Item (Working Shift Time) - Blue highlight */
.shift-compact-item.primary {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
  color: #1e40af;
  font-weight: 700;
}

.shift-compact-item.primary i {
  color: #3b82f6;
}

.shift-compact-item.primary:hover {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

/* Mobile Responsive - Stack into 2 columns */
@media (max-width: 600px) {
  .shift-compact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .shift-badges-row {
    gap: 6px;
  }
  
  .shift-badge {
    padding: 5px 10px;
    font-size: 0.7rem;
  }
}

/* Very small screens - make badges wrap nicely */
@media (max-width: 400px) {
  .shift-compact-item {
    padding: 8px 6px;
    font-size: 0.75rem;
    gap: 5px;
  }
  
  .shift-compact-item i {
    font-size: 0.75rem;
  }
}

/* ========== UNIFIED CARD - MULTIPLE SHIFTS ========== */
.shifts-container {
  padding: 16px 20px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
}

.shifts-container .section-header {
  margin-bottom: 16px;
}

.single-shift-container {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.single-shift-container:last-child {
  margin-bottom: 0;
}

.single-shift-container:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.single-shift-container.shift-locked {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px dashed #fca5a5;
}

.shift-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.shift-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e40af;
}

.shift-time-badge i {
  color: #3b82f6;
}

.shift-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
}

.shift-submit-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

/* Date info in header */
.date-info {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.8rem;
  color: #64748b;
}

.date-info span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.date-info i {
  color: #94a3b8;
}

/* Updated card header for badges */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.card-header .request-stats-badges {
  margin-top: 0;
}

/* Shift compact grid - 2 columns for individual shifts */
.single-shift-container .shift-compact-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Mobile responsive */
@media (max-width: 600px) {
  .shift-header-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .shift-submit-btn {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  
  .date-info {
    flex-direction: column;
    gap: 4px;
  }
}

/* ========== NEW BEAUTIFUL SHIFT TIMELINE DESIGN ========== */

/* Container with timeline */
.single-shift-container {
  position: relative;
  /* background line is deleted */
  border: none;
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Content wrapper - keeps shift content and requests in a column */
.shift-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.single-shift-container:last-child {
  margin-bottom: 0;
}

.single-shift-container:hover {
  border-color: #3b82f6;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.single-shift-container.shift-locked {
  background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
  border: 1px dashed #fca5a5;
}

/* Timeline indicator on the left */
.shift-timeline-indicator {
  width: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  flex-shrink: 0;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 50%;
  border: 3px solid #dbeafe;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.timeline-line {
  width: 2px;
  flex: 1;
  background: linear-gradient(180deg, #bfdbfe 0%, #e0e7ff 100%);
  margin-top: 8px;
  border-radius: 1px;
}

.single-shift-container:last-child .timeline-line {
  display: none;
}

/* Main content area */
.shift-main-content {
  flex: 1;
  padding: 16px 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Header with time pill */
.shift-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.shift-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.shift-time-pill:hover {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  transform: translateY(-1px);
}

.shift-time-pill i {
  font-size: 0.9rem;
  color: #3b82f6;
}

.shift-time-pill .time-text {
  font-size: 1rem;
  font-weight: 800;
  color: #1e40af;
  letter-spacing: -0.3px;
}

/* Department tag */
.shift-dept-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

/* Request button (moved to header) */
.shift-card-header .shift-submit-btn {
  margin-left: auto;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.8rem;
}

/* Actions row */
.shift-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shift-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shift-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.shift-action-btn.img {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

.shift-action-btn.img:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border-color: #3b82f6;
}

.shift-action-btn.video {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #6d28d9;
  border: 1px solid #c4b5fd;
}

.shift-action-btn.video:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  border-color: #8b5cf6;
}

.shift-action-btn.add {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  color: #4b5563;
  border: 1px dashed #9ca3af;
}

.shift-action-btn.add:hover {
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  border-style: solid;
  color: #1f2937;
}

/* Status row */
.shift-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--status-bg, #f8fafc);
  border: 1px solid var(--status-border, #e2e8f0);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--status-color, #475569);
  transition: all 0.2s ease;
}

.status-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.status-chip i {
  font-size: 0.8rem;
}

.status-chip.neutral {
  --status-bg: #f8fafc;
  --status-border: #e2e8f0;
  --status-color: #64748b;
  font-weight: 600;
}

/* Animation */
.single-shift-container {
  animation: shiftSlideIn 0.4s ease;
}

@keyframes shiftSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile responsive */
@media (max-width: 600px) {
  .shift-timeline-indicator {
    width: 20px;
  }
  
  .timeline-dot {
    width: 10px;
    height: 10px;
  }
  
  .shift-main-content {
    padding: 12px 12px 12px 0;
    gap: 10px;
  }
  
  .shift-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .shift-card-header .shift-submit-btn {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  
  .shift-time-pill {
    padding: 8px 12px;
  }
  
  .shift-time-pill .time-text {
    font-size: 0.9rem;
  }
  
  .shift-actions-row {
    gap: 6px;
  }
  
  .shift-action-btn {
    padding: 6px 10px;
    font-size: 0.72rem;
  }
  
  .status-chip {
    padding: 6px 10px;
    font-size: 0.72rem;
  }
}

/* When only one shift - hide timeline line */
.shifts-container:has(.single-shift-container:only-child) .timeline-line {
  display: none;
}


/* ========== REDESIGNED SHIFT CARDS ========== */

.shifts-container {
  padding: 16px 20px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
}

.shifts-container .section-header {
  margin-bottom: 16px;
}

/* Single Shift Container */
.single-shift-container {
  position: relative;
  display: flex;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.single-shift-container:last-child {
  margin-bottom: 0;
}

.single-shift-container:hover {
  border-color: #3b82f6;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
  transform: translateY(-2px);
}

.single-shift-container.shift-locked {
  background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
  border: 1px dashed #fca5a5;
}

.single-shift-container.shift-locked .shift-color-bar {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

/* Colored left bar */
.shift-color-bar {
  width: 5px;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  flex-shrink: 0;
}

/* Main content */
.shift-main-content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Top row with time, department, and button */
.shift-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.shift-top-spacer {
  flex: 1;
}

/* Time box */
.shift-time-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 2px solid #93c5fd;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e40af;
  letter-spacing: -0.3px;
  transition: all 0.2s ease;
}

.shift-time-box:hover {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  transform: scale(1.02);
}

.shift-time-box i {
  font-size: 1rem;
  color: #3b82f6;
}

/* Department box */
.shift-dept-box {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
}

.shift-dept-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
}

/* Submit button in header */
.shift-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(13, 110, 253, 0.3);
}

.shift-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(13, 110, 253, 0.4);
}

/* Bottom row - Info Grid */
.shift-bottom-row {
  padding-top: 14px;
  border-top: 1px dashed #e2e8f0;
}

.shift-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

/* Info cards */
.info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card-bg, #f8fafc);
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: 12px;
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: default;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.info-card-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--icon-bg, rgba(0, 0, 0, 0.05));
  flex-shrink: 0;
}

.info-card-icon i {
  font-size: 0.9rem;
  color: var(--card-color, #64748b);
}

.info-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.info-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
}

.info-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--card-color, #334155);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status card - uses CSS variables from inline style */
.status-card {
  --icon-bg: var(--card-bg);
}

.status-card .info-card-icon {
  background: rgba(0, 0, 0, 0.08);
}

.status-card .info-value {
  color: var(--card-color);
}

/* Sent card - neutral gray */
.sent-card {
  --card-bg: #f8fafc;
  --card-border: #e2e8f0;
  --card-color: #475569;
  --icon-bg: #e2e8f0;
}

/* Link card - blue theme */
.link-card {
  --card-bg: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  --card-border: #93c5fd;
  --card-color: #1d4ed8;
  --icon-bg: #dbeafe;
  cursor: pointer;
}

.link-card:hover {
  --card-bg: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* Video card - purple theme */
.video-card {
  --card-bg: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  --card-border: #c4b5fd;
  --card-color: #6d28d9;
  --icon-bg: #ddd6fe;
  cursor: pointer;
}

.video-card:hover {
  --card-bg: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

/* Add card - dashed style */
.add-card {
  --card-bg: #fafafa;
  --card-border: #d1d5db;
  --card-color: #6b7280;
  --icon-bg: #e5e7eb;
  border-style: dashed;
  cursor: pointer;
  background: #fafafa;
}

.add-card:hover {
  --card-bg: #f3f4f6;
  --card-color: #374151;
  border-style: solid;
}

/* Animation */
.single-shift-container {
  animation: shiftFadeIn 0.4s ease;
}

@keyframes shiftFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Date info in card header */
.date-info {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.8rem;
  color: #64748b;
}

.date-info span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.date-info i {
  color: #94a3b8;
}

/* Updated card header for badges */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.card-header .request-stats-badges {
  margin-top: 0;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .shift-main-content {
    padding: 14px;
    gap: 12px;
  }
  
  .shift-top-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .shift-top-spacer {
    display: none;
  }
  
  .shift-time-box {
    justify-content: center;
    font-size: 0.95rem;
    padding: 10px 14px;
  }
  
  .shift-dept-box {
    align-self: flex-start;
  }
  
  .shift-submit-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
  }
  
  .shift-info-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .info-card {
    padding: 10px 12px;
  }
  
  .info-card-icon {
    width: 32px;
    height: 32px;
  }
  
  .info-card-icon i {
    font-size: 0.8rem;
  }
  
  .info-value {
    font-size: 0.8rem;
  }
  
  .date-info {
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 400px) {
  .shift-info-grid {
    grid-template-columns: 1fr;
  }
}


/* ========== COMPACT SHIFT DESIGN ========== */
.shift-quick-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
  margin-top: 12px;
}

.quick-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: default;
  transition: all 0.2s ease;
}

.quick-item i {
  font-size: 0.7rem;
}

.quick-item.status {
  background: var(--item-bg);
  border: 1px solid var(--item-border);
  color: var(--item-color);
}

.quick-item.sent {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
}

.quick-item.link {
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #1d4ed8;
  cursor: pointer;
}

.quick-item.link:hover {
  background: #dbeafe;
  transform: translateY(-1px);
}

.quick-item.video {
  background: #f5f3ff;
  border: 1px solid #c4b5fd;
  color: #6d28d9;
  cursor: pointer;
}

.quick-item.video:hover {
  background: #ede9fe;
  transform: translateY(-1px);
}

.quick-item.add {
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  color: #6b7280;
  cursor: pointer;
}

.quick-item.add:hover {
  background: #f3f4f6;
  border-style: solid;
  color: #374151;
}

/* Compact shift container */
.single-shift-container .shift-main-content {
  padding: 14px;
}

.single-shift-container .shift-bottom-row {
  display: none;
}

/* ========== TEACHER REQUESTS SECTION (AT END OF CARD) ========== */
.teacher-requests-section {
  padding: 20px;
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 50%, #ffffff 100%);
  border-top: 2px solid #fde047;
  margin-top: 0;
}

.teacher-requests-section .section-header {
  margin-bottom: 16px;
}

.teacher-requests-section .section-header i {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #d97706;
  box-shadow: 0 2px 6px rgba(251, 191, 36, 0.3);
}

.requests-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.request-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #fde68a;
  border-left: 4px solid var(--accent-color, #f59e0b);
  border-radius: 12px;
  padding: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.request-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: #fcd34d;
}

.request-card.request-denied {
  opacity: 0.6;
  background: #fef2f2;
  border-color: #fecaca;
  border-left-color: #ef4444;
}

.request-card.request-denied::before {
  content: 'DENIED';
  position: absolute;
  top: 8px;
  right: 8px;
  background: #dc2626;
  color: white;
  font-size: 0.6rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}

.request-shift-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 10px;
}

.request-detail-text {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.5;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #f3f4f6;
}

.request-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.req-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.req-tag.link-tag {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

.req-tag.link-tag:hover {
  background: #dbeafe;
}

.req-tag.duration-tag {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.req-tag.granted-tag {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

/* Mobile responsive for requests */
@media (max-width: 480px) {
  .teacher-requests-section {
    padding: 16px;
  }
  
  .request-card {
    padding: 12px;
  }
  
  .request-actions {
    gap: 6px;
  }
  
  .req-tag {
    padding: 4px 8px;
    font-size: 0.65rem;
  }
}


/* ========== COMPACT WORKING SHIFTS DESIGN ========== */

.single-shift-container {
  position: relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.single-shift-container:last-child {
  margin-bottom: 0;
}

.single-shift-container:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
}

.single-shift-container.shift-locked {
  background: #fef2f2;
  border: 1px dashed #fca5a5;
}

.shift-content-wrapper {
  padding: 0;
}

.shift-main-content {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shift-header-new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shift-time-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

.time-icon-wrapper {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
  flex-shrink: 0;
}

.time-icon-wrapper i {
  font-size: 0.95rem;
  color: #ffffff;
}

.time-details {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.time-range {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.time-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.shift-dept-badge-new {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.shift-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}

.info-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: default;
  transition: all 0.2s ease;
}

.info-chip i {
  font-size: 0.7rem;
}

.info-chip:hover {
  transform: translateY(-1px);
}

.status-chip-new {
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--chip-color);
}

.sent-chip {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.sent-chip i {
  color: #64748b;
}

.link-chip {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  cursor: pointer;
}

.link-chip:hover {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.link-chip:hover i {
  color: white;
}

.video-chip {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #7c3aed;
  cursor: pointer;
}

.video-chip:hover {
  background: #8b5cf6;
  color: white;
  border-color: #8b5cf6;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.video-chip:hover i {
  color: white;
}

.add-chip {
  background: #fafafa;
  border: 1px dashed #d1d5db;
  color: #6b7280;
  cursor: pointer;
}

.add-chip:hover {
  background: #f3f4f6;
  border-style: solid;
  color: #374151;
}

.shift-submit-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.2);
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition: all 0.2s ease;
}

.single-shift-container:hover .shift-submit-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.shift-submit-btn:hover {
  background: var(--primary-dark);
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}

@media (max-width: 600px) {
  .shift-main-content {
    padding: 10px 12px;
    gap: 8px;
  }
  
  .time-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  
  .time-icon-wrapper i {
    font-size: 0.85rem;
  }
  
  .time-range {
    font-size: 0.95rem;
  }
  
  .time-label {
    font-size: 0.6rem;
  }
  
  .shift-dept-badge-new {
    padding: 4px 8px;
    font-size: 0.6rem;
  }
  
  .shift-info-row {
    gap: 5px;
  }
  
  .info-chip {
    padding: 4px 8px;
    font-size: 0.65rem;
    gap: 4px;
  }
  
  .shift-submit-btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    padding: 8px 12px;
  }
}

@media (max-width: 400px) {
  .info-chip span {
    display: none;
  }
  
  .info-chip {
    padding: 5px 7px;
  }
  
  .info-chip i {
    font-size: 0.8rem;
  }
}

/* Hover State: Visible */
.single-shift-container:hover .shift-submit-btn {
  opacity: 1;
  transform: translateY(0); /* Slides into place */
  pointer-events: auto; /* Re-enable clicking */
}

/* Hover Effect on the button itself */
.shift-submit-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px); /* Slight lift on click hover */
  box-shadow: 0 6px 16px rgba(13, 110, 253, 0.35);
}

/* Mobile: On touch devices, we usually want it always visible or visible on tap */
@media (max-width: 768px) {
  .shift-submit-btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative; /* Reset to normal flow on mobile if desired */
    bottom: auto;
    right: auto;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }
}


/* Modern Soft Department Badge */
.shift-dept-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: 10px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
  color: #4338ca;
  border: 1px solid #a5b4fc;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.15);
  transition: all 0.2s ease;
}

.shift-dept-inline:hover {
  background: linear-gradient(135deg, #c7d2fe 0%, #ddd6fe 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
}

.shift-dept-inline i {
  font-size: 0.6rem;
}


/* ========== CARD COMMENT BUTTON (Bottom Left) ========== */
.card-comment-btn {
  position: absolute;
  bottom: 16px;
  left: 16px;
  height: 42px;
  width: 42px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  border: none;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
  cursor: pointer;
  z-index: 20;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.2s ease, 
              transform 0.2s ease,
              opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

.work-card:hover .card-comment-btn {
  opacity: 1;
  pointer-events: auto;
}

.card-comment-btn:hover {
  width: 130px;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
}

.card-comment-btn .icon-container {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-comment-btn i {
  font-size: 1rem;
}

.card-comment-btn .btn-text {
  white-space: nowrap;
  opacity: 0;
  font-weight: 600;
  font-size: 0.9rem;
  padding-right: 16px;
  transform: translateX(-10px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

.card-comment-btn:hover .btn-text {
  opacity: 1;
  transform: translateX(0);
}

/* ========== CARD COMMENTS SECTION ========== */
.card-comments-section {
  padding: 16px 20px;
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border-top: 2px solid #e9d5ff;
}

.card-comments-section .section-header {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-comments-section .section-header i {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
  color: #7c3aed;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.2);
}

.comment-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 10px;
  margin-left: auto;
}

.card-comments-preview {
  background: white;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #e9d5ff;
}

.no-comments-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #a78bfa;
  font-size: 0.85rem;
  padding: 10px;
}

.no-comments-msg i {
  font-size: 1rem;
}

.comment-preview-item {
  padding: 10px 0;
  border-bottom: 1px dashed #f3e8ff;
}

.comment-preview-item:last-child {
  border-bottom: none;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.preview-author {
  font-size: 0.75rem;
  font-weight: 700;
  color: #7c3aed;
}

.preview-time {
  font-size: 0.7rem;
  color: #a78bfa;
}

.preview-text {
  font-size: 0.85rem;
  color: #4b5563;
  line-height: 1.4;
}

.more-comments {
  text-align: center;
  font-size: 0.75rem;
  color: #8b5cf6;
  font-weight: 600;
  padding-top: 8px;
  cursor: pointer;
}

/* ========== CARD COMMENT MODAL ========== */
.card-comment-box {
  max-width: 500px;
}

.card-comment-box h3 {
  color: #7c3aed;
  margin-bottom: 16px;
}

.card-comments-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 16px;
  background: #faf5ff;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #e9d5ff;
}

.comments-loading,
.no-card-comments,
.comments-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: #a78bfa;
  font-size: 0.9rem;
}

.comments-error {
  color: #ef4444;
}

.card-comment-item {
  position: relative;
  background: white;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #e9d5ff;
  transition: all 0.2s ease;
}

.card-comment-item:last-child {
  margin-bottom: 0;
}

.card-comment-item:hover {
  border-color: #c4b5fd;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.comment-author {
  font-size: 0.8rem;
  font-weight: 700;
  color: #7c3aed;
  display: flex;
  align-items: center;
  gap: 5px;
}

.comment-author i {
  font-size: 0.7rem;
}

.comment-time {
  font-size: 0.7rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
}

.comment-body {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.5;
  word-break: break-word;
}

.delete-card-comment-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: white;
  border: 1px solid #fee2e2;
  border-radius: 6px;
  color: #ef4444;
  cursor: pointer;
  font-size: 0.7rem;
  padding: 4px 8px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}

.card-comment-item:hover .delete-card-comment-btn {
  opacity: 1;
  pointer-events: auto;
}

.delete-card-comment-btn:hover {
  background: #fef2f2;
  transform: scale(1.1);
}

.new-comment-section {
  margin-bottom: 16px;
}

.new-comment-section label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.new-comment-section textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #e9d5ff;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 80px;
  transition: all 0.2s ease;
}

.new-comment-section textarea:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .card-comment-btn {
    opacity: 1;
    pointer-events: auto;
    width: 42px;
  }
  
  .card-comment-btn:hover {
    width: 42px;
  }
  
  .card-comment-btn .btn-text {
    display: none;
  }
}


/* ========== THREADED REPLIES STYLES ========== */

/* Container for replies under a parent comment */
.replies-wrapper {
  margin-left: 20px;
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid #e2e8f0; /* The vertical connector line */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Specific styling for a reply card */
.card-comment-item.is-reply {
  background-color: #f8fafc; 
  border: 1px solid #f1f5f9;
  font-size: 0.95em; 
}

/* Fix spacing for the whole group */
.comment-thread-group {
  margin-bottom: 12px;
  background: white;
  border-radius: 10px;
  border: 1px solid #e9d5ff;
  padding: 8px;
}

/* Remove default margins from items inside a thread group */
.comment-thread-group .card-comment-item {
  margin-bottom: 0;
  border: none;
  box-shadow: none;
}


/* ========== MAIN PAGE COMMENTS (Not in Modal) ========== */
.main-comment-thread {
  background: white;
  border-radius: 12px;
  border: 1px solid #e9d5ff;
  margin-bottom: 12px;
  overflow: hidden;
}

.main-comment-thread:last-child {
  margin-bottom: 0;
}

.main-comment-item {
  padding: 12px 14px;
}

.main-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.main-comment-author {
  font-size: 0.8rem;
  font-weight: 700;
  color: #7c3aed;
  display: flex;
  align-items: center;
  gap: 6px;
}

.main-comment-author i {
  font-size: 0.7rem;
}

.main-comment-time {
  font-size: 0.7rem;
  color: #94a3b8;
}

.main-comment-text {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.5;
  word-break: break-word;
  margin-bottom: 8px;
}

.main-comment-actions {
  display: flex;
  justify-content: flex-end;
}

.main-reply-btn {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.main-reply-btn:hover {
  background: #8b5cf6;
  color: white;
  border-color: #8b5cf6;
}

/* Better Reply Container */
.main-replies-wrapper {
  /* Margins create the space so it doesn't touch the outer container */
  margin-left: 20px;       /* Indent from left */
  margin-right: 15px;      /* Space from right edge */
  margin-bottom: 15px;     /* Space from bottom edge (Fixes the touching issue) */
  margin-top: 10px;        /* Space from top comment */
  
  padding: 12px;
  border-left: 2px solid #ddd6fe; 
  background: #f5f3ff; 
  border-radius: 12px;     /* ROUND ALL CORNERS NOW (Fixes the flat top) */
}

/* Better Individual Reply Style */
.main-reply-item {
  background: #ffffff;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid #e9d5ff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03); /* Subtle shadow for depth */
}

.main-reply-item:last-child {
  margin-bottom: 0;
}
.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: 6px;
}

.reply-author {
  font-size: 0.75rem;
  font-weight: 700;
  color: #a78bfa;
  display: flex;
  align-items: center;
  gap: 5px;
}

.reply-author i {
  font-size: 0.65rem;
}

.reply-time {
  font-size: 0.65rem;
  color: #94a3b8;
}

.reply-text {
  font-size: 0.85rem;
  color: #4b5563;
  line-height: 1.4;
  word-break: break-word;
}

/* Make the comments section on cards always visible when there are comments */
.card-comments-preview {
  background: transparent;
  border: none;
  padding: 0;
}

/* ========== NESTED REPLIES STYLES ========== */
.nested-reply-item {
  background: #faf5ff;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 8px;
  border-left: 2px solid #c4b5fd;
}

.nested-reply-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.nested-reply-btn {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.nested-reply-btn:hover {
  background: #8b5cf6;
  color: white;
  border-color: #8b5cf6;
}

/* Make nested items visually distinct */
.nested-reply-item .reply-author {
  font-size: 0.7rem;
  color: #9333ea;
}

.nested-reply-item .reply-text {
  font-size: 0.8rem;
  color: #4b5563;
}

.nested-reply-item .reply-time {
  font-size: 0.6rem;
}

/* Deeper nesting gets lighter background */
.nested-reply-item .nested-reply-item {
  background: #f5f3ff;
  border-left-color: #ddd6fe;
}

.nested-reply-item .nested-reply-item .nested-reply-item {
  background: #ede9fe;
  border-left-color: #e9d5ff;
}


/* ========== COMMENT TRASH BUTTON ========== */
.comment-trash-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: white;
  border: 1px solid #fee2e2;
  border-radius: 6px;
  color: #ef4444;
  cursor: pointer;
  font-size: 0.7rem;
  padding: 4px 8px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 10;
}

.comment-trash-btn:hover {
  background: #fef2f2;
  transform: scale(1.1);
}

/* Show trash on hover for main comment */
.main-comment-item {
  position: relative;
}

.main-comment-item:hover .comment-trash-btn {
  opacity: 1;
  pointer-events: auto;
}

/* Show trash on hover for reply */
.main-reply-item {
  position: relative;
}

.main-reply-item:hover > .comment-trash-btn {
  opacity: 1;
  pointer-events: auto;
}

/* Show trash on hover for nested reply */
.nested-reply-item {
  position: relative;
}

.nested-reply-item:hover > .comment-trash-btn {
  opacity: 1;
  pointer-events: auto;
}

/* ========== REQUEST DELETE BUTTON ========== */
.request-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: white;
  border: 1px solid #fee2e2;
  border-radius: 6px;
  color: #ef4444;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 5px 8px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 10;
}

.request-delete-btn:hover {
  background: #fef2f2;
  color: #dc2626;
  transform: scale(1.1);
}

.request-card:hover .request-delete-btn {
  opacity: 1;
  pointer-events: auto;
}


/* ========== CUSTOM TOAST NOTIFICATIONS ========== */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  min-width: 280px;
  max-width: 400px;
  pointer-events: auto;
  animation: toastSlideIn 0.4s ease;
  border-left: 4px solid #6b7280;
}

.toast.toast-success {
  border-left-color: #22c55e;
}

.toast.toast-error {
  border-left-color: #ef4444;
}

.toast.toast-warning {
  border-left-color: #f59e0b;
}

.toast.toast-info {
  border-left-color: #3b82f6;
}

.toast-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-success .toast-icon {
  background: #dcfce7;
  color: #16a34a;
}

.toast-error .toast-icon {
  background: #fee2e2;
  color: #dc2626;
}

.toast-warning .toast-icon {
  background: #fef3c7;
  color: #d97706;
}

.toast-info .toast-icon {
  background: #dbeafe;
  color: #2563eb;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 2px;
}

.toast-message {
  font-size: 0.8rem;
  color: #6b7280;
}

.toast-close {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  font-size: 1rem;
  transition: color 0.2s;
}

.toast-close:hover {
  color: #4b5563;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

.toast.removing {
  animation: toastSlideOut 0.3s ease forwards;
}

/* ========== CUSTOM CONFIRM MODAL ========== */
.confirm-modal-box {
  max-width: 380px;
  text-align: center;
  padding: 30px 25px;
}

.confirm-icon-wrapper {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.confirm-icon-wrapper.warning {
  background: #fef3c7;
  color: #d97706;
}

.confirm-icon-wrapper.danger {
  background: #fee2e2;
  color: #dc2626;
}

.confirm-icon-wrapper.info {
  background: #dbeafe;
  color: #2563eb;
}

.confirm-modal-box h3 {
  margin: 0 0 8px 0;
  color: #1f2937;
  font-size: 1.15rem;
}

.confirm-modal-box p {
  margin: 0 0 24px 0;
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.5;
}

.confirm-modal-box .modal-actions {
  justify-content: center;
  gap: 12px;
}

.confirm-modal-box .btn-cancel {
  padding: 10px 24px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s;
}

.confirm-modal-box .btn-cancel:hover {
  background: #e5e7eb;
}

.confirm-modal-box .btn-confirm {
  padding: 10px 24px;
}

.confirm-modal-box .btn-confirm.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.confirm-modal-box .btn-confirm.btn-danger:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* ========== IMPROVED LOCK/TRASH ICONS ========== */
.card-action-icons {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 50;
}

.card-action-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-size: 0.85rem;
}

.card-action-icon.lock-icon {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #86efac;
}

.card-action-icon.lock-icon:hover {
  background: #bbf7d0;
  transform: scale(1.1);
}

.card-action-icon.lock-icon.is-locked {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

.card-action-icon.lock-icon.is-locked:hover {
  background: #fecaca;
}

.card-action-icon.trash-icon {
  background: #fef2f2;
  color: #ef4444;
  border: 1px solid #fecaca;
}

.card-action-icon.trash-icon:hover {
  background: #fee2e2;
  transform: scale(1.1);
}


/* ========== LOCKED CARD OVERLAY ========== */
.locked-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(239, 68, 68, 0.08);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 16px;
  pointer-events: none;
}

.locked-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  border: 2px solid #fca5a5;
  box-shadow: 0 8px 32px rgba(239, 68, 68, 0.2);
}

.locked-overlay-content i {
  font-size: 2rem;
  color: #dc2626;
}

.locked-overlay-content span {
  font-size: 0.9rem;
  font-weight: 700;
  color: #dc2626;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Hide interactive elements on locked cards for non-super-admins */
.work-card.locked .shift-submit-btn,
.work-card.locked .mini-grant-btn,
.work-card.locked .deny-btn,
.work-card.locked .comment-btn,
.work-card.locked .main-reply-btn,
.work-card.locked .nested-reply-btn,
.work-card.locked .info-chip.add-chip {
  pointer-events: none;
  opacity: 0.4;
}


/* ========== FILTER TOGGLES ========== */
.filter-toggles {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.filter-checkbox:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.filter-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

.checkbox-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
}

.filter-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #92400e;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-badge:hover {
  background: #fde68a;
  transform: translateY(-1px);
}

.filter-badge.active {
  background: #f59e0b;
  border-color: #d97706;
  color: white;
}

.filter-badge.active .pending-count {
  background: white;
  color: #f59e0b;
}

.pending-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #f59e0b;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 10px;
}

/* ========== PAGINATION ========== */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 30px auto 50px;
  padding: 0;
  background: transparent; /* Removes the white bar */
  box-shadow: none;        /* Removes the container shadow */
  width: 100%;
}

.page-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50px; /* Pill shape */
  font-size: 0.9rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Soft shadow for button */
}

.page-btn:hover:not(:disabled) {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(13, 110, 253, 0.2);
}

.page-btn:disabled {
  opacity: 0.5;
  background: #f1f5f9;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.page-numbers {
  display: flex;
  gap: 8px;
}

.page-num {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50%; /* Perfect circle */
  font-size: 0.9rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.page-num:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.page-num.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}

/* Mobile responsive */
@media (max-width: 600px) {
  .filter-toggles {
    width: 100%;
    justify-content: space-between;
  }
  
  .pagination-container {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .page-numbers {
    order: 3;
    width: 100%;
    justify-content: center;
  }
}


.page-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #94a3b8;
  font-weight: 600;
}

/* ========== SUGGESTIONS DROPDOWN ========== */
.suggestions-list {
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  max-height: 250px;
  overflow-y: auto;
  z-index: 1000;
  padding: 0;
  margin: 0;
  list-style: none;
}

.suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.2s;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background: #f8fafc;
}

.suggestion-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #334155;
}

.suggestion-email {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 2px;
}

/* ========== MODERN FILTER CONTAINER ========== */
.filter-container {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
  border: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
  position: relative;
  z-index: 100;
}

/* --- ROW 1: Inputs --- */
.filter-top-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap; /* Allows wrapping on mobile */
}

/* Search Wrapper */
.search-input-wrapper {
  position: relative;
  flex: 1; 
  min-width: 250px;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 16px;
  color: #94a3b8;
  pointer-events: none;
  font-size: 0.95rem;
}

.search-input-wrapper input {
  width: 100%;
  padding: 14px 14px 14px 44px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  font-size: 0.95rem;
  color: #334155;
  transition: all 0.2s ease;
  outline: none;
}

.search-input-wrapper input:focus {
  background: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.1);
}

/* Date Group */
.date-control-group {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

.date-input-wrapper {
  position: relative;
}

.date-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
  font-size: 0.9rem;
  z-index: 1;
}

.date-input-wrapper input {
  border: none;
  background: transparent;
  padding: 8px 8px 8px 36px;
  font-family: inherit;
  color: #334155;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  min-width: 140px;
}

/* Toggle Switch */
.toggle-switch-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding-right: 12px;
  border-left: 1px solid #cbd5e1;
  padding-left: 12px;
  height: 24px;
}

.toggle-switch-wrapper input {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 36px;
  height: 20px;
  background-color: #cbd5e1;
  border-radius: 20px;
  transition: .3s;
}

.toggle-slider:before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: .3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .toggle-slider {
  background-color: var(--primary);
}

input:checked + .toggle-slider:before {
  transform: translateX(16px);
}

.toggle-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

/* --- ROW 2: Filters & Stats --- */
.filter-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.filter-pills-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px; /* Space for scrollbar if needed */
  /* Hide scrollbar */
  scrollbar-width: none; 
}
.filter-pills-container::-webkit-scrollbar { 
  display: none; 
}

.filter-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filter-pill:hover {
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.filter-pill.active {
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Pill Colors */
.filter-pill.pending.active { background: #f59e0b; }
.filter-pill.warning.active { background: #64748b; } /* Dark Gray for Not Approved */
.filter-pill.success.active { background: #10b981; }

.pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pill-badge {
  background: rgba(255,255,255,0.25);
  padding: 0 6px;
  border-radius: 10px;
  font-size: 0.75rem;
  min-width: 20px;
  text-align: center;
}

/* Stats Compact */
.filter-stats-compact {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #f8fafc;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
}

.stat-mini-item {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.stat-mini-item .label {
  font-size: 0.65rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.stat-mini-item .value {
  font-size: 0.95rem;
  font-weight: 800;
}

.stat-mini-item .value.purple { color: #7c3aed; }
.stat-mini-item .value.green { color: #16a34a; }

.divider {
  width: 1px;
  height: 24px;
  background: #e2e8f0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .filter-top-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .date-control-group {
    justify-content: space-between;
  }
  
  .filter-bottom-row {
    flex-direction: column-reverse; /* Put stats above filters on mobile if needed, or keep normal */
    align-items: stretch;
    gap: 15px;
  }
  
  .filter-stats-compact {
    justify-content: center;
    width: 100%;
  }
}


/* Active state for keyboard navigation */
.suggestion-item.active {
  background: #f1f5f9; /* Light gray to match hover */
  border-left: 3px solid #0d6efd; /* Blue strip on left */
  padding-left: 11px; /* Adjust padding to account for border */
}