/* =====================================================================
   School Equipment Borrowing & Inventory Management System
   Hand-written CSS (no frameworks). Theme values live in :root variables.
   ===================================================================== */

:root {
  /* Brand: UPHSL royal blue (campus signage / seal ring) + seal gold */
  --primary: #1f3da3;
  --primary-600: #2a4fc9;
  --primary-700: #1f3da3;
  --primary-800: #142a72;
  --primary-50: #eef2fd;
  --primary-100: #dce4fa;
  --accent: #e3a92b;
  --accent-50: #fdf6e3;

  /* Neutrals */
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;

  /* Status colors */
  --success: #15803d;
  --success-bg: #dcfce7;
  --warning: #b45309;
  --warning-bg: #fef3c7;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --info: #1d4ed8;
  --info-bg: #dbeafe;
  --purple: #6d28d9;
  --purple-bg: #ede9fe;
  --gray: #475569;
  --gray-bg: #e2e8f0;

  /* Layout */
  --sidebar-w: 260px;
  --topbar-h: 64px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.25);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --transition: 0.18s ease;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; color: var(--text); }
p { margin: 0; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.fw-600 { font-weight: 600; }

svg.icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- App layout ---------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--primary-800), var(--primary-700));
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  z-index: 40;
  overflow: hidden; /* no scrollbars while the width animates */
  transition: transform var(--transition);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sidebar-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* School seal (portrait oval, transparent background) */
.brand-logo {
  display: block;
  height: 52px;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.brand-text strong { display: block; color: #fff; font-size: 15px; }
.brand-text span { font-size: 12px; color: #93c5fd; }

.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
/* Names stay on one line (no wrapping or jumping while the sidebar opens / closes) */
.nav-text, .brand-text, .nav-label, .sidebar-footer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text { min-width: 0; }

.nav-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #93c5fd;
  padding: 12px 12px 6px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: #dbeafe;
  font-size: 14px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}

.nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }
.nav-link.active { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }

/* Staff sidebar: count badge + highlight while requests are waiting */
.nav-badge {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--primary-800);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
}
.nav-badge[hidden] { display: none; }
.nav-badge + .nav-badge { margin-left: 6px; }
.nav-badge.danger { background: var(--danger); color: #fff; }
.nav-badge.success { background: #22c55e; color: #fff; }
.nav-badge.warning { background: #facc15; color: #422006; }
.nav-link.has-danger { background: rgba(185, 28, 28, 0.22); color: #fff; }
.nav-link.has-danger:not(.active) { animation: navPulseDanger 2.4s ease-in-out infinite; }
@keyframes navPulseDanger { 50% { background: rgba(185, 28, 28, 0.4); } }
.nav-link.has-alert { background: rgba(227, 169, 43, 0.16); color: #fff; }
.nav-link.has-alert:not(.active) { animation: navPulse 2.4s ease-in-out infinite; }
@keyframes navPulse { 50% { background: rgba(227, 169, 43, 0.3); } }
@media (prefers-reduced-motion: reduce) { .nav-link.has-alert:not(.active), .nav-link.has-danger:not(.active) { animation: none; } }

.sidebar-footer {
  padding: 14px 20px;
  font-size: 12px;
  color: #93c5fd;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Collapsed sidebar (PC only): icons only, names hidden. Toggled by clicking the logo. */
@media (min-width: 901px) {
  .sidebar, .main { transition: width 0.2s ease, margin-left 0.2s ease; }
  .sidebar-no-anim .sidebar, .sidebar-no-anim .main { transition: none; }
  .sidebar-collapsed { --sidebar-w: 76px; }
  .sidebar-collapsed .sidebar-brand { justify-content: center; padding: 18px 8px; }
  .sidebar-collapsed .brand-logo { height: 42px; }
  .sidebar-collapsed .brand-text,
  .sidebar-collapsed .nav-label,
  .sidebar-collapsed .nav-text,
  .sidebar-collapsed .sidebar-footer { display: none; }
  .sidebar-collapsed .sidebar-nav { padding: 12px 10px; scrollbar-width: none; }
  .sidebar-collapsed .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-collapsed .nav-link { position: relative; justify-content: center; padding: 12px 0; }
  .sidebar-collapsed .nav-link .icon { width: 22px; height: 22px; }
  /* Counts become small bubbles on the icon's corner */
  .sidebar-collapsed .nav-badge {
    position: absolute;
    top: 3px;
    right: 6px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
    margin: 0;
  }
  .sidebar-collapsed .nav-badge + .nav-badge { top: auto; bottom: 3px; margin: 0; }
}

/* Name label beside an icon in the collapsed sidebar */
.nav-tip {
  position: fixed;
  z-index: 60;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 6px;
  background: #1f2937;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
  animation: navTipIn 0.12s ease;
}
.nav-tip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #1f2937;
}
.nav-tip[hidden] { display: none; }
@keyframes navTipIn { from { opacity: 0; margin-left: -4px; } to { opacity: 1; margin-left: 0; } }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 35;
}

.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
  overflow-x: clip; /* no page-wide sideways scroll while the sidebar resizes (clip keeps the sticky top bar working) */
  display: flex;
  flex-direction: column;
}

/* ---------- Top navbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.topbar-spacer { flex: 1; min-width: 0; }

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  cursor: pointer;
  color: var(--text);
}

/* Avatar button + dropdown (Logout lives here) */
.user-menu { position: relative; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 10px;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: right;
  transition: background var(--transition), border-color var(--transition);
}
.user-chip:hover, .user-chip[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border); }
.user-chip .chevron { width: 16px; height: 16px; color: var(--muted); transition: transform var(--transition); }
.user-chip[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 50;
}
.user-dropdown[hidden] { display: none; }

/* Notification bell + panel (top bar) */
.notif-menu { position: relative; margin-right: -8px; } /* sit close to the avatar */
.notif-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.notif-btn:hover, .notif-btn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border); }
.notif-btn .icon { width: 20px; height: 20px; }
.notif-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.notif-count[hidden] { display: none; }
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 50;
  overflow: hidden;
}
.notif-panel[hidden] { display: none; }
/* Phones: the bell is not at the screen edge, so pin the panel across the screen instead */
@media (max-width: 640px) {
  .notif-panel {
    position: fixed;
    top: calc(var(--topbar-h) + 8px);
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
  .notif-panel .notif-list { max-height: calc(100vh - var(--topbar-h) - 90px); }
}
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.notif-readall { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.notif-readall:hover { text-decoration: underline; }
.notif-readall[hidden] { display: none; }
.notif-actions { display: flex; gap: 12px; }
.notif-readall.notif-clear { color: var(--muted); }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-empty { padding: 24px 14px; text-align: center; color: var(--muted); font-size: 13px; }
.notif-item {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: var(--primary-50); }
.notif-item.unread .notif-text { font-weight: 600; }
.notif-text { flex: 1; min-width: 0; }
.notif-text small { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); font-size: 11px; }
.notif-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--info-bg); color: var(--info); }
.notif-icon .icon { width: 15px; height: 15px; }
.notif-approved .notif-icon { background: var(--success-bg); color: var(--success); }
.notif-rejected .notif-icon { background: var(--danger-bg); color: var(--danger); }
.notif-released .notif-icon { background: var(--purple-bg); color: var(--purple); }
.notif-overdue .notif-icon { background: var(--danger-bg); color: var(--danger); }

/* New notification pop-up: small box at the top right */
.notif-pops {
  position: fixed;
  top: calc(var(--topbar-h) + 12px);
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, calc(100vw - 32px));
}
.notif-pop {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 10px 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--info);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  animation: popIn 0.2s ease;
}
.notif-pop.notif-approved { border-left-color: var(--success); }
.notif-pop.notif-rejected { border-left-color: var(--danger); }
.notif-pop.notif-released { border-left-color: var(--purple); }
.notif-pop.notif-overdue { border-left-color: var(--danger); }
.notif-pop.leaving { opacity: 0; transform: translateX(16px); transition: all 0.25s ease; }
.notif-pop-body { flex: 1; min-width: 0; background: none; border: 0; padding: 4px 0 0; text-align: left; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.notif-pop-close { flex: none; background: none; border: 0; padding: 4px; color: var(--muted); cursor: pointer; }
.notif-pop-close .icon { width: 16px; height: 16px; }

.user-dropdown-head {
  padding: 10px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  line-height: 1.3;
}
.user-dropdown-head strong { display: block; font-size: 14px; }
.user-dropdown-head span { font-size: 12px; color: var(--muted); word-break: break-all; }

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.user-dropdown-item:hover { background: var(--surface-2); text-decoration: none; }
.user-dropdown-item.danger { color: var(--danger); }
.user-dropdown-item.danger:hover { background: var(--danger-bg); }

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-100);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.avatar-xl { width: 96px; height: 96px; font-size: 32px; }

/* ---------- Profile picture editor ---------- */
.photo-editor {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.photo-preview {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}
.photo-preview:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.photo-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  border: 3px solid var(--surface);
}
.photo-badge svg { width: 15px; height: 15px; }
.photo-info { min-width: 0; }
.photo-info .hint { margin: 4px 0 10px; }
.photo-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.user-meta { line-height: 1.2; }
.user-meta strong { display: block; font-size: 14px; }
.user-meta span { font-size: 12px; color: var(--muted); text-transform: capitalize; }

.content { padding: 28px; width: 100%; }

/* ---------- Page header ---------- */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.page-header h1 { font-size: 24px; }
.page-header p { color: var(--muted); margin-top: 4px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card + .card { margin-top: 20px; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.card-header h2 { font-size: 16px; }
.card-body { padding: 20px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  color: inherit;
}

a.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }

.stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.stat-icon svg { width: 24px; height: 24px; }
.stat-icon.blue { background: var(--info-bg); color: var(--info); }
.stat-icon.green { background: var(--success-bg); color: var(--success); }
.stat-icon.amber { background: var(--warning-bg); color: var(--warning); }
.stat-icon.red { background: var(--danger-bg); color: var(--danger); }
.stat-icon.purple { background: var(--purple-bg); color: var(--purple); }
.stat-icon.gray { background: var(--gray-bg); color: var(--gray); }

.stat-label { font-size: 13px; color: var(--muted); }
.stat-value { font-size: 28px; font-weight: 700; line-height: 1.1; margin: 2px 0; }
.stat-sub { font-size: 12px; color: var(--muted); }

/* minmax(0, …) + min-width: 0 let columns shrink so wide tables scroll inside .table-wrap instead of widening the page */
.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grid-2 > * { min-width: 0; }
.grid-2 > .card + .card { margin-top: 0; }

/* ---------- Toolbar: search + filters ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.search-box { position: relative; flex: 1 1 260px; }

.search-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}

.search-box input { padding-left: 38px; }
.toolbar select { flex: 0 1 190px; }
.toolbar .spacer { flex: 1; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.tab {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.tab .count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--gray-bg);
  color: var(--text-2);
  font-size: 12px;
  text-align: center;
}

.tab.active .count { background: var(--primary-100); color: var(--primary); }

/* ---------- Tables ---------- */
.table-wrap { width: 100%; overflow-x: auto; }

table.table { width: 100%; border-collapse: collapse; font-size: 14px; }

.table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--surface-2);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tr.row-overdue { background: #fff7f7; }
.reject-reason { color: var(--danger); max-width: 260px; white-space: normal; }
.table tr.row-link { cursor: pointer; }
/* Briefly highlights a row that was just saved */
@keyframes rowFlash { from { background: var(--accent-50); } to { background: transparent; } }
.table tr.row-flash { animation: rowFlash 2.4s ease-out; }
/* Row opened from a notification: held highlight with a left bar, then fades out */
@keyframes rowHighlight {
  0%, 70% { background: var(--accent-50); box-shadow: inset 4px 0 0 var(--primary); }
  100% { background: transparent; box-shadow: inset 4px 0 0 transparent; }
}
.table tr.row-highlight { animation: rowHighlight 4s ease-out; }
.table tr.row-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.table .cell-title { font-weight: 600; }
.table .cell-sub { font-size: 12px; color: var(--muted); }
.table .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.table th.text-right, .table td.text-right { text-align: right; }
.table th.text-center, .table td.text-center { text-align: center; }
/* Sortable headers: click to sort, arrow shows the direction */
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover, .table th.sortable:focus-visible { color: var(--text); outline: none; }
.table th.sortable::after { content: '\2195'; margin-left: 6px; font-size: 11px; opacity: 0.35; }
.table th.sorted { color: var(--primary); }
.table th.sorted[data-dir="asc"]::after { content: '\2191'; opacity: 1; }
.table th.sorted[data-dir="desc"]::after { content: '\2193'; opacity: 1; }
/* Borrowing tables on PC: every column centered, action buttons on one line */
@media (min-width: 641px) {
  .table.table-center th, .table.table-center td { text-align: center; }
  .table.table-center .actions { justify-content: center; flex-wrap: nowrap; }
}
.table tr.row-damaged { background: #fff7f7; }

/* Equipment inventory: fixed column widths so headers line up with their cells */
.equipment-table { min-width: 980px; }
.equipment-table .col-equipment { width: 20%; }
.equipment-table .col-category { width: 11%; }
.equipment-table .col-location { width: 15%; }
.equipment-table .col-qty { width: 10%; }
.equipment-table .col-borrowed { width: 8%; }
.equipment-table .col-condition { width: 10%; }
.equipment-table .col-status { width: 10%; }
.equipment-table .col-actions { width: 16%; }
.equipment-table .actions { flex-wrap: nowrap; }

.table .purpose {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty-state svg { width: 40px; height: 40px; margin-bottom: 8px; opacity: 0.6; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
}

.badge-pending { background: var(--warning-bg); color: var(--warning); }
.badge-approved { background: var(--info-bg); color: var(--info); }
.badge-rejected { background: var(--danger-bg); color: var(--danger); }
.badge-borrowed { background: var(--purple-bg); color: var(--purple); }
.badge-returned { background: var(--success-bg); color: var(--success); }
.badge-cancelled { background: var(--gray-bg); color: var(--gray); }
.badge-overdue { background: var(--danger); color: #fff; }
.badge-available { background: var(--success-bg); color: var(--success); }
.badge-unavailable { background: var(--gray-bg); color: var(--gray); }
.badge-under-maintenance { background: var(--warning-bg); color: var(--warning); }
.badge-out-of-stock { background: var(--danger-bg); color: var(--danger); }
.badge-good { background: var(--success-bg); color: var(--success); }
.badge-fair { background: var(--warning-bg); color: var(--warning); }
.badge-damaged { background: var(--danger-bg); color: var(--danger); }
.badge-lost { background: var(--text); color: #fff; }
.badge-admin { background: var(--accent-50); color: var(--warning); }
.badge-super-admin { background: var(--purple-bg); color: var(--purple); }
.badge-student { background: var(--primary-50); color: var(--primary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 3px solid var(--primary-100); outline-offset: 1px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-800); }
.btn-accent { background: var(--accent); color: var(--primary-800); }
.btn-accent:hover:not(:disabled) { background: #c99120; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover:not(:disabled) { background: #166534; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #991b1b; }
.btn-outline { background: var(--surface); color: var(--text-2); border-color: var(--border-strong); }
.btn-outline:hover:not(:disabled) { background: var(--surface-2); border-color: var(--muted); }
.btn-outline-danger { background: var(--surface); color: var(--danger); border-color: #fca5a5; }
.btn-outline-danger:hover:not(:disabled) { background: var(--danger-bg); }
.btn-ghost { background: transparent; color: var(--primary-600); }
.btn-ghost:hover:not(:disabled) { background: var(--primary-50); }

.btn-sm { padding: 6px 10px; font-size: 13px; }
.btn-block { width: 100%; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group + .form-group { margin-top: 0; }
.form-stack > * + * { margin-top: 16px; }

label { font-size: 13px; font-weight: 600; color: var(--text-2); }
label .req { color: var(--danger); }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

textarea { resize: vertical; min-height: 84px; }

/* Suggestion list under inputs like Category (replaces the browser's datalist popup) */
.suggest { position: relative; }
.suggest-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
}
.suggest-list[hidden] { display: none; }
.suggest-list li { padding: 8px 10px; border-radius: 6px; font-size: 14px; color: var(--text); cursor: pointer; }
.suggest-list li:hover, .suggest-list li.active { background: var(--surface-2); }
.suggest-list li.selected { background: var(--primary-50); color: var(--primary); font-weight: 600; }

/* Dropdowns: the open list is drawn as a rounded card that matches the select box,
   instead of the browser's square list. Browsers without base-select keep their own list. */
@supports (appearance: base-select) {
  select, select::picker(select) { appearance: base-select; }
  select { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
  select::picker-icon { color: var(--muted); transition: rotate var(--transition); }
  select:open::picker-icon { rotate: 180deg; }
  select:open { border-color: var(--primary-600); box-shadow: 0 0 0 3px var(--primary-100); }
  select::picker(select) {
    margin-block: 4px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
  }
  select option {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
  }
  select option::checkmark { display: none; }
  select option:hover, select option:focus-visible { background: var(--surface-2); outline: none; }
  select option:checked { background: var(--primary-50); color: var(--primary); font-weight: 600; }
  select option:disabled { color: var(--muted); cursor: not-allowed; }
}

/* iPhone Safari gives date/time inputs their own width (wider than the form) and centers
   the value: make them fill the field like the other inputs, left-aligned. */
input[type="date"], input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px var(--primary-100);
}

input[readonly] { background: var(--surface-2); color: var(--muted); }

.input-error { border-color: var(--danger) !important; }
.field-error { font-size: 12px; color: var(--danger); min-height: 0; }
.hint { font-size: 12px; color: var(--muted); }

/* Borrowing length picker: "1–7 days" / "Same day (by hour)" */
.return-picker { display: flex; flex-direction: column; gap: 6px; }
.return-picker .sub-label { font-weight: 500; color: var(--muted); margin-top: 6px; display: block; }
.return-picker [hidden] { display: none !important; }
.segmented { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; width: fit-content; max-width: 100%; }
/* Borrowing Length: two equal halves across the full field width */
.segmented[aria-label="Borrowing length"] { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.segmented[aria-label="Borrowing length"] label { justify-content: center; text-align: center; }
.segmented label { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-weight: 500; cursor: pointer; margin: 0; }
.segmented label + label { border-left: 1px solid var(--border-strong); }
.segmented input { width: auto; margin: 0; accent-color: var(--primary); }
.segmented label:has(input:checked) { background: var(--primary-50); color: var(--primary); }
.segmented label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* Live password requirements checklist */
.pw-rules {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 12px;
  font-size: 12px;
  color: var(--muted);
}
.pw-rules li { display: flex; align-items: center; gap: 6px; }
.pw-rules li::before {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
}
.pw-rules li.met { color: var(--success); }
.pw-rules li.met::before {
  border-color: var(--success);
  background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 16px;
}

.alert svg { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-warning { background: var(--warning-bg); color: var(--warning); }
.alert-info { background: var(--info-bg); color: var(--info); }
.alert-success { background: var(--success-bg); color: var(--success); }

/* ---------- Modal / confirmation dialog ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.55);
  animation: fadeIn 0.15s ease;
}

.modal.open { display: flex; }

.modal-dialog {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px); /* phones: the visible height, without the browser bars */
  display: flex;
  flex-direction: column;
  animation: popIn 0.18s ease;
}

.modal-dialog.modal-lg { max-width: 760px; }
.modal-dialog.modal-sm { max-width: 420px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 { font-size: 18px; }

.modal-close {
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.modal-close:hover { background: var(--surface-2); color: var(--text); }
/* A <form> wrapping body + footer must also shrink, or the body never scrolls */
.modal-dialog > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal-body { padding: 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* While a modal is open the page behind it does not scroll */
body.modal-open { overflow: hidden; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius);
}

.confirm-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  background: var(--warning-bg);
  color: var(--warning);
}

.confirm-icon.danger { background: var(--danger-bg); color: var(--danger); }
.confirm-icon svg { width: 26px; height: 26px; }

.details-list {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 16px;
  font-size: 14px;
  margin: 0;
}

.details-list dt { color: var(--muted); }
.details-list dd { margin: 0; font-weight: 500; }

.summary-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Toasts ---------- */
.toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 40px));
}

.toast {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: #fff;
  font-size: 14px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--accent);
  animation: popIn 0.2s ease;
}

.toast.success { border-left-color: #22c55e; }
.toast.error { border-left-color: #ef4444; }
.toast.leaving { opacity: 0; transform: translateX(16px); transition: all 0.25s ease; }

/* ---------- Equipment cards (student browse) ---------- */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  padding: 20px;
}

.equipment-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

.equipment-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.equipment-card .thumb {
  height: 92px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
  color: var(--primary);
}

.equipment-card .thumb svg { width: 38px; height: 38px; }
.equipment-card .body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.equipment-card h3 { font-size: 15px; }
.equipment-card .code { font-size: 12px; color: var(--muted); }
.equipment-card .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.equipment-card .qty { font-size: 13px; color: var(--text-2); }
.equipment-card .qty strong { font-size: 16px; }
.equipment-card .footer { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.equipment-card .footer .btn { flex: 1; }

.qty-bar { height: 6px; border-radius: 999px; background: var(--gray-bg); overflow: hidden; }
.qty-bar span { display: block; height: 100%; background: var(--success); }

/* ---------- List items (dashboard side panels) ---------- */
.list { list-style: none; margin: 0; padding: 0; }

.list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.list li:last-child { border-bottom: 0; }

/* ---------- Auth pages (login / register): centered split card ---------- */
.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;
}

.auth-body {
  --auth-ease: cubic-bezier(0.65, 0, 0.35, 1);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* leave a band above the card where the building's name sign shows */
  padding: calc(3vw + 64px) 24px 40px;
  position: relative;
  overflow-x: hidden;
  /* Campus photo, full width, shifted up so the "UNIVERSITY OF PERPETUAL HELP
     SYSTEM LAGUNA" sign (26-30% down the photo) sits just above the card.
     The photo is 3:2, so at 100% width it is 66.7vw tall; -17vw moves the sign
     near the top, and the photo's lower edge (24px + 49.7vw) fades into the blue. */
  background:
    linear-gradient(160deg, rgba(14, 28, 82, 0.72), rgba(31, 61, 163, 0.55) 55%, rgba(20, 42, 114, 0.8)),
    linear-gradient(to bottom, rgba(20, 42, 114, 0) 50%, var(--primary-800) calc(100% - 6px)) 0 0 / 100% calc(49.7vw + 30px) no-repeat,
    url('/images/campus.webp') center calc(24px - 17vw) / 100% auto no-repeat,
    var(--primary-800);
}

/* One card holds both forms. They share grid row 1, so the card is always as tall
   as the taller form and keeps the same size in Sign In and Register mode. */
.auth-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  min-height: 560px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(5, 12, 40, 0.5), 0 8px 20px rgba(5, 12, 40, 0.25);
}

/* Colored panel: 40% wide, slides between the left (Register) and right (Sign In) edge */
.auth-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  color: #fff;
  background: linear-gradient(160deg, var(--primary-800), var(--primary-700) 55%, var(--primary-600));
  overflow: hidden;
  transform: translateX(0);
  transition: transform 0.8s var(--auth-ease);
  will-change: transform;
}
[data-auth-mode="signin"] .auth-panel { transform: translateX(150%); }
/* soft diamonds, like the reference */
.auth-panel::before,
.auth-panel::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  transform: rotate(45deg);
  border-radius: 4px;
}
.auth-panel::before { width: 34px; height: 34px; top: 18%; right: 22%; }
.auth-panel::after { width: 22px; height: 22px; bottom: 20%; right: 14%; }


.auth-panel .brand-row { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.auth-panel .brand-logo { height: 44px; }

/* The two panel messages sit on top of each other and crossfade */
.auth-panel-bodies { display: grid; }
.auth-panel-body { grid-area: 1 / 1; text-align: center; align-self: center; position: relative; }
.auth-panel-body h1 { color: #fff; font-size: 32px; margin-bottom: 14px; }
.auth-panel-body p { color: #e3e9fb; font-size: 15px; line-height: 1.6; max-width: 280px; margin: 0 auto 28px; }

.auth-panel-foot { font-size: 12px; color: #c9d4f5; text-align: center; }

/* Form areas: Sign In uses columns 1-3, Register columns 3-5 (both in row 1) */
.auth-box {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px;
}
.auth-box-signin { grid-column: 1 / 4; }
.auth-box-signup { grid-column: 3 / 6; }
.auth-title { color: var(--primary); font-size: 32px; text-align: center; }
.auth-sub { color: var(--muted); font-size: 13px; text-align: center; margin: 8px 0 26px; }
.auth-box .alert { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; }

.auth-form { width: 100%; max-width: 400px; margin: 0 auto; display: grid; gap: 12px; }
.auth-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.auth-form .form-group { gap: 4px; }

/* Filled inputs with a leading icon */
.input-icon { position: relative; }
.input-icon > svg {
  position: absolute;
  left: 14px;
  top: 0;
  height: 46px;
  width: 17px;
  color: var(--muted);
  pointer-events: none;
}
.input-icon input {
  height: 46px;
  padding-left: 42px;
  background: #f2f5f9;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 15px;
}
.input-icon input::placeholder { color: #8a94a6; }
.input-icon input:focus { background: var(--surface); border-color: var(--primary-600); }
.input-icon:focus-within > svg { color: var(--primary); }

/* Email + "Send code" button on the register form */
.otp-row { display: flex; gap: 8px; }
.otp-row .input-icon { flex: 1; min-width: 0; }
.otp-send { height: 46px; white-space: nowrap; border-radius: 6px; padding: 0 14px; }
#otpGroup[hidden], #resetOtpGroup[hidden], .auth-view[hidden] { display: none; }

/* Text buttons on the sign-in box: "Forgot password?" and "Back to Sign In" */
.auth-link {
  background: none;
  border: 0;
  padding: 2px 0;
  color: var(--primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  justify-self: center;
}
.auth-link:hover { text-decoration: underline; }
.auth-forgot { justify-self: end; margin-top: -4px; }
.auth-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -4px; }
.auth-options .auth-forgot { margin-top: 0; }
.auth-remember { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.auth-remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }

/* Show / hide password eye (sits at the right end of the field) */
.input-icon input.has-toggle { padding-right: 46px; }
/* Edge / IE draw their own reveal eye in password fields: hide it so only ours shows */
input.has-toggle::-ms-reveal, input.has-toggle::-ms-clear { display: none; }
.pw-toggle {
  position: absolute;
  top: 0;
  right: 4px;
  width: 40px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
}
.pw-toggle:hover { color: var(--primary); }
.pw-toggle:focus-visible { outline: 2px solid var(--primary-600); outline-offset: -4px; }
.pw-toggle svg.icon { width: 18px; height: 18px; }

/* Pill buttons */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  padding: 13px 40px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-pill:hover { text-decoration: none; }
.btn-pill:active { transform: translateY(1px); }
.btn-pill-primary {
  justify-self: center;
  margin-top: 10px;
  border: 0;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 61, 163, 0.28);
}
.btn-pill-primary:hover:not(:disabled) { background: var(--primary-600); }
.btn-pill-primary:disabled { opacity: 0.85; cursor: progress; }

/* Small white spinner inside a button while it is busy */
.btn-spinner {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
.btn-pill-outline { border: 1.5px solid #fff; background: transparent; color: #fff; }
.btn-pill-outline:hover { background: #fff; color: var(--primary); }

/* ---------- Auth animations (sliding panel, like the reference) ---------- */
/* The card rises in once on page load */
@keyframes authCardIn { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
.auth-shell { animation: authCardIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* Inactive form / panel message: faded out and nudged sideways.
   It fades out first, then becomes hidden (visibility waits for the fade). */
.auth-box,
.auth-panel-body {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, transform 0.6s var(--auth-ease), visibility 0s linear 0.35s;
}
.auth-box-signin { transform: translateX(-40px); }
.auth-box-signup { transform: translateX(40px); }
.auth-panel-body.for-signin { transform: translateX(-30px); }
.auth-panel-body.for-signup { transform: translateX(30px); }

/* Active one: fades in while the panel finishes sliding */
[data-auth-mode="signin"] .auth-box-signin,
[data-auth-mode="signup"] .auth-box-signup,
[data-auth-mode="signin"] .auth-panel-body.for-signin,
[data-auth-mode="signup"] .auth-panel-body.for-signup {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s ease 0.3s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .auth-shell { animation: none; }
  .auth-panel, .auth-box, .auth-panel-body { transition: none !important; }
}

/* ---------- 404 ---------- */
.center-page { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 24px; }
.center-page h1 { font-size: 64px; color: var(--primary); }

/* ---------- Loading ---------- */
.loading { padding: 32px; text-align: center; color: var(--muted); }

.spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid var(--primary-100);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

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

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .main { margin-left: 0; }
  .menu-toggle { display: inline-flex; }
}

@media (max-width: 760px) {
  .auth-body {
    padding: calc(3vw + 64px) 16px 20px;
    background:
      linear-gradient(180deg, rgba(14, 28, 82, 0.6), rgba(31, 61, 163, 0.55) 40%, rgba(14, 28, 82, 0.8)),
      linear-gradient(to bottom, rgba(20, 42, 114, 0) 50%, var(--primary-800) calc(100% - 6px)) 0 0 / 100% calc(49.7vw + 30px) no-repeat,
      url('/images/campus-sm.webp') center calc(24px - 17vw) / 100% auto no-repeat,
      var(--primary-800);
  }
  /* Phones: panel on top, active form below; no sliding */
  .auth-shell { grid-template-columns: 1fr; min-height: 0; }
  .auth-panel,
  [data-auth-mode="signin"] .auth-panel { position: relative; width: auto; transform: none; transition: none; grid-row: 1; padding: 20px; gap: 14px; }
  .auth-box, .auth-box-signin, .auth-box-signup { grid-row: 2; grid-column: 1; padding: 28px 20px 32px; }
  [data-auth-mode="signin"] .auth-box-signup,
  [data-auth-mode="signup"] .auth-box-signin { display: none; }
  .auth-panel-body h1 { font-size: 24px; margin-bottom: 8px; }
  .auth-panel-body p { margin-bottom: 16px; font-size: 14px; }
  .auth-panel-foot, .auth-panel::before, .auth-panel::after { display: none; }
  .btn-pill { padding: 11px 32px; }
  .auth-title { font-size: 26px; }
  .input-icon input { font-size: 16px; } /* 16px stops iOS from zooming on focus */
  .auth-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .content { padding: 16px; }
  .topbar { padding: 0 12px 0 16px; gap: 8px; }
  .notif-menu { margin-right: -6px; }
  .user-chip { padding: 2px; gap: 4px; }
  .user-meta { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { flex-direction: column; padding: 14px; gap: 8px; }
  .stat-value { font-size: 22px; }
  .toolbar { padding: 12px 16px; }
  .toolbar select { flex: 1 1 140px; }
  .details-list { grid-template-columns: 1fr; gap: 2px; }
  .photo-editor { flex-direction: column; text-align: center; }
  .photo-actions { justify-content: center; }
  .details-list dd { margin-bottom: 10px; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1; }
  .equipment-grid { padding: 16px; }
  .page-header h1 { font-size: 20px; }
}

/* ---------- Table pagination (10 rows per page) ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.pager[hidden] { display: none; }
.pager-info { font-size: 13px; color: var(--muted); }
.pager-btns { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.pager-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pager-btn:hover:not(:disabled):not(.active) { border-color: var(--primary); color: var(--primary); }
.pager-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; cursor: default; }
.pager-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pager-btn:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 1px; }
.pager-gap { padding: 0 4px; color: var(--muted); }

/* ---------- Incident report (Damaged / Lost returns) ---------- */
.incident-report { color: var(--text); font-size: 14px; }
.ir-head { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--primary); }
.ir-logo { width: 54px; height: 54px; object-fit: contain; }
.ir-school { font-weight: 700; font-size: 16px; color: var(--primary); }
.ir-unit { font-size: 12px; color: var(--muted); }
.ir-title { text-align: center; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; margin: 16px 0 12px; }
.ir-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.ir-meta div { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.ir-meta span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ir-section { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 16px 0 6px; }
.ir-table { width: 100%; border-collapse: collapse; }
.ir-table th, .ir-table td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; vertical-align: top; }
.ir-table th { width: 32%; font-weight: 600; background: var(--surface-2); }
.ir-remarks { border: 1px solid var(--border); border-radius: 6px; padding: 10px; min-height: 64px; white-space: pre-wrap; }
.ir-signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; text-align: center; font-size: 13px; }
.ir-line { display: block; border-top: 1px solid var(--text); margin-bottom: 4px; }
.ir-signs small { display: block; color: var(--muted); font-size: 11px; }
@media (max-width: 600px) {
  .ir-meta, .ir-signs { grid-template-columns: 1fr; }
}

/* Printing an incident report: only the report, on plain white paper */
@media print {
  body.printing-report > *:not(#incidentReportModal) { display: none !important; }
  body.printing-report { background: #fff; }
  body.printing-report #incidentReportModal { position: static; display: block; padding: 0; background: none; animation: none; }
  body.printing-report #incidentReportModal .modal-dialog { max-width: none; max-height: none; box-shadow: none; border-radius: 0; animation: none; }
  body.printing-report #incidentReportModal .modal-header,
  body.printing-report #incidentReportModal .modal-footer { display: none; }
  body.printing-report #incidentReportModal .modal-body { padding: 0; overflow: visible; }
  body.printing-report .ir-table th { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 16mm; }
}

/* ---------- Unit IDs (staff only) ---------- */
.units-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 18px 0 8px; }
.unit-list, .unit-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.unit-pick { max-height: 220px; overflow-y: auto; padding: 2px; }
.unit-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  white-space: nowrap;
}
.unit-chip small { font-weight: 500; font-size: 11px; opacity: 0.8; }
.unit-available { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.unit-borrowed { border-color: #e9d5ff; background: var(--purple-bg); color: var(--purple); }
.unit-damaged, .unit-lost { border-color: #fecaca; background: var(--danger-bg); color: var(--danger); }
.unit-retired { opacity: 0.55; text-decoration: line-through; }
.unit-option { display: inline-flex; cursor: pointer; }
.unit-option input { position: absolute; opacity: 0; pointer-events: none; }
.unit-option input:checked + .unit-chip { background: var(--primary); border-color: var(--primary); color: #fff; }
.unit-option input:focus-visible + .unit-chip { outline: 2px solid var(--primary-600); outline-offset: 2px; }
.unit-option input:disabled + .unit-chip { opacity: 0.45; cursor: not-allowed; }
.table .unit-codes { display: flex; align-items: center; gap: 4px; }
.table .unit-codes .icon { width: 12px; height: 12px; }

/* ---------- Tables on phones: each row becomes a card ----------
   Cells carry their column name in data-label (set in app.js), shown on the left,
   so every value, including Status and the action buttons, is visible without swiping. */
@media (max-width: 640px) {
  .table-wrap { overflow-x: visible; }
  .equipment-table { min-width: 0; }
  .table-wrap table.table, .table-wrap .table tbody, .table-wrap .table tr, .table-wrap .table td { display: block; width: 100%; }
  .table-wrap .table colgroup, .table-wrap .table thead { display: none; }
  .table-wrap .table tbody tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }
  .table-wrap .table tbody tr:last-child { border-bottom: 0; }
  .table-wrap .table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border: 0;
    text-align: right;
    white-space: normal;
  }
  .table-wrap .table td[data-label]::before {
    content: attr(data-label);
    flex: none;
    max-width: 45%;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  /* First column (equipment / student / account name) is the card's title */
  .table-wrap .table td[data-label]:first-child {
    display: block;
    text-align: left;
    padding-top: 0;
    padding-bottom: 6px;
  }
  .table-wrap .table td[data-label]:first-child::before { display: none; }
  /* Long text cells wrap instead of being cut off */
  .table-wrap .table .purpose { max-width: none; white-space: normal; text-align: right; }
  .table-wrap .table .nowrap { white-space: normal; }
  /* Action buttons: full row under the details */
  .table-wrap .table td.text-right .actions { justify-content: flex-end; flex-wrap: wrap; }
  .table-wrap .table td[data-label="Actions"] { padding-top: 10px; }
  .table-wrap .table td[data-label="Actions"]::before { display: none; }
  .table-wrap .table td[data-label="Actions"] .actions { width: 100%; }
  /* "No items" / loading rows (one cell across all columns) stay centred */
  .table-wrap .table td[colspan] { display: block; text-align: center; }
  .equipment-table .actions { flex-wrap: wrap; }
}