: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: start center;  /* CHANGED: Aligns to top so you can scroll */
  padding: 40px 0;            /* ADDED: Spacing for top and bottom */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Card ---------- */
.card {
  width: 100%;
  max-width: 420px;
  margin: auto;                     /* ADDED: Keeps login box centered */
  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; }


/* ---------- Dashboard Grid ---------- */
.user-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* This forces exactly 2 columns */
  gap: 20px;
  animation: fade-in 0.5s ease both;
}

.user-card {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s;
  position: relative; /* Added this line */
}

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

.user-role-badge {
  background: var(--page);
  color: #666;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  width: fit-content;
  margin-bottom: 8px;
}

/* --- CLASS GRID CONTAINER --- */
.class-grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  align-content: start;
  grid-auto-flow: dense;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.group-wrapper {
  display: flex;
  align-items: stretch;
  border: 2px dotted #ccc;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.2s;
  height: 100%;
}

.group-wrapper:hover {
  border-color: #999;
}

/* --- SPANNING LOGIC --- */
.group-wrapper.span-3 { grid-column: span 3; }
.group-wrapper.span-4 { grid-column: span 4; }
.group-wrapper.span-6 { grid-column: span 6; }
.group-wrapper.span-12 { grid-column: span 12; }

/* Left Side: Title */
.group-title {
  flex: 0 0 75px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  border-right: 1px solid #e5e7eb;
  text-transform: uppercase;
  line-height: 1.1;
  word-break: break-word;
}

/* Right Side: Items */
.group-items {
  flex: 1;
  padding: 6px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 34px;
}

/* Class Badge (Chip Style) */
.class-badge {
  padding: 5px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #4b5563;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: all 0.1s ease;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

.class-badge:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 1100px) {
  .class-grid-container {
    grid-template-columns: repeat(6, 1fr);
  }
  .group-wrapper.span-3 { grid-column: span 3; }
  .group-wrapper.span-4,
  .group-wrapper.span-6,
  .group-wrapper.span-12 { grid-column: span 6; }
}

@media (max-width: 600px) {
  .class-grid-container {
    grid-template-columns: 1fr;
  }
  .group-wrapper.span-3,
  .group-wrapper.span-4,
  .group-wrapper.span-6,
  .group-wrapper.span-12 {
    grid-column: span 1;
  }
}

/* ---------- 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); }



/* ---------- Modal Styles ---------- */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(2px);
}

.modal-content {
  background: #fff;
  width: 95%;             /* Take up more screen width */
  max-width: 1000px;      /* Allow it to become much wider */
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  animation: fade-in 0.2s ease-out;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.modal-header h3 { margin: 0; color: var(--primary); }

.close-btn {
  background: none; border: none; font-size: 24px; cursor: pointer; color: #999;
}

/* NEW: Search Input Style */
#teacherSearch {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95rem;
  outline: none;
  background: #fafafa;
  transition: all 0.2s;
}

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

/* UPDATED: 3-Column Grid Layout */
.teacher-list-container {
  overflow-y: auto;
  display: grid;                         /* Use Grid instead of Flex */
  grid-template-columns: repeat(3, 1fr); /* Exact instruction for 3 columns */
  gap: 12px;                             /* Space between the cards */
  max-height: 65vh;                      /* Increased height for better view */
  padding-right: 8px;
}

/* Ensure the "No teachers found" message spans the full width */
.teacher-list-container > div:only-child {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
}

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

/* Optional: Nicer scrollbar for the list */
.teacher-list-container::-webkit-scrollbar { width: 6px; }
.teacher-list-container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

.teacher-option {
  padding: 16px;          /* More breathing room */
  border: 1px solid #eee;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;           /* Ensure all cards are same height */
  box-shadow: 0 2px 5px rgba(0,0,0,0.03); /* Subtle shadow for depth */
}

.teacher-option:hover {
  background: #f0f7ff;
  border-color: var(--primary);
}

.t-name { font-weight: 700; display: block; }
.t-email { font-size: 0.85rem; color: #666; display: block; margin-top: 2px; }


/* --- New Styles for Delete Icon --- */
.class-badge {
  display: inline-flex !important; /* Aligns text and icon */
  align-items: center;
}

.class-badge .delete-btn {
  display: none;       /* Hidden by default */
  margin-left: 6px;    /* Space between name and icon */
  color: #dc2626;      /* Red color */
  cursor: pointer;
  font-size: 0.8rem;
  transition: color 0.2s;
}

.class-badge:hover .delete-btn {
  display: inline-block; /* Show on hover */
}

.class-badge .delete-btn:hover {
  color: #991b1b;      /* Darker red on icon hover */
}

/* Department Dropdown Style */
.dept-select {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  font-size: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background-color: #f9fafb;
  color: #4b5563;
  cursor: pointer;
  outline: none;
}

.dept-select:focus {
  border-color: var(--primary);
  background-color: #fff;
}


/* Style for selected teacher card */
.teacher-option.selected {
  border: 2px solid var(--primary);
  background-color: #eef6ff;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}

/* Helper for the footer buttons */
.modal-footer .btn {
  display: inline-block;
  padding: 10px 24px;
}


/* --- Bulk Selection Styles --- */
.selected-highlight {
  background-color: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* Change the text color of the delete icon when selected so it's visible on blue background */
.selected-highlight .delete-btn {
  color: #fff !important;
}
.selected-highlight .delete-btn:hover {
  color: #ffcccc !important;
}


/* --- Bulk Delete Styles (Teacher Card) --- */
.badge-delete-selected {
  background-color: #ffebee !important; /* Light Red background */
  border-color: #dc3545 !important;     /* Red border */
  color: #dc3545 !important;            /* Red text */
}

.btn-bulk-delete {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-bulk-delete:hover {
  background: #b02a37;
}

/* --- Bulk Delete Styles (Teacher Card) --- */
.badge-delete-selected {
  background-color: #ffebee !important; /* Light Red background */
  border-color: #dc3545 !important;     /* Red border */
  color: #dc3545 !important;            /* Red text */
}

.btn-bulk-delete {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-bulk-delete:hover {
  background: #b02a37;
}


/* --- Department Badge Styles --- */
.dept-wrapper {
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dept-badge {
  background: #eef2ff;
  color: var(--primary);
  border: 1px solid #c7d2fe;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}

.dept-badge:hover {
  background: #ffcccc;
  border-color: #ff9999;
  color: #cc0000;
}

.dept-badge:hover::after {
  content: "×";
  font-weight: bold;
}

/* Hide the default dropdown arrow to make it look cleaner if desired, 
   or keep it. This style makes the select small and compact */
.dept-select-compact {
  padding: 4px 8px;
  font-size: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  width: auto;
  max-width: 100px;
}