/* ═══════════════════════════════════════════════════════════════════
   ReqGate — styled to sit next to ROPHE.

   Everything here is measured off the ROPHE admin screens so the two feel
   like one suite: the dark navy top bar, the blue-grey canvas, white cards
   with hairline borders, the blue primary button, the generous row height
   in data tables, and Inter throughout.

   Light only, on purpose. ROPHE has no dark mode and a tool that flips to
   dark next to one that does not reads as a different product.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;

  /* ── Shell ── */
  --nav:            #2e3648;   /* the top bar */
  --nav-hover:      rgba(255,255,255,.10);
  --nav-active:     rgba(255,255,255,.16);
  --nav-text:       #ffffff;
  --nav-text-dim:   rgba(255,255,255,.72);

  --canvas:         #eef1f6;   /* page behind the cards */
  --surface:        #ffffff;
  --surface-2:      #f7f8fb;   /* table headers, sunken rows */

  --text:           #1c2333;
  --text-2:         #5a6478;
  --text-3:         #8b93a6;

  --line:           #e4e7ee;
  --line-2:         #d3d8e2;

  /* ── Accents ── */
  --primary:        #2467d4;
  --primary-hover:  #1c56b5;
  --primary-soft:   #e8f0fd;
  --primary-line:   #c3d8f7;
  --link:           #1a62c9;

  --ok:             #2f855a;
  --ok-soft:        #e6f4ec;
  --ok-line:        #bfe0cd;

  --warn:           #b45309;
  --warn-soft:      #fdf2e3;
  --warn-line:      #f0dab6;

  --danger:         #c0392b;
  --danger-soft:    #fdecea;
  --danger-line:    #f5c9c3;

  --violet:         #6d4fc4;
  --avatar:         #4a9d7a;

  /* ── Form ── */
  --radius:         8px;
  --radius-lg:      10px;
  --shadow-sm:      0 1px 2px rgba(28,35,51,.06);
  --shadow:         0 1px 3px rgba(28,35,51,.08), 0 1px 2px rgba(28,35,51,.04);
  --shadow-lg:      0 8px 24px rgba(28,35,51,.12), 0 2px 6px rgba(28,35,51,.06);
  --focus:          0 0 0 3px rgba(36,103,212,.28);

  /* Strong curves: the built-in CSS easings are too weak to read as
     deliberate. Entrances use ease-out; movement across the screen uses
     ease-in-out. `ease-in` is never correct here — it starts slow, exactly
     when the eye is on it. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --violet:      #6d4fc4;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

/* `display: inline-flex` on .btn outranks the hidden attribute's UA rule, so
   anything toggled with el.hidden stays visible without this. */
[hidden] { display: none !important; }

/* min-height, not height: `height: 100%` caps body's own box at exactly
   one viewport tall. A position:sticky element can only stick while its
   PARENT's box is in view — once scrolled past that first viewport of
   content, every sticky element (the topbar, the stage band, the section
   rail, the board's lane headers) detached and scrolled away with the page.
   min-height keeps the "fill the viewport on a short page" behaviour this
   was for, without capping how tall body is allowed to grow. */
html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

/* ── Top bar ─────────────────────────────────────────────────────── */

.topbar {
  background: var(--nav);
  color: var(--nav-text);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 20px;
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.brand {
  display: flex;
  align-items: center;
  margin-right: 24px;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
/* A small white chip behind the real logo, not the navy bar directly — the
   PNG's own colours (brand blue + a mid grey wordmark) sit around 3.2–3.8:1
   against the navy, fine for a large mark but not a sure thing at every
   screen's black level. White underneath makes it exact, matching how the
   same logo already sits on a white ground everywhere else on medelitegrp.com. */
.brand-mark {
  display: flex; align-items: center;
  height: 30px; padding: 0 10px;
  background: #fff; border-radius: 6px;
}
.brand-mark img { display: block; height: 17px; width: auto; }

.topnav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }

.topnav a {
  color: var(--nav-text);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .12s ease;
}
.topnav a:hover { background: var(--nav-hover); text-decoration: none; }
.topnav a.on { background: var(--nav-active); }

.topnav .pill {
  display: inline-block;
  min-width: 18px;
  margin-left: 7px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(255,255,255,.22);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 18px;
}

.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: 16px; }

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--avatar);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  flex: none;
}

.usermenu { position: relative; }
.usermenu > button {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 2px; cursor: pointer;
  font-family: var(--font);
}
.usermenu-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 220px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 60;
}
.usermenu-panel .who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.usermenu-panel .who strong { display: block; font-size: 13px; }
.usermenu-panel .who span { font-size: 12px; color: var(--text-3); }
.usermenu-panel a, .usermenu-panel button.linkish {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border-radius: 6px; color: var(--text);
  font-size: 13px; background: none; border: 0; cursor: pointer;
  font-family: var(--font);
}
.usermenu-panel a:hover, .usermenu-panel button.linkish:hover { background: var(--surface-2); text-decoration: none; }

/* ── Page ────────────────────────────────────────────────────────── */

.page { padding: 20px 24px 40px; max-width: 1680px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head p { margin: 4px 0 0; color: var(--text-2); font-size: 13px; max-width: 70ch; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.card-body { padding: 20px; }

/* ── Stat strip ──────────────────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}
.stat b { display: block; font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.stat span { display: block; margin-top: 4px; font-size: 13px; color: var(--text-2); }
.stat.is-warn b { color: var(--warn); }
.stat.is-ok b { color: var(--ok); }

/* ── Controls ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px;
  border-radius: var(--radius); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text);
  font-family: var(--font); font-size: 13.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger { background: var(--surface); border-color: var(--danger-line); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.search { position: relative; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }


input[type=text], input[type=search], input[type=email], input[type=tel],
input[type=date], input[type=password], select, textarea {
  width: 100%; height: 38px; padding: 0 11px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font-family: var(--font); font-size: 14px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea {
  height: auto; min-height: 76px; padding: 9px 11px; line-height: 1.55;
  /* JS grows these as you type; vertical resize stays available as an escape. */
  resize: vertical; overflow: hidden;
}
select { appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235a6478' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 17px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--text-3); }

/* After the generic input rules, so it is not overridden by them. */
.search input[type=search] { padding-left: 34px; }

.field { margin-bottom: 16px; }
.field > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--text); }
.field .req { color: var(--danger); margin-left: 2px; }
.field .hint { margin-top: 5px; font-size: 12px; color: var(--text-3); }
.field .err { margin-top: 5px; font-size: 12px; color: var(--danger); font-weight: 500; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 20px; }

.section-title {
  display: flex; align-items: baseline; gap: 10px;
  margin: 26px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.section-title:first-child { margin-top: 0; }
.section-title h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); }
.section-title span { font-size: 12.5px; color: var(--text-3); }

/* ── Chips ───────────────────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-2); white-space: nowrap;
}
.chip-blue   { background: var(--primary-soft); border-color: var(--primary-line); color: var(--link); }
.chip-ok     { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.chip-warn   { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.chip-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ── Filter bar ──────────────────────────────────────────────────── */

/* One row. Controls shrink to fit rather than wrapping onto a second line —
   a filter bar that reflows as you add facets stops reading as a toolbar. */
.filterbar {
  margin-bottom: 12px; display: flex; align-items: center; gap: 7px;
  flex-wrap: nowrap; min-width: 0;
}
.filterbar .search { flex: 1 1 180px; min-width: 132px; max-width: 280px; }
.filterbar .search input[type=search] { width: 100%; height: 32px; }
.filterbar .ffilter {
  width: auto; min-width: 0; flex: 1 1 118px; max-width: 168px; height: 32px;
  font-size: 12.5px; padding: 0 26px 0 9px;
  background-position: right 6px center; background-size: 15px;
  text-overflow: ellipsis;
}
.filterbar #sortBy { flex: 0 1 132px; }
.filterbar .btn { height: 32px; flex: none; }
.fbar-count { font-size: 12.5px; color: var(--text-3); flex: none; white-space: nowrap; }
@media (max-width: 1100px) { .filterbar { flex-wrap: wrap; } }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line); }

/* Export menu — a <details>, so it opens with no JS and closes on Escape. */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  width: 274px; max-width: calc(100vw - 32px); padding: 6px;
  max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: pop 160ms var(--ease-out);
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu-label { padding: 7px 10px 5px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 7px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font-family: var(--font); font-size: 13px;
  cursor: pointer; text-align: left;
}
.menu-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-item .n { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu-note { margin: 4px 10px 6px; font-size: 11.5px; color: var(--text-3); line-height: 1.4; }

/* ── Board ───────────────────────────────────────────────────────── */

.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(248px, 1fr));
  gap: 12px;
  /* stretch, not start: every lane runs to the same floor, so the column
     colour is a column and not a box sitting under a few cards. */
  align-items: stretch;
  min-height: calc(100vh - 152px);
}
@media (max-width: 1180px) {
  .board { grid-auto-flow: column; grid-template-columns: none;
           grid-auto-columns: minmax(272px, 1fr); overflow-x: auto; padding-bottom: 10px; }
}

/* One palette per column, so a card's lane is readable at a glance instead of
   being spelled out in a chip on every card. The lane is the tinted layer;
   cards stay white and lift off it. */
.lane[data-lane="submitted"] { --tint: #eceff4; --tint-line: rgba(28,35,51,.10); --dot: var(--text-3); }
.lane[data-lane="in_review"] { --tint: #e9f2fb; --tint-line: rgba(36,103,212,.20); --dot: var(--primary); }
.lane[data-lane="approved"]  { --tint: #efecfb; --tint-line: rgba(109,79,196,.20); --dot: var(--violet); }
.lane[data-lane="live"]      { --tint: #e6f4ec; --tint-line: rgba(47,133,90,.22); --dot: var(--ok); }
.lane[data-lane="closed"]    { --tint: #fdeeec; --tint-line: rgba(192,57,43,.18); --dot: var(--danger); }

.lane {
  background: var(--tint);
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; min-height: 0;
  transition: box-shadow 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.lane.drop {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(36,103,212,.22), var(--shadow);
}

.lane-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px 10px;
  position: sticky; top: 58px; z-index: 5;
  background: var(--tint);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.lane-head h2 { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; flex: 1; }
.lane-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); flex: none; }
.lane-n {
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  background: rgba(255,255,255,.72); border-radius: 999px; padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
/* The lane body takes the slack, so a short column is still a full column. */
.lane-body { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 7px; flex: 1; }

/* Every lane ends in a dashed slot: it gives the column a floor and shows
   where a dragged card would land. */
.lane-tail {
  border: 1px dashed var(--tint-line); border-radius: var(--radius);
  min-height: 42px; display: grid; place-items: center;
  font-size: 11.5px; color: var(--text-3);
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.lane-tail span { transition: opacity 150ms var(--ease-out); }
.lane-tail:not(.is-empty) span { opacity: 0; }
.lane.drop .lane-tail { border-color: var(--primary); background: rgba(255,255,255,.5); }

/* ── Request card ────────────────────────────────────────────────── */
/* `.rcard`, not `.card`: `.card` is the generic page container used on every
   page, and styling board cards with it put a grab cursor on the Templates
   table and every form. */

.rcard {
  position: relative; display: block;
  padding: 9px 11px 10px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(28,35,51,.07);
  color: inherit; cursor: grab;
  transition: border-color 130ms var(--ease-out), box-shadow 130ms var(--ease-out),
              transform 130ms var(--ease-out);
}
.rcard:active { cursor: grabbing; transform: scale(.985); }
.rcard:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; box-shadow: none; }
/* Gated: a tap on a touch screen fires a false hover and leaves the card stuck
   in its hover state. */
@media (hover: hover) and (pointer: fine) {
  .rcard:hover { border-color: var(--line-2); box-shadow: 0 3px 12px rgba(28,35,51,.10); text-decoration: none; }
}
.rcard.dragging { opacity: .4; }
.rcard.hidden { display: none; }

/* A card that just arrived in this lane. Fades out on its own — it marks the
   landing spot for a couple of seconds, then stops being noise. */
.rcard.just-moved { border-color: var(--primary-line); box-shadow: 0 0 0 2px rgba(36,103,212,.16); }

/* Age rail — only on work someone still owes an action on. */
.rcard::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 2.5px; border-radius: 0 3px 3px 0; background: transparent;
}
.rcard.age-ok::before   { background: var(--ok); }
.rcard.age-warn::before { background: var(--warn); }
.rcard.age-late::before { background: var(--danger); }

.rcard-top { display: flex; align-items: flex-start; gap: 7px; }
.rcard-title {
  flex: 1; min-width: 0;
  font-size: 12.9px; font-weight: 570; line-height: 1.32;
  letter-spacing: -.012em; color: var(--text);
}
.rcard-ticket { font-size: 11px; color: var(--text-3); flex: none; padding-top: 1px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-variant-numeric: tabular-nums; }
.rcard-sub {
  margin-top: 2px; color: var(--text-2); font-size: 11.9px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Terms, on one dim line. Present when you scan for them, silent otherwise. */
.rcard-meta {
  margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px 6px;
  font-size: 11px; color: var(--text-3);
}
.rcard-meta span { display: inline-flex; align-items: center; gap: 5px; }
.rcard-meta span + span::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .55;
}
.rcard-meta .is-new { color: var(--link); font-weight: 550; }

/* Why a request stopped. Without it a Rejected card is a dead end — you have
   to open it to learn anything. */
.rcard-note {
  margin-top: 5px; padding: 4px 7px; border-radius: 5px;
  background: var(--surface-2); color: var(--text-2);
  font-size: 11.4px; line-height: 1.35; border-left: 2px solid var(--line-2);
}
.rcard-note.bad  { background: var(--danger-soft); color: #8f281d; border-left-color: var(--danger); }
.rcard-note.warn { background: var(--warn-soft); color: #7c3c06; border-left-color: var(--warn); }
.rcard-note b { font-weight: 620; }

.rcard-foot {
  margin-top: 7px; display: flex; align-items: center; gap: 6px;
  color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums;
}
.rcard-foot .right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.rcard-foot .owner { max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcard-foot .flag { color: var(--danger); font-weight: 600; }
.rcard-foot .faint { opacity: .8; }
/* Labelled, so it is never mistaken for the TA number at top right. */
.rcard-req { display: inline-flex; align-items: center; gap: 4px; }
.rcard-req i {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  color: var(--text-3); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 4px;
}
.rcard-req .mono { color: var(--text-2); font-size: 10.5px; }

/* A refused move shakes the card that was refused. Transform only. */
@keyframes refuse {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}
.rcard.refused { animation: refuse 400ms var(--ease-out); border-color: var(--danger-line); }

/* ── Tables ──────────────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; font-weight: 500; font-size: 13px; color: var(--text-2);
  padding: 12px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

.empty { padding: 56px 20px; text-align: center; color: var(--text-2); }
.empty h3 { margin-bottom: 6px; }
.empty p { margin: 0 auto 16px; max-width: 46ch; font-size: 13px; color: var(--text-3); }

/* ── Detail page ─────────────────────────────────────────────────── */

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1080px) { .detail { grid-template-columns: 1fr; } }

.kv { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0; }
.kv > dt { padding: 10px 0; font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--line); }
.kv > dd { padding: 10px 0; margin: 0; font-size: 13.5px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.kv > dd.blank { color: var(--text-3); font-style: italic; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; } .kv > dt { border-bottom: 0; padding-bottom: 0; } }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 18px 22px; }
.timeline li::before {
  content: ''; position: absolute; left: 3px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary-line);
}
.timeline li:not(:last-child)::after {
  content: ''; position: absolute; left: 6.5px; top: 15px; bottom: 0;
  width: 1px; background: var(--line);
}
.timeline .ev-action { font-size: 13px; font-weight: 500; }
.timeline .ev-detail { font-size: 12.5px; color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; }
.timeline .ev-when { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

pre.payload {
  margin: 0; padding: 14px; border-radius: var(--radius);
  background: #1e2433; color: #d8e0f0;
  font-size: 12px; line-height: 1.6; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Banners ─────────────────────────────────────────────────────── */

.banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 15px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 13px; margin-bottom: 16px;
}
.banner svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.banner-ok     { background: var(--ok-soft); border-color: var(--ok-line); color: #245c40; }
.banner-warn   { background: var(--warn-soft); border-color: var(--warn-line); color: #7c3c06; }
.banner-danger { background: var(--danger-soft); border-color: var(--danger-line); color: #8f281d; }
.banner-info   { background: var(--primary-soft); border-color: var(--primary-line); color: #174a9e; }

/* ── Toast ───────────────────────────────────────────────────────── */

#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  max-width: min(560px, calc(100vw - 32px));
  background: var(--nav); color: #fff;
  padding: 12px 17px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); font-size: 13px; line-height: 1.45;
  opacity: 0; pointer-events: none; z-index: 90;
  transition: opacity .18s ease, transform .18s ease;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.report-toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; align-items: center; gap: 12px;
  max-width: min(460px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 10px; background: #1f2a3d; color: #fff;
  font-size: 13.5px; box-shadow: 0 8px 28px rgba(15, 23, 42, .28); opacity: 0; transform: translateY(12px);
  pointer-events: none; transition: opacity .2s, transform .2s; }
.btn.is-busy, button.is-busy { cursor: progress; opacity: .75; }
.btn.is-busy::before, button.is-busy::before { content: ""; width: 12px; height: 12px; margin-right: 8px; flex: none;
  display: inline-block; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: busy-spin .7s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::before, button.is-busy::before { animation-duration: 2s; } }
.report-toast.show { opacity: 1; transform: none; pointer-events: auto; }
.report-toast a { color: #9cc3ff; font-weight: 600; white-space: nowrap; }
.report-toast button { background: none; border: 0; color: #c9d3e3; font-size: 18px; cursor: pointer; padding: 0 2px; }

/* ── Login ───────────────────────────────────────────────────────── */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(180deg, #2e3648 0%, #2e3648 44%, var(--canvas) 44%); }
.login-card { width: 100%; max-width: 396px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 30px; }
.login-card .brand { color: var(--text); margin: 0 0 4px; font-size: 17px; }
.login-card .brand svg { color: var(--primary); }
.login-card > p { margin: 0 0 22px; font-size: 13px; color: var(--text-2); }
.login-card .btn { width: 100%; justify-content: center; height: 42px; }
.login-foot { margin-top: 18px; font-size: 12px; color: var(--text-3); text-align: center; }

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

/* Reduced motion means fewer and gentler animations, not none. Colour and
   opacity feedback stays — it is how the interface answers you. Movement goes. */
@media (prefers-reduced-motion: reduce) {
  .rcard, .rcard:active { transform: none !important; }
  .rcard.refused { animation: none; }
  .menu-pop { animation: none; }
  *, *::before, *::after { transition-duration: 120ms !important; }
}

details > summary::-webkit-details-marker { display: none; }

/* The requisition number is read out loud and typed into other systems, so it
   is set large and monospaced rather than buried in a row of metadata. */
.reqid-card { border-color: var(--primary-line); }
.reqid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 21px; font-weight: 600; letter-spacing: .01em;
  color: var(--link); user-select: all;
}

/* ═══════════════════════════════════════════════════════════════════
   Request page
   ═══════════════════════════════════════════════════════════════════ */

/* The same palette as the board lanes, on the page for a card in that lane.
   Opening a card is then continuous with where it sat, instead of landing on
   a blank white page that gives no clue what stage you are looking at. */
[data-stage="submitted"] { --tint: #eceff4; --tint-line: rgba(28,35,51,.12); --dot: #5a6478; }
[data-stage="in_review"] { --tint: #e9f2fb; --tint-line: rgba(36,103,212,.22); --dot: var(--primary); }
[data-stage="approved"]  { --tint: #efecfb; --tint-line: rgba(109,79,196,.22); --dot: var(--violet); }
[data-stage="live"]      { --tint: #e6f4ec; --tint-line: rgba(47,133,90,.24); --dot: var(--ok); }
[data-stage="closed"]    { --tint: #fdeeec; --tint-line: rgba(192,57,43,.20); --dot: var(--danger); }

.stage-band {
  position: sticky;
  top: 58px;
  z-index: 20;
  background: var(--tint);
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.stage-band .page-head { margin-bottom: 0; gap: 8px 16px; }
.stage-band .page-head > div:first-child {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 3px 14px; flex: 1; min-width: 0;
}
.stage-band h1 { margin: 0; font-size: 18px; line-height: 1.3; }
.stage-band .stage-sub {
  flex-basis: 100%; max-width: none; margin: 0;
  font-size: 12px; line-height: 1.4;
}
.crumb { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--text-3); }
.crumb a { color: inherit; }
.stage-sub { margin: 5px 0 0; font-size: 13px; color: var(--text-2); max-width: 78ch; }
.stage-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--tint-line);
  font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.stage-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }

/* ── Workspace: rail, sections, aside ────────────────────────────── */

.workspace {
  display: grid;
  grid-template-columns: 186px minmax(0, 1fr) 316px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1240px) { .workspace { grid-template-columns: 168px minmax(0, 1fr); } }
@media (max-width: 900px)  { .workspace { grid-template-columns: 1fr; } }

/* ── Section rail ────────────────────────────────────────────────── */
/* Vertical, down the left: which section is short, not just how many answers
   are missing. "3 missing" is a number; "Facility — 2 missing" is somewhere
   to go. */

.rail {
  display: flex; flex-direction: column;
  position: sticky; top: var(--request-sticky-top, 74px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 6px;
}
@media (max-width: 900px) { .rail { position: static; flex-direction: row; overflow-x: auto; } }

.rail-step {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 7px;
  color: var(--text); min-width: 0;
  transition: background 160ms var(--ease-out);
}
.rail-step:hover { background: var(--surface-2); text-decoration: none; }
.rail-step.is-current { background: var(--primary-soft); }

/* The connector runs between the nodes, behind them. */
.rail-step:not(:last-child)::after {
  content: ""; position: absolute;
  left: 22px; top: 33px; bottom: -9px; width: 2px;
  border-radius: 2px; background: var(--line);
}
@media (max-width: 900px) {
  .rail-step:not(:last-child)::after { left: auto; right: -6px; top: 50%; bottom: auto; width: 12px; height: 2px; }
}

.rail-node {
  width: 25px; height: 25px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; z-index: 1;
  box-shadow: 0 1px 2px rgba(28,35,51,.18);
  transition: background 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.rail-node svg { width: 14px; height: 14px; }
.rail-step.is-done .rail-node { background: var(--ok); }
.rail-step.is-gap  .rail-node { background: var(--danger); }
.rail-step.is-current .rail-node { transform: scale(1.1); }

.rail-text { display: flex; flex-direction: column; line-height: 1.28; min-width: 0; }
.rail-text b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rail-text i { font-style: normal; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.rail-step.is-done .rail-text i { color: var(--ok); }
.rail-step.is-gap  .rail-text i { color: var(--danger); font-weight: 550; }

/* ── Sections ────────────────────────────────────────────────────── */
/* One card per section. Five short forms read as five things to check; one
   long form reads as a wall. */

.sections { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sec { scroll-margin-top: var(--request-sticky-top, 74px); }
.sec-gap { border-color: var(--danger-line); }
.sec-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.sec-gap .sec-head { background: var(--danger-soft); border-bottom-color: var(--danger-line); }
.sec-head h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); }
.sec-count { margin-left: auto; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sec .card-body { padding: 16px 18px 4px; }
.sec-sep { height: 1px; background: var(--line); margin: 14px 0; }

/* Fields pack densely: `dense` back-fills the hole a full-width textarea
   leaves, which is where most of the empty rows came from. */
.sec .grid-2 {
  display: grid; gap: 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  grid-auto-flow: row dense;
}
.sec .field { margin-bottom: 14px; }
.sec .field > label { margin-bottom: 4px; }

/* A field that looks like the others in the grid but cannot be typed into —
   form_completed_by's whole point is that no input renders for it at all. */
.static-value {
  min-height: 38px; padding: 0 11px; display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text-2); font-size: 14px;
}

/* Reference-only fields a reviewer typed in — not from the Google Form. */
.custom-fields { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.custom-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface-2);
}
.custom-field > div { display: flex; gap: 8px; align-items: baseline; min-width: 0; font-size: 13px; }
.custom-field b { flex: none; color: var(--text); }
.custom-field span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer;
}
.icon-btn:hover { background: var(--danger-soft); color: var(--danger); }
.icon-btn svg { width: 13px; height: 13px; }

.add-field { margin-top: 12px; }
.add-field > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--link);
  list-style: none; width: fit-content;
}
.add-field > summary::-webkit-details-marker { display: none; }
.add-field > summary:hover { text-decoration: underline; }
.add-field-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.add-field-row input { flex: 1 1 160px; }
.add-field-row .btn { flex: none; }
.add-field .hint { margin-top: 6px; }

@keyframes sec-ping { from { box-shadow: 0 0 0 3px rgba(36,103,212,.28); } }
.sec:target { animation: sec-ping 900ms var(--ease-out); }

/* ── Right column ────────────────────────────────────────────────── */

.rail-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: var(--request-sticky-top, 74px); }
#template-field { scroll-margin-top: var(--request-sticky-top, 74px); }
.template-refused { animation: refuse 240ms var(--ease-out); }
.template-recommendations { display: grid; gap: 6px; margin-top: 12px; }
.template-choice {
  display: grid; gap: 3px; width: 100%; text-align: left;
  padding: 9px 10px; font: inherit; font-size: 12.5px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
}
.template-choice small { color: var(--text-2); font-size: 11px; }
.template-choice[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
@media (hover: hover) and (pointer: fine) {
  .template-choice:hover { border-color: var(--primary); }
}
@media (prefers-reduced-motion: reduce) { .template-refused { animation: none; } }
@media (max-width: 1240px) { .rail-side { position: static; grid-column: 1 / -1; } }
.aside-note { margin: 0 0 14px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.btn.wide { width: 100%; justify-content: center; }
/* The history is a log — it grows forever, so it scrolls inside its card
   rather than pushing the page down. */
.history { max-height: 38vh; overflow-y: auto; }
.history .timeline li:last-child { padding-bottom: 0; }

/* Save turns green the moment something is actually different, and only then.
   A permanently-primary Save button says nothing about whether you have
   unsaved work. */
.btn-save.is-dirty {
  background: var(--ok); border-color: var(--ok); color: #fff;
}
.btn-save.is-dirty:hover { background: #26694a; border-color: #26694a; }
.save-hint { margin-top: 7px; font-size: 11.5px; color: var(--ok); font-weight: 550; }

.stop-box > summary {
  padding: 13px 18px; cursor: pointer; font-size: 13px; font-weight: 500;
  list-style: none; color: var(--text-2);
}
.stop-box > summary::-webkit-details-marker { display: none; }
.stop-box[open] > summary { border-bottom: 1px solid var(--line); color: var(--text); }

.stop-box[open] > summary { border-bottom: 1px solid var(--line); }

/* ── Facility Report / My Openings: a spreadsheet, not a dashboard ─────── */
.page.sheet-page { max-width: none; padding: 12px 16px 12px; }
.gcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(20, 30, 50, .04), 0 4px 16px rgba(20, 30, 50, .05); overflow: hidden; }
/* One top bar, one row: title, report switch, counts and sort on the left; formatting tools next; actions on
   the right. Labels on History / Columns / Import / Find give way to icons (with tooltips) before anything wraps. */
.gbar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--line); min-width: 0; }
.gbar-l { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; }
.gbar-c { display: flex; align-items: center; gap: 4px; flex: none; order: 1; }
.gbar-r { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; order: 2; }
.gbar .gbtn { height: 28px; padding: 0 9px; font-size: 12.5px; gap: 5px; }
.gbar .gbtn-icon { width: 28px; padding: 0; }
.gbar .gchip { height: 20px; padding: 0 7px; font-size: 11.5px; }
.gbar .gfb { min-width: 28px; height: 26px; padding: 0 5px; }
.gbar .gfgrp { padding: 1px; }
@media (max-width: 1900px) {
  .gbar .gbl { display: none; }                         /* icon-only; title + aria-label carry the name */
  #findBtn, #vhBtn, #colsBtn, #impBtn, #ghRefresh { width: 28px; padding: 0; justify-content: center; }
}
@media (max-width: 1280px) { .gfresh { display: none; } }   /* the date is also in the chip's tooltip */
@media (max-width: 1080px) {                             /* small screens: let the formatting tools take a row */
  .gbar { flex-wrap: wrap; row-gap: 6px; }
  .gcard .gwrap { height: calc(100vh - 196px); }
}
/* save status next to the row count */
.gsave { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; font-size: 12px; font-weight: 500;
  border-radius: 999px; white-space: nowrap; transition: background .2s, color .2s; }
.gsave:empty { display: none; }
.gsave.saving { color: var(--text-2); background: var(--surface-2); }
.gsave.saving .gspin { width: 11px; height: 11px; }
.gsave.saved { color: var(--ok); background: var(--ok-soft); }
.gsave.idle { color: var(--text-3); background: none; }
.gsave.failed { color: #b42318; background: #fdecea; }
.gbtn-icon { width: 34px; padding: 0; justify-content: center; color: var(--text-2); }
.gbtn svg, .gfb svg { flex: none; }
/* sort chip: first sort + a "+N" badge; never grows with more levels */
.gsortbtn { max-width: 240px; gap: 6px; }
.gsortbtn #sortInfo { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.gsortbtn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gsort-dir { flex: none; font-size: 11.5px; color: var(--text-3); }
.gsort-more { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--primary); border-radius: 999px; }
.gsortbtn.active .gsort-dir { color: var(--primary); }
.gbar h1 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0 4px 0 0; }
.gbar select {
  width: auto; height: 30px; padding: 0 8px; font: inherit; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px;
}
.gspacer { flex: 1; }
.gchip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-variant-numeric: tabular-nums; }
.gbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.gbtn:hover { background: var(--surface-2); border-color: var(--text-3); }
.gbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.gbtn:disabled { opacity: .55; cursor: default; }
.gbtn-primary { color: #fff; background: var(--primary); border-color: var(--primary); }
.gbtn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
#clear { color: var(--text-3); }
#clear.active { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }

/* Specialty tabs sit under the grid, like sheet tabs in a spreadsheet */
.gsheets { display: flex; align-items: stretch; gap: 2px; padding: 0 8px 0 10px; background: #f3f5f9; border-top: 1px solid var(--line-2); }
.gsctl { flex: none; display: inline-flex; align-self: center; margin-right: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.gsctl button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; padding: 0; color: var(--text-2); background: none; border: 0; cursor: pointer; }
.gsctl button + button { border-left: 1px solid var(--line); }
.gsctl button:hover { color: var(--text); background: var(--surface-2); }
.gsctl button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.gtabs { display: flex; gap: 1px; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.gtabs::-webkit-scrollbar { display: none; }
.gtabs button {
  flex: none; height: 34px; padding: 0 14px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; cursor: pointer;
  background: transparent; border: 0; border-radius: 0 0 8px 8px; transition: background .12s;
}
.gtabs button:hover { background: #e6eaf1; color: var(--text); }
.gtabs button span { margin-left: 5px; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.gtabs button[aria-selected="true"] {
  color: var(--primary); font-weight: 600; background: var(--surface);
  box-shadow: 0 1px 3px rgba(20, 30, 50, .12), inset 0 -3px 0 var(--primary);
}
.gtabs button[aria-selected="true"] span { color: var(--primary); }
.gtabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.gmenu > button.on { color: var(--primary); font-weight: 600; background: var(--primary-soft); }
.gmenu-tabs > button span { float: right; color: var(--text-3); font-size: 12px; }

.gwrap { overflow: auto; height: calc(100vh - 168px); min-height: 320px; overscroll-behavior: contain; outline: none; }
table.grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12.5px; line-height: 1.3; }
table.grid th, table.grid td {
  position: relative; height: 30px; padding: 0 8px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid #eceff4; border-bottom: 1px solid #eceff4; background: var(--surface);
}
/* Header row: clearly a header - tinted, bold, with a firm bottom rule */
table.grid th {
  position: sticky; top: 0; z-index: 2; height: 36px; padding: 0 4px 0 10px; background: #e9eef6;
  font-size: 12.5px; font-weight: 650; color: #243049; user-select: none; cursor: pointer;
  border-right-color: #d8dfea; border-bottom: 2px solid #b8c4d8;
}
table.grid th:hover { background: #dfe6f1; }
table.grid th.sorted { background: #dbe7fb; color: var(--primary); }
table.grid th.filtered { box-shadow: inset 0 -2px 0 var(--primary); }
table.grid th.ui { cursor: default; }
.ghc { display: flex; align-items: center; gap: 2px; height: 100%; min-width: 0; }
.gth { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gpen { margin-right: 5px; vertical-align: -1px; color: var(--primary); }
.gsbtn, .gfbtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 1px; height: 24px; min-width: 22px; padding: 0 4px;
  color: #7d889c; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.gsbtn:hover, .gfbtn:hover { color: var(--text); background: #fff; border-color: #c9d2e0; }
.gsbtn svg path { fill: currentColor; opacity: .45; }
.gsbtn.asc, .gsbtn.desc { color: var(--primary); background: #fff; border-color: var(--primary-line); }
.gsbtn.asc .up, .gsbtn.desc .dn { opacity: 1; }
.gsbtn.asc .dn, .gsbtn.desc .up { opacity: .2; }
.gsbtn b { font-size: 10px; font-weight: 700; }
.gfbtn.on { color: #fff; background: var(--primary); border-color: var(--primary); }
.gsbtn:focus-visible, .gfbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }
.grs { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 4; }
.grs:hover { background: var(--primary-line); }
tbody.gedge, tbody.gedge * { cursor: col-resize !important; }
body.gresizing, body.gresizing * { cursor: col-resize !important; user-select: none; }

table.grid .frz { position: sticky; z-index: 1; }
table.grid th.frz { z-index: 3; }
table.grid .frz-last { box-shadow: 4px 0 6px -4px rgba(20, 30, 50, .2); border-right-color: #c9d2e0; }
table.grid tr.odd td { background-color: #f3f6fa; }
table.grid tr.grp td { box-shadow: inset 0 1px 0 #c3ccda; }
table.grid tr.grp td.frz-last { box-shadow: inset 0 1px 0 #c3ccda, 4px 0 6px -4px rgba(20, 30, 50, .2); }
table.grid tbody tr[data-i]:hover td { background-color: #e9f1fe; }
table.grid tr.gpad td { padding: 0; border: 0; background: transparent; }
table.grid td[data-col="rec_id"], table.grid td[data-col="opening"] { font-weight: 600; font-variant-numeric: tabular-nums; }
table.grid td[data-col="old_req"] { color: var(--text-3); font-variant-numeric: tabular-nums; }
table.grid .r { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.ed { cursor: text; }
table.grid td.ed:hover { box-shadow: inset 0 0 0 1.5px var(--primary-line); }
table.grid td.changed::after {
  content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 7px 7px 0;
  border-color: transparent #f0a020 transparent transparent;
}
table.grid td.saving { color: var(--text-3); padding-right: 26px; }
table.grid td.saving::before {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; margin-top: -6px;
  border: 2px solid var(--primary-line); border-top-color: var(--primary); border-radius: 50%; animation: gspin .7s linear infinite;
}
table.grid td.err { box-shadow: inset 0 0 0 1.5px var(--danger-line); background: var(--danger-soft) !important; }
table.grid td input, table.grid td select {
  width: 100%; height: 24px; padding: 0 6px; font: inherit; font-size: 12.5px; color: var(--text);
  background: #fff; border: 1.5px solid var(--primary); border-radius: 4px; outline: none; box-shadow: 0 0 0 3px var(--primary-soft);
}
table.grid td a { color: var(--primary); text-decoration: none; }
table.grid td a:hover { text-decoration: underline; }
.gnone-row { height: 90px !important; text-align: center !important; color: var(--text-2); }
.gspin { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gspin .7s linear infinite; vertical-align: -2px; opacity: .8; }
@keyframes gspin { to { transform: rotate(360deg); } }
.st { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #eef0f4; color: var(--text-2); }
.st-open { background: var(--ok-soft) !important; color: var(--ok) !important; }
.st-offer-out { background: var(--warn-soft) !important; color: var(--warn) !important; }
.st-filled { background: var(--primary-soft) !important; color: var(--primary) !important; }
.st-closed { background: #f1f1f3 !important; color: var(--text-3) !important; }
.st-on-hold { background: #fff4de !important; color: #9a6400 !important; }
.st-onboarding { background: #e7f6f8 !important; color: #16727f !important; }
.st-existing-provider { background: #f1ecfb !important; color: #6b4bb3 !important; }

/* Popups are fixed to the viewport and sized to the room available, so they never run off-screen */
.gmenu {
  position: fixed; z-index: 80; width: 272px; overflow-y: auto; padding: 6px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 30, 50, .18);
}
.gmenu[hidden] { display: none; }
.gmenu > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; text-align: left; font: inherit; color: var(--text); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.gmenu > button:hover { background: var(--primary-soft); }
.gmenu > button.on { color: var(--primary); font-weight: 600; background: var(--primary-soft); }
.gmenu-tabs > button span { margin-left: auto; color: var(--text-3); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.gmenu-tabs { width: 260px; }
.gmenu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.gmenu input[type=search] { width: 100%; height: 30px; margin: 2px 0 4px; padding: 0 8px; font: inherit; border: 1px solid var(--line-2); border-radius: 6px; }
.gmenu label { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 4px; cursor: pointer; }
.gmenu label:hover { background: var(--surface-2); }
.gmenu label span { margin-left: auto; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.gmenu .gall { font-weight: 600; }
.gvals { max-height: 220px; overflow: auto; margin: 2px 0 4px; border-top: 1px solid var(--line); padding-top: 2px; }
.gvals label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gtoast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70; max-width: min(560px, calc(100vw - 32px));
  padding: 9px 14px; font-size: 13px; color: #fff; background: #1f2a3d; border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 30, 50, .25);
}
.gtoast.bad { background: #b42318; }
.gtoast[hidden] { display: none; }
.gmodal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(20, 30, 50, .32); }
.gmodal[hidden] { display: none; }
.gmodal-box { width: min(760px, calc(100vw - 32px)); max-height: 82vh; overflow: auto; padding: 16px 18px; background: var(--surface); border-radius: 14px; box-shadow: 0 20px 60px rgba(20, 30, 50, .3); }
.gmodal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 15px; }
.gcols-box { width: min(620px, calc(100vw - 32px)); display: flex; flex-direction: column; }
.gcols-scroll { overflow: auto; max-height: 52vh; border: 1px solid var(--line); border-radius: 8px; }
.gcols-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.gcols th { position: sticky; top: 0; background: #f8f9fb; }
.gcols td { vertical-align: middle; }
.gord { white-space: nowrap; }
.gicon { width: 24px; height: 24px; padding: 0; font: inherit; color: var(--text-2); background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.gicon:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line); }
.gicon:disabled { opacity: .3; cursor: default; }
.gfz { display: inline-flex; align-items: center; gap: 6px; }
.gfz .gchip { height: 18px; padding: 0 6px; font-size: 11px; color: var(--primary); background: var(--primary-soft); border-color: var(--primary-line); }
.ghtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ghtable th, .ghtable td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.ghtable th { color: var(--text-2); font-size: 12px; font-weight: 600; }
.ghtable td.gold { color: var(--text-3); text-decoration: line-through; }
.gnote { margin: 0 0 10px; font-size: 12.5px; color: var(--text-2); }
.gnone { color: var(--text-2); }
.gfoot { margin: 8px 2px 0; font-size: 12px; color: var(--text-3); }

/* Version history: one panel for the whole sheet, like Google Sheets */
body.vh-open .page.sheet-page { margin-right: 360px; }
.gvh {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 55; width: 360px; display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(20, 30, 50, .08);
}
.gvh[hidden] { display: none; }
.gvh-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 4px; font-size: 16px; }
.gvh-sub { padding: 0 16px 10px; font-size: 12.5px; color: var(--text-3); border-bottom: 1px solid var(--line); }
.gvh-list { flex: 1; overflow: auto; padding-bottom: 16px; }
.gvh-empty { padding: 16px; }
.gvh-loading { display: flex; align-items: center; gap: 8px; padding: 16px; color: var(--text-2); font-size: 13px; }
.gvh-day { padding: 14px 16px 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.gvh-v { border-bottom: 1px solid var(--line); }
.gvh-v > summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 16px; cursor: pointer; list-style: none; }
.gvh-v > summary::-webkit-details-marker { display: none; }
.gvh-v > summary:hover { background: var(--surface-2); }
.gvh-v[open] > summary { background: var(--primary-soft); }
.gvh-when { font-size: 13.5px; font-weight: 600; color: var(--text); }
.gvh-cur { grid-column: 1; font-size: 12px; font-style: italic; color: var(--text-2); }
.gvh-who { grid-column: 1; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.gvh-who i { width: 8px; height: 8px; border-radius: 50%; background: #2e9e6a; }
.gvh-n { grid-column: 2; grid-row: 1; align-self: center; font-size: 11.5px; color: var(--text-3); }
.gvh-v ul { margin: 0; padding: 4px 8px 8px; list-style: none; }
.gvh-c { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; width: 100%; padding: 6px 8px; text-align: left; font: inherit; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.gvh-c:hover { background: var(--surface-2); }
.gvh-where { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gvh-what { grid-column: 1; font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.gvh-what s { color: var(--text-3); }
.gvh-t { grid-column: 2; grid-row: 1; font-size: 11.5px; color: var(--text-3); }
@keyframes gflash { 0%, 60% { box-shadow: inset 0 0 0 2px #f0a020; background: #fff4de; } 100% { box-shadow: none; } }
table.grid td.flash { animation: gflash 1.8s ease-out; }
@media (max-width: 900px) { body.vh-open .page.sheet-page { margin-right: 0; } .gvh { width: 100%; } }

/* Sort button + panel: several sort columns, like "Sort range" in a spreadsheet */
.gsortbtn { color: var(--text-2); }
.gsortbtn b { color: var(--text); }
.gsortbtn.active { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.gsortbtn.active b { color: var(--primary); }
.gmenu-sort { width: 520px; max-width: calc(100vw - 20px); padding: 10px; }
.gsp-head { padding: 2px 4px 8px; font-weight: 600; }
.gsp-row { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 8px; }
.gsp-row:hover { background: var(--surface-2); }
.gsp-n { flex: none; width: 52px; font-size: 12px; color: var(--text-3); }
.gsp-row select { flex: 1; min-width: 0; height: 30px; padding: 0 6px; font: inherit; font-size: 13px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; }
.gsp-dir { flex: none; display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.gsp-dir button { height: 28px; padding: 0 10px; font: inherit; font-size: 12.5px; color: var(--text-2); background: #fff; border: 0; cursor: pointer; }
.gsp-dir button + button { border-left: 1px solid var(--line-2); }
.gsp-dir button.on { color: #fff; background: var(--primary); }
.gsp-foot { display: flex; gap: 8px; justify-content: space-between; padding: 10px 4px 2px; margin-top: 6px; border-top: 1px solid var(--line); }

/* Dropdown lists: pill buttons in the Columns panel; the list editor opens above that panel */
.gpill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--text-2); background: var(--surface); border: 1px dashed var(--line-2); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.gpill:hover { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.gpill.on { color: var(--primary); border-style: solid; border-color: var(--primary-line); background: var(--primary-soft); }
#ddModal { z-index: 66; }
.gdd-box { width: min(580px, calc(100vw - 32px)); }
.gdd-box textarea { width: 100%; padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.5; color: var(--text);
  border: 1px solid var(--line-2); border-radius: 8px; resize: vertical; }
.gdd-box textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.gdd-box textarea[readonly] { background: var(--surface-2); color: var(--text-2); }
.linkish { padding: 0; font: inherit; font-size: 12.5px; color: var(--primary); background: none; border: 0; cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.st-other { background: #f1f3f6 !important; color: var(--text-2) !important; }

/* Find: a small panel under the toolbar, like a spreadsheet's find box */
.gfind {
  position: fixed; top: 132px; right: 28px; z-index: 70; width: 340px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px rgba(20, 30, 50, .18);
}
.gfind[hidden] { display: none; }
.gfind-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.gfind-row { display: flex; align-items: center; gap: 4px; }
.gfind-row input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; font: inherit; font-size: 13px; border: 1px solid var(--line-2); border-radius: 8px; }
.gfind-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.gfind-n { flex: none; min-width: 64px; text-align: right; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.gfind-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin: 10px 0 6px; font-size: 12.5px; color: var(--text-2); }
.gfind-grid select { height: 30px; padding: 0 8px; font: inherit; font-size: 13px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.gfind-chk { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; color: var(--text); cursor: pointer; }
.gfind-note { margin: 4px 0 0; font-size: 12px; color: var(--warn); }
.gfind-note:empty { display: none; }
table.grid td.fhit { background: #fff4c2 !important; }
table.grid td.fcur { background: #ffd966 !important; box-shadow: inset 0 0 0 2px #e0a100; }
table.grid td.sel { box-shadow: inset 0 0 0 2px var(--primary); }

/* Right-click menu */
.gmenu-ctx { width: 290px; padding: 6px; }
.gmenu-ctx > button { justify-content: space-between; gap: 12px; padding: 7px 10px; }
.gctx-l { flex: 1; min-width: 0; text-align: left; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gctx-l b { font-weight: 600; }
.gmenu-ctx kbd { flex: none; font: inherit; font-size: 11.5px; color: var(--text-3); }

/* ── Spreadsheet frame: column letters, row numbers, selection ─────────── */
table.grid thead tr#letters th {
  top: 0; height: 22px; padding: 0; text-align: center; font-size: 11px; font-weight: 600; color: #7d889c;
  background: #f4f6fa; border-bottom: 1px solid #d8dfea; cursor: pointer;
}
table.grid thead tr#letters th:hover { background: #e7ecf4; color: var(--text); }
table.grid thead tr#letters th.lsel { background: var(--primary); color: #fff; }
table.grid thead tr#letters th.gcorner { cursor: pointer; background: #eceff4; }
table.grid thead tr#letters th.gcorner:hover { background: #dfe5ee; }
table.grid thead tr#head th { top: 22px; }
table.grid td.rn {
  padding: 0 6px; text-align: center; font-size: 11.5px; color: #7d889c; background: #f4f6fa !important;
  cursor: pointer; user-select: none; font-variant-numeric: tabular-nums; border-right-color: #d8dfea;
}
table.grid td.rn:hover { background: #e7ecf4 !important; color: var(--text); }
table.grid td.rn.rsel { background: var(--primary) !important; color: #fff; font-weight: 700; }
/* Selection is a background layer and the active cell an outline, so no row divider, stripe, hover or
   saved fill colour can hide them (those only set box-shadow / background-color). */
table.grid tbody td.sl { background-image: linear-gradient(rgba(36, 103, 212, .18), rgba(36, 103, 212, .18)); }
table.grid thead tr#head th.csel { background: #d3e2fb; color: var(--primary); }
table.grid tbody td.act { outline: 2px solid var(--primary); outline-offset: -2px; }
table.grid tbody td.sl.act { background-image: linear-gradient(rgba(36, 103, 212, .07), rgba(36, 103, 212, .07)); }
table.grid tbody td { user-select: none; }
table.grid tbody td input, table.grid tbody td select { user-select: text; }

/* ── Formatting bar: grouped icon buttons ──────────────────────────── */
.gfmt { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.gfgrp { display: inline-flex; align-items: center; gap: 1px; padding: 2px; background: #f3f5f9; border: 1px solid var(--line); border-radius: 9px; }
.gfb {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 32px; height: 30px; padding: 0 7px;
  font: inherit; font-size: 13px; color: #3b4559; background: none; border: 0; border-radius: 7px; cursor: pointer;
  transition: background .12s, color .12s;
}
.gfb:hover:not(:disabled) { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(20, 30, 50, .12); }
.gfb.on { background: #fff; color: var(--primary); box-shadow: 0 0 0 1px var(--primary-line), 0 1px 2px rgba(20, 30, 50, .1); }
.gfb:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.gfb:disabled { color: #aab2c2; cursor: default; }
.gfb:disabled i { opacity: .45; }
.gfic { display: inline-flex; flex-direction: column; align-items: center; }
.gfic i { display: block; width: 18px; height: 4px; margin-top: -1px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.gchev { color: #8b93a6; }
.gfb-text { gap: 6px; padding: 0 10px; font-size: 12.5px; color: var(--text-2); border: 1px solid var(--line); background: var(--surface); }
.gref { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; font-size: 12.5px; font-weight: 600; color: var(--primary);
  background: var(--primary-soft); border: 1px solid var(--primary-line); border-radius: 999px; font-variant-numeric: tabular-nums; }
.gref[hidden], .ghint[hidden] { display: none; }
.ghint { font-size: 12.5px; color: var(--text-3); }

/* colour palette */
.gmenu-pal { width: 276px; padding: 12px; }
.gpal-head { padding: 0 2px 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.gpal-sub { padding: 10px 2px 6px; font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.gpal-none { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 10px; padding: 7px 10px; font: inherit; font-size: 13px; text-align: left;
  color: var(--text); background: #fff; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; }
.gpal-none:hover { background: var(--surface-2); }
.gpal-none.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.gpal-x { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #c0c7d4;
  background: linear-gradient(135deg, transparent 45%, #e5484d 45%, #e5484d 55%, transparent 55%); }
.gpal { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.gsw { position: relative; width: 100%; aspect-ratio: 1; padding: 0; background: var(--sw); border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .1s; }
.gsw.light { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); }
.gsw:hover { transform: scale(1.18); }
.gsw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary); }
.gsw.on::after { content: ""; position: absolute; left: 50%; top: 45%; width: 5px; height: 9px; border: solid rgba(0, 0, 0, .55);
  border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }
.gpal-custom { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text); cursor: pointer; }
.gpal-custom input { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line-2); border-radius: 6px; background: none; cursor: pointer; }

/* export menu */
.gmenu-export { width: 300px; padding: 8px; }
.gmenu-export > button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; }
.gexp-t { font-weight: 600; color: var(--text); }
.gexp-d { font-size: 12px; color: var(--text-3); }
.gexp-note { margin: 6px 10px 2px; font-size: 11.5px; color: var(--text-3); }

/* shortcuts */
.gkeys-box { width: min(600px, calc(100vw - 32px)); }
.gkeys td:first-child { color: var(--text-2); }
.gkeys kbd { font: inherit; font-size: 12.5px; padding: 2px 7px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; }

/* queued / clash save states, and the clash dialog */
.gsave.pending { color: var(--text-2); background: var(--surface-2); }
.gdot { width: 7px; height: 7px; border-radius: 50%; background: #e0a100; }
.gsave.conflict { color: #9a4d00; background: #fff1dc; cursor: pointer; }
.gsave.conflict:hover { background: #ffe6c2; }
.gclash-box { width: min(640px, calc(100vw - 32px)); }
.gclash { padding: 12px 0; border-top: 1px solid var(--line); }
.gclash-where { font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.gclash-where b { color: var(--text); }
.gclash-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.gclash-vals > div { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.gclash-vals span { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 2px; }
.gclash-vals b { font-weight: 600; overflow-wrap: anywhere; }
.gclash-act { display: flex; gap: 8px; justify-content: flex-end; }

/* Req ID groups: toggle, count, collapsed summary rows, merged-look continuation cells */
.gtog { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0 4px 0 -2px; padding: 0;
  vertical-align: -3px; color: var(--primary); background: var(--primary-soft); border: 1px solid var(--primary-line); border-radius: 5px; cursor: pointer; }
.gtog:hover { background: var(--primary); color: #fff; }
.gcnt { display: inline-flex; align-items: center; height: 16px; margin-left: 6px; padding: 0 5px; font-size: 10.5px; font-weight: 700;
  color: var(--text-2); background: #e8ecf2; border-radius: 999px; vertical-align: 1px; }
table.grid tr.gsumrow td { background-color: #f6f8fc; }
table.grid tr.gsumrow td.sum { color: var(--text-2); }
.gmix { font-size: 12px; font-style: italic; color: var(--text-3); }
table.grid td.cont { color: #b8c0cc; }
table.grid td.cont .st { opacity: .45; }
table.grid td.contnext { border-bottom-color: transparent; }
table.grid td.cont, table.grid td.contnext { box-shadow: none; }
table.grid tr.grp td.contnext { box-shadow: inset 0 1px 0 #c3ccda; }
#grpBtn.active { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.gmenu-grp { width: 300px; padding: 10px; }
.gchk { display: flex; align-items: center; gap: 8px; padding: 6px 6px; font-size: 13px; cursor: pointer; border-radius: 6px; }
.gchk:hover { background: var(--surface-2); }
.gchk small { color: var(--text-3); }
.gmenu-grp > button:disabled { color: var(--text-3); cursor: default; background: none; }

/* Import the latest TA REQ REPORT */
.gfresh { color: var(--text-3); font-weight: 500; }
.gimp-box { width: min(700px, calc(100vw - 32px)); }
.gdrop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 4px 0 12px; padding: 22px;
  text-align: center; border: 2px dashed var(--line-2); border-radius: 12px; background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.gdrop:hover, .gdrop.over { border-color: var(--primary); background: var(--primary-soft); }
.gdrop input { display: none; }
.gdrop-t { font-weight: 600; color: var(--text); }
.gdrop-s { font-size: 12px; color: var(--text-3); }
.gimp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-weight: 600; }
.gimp-head > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.gimp-time { font-size: 12px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.gimp-steps { margin: 0 0 12px; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; }
.gimp-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; font-size: 13px; border-top: 1px solid var(--line); }
.gimp-steps li:first-child { border-top: 0; }
.gimp-steps li.running { background: var(--primary-soft); font-weight: 600; }
.gimp-steps li.warn { background: #fff4de; }
.gimp-steps li.failed { background: #fdecea; }
.gimp-steps li .gspin { flex: none; margin-top: 2px; color: var(--primary); }
.gi { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; }
.gi.ok { background: #2e9e6a; } .gi.warn { background: #e0a100; } .gi.bad { background: #d23c32; }
.gimp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.gimp-kpis > div { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.gimp-kpis b { display: block; font-size: 17px; }
.gimp-kpis span { font-size: 11.5px; color: var(--text-3); }
.gimp-sub { margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.gimp-ch { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gimp-ch li { padding: 3px 9px; font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.gimp-err { max-height: 220px; overflow: auto; padding: 10px; font-size: 12px; white-space: pre-wrap; background: #fdecea; border-radius: 8px; }

#grpBtn.paused { color: var(--text-3); border-style: dashed; }
#grpBtn.paused::after { content: 'paused'; margin-left: 2px; font-size: 11px; font-style: italic; }

/* Who's in ReqGate now (top bar) */
.presence { position: relative; display: flex; align-items: center; margin-right: 10px; }
.presence-btn { display: inline-flex; align-items: center; padding: 3px 6px; background: none; border: 0; border-radius: 999px; cursor: pointer; }
.presence-btn:hover { background: var(--nav-hover); }
#presenceFaces { display: inline-flex; align-items: center; }
.pface { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -7px;
  font-size: 11px; font-weight: 700; color: #fff; background: #5b6b8c; border: 2px solid var(--nav); border-radius: 50%; }
.pface:first-child { margin-left: 0; }
.pface::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--nav); }
.pface.active::after { background: #34c77b; }
.pface.idle::after { background: #9aa3b5; }
.pface.idle { opacity: .75; }
.pface.more { background: #3a4459; font-size: 10.5px; }
.pface.more::after { display: none; }
.palone { font-size: 12px; color: var(--nav-text-dim); padding: 0 4px; }
.presence-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 90; min-width: 230px; padding: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 30, 50, .18); }
.presence-panel[hidden] { display: none; }
.presence-head { padding: 2px 6px 8px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.presence-panel ul { margin: 0; padding: 0; list-style: none; }
.presence-panel li { display: flex; align-items: center; gap: 8px; padding: 6px; font-size: 13px; color: var(--text); border-radius: 6px; }
.presence-panel li small { margin-left: auto; color: var(--text-3); font-size: 11.5px; }
.presence-panel li.pnone { color: var(--text-3); }
.pdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pdot.active { background: #34c77b; } .pdot.idle { background: #9aa3b5; }

/* ── Opening plan (request page) ─────────────────────────────────── */
.plan-card { border-color: var(--primary-line); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.plan-choices { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.plan-choices legend { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.plan-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.plan-choice:hover { border-color: var(--primary-line); }
.plan-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.plan-choice input { margin-top: 3px; }
.plan-choice span { display: grid; gap: 2px; min-width: 0; }
.plan-choice b { font-size: 14px; }
.plan-choice i { font-style: normal; color: var(--text-2); font-size: 13px; }
.plan-choice small { color: var(--text-3); font-size: 12px; }
.plan-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.plan-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; margin: 0; }
.plan-facts dt { font-size: 12px; color: var(--text-3); }
.plan-facts dd { margin: 2px 0 0; font-size: 14px; }

/* ── Facility Report: naming an inserted column (in the right-click menu) ── */
.gmenu.gmenu-name { padding: 12px; min-width: 260px; }
.gname label { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.gname label b { color: var(--text); }
.gname input { height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--radius); font: inherit; color: var(--text); }
.gname input:focus { outline: 2px solid var(--primary-line); border-color: var(--primary); }
.gname-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.gname-b button { height: 30px; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); font: inherit; font-size: 13px; cursor: pointer; }
.gname-b button.gbtn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Facility Report: Current / New (3000+) switch, and the draft note */
.gswitch { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.gswitch a { padding: 3px 10px; font-size: 12px; font-weight: 600; color: var(--text-2); text-decoration: none; border-radius: 6px; white-space: nowrap; }
.gswitch a span { font-weight: 500; opacity: .75; }
.gswitch a[aria-current="page"] { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.gswitch a:hover:not([aria-current]) { color: var(--text); }
.gpreview { margin: 0; padding: 7px 14px; font-size: 12.5px; color: var(--text-2); background: var(--primary-soft); border-bottom: 1px solid var(--primary-line); }
.gpreview b { color: var(--primary); }
.gbar h1, .gbar .gchip, .gswitch, .gbar .gbtn { white-space: nowrap; flex-shrink: 0; }
.gbar h1 { font-size: 15.5px; margin-right: 2px; }
.gswitch a { padding: 2px 9px; }
.gpreview + .gwrap { height: calc(100vh - 202px); }      /* the draft note sits above the grid */
.gopen button { padding: 2px 9px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.gopen button[aria-current="true"] { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.gopen button:hover:not([aria-current]) { color: var(--text); }
.gopen button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Sign-in: the MedElite logo above the site name */
.login-logo { display: block; width: 190px; max-width: 100%; height: auto; margin: 0 0 18px; }

/* Columns & freeze: drag a row by its handle */
.ggrip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--text-3); cursor: grab; fill: currentColor; }
.ggrip:hover { color: var(--text); background: var(--surface-2); }
.ggrip:active { cursor: grabbing; }
.ggrip:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; color: var(--primary); }
.gcols tr.dragging { opacity: .45; }
.gcols tr.drop-before td { box-shadow: inset 0 2px 0 var(--primary); }
.gcols tr.drop-after td { box-shadow: inset 0 -2px 0 var(--primary); }
.gcols td.gord { width: 34px; }

/* search dropdowns (base.html) */
.combo { position: relative; }
.combo-input { width: 100%; padding-right: 30px !important;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.combo-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.combo-list li { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.combo-list li.on { background: var(--primary-soft, #e8f0fe); }
.combo-list li[aria-selected="true"] { font-weight: 600; }
.combo-list li.combo-none { color: var(--text-3); cursor: default; }
.gtitle { font-size: 15px; font-weight: 700; margin-right: 6px; white-space: nowrap; align-self: center; }

/* Greenhouse posting preview (request page, template page) */
.posting-grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 18px; }
@media (max-width: 900px) { .posting-grid { grid-template-columns: 1fr; } }
.posting-h { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin: 0 0 8px; display: flex; gap: 10px; align-items: baseline; }
.posting-fields { margin: 0; display: grid; gap: 6px; font-size: 13px; }
.posting-fields div { display: grid; grid-template-columns: 150px 1fr; gap: 8px; }
.posting-fields dt { color: var(--text-2); }
.posting-fields dd { margin: 0; overflow-wrap: anywhere; }
.posting-form { display: grid; gap: 4px; font-size: 13px; }
.posting-form label { margin-top: 6px; font-weight: 600; }
.ph-src { font-weight: 400; font-size: 11px; color: var(--text-3); margin-left: 6px; }
.ph-src-missing { color: var(--danger); }
.posting-post { border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px; background: #fff; color: #222; font-size: 14px; line-height: 1.55; max-height: 640px; overflow: auto; }
.posting-post h2 { font-size: 20px; margin: 0 0 8px; } .posting-post h3 { font-size: 15px; margin: 16px 0 6px; }
.posting-legend { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; font-size: 11.5px; }
mark.ph { border-radius: 4px; padding: 0 3px; }
mark.ph-filled { background: #d9f2e2; color: #0f5132; }
mark.ph-edit { background: #dbe7fb; color: #1d4ed8; }
mark.ph-default { background: #fdf0d5; color: #8a5a00; }
mark.ph-missing { background: #fde2e1; color: #b42318; font-weight: 600; }

.posting-board { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.posting-board-head { padding: 16px 22px 12px; border-bottom: 1px solid #eee; }
.pb-title { font-size: 22px; font-weight: 700; color: #1f2937; } .pb-loc { color: #6b7280; margin-top: 2px; }
.posting-board .posting-post { border: 0; border-radius: 0; }
.posting-internal { margin-top: 10px; font-size: 13px; } .posting-internal summary { cursor: pointer; font-weight: 600; }
.posting-internal .posting-fields { margin-top: 8px; }