/* Directory NG.
 *
 * Reads the SHARED palette from /theme.css -- the single source of truth for
 * every LTS dashboard. Every colour below is a var(--token) with a same-value
 * fallback, so the page is correct even before /theme.css lands on a host. Do
 * NOT fork the palette here: that is how widm_ng drifted to a warm terracotta
 * theme and had to be pulled back.
 *
 * Two shells share this file (see web/layout.php):
 *   .public  the public search pages -- a slim top bar, wide centred content
 *   .shell   the administrative dashboard -- the standard left-nav layout
 */

:root {
    --dir-radius: 10px;
    --dir-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  
  --muted:#575757;   /* secondary text          */
  --accent: #0142A4;                      /* primary / links      */
  --accent-hover: #0C2142;                /* primary hover        */
  --accent-soft:rgba(1,66,164,0.18);    /* accent tint / ring  */
  --side:#0C2142;    /* sidebar background      */

}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.55 Arial, sans-serif;
    background: var(--bg, #eee);
    color: var(--ink, #0f172a);
}

a { color: var(--accent, #2563eb); }
a:hover { color: var(--accent-hover, #1d4ed8); }

h1 { font-size: 1.6rem; margin: 0 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }

.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;
}

/* ---------------------------------------------------------------- public shell */

.pubbar {
    background: var(--side, #1e293b);
    color: #eee;
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 20;
}
.pubbar-in {
    max-width: 1140px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; gap: 24px; min-height: 56px; flex-wrap: wrap;
}


.brand {
    display: flex; align-items: center; gap: 9px;
    font-weight: 600; color: #f8fafc; text-decoration: none; white-space: nowrap;
}

a.brand:hover {
    color: #1b9de5;
}


.brand-dot {
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--accent, #2563eb); color: #fff;
    font-size: 12px; font-weight: 700;
}
.pubnav { display: flex; gap: 4px; flex-wrap: wrap; }
.pubbar-right { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pubnav-link {
    color: #cbd5e1; text-decoration: none; font-size: 14px;
    padding: 6px 10px; border-radius: 7px;
}
.pubnav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.pubnav-link.active { background: var(--accent, #2563eb); color: #fff; }
.whoami { font-size: 13px; color: #94a3b8; padding: 0 4px; }

.pubmain { max-width: 1140px; margin: 0 auto; padding: 28px 20px 48px; }

.pubfoot {
    border-top: 1px solid var(--line, #e2e8f0);
    background: var(--card, #fff);
    margin-top: 48px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pubfoot-in {
    max-width: 1140px;
    margin: 0 auto;
    padding: 28px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    font-size: 13.5px;
    color: #575757;
}
.pubfoot strong { color: var(--ink, #0f172a); }

/* ----------------------------------------------------------------- admin shell */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 232px; flex: 0 0 232px;
    background: var(--side, #1e293b);
    color: #cbd5e1;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column;
}
.sidebar .brand { margin: 0 6px 18px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-section {
    font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    color: #64748b; margin: 14px 8px 4px;
}
.nav-link {
    color: #cbd5e1; text-decoration: none; font-size: 14px;
    padding: 7px 10px; border-radius: 7px;
}
.nav-link:hover { background: var(--side2, #334155); color: #fff; }
.nav-link.active { background: var(--accent, #2563eb); color: #fff; }
.sidebar-foot {
    margin-top: auto; padding: 14px 8px 0; font-size: 12.5px;
    color: #94a3b8; border-top: 1px solid var(--side2, #334155);
}
.sidebar-foot strong { color: #e2e8f0; }
.role { display: block; font-size: 11px; color: #64748b; }
.signout { display: block; margin-top: 8px; color: #94a3b8; text-decoration: none; }
.signout:hover { color: #fff; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 24px calc(16px);
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    background: var(--card, #fff);
    border-bottom: 1px solid var(--line, #e2e8f0);
    flex-wrap: wrap;
}
.topbar h1 { margin: 0; font-size: 1.25rem; }
.topbar-meta { font-size: 13px; color: var(--muted, #64748b); }
.content { padding: 22px 24px calc(40px + env(safe-area-inset-bottom, 0px)); }

/* ---------------------------------------------------------------------- search */

.searchhead { text-align: center; margin-bottom: 20px; }
.searchform {
    display: flex; gap: 8px; max-width: 620px; margin: 14px auto 10px; flex-wrap: wrap;
}
.searchform input[type="search"] {
    flex: 1 1 260px; min-width: 0;
    padding: 11px 14px; font-size: 15px;
    border: 1px solid var(--line, #e2e8f0); border-radius: var(--dir-radius);
    background: var(--card, #fff); color: inherit;
}
.searchform input[type="search"]:focus {
    outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; border-color: transparent;
}
.searchlinks {font-size: 13.5px;color: #575757;margin: 6px 0;}

.policy {
    font-size: 12.5px;
    color: #575757;
    border-left: 3px solid var(--line, #e2e8f0);
    padding: 2px 0 2px 12px;
    margin: 16px 0 20px;
}

/* ------------------------------------------------------------- advanced search */

.advform {
    background: var(--card, #fff); border: 1px solid var(--line, #e2e8f0);
    border-radius: var(--dir-radius); box-shadow: var(--dir-shadow);
    padding: 18px 20px; margin-bottom: 22px;
}
.advform fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.advform legend {
    font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted, #64748b); padding: 0; margin-bottom: 10px;
}
.fieldgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; }
.field input, .field select, .field textarea, .cardform input, .cardform select, .cardform textarea {
    width: 100%; padding: 8px 10px; font: inherit; font-size: 14px;
    border: 1px solid var(--line, #e2e8f0); border-radius: 8px;
    background: var(--card, #fff); color: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus,
.cardform input:focus, .cardform select:focus, .cardform textarea:focus {
    outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; border-color: transparent;
}
.hint { font-size: 12.5px; color: var(--muted, #64748b); }

.advactions {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line, #e2e8f0); padding-top: 14px;
}
.modes { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.modes label { font-size: 13.5px; font-weight: 400; display: flex; gap: 5px; align-items: center; }

/* --------------------------------------------------------------------- buttons */

.btn {
    display: inline-block; padding: 8px 14px;
    font: inherit; font-size: 14px; line-height: 1.2;
    border: 1px solid var(--line, #e2e8f0); border-radius: 8px;
    background: var(--card, #fff); color: inherit;
    text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--bg, #f1f5f9); }
.btn-primary {
    background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff;
}
.btn-primary:hover { background: var(--accent-hover, #1d4ed8); color: #fff; }
.btn-small { padding: 4px 9px; font-size: 12.5px; }
.btn-danger { color: var(--err, #b91c1c); border-color: #fecaca; }
.btn-danger:hover { background: #fef2f2; }
.btn-stop { padding: 4px 11px; font-size: 13px; }

.formactions { margin-top: 16px; }
.inline { display: inline; }
.inlineform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inlineform input, .inlineform select {
    padding: 8px 10px; font: inherit; font-size: 14px;
    border: 1px solid var(--line, #e2e8f0); border-radius: 8px;
    background: var(--card, #fff); color: inherit;
}
.rowactions { white-space: nowrap; display: flex; gap: 6px; }

/* ----------------------------------------------------------------------- cards */

.card {
    background: var(--card, #fff);
    border: 1px solid var(--line, #e2e8f0);
    border-left: 3px solid var(--line, #e2e8f0);
    border-radius: var(--dir-radius);
    box-shadow: var(--dir-shadow);
    padding: 14px 18px; margin: 0 0 16px;
}
.card-ok    { border-left-color: var(--ok, #16a34a); }
.card-info  { border-left-color: var(--accent, #2563eb); }
.card-warn  { border-left-color: var(--warn, #d97706); }
.card-alert { border-left-color: var(--err, #dc2626); }
/* TEMPORARY (2026-09-28, remove ~January 2027 with the "url has changed" notice in
   layout.php): the public-view notice's <p>s supply the vertical spacing. */
.card-notice { padding: 0 18px; }
.cardform .card { margin-bottom: 16px; }
.cardform label { display: block; font-size: 13px; font-weight: 600; margin-top: 12px; }
.cardform .hint { display: block; margin: 3px 0 6px; }

.keybox {
    background: var(--bg, #f1f5f9); border: 1px solid var(--line, #e2e8f0);
    border-radius: 8px; padding: 12px 14px; margin: 10px 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; overflow-x: auto; user-select: all;
}

.banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 10px 24px; font-size: 13.5px;
    border-bottom: 1px solid var(--line, #e2e8f0);
}
.banner-proxy { background: #fef3c7; color: #78350f; border-bottom-color: #fde68a; }
.banner-proxy code { background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 4px; }

.pill {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
}
.pill-ok     { background: #dcfce7; color: #166534; }
.pill-info   { background: #dbeafe; color: #1e40af; }
.pill-muted  { background: var(--bg, #f1f5f9); color: var(--muted, #64748b); }

/* ---------------------------------------------------------------------- tables */

/* Tables, diagrams and code are the only things allowed to be wider than the
 * viewport, and only inside their own scroller -- so the page body never scrolls
 * sideways on a phone. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.report {
    width: 100%; border-collapse: collapse;
    background: var(--card, #fff);
    border: 1px solid var(--line, #e2e8f0);
    border-radius: var(--dir-radius);
    overflow: hidden;
    font-size: 14px;
}
table.report th, table.report td {
    text-align: left; padding: 9px 12px;
    border-bottom: 1px solid var(--line, #e2e8f0);
    vertical-align: top;
}
table.report thead th {
    background: var(--bg, #f1f5f9);
    font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted, #64748b); font-weight: 600; white-space: nowrap;
}
table.report tbody tr:last-child td { border-bottom: 0; }
table.report tbody tr:hover { background: var(--accent-soft, #eff6ff); }
table.report .num, table.report th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* The two hooks the shared /report_tools.js needs: the sort indicator in a
 * header, and the CSV/Excel buttons it inserts above the table. */
th .sort-ind { margin-left: 5px; opacity: .45; font-size: 10px; }
.report-tools { display: flex; gap: 8px; margin: 0 0 8px; }
.report-tools button {
    padding: 4px 11px; font: inherit; font-size: 12.5px;
    border: 1px solid var(--line, #e2e8f0); border-radius: 7px;
    background: var(--card, #fff); color: var(--muted, #64748b); cursor: pointer;
}
.report-tools button:hover { background: var(--bg, #f1f5f9); color: var(--ink, #0f172a); }

a.person { font-weight: 500; text-decoration: none; }
a.person:hover { text-decoration: underline; }

/* --------------------------------------------------------------- person detail */

.person-detail {
    display: flex; gap: 26px; flex-wrap: wrap;
    background: var(--card, #fff);
    border: 1px solid var(--line, #e2e8f0);
    border-radius: var(--dir-radius);
    box-shadow: var(--dir-shadow);
    padding: 22px 24px;
}
.person-photo img {
    display: block; width: 150px; height: auto; max-width: 100%;
    border-radius: var(--dir-radius); background: var(--bg, #f1f5f9);
}
.person-facts { flex: 1 1 320px; min-width: 0; }
.person-type { color: var(--muted, #64748b); margin: 0 0 16px; font-size: 14px; }
.person-facts dl {
    display: grid; grid-template-columns: minmax(120px, 170px) 1fr;
    gap: 8px 18px; margin: 0; font-size: 14px;
}
.person-facts dt { font-weight: 600; color: var(--muted, #64748b); }
.person-facts dd { margin: 0; overflow-wrap: anywhere; }

/* ----------------------------------------------------------------------- small */

@media (max-width: 760px) {
    .shell { flex-direction: column; }
    .sidebar { width: auto; flex: none; }
    .content, .topbar { padding-left: 16px; padding-right: 16px; }
    .banner { padding-left: 16px; padding-right: 16px; }
    .person-facts dl { grid-template-columns: 1fr; gap: 2px 0; }
    .person-facts dd { margin-bottom: 10px; }
}


/* --------------------------------------------------------------- the dialog */
/*
 * The detail popup. A native <dialog>, so the backdrop, Escape and focus
 * trapping come from the browser; only the look is ours.
 */
.person-dialog {
    width: min(680px, calc(100vw - 32px));
    max-height: min(82vh, 760px);
    padding: 0;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: var(--dir-radius);
    background: var(--card, #fff);
    color: var(--ink, #0f172a);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
    overflow: hidden;
}
.person-dialog::backdrop {
    background: rgba(15, 23, 42, .45);
}

.dialog-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line, #e2e8f0);
    background: var(--bg, #f1f5f9);
    /* Sticky so the name stays visible while a long entry scrolls. */
    position: sticky; top: 0; z-index: 1;
}
.dialog-head h2 { margin: 0; font-size: 1.05rem; }

.dialog-close {
    border: 0; background: transparent; cursor: pointer;
    font-size: 24px; line-height: 1; padding: 0 4px;
    color: var(--muted, #64748b);
}
.dialog-close:hover { color: var(--ink, #0f172a); }

.dialog-body {
    padding: 4px 16px 16px;
    overflow-y: auto;
    max-height: calc(min(82vh, 760px) - 52px);
}
.dialog-loading { color: var(--muted, #64748b); padding: 18px 2px; }

/* Inside the dialog the detail is already framed, so drop its own card. */
.dialog-body .person-detail {
    border: 0; box-shadow: none; padding: 16px 0 0; background: transparent;
}
.dialog-body .person-detail h1 { font-size: 1.15rem; }

@media (max-width: 560px) {
    .person-dialog { width: calc(100vw - 16px); }
    .dialog-body .person-detail { gap: 16px; }
}

/* The name recording: a real audio player, sized to the detail column. */
audio.namerec { width: 100%; max-width: 320px; height: 36px; vertical-align: middle; }

/* ------------------------------------------------------------- college wordmark
 *
 * The public bar carries the Wellesley wordmark supplied by the web team
 * (assets/wellesley.svg). The SVG's own viewBox is 1438x1093 -- far taller than
 * a bar -- so it is constrained by HEIGHT here and left to keep its ratio;
 * setting a width instead makes it dictate the bar's height.
 *
 * The mark is a fixed brand blue and does not follow --accent: it is the
 * college's identity, not this app's theme.
 */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .wordmark { height: 34px; width: auto; display: block; }
.brand .brand-text { font-weight: 600; letter-spacing: -.01em; }

/* On the dark bar the blue mark loses contrast, so it sits on a light chip. */
.pubbar .brand .wordmark {
    background: #fff;
    border-radius: 4px;
    padding: 4px 8px;
}

@media (max-width: 560px) {
    .brand .wordmark { height: 26px; }
    .brand .brand-text { display: none; }
}

/* Sticky footer: the public page fills the viewport and the main area grows. */
.public {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.pubmain {
  flex:1;
}

/* Department listing: keep phone numbers on one line. */
.nowrap { white-space: nowrap; }