/* =====================================================================
   econ_notebook: faculty brand on Bootstrap 5
   Shared with econ_cctv: CMU pink #ed4081 / purple #9E76B4, Kanit.
   Strategy: restrained. Pink only on action, selection and focus.
   ===================================================================== */
:root {
  --brand-pink: #ed4081;
  --brand-pink-dark: #c8025a;      /* 5.3:1 with white: buttons, links */
  --brand-pink-tint: #fdeef4;
  --brand-purple: #9e76b4;
  --brand-purple-dark: #7d5a93;    /* 5.5:1 on white */
  --brand-purple-tint: #f4eff8;

  --ink: #1f1a2e;                  /* 16:1 on white */
  --ink-2: #4f4a63;                /* 8.3:1 on white: secondary text */
  --line: #e2dfeb;
  --line-strong: #cfcadb;
  --bg: #f2f1f8;
  --surface: #fff;

  --danger-ink: #b0213a;           /* 6.2:1 on white */
  --danger-tint: #fdecef;
  --ok-ink: #1d6b45;
  --ok-tint: #e6f4ec;
  --info-ink: #1f5a8a;
  --info-tint: #e7f0f8;
  --wait-ink: #7a5300;
  --wait-tint: #fdf3dc;

  --radius: .5rem;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Bootstrap hooks */
  --bs-body-font-family: 'Kanit', system-ui, sans-serif;
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-link-color-rgb: 200, 2, 90;
  --bs-link-hover-color-rgb: 158, 1, 71;
  --bs-secondary-color: var(--ink-2);
}

body {
  font-family: var(--bs-body-font-family);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  caret-color: var(--brand-pink-dark);
}
::selection { background: #f9c6da; color: var(--ink); }

h1, h2, h3, .h1, .h2, .h3, .h4, .h5 { font-weight: 600; color: var(--ink); text-wrap: balance; }
.text-muted, .form-text { color: var(--ink-2) !important; }
.num { font-variant-numeric: tabular-nums; }

/* ---- focus: one ring everywhere ---------------------------------------- */
:focus-visible { outline: 2px solid var(--brand-pink); outline-offset: 2px; }
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus-visible {
  border-color: var(--brand-pink);
  box-shadow: 0 0 0 .2rem rgba(237, 64, 129, .22);
  outline: 0;
}
.form-check-input:checked, .form-check-input:indeterminate { background-color: var(--brand-pink-dark); border-color: var(--brand-pink-dark); }
input, select, textarea { accent-color: var(--brand-pink-dark); }

/* ---- navbar (mirrors econ_cctv top bar) -------------------------------- */
.app-nav {
  background: var(--surface);
  border-bottom: 2px solid var(--brand-pink);
  box-shadow: 0 1px 10px rgba(237, 64, 129, .08);
}
.app-nav .navbar-brand { color: var(--ink); font-weight: 600; }
.app-nav .navbar-brand .bi { color: var(--brand-pink); }
.app-nav .nav-link { color: var(--ink-2); font-weight: 500; transition: color .15s var(--ease-out); }
.app-nav .nav-link:hover { color: var(--brand-pink-dark); }
.app-nav .nav-link.active { color: var(--brand-pink-dark); }
.app-nav .user-name { color: var(--ink-2); font-size: .9rem; }
.role-tag {
  display: inline-block; margin-left: .35rem; padding: .05rem .5rem;
  border-radius: 999px; background: var(--brand-purple-tint); color: var(--brand-purple-dark);
  font-size: .75rem; font-weight: 500;
}

/* ---- buttons ----------------------------------------------------------- */
.btn { font-weight: 500; transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out); }
.btn-brand { --bs-btn-color: #fff; --bs-btn-bg: var(--brand-pink-dark); --bs-btn-border-color: var(--brand-pink-dark);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a8024c; --bs-btn-hover-border-color: #a8024c;
  --bs-btn-active-bg: #8f0241; --bs-btn-active-border-color: #8f0241; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #d9d5e2; --bs-btn-disabled-border-color: #d9d5e2; --bs-btn-disabled-color: var(--ink-2);
  --bs-btn-disabled-opacity: 1; }
.btn-quiet { --bs-btn-color: var(--ink); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--brand-pink-dark); --bs-btn-hover-bg: var(--brand-pink-tint); --bs-btn-hover-border-color: #f3a9c6;
  --bs-btn-active-bg: var(--brand-pink-tint); --bs-btn-active-color: var(--brand-pink-dark); }
.btn .spinner-border { width: 1em; height: 1em; border-width: .15em; vertical-align: -.125em; }

/* ---- sections (one level of container; no nested cards) ---------------- */
.card { border-color: var(--line); border-radius: var(--radius); }
.card-section > .card-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: .9rem 1.25rem;
  font-weight: 600;
}
.section-title { margin: 0; font-size: 1.05rem; font-weight: 600; }
.section-title .step { color: var(--brand-purple-dark); font-weight: 500; }

.form-label { font-weight: 500; margin-bottom: .3rem; }
.required::after { content: " *"; color: var(--brand-pink-dark); }
.form-control, .form-select { border-color: var(--line-strong); }
.form-control::placeholder { color: #7a748c; }   /* 4.6:1 on white */

/* ---- page head --------------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.5rem; }
.page-head h1 { margin: 0; font-size: 1.6rem; }
.page-head p { margin: .2rem 0 0; color: var(--ink-2); }

/* ---- status badges ----------------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .65rem; border-radius: 999px;
  font-size: .85rem; font-weight: 500; white-space: nowrap; line-height: 1.5;
}
.status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.status-pending   { background: var(--wait-tint);   color: var(--wait-ink); }
.status-approved  { background: var(--info-tint);   color: var(--info-ink); }
.status-picked_up { background: var(--brand-purple-tint); color: var(--brand-purple-dark); }
.status-returned, .status-renewed { background: var(--ok-tint); color: var(--ok-ink); }
.status-rejected, .status-overdue { background: var(--danger-tint); color: var(--danger-ink); }
.status-cancelled { background: #eeedf2; color: var(--ink-2); }

/* ---- request history table -------------------------------------------- */
.req-table { margin: 0; }
.req-table > thead th { font-weight: 500; color: var(--ink-2); font-size: .85rem; background: #faf9fc; border-bottom-color: var(--line); white-space: nowrap; }
.req-table td { vertical-align: top; padding-top: .9rem; padding-bottom: .9rem; }
.req-round { font-weight: 500; white-space: nowrap; }
.req-no { font-size: .8rem; color: var(--ink-2); }
.req-reason { max-width: 34ch; }
.req-note { margin-top: .4rem; font-size: .85rem; color: var(--danger-ink); }
.req-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; font-size: .875rem; }
.req-meta dt { font-weight: 400; color: var(--ink-2); }
.req-meta dd { margin: 0; }
.req-meta .pending-text { color: var(--ink-2); font-style: italic; }
.empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--ink-2); }
.empty-state .bi { display: block; font-size: 1.75rem; color: var(--brand-purple); margin-bottom: .35rem; }

@media (max-width: 767.98px) {
  .req-table thead { display: none; }
  .req-table, .req-table tbody, .req-table tr, .req-table td { display: block; width: 100%; }
  .req-table tr { padding: 1rem 1rem .75rem; border-bottom: 1px solid var(--line); }
  .req-table tr:last-child { border-bottom: 0; }
  .req-table td { border: 0; padding: .2rem 0; }
  .req-table td[data-label]::before { content: attr(data-label); display: block; font-size: .78rem; color: var(--ink-2); }
  .req-table .cell-head { display: flex; justify-content: space-between; align-items: start; gap: .75rem; }
  .req-table .cell-action { padding-top: .6rem; }
  .req-reason { max-width: none; }
}

/* ---- request type choice ---------------------------------------------- */
.type-option {
  position: relative; display: block; height: 100%;
  padding: 1rem 1.1rem 1rem 2.9rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
  transition: border-color .15s var(--ease-out), background-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.type-option .form-check-input { position: absolute; left: 1.1rem; top: 1.2rem; margin: 0; }
.type-option:hover { border-color: #f3a9c6; }
.type-option:has(input:checked) { border-color: var(--brand-pink-dark); background: var(--brand-pink-tint); box-shadow: 0 0 0 1px var(--brand-pink-dark) inset; }
.type-option:has(input:focus-visible) { outline: 2px solid var(--brand-pink); outline-offset: 2px; }
.type-option.is-disabled { cursor: not-allowed; background: #f8f7fb; border-style: dashed; }
.type-option.is-disabled:hover { border-color: var(--line-strong); }
.type-option.is-disabled .type-name { color: var(--ink-2); }
.type-name { display: block; font-weight: 600; }
.type-schedule { display: block; margin: .35rem 0 0; font-size: .85rem; color: var(--ink-2); }
.type-round { display: block; margin: .35rem 0 0; font-size: .9rem; }
.type-block { display: block; margin: .5rem 0 0; font-size: .85rem; color: var(--danger-ink); }
.type-block-item { display: flex; gap: .4rem; }
.type-error { display: none; margin-top: .5rem; font-size: .875rem; color: var(--danger-ink); }
.was-validated .type-error.show { display: block; }

/* ---- terms ------------------------------------------------------------- */
.terms-box { max-height: 260px; overflow-y: auto; font-size: .92rem; background: #faf9fc; border-color: var(--line) !important; scrollbar-color: var(--line-strong) transparent; }
.terms-box ol { padding-left: 1.25rem; }
.terms-box li { margin: .15rem 0; }
.terms-accept { padding: .85rem 1rem .85rem 2.75rem; border-radius: var(--radius); background: var(--brand-purple-tint); }
.terms-accept .form-check-input { margin-left: -1.75rem; }
.terms-accept label { font-weight: 500; }

.submit-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 1rem; }
.submit-bar .hint { color: var(--ink-2); font-size: .9rem; }

/* ---- alerts (no side stripes) ------------------------------------------ */
.alert { border-radius: var(--radius); }
.alert-danger { background: var(--danger-tint); border-color: #f5c2cc; color: var(--danger-ink); }
.alert-success { background: var(--ok-tint); border-color: #bfe3cd; color: var(--ok-ink); }

/* =====================================================================
   Staff inspection (counter use: desktop, student waiting)
   ===================================================================== */
.head-ref { font-size: .95rem; font-weight: 500; color: var(--ink-2); margin-left: .4rem; }

.loan-card { padding: 1.25rem 1.5rem; }
.loan-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem 2.5rem; }
.loan-device { padding-left: 2.5rem; border-left: 1px solid var(--line); }
.loan-label { font-size: .8rem; color: var(--ink-2); margin-bottom: .1rem; }
.loan-name { font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin-bottom: .4rem; }
.loan-facts { display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem; margin: 0; font-size: .92rem; }
.loan-facts dt { font-weight: 400; color: var(--ink-2); }
.loan-facts dd { margin: 0; }
.loan-reason { margin: .6rem 0 0; font-size: .9rem; max-width: 70ch; }
.prior-note { margin: .6rem 0 0; font-size: .875rem; color: var(--wait-ink); }
@media (max-width: 767.98px) {
  .loan-grid { grid-template-columns: 1fr; }
  .loan-device { padding-left: 0; border-left: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
}

.lost-toggle { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1rem .55rem 3.2rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.lost-toggle .form-check-label { font-weight: 500; }
.lost-toggle:has(input:checked) { border-color: var(--danger-ink); background: var(--danger-tint); color: var(--danger-ink); }
.lost-toggle:has(input:checked) .form-check-input { background-color: var(--danger-ink); border-color: var(--danger-ink); }

.checklist { --bs-table-bg: transparent; }
.checklist > thead th { font-weight: 500; font-size: .85rem; color: var(--ink-2); background: #faf9fc; white-space: nowrap; }
.checklist td, .checklist th { vertical-align: middle; padding-top: .6rem; padding-bottom: .6rem; }
.checklist .col-item { font-weight: 400; width: 30%; }
.checklist .col-prev { width: 17%; font-size: .875rem; }
.checklist .col-result { width: 1%; white-space: nowrap; }
.checklist .item-label { display: block; font-weight: 500; }
.checklist .item-hint { display: block; font-size: .8rem; color: var(--ink-2); line-height: 1.4; }
.checklist .cat-row th { background: var(--brand-purple-tint); color: var(--brand-purple-dark); font-weight: 500; font-size: .875rem; padding-top: .4rem; padding-bottom: .4rem; }
.checklist .check-row { transition: background-color .15s var(--ease-out); }
.checklist .check-row.is-bad { background: #fff6f8; }
.prev-result { display: block; }
.prev-result.is-bad { color: var(--danger-ink); font-weight: 500; }
.prev-remark { display: block; font-size: .8rem; color: var(--ink-2); line-height: 1.4; }
.change-tag .bi { margin-right: .15rem; }
.change-tag { display: block; margin-top: .3rem; font-size: .78rem; font-weight: 500; color: var(--danger-ink); }
#checklistCard.is-off .checklist { opacity: .45; }

/* segmented result control (native radios, keyboard: arrows) */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.seg-btn { padding: .3rem .8rem; font-size: .875rem; font-weight: 500; color: var(--ink-2); cursor: pointer; user-select: none;
  border-left: 1px solid var(--line); transition: background-color .12s var(--ease-out), color .12s var(--ease-out); }
.seg .btn-check:first-child + .seg-btn { border-left: 0; }
.seg-btn:hover { background: #f6f4fa; color: var(--ink); }
.seg .btn-check:focus-visible + .seg-btn { outline: 2px solid var(--brand-pink); outline-offset: -2px; position: relative; z-index: 1; }
.seg .btn-check:checked + .seg-normal  { background: var(--ok-tint); color: var(--ok-ink); }
.seg .btn-check:checked + .seg-damaged,
.seg .btn-check:checked + .seg-missing { background: var(--danger-ink); color: #fff; }
.seg .btn-check:checked + .seg-na      { background: #eeedf2; color: var(--ink); }
.seg .btn-check:disabled + .seg-btn    { cursor: not-allowed; }
.check-row.is-bad .remark-input { border-color: #e59aa8; }

.damage-card > .card-header { color: var(--danger-ink); }

/* sticky action bar: summary + save always in reach */
.action-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  margin: 0 -.75rem; padding: .85rem .75rem;
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 16px -8px rgba(31, 26, 46, .14);
}
.action-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.action-who { color: var(--ink-2); font-size: .875rem; margin-left: .5rem; }
.sum-chip { padding: .15rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 500; }
.sum-ok  { background: var(--ok-tint); color: var(--ok-ink); }
.sum-bad { background: var(--danger-tint); color: var(--danger-ink); }
.sum-na  { background: #eeedf2; color: var(--ink-2); }

@media (max-width: 991.98px) {
  .checklist thead { display: none; }
  .checklist, .checklist tbody, .checklist tr, .checklist td, .checklist th { display: block; width: 100% !important; }
  .checklist .check-row { padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
  .checklist .check-row > * { border: 0; padding: .2rem 0; }
  .checklist .col-prev[data-label]::before { content: attr(data-label) ": "; color: var(--ink-2); }
  .checklist .col-prev .prev-result, .checklist .col-prev .prev-remark { display: inline; }
  .checklist .col-result { white-space: normal; }
}

/* =====================================================================
   Staff queue (loans.php)
   ===================================================================== */
.search-box { position: relative; flex: 0 1 24rem; min-width: 16rem; }
.search-box .bi { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.search-box .form-control { padding-left: 2.4rem; background: var(--surface); }

.queue-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.queue-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem; margin-bottom: -1px;
  color: var(--ink-2); font-weight: 500; text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.queue-tab:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.queue-tab.active { color: var(--brand-pink-dark); border-bottom-color: var(--brand-pink-dark); }
.queue-count { min-width: 1.6rem; padding: 0 .45rem; border-radius: 999px; background: #eeedf2; color: var(--ink-2); font-size: .8rem; text-align: center; line-height: 1.5; }
.queue-tab.active .queue-count { background: var(--brand-pink-tint); color: var(--brand-pink-dark); }
.queue-tab.has-alert .queue-count { background: var(--danger-ink); color: #fff; }

.filter-note { padding: .65rem 1rem; border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); }
.filter-note a { margin-left: .5rem; }

.loan-table { --bs-table-bg: transparent; }
.loan-table > thead th { font-weight: 500; font-size: .85rem; color: var(--ink-2); background: #faf9fc; white-space: nowrap; }
.loan-table td { padding-top: .8rem; padding-bottom: .8rem; }
.loan-table tr.is-late { background: #fff8f9; }
.who-name { font-weight: 500; }
.who-meta { font-size: .82rem; color: var(--ink-2); }
.who-meta a { color: inherit; }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions .btn + .btn { margin-left: .3rem; }
.btn-icon { padding-left: .55rem; padding-right: .55rem; }

@media (max-width: 767.98px) {
  .search-box { flex-basis: 100%; }
  .queue-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .queue-tab { white-space: nowrap; }
  .loan-table thead { display: none; }
  .loan-table, .loan-table tbody, .loan-table tr, .loan-table td { display: block; width: 100%; }
  .loan-table tr { padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
  .loan-table td { border: 0; padding: .15rem 0; }
  .loan-table td[data-label] { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; align-items: baseline; }
  .loan-table td[data-label]::before { content: attr(data-label); color: var(--ink-2); font-size: .82rem; }
  .row-actions { text-align: left; white-space: normal; padding-top: .6rem !important; }
}

/* =====================================================================
   Approver dashboard
   ===================================================================== */
.round-picker { display: flex; align-items: center; gap: .6rem; }
.round-picker .form-select { min-width: 12rem; background-color: var(--surface); }

.round-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin-bottom: 1rem;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.round-stat { display: flex; flex-direction: column; gap: .1rem; padding: .85rem 1rem; text-decoration: none; color: var(--ink);
  background: var(--surface); border-bottom: 3px solid transparent;
  transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out); }
.round-stat:hover { background: #faf9fc; }
.round-stat.active:hover { background: var(--brand-pink-tint); }
.round-stat.active { background: var(--brand-pink-tint); border-bottom-color: var(--brand-pink-dark); }
.round-stat-n { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.round-stat-label { font-size: .85rem; color: var(--ink-2); }
.round-stat.is-zero .round-stat-n { color: #a7a2b5; }
.stat-pending:not(.is-zero) .round-stat-n { color: var(--wait-ink); }
.stat-overdue:not(.is-zero) .round-stat-n, .stat-rejected:not(.is-zero) .round-stat-n { color: var(--danger-ink); }
.round-stat.active .round-stat-label { color: var(--brand-pink-dark); }

.supply-note { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: 1rem; font-size: .9rem; color: var(--ink-2); }
.supply-note .bi { color: var(--brand-purple); }
.supply-note strong { color: var(--ink); font-weight: 600; }
.supply-note.is-short span { color: var(--danger-ink); font-weight: 500; }

.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--line); }

.req-list { list-style: none; margin: 0; padding: 0; }
.req-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 1rem; padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--line); transition: background-color .15s var(--ease-out); }
.req-item:last-child { border-bottom: 0; }
.req-item.is-selected { background: var(--brand-pink-tint); }
.req-select { padding-top: .2rem; }
.req-select .form-check-input { width: 1.15rem; height: 1.15rem; margin: 0; }
.req-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; }
.req-why { margin: .35rem 0 .45rem; max-width: 72ch; }
.req-facts { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .82rem; color: var(--ink-2); }
.req-facts .fact-warn { color: var(--wait-ink); font-weight: 500; }
.req-facts .fact-bad { color: var(--danger-ink); font-weight: 500; }
.req-decision { margin: .5rem 0 0; font-size: .85rem; color: var(--ink-2); }
.req-side { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.req-actions { display: flex; gap: .4rem; }
.btn-reject { --bs-btn-hover-color: var(--danger-ink); --bs-btn-hover-bg: var(--danger-tint); --bs-btn-hover-border-color: #f0b7c2; }

.bulk-bar { position: sticky; margin-top: 1rem; }

.swal-app-input { margin: .5rem 0 0; width: 100%; min-height: 6rem; font-size: .95rem; box-shadow: none; }
.swal-app-input-label { font-size: .9rem; font-weight: 500; color: var(--ink); margin-top: .5rem; }
.swal-app-validation { background: var(--danger-tint); color: var(--danger-ink); font-size: .875rem; margin: .5rem 0 0; }

@media (max-width: 991.98px) {
  .round-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .round-stat:last-child { grid-column: span 2; }
}
@media (max-width: 575.98px) {
  .round-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .round-stat { padding: .6rem .85rem; }
  .round-stat-n { font-size: 1.2rem; }
  .round-stat:last-child { grid-column: span 2; }
  .round-picker { width: 100%; }
  .round-picker .form-select { flex: 1; min-width: 0; }
  .req-item { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .req-side { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* =====================================================================
   Asset register + per-device history
   ===================================================================== */
/* =====================================================================
   Overview dashboard (dashboard.php)
   Chart colours: categorical slots 1-3 (validated: CVD ΔE 9.2, normal 27.6 on #fff);
   status palette is reserved for device state and always paired with a label.
   ===================================================================== */
:root {
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a;
  --status-good: #0ca30c; --status-warning: #fab219; --status-critical: #d03b3b;
  --viz-grid: #ebe9f0; --viz-base: #cfcadb; --viz-muted: #6d6880;
}
.today-chip { display: inline-block; margin: .15rem .25rem 0 0; padding: .05rem .55rem; border-radius: 999px;
  background: var(--brand-pink-tint); color: var(--brand-pink-dark); font-size: .82rem; font-weight: 500; }

.kpi-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin-bottom: 1.5rem;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.kpi { display: flex; flex-direction: column; gap: .1rem; padding: .9rem 1rem; background: var(--surface); color: var(--ink); text-decoration: none;
  transition: background-color .15s var(--ease-out); }
a.kpi:hover { background: #faf9fc; }
a.kpi:hover .kpi-label { color: var(--brand-pink-dark); }
.kpi-label { font-size: .85rem; color: var(--ink-2); }
.kpi-value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.kpi-note { font-size: .78rem; color: var(--ink-2); }
.kpi-wait .kpi-value { color: var(--wait-ink); }
.kpi-bad .kpi-value, .kpi-bad .kpi-note { color: var(--danger-ink); }
@media (max-width: 991.98px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-value { font-size: 1.4rem; } }

.viz-card .card-body { position: relative; }
.viz-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .85rem; color: var(--ink-2); }
.viz-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.viz-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; flex: 0 0 auto; }
svg.viz { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--bs-body-font-family); }
.viz-scroll { overflow-x: auto; }
@media (max-width: 575.98px) { .viz-scroll svg.viz { min-width: 520px; } }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-base { stroke: var(--viz-base); }
.viz-tick { fill: var(--viz-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-tick.is-current { fill: var(--ink); font-weight: 600; }
.viz-total { fill: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.viz-hit { fill: transparent; }
.viz-col { outline: none; cursor: default; transition: opacity .15s var(--ease-out); }
svg.viz:has(.viz-col.is-hover) .viz-col:not(.is-hover) { opacity: .45; }
.viz-col:focus-visible .viz-hit { fill: rgba(237, 64, 129, .06); stroke: var(--brand-pink); stroke-width: 1.5; }
.viz-tip { position: absolute; z-index: 30; min-width: 9rem; padding: .5rem .7rem; pointer-events: none;
  background: var(--ink); color: #fff; border-radius: 6px; font-size: .8rem; line-height: 1.45; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px -6px rgba(31, 26, 46, .45); }
.viz-tip strong { display: block; margin-bottom: .1rem; font-weight: 600; }
.viz-table { margin-top: .75rem; font-size: .875rem; }
.viz-table > summary { cursor: pointer; color: var(--ink-2); }
.viz-table > summary:hover { color: var(--brand-pink-dark); }

.fleet-bar { display: flex; gap: 2px; height: 2.25rem; margin-bottom: 1rem; border-radius: 6px; overflow: hidden; }
.fleet-seg { display: grid; place-items: center; min-width: 4px; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fleet-list { list-style: none; margin: 0; padding: 0; }
.fleet-list li { display: flex; align-items: center; gap: .55rem; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
.fleet-list a { color: var(--ink); text-decoration: none; }
.fleet-list a:hover { color: var(--brand-pink-dark); text-decoration: underline; text-underline-offset: 3px; }

.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-list li { display: flex; align-items: center; gap: .75rem 1rem; padding: .8rem 1rem; border-top: 1px solid var(--line); }
.todo-list li:first-child { border-top: 0; }
.todo-list li > div { flex: 1 1 auto; min-width: 0; }
.todo-list .btn, .todo-list .status { white-space: nowrap; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .viz-col { transition: none; } }

/* student identity from CMU Account (read-only) */
.cmu-identity { padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--brand-purple-tint); }
.cmu-identity .loan-facts { font-size: .95rem; }
.cmu-note { margin: .5rem 0 0; font-size: .82rem; color: var(--brand-purple-dark); }

/* user admin */
.role-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.loan-table tr.is-off-row td { opacity: .6; }
.loan-table tr.is-off-row .row-actions { opacity: 1; }

/* login */
.login-card { margin-top: 2rem; border-color: var(--line); box-shadow: 0 12px 32px -18px rgba(31, 26, 46, .35); }
.login-mark { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: .75rem; border-radius: 50%;
  background: var(--brand-pink-tint); color: var(--brand-pink-dark); font-size: 1.5rem; }
.local-login { border-top: 1px solid var(--line); padding-top: 1rem; }
.local-login > summary { cursor: pointer; font-size: .875rem; color: var(--ink-2); }
.local-login > summary:hover { color: var(--brand-pink-dark); }

/* language switch */
.lang-switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--surface); }
.lang-switch a { padding: .15rem .65rem; font-size: .8rem; font-weight: 500; color: var(--ink-2); text-decoration: none; line-height: 1.6;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out); }
.lang-switch a + a { border-left: 1px solid var(--line); }
.lang-switch a:hover { color: var(--brand-pink-dark); background: var(--brand-pink-tint); }
.lang-switch a.active { background: var(--brand-pink-dark); color: #fff; }

/* damage charges */
.nav-count { display: inline-block; min-width: 1.25rem; margin-left: .2rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--danger-ink); color: #fff; font-size: .72rem; line-height: 1.35rem; text-align: center; vertical-align: .1rem; }
.device-totals .span-2 { grid-column: 1 / -1; }
.finding-list { margin: .75rem 0 0; padding: .6rem .9rem .6rem 1.9rem; background: var(--danger-tint); color: var(--danger-ink); border-radius: var(--radius); font-size: .9rem; }
.finding-list strong { font-weight: 500; }
.charge-note { margin: .6rem 0 0; font-size: .85rem; color: var(--ink-2); white-space: pre-line; }

/* notebook photos */
.nb-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
  background: #f4f3f8; border: 1px solid var(--line); }
.nb-photo-empty { display: grid; place-items: center; color: #b7b2c6; font-size: 1.6rem; }
.nb-photo-sm { width: 3.25rem; flex: 0 0 3.25rem; border-radius: .35rem; font-size: 1rem; }
.nb-photo-md { width: 5rem; flex: 0 0 5rem; font-size: 1.2rem; }
.asset-cell { display: flex; align-items: center; gap: .75rem; }
.device-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .4rem; }
.device-head .loan-name { margin: 0; }
.device-grid { grid-template-columns: 12rem minmax(0, 1.2fr) minmax(0, 1fr); }
.device-grid .device-photo a:hover .nb-photo { border-color: var(--brand-pink); }
@media (max-width: 991.98px) { .device-grid { grid-template-columns: 9rem minmax(0, 1fr); } .device-grid .loan-device { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 1rem; border-top: 1px solid var(--line); } }
@media (max-width: 575.98px) { .device-grid { grid-template-columns: 1fr; } .device-grid .device-photo { max-width: 16rem; } }

.photo-field { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; }
.photo-preview { flex: 0 0 13rem; max-width: 100%; transition: opacity .15s var(--ease-out); }
.photo-preview.is-removed { opacity: .35; }
.photo-controls { flex: 1 1 18rem; min-width: 0; }
.file-pick { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-input:focus-visible + label { outline: 2px solid var(--brand-pink); outline-offset: 2px; }
.file-name { font-size: .9rem; color: var(--ink-2); overflow-wrap: anywhere; }

.head-tools { display: flex; align-items: center; gap: .5rem; }
.head-tools .search-box { flex: 0 1 20rem; min-width: 14rem; }
.head-tools .btn { white-space: nowrap; }
@media (max-width: 767.98px) { .head-tools { width: 100%; flex-wrap: wrap; } .head-tools .search-box { flex-basis: 100%; } }
.asset-link { font-weight: 600; color: var(--ink); text-decoration: none; }
.asset-link:hover { color: var(--brand-pink-dark); text-decoration: underline; text-underline-offset: 3px; }

.device-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.5rem; margin: 0; }
.device-totals dt { font-weight: 400; font-size: .82rem; color: var(--ink-2); }
.device-totals dd { margin: 0; font-size: 1.3rem; font-weight: 600; line-height: 1.3; }
.device-totals small { font-size: .8rem; font-weight: 400; color: var(--ink-2); }
.current-loan { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .92rem; }
.current-loan a { margin-left: .4rem; font-weight: 500; }

.history-table td { vertical-align: top; }
.damage-text { color: var(--danger-ink); max-width: 30ch; }

.repair-list { list-style: none; margin: 0; padding: 0; }
.repair-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.repair-item:last-child { border-bottom: 0; }
.repair-main { flex: 1 1 28rem; min-width: 0; }
.repair-issue { margin: .4rem 0 .35rem; max-width: 72ch; }
.repair-close { flex: 0 0 auto; align-self: flex-start; }
.repair-close > summary { list-style: none; }
.repair-close > summary::-webkit-details-marker { display: none; }
.repair-close[open] > summary { margin-bottom: .6rem; }
.repair-close-form { width: min(22rem, 100%); padding: .85rem; border: 1px solid var(--line); border-radius: var(--radius); background: #faf9fc; }

/* placeholder chips (memo settings) */
.ph-chip { margin: .15rem .1rem 0; padding: .05rem .5rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface);
  font: 500 .8rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--brand-purple-dark); cursor: pointer;
  transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out); }
.ph-chip:hover { background: var(--brand-purple-tint); border-color: var(--brand-purple); }

/* =====================================================================
   SweetAlert2 theme (all alerts / confirms / toasts)
   ===================================================================== */
.swal2-container { font-family: var(--bs-body-font-family); }
.swal2-popup.swal-app { width: min(30rem, calc(100vw - 2rem)); padding: 1.75rem 1.5rem 1.5rem; border-radius: .75rem; color: var(--ink);
  box-shadow: 0 18px 48px -12px rgba(31, 26, 46, .35); }
.swal2-container.swal2-backdrop-show { background: rgba(31, 26, 46, .45); }
.swal-app-title { padding: .5rem 0 0; font-size: 1.25rem; font-weight: 600; color: var(--ink); text-wrap: balance; }
.swal-app-body { margin: .6rem 0 0; padding: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-2); text-align: center; }
.swal-app-body p { margin: 0 0 .5rem; }
.swal-app-list { margin: .25rem 0 0; padding: .75rem 1rem .75rem 2rem; text-align: left; color: var(--danger-ink);
  background: var(--danger-tint); border-radius: var(--radius); }
.swal-app-list li + li { margin-top: .2rem; }
.swal-app-rows { display: grid; grid-template-columns: auto auto; justify-content: center; gap: .25rem 1.25rem; margin: .25rem 0 .75rem;
  padding: .75rem 1rem; background: #faf9fc; border-radius: var(--radius); text-align: left; font-variant-numeric: tabular-nums; }
.swal-app-rows dt { font-weight: 400; color: var(--ink-2); }
.swal-app-rows dd { margin: 0; font-weight: 500; color: var(--ink); }
.swal-app-note { font-size: .85rem; color: var(--danger-ink); }
.swal-app-actions { gap: .6rem; margin-top: 1.25rem; }
.swal-app-actions .btn { min-width: 7rem; }

/* icons in brand-adjacent semantic colors */
.swal2-icon { margin-top: .25rem; transform: scale(.85); }
.swal2-icon.swal2-success { border-color: var(--ok-ink); color: var(--ok-ink); }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--ok-ink); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(29, 107, 69, .25); }
.swal2-icon.swal2-error { border-color: var(--danger-ink); color: var(--danger-ink); }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--danger-ink); }
.swal2-icon.swal2-warning { border-color: #d99a1e; color: #b07a0c; }
.swal2-icon.swal2-question { border-color: var(--brand-purple); color: var(--brand-purple-dark); }
.swal2-icon.swal2-info { border-color: var(--info-ink); color: var(--info-ink); }
.swal2-loader { border-color: var(--brand-pink-dark) transparent var(--brand-pink-dark) transparent; }

/* toast */
.swal2-popup.swal-app-toast { width: auto; max-width: min(26rem, calc(100vw - 2rem)); padding: .75rem 1rem; border-radius: var(--radius);
  box-shadow: 0 10px 30px -10px rgba(31, 26, 46, .3); }
.swal-app-toast .swal2-title { font-size: .95rem; font-weight: 500; color: var(--ink); margin: 0 .25rem; }
.swal-app-toast .swal2-icon { transform: none; margin: 0 .5rem 0 0; }
.swal-app-toast .swal2-timer-progress-bar { background: var(--brand-pink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* show only what's wrong: no green "valid" decoration */
.was-validated .form-control:valid, .was-validated .form-select:valid {
  border-color: var(--line-strong); background-image: none; padding-right: .75rem;
}
.was-validated .form-control:valid:focus, .was-validated .form-select:valid:focus {
  border-color: var(--brand-pink); box-shadow: 0 0 0 .2rem rgba(237, 64, 129, .22);
}
.was-validated .form-check-input:valid ~ .form-check-label { color: inherit; }
.was-validated .form-check-input:valid:not(:checked) { border-color: var(--line-strong); }

/* programmatic focus target for screen readers; not interactive */
#formErrors:focus { outline: 0; }