* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

:root {
  --blue: #1565c0;
  --blue-dark: #0d47a1;
  --card-blue: #b8d4f5;
  --card-blue-selected: #82bcff;
  --panel-gray: #e8e8e8;
  --page-bg: #d6e0ea;
  --text-dark: #2c3e50;
}

body {
  min-height: 100vh;
  background-color: #d1e4f0;
}

.hidden {
  display: none !important;
}

/* ================= LOGIN STYLES ================= */
.login-wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.card {
  width: 100%;
  max-width: 1180px;
  background-color: #e3e8ed;
  border-radius: 1.25rem;
  box-shadow: 0 25px 35px -5px rgba(0, 0, 0, 0.12), 0 10px 15px -5px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .card {
    flex-direction: row;
    min-height: 640px;
  }
}

.banner {
  width: 100%;
  background-color: var(--blue);
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}

@media (min-width: 768px) {
  .banner { width: 48%; }
}

.banner h2 {
  font-size: 1.85rem;
  font-weight: 700;
}

.logo-image {
  width: 260px;
  height: auto;
  object-fit: contain;
  margin: 1.5rem 0;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.logo-image:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45));
}

.brand-title {
  font-size: 2.1rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.subtitle {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #e0e0e0;
  max-width: 320px;
}

.form-section {
  width: 100%;
  padding: 4rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .form-section { width: 52%; }
}

.form-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
  margin-bottom: 2.25rem;
}

.input-group { margin-bottom: 1.5rem; }

.input-group label {
  display: block;
  font-size: 0.95rem;
  color: #7f8c8d;
  margin-bottom: 0.5rem;
}

.input-group input {
  width: 100%;
  padding: 0.95rem 1.25rem;
  border-radius: 0.6rem;
  border: 1px solid transparent;
  background-color: #dbe2e9;
  color: #333333;
  font-size: 1rem;
  outline: none;
  transition: all 0.2s ease-in-out;
}

.input-group input:focus {
  background-color: #ffffff;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.15);
}

.submit-btn {
  width: 100%;
  margin-top: 1rem;
  padding: 0.95rem;
  background-color: var(--blue);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.05rem;
  border: none;
  border-radius: 0.6rem;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(21, 101, 192, 0.2);
  transition: background-color 0.2s ease;
}

.submit-btn:hover { background-color: var(--blue-dark); }

.forgot-link {
  margin-top: 3rem;
  text-align: center;
}

.forgot-link a {
  font-size: 0.95rem;
  color: #2980b9;
  text-decoration: none;
}

/* ================= DASHBOARD STYLES ================= */
.dashboard-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--page-bg);
}

/* ---- Top nav ---- */
.top-nav {
  height: 75px;
  background-color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.75rem 0 1.25rem;
  color: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 2;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.nav-logo {
  width: 48px;
  height: auto;
}

.nav-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.nav-user-area {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-page-label {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

.nav-divider {
  width: 1px;
  height: 32px;
  background-color: rgba(255, 255, 255, 0.7);
}

.user-avatar-badge {
  width: 48px;
  height: 48px;
  background-color: #e8e8e8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.user-avatar-badge img {
  width: 100%;
  height: 100%;
}

/* ---- Layout ---- */
.app-layout {
  display: flex;
  flex: 1;
}

/* ---- Sidebar ---- */
.sidebar {
  width: 233px;
  flex-shrink: 0;
  background-color: var(--blue);
  padding: 1.75rem 0;
  border-top: 8px solid #0f50a0;
}

.sidebar-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.75rem;
  color: #ffffff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.2s ease;
}

.sidebar-item .icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.sidebar-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-item.active {
  background-color: rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.85);
}

.logout-link {
  margin-top: 1rem;
  opacity: 0.85;
}

/* ---- Main ---- */
.dashboard-main {
  flex: 1;
  min-width: 0;
  padding: 1.75rem 2.25rem 2rem 2.25rem;
}

.dashboard-panel {
  background-color: var(--panel-gray);
  border-radius: 0.9rem;
  padding: 1.25rem 1.25rem 1.5rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.dash-card {
  background-color: var(--card-blue);
  border-radius: 0.65rem;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  border: none;
}

.panel-grid {
  display: grid;
  grid-template-columns: 186px 1fr 200px;
  grid-template-rows: auto 1fr;
  gap: 1.25rem;
}

/* Student card */
.student-card {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
}

.student-avatar-container {
  width: 124px;
  height: 124px;
  background-color: #e8e8e8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.student-avatar {
  width: 92px;
  height: 92px;
}

.student-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: #222;
  line-height: 1.3;
}

/* Info card */
.info-card {
  grid-column: 2 / 4;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-header-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #5da0f0;
}

.info-header-row .col-heading:nth-child(n+2) { text-align: center; }

.info-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  align-items: center;
  font-size: 0.72rem;
  color: var(--blue);
  padding: 0.35rem 0;
}

.course-text { padding-right: 1rem; line-height: 1.35; }
.attendance-date,
.sessions-count { text-align: center; }

/* Courses list */
.courses-list-card {
  grid-column: 1 / 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.card-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
}

.course-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.course-pill {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.4rem 0.5rem;
  border-radius: 0.2rem;
  cursor: pointer;
  outline: none;
  transition: background-color 0.15s ease;
}

.course-pill:hover,
.course-pill:focus-visible { background-color: rgba(130, 188, 255, 0.55); }

.course-pill.selected { background-color: var(--card-blue-selected); }

/* Action card */
.action-card {
  grid-column: 3;
  grid-row: 2;
  background-color: var(--blue);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-height: 200px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.action-card:hover { background-color: var(--blue-dark); }
.action-card:active { transform: scale(0.99); }

.folder-svg {
  width: 44px;
  height: 44px;
  stroke: #ffffff;
}

.action-title {
  font-size: 0.85rem;
  font-weight: 500;
}

/* Calendar */
.calendar-card {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 0.9rem;
  align-self: stretch;
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid #5da0f0;
}

.calendar-month-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
}

.cal-nav {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--blue);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.cal-nav:hover,
.cal-nav:focus-visible {
  background-color: rgba(21, 101, 192, 0.15);
  outline: none;
}

.cal-selected {
  margin-top: 0.6rem;
  font-size: 0.68rem;
  text-align: center;
  color: var(--text-dark);
  min-height: 1.8em;
}

.cal-today-btn {
  margin-top: 0.5rem;
  align-self: center;
  padding: 0.3rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--blue);
  background: transparent;
  border: 1px solid var(--blue);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cal-today-btn:hover,
.cal-today-btn:focus-visible {
  background-color: var(--blue);
  color: #ffffff;
  outline: none;
}

.calendar-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.15rem 0.05rem;
  text-align: center;
  align-items: center;
  justify-items: center;
}

.cal-header {
  font-size: 0.62rem;
  font-weight: 700;
  color: #4a5a6a;
}

.cal-day {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--blue);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cal-day:hover,
.cal-day:focus-visible {
  background-color: rgba(21, 101, 192, 0.2);
  outline: none;
}

.cal-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--blue);
  font-weight: 700;
}

.cal-day.active-date {
  background-color: var(--blue);
  color: #ffffff;
  font-weight: 700;
}

/* ================= PAGES ================= */
.page { width: 100%; }

.placeholder-panel {
  background-color: var(--panel-gray);
  border-radius: 0.9rem;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--text-dark);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.placeholder-panel h2 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.placeholder-panel p { color: #7f8c8d; }

/* ================= STUDENT PROFILE ================= */
.profile-panel {
  max-width: 820px;
  margin: 0.5rem auto 0;
  background-color: var(--blue);
  color: #ffffff;
  border-radius: 0.65rem;
  padding: 1.75rem 2rem 2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.profile-top {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  margin-bottom: 1.75rem;
}

.profile-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.profile-tab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.2rem 0.3rem;
  background: none;
  border: none;
  border-radius: 0.4rem;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.profile-tab:hover .tab-chip,
.profile-tab:focus-visible .tab-chip {
  background-color: #ffffff;
}

.profile-tab:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.tab-chip {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--card-blue);
  color: var(--blue);
  border-radius: 0.4rem;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.2s ease, background-color 0.15s ease;
}

.profile-tab.active .tab-chip { transform: rotate(90deg); }

.profile-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.profile-avatar {
  width: 86px;
  height: 86px;
  background-color: #e8e8e8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 6px;
}

.profile-avatar img[data-custom] { padding: 0; }

.profile-name {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ---- Form pieces ---- */
.tab-panel { margin-top: 0.5rem; }

.field { display: flex; flex-direction: column; gap: 0.3rem; }

.field label,
.field-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: #ffffff;
}

.field input,
.field select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background-color: #dcd9f3;
  color: #2f2f4f;
  border: 2px solid transparent;
  border-radius: 0.4rem;
  font-size: 0.78rem;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.field input[readonly] { background-color: #c9c6e3; cursor: default; }
.field input:disabled { opacity: 0.55; cursor: not-allowed; }
.field input::placeholder { color: #8a87ad; }

.field input:focus,
.field select:focus {
  background-color: #ffffff;
  border-color: var(--card-blue);
}

.field input[aria-invalid="true"] { border-color: #ff8a80; background-color: #fff3f2; }

.field-error {
  min-height: 0;
  color: #ffd2cf;
  font-size: 0.68rem;
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  cursor: pointer;
  width: fit-content;
}

.check-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--card-blue);
  cursor: pointer;
}

.form-actions { display: flex; gap: 0.75rem; }

.btn-outline {
  padding: 0.5rem 1.15rem;
  background: transparent;
  color: #ffffff;
  border: 1.5px solid #ffffff;
  border-radius: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: #ffffff;
  color: var(--blue);
  outline: none;
}

/* General tab layout */
.general-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem 1.5rem;
  align-content: start;
}

.general-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Picture tab layout */
.picture-grid {
  display: grid;
  grid-template-columns: 170px minmax(0, 260px) auto;
  gap: 1.5rem 2rem;
  align-content: start;
}

.picture-current,
.picture-new { display: flex; flex-direction: column; gap: 0.6rem; }

.current-picture-frame {
  width: 104px;
  height: 104px;
  background-color: #e8e8e8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.current-picture-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 8px;
}

.current-picture-frame img[data-custom] { padding: 0; }

.current-picture-frame.marked-delete { opacity: 0.35; filter: grayscale(1); }

.dropzone {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  border: 1.5px dashed rgba(255, 255, 255, 0.85);
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dropzone:hover,
.dropzone:focus-visible,
.dropzone.dragover {
  background-color: rgba(255, 255, 255, 0.14);
  outline: none;
}

.dropzone.dragover { border-style: solid; }

.dz-empty { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.dz-icon { width: 38px; height: 38px; }
.dz-empty p { font-size: 0.68rem; }
.dz-empty small { font-size: 0.62rem; opacity: 0.8; }

.dz-preview { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.dz-preview img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; background: #e8e8e8; }
.dz-preview p { font-size: 0.65rem; word-break: break-all; }

.picture-actions { align-self: start; margin-top: 1.25rem; }

/* Contact tab layout */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 1.1rem 2rem;
  align-content: start;
}

.contact-actions { grid-column: 1 / -1; margin-top: 0.75rem; }

/* ================= TOAST ================= */
.toast {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  max-width: 320px;
  padding: 0.75rem 1.1rem;
  background-color: #1b5e20;
  color: #ffffff;
  border-radius: 0.55rem;
  font-size: 0.85rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background-color: #b71c1c; }
.toast.info { background-color: #37474f; }

/* ================= ACADEMIC RECORDS ================= */
.rec-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background-color: var(--panel-gray);
  border-radius: 0.9rem;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.rec-top {
  display: grid;
  grid-template-columns: minmax(200px, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.rec-student {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1rem 0.8rem;
  text-align: center;
}

.rec-meta { font-size: 0.7rem; color: #4a5a6a; }

.rec-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 1rem 1.2rem;
}

.rec-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; color: #2c3e50; }
.rec-value { font-size: 2rem; font-weight: 800; line-height: 1.1; color: #17356b; }
.rec-sub { font-size: 0.7rem; color: #4a5a6a; }

.rec-stat.is-blue { background-color: var(--blue); border: none; }
.rec-stat.is-blue .rec-label,
.rec-stat.is-blue .rec-value,
.rec-stat.is-blue .rec-sub { color: #ffffff; }

.rec-bottom {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 1rem;
  align-items: stretch;
}

.rec-grades { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.1rem 1.3rem; }
.rec-grades .dm-table-wrap { flex: 1; }

.rec-table th.num,
.rec-table td.num { text-align: center; }

.rec-table td:first-child { font-weight: 700; color: var(--blue); white-space: nowrap; }

.rec-table tfoot td {
  background-color: #eef3f9;
  border-bottom: none;
  color: #17356b;
  font-weight: 700;
}

.rec-side { display: flex; flex-direction: column; gap: 1rem; }

.rec-request {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 140px;
  padding: 1.4rem 1rem;
  background-color: var(--blue);
  border: none;
  color: #ffffff;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.rec-request:hover { background-color: var(--blue-dark); }
.rec-request:focus-visible { outline: 3px solid #17356b; outline-offset: 2px; }
.rec-request svg { width: 34px; height: 34px; }
.rec-request strong { font-size: 0.85rem; }
.rec-request small { font-size: 0.7rem; opacity: 0.9; }

.rec-scale { flex: 1; display: flex; flex-direction: column; gap: 0.8rem; padding: 1.1rem 1.2rem; }
.rec-scale-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }

.rec-scale-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.8rem;
  background-color: #e3ecf7;
  border-radius: 0.45rem;
  color: #2c3e50;
  font-size: 0.78rem;
}

.rec-scale-list span { color: #6b7a8c; }

@media (max-width: 1100px) {
  .rec-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .rec-top { grid-template-columns: 1fr; }
}

/* ================= ATTENDANCE ================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.att-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--panel-gray);
  border-radius: 0.9rem;
  padding: 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.att-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.25rem 1.4rem;
}

.att-table-wrap { flex: 1; overflow-x: auto; }

.att-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.78rem;
  color: var(--blue);
}

.att-table th {
  padding: 0.3rem 0.75rem 0.75rem;
  border-bottom: 1px solid #5da0f0;
  color: #2c3e50;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: left;
  vertical-align: bottom;
}

.att-table th:not(:first-child),
.att-table td:not(:first-child) { text-align: center; }

.att-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.35rem;
  background: none;
  border: none;
  border-radius: 0.3rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.att-sort:hover { background-color: rgba(21, 101, 192, 0.12); }
.att-sort:focus-visible { outline: 3px solid rgba(21, 101, 192, 0.5); outline-offset: 1px; }
.att-arrow { min-width: 0.7rem; font-size: 0.6rem; opacity: 0.75; }

.att-table td {
  padding: 0.9rem 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(21, 101, 192, 0.18);
}

.att-row { cursor: pointer; transition: background-color 0.15s ease; }
.att-row:hover { background-color: rgba(255, 255, 255, 0.45); }
.att-row.open { background-color: rgba(255, 255, 255, 0.55); }

.att-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.att-toggle:focus-visible { outline: 3px solid rgba(21, 101, 192, 0.5); outline-offset: 2px; border-radius: 0.3rem; }

.att-chev {
  display: inline-block;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.att-row.open .att-chev { transform: rotate(90deg); }

.att-pct { font-weight: 700; }
.att-pct.warn { color: #8a6100; }
.att-pct.risk { color: #a52a22; }

.att-bar {
  display: block;
  width: 90px;
  height: 5px;
  margin: 0.35rem auto 0;
  background-color: rgba(21, 101, 192, 0.2);
  border-radius: 999px;
  overflow: hidden;
}

.att-bar span { display: block; height: 100%; background-color: var(--blue); }
.att-bar.warn span { background-color: #e6a100; }
.att-bar.risk span { background-color: #c62828; }

.att-detail td {
  padding: 0.8rem 1rem 1.1rem 2.3rem;
  background-color: rgba(255, 255, 255, 0.4);
  text-align: left !important;
}

.att-sessions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}

.att-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background-color: #f5f8fc;
  border-radius: 0.4rem;
  color: #2c3e50;
  font-size: 0.72rem;
}

.att-summary { margin-top: 0.6rem; color: #4a5a6a; font-size: 0.72rem; }

.att-table tfoot td {
  padding-top: 1rem;
  border-bottom: none;
  color: #17356b;
  font-weight: 700;
}

/* ================= ADMISSIONS & ENROLLMENT ================= */
.adm-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--panel-gray);
  border-radius: 0.9rem;
  padding: 1.25rem 1.5rem 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.adm-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.adm-tab {
  padding: 0.4rem 1rem;
  background-color: #d4e4f7;
  color: #2c3e50;
  border: none;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.adm-tab:hover { background-color: #c2d9f3; }
.adm-tab:focus-visible { outline: 3px solid rgba(21, 101, 192, 0.5); outline-offset: 2px; }
.adm-tab.active { background-color: var(--blue); color: #ffffff; }

.adm-view { flex: 1; display: flex; flex-direction: column; gap: 1rem; }

.adm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.adm-head h2 { font-size: 1.55rem; font-weight: 800; color: #17356b; }
.adm-head p { font-size: 0.82rem; color: #6b7a8c; margin-top: 0.2rem; }

.adm-sec-title { font-size: 0.88rem; font-weight: 700; color: #17356b; }
.adm-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; color: #6b7a8c; }

/* Overview: top row */
.adm-top {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 200px;
  gap: 1rem;
}

.adm-applicant {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 1.1rem 0.9rem;
}

.adm-avatar {
  width: 68px;
  height: 68px;
  background-color: #e8e8e8;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.adm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-avatar img:not([data-custom]) { padding: 12px; }

.adm-applicant-name { font-size: 0.88rem; font-weight: 700; color: #17356b; }
.adm-applicant-id { font-size: 0.68rem; color: #6b7a8c; }
.adm-applicant-id span { font-weight: 600; color: #2c3e50; }

.adm-current {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.1rem 1.3rem;
}

.adm-cur-title { font-size: 1.15rem; font-weight: 800; color: #17356b; }
.adm-cur-meta { font-size: 0.76rem; color: #4a5a6a; }
.adm-cur-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }

.adm-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  font: inherit;
  color: #ffffff;
  background-color: var(--blue);
  border: none;
  cursor: pointer;
}

.adm-cta:hover { background-color: var(--blue-dark); }
.adm-cta:focus-visible { outline: 3px solid #17356b; outline-offset: 2px; }
.adm-cta svg { width: 36px; height: 36px; }
.adm-cta strong { font-size: 0.88rem; }
.adm-cta small { font-size: 0.68rem; opacity: 0.85; }

/* Overview: progress stepper */
.adm-progress { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.1rem 1.3rem; }

.adm-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

.adm-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-right: 0.5rem;
}

.adm-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 32px;
  right: 6px;
  height: 2px;
  background-color: #b8c7d8;
}

.adm-step.is-done:not(:last-child)::after { background-color: #2e7d32; }

.adm-step-dot {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 2px solid #9fb2c8;
  border-radius: 50%;
  color: #6b7a8c;
  font-size: 0.68rem;
  font-weight: 700;
}

.is-done .adm-step-dot { background-color: #2e7d32; border-color: #2e7d32; color: #ffffff; }
.is-current .adm-step-dot { border-color: var(--blue); color: var(--blue); }
.is-fail .adm-step-dot { background-color: #c62828; border-color: #c62828; color: #ffffff; }
.is-skip .adm-step-dot { background-color: #e3e8ed; border-style: dashed; }

.adm-step-label { font-size: 0.76rem; font-weight: 700; color: #2c3e50; }
.adm-step-sub { font-size: 0.66rem; color: #6b7a8c; }
.is-current .adm-step-sub { color: var(--blue); font-weight: 600; }
.is-skip .adm-step-label { color: #8a97a8; }

/* Overview: table + legend */
.adm-bottom {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1rem;
}

.adm-apps { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.1rem 1.3rem; }
.adm-table tbody tr { cursor: pointer; transition: background-color 0.15s ease; }
.adm-table tbody tr:hover { background-color: #eaf1fa; }
.adm-table tbody tr.selected { background-color: #dbe9fb; }

.adm-link {
  padding: 0;
  background: none;
  border: none;
  color: var(--blue);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.adm-link:focus-visible { outline: 3px solid rgba(21, 101, 192, 0.5); outline-offset: 2px; }

.adm-legend { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.1rem 1.2rem; }
.adm-legend-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }

.adm-legend-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.55rem 0.7rem;
  background-color: #e3ecf7;
  border-radius: 0.5rem;
  font-size: 0.72rem;
  color: #4a5a6a;
}

/* New application */
.adm-new-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1rem;
  align-content: start;
}

.adm-form, .adm-summary { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.25rem 1.4rem; }

.adm-applicant-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background-color: #e3ecf7;
  border-radius: 0.5rem;
}

.adm-mini-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background-color: #e8e8e8;
  border-radius: 50%;
  overflow: hidden;
}

.adm-mini-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-mini-avatar img:not([data-custom]) { padding: 6px; }

.adm-applicant-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-applicant-text strong { font-size: 0.8rem; color: #17356b; }
.adm-applicant-text small { font-size: 0.68rem; color: #6b7a8c; word-break: break-all; }
.adm-filled { font-size: 0.66rem; color: #6b7a8c; white-space: nowrap; }

.adm-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.adm-type { position: relative; display: block; cursor: pointer; }
.adm-type input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }

.adm-type-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  height: 100%;
  padding: 0.7rem 0.8rem;
  background-color: #eef3f9;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.adm-type-body strong { font-size: 0.8rem; color: #17356b; }
.adm-type-body small { font-size: 0.68rem; color: #6b7a8c; }
.adm-type:hover .adm-type-body { background-color: #ffffff; }
.adm-type input:checked + .adm-type-body { background-color: #ffffff; border-color: var(--blue); }
.adm-type input:focus-visible + .adm-type-body { outline: 3px solid rgba(21, 101, 192, 0.5); outline-offset: 2px; }

.adm-confirm { font-size: 0.76rem; color: #2c3e50; margin-top: 0.2rem; align-items: flex-start; }
.adm-confirm input { margin-top: 0.1rem; }

.adm-kv div { grid-template-columns: 7rem minmax(0, 1fr); }

/* Application status */
.adm-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
}

.adm-status-id { font-size: 1.5rem; font-weight: 800; color: #17356b; }
.adm-status-side { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; }

.adm-status-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1rem;
  align-content: start;
}

.adm-stack { display: flex; flex-direction: column; gap: 1rem; }
.adm-card-pad { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.15rem 1.35rem; }

.adm-timeline { list-style: none; display: flex; flex-direction: column; }

.adm-tl {
  position: relative;
  display: flex;
  gap: 0.8rem;
  padding-bottom: 1.1rem;
}

.adm-tl:last-child { padding-bottom: 0; }

.adm-tl:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 28px;
  bottom: 2px;
  width: 2px;
  background-color: #b8c7d8;
}

.adm-tl.is-done:not(:last-child)::before { background-color: #2e7d32; }

.adm-tl-text strong { display: block; font-size: 0.8rem; color: #2c3e50; }
.adm-tl-text small { display: block; font-size: 0.7rem; color: #6b7a8c; margin-top: 0.1rem; }
.adm-tl.is-current .adm-tl-text small { color: var(--blue); font-weight: 600; }
.adm-tl.is-skip .adm-tl-text strong { color: #8a97a8; }

.adm-remarks {
  padding: 0.8rem 1rem;
  background-color: #eef3f9;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #2c3e50;
}

.adm-posted { font-size: 0.68rem; color: #6b7a8c; }

.adm-withdraw {
  align-self: flex-start;
  padding: 0.2rem 0;
  background: none;
  border: none;
  color: #1565c0;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.adm-withdraw:hover { color: #c62828; }
.adm-withdraw:focus-visible { outline: 3px solid rgba(21, 101, 192, 0.5); outline-offset: 2px; }

.adm-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.5rem;
}

.adm-empty h3 { font-size: 1rem; color: #17356b; }
.adm-empty p { font-size: 0.82rem; color: #4a5a6a; }

/* Enrollment */
.en-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 1rem;
  align-content: start;
}

.en-main { display: flex; flex-direction: column; gap: 0.8rem; }
.en-side { display: flex; flex-direction: column; gap: 1rem; }

.en-banner {
  padding: 0.8rem 1rem;
  background-color: #dff3e4;
  border: 1px solid #a8d5b3;
  border-radius: 0.6rem;
  color: #1b6e34;
  font-size: 0.82rem;
  font-weight: 600;
}

.en-step {
  padding: 0.8rem 1rem;
  background-color: #eef3f9;
  border: 1px solid #cfd8e3;
  border-radius: 0.6rem;
}

.en-step.current { background-color: #f7faff; border: 2px solid var(--blue); }
.en-step.locked { opacity: 0.65; }

.en-step-head { display: flex; align-items: center; gap: 0.75rem; }

.en-step-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #dbe6f4;
  border-radius: 50%;
  color: #6b7a8c;
  font-size: 0.72rem;
  font-weight: 700;
}

.en-step.done .en-step-icon { background-color: #2e7d32; color: #ffffff; }
.en-step.current .en-step-icon { background-color: var(--blue); color: #ffffff; }

.en-step-text { flex: 1; min-width: 0; }
.en-step-text h3 { font-size: 0.85rem; color: #17356b; }
.en-step-text p { font-size: 0.7rem; color: #6b7a8c; }

.en-step-tag {
  padding: 0.15rem 0.6rem;
  background-color: #e3e9f1;
  border-radius: 999px;
  color: #6b7a8c;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.en-step.done .en-step-tag { background-color: #dff3e4; color: #1b6e34; }
.en-step.current .en-step-tag { background-color: #dbe9fb; color: var(--blue); }

.en-step-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #dde5ef;
}

.en-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.en-form .full { grid-column: 1 / -1; }

.en-note { font-size: 0.78rem; color: #4a5a6a; }

.en-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: #2c3e50;
}

.en-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.6rem; background-color: #e3ecf7; border-radius: 0.4rem; }

.en-subjects { display: flex; flex-direction: column; gap: 0.4rem; }

.en-subject {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  background-color: #e3ecf7;
  border-radius: 0.4rem;
  font-size: 0.76rem;
  color: #2c3e50;
  cursor: pointer;
}

.en-subject input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
.en-subject em { margin-left: auto; font-style: normal; color: #6b7a8c; white-space: nowrap; }

.en-units { font-size: 0.76rem; font-weight: 600; color: #2c3e50; }
.en-units.bad { color: #c62828; }

.en-record { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.1rem 1.2rem; }

.en-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.2rem;
  background-color: var(--blue);
  color: #ffffff;
}

.en-progress strong { font-size: 0.8rem; }
.en-progress small { font-size: 0.7rem; opacity: 0.9; }

.en-bar { height: 8px; background-color: rgba(255, 255, 255, 0.3); border-radius: 999px; overflow: hidden; }
.en-bar span { display: block; height: 100%; background-color: #ffffff; border-radius: 999px; transition: width 0.3s ease; }

/* Shared bits for the admissions pages */
.dm-status.muted { background-color: #e3e8ed; color: #566273; }
.btn-danger { background-color: #c62828; }
.btn-danger:hover, .btn-danger:focus-visible { background-color: #8e1b1b; }

@media (max-width: 1100px) {
  .adm-top { grid-template-columns: 1fr; }
  .adm-bottom,
  .adm-new-layout,
  .adm-status-layout,
  .en-layout { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .adm-steps { grid-template-columns: 1fr; gap: 0.9rem; }
  .adm-step:not(:last-child)::after { display: none; }
  .adm-step { flex-direction: row; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
  .adm-types { grid-template-columns: 1fr; }
  .en-form { grid-template-columns: 1fr; }
}

/* ================= DOCUMENT MANAGEMENT ================= */
.dm-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background-color: var(--panel-gray);
  border-radius: 0.9rem;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.dm-head h2 { font-size: 1.7rem; font-weight: 800; color: #17356b; }
.dm-head p { font-size: 0.85rem; color: #6b7a8c; margin-top: 0.2rem; }

.dm-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.dm-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.3rem;
  text-align: left;
  font: inherit;
  color: inherit;
}

.dm-stat-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #2c3e50; }
.dm-stat-value { font-size: 2rem; font-weight: 800; line-height: 1.1; color: #17356b; }
.dm-stat-sub { font-size: 0.72rem; color: #4a5a6a; }

.dm-stat.is-action {
  background-color: var(--blue);
  border: none;
  cursor: pointer;
}

.dm-stat.is-action:hover { background-color: var(--blue-dark); }
.dm-stat.is-action:focus-visible { outline: 3px solid #17356b; outline-offset: 2px; }
.dm-stat.is-action .dm-stat-label,
.dm-stat.is-action .dm-stat-value,
.dm-stat.is-action .dm-stat-sub { color: #ffffff; }

.dm-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 1.25rem;
  align-items: stretch;
}

/* Cards with interactive content stay still on hover */
.dash-card.dm-card:hover {
  transform: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.dm-requirements {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
}

.dm-req-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dm-card-title { font-size: 0.95rem; font-weight: 700; color: #17356b; }

.dm-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.dm-chip {
  padding: 0.35rem 0.85rem;
  background-color: #f2f6fb;
  color: #2c3e50;
  border: none;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dm-chip:hover { background-color: #ffffff; }
.dm-chip:focus-visible { outline: 3px solid rgba(21, 101, 192, 0.5); outline-offset: 2px; }
.dm-chip.active { background-color: var(--blue); color: #ffffff; }

.dm-table-wrap {
  flex: 1;
  overflow-x: auto;
  background-color: #f7f9fc;
  border-radius: 0.5rem;
}

.dm-table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 0.78rem; }

.dm-table th {
  padding: 0.6rem 0.85rem;
  background-color: var(--blue);
  color: #ffffff;
  text-align: left;
  font-size: 0.74rem;
}

.dm-table td {
  padding: 0.75rem 0.85rem;
  color: #2c3e50;
  border-bottom: 1px solid #dde5ef;
  vertical-align: middle;
}

.dm-table .dm-actions-col { text-align: right; }
.dm-doc-name { font-weight: 600; }
.dm-note { margin-top: 0.2rem; font-size: 0.68rem; color: #c0392b; }

.dm-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.dm-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}

.dm-status.ok { background-color: #dff3e4; color: #1b6e34; }
.dm-status.info { background-color: #dbe9fb; color: #1565c0; }
.dm-status.risk { background-color: #fde0de; color: #a52a22; }
.dm-status.warn { background-color: #fff1cc; color: #8a6100; }

.dm-row-flash { animation: dmRowFlash 1.6s ease; }

@keyframes dmRowFlash {
  0%, 50% { background-color: #cfe3ff; }
  100% { background-color: transparent; }
}

.btn-sm { padding: 0.4rem 1rem; font-size: 0.74rem; border-radius: 0.45rem; }

.dm-empty { padding: 2rem 1rem; text-align: center; font-size: 0.82rem; color: #6b7a8c; }
.dm-foot { font-size: 0.7rem; color: #6b7a8c; }

.dm-side { display: flex; flex-direction: column; gap: 1.25rem; }

.dm-upload,
.dm-request {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
}

.dm-request { flex: 1; }

.dm-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 1rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.55);
  border: 2px dashed var(--blue);
  border-radius: 0.6rem;
  transition: background-color 0.15s ease;
}

.dm-dropzone.dragover { background-color: #ffffff; border-style: solid; }

.dm-dz-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.dm-dz-empty p { font-size: 0.78rem; color: #2c3e50; }
.dm-dz-icon { width: 30px; height: 30px; color: var(--blue); }

.dm-staged {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}

.dm-staged-name { font-size: 0.8rem; font-weight: 700; color: #17356b; word-break: break-all; }
.dm-staged small { font-size: 0.68rem; color: #6b7a8c; }
.dm-staged label { margin-top: 0.4rem; font-size: 0.72rem; font-weight: 700; color: #2c3e50; }
.dm-staged-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

.dm-select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  background-color: #e6ecf4;
  color: #2c3e50;
  border: 2px solid transparent;
  border-radius: 0.4rem;
  font-size: 0.74rem;
  outline: none;
}

.dm-select:focus { background-color: #ffffff; border-color: var(--blue); }

.dm-request-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }

.dm-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background-color: #e3ecf7;
  border-radius: 0.5rem;
}

.dm-request-row strong { display: block; font-size: 0.78rem; color: #2c3e50; }
.dm-request-row small { display: block; margin-top: 0.1rem; font-size: 0.66rem; color: #4a5a6a; }
.btn-light.requested { background-color: transparent; border-color: var(--blue); color: var(--blue); }

/* Dialog */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(15, 30, 55, 0.55);
  z-index: 60;
}

.modal-card {
  width: min(520px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  background-color: #17356b;
  color: #ffffff;
}

.modal-head h3 { font-size: 0.98rem; }

.modal-close {
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover,
.modal-close:focus-visible { background-color: rgba(255, 255, 255, 0.18); outline: none; }

.modal-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  overflow-y: auto;
}

.dm-modal-list { width: 100%; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; }
.dm-modal-list div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.5rem; }
.dm-modal-list dt { color: #6b7a8c; }
.dm-modal-list dd { color: #2c3e50; font-weight: 600; word-break: break-word; }
.dm-modal-note { font-size: 0.75rem; color: #6b7a8c; }
.dm-modal-reject { font-size: 0.78rem; color: #a52a22; }

.dm-preview { width: 100%; }
.dm-preview img { display: block; max-width: 100%; max-height: 300px; margin: 0 auto; border-radius: 0.4rem; }
.dm-preview iframe { width: 100%; height: 320px; border: 1px solid #dde5ef; border-radius: 0.4rem; }

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.8rem 1.2rem;
  border-top: 1px solid #e3e8ed;
}

.modal-foot a.btn-light { text-decoration: none; display: inline-flex; align-items: center; }

@media (max-width: 1000px) {
  .dm-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .dm-stats { grid-template-columns: 1fr; }
}

/* ================= ACCOUNT SETTINGS ================= */
.set-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background-color: var(--panel-gray);
  border-radius: 0.9rem;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.set-head h2 { font-size: 1.7rem; font-weight: 800; color: #17356b; }
.set-head p { font-size: 0.85rem; color: #6b7a8c; margin-top: 0.2rem; }

.set-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.25rem;
  align-items: stretch;
}

.set-main,
.set-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.set-card,
.set-identity,
.set-notifs {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.25rem 1.4rem;
}

.set-card { flex: 1; }
.set-notifs { flex: 1; }

/* Forms shouldn't move while someone is typing in them */
form.dash-card.set-card:hover {
  transform: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.set-card-title { font-size: 0.95rem; font-weight: 700; color: #17356b; }

.set-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.set-field { display: flex; flex-direction: column; gap: 0.3rem; }

.set-field label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2c3e50;
}

.set-field input,
.set-field textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background-color: #e6ecf4;
  color: #2c3e50;
  border: 2px solid transparent;
  border-radius: 0.4rem;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.set-field textarea { min-height: 78px; resize: vertical; }
.set-field input::placeholder,
.set-field textarea::placeholder { color: #8a97a8; }

.set-field input:focus,
.set-field textarea:focus {
  background-color: #ffffff;
  border-color: var(--blue);
}

.set-field input[aria-invalid="true"] {
  border-color: #d9534f;
  background-color: #fff5f4;
}

.set-error { color: #b3261e; font-size: 0.7rem; }
.set-error:empty { display: none; }
.set-hint { font-size: 0.7rem; color: #4a5a6a; }

.set-actions { display: flex; gap: 0.75rem; margin-top: 0.2rem; }

.btn-light {
  padding: 0.55rem 1.4rem;
  background-color: #eef2f7;
  color: #2c3e50;
  border: 1px solid #cdd6e2;
  border-radius: 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-light:hover,
.btn-light:focus-visible { background-color: #ffffff; outline: none; }

/* Password helpers */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 3.6rem; }

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  padding: 0.2rem 0.4rem;
  background: none;
  border: none;
  border-radius: 0.3rem;
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

.pw-toggle:hover,
.pw-toggle:focus-visible { background-color: rgba(21, 101, 192, 0.12); outline: none; }

.pw-meter-row { display: flex; align-items: center; gap: 0.6rem; min-height: 1rem; }
.pw-meter-row small { font-size: 0.7rem; font-weight: 700; color: #4a5a6a; min-width: 3.2rem; }

.pw-meter {
  flex: 1;
  height: 6px;
  background-color: #d3deeb;
  border-radius: 999px;
  overflow: hidden;
}

.pw-meter span {
  display: block;
  height: 100%;
  width: 0;
  background-color: #d9534f;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.pw-meter[data-level="1"] span { width: 25%; background-color: #d9534f; }
.pw-meter[data-level="2"] span { width: 50%; background-color: #f0a030; }
.pw-meter[data-level="3"] span { width: 75%; background-color: #7cb342; }
.pw-meter[data-level="4"] span { width: 100%; background-color: #2e7d32; }

/* Identity card */
.set-identity { align-items: center; text-align: center; }

.set-avatar {
  width: 78px;
  height: 78px;
  background-color: #e8e8e8;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.set-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set-avatar img:not([data-custom]) { padding: 14px; }

.set-name { font-size: 1rem; font-weight: 700; color: #17356b; }

.set-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  background-color: #e3ecf7;
  border-radius: 0.5rem;
  text-align: left;
}

.set-info div {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 0.5rem;
  font-size: 0.72rem;
}

.set-info dt { color: #6b7a8c; }
.set-info dd { color: #2c3e50; font-weight: 600; text-align: right; word-break: break-word; }
.set-note { font-size: 0.68rem; color: #6b7a8c; }

/* Notifications */
.notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background-color: #e3ecf7;
  border-radius: 0.5rem;
}

.notif-text strong { display: block; font-size: 0.78rem; color: #2c3e50; }
.notif-text small { display: block; font-size: 0.66rem; color: #6b7a8c; line-height: 1.3; }

.switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  background-color: #8e9bab;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.switch:focus-visible { outline: 3px solid rgba(21, 101, 192, 0.5); outline-offset: 2px; }
.switch[aria-checked="true"] { background-color: var(--blue); }

.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.switch[aria-checked="true"] .switch-knob { transform: translateX(18px); }

@media (max-width: 1000px) {
  .set-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .set-grid-2 { grid-template-columns: 1fr; }
}

/* ================= REPORTS & ANALYTICS ================= */
.rep-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--panel-gray);
  border-radius: 0.9rem;
  padding: 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#repOverview,
#repDocuments {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.rep-banner {
  background: linear-gradient(135deg, #c3dcf8, #a9ccf2);
  padding: 1.6rem 1.8rem;
}

.rep-banner h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: #1f3550;
  margin-bottom: 0.35rem;
}

.rep-banner p {
  font-size: 0.95rem;
  color: var(--blue);
  font-weight: 500;
}

.rep-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.rep-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  font: inherit;
  color: inherit;
  background-color: #f0f4f8;
  border: 1px solid #cfd8e3;
  cursor: pointer;
  padding: 1.1rem 1.3rem;
}

.rep-stat:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.rep-stat-icon {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--blue);
  color: #ffffff;
  border-radius: 50%;
}

.rep-stat-icon svg { width: 30px; height: 30px; }

.rep-stat-text { display: flex; flex-direction: column; gap: 0.15rem; }
.rep-stat-label { font-size: 0.95rem; font-weight: 700; color: #2c3e50; }
.rep-stat-value { font-size: 1.7rem; font-weight: 600; color: var(--blue); line-height: 1.1; }

.rep-cards {
  display: grid;
  align-content: start;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.rep-card { display: flex; flex-direction: column; gap: 0.75rem; }

.rep-card-title { font-size: 1rem; font-weight: 700; color: #2c3e50; }

.rep-actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rep-action {
  flex: 1;
  max-height: 120px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 0.8rem;
  text-align: left;
  font: inherit;
  color: var(--blue);
  background-color: #f5f8fc;
  border: 1px solid rgba(21, 101, 192, 0.2);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.rep-action:hover,
.rep-action:focus-visible {
  background-color: #ffffff;
  border-color: var(--blue);
  outline: none;
  transform: translateX(2px);
}

.rep-doc-icon { width: 26px; height: 26px; flex-shrink: 0; }

.rep-action strong { display: block; font-size: 0.82rem; color: #1f3550; }
.rep-action small { display: block; font-size: 0.7rem; line-height: 1.35; margin-top: 0.15rem; }

/* Documents view */
.rep-docs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}


.doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-content: start;
}

.doc-card {
  position: relative;
  background-color: #ffffff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
  scroll-margin-top: 1rem;
}

.doc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  background-color: #17356b;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
}

.doc-bar-title { display: flex; align-items: center; gap: 0.5rem; }
.doc-bar-title svg { width: 16px; height: 16px; flex-shrink: 0; }

.doc-download {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  background-color: #ffffff;
  color: #17356b;
  border: none;
  border-radius: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.doc-download svg { width: 13px; height: 13px; }
.doc-download:hover,
.doc-download:focus-visible { background-color: #dbe8fa; outline: none; }

.doc-flash { animation: docFlash 1.5s ease; }

@keyframes docFlash {
  0%, 60% { outline: 3px solid var(--blue); outline-offset: 3px; }
  100% { outline: 3px solid transparent; outline-offset: 3px; }
}

.doc-loading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.82);
}

.doc-loading .doc-loading-overlay { display: flex; }

.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #cfe0f7;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

/* The "paper" itself */
.doc-paper {
  padding: 1.1rem 1.3rem 1.4rem;
  background-color: #ffffff;
  color: #222222;
  font-size: 0.72rem;
  line-height: 1.45;
}

.paper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.8rem;
  border-bottom: 3px solid var(--blue);
}

.paper-brand { display: flex; align-items: center; gap: 0.55rem; }

.paper-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background-color: var(--blue);
  color: #ffffff;
  border-radius: 50%;
  font-weight: 800;
}

.paper-brand strong { display: block; font-size: 0.95rem; color: #17356b; }
.paper-brand small { display: block; font-size: 0.62rem; color: #667085; }


.paper-title {
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #17356b;
}

.paper-subtitle { text-align: center; color: #555555; margin-bottom: 0.8rem; }

.paper-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 1.2rem;
  margin-bottom: 0.9rem;
}

.paper-info div { display: flex; gap: 0.4rem; }
.paper-info dt { min-width: 5.2rem; font-weight: 700; color: #333333; }
.paper-info dd { color: #111111; }

.paper-table { width: 100%; border-collapse: collapse; margin-bottom: 0.8rem; }

.paper-table th {
  padding: 0.35rem 0.5rem;
  background-color: #17356b;
  color: #ffffff;
  text-align: left;
  font-size: 0.68rem;
}

.paper-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid #d9e0ea; }
.paper-table .num { text-align: center; }
.paper-table tfoot td { font-weight: 700; border-bottom: none; }

.paper-summary {
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.7rem;
  background-color: #eef4fc;
  border-left: 3px solid var(--blue);
}

.paper-stamp { margin-top: 0.5rem; text-align: right; font-size: 0.62rem; color: #667085; }

.paper-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.paper-stat {
  padding: 0.5rem;
  text-align: center;
  background-color: #eef4fc;
  border-radius: 0.4rem;
}

.paper-stat strong { display: block; font-size: 1.05rem; color: #17356b; }
.paper-chart { margin-bottom: 0.8rem; }
.paper-chart svg { width: 100%; height: auto; display: block; }
.paper-section { font-size: 0.78rem; font-weight: 700; color: #17356b; margin-bottom: 0.35rem; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
}

.badge-ok { background-color: #dff3e4; color: #1b6e34; }
.badge-warn { background-color: #fff1cc; color: #8a6100; }
.badge-risk { background-color: #fde0de; color: #a52a22; }

@media (max-width: 1100px) {
  .rep-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .rep-stats,
  .rep-cards { grid-template-columns: 1fr; }
  .paper-info { grid-template-columns: 1fr; }
  .paper-head { flex-direction: column; align-items: flex-start; }
}

/* Printing a single document ("Download PDF") */
@media print {
  body.printing * { visibility: hidden !important; }

  body.printing .print-target,
  body.printing .print-target * { visibility: visible !important; }

  body.printing .print-target {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
  }

  body.printing .dashboard-wrapper {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.printing .doc-card { position: static !important; }

  .paper-table th,
  .paper-head,
  .paper-stat,
  .paper-summary,
  .badge,
  .paper-mark {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---- Fill the viewport: remove empty space below the home panel ---- */
.dashboard-main {
  display: flex;
  flex-direction: column;
}

.page:not(.hidden) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#page-home .dashboard-panel { flex: 1; }

#page-home .panel-grid {
  grid-template-rows: minmax(190px, 1fr) minmax(230px, 1.15fr);
}

/* Let the content inside each card spread out to use the extra height */
.info-card .info-row {
  flex: 1;
  align-items: center;
}

.courses-list-card .course-list {
  flex: 1;
  justify-content: space-evenly;
}

.courses-list-card .course-pill { padding: 0.6rem 0.65rem; }

@media (max-width: 820px) {
  #page-home .panel-grid { grid-template-rows: none; }
}

/* ---- Hover lift for every widget card ---- */
.dash-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.dash-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
}

.action-card:active { transform: translateY(0) scale(0.99); }

@media (prefers-reduced-motion: reduce) {
  .dash-card,
  .dash-card:hover { transition: none; transform: none; }
}

/* ---- Clickable profile widgets ---- */
.user-avatar-badge {
  border: none;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.user-avatar-badge:hover,
.user-avatar-badge:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.65);
  outline: none;
}

.student-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.student-card:hover,
.student-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
  outline: none;
}

.student-card:focus-visible { box-shadow: 0 0 0 3px var(--blue); }

/* ================= MY PROFILE (READ-ONLY VIEW) ================= */
.up-panel {
  background-color: var(--panel-gray);
  border-radius: 0.9rem;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.up-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 1.75rem 1rem;
}

.up-avatar {
  width: 150px;
  height: 150px;
  background-color: #e8e8e8;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 0.9rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.up-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.up-avatar img:not([data-custom]) { padding: 26px; }

.up-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
}

.up-role {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue);
}

.up-program {
  font-size: 0.75rem;
  color: #4a5a6a;
  margin-bottom: 0.9rem;
}

.btn-solid {
  padding: 0.55rem 1.4rem;
  background-color: var(--blue);
  color: #ffffff;
  border: none;
  border-radius: 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-solid:hover,
.btn-solid:focus-visible {
  background-color: var(--blue-dark);
  outline: none;
}

.up-details { display: flex; flex-direction: column; gap: 0.75rem; }

.up-list { display: flex; flex-direction: column; }

.up-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(21, 101, 192, 0.25);
  font-size: 0.82rem;
}

.up-row:last-child { border-bottom: none; }

.up-row dt { font-weight: 700; color: var(--text-dark); }
.up-row dd { color: var(--blue); word-break: break-word; }

.up-courses,
.up-attendance-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.up-courses { grid-column: 1 / -1; }
.up-attendance-card { grid-column: 1 / -1; }

.up-course-list,
.up-attendance-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.up-course-list li {
  background-color: var(--card-blue-selected);
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.5rem 0.65rem;
  border-radius: 0.3rem;
}

.up-attendance-list li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 1fr 1fr;
  gap: 1rem;
  align-items: center;
  color: var(--blue);
  font-size: 0.74rem;
  line-height: 1.4;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(21, 101, 192, 0.25);
}

.up-attendance-list li:last-child { border-bottom: none; }
.up-attendance-list .up-att-meta { text-align: center; }

@media (max-width: 900px) {
  .up-panel { grid-template-columns: 1fr; }
  .up-attendance-list li { grid-template-columns: 1fr; gap: 0.2rem; }
  .up-attendance-list .up-att-meta { text-align: left; }
  .up-row { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---- Avatar fit fixes: crop any uploaded image to the circle ---- */
.user-avatar-badge,
.student-avatar-container {
  overflow: hidden;
  padding: 0;
}

.user-avatar-badge img,
.student-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Default emoji keeps some breathing room; uploaded photos fill the circle */
.user-avatar-badge img:not([data-custom]) { padding: 7px; }
.student-avatar:not([data-custom]) { padding: 18px; }

.user-avatar-badge img[data-custom],
.student-avatar[data-custom] { padding: 0; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .dashboard-panel { grid-template-columns: 1fr; }
  .calendar-card { min-height: 280px; }
}

@media (max-width: 700px) {
  .profile-panel { padding: 1.25rem; }
  .profile-top { flex-direction: column; gap: 1.25rem; }
  .general-grid,
  .picture-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .general-actions { grid-column: 1; grid-row: auto; }
  .picture-actions { margin-top: 0; }
}

@media (max-width: 820px) {
  .app-layout { flex-direction: column; }
  .sidebar { width: 100%; padding: 0.5rem 0; }
  .sidebar-menu { flex-direction: row; flex-wrap: wrap; }
  .sidebar-item { padding: 0.6rem 1rem; font-size: 0.85rem; }
  .sidebar-item .icon { width: 22px; height: 22px; }
  .panel-grid { grid-template-columns: 1fr; }
  .student-card, .info-card, .courses-list-card, .action-card {
    grid-column: 1;
    grid-row: auto;
  }
  .info-header-row, .info-row { grid-template-columns: 1.4fr 1fr 1fr; }
}
/* ================= LOGIN: ERROR + DEMO ACCOUNTS (prototype) ================= */
.login-error {
  margin: -0.5rem 0 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.5rem;
  background: #fdecea;
  color: #a52a22;
  font-size: 0.9rem;
  font-weight: 600;
}

.demo-accounts {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: #5d6d7e;
}

.demo-accounts summary {
  cursor: pointer;
  text-align: center;
  color: #2980b9;
  font-weight: 600;
}

.demo-accounts p { margin: 0.6rem 0; text-align: center; }

.demo-accounts ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
}

.demo-accounts button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #c9d3de;
  border-radius: 0.5rem;
  background: #ffffff;
  color: var(--text-dark);
  font: inherit;
  cursor: pointer;
}

.demo-accounts button:hover { border-color: var(--blue); background: #eef4fc; }
.demo-accounts button span { font-size: 0.75rem; color: #7f8c8d; }

/* ================= LOGIN: FORGOT PASSWORD (auth.js) ================= */
.login-notice {
  margin: -1.25rem 0 1.25rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.5rem;
  background: #e8f5ec;
  color: #1e6b3a;
  font-size: 0.9rem;
  font-weight: 600;
}

.reset-note {
  margin: -1.25rem 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #5d6d7e;
  text-align: center;
}

.reset-inbox {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px dashed #9db7d5;
  border-radius: 0.5rem;
  background: #f3f7fc;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-dark);
}

.reset-inbox small { color: #7f8c8d; }
.reset-code { font-size: 1.05rem; letter-spacing: 0.15em; color: var(--blue); }

.reset-alt {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
}

.reset-alt a { color: #2980b9; text-decoration: none; }

/* Home: courses open their attendance */
.info-card .info-row { cursor: pointer; border-radius: 0.4rem; }
.info-card .info-row:hover, .info-card .info-row:focus-visible { background-color: rgba(130, 188, 255, 0.35); outline: none; }
.course-pill { cursor: pointer; }

/* Profile: note under Save / Cancel */
.general-note { display: block; margin-left: 0.5rem; font-size: 0.68rem; line-height: 1.35; color: rgba(255, 255, 255, 0.85); }
.general-grid input[readonly] { opacity: 0.8; cursor: default; }
/* Student attendance warning */
.att-warn { border-left: 4px solid #c0392b; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.att-warn h3 { margin: 0 0 0.4rem; font-size: 1rem; color: #a5281b; }
.att-warn ul { margin: 0 0 0.5rem 1.1rem; padding: 0; }
.att-warn li { margin: 0.15rem 0; }
.att-warn p { margin: 0; font-size: 0.85rem; color: #4a5a6a; }