/* Buckley Recruiting : all styling lives here */

:root {
  --navy: #1D279D;
  --navy-dark: #151C73;
  --ink: #1B1B1F;
  --muted: #6B6F80;
  --line: #E2E5EE;
  --bg: #F6F7FB;
  --card: #FFFFFF;
  --amber: #B5730B;
  --amber-bg: #FDF3E0;
  --red: #A32D2D;
  --red-bg: #FCEBEB;
  --green: #2F6B21;
  --green-bg: #EDF5E6;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
}

.hidden { display: none !important; }

/* ---------- sign in ---------- */

#signin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.signin-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
}

.signin-card h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--navy);
}

.signin-card p.sub { color: var(--muted); margin: 0 0 22px; font-size: 13px; }

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

header {
  background: var(--navy);
  color: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 52px;
}

header .brand { font-weight: 600; font-size: 15px; letter-spacing: .01em; }

header nav { display: flex; gap: 4px; margin-left: 8px; }

header nav button {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
header nav button:hover { background: rgba(255,255,255,.12); color: #fff; }
header nav button.on { background: #fff; color: var(--navy); font-weight: 600; }

header .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
header .who { font-size: 12px; color: rgba(255,255,255,.75); }

#globalsearch {
  width: 220px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
}
#globalsearch::placeholder { color: rgba(255,255,255,.6); }

main { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }

/* ---------- generic ---------- */

h2.page { font-size: 20px; font-weight: 600; margin: 0 0 3px; }
p.pagesub { color: var(--muted); margin: 0 0 20px; font-size: 13px; }
h3.sec { font-size: 15px; font-weight: 600; margin: 26px 0 10px; }

/* collapsible sections */
h3.sec.fold {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
h3.sec.fold:hover { color: var(--navy); }
h3.sec.fold .caret {
  font-size: 12px;
  color: var(--muted);
  transition: transform .15s ease;
  display: inline-block;
}
h3.sec.fold.closed .caret { transform: rotate(-90deg); }
h3.sec.fold .count {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.row { display: flex; gap: 14px; flex-wrap: wrap; }
.grow { flex: 1 1 300px; }

button, .btn {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
}
button:hover { background: var(--navy-dark); }
button.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
button.ghost:hover { background: var(--bg); }
button.small { padding: 4px 9px; font-size: 12px; }
button:disabled { opacity: .5; cursor: default; }

input, select, textarea {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  width: 100%;
}
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field { margin-bottom: 12px; }

/* ---------- tiles ---------- */

.tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.tile {
  flex: 1 1 130px;
  border-radius: var(--radius);
  padding: 12px 14px;
  border: 1px solid;
}
.tile .n { font-size: 24px; font-weight: 600; line-height: 1.1; }
.tile .l { font-size: 12px; margin-top: 2px; }

.bigbtns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.bigbtn {
  flex: 1 1 200px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.bigbtn:hover { border-color: var(--navy); background: #fff; }
.bigbtn .t { font-size: 16px; font-weight: 600; color: var(--navy); }
.bigbtn .s { font-size: 12px; color: var(--muted); margin-top: 4px; }

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

table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card); }
th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
.tablewrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

a.link { color: var(--navy); cursor: pointer; text-decoration: underline; }

.pill {
  display: inline-block; font-size: 11px; padding: 2px 9px;
  border-radius: 11px; font-weight: 600;
}

/* ---------- training boards ---------- */

.board { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.board .head { padding: 9px 14px; font-size: 13px; font-weight: 600; display: flex; align-items: center; }
.board .head .count { margin-left: auto; font-weight: 400; font-size: 12px; }
.board.current .head { background: #85B7EB; color: #042C53; }
.board.next    .head { background: #97C459; color: #173404; }
.board.upcoming .head { background: #AFA9EC; color: #26215C; }
.board .empty { padding: 12px 14px; color: var(--muted); font-size: 13px; background: #fff; }

/* ---------- modal ---------- */

.overlay {
  position: fixed; inset: 0; background: rgba(20,22,40,.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto; z-index: 50;
}
.modal {
  background: #fff; border-radius: 14px; padding: 22px;
  width: 100%; max-width: 520px;
}
.modal h3 { margin: 0 0 16px; font-size: 17px; font-weight: 600; }

.warn { background: var(--amber-bg); border: 1px solid #EAC98A; color: var(--amber);
        padding: 10px 12px; border-radius: 8px; font-size: 12px; margin-bottom: 12px; }
.err  { background: var(--red-bg); border: 1px solid #EDB4B4; color: var(--red);
        padding: 10px 12px; border-radius: 8px; font-size: 12px; margin-bottom: 12px; }
.good { background: var(--green-bg); border: 1px solid #BBD69F; color: var(--green);
        padding: 10px 12px; border-radius: 8px; font-size: 12px; margin-bottom: 12px; }

.muted { color: var(--muted); }
.kv { display: flex; padding: 5px 0; font-size: 13px; }
.kv .k { width: 100px; color: var(--muted); flex: none; }

#toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px;
  font-size: 13px; z-index: 99;
}

/* ---------------------------------------------------------------------
   PRINTING A CANDIDATE

   #printarea is empty and hidden on screen. Just before printing it is
   filled with only the sections that were ticked, and the print rules
   below hide everything else on the page. That way the printout is not
   whatever happened to be expanded on screen at the time.
   --------------------------------------------------------------------- */
#printarea { display: none; }

.printpick {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 2px; font-size: 13px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.printpick:last-child { border-bottom: 0; }
.printpick input { width: auto; margin: 0; flex: none; }
.printpick .sub { color: var(--muted); font-size: 11px; }

@media print {
  /* everything that is not the printout goes away */
  body > *:not(#printarea) { display: none !important; }

  #printarea { display: block !important; }

  @page { margin: 14mm; }

  body { background: #fff; font-size: 11pt; color: #000; }

  .pr-head { border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px; }
  .pr-head .pr-name { font-size: 19pt; font-weight: 700; }
  .pr-head .pr-meta { font-size: 9pt; color: #444; margin-top: 3px; }
  .pr-head .pr-note { font-size: 11pt; font-weight: 600; margin-top: 6px; }

  .pr-sec { margin: 0 0 16px; }
  /* keep a section together on one page where it will fit */
  .pr-sec { break-inside: avoid; page-break-inside: avoid; }
  .pr-sec h2 {
    font-size: 10pt; text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid #999; padding-bottom: 3px; margin: 0 0 8px;
  }

  .pr-kv { display: flex; padding: 2px 0; font-size: 10.5pt; }
  .pr-kv .k { width: 120px; color: #444; flex: none; }

  .pr-grid { display: flex; flex-wrap: wrap; }
  .pr-grid .pr-kv { width: 50%; }

  table.pr { width: 100%; border-collapse: collapse; font-size: 10pt; }
  table.pr th {
    text-align: left; border-bottom: 1px solid #999; padding: 3px 6px 3px 0;
    font-size: 9pt; text-transform: uppercase; letter-spacing: .04em; color: #444;
  }
  table.pr td { border-bottom: 1px solid #DDD; padding: 4px 6px 4px 0; vertical-align: top; }

  .pr-q { margin-bottom: 9px; }
  .pr-q .q { font-weight: 600; font-size: 10.5pt; }
  .pr-q .a { padding-left: 12px; }
  /* an unanswered question prints as a ruled line to write on */
  .pr-q .blank { display: block; border-bottom: 1px solid #BBB; height: 15pt; margin: 3px 0 0 12px; }

  .pr-dna { border: 1.5px solid #000; padding: 8px 10px; font-size: 9.5pt; }
  .pr-dna .st { font-weight: 700; font-size: 8.5pt; text-transform: uppercase; margin-top: 6px; }
  .pr-dna .st:first-of-type { margin-top: 3px; }

  .pr-foot { margin-top: 18px; padding-top: 6px; border-top: 1px solid #999;
             font-size: 8pt; color: #555; }
}

/* ---------------------------------------------------------------------
   MY DAY

   Sits above the pipeline. Two halves: what is due today on the left,
   the week on the right. The week grid is Monday to Friday with an
   all-day strip along the top, because a first day and a holiday are
   not 9am things and pretending otherwise makes the grid lie.
   --------------------------------------------------------------------- */
.myday {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px;
}
.myday-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.wknav { margin-left: auto; display: flex; gap: 6px; flex: none; }

/* left: the task list */
.md-task {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: 7px; font-size: 13px; background: var(--card);
}
.md-task.late { border-color: #EDB4B4; background: var(--red-bg); }
.md-task.blocked { opacity: .62; }
.md-task input { width: auto; margin: 2px 0 0; flex: none; cursor: pointer; }
.md-task .t { font-weight: 600; }
.md-task .w { color: var(--muted); font-size: 11px; }
.md-empty { color: var(--muted); font-size: 13px; padding: 14px 2px; }

/* right: the week grid */
.wk { display: grid; grid-template-columns: 46px repeat(5, 1fr); border: 1px solid var(--line);
      border-radius: 8px; overflow: hidden; }
.wk .hd { background: var(--bg); padding: 6px 8px; font-size: 11px; font-weight: 600;
          border-bottom: 1px solid var(--line); text-align: center; }
.wk .hd.today { background: #EEF1FC; color: var(--navy); }
.wk .hd .dow { display: block; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.wk .hd .dnum { display: block; font-size: 15px; }
.wk .corner { background: var(--bg); border-bottom: 1px solid var(--line); }

/* the all-day strip */
.wk .allday { border-bottom: 1px solid var(--line); padding: 3px; min-height: 26px;
              border-left: 1px solid var(--line); }
.wk .allday.today { background: #F7F9FF; }
.wk .adlabel { background: var(--bg); border-bottom: 1px solid var(--line);
               font-size: 9px; color: var(--muted); padding: 6px 4px; text-align: right;
               text-transform: uppercase; letter-spacing: .04em; }

/* the timed rows */
.wk .hr { background: var(--bg); font-size: 10px; color: var(--muted);
          padding: 2px 6px 0 0; text-align: right; border-top: 1px solid var(--line); }
.wk .cell { border-left: 1px solid var(--line); border-top: 1px solid var(--line);
            min-height: 30px; padding: 2px; }
.wk .cell.today { background: #F7F9FF; }
.wk .cell.holiday { background: repeating-linear-gradient(
      45deg, transparent, transparent 5px, rgba(0,0,0,.035) 5px, rgba(0,0,0,.035) 10px); }

/* an event chip */
.ev { display: block; font-size: 11px; line-height: 1.3; padding: 3px 5px;
      border-radius: 5px; margin-bottom: 2px; text-decoration: none;
      border-left: 3px solid; cursor: pointer; }
.ev .when { font-weight: 700; }
.ev .who  { display: block; }
.ev.k-interview  { background: #EEF1FC; border-color: var(--navy);  color: #17205C; }
.ev.k-screen     { background: #E8F4FB; border-color: #2A7FB8;      color: #0C4468; }
.ev.k-firstday   { background: var(--green-bg); border-color: var(--green); color: #24521A; }
.ev.k-training   { background: #F3EDFA; border-color: #7A4FA8;      color: #46256B; }
.ev.k-ninety     { background: var(--amber-bg); border-color: var(--amber); color: #6B4406; }
.ev.k-holiday    { background: #EFEFF3; border-color: #9A9AA8;      color: #4A4E5C; font-weight: 600; }
.ev.done { opacity: .5; }

.wklegend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.wklegend span { display: inline-flex; align-items: center; gap: 4px; }
.wklegend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

@media (max-width: 780px) {
  .wk { grid-template-columns: 38px repeat(5, 1fr); }
  .ev .who { font-size: 10px; }
}

/* ---------------------------------------------------------------------
   MY WORKDAY

   A day at a time. Three views of the same day: grouped by category,
   straight down by time, or the week grid. Tasks underneath, with
   today's at the top.
   --------------------------------------------------------------------- */
.viewpick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

/* a category block: Interviews, Phone screens, First days ... */
.cat { margin-bottom: 18px; }
.cat > .cathead {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px;
  padding-bottom: 5px; border-bottom: 2px solid var(--line);
}
.cat > .cathead .ct { font-size: 13px; font-weight: 700; }
.cat > .cathead .cn { font-size: 11px; color: var(--muted); }
.cat.c-interview  > .cathead { border-color: var(--navy); }
.cat.c-screen     > .cathead { border-color: #2A7FB8; }
.cat.c-firstday   > .cathead { border-color: var(--green); }
.cat.c-training   > .cathead { border-color: #7A4FA8; }
.cat.c-ninety     > .cathead { border-color: var(--amber); }
.cat.c-holiday    > .cathead { border-color: #9A9AA8; }

/* one line on the day */
.slot {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: 6px; font-size: 13px; background: var(--card);
}
.slot .tm { flex: 0 0 76px; font-weight: 700; font-variant-numeric: tabular-nums; }
.slot .tm.allday { font-weight: 600; color: var(--muted); font-size: 11px; }
.slot .nm { font-weight: 600; }
.slot .sub { color: var(--muted); font-size: 11px; }
.slot .kindtag { margin-left: auto; flex: none; }
.slot.done { opacity: .55; }
.slot.now { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--navy); }

.dayempty { color: var(--muted); font-size: 13px; padding: 18px 2px; }

/* task buckets */
.bucket { margin-bottom: 14px; }
.bucket > .bh {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin: 0 0 6px;
}
.bucket.b-past > .bh { color: var(--red); }
.bucket.b-today > .bh { color: var(--navy); }

/* the Admin timeline */
.tl { display: flex; flex-direction: column; gap: 4px; }
.tl-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.tl-row .who { flex: 0 0 110px; text-align: right; color: var(--muted); }
.tl-bars { display: flex; gap: 3px; flex: 1; align-items: flex-end; min-height: 26px; }
.tl-bar { flex: 1; background: #E4E8F5; border-radius: 3px 3px 0 0; position: relative;
          min-height: 3px; }
.tl-bar.late { background: #EDB4B4; }
.tl-bar .n { position: absolute; top: -14px; left: 0; right: 0; text-align: center;
             font-size: 9px; color: var(--muted); }
.tl-axis { display: flex; gap: 3px; margin-left: 118px; }
.tl-axis span { flex: 1; text-align: center; font-size: 9px; color: var(--muted); }

/* an interview on the candidate page */
.ivrow { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
         margin-bottom: 6px; font-size: 13px; }
.ivrow.done { opacity: .62; }

/* ---------------------------------------------------------------------
   Pipeline tiles are buttons now. Clicking one opens the people behind
   the number, underneath, rather than navigating away.
   --------------------------------------------------------------------- */
.tile.tileclick {
  cursor: pointer; text-align: left; width: 100%;
  /* buttons are white-on-navy by default, which on a pale tile is
     invisible. everything below puts the plain tile look back. */
  font: inherit;
  color: var(--ink);
  padding: 12px 14px;
  transition: transform .06s ease, box-shadow .06s ease;
}
.tile.tileclick .n { color: var(--ink); }
.tile.tileclick .l { color: var(--muted); }
.tile.tileclick:hover { color: var(--ink); }
.tile.tileclick:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.tile.tileclick.on { box-shadow: inset 0 -3px 0 var(--navy); }
.tile.tileclick .l::after { content: " \203A"; opacity: .45; }

.drill { border: 1px solid var(--line); border-radius: var(--radius);
         background: var(--card); padding: 12px 14px; margin: 12px 0 4px; }
.drillhead { display: flex; align-items: center; margin-bottom: 8px; }

/* sortable table headers */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--navy); }
th.sortable.sorted { color: var(--navy); }
th.sortable .arrow { font-size: 8px; margin-left: 3px; vertical-align: middle; }

/* Admin tabs */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line);
        margin: 0 0 18px; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 8px 14px; cursor: pointer;
}
.tabs button:hover { background: var(--bg); color: var(--ink); }
.tabs button.on { color: var(--navy); border-bottom-color: var(--navy); background: none; }

/* one question inside the script editor */
.qrow { display: flex; gap: 8px; align-items: flex-start; padding: 8px;
        border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; }
.qrow .seq { flex: 0 0 26px; color: var(--muted); font-size: 11px; padding-top: 8px; }
.qrow .body { flex: 1; min-width: 0; }
.qrow .acts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; }
.qrow.ko { border-left: 3px solid var(--amber); }
.qrow.off { opacity: .5; }
.tabpane { animation: fadein .12s ease; }
@keyframes fadein { from { opacity: .4 } to { opacity: 1 } }

/* what a role can do, shown as you pick it */
.rolehint { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
            padding: 9px 11px; margin: 6px 0 12px; font-size: 12px; }
.rolehint .rh-title { font-weight: 600; margin-bottom: 4px; }
.rolehint .rh-line { color: var(--muted); padding: 1px 0 1px 12px; position: relative; }
.rolehint .rh-line::before { content: "\2713"; position: absolute; left: 0; color: var(--green); }
.rolehint .rh-line.no { color: var(--red); }
.rolehint .rh-line.no::before { content: "\2715"; color: var(--red); }

/* the app version, so a stale cache is visible rather than confusing */
.ver { font-size: 10px; opacity: .5; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* the version, bottom of every page */
#appfoot {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  padding: 18px 0 26px; margin-top: 30px;
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--muted);
}
#appfoot .link { font-size: 11px; }

.verrow { display: flex; gap: 10px; padding: 7px 0; font-size: 13px;
          border-bottom: 1px solid var(--line); }
.verrow:last-child { border-bottom: 0; }
.verrow .vn { flex: 0 0 46px; font-weight: 700; color: var(--navy); }
.verrow.now .vn { color: var(--green); }