/* What the college Home changes on top of the harvested Maintenance box (doorbell-maintenance.css):
   the box, toolbar, menus, buttons and pager are Maintenance's; the bars are box-designs.html no. 3. */

/* the page runs edge to edge, so the box does too */
.dbx { min-height: calc(100vh - 60px); font-size: 16px; }
.dbx .main { padding: 30px 48px; }

/* ---------- the bars: box-designs.html no. 3, verbatim (Inter, 83px, five fixed columns + the button) ---------- */
.dbx #vmBoard { font-family: Inter, system-ui, sans-serif; }
.dbx #vmBoard .b3-th, .dbx #vmBoard .b3-tr {
  display: grid; grid-template-columns: var(--b3-cols, minmax(0, 1.5fr) 1fr 1.1fr 1.3fr 140px 112px); justify-content: space-between;
  align-items: center; gap: 24px; padding: 0 20px;
}
/* fitColumns() lays a hidden copy of every college here to find each column's widest entry */
.dbx #vmBoard .b3-measure { position: absolute; visibility: hidden; pointer-events: none; left: 0; top: 0; }
.dbx #vmBoard .b3-measure .b3-th, .dbx #vmBoard .b3-measure .b3-tr { grid-template-columns: repeat(6, max-content); justify-content: start; }
.dbx #vmBoard .b3-measure p, .dbx #vmBoard .b3-measure span { white-space: nowrap; }
.dbx #vmBoard .b3-bar { width: 200px; }
/* the column heads and the bars draw their lines as Maintenance's .vm-thead / .vm-row do: one weight, var(--border) */
.dbx #vmBoard .b3-th { min-height: 38px; background: var(--band); background-clip: padding-box; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dbx #vmBoard .b3-th span { font-family: Inter, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(17, 24, 39, 0.8); }
.dbx #vmBoard .b3-tr { min-height: 83px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; }
.dbx #vmBoard .b3-tr:hover { background: rgba(17, 24, 39, 0.015); }
.dbx #vmBoard .b3-t1 { font-family: Inter, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.3; color: #111827; }
.dbx #vmBoard .b3-t2 { margin-top: 4px; font-family: Inter, sans-serif; font-size: 13.6px; line-height: 1.35; color: #5f6b7a; }
.dbx #vmBoard .b3-t2 > span + span { padding-left: 10px; margin-left: 10px; border-left: 1px solid rgba(17, 24, 39, 0.16); }
.dbx #vmBoard .b3-tn { font-variant-numeric: tabular-nums; }
.dbx #vmBoard .b3-next { font-weight: 500; }
.dbx #vmBoard .b3-soon { color: #a8641c; }
.dbx #vmBoard .b3-of { color: #8a94a3; font-weight: 500; }
.dbx #vmBoard .b3-bar { height: 6px; max-width: 200px; margin-top: 8px; border-radius: 99px; background: #eceef2; overflow: hidden; }
.dbx #vmBoard .b3-bar i { display: block; height: 100%; border-radius: 99px; background: #4f46e5; }
.dbx #vmBoard .b3-st { font-family: Inter, sans-serif; font-size: 15.5px; font-weight: 600; white-space: nowrap; color: #4a5a6e; }
.dbx #vmBoard .b3-st.c-soon { color: #a8641c; }
.dbx #vmBoard .b3-st.c-late { color: #a83232; }
.dbx #vmBoard .b3-st.c-ready { color: #2f7a55; }
.dbx #vmBoard .b3-st.open { color: #4a5a6e; }
.dbx #vmBoard .vm-actions { width: 112px; }   /* the button fills its 112px track, as Doorbell's does */
.dbx #vmBoard .b3-st.none { color: #111827; }

/* ---------- Colleges: the custom-school link in the band, and the form box above the list ---------- */
.dbx .dbx-above:empty { display: none; }
.dbx .cs-link {
  padding: 0; border: none; background: none; cursor: pointer; font: inherit; color: var(--ink);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 28%, transparent); text-underline-offset: 3px;
  transition: text-decoration-color 0.15s var(--ease-out);
}
.dbx .cs-link:hover { text-decoration-color: var(--ink); }
.dbx .cs-box { margin-bottom: 18px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; animation: rlPopIn .22s var(--ease-out); }
.dbx .cs-box > .ov-band { border-radius: 8px 8px 0 0; }
.dbx .cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; padding: 20px; }
.dbx .cs-wide { grid-column: span 1; }
.dbx .cs-field { display: flex; flex-direction: column; gap: 8px; font-family: Inter, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(17, 24, 39, 0.8); }
.dbx .cs-field :is(input, select) {
  height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: 9px; background: #fff;
  font-family: 'Fira Sans', sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink);
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.dbx .cs-field select {
  appearance: none; padding-right: 36px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2314181d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.dbx .cs-field :is(input, select):hover { border-color: color-mix(in srgb, var(--ink) 24%, transparent); }
.dbx .cs-field :is(input, select):focus { outline: none; border-color: var(--tan); box-shadow: 0 0 0 3px var(--tan-lt); }
.dbx .cs-field input::placeholder { color: var(--dim); }
.dbx .cs-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--band); border-radius: 0 0 8px 8px; }
.dbx .cs-hint { flex: 1; font-family: 'Fira Sans', sans-serif; font-size: 13px; color: var(--muted); }
.dbx .cs-foot .vm-actions { width: 112px; }
.dbx .cs-foot .vm-actions.cs-go { width: 160px; }
/* the form's buttons are the bars' buttons: Doorbell sizes those only inside #vmBoard, so the size comes across here */
.dbx #view-maintenance .cs-foot .vm-actions .cs-btn { width: 100%; height: 44.8px; border-radius: 9px; padding: 0 18px; }
.dbx #view-maintenance .cs-foot .vm-actions .cs-btn:hover { border-color: color-mix(in srgb, var(--ink) 46%, transparent); }


/* ---------- Colleges: a grid of school cards under the filter box (colleges-layouts.html no. 4) ---------- */
.dbx #vmBoard.cc-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 18px; margin-top: 18px; align-items: stretch; }   /* every row as tall as a card */
.dbx .cc {
  display: flex; flex-direction: column; min-width: 0; padding: 0; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), translate .2s var(--ease-out);
}
.dbx .cc:hover:not(:has(button:active)) { border-color: color-mix(in srgb, var(--ink) 18%, transparent); box-shadow: 0 4px 12px rgba(17, 24, 39, 0.06); translate: 0 -3px; }
.dbx .cc:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dbx .cc-hd { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 18px; }
.dbx .cc-who { flex: 1; min-width: 0; }
.dbx .cc-name { font-family: Inter, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #111827; }
.dbx .cc-sub { margin-top: 5px; font-family: Inter, sans-serif; font-size: 13.6px; line-height: 1.35; color: #5f6b7a; }
.dbx .cc-sub > span + span { padding-left: 10px; margin-left: 10px; border-left: 1px solid rgba(17, 24, 39, 0.16); }
.dbx .cc-st { margin-top: 2px; font-family: Inter, sans-serif; font-size: 13.6px; font-weight: 600; white-space: nowrap; color: #111827; }
.dbx .cc-st.on { color: #2f7a55; }
.dbx .cc-dl { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(17, 24, 39, 0.018); }
.dbx .cc-dl-c { padding: 14px 22px 15px; min-width: 0; }
.dbx .cc-dl-c + .cc-dl-c { border-left: 1px solid var(--border); }
.dbx .cc-lbl { font-family: Inter, sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(17, 24, 39, 0.72); white-space: nowrap; }
.dbx .cc-d { margin-top: 6px; font-family: Inter, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.2; color: #111827; font-variant-numeric: tabular-nums; }
.dbx .cc-left { margin-top: 3px; font-family: Inter, sans-serif; font-size: 13px; color: #5f6b7a; white-space: nowrap; }
.dbx .cc-left.soon { color: #a8641c; font-weight: 600; }
.dbx .cc-dl-c.past .cc-d, .dbx .cc-dl-c.none .cc-d { color: #8a94a3; }
.dbx .cc-ft { display: flex; align-items: center; gap: 18px; margin-top: auto; padding: 16px 22px 18px; }
.dbx .cc-prog { flex: 1; min-width: 0; }
.dbx .cc-n { font-family: Inter, sans-serif; font-size: 15px; font-weight: 600; color: #111827; font-variant-numeric: tabular-nums; }
.dbx .cc-n span { font-weight: 500; color: #8a94a3; }
.dbx .cc-segs { display: flex; gap: 3px; margin-top: 8px; }
.dbx .cc-segs i { flex: 1; height: 6px; border-radius: 2px; background: #eceef2; }
.dbx .cc-segs i.done { background: #4f46e5; }

/* the custom-school card and the filler that finishes the last row */
.dbx .cc.cc-add {
  align-items: center; justify-content: center; gap: 6px; min-height: 200px; font: inherit;
  background: transparent; border: 1.5px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.dbx .cc.cc-add:hover { background: var(--card); border-color: color-mix(in srgb, var(--ink) 36%, transparent); box-shadow: none; translate: none; }
.dbx .cc-add-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%; background: rgba(17, 24, 39, 0.05); color: var(--ink); }
.dbx .cc-add-t { font-family: Inter, sans-serif; font-size: 15.5px; font-weight: 600; color: #111827; }
.dbx .cc-add-s { font-family: Inter, sans-serif; font-size: 13.4px; color: #5f6b7a; }
.dbx .cc-fill { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 200px; font-family: 'Fira Sans', sans-serif; font-size: 16px; color: color-mix(in srgb, var(--ink) 60%, transparent); }

/* the filter box ends at its toolbar, and the pager sits in its own strip under the cards */
.dbx #vmMain:has(+ #vmBoard.cc-board) .vm-toolbar { margin-bottom: 0; }
.dbx .cc-pager { margin-top: 18px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.dbx .cc-pager .pt-foot { border-top: none; }