/* HRGP responsive + dark mode polish (Brad, Oct 31 2026: "everything looks great on computer,
   tablet and phone, light and dark, consistent HRGP shadcn look").
   Loaded after hrgp-ui.css. Dark rules key off the existing app switch (.shell[data-theme="dark"]).
   html:not(#_) adds id-level weight so these win over the older sheets, per the shared-style rule. */

/* ---------- dark palette (matches the existing dark shell: #101722 page, #192333 cards) ---------- */
.shell[data-theme="dark"]{
  --rd-page:#101722;--rd-panel:#192333;--rd-panel-2:#1f2b3e;--rd-hover:#24324a;--rd-line:#344153;
  --rd-text:#e8edf5;--rd-muted:#acb8c9;--rd-link:#a9c1ff;
  --rd-green-bg:rgba(34,197,94,.14);--rd-green-fg:#86efac;
  --rd-amber-bg:rgba(245,158,11,.16);--rd-amber-fg:#fcd34d;
  --rd-grey-bg:rgba(148,163,184,.16);--rd-grey-fg:#cbd5e1;
  --rd-blue-bg:rgba(110,145,255,.16);--rd-blue-fg:#c7d6ff;
  --rd-orange-bg:#3a2214;--rd-orange-fg:#ff9a5c;
  /* older sheets read these with white fallbacks */
  --panel:var(--rd-panel);--border:var(--rd-line);--hrgp-line:var(--rd-line);--text:var(--rd-text);--muted:var(--rd-muted)}

/* plain + secondary buttons (Clear, Previous/Next, Use/Add template, Generate & Play, Refresh):
   typography.css paints them #fff with navy text in both themes. Dark = shadcn outline: see-through with a border */
html:not(#_) .shell[data-theme="dark"] :is(main,section,.panel,.table-wrap,.ov-row,.hrgp-mira-row-actions,.hrgp-mira-page-heading,.hrgp-mira-search,.hrgp-mira-pagination,.hrgp-aw-panel,.hrgp-aw) button:not([class]):not([type=submit]):not(td *),
html:not(#_) .shell[data-theme="dark"] button.secondary:not(td *){
  background:transparent;color:var(--rd-text);border-color:var(--rd-line)}
html:not(#_) .shell[data-theme="dark"] button.secondary:not(td *):hover:not(:disabled){background:var(--rd-hover)}
html:not(#_) .shell[data-theme="dark"] .ov-summary>button{background:var(--rd-panel)}
html:not(#_) .shell[data-theme="dark"] :is(main,section,.panel,.table-wrap,.ov-row,.hrgp-mira-row-actions,.hrgp-mira-page-heading,.hrgp-mira-search,.hrgp-mira-pagination,.hrgp-aw-panel,.hrgp-aw) button:not([class]):not([type=submit]):not(td *):hover:not(:disabled){
  background:var(--rd-hover)}
html:not(#_) .shell[data-theme="dark"] .ov-summary>button :is(span,small){color:var(--rd-muted)}
html:not(#_) .shell[data-theme="dark"] .ov-summary>button strong{color:var(--rd-text)}

/* filled blue buttons: one primary blue in dark (Add Applicant already uses it) */
html:not(#_) .shell[data-theme="dark"] :is(.hrgp-rem-add,main button[type=submit]:not([class]),section button[type=submit]:not([class])){background:var(--ui-primary,#3f68d8);border-color:var(--ui-primary,#3f68d8);color:#fff}
html:not(#_) .shell[data-theme="dark"] :is(.hrgp-rem-add,main button[type=submit]:not([class]),section button[type=submit]:not([class])):hover:not(:disabled){background:var(--ui-primary-hover,#5379e0)}

/* colours written straight onto elements (style="...") by older screens */
html:not(#_) .shell[data-theme="dark"] :is(button,a,div,section,span,li,label,p)[style*="background: rgb(255, 255, 255)"],
html:not(#_) .shell[data-theme="dark"] :is(button,a,div,section,span,li,label,p)[style*="background-color: rgb(255, 255, 255)"]{background:var(--rd-panel)!important;border-color:var(--rd-line)!important}
html:not(#_) .shell[data-theme="dark"] :is(button,a)[style*="background: rgb(255, 255, 255)"]{background:transparent!important;color:var(--rd-text)!important}
html:not(#_) .shell[data-theme="dark"] [style*="color: var(--brand-blue"]:not([style*="background: var(--brand-blue"]){color:var(--rd-link)!important}
html:not(#_) .shell[data-theme="dark"] [style*="background: var(--brand-blue"]{background:var(--ui-primary,#3f68d8)!important}
html:not(#_) .shell [style*="font-weight: 700"],html:not(#_) .shell [style*="font-weight: 600"],html:not(#_) .shell [style*="font-weight: 800"]{font-weight:500!important}

/* Overview numbers: one row of three on phones instead of three tall cards */
@media (max-width:640px){
  html:not(#_) .shell .ov-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  /* list filters (Forms & Quizzes): full-width stack; the lone "Show" label is kept for screen readers only */
  html:not(#_) .shell .hrgp-list-filter{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  html:not(#_) .shell .hrgp-list-filter>:is(input,select){width:100%;max-width:none;margin:0}
  html:not(#_) .shell .hrgp-list-filter>label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Job Postings numbers: three across, not two plus one wide */
  html:not(#_) .shell .jobs-content .summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  html:not(#_) .shell .jobs-content .summary>*{grid-column:auto;min-width:0}
  html:not(#_) .shell .table-wrap tbody tr{margin-left:12px;margin-right:12px}
  html:not(#_) .shell .ov-summary>button{min-width:0;padding:10px;gap:2px}
  html:not(#_) .shell .ov-summary>button span{font-size:.75rem;line-height:1.25}
  html:not(#_) .shell .ov-summary>button strong{font-size:1.5rem;line-height:1.2}
  html:not(#_) .shell .ov-summary>button small{font-size:.6875rem;line-height:1.25}
  /* Needs Attention reminders: the buttons squeezed the text to one letter wide; put buttons under the text */
  html:not(#_) .shell .ov-reminder{flex-wrap:wrap;row-gap:8px;height:auto}
  html:not(#_) .shell .ov-reminder>.ov-row-copy{flex:1 1 100%;min-width:0}
  html:not(#_) .shell .ov-reminder>.ov-reminder-controls{flex:1 1 100%;justify-content:flex-end}
  html:not(#_) .shell .ov-reminder>.ov-reminder-controls select{width:auto;min-width:112px}
}

/* ---------- tables on phones: one card style (two older sheets disagreed: bold caps labels,
   label above value, right-aligned values, box inside a box) ---------- */
@media (max-width:760px){
  html:not(#_) .shell :is(.table-wrap,.hrgp-tools-native .table-wrap){background:transparent!important;border:0;box-shadow:none}
  html:not(#_) .shell :is(.table-wrap tbody,.hrgp-native-table tbody) td.hrgp-tick-col{justify-content:flex-start;min-height:0;padding:10px 0 4px}
  html:not(#_) .shell :is(.table-wrap tbody,.hrgp-native-table tbody) td.hrgp-tick-col::before{content:none!important}
  html:not(#_) .shell :is(.table-wrap tbody,.hrgp-native-table tbody) tr{display:block;background:var(--rd-panel,#fff);border:1px solid var(--ui-border,#e4e7ec);border-radius:12px;margin:0 0 10px;padding:4px 14px;box-shadow:none}
  html:not(#_) .shell :is(.table-wrap tbody,.hrgp-native-table tbody) td{display:flex;align-items:center;justify-content:space-between;gap:12px;width:auto;max-width:none;min-height:40px;height:auto;padding:8px 0;border:0;border-bottom:1px solid var(--ui-border,#e4e7ec);text-align:right;overflow-wrap:anywhere}
  html:not(#_) .shell :is(.table-wrap tbody,.hrgp-native-table tbody) td:last-child{border-bottom:0}
  html:not(#_) .shell :is(.table-wrap tbody,.hrgp-native-table tbody) td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;flex:0 0 auto;max-width:45%;margin:0;font-size:.8125rem!important;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ui-muted-fg,#5b6679);text-align:left}
  /* rows are cards here, so the column header row and the desktop min-width only get in the way */
  html:not(#_) .shell .table-wrap thead{display:none}
  html:not(#_) .shell .table-wrap table{min-width:0!important;width:100%}
  /* cells without a label (Job Postings): a simple left-aligned stack, title first */
  html:not(#_) .shell .table-wrap tbody td:not([data-label]){display:block;text-align:left;min-height:0;padding:3px 0;border:0;color:var(--ui-muted-fg,#5b6679);font-size:.875rem}
  html:not(#_) .shell .table-wrap tbody td:not([data-label])::before{content:none}
  html:not(#_) .shell .table-wrap tbody td:not([data-label]):first-child{padding:8px 0 4px;color:var(--ui-fg,#0f172a);font-size:1rem}
  html:not(#_) .shell .table-wrap tbody td:not([data-label]):is(:empty,:has(>:only-child:empty)){display:none}
  html:not(#_) .shell .table-wrap tbody tr:has(td:not([data-label])){padding:8px 14px 10px}
  /* label in the left column, everything else stacked on the right */
  html:not(#_) .shell :is(.table-wrap tbody,.hrgp-native-table tbody) td[data-label]:not([data-label=""]):not(.hrgp-tick-col){display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);column-gap:12px;row-gap:0;justify-items:end}
  html:not(#_) .shell :is(.table-wrap tbody,.hrgp-native-table tbody) td[data-label]:not([data-label=""]):not(.hrgp-tick-col)::before{grid-column:1;grid-row:1 / span 6;align-self:center;justify-self:start;max-width:none}
  html:not(#_) .shell :is(.table-wrap tbody,.hrgp-native-table tbody) td[data-label]:not([data-label=""]):not(.hrgp-tick-col)>*{grid-column:2;margin:0;max-width:100%}
}

/* cards that use var(--panel,#fff) */
html:not(#_) .shell[data-theme="dark"] .hrgp-pr-provider{background:var(--rd-panel);border-color:var(--rd-line);color:var(--rd-text)}
html:not(#_) .shell[data-theme="dark"] .hrgp-pr-provider :is(h3,strong){color:var(--rd-text)}
html:not(#_) .shell[data-theme="dark"] .hrgp-pr-provider :is(p,.hrgp-bn-note){color:var(--rd-muted)}
html:not(#_) .shell[data-theme="dark"] .hrgp-pr-provider a{color:var(--rd-link)}

/* status badges and chips: soft tints instead of pastel blocks */
html:not(#_) .shell[data-theme="dark"] :is(.badge.job-open,.hrgp-ems-status.active){background:var(--rd-green-bg);color:var(--rd-green-fg);border-color:transparent}
html:not(#_) .shell[data-theme="dark"] .hrgp-ems-status.pending{background:var(--rd-amber-bg);color:var(--rd-amber-fg);border-color:transparent}
html:not(#_) .shell[data-theme="dark"] .badge.job-closed{background:var(--rd-grey-bg);color:var(--rd-grey-fg);border-color:transparent}
html:not(#_) .shell[data-theme="dark"] .tag-chip{background:var(--rd-blue-bg);color:var(--rd-blue-fg);border-color:transparent}
html:not(#_) .shell[data-theme="dark"] .hrgp-cx-banner{background:var(--rd-panel-2);color:var(--rd-text);border-color:var(--rd-line)}
html:not(#_) .shell[data-theme="dark"] .hrgp-cx-banner *{color:inherit}

/* row icons (eye / open) used the light-mode logo blue, nearly invisible on dark */
html:not(#_) .shell[data-theme="dark"] :is(button.hrgp-row-icon,td button.hrgp-record-open,td button.hrgp-ems-view){color:var(--rd-link)}

/* Employees: initials badges were light grey squares; selected tab had a filled block */
html:not(#_) .shell[data-theme="dark"] .hrgp-ems-avatar{background:var(--rd-blue-bg);color:var(--rd-blue-fg)}
html:not(#_) .shell[data-theme="dark"] .hrgp-ems-tabs button.active{background:transparent}
/* sideways-scrolling tab strips: no grey scrollbar under the tabs */
html:not(#_) .shell :is(.hrgp-ems-tabs,[role=tablist],.tabs,.tab-list){scrollbar-width:none}
html:not(#_) .shell :is(.hrgp-ems-tabs,[role=tablist],.tabs,.tab-list)::-webkit-scrollbar{display:none}
@media (max-width:640px){
  html:not(#_) .shell .hrgp-ems-subnav-actions{flex-wrap:wrap;gap:8px}
  html:not(#_) .shell .hrgp-ems-subnav-actions button{flex:1 1 auto;white-space:nowrap;width:auto}
}

/* applicant profile: company name in the résumé and the "Current step" badge were nearly invisible */
html:not(#_) .shell[data-theme="dark"] .experience-company{color:var(--rd-muted)}
html:not(#_) .shell[data-theme="dark"] .step-current{background:var(--rd-blue-bg);color:var(--rd-blue-fg);border-color:transparent}

/* never split a word inside a button ("Refre / sh", "Tod / ay") */
html:not(#_) .shell button{overflow-wrap:normal;word-break:normal}

/* faint secondary text */
html:not(#_) .shell[data-theme="dark"] :is(.applicant-who-job,.applicant-who-date,.applicant-step-form,.hrgp-user-email,.hrgp-user-muted,.text-history-status){color:var(--rd-muted)}
html:not(#_) .shell[data-theme="dark"] .hrgp-signin.is-yes{color:var(--rd-green-fg)}

/* ---------- CALENDAR (protected feature: looks only, no buttons added/removed/renamed; needs Brad's yes) ---------- */
html:not(#_) .shell .hrgp-cal-controls button{white-space:nowrap}
html:not(#_) .shell .hrgp-cal-controls>div{flex-wrap:wrap}
@media (max-width:640px){
  html:not(#_) .shell main>section.panel[aria-label="Availability"]{margin:12px 16px 4px!important;border-radius:12px}
  html:not(#_) .shell main>section.panel[aria-label="Availability"] form>strong{flex:1 1 100%}
  /* month label takes the space left over (still a steady width), so Today stays on the same line */
  html:not(#_) .shell .hrgp-cal-controls>div:first-child{flex-wrap:nowrap}
  html:not(#_) .shell .hrgp-cal-controls>div:first-child>strong{min-width:0!important;flex:1 1 0;text-align:center}
  html:not(#_) .shell .hrgp-cal-controls>div:last-child{flex-wrap:nowrap;flex:1 1 100%;width:100%}
  html:not(#_) .shell .hrgp-cal-controls>div:last-child>button{flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px;font-size:.8125rem}
  /* Nov 1 (Brad: "complete the small leftovers"): month view on phones showed clipped names ("Blo...", "Inte...");
     each event is now a small dot (blue = event, amber = reminder), like phone calendars. Tapping a day still lists its events below.
     Week and Day views (cells with their own style) keep the full names. */
  html:not(#_) .shell .hrgp-cal-grid .hrgp-cal-day:not([style]){min-height:58px;display:grid;grid-template-columns:repeat(auto-fill,7px);grid-auto-rows:min-content;align-content:start;gap:3px}
  html:not(#_) .shell .hrgp-cal-grid .hrgp-cal-day:not([style])>span{grid-column:1/-1;justify-self:start;margin-bottom:2px}
  html:not(#_) .shell .hrgp-cal-grid .hrgp-cal-day:not([style])>small[title]{width:7px;height:7px;padding:0;border-radius:50%;font-size:0;line-height:0;overflow:hidden;background:#12308a}
  html:not(#_) .shell .hrgp-cal-grid .hrgp-cal-day:not([style])>small[title].reminder{background:#d97706}
  html:not(#_) .shell .hrgp-cal-grid .hrgp-cal-day:not([style])>small:not([title]){grid-column:1/-1;background:none;padding:0;font-size:.625rem;color:var(--muted,#64748b)}
  html:not(#_) .shell[data-theme="dark"] .hrgp-cal-grid .hrgp-cal-day:not([style])>small[title]{background:#6f8fe6}
  html:not(#_) .shell[data-theme="dark"] .hrgp-cal-grid .hrgp-cal-day:not([style])>small[title].reminder{background:#f59e0b}
}

/* ========== BATCH 2: pop-ups, drawers, applicant profile, editors ========== */

/* + Reminder button text was grey on blue */
html:not(#_) .shell[data-theme="dark"] .hrgp-rem-add :is(span,svg){color:#fff}

/* applicant profile: notes Save (disabled) was dark-on-dark; timeline lines were bright white */
html:not(#_) .shell[data-theme="dark"] .applicant-drawer .drawer-notes button.note-save{color:#fff}
html:not(#_) .shell[data-theme="dark"] .applicant-drawer .drawer-notes button.note-save:disabled{color:var(--rd-muted);background:transparent;border-color:var(--rd-line)}
html:not(#_) .shell[data-theme="dark"] .timeline-event{border-left-color:var(--rd-line)}
html:not(#_) .shell[data-theme="dark"] .timeline-list .timeline-event{border-bottom-color:var(--rd-line)}

/* applicant profile: tag picker pills were white with invisible words */
html:not(#_) .shell[data-theme="dark"] .tag-pill{background:transparent;color:var(--rd-text);border:1px solid var(--rd-line)}
html:not(#_) .shell[data-theme="dark"] .tag-pill:hover{background:var(--rd-hover)}
html:not(#_) .shell[data-theme="dark"] .tag-pill:is(.active,.selected,.on,[aria-pressed="true"]){background:var(--rd-blue-bg);color:var(--rd-blue-fg);border-color:transparent}

/* applicant profile: texting panel history area was white */
html:not(#_) .shell[data-theme="dark"] .text-chat-history{background:var(--rd-page)}
html:not(#_) .shell[data-theme="dark"] .text-chat-avatar{background:var(--rd-blue-bg);color:var(--rd-blue-fg)}

/* invite panels (protected: colours in dark mode only, nothing moved, renamed or removed) */
html:not(#_) .shell[data-theme="dark"] .applicant-drawer :is(.interview-details,.interview-link-option){background:var(--rd-panel-2)!important;color:var(--rd-text);border-color:var(--rd-line)}
html:not(#_) .shell[data-theme="dark"] .applicant-drawer .interview-panel :is(label,.interview-mode,.action-check,.interview-note,h3,h4){color:var(--rd-text)!important}
html:not(#_) .shell[data-theme="dark"] .applicant-drawer .interview-panel .interview-help{color:var(--rd-muted)!important}
html:not(#_) .shell[data-theme="dark"] .applicant-drawer .interview-details::before{color:var(--rd-text)!important}

/* skip confirm: keep "Send and skip" on one line */
html:not(#_) .shell .skip-actions button{white-space:nowrap}

/* job editor: description toolbar was a white strip with navy buttons; job code hint was faint */
html:not(#_) .shell[data-theme="dark"] .job-format-toolbar{background:var(--rd-panel-2);border-color:var(--rd-line)}
html:not(#_) .shell[data-theme="dark"] .job-format-toolbar button{background:transparent!important;color:var(--rd-text)!important;border:1px solid var(--rd-line)!important}
html:not(#_) .shell[data-theme="dark"] .job-format-toolbar button:hover{background:var(--rd-hover)!important}
html:not(#_) .shell[data-theme="dark"] .job-code-hint{color:var(--rd-muted)}
@media (max-width:640px){
  html:not(#_) .shell .job-format-toolbar{flex-wrap:wrap;gap:6px}
  html:not(#_) .shell .job-format-toolbar button{flex:0 0 auto;white-space:nowrap;padding-left:10px;padding-right:10px}
}

/* buttons that fill a row: centre the words (Save Draft / Publish Job were left-aligned) */
html:not(#_) .shell button.primary{justify-content:center}

/* hiring process editor: step numbers were white with an invisible number; step buttons squeezed onto two lines on phones */
html:not(#_) .shell[data-theme="dark"] .wf-number{background:var(--rd-blue-bg);color:var(--rd-blue-fg)}
html:not(#_) .shell .wf-tabs{scrollbar-width:none}
html:not(#_) .shell .wf-tabs::-webkit-scrollbar{display:none}
html:not(#_) .shell .wf-step-actions button{white-space:nowrap}
/* every screen size: an older in-app style forces these to 38px icon squares, but they carry words (Move Up, Move Down, Edit, Delete); let them fit their words */
html:not(#_) .shell .wf-step .wf-step-actions{flex-wrap:wrap!important;row-gap:6px}
html:not(#_) .shell .wf-step .wf-step-actions button{width:auto!important;min-width:max-content!important;padding:0 12px!important}
@media (max-width:640px){
  html:not(#_) .shell .wf-step .wf-step-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;width:100%!important;max-width:none!important;margin-top:10px}
  html:not(#_) .shell .wf-step .wf-step-actions button{width:auto!important;min-width:0!important;padding:0 10px!important}
}

/* form editor: the help line under "Logo & Branding" / "Form Settings" touched the box edge */
html:not(#_) .shell details.hrgp-form-optional>.hrgp-form-hint{padding:0 24px}

/* search boxes with an icon: the inner field covered the box outline (a broken line around "Search notes") */
html:not(#_) .shell :is(.hrgp-note-search,.note-search)>input{background:transparent!important;box-shadow:none}

/* Add Applicant pop-up: white box with white words in dark mode */
html:not(#_) .shell[data-theme="dark"] .applicant-add-dialog{background:var(--rd-panel)!important;color:var(--rd-text);border-color:var(--rd-line)}
html:not(#_) .shell[data-theme="dark"] .applicant-add-dialog *{border-color:var(--rd-line)}
html:not(#_) .shell[data-theme="dark"] .applicant-add-dialog label{color:var(--rd-text)}
html:not(#_) .shell[data-theme="dark"] .applicant-add-icon{background:var(--rd-blue-bg);color:var(--rd-blue-fg)}
html:not(#_) .shell[data-theme="dark"] .applicant-add-dialog .applicant-job-field>span{color:var(--rd-text)}
html:not(#_) .shell[data-theme="dark"] .applicant-add-dialog .applicant-job-trigger{background:#121b29;color:var(--rd-text);border:1px solid var(--rd-line)}
html:not(#_) .shell[data-theme="dark"] .applicant-add-dialog input[type=file]{background:transparent!important;color:var(--rd-text)}
html:not(#_) .shell[data-theme="dark"] .applicant-add-dialog input[type=file]::file-selector-button{background:transparent;color:var(--rd-text);border:1px solid var(--rd-line)}
html:not(#_) .shell[data-theme="dark"] .applicant-job-menu{background:var(--rd-panel-2)!important;border-color:var(--rd-line)}
html:not(#_) .shell[data-theme="dark"] .applicant-job-menu :is(button,li,[role=option]){background:transparent;color:var(--rd-text)}
html:not(#_) .shell[data-theme="dark"] .applicant-job-menu :is(button,li,[role=option]):hover{background:var(--rd-hover)}
html:not(#_) .shell[data-theme="dark"] .applicant-job-menu small{color:var(--rd-muted)}
html:not(#_) .shell[data-theme="dark"] .old-tags-toggle{color:var(--rd-link)}
html:not(#_) .shell .text-chat-shell .text-connection-note{padding-left:14px;padding-right:14px}

/* job Publishing tab: link boxes were white, so the link was dark blue on white and "Copy Link" was invisible; link name chip was white-on-white */
html:not(#_) .shell[data-theme="dark"] .job-link-main{background:var(--rd-panel-2)!important;border-color:var(--rd-line)}
html:not(#_) .shell[data-theme="dark"] .job-link-main .job-url{color:var(--rd-link)}
html:not(#_) .shell[data-theme="dark"] .job-share-details>summary{color:var(--rd-muted)}
html:not(#_) .shell[data-theme="dark"] .job-link-record-heading strong{background:var(--rd-blue-bg);color:var(--rd-blue-fg)}
html:not(#_) .shell[data-theme="dark"] a.job-action-link{background:transparent!important;color:var(--rd-text)!important;border-color:var(--rd-line)!important}
html:not(#_) .shell[data-theme="dark"] a.job-action-link:hover{background:var(--rd-hover)!important}

/* ========== BATCH 3: sign-in, sign-up, free trial, applicant-facing pages ========== */

/* free-trial pages stayed bright white when the device is in dark mode (sign-in already follows the device) */
@media (prefers-color-scheme:dark){
  html:not(#_) .hrgp-trial.hrgp-trial-page,html:not(#_) .hrgp-trialpage{background:#101722;color:#e8edf5;color-scheme:dark}
  html:not(#_) .hrgp-trial .hrgp-trial-logo{content:url("/brand/hrgp-logo-reversed.png")}
  html:not(#_) :is(.hrgp-trial .hrgp-trial-card,.hrgp-trialpage-card,.hrgp-trialpage-option){background:#192333;border-color:#344153;box-shadow:none;color:#e8edf5}
  html:not(#_) :is(.hrgp-trial h1,.hrgp-trial .hrgp-trial-title,.hrgp-trialpage-title){color:#f0f4fa}
  html:not(#_) .hrgp-trial .hrgp-trial-eyebrow{color:#ff9a5c}
  html:not(#_) :is(.hrgp-trial .hrgp-trial-lead,.hrgp-trial .hrgp-trial-note,.hrgp-trial label,.hrgp-trial .hrgp-trial-foot,.hrgp-trialpage-lead,.hrgp-trialpage-points){color:#acb8c9}
  html:not(#_) .hrgp-trial label.hrgp-trial-check{color:#e8edf5}
  html:not(#_) .hrgp-trial em{color:#acb8c9}
  html:not(#_) .hrgp-trial :is(input[type=text],input[type=email],input[type=tel],select){background-color:#121b29!important;border-color:#344153!important;color:#e8edf5!important}
  html:not(#_) .hrgp-trial input::placeholder{color:#7f8da3}
  html:not(#_) .hrgp-trial :is(input,select):focus{border-color:#3f68d8;box-shadow:0 0 0 3px rgba(63,104,216,.3)}
  html:not(#_) .hrgp-trial select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23acb8c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
  html:not(#_) .hrgp-trial a,html:not(#_) .hrgp-trialpage a{color:#a9c1ff}
  html:not(#_) :is(.hrgp-trial .hrgp-trial-submit,.hrgp-trialpage-go){background:#3f68d8!important;border-color:#3f68d8!important;color:#fff!important}
  html:not(#_) :is(.hrgp-trial .hrgp-trial-alert,.hrgp-trialpage-error){background:rgba(248,113,113,.14);color:#fca5a5;border-color:transparent}
  html:not(#_) .hrgp-trialpage-badge{background:rgba(63,104,216,.22);color:#a9c1ff}
}

/* applicant pages (job page, application form, applicant chat, form reports: .hrgp-fl) used their own old look:
   system font, bold weights, browser-blue links, plain "HRGP" text bar, and an all-navy dark mode. Bring them to the HRGP look. */
html:not(#_) .hrgp-fl{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55;background:#f7f9fc;color:#0f1f44}
html:not(#_) .hrgp-fl-head{display:flex;align-items:center;height:56px;padding:0 20px;background:#12308a;color:transparent;font-size:0;letter-spacing:0;
  background-image:url("/brand/hrgp-logo-reversed.png");background-repeat:no-repeat;background-position:16px center;background-size:auto 44px}
html:not(#_) .hrgp-fl-main{padding:28px 16px 40px}
html:not(#_) .hrgp-fl :is(h1,h2,h3,h4,h5,h6,label,dt,strong,b){font-weight:500}
html:not(#_) .hrgp-fl h1{font-size:1.75rem;line-height:1.2;letter-spacing:-.02em;margin:0 0 8px}
html:not(#_) .hrgp-fl a{color:#12308a;text-decoration:underline;text-decoration-color:rgba(18,48,138,.35);text-underline-offset:3px}
html:not(#_) .hrgp-fl a:hover{text-decoration-color:currentColor}
html:not(#_) .hrgp-fl :is(.hrgp-fl-card,.hrgp-fl-chat){border-color:#e4e7ec;border-radius:12px;padding:20px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
html:not(#_) .hrgp-fl :is(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea){min-height:40px;padding:8px 12px;border:1px solid #d5dbe5;border-radius:8px;background:#fff;color:inherit;font:inherit}
html:not(#_) .hrgp-fl :is(input,select,textarea):focus{outline:none;border-color:#12308a;box-shadow:0 0 0 3px rgba(18,48,138,.15)}
html:not(#_) .hrgp-fl button{min-height:40px;padding:8px 16px;border-radius:8px;font-weight:500;background:#12308a;border-color:#12308a}
html:not(#_) .hrgp-fl-msg{border-radius:8px}
html:not(#_) .hrgp-fl-powered{opacity:.8}
html:not(#_) .hrgp-fl input[type=file]{display:block;margin:4px 0 14px;font:inherit;font-size:.9375rem}
html:not(#_) .hrgp-fl input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:1px solid #d5dbe5;border-radius:8px;background:transparent;color:inherit;font:inherit;font-weight:500}
@media (max-width:640px){html:not(#_) .hrgp-fl form button[type=submit]{width:100%}}
@media (prefers-color-scheme:dark){
  html:not(#_) .hrgp-fl:not(.shell *){background:#101722;color:#e8edf5;color-scheme:dark}
  html:not(#_) .hrgp-fl:not(.shell *) .hrgp-fl-head{background-color:#192333;border-bottom:1px solid #344153}
  html:not(#_) .hrgp-fl:not(.shell *) :is(.hrgp-fl-card,.hrgp-fl-chat){background:#192333;border-color:#344153;box-shadow:none}
  html:not(#_) .hrgp-fl:not(.shell *) a{color:#a9c1ff;text-decoration-color:rgba(169,193,255,.4)}
  html:not(#_) .hrgp-fl:not(.shell *) :is(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea){background:#121b29!important;border-color:#344153!important;color:#e8edf5!important}
  html:not(#_) .hrgp-fl:not(.shell *) :is(input,select,textarea):focus{border-color:#3f68d8;box-shadow:0 0 0 3px rgba(63,104,216,.3)}
  html:not(#_) .hrgp-fl:not(.shell *) button{background:#3f68d8;border-color:#3f68d8;color:#fff}
  html:not(#_) .hrgp-fl:not(.shell *) .hrgp-fl-msg{background:#1f2b3e}
  html:not(#_) .hrgp-fl:not(.shell *) .hrgp-fl-bubble{background:#24324a}
  html:not(#_) .hrgp-fl:not(.shell *) .hrgp-fl-me{background:rgba(34,197,94,.18)}
  html:not(#_) .hrgp-fl:not(.shell *) .hrgp-fl-doc-co{color:#acb8c9}
  html:not(#_) .hrgp-fl:not(.shell *) input[type=file]::file-selector-button{border-color:#344153}
  html:not(#_) .hrgp-fl:not(.shell *) .hrgp-fl-powered .hc-powered text{fill:#fff}
}

/* ========== Nov 1 leftovers (Brad: "complete the small leftovers") ========== */

/* Employees list on phones: cards instead of a table that scrolled sideways (only the employee directory: rows with a person avatar) */
@media (max-width:640px){
  html:not(#_) .shell .hrgp-ems-table-wrap:has(.hrgp-ems-person){overflow:visible;background:transparent;border:0}
  html:not(#_) .shell .hrgp-ems-table-wrap table:has(.hrgp-ems-person){min-width:0!important;width:100%!important;border:0;background:transparent}
  html:not(#_) .shell .hrgp-ems-table-wrap table:has(.hrgp-ems-person) thead{display:none}
  html:not(#_) .shell .hrgp-ems-table-wrap table:has(.hrgp-ems-person) tbody{display:grid;gap:10px}
  html:not(#_) .shell .hrgp-ems-table-wrap tr:has(.hrgp-ems-person){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-auto-rows:min-content;align-content:start;height:auto!important;min-height:0!important;gap:8px 12px;padding:14px;border:1px solid var(--rd-line,#e2e8f0);border-radius:12px;background:var(--rd-panel,#fff)}
  html:not(#_) .shell .hrgp-ems-table-wrap tr:has(.hrgp-ems-person)>td{height:auto!important;min-height:0!important;display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0;padding:0;border:0;background:transparent;font-size:.8125rem;grid-column:1/-1}
  html:not(#_) .shell .hrgp-ems-table-wrap tr:has(.hrgp-ems-person)>td:has(>.hrgp-ems-person){grid-column:1;grid-row:1;font-size:1rem}
  html:not(#_) .shell .hrgp-ems-table-wrap tr:has(.hrgp-ems-person)>td:last-child{grid-column:2;grid-row:1;justify-content:flex-end}
  html:not(#_) .shell .hrgp-ems-table-wrap tr:has(.hrgp-ems-person)>td.hrgp-ems-pick{justify-content:flex-start}
  html:not(#_) .shell .hrgp-ems-table-wrap tr:has(.hrgp-ems-person)>td.hrgp-ems-email .hrgp-email{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html:not(#_) .shell .hrgp-ems-table-wrap tr:has(.hrgp-ems-person)>td:is(:nth-last-child(2),:nth-last-child(3),:nth-last-child(4),:nth-last-child(5),:nth-last-child(6),:nth-last-child(7))::before{color:var(--rd-muted,#64748b);flex:0 0 auto}
  html:not(#_) .shell .hrgp-ems-table-wrap tr:has(.hrgp-ems-person)>td:nth-last-child(7)::before{content:"Employee Code"}
  html:not(#_) .shell .hrgp-ems-table-wrap tr:has(.hrgp-ems-person)>td:nth-last-child(6)::before{content:"Email"}
  html:not(#_) .shell .hrgp-ems-table-wrap tr:has(.hrgp-ems-person)>td:nth-last-child(5)::before{content:"Position"}
  html:not(#_) .shell .hrgp-ems-table-wrap tr:has(.hrgp-ems-person)>td:nth-last-child(4)::before{content:"Manager"}
  html:not(#_) .shell .hrgp-ems-table-wrap tr:has(.hrgp-ems-person)>td:nth-last-child(3)::before{content:"Start Date"}
  html:not(#_) .shell .hrgp-ems-table-wrap tr:has(.hrgp-ems-person)>td:nth-last-child(2)::before{content:"Status"}
}

/* Templates & Forms: the plain Refresh button beside "Add ... Template" kept a dark navy fill in dark mode; match the other plain buttons */
html:not(#_) .shell[data-theme="dark"] .hrgp-native-actions>button:not(.primary){background:transparent!important;color:var(--rd-text)!important;border-color:var(--rd-line)!important}
html:not(#_) .shell[data-theme="dark"] .hrgp-native-actions>button:not(.primary):hover{background:var(--rd-hover)!important}

/* Applicant booking page (/app/schedule/...) and in-person invite (/app/meeting-invite/...): light-only before; follow the device's dark mode
   like the job page and sign-in. Scoped to these two pages (their panel carries inline styles); AI interview pages are left as they are.
   Bold inline weights become medium (HRGP style: 400/500 only). */
html:not(#_) .candidate-interview-shell:has(> main.content > :is(section,form).panel[style]) [style*="font-weight: 700"]{font-weight:500!important}
/* the code box on the invite page was a tiny square input squeezed beside its label: label above, full-width field */
html:not(#_) .candidate-interview-shell:has(> main.content > form.panel[style]) form.panel[style] label{display:grid;gap:6px;max-width:360px;margin:16px auto 12px;text-align:left}
html:not(#_) .candidate-interview-shell:has(> main.content > form.panel[style]) form.panel[style] input{width:100%;min-height:44px;padding:0 12px;border:1px solid #d5dbe5;border-radius:8px;font:inherit;font-size:1rem}
html:not(#_) .candidate-interview-shell:has(> main.content > form.panel[style]) form.panel[style] input:focus{outline:none;border-color:#12308a;box-shadow:0 0 0 3px rgba(18,48,138,.15)}
@media (prefers-color-scheme:dark){
  html:not(#_) .candidate-interview-shell:has(> main.content > :is(section,form).panel[style]){background:#101722;color:#e8edf5;color-scheme:dark;--brand-blue:#3f68d8;--brand-slate:#acb8c9;--brand-navy:#e8edf5}
  html:not(#_) .candidate-interview-shell:has(> main.content > :is(section,form).panel[style]) .candidate-header{background:#192333;border-color:#344153;color:#e8edf5}
  html:not(#_) .candidate-interview-shell:has(> main.content > :is(section,form).panel[style]) .candidate-header strong{color:#e8edf5}
  html:not(#_) .candidate-interview-shell:has(> main.content > :is(section,form).panel[style]) .panel{background:#192333;border-color:#344153;box-shadow:none;color:#e8edf5}
  html:not(#_) .candidate-interview-shell:has(> main.content > :is(section,form).panel[style]) :is(h1,h2,h3,label){color:#e8edf5}
  html:not(#_) .candidate-interview-shell:has(> main.content > :is(section,form).panel[style]) [style*="background: rgb(255, 255, 255)"]{background:#121b29!important}
  html:not(#_) .candidate-interview-shell:has(> main.content > :is(section,form).panel[style]) button[style*="background: rgb(255, 255, 255)"][style*="var(--brand-blue"]{color:#a9c1ff!important;border-color:#3f68d8!important;background:transparent!important}
  html:not(#_) .candidate-interview-shell:has(> main.content > :is(section,form).panel[style]) [style*="border: 1px solid rgb(229, 234, 242)"]{border-color:#344153!important}
  html:not(#_) .candidate-interview-shell:has(> main.content > :is(section,form).panel[style]) button[style*="color: rgb(203, 213, 225)"]{color:#5b6b82!important}
  html:not(#_) .candidate-interview-shell:has(> main.content > :is(section,form).panel[style]) input{background:#121b29;border-color:#344153;color:#e8edf5}
  html:not(#_) .candidate-interview-shell:has(> main.content > :is(section,form).panel[style]) .candidate-footer{color:#acb8c9}
  html:not(#_) .candidate-interview-shell:has(> main.content > form.panel[style]) form.panel[style] input{background:#121b29;border-color:#344153;color:#e8edf5}
  html:not(#_) .candidate-interview-shell:has(> main.content > form.panel[style]) form.panel[style] input:focus{border-color:#3f68d8;box-shadow:0 0 0 3px rgba(63,104,216,.3)}
}