@charset "UTF-8";
/* Dashboard-only styling layered on top of public /styles.css */

/* ===============
   Base + Layout
   =============== */

body.dashboard{
  background: var(--bg);
  color: var(--ink);
  overflow-x: clip;
}

/* ===============
   Auth-gated shell
   =============== */

/* Default (pre-auth): only the key upload control should be visible. */
html[data-tb-auth="0"] .tb-auth-only{ display:none !important; }
html[data-tb-auth="0"] #routeMount{ display:none; }

/* Gate status (non-interactive) */
.gate-status{
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 12px;
  font-size: 13px;
  color: var(--muted);
}

.gate-status--ok{
  border-color: var(--module-border);
  background: var(--module-bg);
  color: var(--module-ink);
}
.gate-status--bad{
  border-color: var(--bad-border);
  background: var(--bad-bg);
  color: var(--bad-ink);
}

/* Module badge should not look like the green OK badge */
:root{
  --module-border: #1d4ed8;
  --module-bg: rgba(37,99,235,0.14);
  --module-ink: #1e3a8a;
}

:root{
  --tb-accent: #2563eb;
  --tb-accent-bg: rgba(37,99,235,0.12);
  --tb-accent-border: rgba(37,99,235,0.55);
  --tb-surface-soft: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,249,252,0.96));
  --tb-surface-muted: #f7f8fb;
  --tb-surface-control: #ffffff;
  --tb-surface-control-strong: #f3f6fb;
  --tb-line-soft: rgba(15,23,42,0.08);
  --tb-line-strong: rgba(15,23,42,0.14);
  --tb-muted-strong: #4b5563;
  --tb-surface-shadow-soft: 0 10px 22px rgba(15,23,42,0.05);
}
html[data-theme="dark"]{
  --tb-accent: #60a5fa;
  --tb-accent-bg: rgba(96,165,250,0.14);
  --tb-accent-border: rgba(96,165,250,0.55);
  --tb-surface-soft: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  --tb-surface-muted: rgba(255,255,255,0.03);
  --tb-surface-control: rgba(255,255,255,0.04);
  --tb-surface-control-strong: rgba(255,255,255,0.08);
  --tb-line-soft: rgba(255,255,255,0.08);
  --tb-line-strong: rgba(255,255,255,0.14);
  --tb-muted-strong: #d1d5db;
  --tb-surface-shadow-soft: 0 18px 32px rgba(0,0,0,0.24);
}

.badge-module{
  border-color: var(--module-border);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--module-bg);
  color: var(--module-ink);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.02);
}

/* Wider shell on large desktops (dashboard only) */
body.dashboard main,
body.dashboard .header-inner,
body.dashboard .top-bar .top-bar-inner{
  max-width: 1280px;
}

body.dashboard .top-bar .top-bar-inner{ flex-wrap: wrap; }
@media (min-width: 1500px){
  body.dashboard main,
  body.dashboard .header-inner,
  body.dashboard .top-bar .top-bar-inner{
    max-width: 1440px;
  }
}
@supports not (overflow: clip){
  body.dashboard{ overflow-x: hidden; }
}

/* Header layout: keep same shell, add right-side controls */
.dashboard-header{
  justify-content: space-between;
  gap: 14px;
}

.dash-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.dash-sep{
  width:1px;
  height:32px;
  background: var(--border);
}

/* Gate controls (Access card) */
.dash-gate-controls{ margin: 10px 0 0; }
.dash-gate-secondary{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.dash-gate-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.dash-gate-status{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Larger tap targets in the dashboard (PWA/mobile) */
body.dashboard .button{
  min-height: 44px;
  touch-action: manipulation;
}

/* PWA safe-area padding for notched devices */
body.dashboard .top-bar{ padding-top: 10px; padding-top: calc(10px + env(safe-area-inset-top)); }
body.dashboard main{ padding-bottom: 36px; padding-bottom: calc(36px + env(safe-area-inset-bottom)); }

/* Pre-auth layout
   ------------
   Fixes:
   - Footer overlapping content when scrolling (especially iOS Safari).
   - Brand mark not centering in the space between the ACCESS card and the footer.
   Approach:
   - Keep header + footer in normal document flow.
   - Lock body scrolling and make <main> the scroll container so nothing can
     "slide under" the footer.
   - Let the pre-auth brand mark flex to fill remaining space and center within it.
*/

html[data-tb-auth="0"] body.dashboard{
  /* Keep normal document scrolling so the ACCESS card (and its Upload button)
     can never be clipped on short viewports. */
  min-height: 100vh;
  min-height: 100dvh;
}

html[data-tb-auth="0"] body.dashboard main{
  /* Make <main> a flex column so the brand mark can expand into spare space
     and visually center between the ACCESS card and the footer. */
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 0;
  /* Ensure safe-area spacing without creating excess “fake” scroll. */
  padding-bottom: calc(36px + env(safe-area-inset-bottom));
}

html[data-tb-auth="0"] body.dashboard .site-footer{
  position: static;
  padding-bottom: env(safe-area-inset-bottom);
}

html[data-tb-auth="0"] body.dashboard .dash-auth-logo{
  flex: 1 1 auto;
  margin: 0;
  padding: 10px 0 18px;
  pointer-events: none;
}


/* Visible focus (keyboard + accessibility) */
body.dashboard a:focus-visible,
body.dashboard button:focus-visible,
body.dashboard input:focus-visible,
body.dashboard select:focus-visible,
body.dashboard textarea:focus-visible,
body.dashboard summary:focus-visible{
  outline: 3px solid rgba(59,130,246,0.65);
  outline-offset: 2px;
}

/* ===============
   Filters
   =============== */

.dash-filterbar{
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 12px;
  margin-top: 10px;
  /* Keep the staff toggle aligned to the top edge of the filter row */
  align-items: start;
}

.dash-filterbar .field--wide{ grid-column: 1 / 2; }
.dash-filterbar .field--sort{ min-width: 180px; }

.filterbar-actions{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

#btnToggleFilters{ white-space: nowrap; }


.tb-staff-bulk-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.tb-staff-bulk-actions #tbStaffSelectionCount{
  white-space:nowrap;
}
th.selCol, td.selCol{
  width: 44px;
}

/* Staff inbox: put the Requests/Messages toggle above search + sort */
.dash-filterbar--staff{
  grid-template-columns: 2fr 1fr;
}
.dash-filterbar--staff .filterbar-actions--staff-top{
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: center;
}

/* Mobile: stack search/sort below the toggle row */
@media (max-width: 720px){
  .dash-filterbar--staff{
    grid-template-columns: 1fr;
  }
  .dash-filterbar--staff .field--sort{
    grid-column: 1 / -1;
  }
}

.dash-filters{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin-top: 10px;
  align-items: end;
}
.dash-filters .field--wide{ grid-column: span 2; }

@media (max-width: 980px){
  .dash-filters{ grid-template-columns: 1fr 1fr; }
  .dash-filters .field--wide{ grid-column: span 2; }
}
@media (max-width: 720px){
  .dash-filterbar{
    grid-template-columns: 1fr auto;
  }
  .dash-filterbar .field--wide{ grid-column: 1 / -1; }
  .dash-filterbar .field--sort{ grid-column: 1 / 2; min-width: 0; }

  .dash-filters{ grid-template-columns: 1fr; }
  .dash-filters .field--wide{ grid-column: span 1; }

  /* Mobile: collapse the extra filters behind a toggle button */
  .dash-filters-extra{ display: none; }
  .dash-filters-extra.is-open{ display: grid; }
}

@media (min-width: 721px){
  /* Desktop/tablet: filters always visible; toggle hidden */
  #btnToggleFilters{ display: none; }
  .dash-filters-extra{ display: grid !important; }
}

/* ===============
   Table (desktop/tablet)
   =============== */

.tablewrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  contain: layout paint;
}

.dash-table{
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 0;
}

.dash-table th,
.dash-table td{
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}

/* Prevent long, unbroken strings (employer names, IDs) from overflowing into adjacent cells */
.dash-table td{
  overflow-wrap: anywhere;
  word-break: break-word;
}


.dash-table th{
  text-align:left;
  user-select:none;
  white-space:nowrap;
}

.dash-table th[data-sort]{ cursor:pointer; }

/* Sorting indicators */
.dash-table th.sortable{
  position: relative;
  padding-right: 22px;
}
.dash-table th.sortable.sorted::after{
  content: "\25B2";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: .75;
}
.dash-table th.sortable.sorted[data-dir="desc"]::after{ content: "\25BC"; }

.dash-table tbody tr:hover{ background: var(--panel-2); }

/* Sticky header for long lists */
.dash-table thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel);
  box-shadow: 0 1px 0 var(--border);
}

/* Row states (selection/open/repeat) */
.dash-table tbody tr.is-selected td{
  background: rgba(59, 130, 246, 0.10);
}
html[data-theme="dark"] .dash-table tbody tr.is-selected td{
  background: rgba(59, 130, 246, 0.14);
}

.dash-table tbody tr.is-open td{
  background: var(--panel-2);
}

.dash-table tbody tr.is-repeat td:first-child{
  box-shadow: inset 3px 0 0 rgba(220, 120, 0, .70);
}
html[data-theme="dark"] .dash-table tbody tr.is-repeat td:first-child{
  box-shadow: inset 3px 0 0 rgba(255, 160, 40, .85);
}

.statusCell{
  /* Allow multiple badges (e.g., "Applied before" + status) to wrap instead of overflowing */
  white-space: normal;
  overflow-wrap: anywhere;
}

.statusCell .badge{
  margin-right: 6px;
  margin-bottom: 4px;
}

/* In table cells, let multi-word statuses wrap, but never split single words like 'Unreviewed' */
.dash-table td.statusCell .badge.badge-status,
.dash-table td.statusCell .badge.badge-pending,
.dash-table td.statusCell .badge.badge-applied-before{
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;  /* wrap at natural break opportunities */
  word-break: normal;         /* do not break inside words unless absolutely required */
  line-height: 1.15;
  text-align: center;
}

/* These are single-word statuses; keep them on one line */
.dash-table td.statusCell .badge.badge-status.badge-status--unreviewed,
.dash-table td.statusCell .badge.badge-status.badge-status--reviewed,
.dash-table td.statusCell .badge.badge-status.badge-status--purged,
.dash-table td.statusCell .badge.badge-status.badge-status--hold,
.dash-table td.statusCell .badge.badge-status.badge-status--closed,
.dash-table td.statusCell .badge.badge-status.badge-status--archived,
.dash-table td.statusCell .badge.badge-status.badge-status--expired{
  white-space: nowrap;
  overflow-wrap: normal;
}



/* Give the last column a little more room on desktop/tablet */
.dash-table th[data-sort="status"],
.dash-table td.statusCell{
  min-width: 180px;
  width: 200px;
}

/* Ensure the Open button column stays usable and doesn't collapse into Status */
.dash-table th:last-child,
.dash-table td:last-child{
  width: 120px;
}


/* Applicant cell: name + email + inline open button */
.applicantCell{
  min-width: 220px;
}
.applicantCell .btnOpenInline{
  margin-top: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}

/* Dark theme: white pill */
html[data-theme="dark"] .applicantCell .btnOpenInline{
  background: #fff;
  border: 1px solid rgba(255,255,255,.35);
  color: #111;
}
html[data-theme="dark"] .applicantCell .btnOpenInline:hover{
  background: #f2f2f2;
}

/* Light theme: dark pill */
html[data-theme="light"] .applicantCell .btnOpenInline{
  background: #111;
  border: 1px solid rgba(0,0,0,.35);
  color: #fff;
}
html[data-theme="light"] .applicantCell .btnOpenInline:hover{
  background: #000;
}

.btnOpenInline:active{ transform: translateY(1px); }


/* Inline detail row (accordion under applicant) */
tr.inlineDetail td.inlineDetailCell{
  padding: 0;
  background: transparent;
}
.inline-detail-wrap{
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Help card tweaks */
.help-card > summary{
  cursor: pointer;
  list-style: none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}
.help-card > summary::-webkit-details-marker{ display:none; }
.help-card > summary::after{
  content: "\25BE";
  font-size: 14px;
  opacity: .75;
  transform: translateY(-1px);
}
.help-card[open] > summary{
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.help-card[open] > summary::after{ content: "▴"; }

.help-summary-hint{ color: var(--muted); font-size: 12px; font-weight: 600; }
.help-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
  margin: 10px 0 12px;
}
.help-toolbar .help-note{
  font-size: 12px;
  color: var(--muted);
  max-width: 780px;
  line-height: 1.4;
}

/* Long code fragments inside help blocks should never overflow the card */
.help-note code{
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
}
@media (max-width: 700px){
  .help-note code{ display:block; }
}

.help-tip__v code{
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

/* Help card layout */
.help-card > summary .help-summary{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.help-summary-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.help-summary-title-row .badge{
  flex:0 0 auto;
  align-self:flex-start;
}
.help-card__content{
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.help-grid{
  display: grid;
  /*
    Help content is now tabbed, so only one pane is visible at a time.
    Keep the grid single-column to avoid wasting space on wide screens.
  */
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}
@media (max-width: 980px){
  .help-grid{ grid-template-columns: 1fr; }
}
.help-steps{
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}
.help-h{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.help-ol{
  margin: 0;
  padding-left: 18px;
}
.help-ol li{ margin: 0 0 8px; }
.help-ol li:last-child{ margin-bottom: 0; }

/* Help toolbar responsiveness */
@media (max-width: 700px){
  .help-toolbar{
    flex-direction: column;
    align-items: stretch;
  }
  .help-toolbar .help-note{ max-width: none; }
}

/* Generator + examples: consistent accordions and spacing */
.help-tip__generator{
  margin-top: 10px;
}
.help-tip__generator summary{
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.help-tip__spacer{
  margin-top: 10px;
}
.tb-linkgen__gateHint,
.tb-linkgen__msg{
  margin-top: 8px;
  color: var(--tb-muted-strong);
}


/* Dashboard banner (inline notices) */
.dash-banner{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}
.dash-banner--info{
  border-color: var(--border);
}
.dash-banner--warn{
  border-color: rgba(234, 179, 8, .55);
  background: rgba(234, 179, 8, .12);
}
.dash-banner--ok{
  border-color: rgba(34, 197, 94, .55);
  background: rgba(34, 197, 94, .12);
}
.dash-banner--danger{
  border-color: var(--danger);
  background: var(--danger-bg);
}



/* Help tip callout (improves contrast on dark theme) */
.help-tip{
  padding: 12px 12px;
  border: 1px solid var(--tb-line-soft);
  border-radius: 12px;
  background: var(--tb-surface-muted);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
.help-tip__title{
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 6px;
}
.help-tip__body{
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.help-tip__examples{
  margin-top: 10px;
}
.help-tip__examples summary{
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.help-tip__examples-body{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}


/* Performance (source analytics) */
.help-tip__analytics{
  margin-top: 10px;
}
.help-tip__analytics summary{
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.tb-analytics__summary{
  margin-top: 10px;
}
.tb-analytics__grid{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}
.tb-analytics__row{
  padding: 10px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tb-analytics__k{
  font-size: 13px;
  font-weight: 800;
}
.tb-analytics__meta{
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.35;
}
.tb-analytics__v{
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;

}

/* Performance visualization (Employer Portal Help) */
.tb-analytics__grid{
  display: grid;
  gap: 12px;
}

.tb-analytics__card{
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: inset 0 2px 0 var(--tb-accent-bg);
}

.tb-analytics__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.tb-analytics__title{
  font-size: 13px;
  font-weight: 900;
}

.tb-analytics__count{
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.tb-analytics__metrics{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}

.tb-ring{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: conic-gradient(var(--tb-accent) calc(var(--score,0) * 1%), var(--border) 0);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.tb-ring__inner{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--panel-2);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 950;
}

.tb-mbars{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tb-mbar{
  display: grid;
  grid-template-columns: 78px minmax(0,1fr) 46px;
  gap: 8px;
  align-items: center;
}

.tb-mbar__k{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.tb-bar{
  height: 10px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  overflow: hidden;
}

.tb-bar > span{
  display:block;
  height:100%;
  width: 0%;
  background: var(--tb-accent);
  opacity: .22;
  transition: width .7s ease;
}

.tb-mbar__v{
  font-size: 12px;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}


/* Link generator (Employer Portal Help) */
.tb-linkgen__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.tb-linkgen__full{ grid-column: 1 / -1; }

@media (max-width: 860px){
  .tb-linkgen__grid{ grid-template-columns: 1fr; }
}

.tb-linkgen__out{
  margin-top: 0;
  padding: 12px;
  border: 1px solid var(--tb-line-soft);
  border-radius: 14px;
  background: var(--tb-surface-muted);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
.tb-linkgen__outLabel{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tb-muted-strong);
  margin-bottom: 6px;
}
.tb-linkgen__out textarea{
  width: 100%;
  min-height: 72px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--tb-line-strong);
  background: var(--tb-surface-control);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  box-sizing: border-box;
}
.tb-linkgen__btnrow{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Tool container inside help panes */
.tb-tool{
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--tb-line-strong);
  border-left: 3px solid var(--tb-accent-border);
  border-radius: 16px;
  background: var(--tb-surface-soft);
  box-shadow: inset 0 2px 0 var(--tb-accent-bg), var(--tb-surface-shadow-soft);
}
.tb-tool__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tb-tool__title{
  font-size: 13px;
  font-weight: 950;
}
.tb-tool__sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--tb-muted-strong);
  line-height: 1.35;
}
.tb-tool__actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.help-tip__row{
  padding: 10px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.help-tip__k{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.help-tip__v code{
  /* Long URLs should wrap on mobile instead of overflowing */
  display: block;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.04);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}
html[data-theme="dark"] .help-tip__v code{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
}

/* ===============
   Detail section
   =============== */

.dash-detail-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}

.dash-detail-badges{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.dash-detail-grid{
  display:grid;
  grid-template-columns: minmax(0, 3fr) minmax(320px, 1fr);
  gap:12px;
  margin-top: 12px;
}

@media (max-width: 980px){
  .dash-detail-grid{ grid-template-columns: 1fr; }
}

/* 3-column detail grid (application + files + workflow) */
.dash-detail-grid.dash-detail-grid--three{
  grid-template-columns: minmax(0, 2.35fr) minmax(280px, 1.05fr) minmax(340px, 1.2fr);
}
@media (max-width: 1220px){
  .dash-detail-grid.dash-detail-grid--three{
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  }
  .dash-detail-grid--three .dash-panel--right{
    grid-column: 1 / -1;
  }
}
@media (max-width: 980px){
  .dash-detail-grid.dash-detail-grid--three{ grid-template-columns: 1fr; }
}

/* Open listing request detail: stack request + draft in the main column and reserve
   the full right rail for workflow/status/actions. */
.dash-detail-grid.dash-detail-grid--workflow-request{
  grid-template-columns: minmax(0, 1.75fr) minmax(380px, 460px);
  align-items:start;
}

.dash-detail-mainstack{
  min-width:0;
  display:grid;
  gap:12px;
}

.dash-detail-grid--workflow-request .dash-panel--right{
  grid-column: 2;
  min-width:0;
}

@media (max-width: 1320px){
  .dash-detail-grid.dash-detail-grid--workflow-request{
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, 420px);
  }
}

@media (max-width: 1140px){
  .dash-detail-grid.dash-detail-grid--workflow-request{
    grid-template-columns: 1fr;
  }
  .dash-detail-grid--workflow-request .dash-panel--right{
    grid-column: auto;
  }
}

.dash-detail-head-actions{ display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; }


/* Candidate detail: improve readability on desktop + mobile */
.candidate-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
  margin-top: 8px;
}

.candidate-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 240px;
}

/*
  Mobile/tablet layout fix:
  On some iOS Safari setups (especially when "Request Desktop Website" is enabled),
  the 720px breakpoint won't trigger, leaving the meta box as a narrow right-side
  column with dead space.

  Use the same 980px breakpoint as the detail grid so the meta box reliably
  becomes full-width on phones/tablets.
*/
@media (max-width: 980px){
  .candidate-head{ flex-direction: column; align-items: stretch; }
  /* Grow to fill the row so you don't get "dead" space to the right. */
  .candidate-meta{ width: 100%; min-width: 0; flex: 1 1 auto; }
}

/* Key/value grid (replaces the old table layout) */
.kv-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top: 8px;
}

@media (max-width: 720px){
  .kv-grid{ grid-template-columns: 1fr; }
}

.kv-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 0;
}

.kv-k{
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.kv-v{
  margin-top: 6px;
  font-size: 14px;
  word-break: break-word;
}

.kv-link{ text-decoration: underline; }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  background: var(--panel-2);
}

.dash-details{ margin-top: 14px; }
.dash-details > summary{ cursor:pointer; padding: 10px 0; }

.dash-panel{
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  min-width: 0;
}

.dash-pre{
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

/* Attachments list */
.dash-files{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 10px;
}


.dash-files > .button{
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dash-file-row .button{
  width: auto;
  white-space: nowrap;
  flex: 0 0 auto;
}
.dash-file-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.dash-file-meta{ display:flex; flex-direction:column; gap: 2px; flex: 1; min-width: 0; }
.dash-file-name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-file-sub{ font-size:12px; color: var(--muted); overflow-wrap:anywhere; word-break:break-word; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }

/* ===============
   Theme variables (dashboard dark mode)
   =============== */

html[data-theme="dark"]{
  --bg: #0b0c0e;
  --ink: #f2f4f7;
  --muted: #b3bac5;

  --panel: #121417;
  --panel-2: #0f1113;

  --border: #24272c;
  --border-strong: #343943;

  --shadow: 0 14px 34px rgba(0,0,0,.45);

  /* Improve contrast + focus visibility in dark theme */
  --focus-ring: rgba(255,255,255,0.18);
  --focus-border: #f2f4f7;

  /* Module badge (avoid green in both themes) */
  --module-border: #60a5fa;
  --module-bg: rgba(59,130,246,0.18);
  --module-ink: #dbeafe;

  /* Badge readability in dark theme */
  --surface-ink: #f2f4f7;
  --subtle-ink: #d1d5db;

  --ok-border: #22c55e;
  --ok-bg: rgba(34,197,94,0.22);
  --ok-ink: #bbf7d0;

  --bad-border: #ef4444;
  --bad-bg: rgba(239,68,68,0.18);
  --bad-ink: #fecaca;
}

/* Pre-auth should always render the light theme, even if a prior session cached data-theme="dark". */
html[data-tb-auth="0"][data-theme="dark"]{
  --bg: #f2f2f2;
  --ink: #101113;
  --muted: #5f6368;

  --panel: #ffffff;
  --panel-2: #f7f7f7;

  --border: #e6e6e6;
  --border-strong: #bdbdbd;

  --shadow: 0 10px 28px rgba(0,0,0,.08);

  --focus-ring: rgba(0,0,0,.16);
  --focus-border: #111;

  --module-border: #1d4ed8;
  --module-bg: rgba(37,99,235,0.14);
  --module-ink: #1e3a8a;
}

html[data-theme="dark"] .site-header{
  background: linear-gradient(180deg, #0c0d10, #101216);
  border-bottom: 1px solid var(--border);
}

html[data-theme="dark"] .card{
  background: var(--panel);
  border-color: var(--border);
}

/* ===============
   Dark form controls (neutral charcoal)
   =============== */

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

html[data-theme="dark"] input::placeholder{
  color: rgba(242,244,247,0.45);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

html[data-theme="dark"] select{ color-scheme: dark; }

/* ===============
   Buttons (dashboard behavior)
   =============== */

html[data-theme="dark"] .button.button-ghost{
  color: var(--ink);
  border-color: rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.08);
}

html[data-theme="dark"] .button.button-ghost:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.52);
}


html[data-theme="dark"] .button:not(.button-ghost):not([data-danger="1"]){
  background: var(--focus-border);
  border-color: var(--focus-border);
  color: #0b0c0e;
}
html[data-theme="dark"] .button:not(.button-ghost):not([data-danger="1"]):hover{
  background: #0b0c0e;
  border-color: #0b0c0e;
  color: #ffffff;
}

html[data-theme="dark"] .button:disabled,
.button[disabled]{
  color: rgba(0,0,0,0.55);
  border-color: rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.04);
  cursor: not-allowed;
  box-shadow: none;
}

html[data-theme="dark"] .button:disabled,
html[data-theme="dark"] .button[disabled]{
  color: rgba(255,255,255,0.72);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  cursor: not-allowed;
  box-shadow: none;
}


/* Make row "Open" action stand out in dark theme */
html[data-theme="dark"] .btnOpen{
  background: #ffffff;
  color: #111111;
  border-color: rgba(255,255,255,0.75);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.20),
              0 10px 22px rgba(0,0,0,0.35);
}
html[data-theme="dark"] .btnOpen:hover{
  background: #f3f4f6;
  border-color: rgba(255,255,255,0.95);
}

html[data-theme="dark"] .dash-controls .button:not(.button-ghost):not([data-danger]){
  background: #ffffff;
  color: #111111;
  border-color: rgba(255,255,255,0.75);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.20),
              0 10px 22px rgba(0,0,0,0.35);
}

html[data-theme="dark"] .dash-controls .button:not(.button-ghost):not([data-danger]):hover{
  background: #f3f4f6;
  border-color: rgba(255,255,255,0.95);
}

.button[data-danger="1"]{
  background: transparent;
  color: var(--ink);
  border: 1px solid #7a0000;
}

.button[data-danger="1"]:hover{
  background: rgba(185,28,28,0.12);
  border-color: #ef4444;
}

html[data-theme="dark"] .button[data-danger="1"]{
  color: #ffffff;
  border-color: #b91c1c;
  box-shadow: 0 0 0 1px rgba(185,28,28,0.25);
}

html[data-theme="dark"] .button[data-danger="1"]:hover{
  box-shadow: 0 0 0 1px rgba(239,68,68,0.60),
              0 0 14px rgba(239,68,68,0.35);
}

/* ===============
   AUTH + SECURITY AFFORDANCE (clean + conflict-free)
   =============== */

body.dashboard.is-locked main{
  opacity: 0.78;
  filter: saturate(0.92);
  transition: opacity .25s ease, filter .25s ease;
}

body.dashboard.is-locked main button,
body.dashboard.is-locked main a,
body.dashboard.is-locked main input,
body.dashboard.is-locked main select,
body.dashboard.is-locked main textarea{
  pointer-events: none;
  opacity: 0.55;
  filter: grayscale(0.15);
}

/* allow scroll/swipe on lists even while locked */
body.dashboard.is-locked .tablewrap{ pointer-events: auto; }
body.dashboard.is-locked header,
body.dashboard.is-locked .top-bar,
body.dashboard.is-locked footer{ pointer-events: auto; }

/* AUTH badge base */
#authState.badge{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;

  padding: 10px 16px;
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;

  font-weight: 700;
  letter-spacing: .25px;
}

#authState.badge::before{
  content: "🔒";
  font-size: 13px;
  line-height: 1;
  opacity: 1;
}
#authState.badge.badge-ok::before{ content: "🔓"; }

/* Light mode: dark text on light fills */
html[data-theme="light"] #authState.badge{
  color: #111;
  text-shadow: none;
  box-shadow: none;
}
html[data-theme="light"] #authState.badge-bad{
  color: #7f1d1d;
  background: rgba(239,68,68,0.16);
  border-color: rgba(239,68,68,0.72);
  box-shadow: inset 0 0 0 1px rgba(239,68,68,0.18);
}
html[data-theme="light"] #authState.badge-ok{
  color: #064e2b;
  background: rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.70);
  box-shadow: inset 0 0 0 1px rgba(34,197,94,0.18);
}

/* Dark mode: white text on deep fills */
html[data-theme="dark"] #authState.badge{
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html[data-theme="dark"] #authState.badge-bad{
  background: linear-gradient(180deg, #6b1212, #4c0d0d);
  border-color: #ef4444;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}

html[data-theme="dark"] #authState.badge-ok{
  background: linear-gradient(180deg, #0f3d22, #0a2c18);
  border-color: #22c55e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}

/* Pulse: ring only */
#authState.pulse-red{ animation: badgeRingPulseRed 420ms ease-out 1; }
#authState.pulse-green{ animation: badgeRingPulseGreen 420ms ease-out 1; }

@keyframes badgeRingPulseRed{
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  40%  { box-shadow: 0 0 0 4px rgba(239,68,68,0.30); }
  100% { box-shadow: 0 0 0 3px rgba(239,68,68,0.20); }
}

@keyframes badgeRingPulseGreen{
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  40%  { box-shadow: 0 0 0 4px rgba(34,197,94,0.30); }
  100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.20); }
}

/* Dark theme pulse tweak (avoid neon ring) */
html[data-theme="dark"] #authState.pulse-red{ animation: badgeRingPulseRedDark 420ms ease-out 1; }
html[data-theme="dark"] #authState.pulse-green{ animation: badgeRingPulseGreenDark 420ms ease-out 1; }

@keyframes badgeRingPulseRedDark{
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  40%  { box-shadow: 0 0 0 4px rgba(239,68,68,0.22); }
  100% { box-shadow: 0 0 0 3px rgba(239,68,68,0.14); }
}

@keyframes badgeRingPulseGreenDark{
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  40%  { box-shadow: 0 0 0 4px rgba(34,197,94,0.20); }
  100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.12); }
}

/* =========================
   Responsive (dashboard)
   ========================= */

.button-row .dash-spacer{ flex: 1 1 auto; }
.button-row .button{ white-space: normal; }

/* Tablet ↓ */
@media (max-width: 900px){

  .dashboard-header{
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .dashboard-header .logo{
    flex: 1 1 100%;
    justify-content: center;
  }
  .dash-controls{
    flex: 1 1 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .dash-sep{ display: none; }

  .dash-filters{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .button-row{
    justify-content: center;
    gap: 10px;
  }

}

/* Phone ↓ */

/* Selection bar: only needed on mobile */
#selectionBar{ display:none; }
@media (max-width: 980px){
  #selectionBar{ display:block; }
}
@media (max-width: 820px){

  /* Staff module: keep filter/search controls from overflowing on narrow screens */
  .dash-filterbar{ grid-template-columns: 1fr; }
  .dash-filterbar .field--wide{ grid-column: 1 / -1; }
  .dash-filterbar .field--sort{ grid-column: 1 / -1; }
  .filterbar-actions{ justify-content: flex-start; }
  #btnToggleFilters{ width: 100%; justify-content:center; }

  .button-row > div, .button-row > .field, .button-row > .pager{ width: 100%; }
  .button-row .pager{ justify-content: space-between; }

  .card code{ overflow-wrap:anywhere; word-break:break-word; }
  body.dashboard main{ padding: 18px 12px calc(28px + env(safe-area-inset-bottom)); }
  /* Pre-auth scrolls inside <main> (header/footer stay visible). Keep the brand mark
     sized for small viewports without forcing extra blank scroll space. */
  html[data-tb-auth="0"] body.dashboard .dash-auth-logo{
    /* Pre-auth brand mark: constrain height on phones so the ACCESS card stays usable above the fold. */
    max-width: min(460px, 78vw);
    margin-left: auto;
    margin-right: auto;
    flex: 1 1 auto;
    padding: 8px 0 14px;
  }
  html[data-tb-auth="0"] body.dashboard .dash-auth-logo img{
    width: 100%;
    height: auto;
    max-height: min(200px, 26vh);
  }

  .header-inner{ padding: 12px; }

  #authState.badge{
    max-width: 100%;
    justify-content: center;
  }

  .dash-filters{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .button-row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .button-row .button{
    width: 100%;
    justify-content: center;
  }

  .button-row .dash-spacer{ display: none; }

  .dash-detail-head{
    flex-direction: column;
    align-items: stretch;
  }

  .card{ padding: 14px; }
}

/* Small phones ↓ */
@media (max-width: 420px){
  .logo-text{ font-size: 16px; }
  .logo img{ width: 40px; height: 40px; }
  /* Smaller pre-auth brand mark for very small phones */
  html[data-tb-auth="0"] body.dashboard .dash-auth-logo{ padding: 6px 0 12px; }
  html[data-tb-auth="0"] body.dashboard .dash-auth-logo img{ max-height: min(160px, 22vh); }
}

/* =========================
   Option A: Mobile "card rows" view
   (no horizontal scroll, fits screen)
   ========================= */

@media (max-width: 980px){

  /* stop horizontal table scrolling on phones */
  .tablewrap{
    overflow-x: visible;
    contain: none;
    touch-action: auto;
  }

  /* Hide table header */
  .dash-table thead{ display:none; }

  /* Convert table structure to blocks */
  .dash-table,
  .dash-table tbody,
  .dash-table tr{
    display:block;
    width: 100%;
    min-width: 0;
  }

/* Force no horizontal layout in card mode */
.dash-table{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}


  .dash-table{
    width: 100%;
  }

  /* Each row becomes a card */
  .dash-table tr{
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
    margin: 10px 0;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  /* Cells become "label: value" rows */
  .dash-table td{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
  }

  /* Undo desktop column width constraints in card mode */
  .dash-table th,
  .dash-table td{ width: auto !important; }

  /* Keep child elements from forcing horizontal overflow */
  .dash-table td > *{ max-width: 100%; min-width: 0; }

  .dash-table td:last-child{ border-bottom: 0; }

  /* Labels: use data-label provided by the renderer (works for employer + staff tables) */
  .dash-table td::before{
    content: attr(data-label);
    font-weight: 700;
    color: var(--muted);
    flex: 0 0 42%;
    max-width: 42%;
    min-width: 120px;
  }

  /* Checkbox cell (employer table): no label */
  .dash-table td:has(input.rowSel)::before{ content: ""; }
  .dash-table td:has(input.rowSel){
    justify-content: flex-start;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
  }

  /* Open buttons: full width on mobile */
  .dash-table .tb-openbtn{
    width: 100%;
    justify-content: center;
  }

  /* Applicant cell: stack and keep the Open button usable */
  .dash-table td.applicantCell{
    min-width: 0 !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .dash-table td.applicantCell::before{
    flex: 0 0 auto;
    max-width: 100%;
    min-width: 0;
  }
  .dash-table td.applicantCell .btnOpenInline{
    width: 100%;
    justify-content: center;
  }
}


/* Raw JSON / code blocks */
pre.code{
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
details pre{
  max-height: 50vh;
}


/* Detail section badges ("DECRYPTED", "FILES") — improve contrast in dark mode */
.dash-panel .badge{
  background: var(--panel);
  border-color: var(--border-strong);
  color: var(--subtle-ink);
  font-weight: 750;
  letter-spacing: .35px;
  text-transform: uppercase;
}
html[data-theme="dark"] .dash-panel .badge{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
}

/* Purged history box */
#purgedBox .purged-note{ margin: 0 0 10px; }
#purgedBox .purged-list{ display:flex; flex-direction:column; gap:10px; }
#purgedBox .purged-item{
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
#purgedBox .purged-item__top{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items: baseline;
}
#purgedBox .purged-item__meta{
  margin-top: 6px;
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
}


/* Purged history (collapsible) */
.purged-summary{
  cursor:pointer;
  font-weight:650;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.purged-summary::-webkit-details-marker{ display:none; }
#purgedDetails{ padding: 14px 16px; }
#purgedDetails[open] .purged-summary{ margin-bottom: 8px; }



/* Purged history (summary only: count + audit button) */
#purgedSummaryRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
}
#purgedSummaryRow.hidden{ display:none; }
#purgedSummaryRow #purgedSummaryText{ font-weight:650; }


/* Applied-before indicator */

/* Status badges */
.badge.badge-status{
  display:inline-block;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--panel-2);
  color: var(--ink);
  vertical-align:middle;
}

.badge.badge-status.badge-status--unreviewed{
  border-color: rgba(148, 163, 184, .75);
  background: rgba(148, 163, 184, .12);
  color: #334155;
}
html[data-theme="dark"] .badge.badge-status.badge-status--unreviewed{
  border-color: rgba(148, 163, 184, .45);
  background: rgba(148, 163, 184, .10);
  color: rgba(226, 232, 240, 0.92);
}

.badge.badge-status.badge-status--reviewed{
  border-color: rgba(34, 197, 94, .55);
  background: rgba(34, 197, 94, .12);
  color: #14532d;
}
html[data-theme="dark"] .badge.badge-status.badge-status--reviewed{
  border-color: rgba(34, 197, 94, .55);
  background: rgba(34, 197, 94, .12);
  color: rgba(187, 247, 208, 0.92);
}

.badge.badge-status.badge-status--purged{
  border-color: rgba(239, 68, 68, .55);
  background: rgba(239, 68, 68, .10);
  color: #7f1d1d;
}
html[data-theme="dark"] .badge.badge-status.badge-status--purged{
  border-color: rgba(239, 68, 68, .55);
  background: rgba(239, 68, 68, .12);
  color: rgba(254, 202, 202, 0.95);
}

.badge.badge-status.badge-status--other{
  border-color: rgba(100, 116, 139, .55);
  background: rgba(100, 116, 139, .10);
  color: #0f172a;
}
html[data-theme="dark"] .badge.badge-status.badge-status--other{
  border-color: rgba(100, 116, 139, .45);
  background: rgba(100, 116, 139, .10);
  color: rgba(226, 232, 240, 0.92);
}

.badge.badge-applied-before{
  display:inline-block;
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(220, 120, 0, .6);
  background: rgba(220, 120, 0, .12);
  color: #7a3e00;
  margin-right:0;
  vertical-align:middle;
}
html[data-theme="dark"] .badge.badge-applied-before{
  border-color: rgba(255, 160, 40, .85);
  background: rgba(255, 160, 40, .16);
  color: rgba(255, 210, 150, 0.95);
}

/* Staff inbox: request-type chip (e.g., Renewal) */
.badge.badge-renewal{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  letter-spacing:.25px;
  text-transform:uppercase;
  white-space:nowrap;
}


/* Staff inbox: request-type chip (Unlisted) */
.badge.badge-unlisted{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  letter-spacing:.25px;
  text-transform:uppercase;
  white-space:nowrap;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, 0.90);
}


.badge.badge-status.badge-status--pipeline{
  border-color: rgba(59, 130, 246, .55);
  background: rgba(59, 130, 246, .10);
  color: #1e3a8a;
}
html[data-theme="dark"] .badge.badge-status.badge-status--pipeline{
  border-color: rgba(59, 130, 246, .55);
  background: rgba(59, 130, 246, .12);
  color: rgba(191, 219, 254, 0.95);
}

.badge.badge-status.badge-status--positive{
  border-color: rgba(34, 197, 94, .55);
  background: rgba(34, 197, 94, .12);
  color: #14532d;
}

/* Pending badge (employer listing requests) — match status badge styling */
.badge.badge-pending{
  display:inline-block;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(234, 179, 8, .55);
  background: rgba(234, 179, 8, .12);
  color: #854d0e;
  vertical-align:middle;
}
html[data-theme="dark"] .badge.badge-pending{
  border-color: rgba(234, 179, 8, .45);
  background: rgba(234, 179, 8, .10);
  color: rgba(254, 243, 199, 0.95);
}

html[data-theme="dark"] .badge.badge-status.badge-status--positive{
  border-color: rgba(34, 197, 94, .55);
  background: rgba(34, 197, 94, .12);
  color: rgba(187, 247, 208, 0.92);
}

.badge.badge-status.badge-status--hold{
  border-color: rgba(234, 179, 8, .55);
  background: rgba(234, 179, 8, .10);
  color: #713f12;
}
html[data-theme="dark"] .badge.badge-status.badge-status--hold{
  border-color: rgba(234, 179, 8, .55);
  background: rgba(234, 179, 8, .12);
  color: rgba(254, 240, 138, 0.92);
}

.badge.badge-status.badge-status--closed{
  border-color: rgba(239, 68, 68, .55);
  background: rgba(239, 68, 68, .10);
  color: #7f1d1d;
}
html[data-theme="dark"] .badge.badge-status.badge-status--closed{
  border-color: rgba(239, 68, 68, .55);
  background: rgba(239, 68, 68, .12);
  color: rgba(254, 202, 202, 0.95);
}

.badge.badge-status.badge-status--archived{
  border-color: rgba(100, 116, 139, .55);
  background: rgba(100, 116, 139, .10);
  color: #0f172a;
}
html[data-theme="dark"] .badge.badge-status.badge-status--archived{
  border-color: rgba(100, 116, 139, .55);
  background: rgba(100, 116, 139, .12);
  color: rgba(226, 232, 240, 0.92);
}




/* Light mode: make destructive (Purge) button more prominent */
html[data-theme="light"] .button[data-danger="1"]{
  background: rgba(239,68,68,0.14);
  border-color: rgba(239,68,68,0.70);
  color: #7f1d1d;
}
html[data-theme="light"] .button[data-danger="1"]:hover{
  filter: brightness(0.98);
  box-shadow: 0 6px 18px rgba(239,68,68,0.18);
}
html[data-theme="light"] .button[data-danger="1"]:disabled{
  opacity: 0.55;
  box-shadow: none;
}


/* Source link-like button */
.srcLink{
  background:transparent;
  border:0;
  padding:0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.srcLink:hover{ opacity: 0.85; }

.card{ overflow-x:hidden; }
pre{ white-space: pre-wrap; overflow-wrap:anywhere; word-break:break-word; }

/* Light theme: make row "Open" action dark pill */
html[data-theme="light"] .btnOpen{
  background: #111111;
  color: #ffffff;
  border-color: rgba(0,0,0,0.75);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10),
              0 10px 22px rgba(0,0,0,0.10);
}
html[data-theme="light"] .btnOpen:hover{
  background: #0b0b0b;
  border-color: rgba(0,0,0,0.85);
}


/* --- TradesBacker: Open button theme via CSS variables (single source of truth) --- */
:root{
  --tb-open-btn-bg: #000;
  --tb-open-btn-fg: #fff;
  --tb-open-btn-bg-hover: #111;
}
html[data-theme="dark"]{
  --tb-open-btn-bg: #fff;
  --tb-open-btn-fg: #000;
  --tb-open-btn-bg-hover: #f0f0f0;
}
html[data-theme="light"] .tb-openbtn{
  background: var(--tb-open-btn-bg) !important;
  color: var(--tb-open-btn-fg) !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
}
html[data-theme="dark"] .tb-openbtn{
  background: var(--tb-open-btn-bg) !important;
  color: var(--tb-open-btn-fg) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}
html[data-theme="light"] .tb-openbtn:hover,
html[data-theme="dark"] .tb-openbtn:hover{
  background: var(--tb-open-btn-bg-hover) !important;
}


.button.button-minimal{ padding:8px 12px; font-size:12px; opacity:.7; }
.button.button-minimal:hover{ opacity:1; }
/* =========================
   Gated Link Generator
   ========================= */
.tb-linkgen__gate{
  border: 1px dashed var(--tb-line-strong);
  border-radius: 16px;
  padding: 14px;
  background: var(--tb-surface-muted);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
.tb-linkgen__gateInner{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tb-linkgen__list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.tb-linkgen__item{
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 10px;
  align-items: center;
}

.tb-linkgen__itemLabel{
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--tb-muted-strong);
}

.tb-linkgen__itemInput{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}


/* Help card polish */
.card-help{ padding: 0; }
.card-help .help-card{ display:block; }
.card-help .help-card > summary{
  border: 0;
  border-radius: 0;
  padding: 16px 18px;
  background: transparent;
}
.card-help .help-card > summary:hover{ background: var(--panel-2); }
.card-help .help-card[open] > summary{ background: var(--panel-2); }
.card-help .help-card__content{
  margin-top: 0;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border);
}

/* Small buttons used inside compact UI blocks */
.button.button-sm{ padding: 8px 12px; font-size: 12px; }

/* Chips (inline pills) */
.chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.help-toolbar__actions{ display:flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.help-msg-status{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,0.04); font-size:12px; line-height:1; max-width: 520px; }
.help-msg-status__label{ opacity: .72; }
.help-msg-status__subject{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 260px; }
.help-msg-status__state{ padding:2px 8px; border-radius:999px; border:1px solid var(--border); font-size:12px; }
@media (max-width: 720px){ .help-msg-status{ max-width: 100%; } .help-msg-status__subject{ max-width: 180px; } }

/* Help section nav (quick jump) */
.help-nav{
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 6px 2px 2px;
  margin: 6px 0 2px;
  -webkit-overflow-scrolling: touch;
}
.help-nav__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.help-nav__btn:hover{
  border-color: var(--focus-border);
  background: var(--panel-2);
  text-decoration: none;
}

/* Help tabs (Employer Portal Help) */
.help-tabs-layout{
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.help-tabs{
  flex: 0 0 220px;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mobile selector (replaces the pill row on very small screens) */
.help-tabs-mobile{ display:none; }
.help-tabs-mobile .select{ width: 100%; }
.help-tab{
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  border-radius: 14px;
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  line-height: 1.2;
}
.help-tab:hover{
  border-color: var(--focus-border);
  background: var(--panel-2);
}
.help-tab.is-active{
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.help-tabs-content{
  flex: 1;
  min-width: 0;
}
.help-tabs-content .help-grid{
  margin-top: 0;
}

.help-side-block{
  padding: 0;
}
.help-side-block[hidden]{ display:none !important; }

@media (max-width: 980px){
  .help-tabs-layout{ flex-direction: column; }
  .help-tabs{
    width: auto;
    flex: 1 1 auto;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .help-tab{
    white-space: nowrap;
    border-radius: 999px;
  }
}

@media (max-width: 700px){
  .help-tabs{ display:none; }
  .help-tabs-mobile{ display:block; }
}

/* Panelized help content (left column) */
.help-panels{ display: grid; grid-template-columns: 1fr; gap: 12px; }
.help-panel{
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}
.help-panel__head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; margin-bottom: 8px; }
.help-chips{ display:flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.help-ul{ margin: 0; padding-left: 18px; }
.help-ul li{ margin: 0 0 8px; }
.help-ul li:last-child{ margin-bottom: 0; }

/* Inline callouts inside help panels */
.help-callout{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 13px;
  line-height: 1.45;
}
.help-callout--warn{
  border-color: rgba(234, 179, 8, .55);
  background: rgba(234, 179, 8, .12);
}

/* Polished nested accordions inside help */
.help-accordion > summary{
  cursor: pointer;
  list-style: none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.help-accordion > summary::-webkit-details-marker{ display:none; }
.help-accordion > summary::after{ content: "\25BE"; font-size: 14px; opacity: .75; transform: translateY(-1px); }
.help-accordion[open] > summary::after{ content: "▴"; }

/* Quick renewal panel: darker treatment in employer request mode while staying theme-safe */
#tbRenewListing .help-callout{
  background: var(--panel-2);
  border-color: var(--border-strong);
}

/* Link generator output rows */
.tb-linkgen__list{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.tb-linkgen__item{
  /*
    Stack label above the URL group.
    This prevents the label column from stealing horizontal space when the
    generator is rendered in the (often narrow) desktop sidebar.
  */
  display:flex;
  flex-direction:column;
  gap: 6px;
  align-items: stretch;
}
.tb-linkgen__itemLabel{
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--tb-muted-strong);
}
.tb-linkgen__itemGroup{
  display:flex;
  align-items:stretch;
  border:1px solid var(--tb-line-strong);
  border-radius:12px;
  overflow:hidden;
  background: var(--tb-surface-control);
  box-shadow: inset 0 2px 0 var(--tb-accent-bg), inset 0 1px 0 rgba(255,255,255,0.72);
}
.tb-linkgen__itemGroup:focus-within{
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--focus-border);
}
.tb-linkgen__itemGroup input.tb-linkgen__itemInput{
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}
.tb-linkgen__itemGroup input.tb-linkgen__itemInput:focus{ outline: none; }

.tb-linkgen__ctlbtn{
  border: 0;
  border-left: 1px solid var(--tb-line-soft);
  background: var(--tb-surface-control-strong);
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.tb-linkgen__ctlbtn.tb-linkgen__ctlbtn--open{
  background: var(--tb-accent-bg);
  color: var(--accent);
  font-weight: 800;
}
/* Dark theme: make Copy/Open controls readable and button-like */
html[data-theme="dark"] .tb-linkgen__ctlbtn{
  color: var(--ink);
  background: rgba(255,255,255,0.10);
}
html[data-theme="dark"] .tb-linkgen__ctlbtn:hover{
  background: rgba(255,255,255,0.16);
}
html[data-theme="dark"] .tb-linkgen__ctlbtn.tb-linkgen__ctlbtn--open{
  background: #ffffff;
  color: #111111;
}
html[data-theme="dark"] .tb-linkgen__ctlbtn.tb-linkgen__ctlbtn--open:hover{
  background: #f3f4f6;
}

.tb-linkgen__ctlbtn:hover{
  background: rgba(37,99,235,0.08);
  color: var(--accent-hover);
}
html[data-theme="dark"] .tb-linkgen__ctlbtn:hover{ background: rgba(255,255,255,0.16); }

@media (max-width: 860px){
  .tb-linkgen__item{ grid-template-columns: 1fr; align-items: stretch; }
}



/* Staff tools (keygen / onboarding) */
.tb-tools-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width: 980px){.tb-tools-grid{grid-template-columns:1fr 1fr}}
.tb-tool-actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.tb-tool-status{margin-top:8px;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.tb-tool-ok{color:var(--ok-ink)}
.tb-tool-bad{color:var(--bad-ink)}

/* Staff tools: match dashboard primary/ghost contrast in dark theme.
   IMPORTANT: do NOT force dark text on ghost buttons (it destroys contrast). */
html[data-theme="dark"] #tbStaffTools .tb-tool-actions .button:not(.button-ghost){
  background: #ffffff;
  color: #111111;
  border-color: rgba(255,255,255,0.75);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.20),
              0 10px 22px rgba(0,0,0,0.35);
}
html[data-theme="dark"] #tbStaffTools .tb-tool-actions .button:not(.button-ghost):hover{
  background: #f3f4f6;
  border-color: rgba(255,255,255,0.95);
}


/* Phone ↓ */
@media (max-width: 640px){
  .dash-gate-controls{
    flex-direction: column;
    align-items: stretch;
  }
  .dash-gate-controls > .button{ width: 100%; }

  .dash-gate-secondary{
    width: 100%;
    align-items: stretch;
  }
  .dash-gate-actions,
  .dash-gate-status{
    width: 100%;
  }

  .dash-gate-actions{ flex-direction: column; align-items: stretch; }
  .dash-gate-actions .button{ width: 100%; flex: 1 1 auto; }

  .dash-gate-status{ flex-direction: column; align-items: stretch; }
  .dash-gate-status .badge{ width: 100%; justify-content: center; }

  /* Prevent long auth messages (kid strings) from forcing horizontal scroll */
  #authState.badge{ white-space: normal; word-break: break-word; }

  /* Keep the auth badge readable on small screens */
  #authState.badge{
    padding: 9px 12px;
    font-size: 12px;
  }
  #authState.badge::before{ font-size: 12px; }
}


@media (max-width: 480px){
  /* Give badges a little more breathing room on very small devices */
  .dash-gate-status{ gap: 8px; }
  #authState.badge{ letter-spacing: .15px; }
}

/* ===============
   Staff workflow checklist (inline detail)
   =============== */

.staff-workflow .help{ margin-top:6px; font-size:12px; line-height:1.35; }

.tb-checklist{
  margin-top: 10px;
  border-top: 1px solid var(--border);
}

.tb-checklist-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 0 6px;
}

.tb-check-section{
  border-top: 1px solid rgba(255,255,255,0.06);
}

.tb-check-section-toggle{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 14px;
  align-items:center;
  gap:10px;
  padding:12px 0;
  background:transparent;
  border:0;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.tb-check-section-heading{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.tb-check-section-summary{
  white-space:nowrap;
}

.tb-check-section-caret{
  width:10px;
  height:10px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity:.7;
  justify-self:end;
}

.tb-check-section.is-open .tb-check-section-caret{
  transform: rotate(225deg);
}

.tb-check-section.is-complete .tb-check-section-heading{
  color: var(--ok-border);
}

.tb-check-section-body{
  padding-bottom: 4px;
}

.tb-check-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 8px 0;
  border-top: 1px dashed var(--border);
}

.dash-panel--right{
  align-self: start;
}

.dash-panel--right .staff-workflow{
  display:grid;
  gap:12px;
}

.dash-panel--right .tb-checklist,
.dash-panel--right .staff-inline-steps,
.dash-panel--right .field{
  min-width: 0;
}

.dash-panel--right .tb-check-title-row{
  display:block;
}

.dash-panel--right .tb-check-actions{
  margin-top:6px;
  justify-content:flex-start;
}

.dash-panel--right .tb-check-sub{
  line-height:1.4;
}

.dash-detail-grid--workflow-request .dash-panel--right{
  position:sticky;
  top:14px;
}

.dash-detail-grid--workflow-request .dash-panel--right .staff-workflow{
  gap:10px;
}

.dash-detail-grid--workflow-request .dash-panel--right .tb-check-title-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:6px;
}

.dash-detail-grid--workflow-request .dash-panel--right .tb-check-actions{
  margin-top:0;
  justify-content:space-between;
  align-items:center;
}

.dash-detail-grid--workflow-request .dash-panel--right .tb-check-title{
  font-size:12px;
  line-height:1.3;
}

.dash-detail-grid--workflow-request .dash-panel--right .tb-check-sub{
  margin-top:4px;
  font-size:11px;
  line-height:1.35;
}

.dash-detail-grid--workflow-request .dash-panel--right .btnChecklistToggle{
  min-height:34px;
  padding:0 12px;
  font-size:12px;
}

.dash-detail-grid--workflow-request .dash-panel--right .tb-check-row{
  padding:7px 0;
}

.dash-detail-grid--workflow-request .dash-panel--right .staff-inline-steps{
  margin-top:2px;
}

@media (max-width: 1140px){
  .dash-detail-grid--workflow-request .dash-panel--right{
    position:static;
  }
}

.dash-panel--right .grid-2{
  gap:12px;
}


.tb-check-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 7px;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}

.tb-check-dot.is-done{
  background: var(--ok-border);
  border-color: var(--ok-border);
  box-shadow: 0 0 0 4px var(--ok-bg);
}

.tb-check-main{ flex:1; min-width:0; }
.tb-check-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.tb-check-title{ font-weight: 750; font-size: 13px; line-height:1.35; }
.tb-check-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.tb-check-sub{ margin-top: 2px; }
.tb-check-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.01em;
  background:var(--panel);
  color:var(--muted);
}
.tb-check-pill.is-done{
  border-color:var(--ok-border);
  background:var(--ok-bg);
  color:var(--ok-border);
}
.tb-check-notes{
  margin-top:6px;
}
.tb-check-notes summary{
  cursor:pointer;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
}
.tb-check-notes__body{
  margin-top:6px;
  line-height:1.45;
}
.tb-check-error{
  margin-top:6px;
  color:var(--danger-border);
}
.tb-check-row.is-done .tb-check-title,
.tb-check-row.is-done .tb-check-sub{
  opacity:.92;
}
.tb-check-row.is-saving{
  opacity:.78;
}
.tb-check-row .btnChecklistToggle[disabled]{
  opacity:.8;
  cursor:wait;
}

@media (max-width: 720px){
  .tb-check-section-toggle{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .tb-check-section-caret{
    display:none;
  }
  .tb-check-title-row{
    flex-direction:column;
    align-items:stretch;
  }
  .tb-check-actions{
    justify-content:flex-start;
  }
  .dash-panel--right .staff-workflow{
    grid-template-columns: 1fr;
  }
}

.staff-inline-steps{
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-2);
  padding: 0;
  overflow: hidden;
}
.staff-inline-steps[open]{
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.staff-inline-steps__summary{
  list-style: none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 12px;
  cursor:pointer;
}
.staff-inline-steps__summary::-webkit-details-marker{ display:none; }
.staff-inline-steps__summary-copy{ min-width:0; }
.staff-inline-steps__body{
  border-top:1px solid var(--border);
  padding: 12px;
}
.staff-inline-steps__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 10px;
}
.staff-inline-steps__hint{
  margin-top:10px;
  line-height:1.45;
}


/* Staff totals snapshot */
.staff-totals{
  margin-top: 14px;
  position: relative;
  overflow: hidden;
  padding: 16px 16px 14px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02) 34%, transparent 100%), var(--panel);
  box-shadow: inset 0 2px 0 var(--tb-accent-bg), 0 14px 34px rgba(15,23,42,0.06);
}
.staff-totals::after{
  content: "";
  position: absolute;
  inset: auto -26px -28px auto;
  width: 118px;
  height: 118px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37,99,235,0.14), rgba(37,99,235,0));
  pointer-events: none;
}
.staff-totals__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.staff-totals__intro{
  flex: 1 1 340px;
  min-width: 0;
}
.staff-totals__title{
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.staff-totals__meta{
  margin-top: 4px;
}
.staff-totals__actions{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.staff-totals__note{
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(37,99,235,0.14);
  line-height: 1.45;
}
.staff-totals .tb-analytics__eyebrow{
  color: var(--tb-accent);
}
.staff-totals .button.button-ghost{
  border-color: rgba(37,99,235,0.22);
  background: rgba(37,99,235,0.04);
}
.staff-totals .button.button-ghost:hover{
  border-color: rgba(37,99,235,0.34);
  background: rgba(37,99,235,0.09);
}
.staff-totals .tb-analytics__grid{
  position: relative;
  z-index: 1;
  margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.staff-totals .tb-analytics__card{
  min-height: 132px;
  background: linear-gradient(180deg, rgba(37,99,235,0.05), transparent 74%), var(--panel);
  border-color: rgba(37,99,235,0.14);
  box-shadow: inset 0 2px 0 var(--tb-accent-bg), 0 12px 28px rgba(15,23,42,0.06);
}
.staff-totals .tb-analytics__meta{
  line-height: 1.5;
}
.staff-totals .tb-analytics__meta strong{
  color: var(--ink);
}
.staff-totals .tb-analytics__delta{
  margin-top: 12px;
  background: rgba(37,99,235,0.06);
  border-color: rgba(37,99,235,0.16);
}
@media (max-width: 700px){
  .staff-totals{
    padding: 14px 14px 13px;
  }
  .staff-totals__title{
    font-size: 22px;
  }
  .staff-totals__actions{
    width: 100%;
    justify-content: flex-start;
  }
}
html[data-theme="dark"] .staff-totals{
  border-color: rgba(96,165,250,0.22);
  background: linear-gradient(180deg, rgba(96,165,250,0.12), rgba(96,165,250,0.03) 36%, transparent 100%), var(--panel);
  box-shadow: inset 0 2px 0 var(--tb-accent-bg), 0 18px 36px rgba(0,0,0,0.34);
}
html[data-theme="dark"] .staff-totals::after{
  background: radial-gradient(circle, rgba(96,165,250,0.18), rgba(96,165,250,0));
}
html[data-theme="dark"] .staff-totals .button.button-ghost{
  border-color: rgba(96,165,250,0.26);
  background: rgba(96,165,250,0.08);
}
html[data-theme="dark"] .staff-totals .button.button-ghost:hover{
  border-color: rgba(96,165,250,0.4);
  background: rgba(96,165,250,0.14);
}
html[data-theme="dark"] .staff-totals .tb-analytics__card{
  border-color: rgba(96,165,250,0.16);
  box-shadow: inset 0 2px 0 var(--tb-accent-bg), 0 18px 34px rgba(0,0,0,0.3);
}


/* =========================
   Staff mode: layout parity
   ========================= */

/* Listing request inline detail (staff mode) */
.inline-detail-wrap.inline-detail{
  overflow: hidden;
}

.inline-detail-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.inline-detail-head-left{ min-width: 0; }

.inline-detail-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.inline-detail-actions .button{
  white-space: normal;
  max-width: 100%;
}

/* Place the staff WORKFLOW panel in the right column only on wide screens.
   On mobile, this MUST be auto to avoid creating implicit columns (overflow). */
@media (min-width: 981px){
  /* For 3-column detail views (Request + Draft + Workflow), put the workflow panel in column 3. */
  .dash-detail-grid--three .dash-panel--right{ grid-column: 3; }

  /* For 2-column detail views, keep the right panel in column 2. */
  .dash-detail-grid:not(.dash-detail-grid--three) .dash-panel--right{ grid-column: 2; }
}

@media (max-width: 720px){
  .inline-detail-header{
    flex-direction: column;
    align-items: stretch;
  }
  .inline-detail-actions{
    justify-content: stretch;
  }
  .inline-detail-actions .button{
    width: 100%;
  }
}

.codeblock{
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.att-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 8px;
}

.att-row{
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.att-name{
  font-weight: 800;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.att-meta{
  margin-top: 2px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Staff tools accordions: match the Employer Help card look */
#tbStaffTools details{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  padding: 0;
}

#tbStaffTools details > summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  font-weight: 800;
}

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

#tbStaffTools details > summary::after{
  content:"\25BE";
  opacity:.75;
  font-size: 14px;
}

#tbStaffTools details[open] > summary{
  border-bottom: 1px solid var(--border);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

#tbStaffTools details[open] > summary::after{ content:"▴"; }

#tbStaffTools details > .tb-tools-grid{
  margin-top: 0 !important;
  padding: 12px 14px 14px;
  max-width: 100%;
  overflow-x: hidden;
}

/* Prevent grid/flex children from forcing horizontal overflow on narrow screens */
#tbStaffTools .tb-tools-grid > *{ min-width: 0; }
#tbStaffTools .tb-tool-actions{ width: 100%; max-width: 100%; }

#tbStaffTools .tb-tool-actions{
  margin: 12px 0 0;
}

#tbStaffTools .tb-tool-actions .button{
  white-space: normal;
  flex: 1 1 220px;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 860px){
  #tbStaffTools .tb-tool-actions{ flex-direction: column; align-items: stretch; }
  #tbStaffTools .tb-tool-actions .button{
    width: 100%;
    flex: 1 1 auto;
  }
  #tbStaffTools textarea,
  #tbStaffTools input{
    max-width: 100%;
  }
}


/* Prevent grid children from forcing horizontal overflow */
.inline-detail-wrap,
.inline-detail,
.dash-detail-grid > *{
  min-width: 0;
}


/* Staff inbox tabs */

/* Hide staff inbox toggle unless staff mode is active */
body:not(.tb-staff-mode) #tbStaffTabs{ display:none !important; }

/* Place tabs in the top-right of the filter/sort bar */
.filterbar-actions--staff{
  flex-direction: row;
  flex-wrap: wrap;
  gap:10px;
  align-items:flex-start;
  justify-content:flex-end;
}
@media (max-width: 720px){
  .filterbar-actions--staff{ justify-content:flex-start; }
}

.filterbar-actions--staff #tbStaffTabs{ order: 1; }
.filterbar-actions--staff #btnToggleFilters{ order: 2; }

.tb-staff-inbox-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.tb-staff-inbox-head__left{ min-width: 0; }

.tb-staff-tabs{
  display:flex;
  gap:8px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:999px;
  background: var(--panel-2);
}

.tb-staff-tabs-mobile{ display:none; }
@media (max-width: 700px){
  .tb-staff-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  .tb-staff-tab{ flex:0 0 auto; }
}
@media (max-width: 520px){
  .tb-staff-tabs{ display:none; }
  .tb-staff-tabs-mobile{ display:block; }
}
.tb-staff-tab{
  appearance:none;
  border:0;
  background:transparent;
  color: var(--ink);
  padding:10px 12px;
  min-height:44px;
  border-radius:999px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
}
.tb-staff-tab:not(.is-active):hover{
  background: rgba(0,0,0,.06);
}
html[data-theme="dark"] .tb-staff-tab:not(.is-active):hover{
  background: rgba(255,255,255,.08);
}
.tb-staff-tab:focus-visible{
  outline: 2px solid var(--focus-border);
  outline-offset: 2px;
}
.tb-staff-tab.is-active{
  background: var(--ink);
  color: var(--bg);
}



/* Light theme: staff inbox toggle should match the accent system (was defaulting to ink/bg). */
html[data-theme="light"] .tb-staff-tabs{
  border-color: var(--accent-border);
  background: var(--accent-bg);
}
html[data-theme="light"] .tb-staff-tab:not(.is-active):hover{
  background: rgba(37,99,235,0.10);
}
html[data-theme="light"] .tb-staff-tab.is-active{
  background: var(--accent);
  color: var(--white);
}
/* When viewing messages, hide request-specific columns/filters.
   Staff table columns are:
   1 select • 2 submitted • 3 from • 4 subject • 5 location • 6 topic • 7 days • 8 status • 9 open
   In Messages view we hide Location + Days but keep Subject + Topic visible.
*/
html[data-tb-staff-view="messages"] #tbl th:nth-child(5),
html[data-tb-staff-view="messages"] #tbl td:nth-child(5),
html[data-tb-staff-view="messages"] #tbl th:nth-child(7),
html[data-tb-staff-view="messages"] #tbl td:nth-child(7){
  display:none;
}

html[data-tb-staff-view="messages"] #tbl{
  /* Prevent desktop layout shifts: keep the table at full width even when columns are hidden. */
  table-layout: fixed;
}

/* Messages view: bias space toward From + Subject + Topic (desktop). */
@media (min-width: 821px){
  html[data-tb-staff-view="messages"] #tbl th:nth-child(2),
  html[data-tb-staff-view="messages"] #tbl td:nth-child(2){ width: 170px; }

  html[data-tb-staff-view="messages"] #tbl th:nth-child(3),
  html[data-tb-staff-view="messages"] #tbl td:nth-child(3){ width: 28%; }

  html[data-tb-staff-view="messages"] #tbl th:nth-child(4),
  html[data-tb-staff-view="messages"] #tbl td:nth-child(4){ width: 42%; }

  html[data-tb-staff-view="messages"] #tbl th:nth-child(6),
  html[data-tb-staff-view="messages"] #tbl td:nth-child(6){ width: 18%; }

  html[data-tb-staff-view="messages"] #tbl th:nth-child(8),
  html[data-tb-staff-view="messages"] #tbl td:nth-child(8){ width: 110px; }

  html[data-tb-staff-view="messages"] #tbl th:nth-child(9),
  html[data-tb-staff-view="messages"] #tbl td:nth-child(9){ width: 90px; }
}

@media (min-width: 981px) and (max-width: 1240px){
  html[data-tb-staff-view="requests"] #tbl .tb-staff-col--location,
  html[data-tb-staff-view="requests"] #tbl .tb-staff-col--industry{
    display:none;
  }

  html[data-tb-staff-view="requests"] #tbl .tb-staff-col--submitted{
    width: 102px;
  }
  html[data-tb-staff-view="requests"] #tbl .tb-staff-col--employer{
    width: 22%;
  }
  html[data-tb-staff-view="requests"] #tbl .tb-staff-col--project{
    width: 24%;
  }
  html[data-tb-staff-view="requests"] #tbl .tb-staff-col--days{
    width: 12%;
  }
  html[data-tb-staff-view="requests"] #tbl .tb-staff-col--status{
    width: 118px;
    min-width: 118px;
  }
  html[data-tb-staff-view="requests"] #tbl .tb-staff-col--open{
    width: 88px;
  }

  html[data-tb-staff-view="requests"] #tbl td{
    vertical-align: top;
  }

  html[data-tb-staff-view="requests"] .tb-staff-request-inline{
    display:block;
  }

  html[data-tb-staff-view="requests"] #tbl .tb-openbtn{
    width: 100%;
    justify-content: center;
  }
}


/* ===============
   Help shell polish
   =============== */

.help-main{
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 14px;
}


.tb-linkgen__tool{
  display:grid;
  gap: 12px;
  align-items: start;
}


/* Gate card layout */
.tb-gate{ max-width: 820px; margin: 22px auto; }
html[data-tb-auth="1"] .tb-gate{ max-width: none; margin: 0 0 14px; }

/* Large brand mark (pre-auth only) */
.dash-auth-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 16px 0 28px;
}
.dash-auth-logo img{
  width: min(560px, 82vw);
  height: auto;
}
html[data-tb-auth="1"] .dash-auth-logo{ display:none !important; }
/* Pre-auth (mobile): keep the brand mark *in-flow* so it never overlays the access card.
   iOS Safari's dynamic toolbar can shift fixed elements upward, causing overlap.
   The fixed footer is handled via main padding-bottom above. */
@media (max-width: 820px){
  html[data-tb-auth="0"] .dash-auth-logo{
    position: static;
    margin: 14px 0 28px;
    padding: 0;
    pointer-events: none;
  }
  html[data-tb-auth="0"] .dash-auth-logo img{
    width: min(520px, 78vw);
    opacity: .65;
  }
}




/* ==========================
   Portal mast + icon system
   ========================== */

.portal-root{ display:block; }

.portal-mast{
  display:flex;
  flex-wrap: wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  margin: 0 0 14px;
  position: relative;
  overflow: hidden;
}

.portal-mast__left{ min-width: 0; flex: 1 1 260px; }
.portal-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 16px;
  font-weight: 820;
  letter-spacing: .2px;
  color: var(--ink);
  margin: 0 0 4px;
}
.portal-sub{ margin:0; }

.portal-mast__right{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

@media (max-width: 560px){
  .portal-mast{ align-items: stretch; }
  .portal-mast__right{ justify-content:flex-start; }
}

/* Avoid redundant "Portal" mode tag; the portal title already states Employer/Staff. */

.ico{ width: 16px; height: 16px; display:block; }
.ico-wrap{ display:inline-flex; align-items:center; justify-content:center; }

.btn-ico{ display:inline-flex; align-items:center; justify-content:center; }
.button .btn-ico{ margin-right: 8px; }
.button .btn-label{ display:inline-block; }

/* Badges should read as tags (not buttons) */
body.dashboard .badge{
  border-radius: 10px;
  padding: 4px 8px;
  gap:6px;
  font-weight: 700;
  cursor: default;
}


/* Mode accents are subtle: use a slim accent rail (not a full error border) */
.portal-mast--employer{ border-color: var(--border); }
.portal-mast--staff{ border-color: var(--border); }
.portal-mast--employer::before,
.portal-mast--staff::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 16px 0 0 16px;
  opacity: .95;
}
.portal-mast--employer::before{ background: var(--module-border); }
.portal-mast--staff::before{ background: var(--bad-border); }

/* Combine portal header + help into a single card */
.portal-head{ padding: 0; overflow: hidden; }
.portal-head .portal-mast--embedded{
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
  padding: 16px 18px 12px;
}
.portal-head .portal-mast--embedded::before{ border-radius: 0; }

.portal-head .help-card{ display: block; }
.portal-head .help-card > summary{
  border: 0;
  border-radius: 0;
  padding: 16px 18px;
  background: transparent;
  border-top: 1px solid var(--border);
}
.portal-head .help-card > summary:hover{ background: var(--panel-2); }
.portal-head .help-card[open] > summary{ background: var(--panel-2); border-radius: 0; }
.portal-head .help-card__content{
  margin-top: 0;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border);
}




/* Light theme: slightly stronger card separation */
html[data-theme="light"] body.dashboard .card,
html[data-theme="light"] body.dashboard .stat-card,
html[data-theme="light"] body.dashboard .panel{
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] body.dashboard .card-help,
html[data-theme="light"] body.dashboard .portal-head{
  box-shadow: var(--tb-surface-shadow-soft);
  border-color: var(--tb-line-soft);
}

/* Employer: listing request pipeline status panel */
.tb-req-pipeline{
  display: inline-block;
  width: auto;
  max-width: 760px;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: var(--panel);
  box-sizing: border-box;
  box-shadow: inset 0 2px 0 var(--tb-accent-bg);
}
@media (max-width: 840px){
  .tb-req-pipeline{
    display: block;
    width: 100%;
  }
}
@media (max-width: 560px){
  .tb-req-pipeline__row{
    flex-direction: column;
    align-items: stretch;
  }
  .tb-req-pipeline__right{
    width: 100%;
    align-items: flex-start;
  }
}
.tb-req-pipeline__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.tb-req-pipeline__title{
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.tb-req-pipeline__list{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.tb-req-pipeline__row{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}
.tb-req-pipeline__meta{ min-width: 0; }
.tb-req-pipeline__name{ font-weight: 900; font-size: 13px; overflow-wrap:anywhere; }
.tb-req-pipeline__sub{ margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.tb-req-pipeline__right{ display:flex; flex-direction: column; gap: 6px; align-items:flex-end; flex: 0 0 auto; }


/* Date picker icon visibility (Safari/WebKit): keep calendar indicator visible in both themes */
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="datetime-local"],
html[data-theme="light"] input[type="time"]{
  color-scheme: light;
}

html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"]{
  color-scheme: dark;
}

html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: .9;
}

html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator{
  filter: none;
  opacity: .9;
}

/* Employer Request Listing: use native date picker icon (clickable) */
#listingRequestForm input[type="date"],
#tbRenewListing input[type="date"]{
  -webkit-appearance: auto;
  appearance: auto;
  padding-right: 40px;
}

#listingRequestForm input[type="date"]::-webkit-calendar-picker-indicator,
#tbRenewListing input[type="date"]::-webkit-calendar-picker-indicator{
  cursor: pointer;
  opacity: 1;
}


/* Draft editor validation */
.staffDraftToolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 8px; }
.staffDraftStatus{ margin-left:auto; }
.staffDraftValidation{ border:1px solid var(--border); border-radius:14px; }
.staffDraftValidation[data-state="error"]{ border-color:#b42318; }
.staffDraftValidation[data-state="warn"]{ border-color:#b54708; }
.staffDraftValidation[data-state="ok"]{ border-color:#027a48; }
.staffDraftDiff,
.staffLiveSnapshot,
.staffProjectAnalytics{ border:1px solid var(--border); border-radius:14px; }
.staffDraftDiff[data-state="error"],
.staffLiveSnapshot[data-state="error"],
.staffProjectAnalytics[data-state="error"]{ border-color:#b42318; }
.staffDraftDiff[data-state="warn"],
.staffLiveSnapshot[data-state="warn"],
.staffProjectAnalytics[data-state="warn"]{ border-color:#b54708; }
.staffDraftDiff[data-state="ok"],
.staffLiveSnapshot[data-state="ok"],
.staffProjectAnalytics[data-state="ok"]{ border-color:#027a48; }
.staffDraftDiffGroups{ display:grid; gap:10px; margin-top:10px; }
.staffDraftDiffGroup{ padding-top:10px; border-top:1px solid var(--border); }
.staffDraftDiffGroup:first-child{ padding-top:0; border-top:0; }
.staffDraftDiffGroup ul{ margin:8px 0 0 18px; padding:0; }
.staffLiveSnapshotChips,
.staffProjectAnalyticsCues{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.staffDraftValidationIssues{ margin:8px 0 0 18px; padding:0; }
.staffDraftValidationIssues li{ margin:4px 0; }
.staffDraftValidationIssues li.is-error{ list-style:disc; }
.staffDraftValidationIssues li.is-warn{ list-style:circle; }

.staffDraftValidationIssues li.is-ok{ list-style:none; margin-left:-18px; }


/* ===============
   Theme polish (2026-03-10)
   =============== */

body.dashboard .card,
body.dashboard .portal-mast,
body.dashboard .help-panel,
body.dashboard .tb-analytics__card,
body.dashboard .tb-linkgen__itemGroup,
body.dashboard .help-card > summary{
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

body.dashboard .card,
body.dashboard .portal-mast,
body.dashboard .help-panel,
body.dashboard .tb-analytics__card{
  box-shadow: 0 10px 24px rgba(15,23,42,0.05);
}

html[data-theme="dark"] body.dashboard .card,
html[data-theme="dark"] body.dashboard .portal-mast,
html[data-theme="dark"] body.dashboard .help-panel,
html[data-theme="dark"] body.dashboard .tb-analytics__card{
  box-shadow: 0 18px 34px rgba(0,0,0,0.28);
}

body.dashboard .help-card > summary,
body.dashboard .portal-head .help-card > summary{
  min-height: 58px;
  padding: 14px 16px;
}

body.dashboard .help-card > summary:hover,
body.dashboard .portal-head .help-card > summary:hover{
  background: linear-gradient(180deg, rgba(37,99,235,0.05), transparent 72%), var(--panel-2);
}

html[data-theme="dark"] body.dashboard .help-card > summary:hover,
html[data-theme="dark"] body.dashboard .portal-head .help-card > summary:hover{
  background: linear-gradient(180deg, rgba(96,165,250,0.12), transparent 72%), var(--panel-2);
}
html[data-theme="dark"] .help-tip,
html[data-theme="dark"] .tb-linkgen__gate,
html[data-theme="dark"] .tb-linkgen__out,
html[data-theme="dark"] .tb-linkgen__itemGroup{
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
html[data-theme="dark"] .tb-linkgen__itemGroup{
  box-shadow: inset 0 2px 0 var(--tb-accent-bg), inset 0 1px 0 rgba(255,255,255,0.05);
}
html[data-theme="dark"] .tb-linkgen__out textarea{
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

body.dashboard .help-summary-hint,
body.dashboard .tb-analytics__summary,
body.dashboard .tb-analytics__meta,
body.dashboard .help,
body.dashboard .hint{
  line-height: 1.45;
}

body.dashboard .tb-analytics__card--overview{
  box-shadow: inset 0 2px 0 var(--tb-accent-bg), 0 12px 28px rgba(15,23,42,0.06);
}

html[data-theme="dark"] body.dashboard .tb-analytics__card--overview{
  box-shadow: inset 0 2px 0 var(--tb-accent-bg), 0 18px 34px rgba(0,0,0,0.32);
}

body.dashboard .tb-analytics__title{
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 11px;
}

body.dashboard .tb-analytics__count{
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.03em;
}

body.dashboard .tb-analytics__count .small{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  vertical-align: baseline;
}

.tb-analytics__eyebrow{
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tb-analytics__insight{
  margin-top: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02));
  font-size: 13px;
  line-height: 1.5;
}

.tb-analytics__grid--snapshot{
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.tb-analytics__card--spotlight{
  background: linear-gradient(180deg, rgba(37,99,235,0.06), transparent 70%), var(--panel);
}

.tb-analytics__card--premium{
  position: relative;
  overflow: hidden;
  min-height: 132px;
}

.tb-analytics__card--premium::after{
  content: "";
  position: absolute;
  inset: auto -18px -18px auto;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37,99,235,0.13), rgba(37,99,235,0));
  pointer-events: none;
}

.tb-analytics__delta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 800;
}

.tb-analytics__delta strong{
  font-size: 12px;
}

.tb-analytics__list{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.tb-analytics__listrow{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.tb-analytics__listrow strong{
  font-weight: 900;
}

body.dashboard .check-grid label{
  border-color: rgba(15,23,42,0.10);
}

body.dashboard .check-grid label:hover{
  background: rgba(37,99,235,0.05);
  border-color: rgba(37,99,235,0.28);
}

body.dashboard .check-grid label:has(input:checked){
  background: rgba(37,99,235,0.07);
  border-color: rgba(37,99,235,0.42);
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}

html[data-theme="dark"] body.dashboard .check-grid label{
  background: #151921;
  border-color: #2b313b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

html[data-theme="dark"] body.dashboard .check-grid label:hover{
  background: #1a1f28;
  border-color: rgba(96,165,250,0.42);
}

html[data-theme="dark"] body.dashboard .check-grid label:has(input:checked){
  background: rgba(96,165,250,0.13);
  border-color: rgba(96,165,250,0.52);
  box-shadow: 0 12px 28px rgba(0,0,0,0.34);
}


#skillsPicker.tb-check-groups{
  display: block;
}
#skillsPicker.tb-check-groups .tb-check-group__grid{
  display: grid;
}
.tb-check-group + .tb-check-group{
  margin-top: 14px;
}
.tb-check-group__title{
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: uppercase;
}
.tb-check-group__grid{
  margin-top: 0;
}
body.dashboard .help-tabs{
  gap: 8px;
}

body.dashboard .help-tab{
  min-height: 42px;
  padding: 0 14px;
}

body.dashboard .help-panel,
body.dashboard .help-callout{
  border-radius: 14px;
}

body.dashboard .dash-table tbody tr:hover td{
  background: linear-gradient(180deg, rgba(37,99,235,0.04), rgba(37,99,235,0.02));
}

html[data-theme="dark"] body.dashboard .dash-table tbody tr:hover td{
  background: linear-gradient(180deg, rgba(96,165,250,0.10), rgba(96,165,250,0.04));
}

body.dashboard #listingRequestForm .divider{
  margin-top: 22px !important;
  margin-bottom: 22px !important;
}

body.dashboard #listingRequestForm .field > label,
body.dashboard #listingRequestForm .label-inline{
  font-weight: 700;
}

body.dashboard #listingRequestForm .hint code{
  font-size: 12px;
}

html[data-theme="dark"] body.dashboard #listingRequestForm .hint code{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

/* Access scope modal */
body.tb-modal-open{ overflow:hidden; }
.tb-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.tb-modal[hidden]{ display:none; }
.tb-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(2px);
}
.tb-modal__dialog{
  position:relative;
  z-index:1;
  width:min(520px, calc(100vw - 32px));
  max-height:calc(100vh - 40px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  background:var(--card-bg, #111);
  box-shadow:0 28px 80px rgba(0,0,0,.35);
}
html[data-theme="light"] .tb-modal__dialog{
  border-color:rgba(0,0,0,.08);
  box-shadow:0 28px 80px rgba(0,0,0,.18);
}
.tb-modal__header,
.tb-modal__body{ padding:18px 20px; }
.tb-modal__header{ border-bottom:1px solid rgba(255,255,255,.08); }
html[data-theme="light"] .tb-modal__header{ border-bottom-color:rgba(0,0,0,.08); }
.tb-modal__title{ margin:4px 0 0; }
.tb-modal .input,
.tb-modal input[type="password"]{
  width:100%;
  margin-top:8px;
}



/* Lightweight async feedback helpers */
.button.tb-btn-busy,
button.tb-btn-busy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.tb-inline-spinner{
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid currentColor;
  border-right-color:transparent;
  display:inline-block;
  flex:0 0 auto;
  animation:tbspin .75s linear infinite;
}

.tb-loading-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.tb-thread-loading{
  display:grid;
  gap:10px;
  padding:2px 0;
}

.tb-thread-loading__card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:12px;
  background:rgba(255,255,255,.02);
}

.tb-thread-loading__line{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  animation:tbpulse 1.2s ease-in-out infinite;
}

.tb-thread-loading__line + .tb-thread-loading__line{ margin-top:8px; }
.tb-thread-loading__line--short{ width:38%; }
.tb-thread-loading__line--mid{ width:62%; }
.tb-thread-loading__line--long{ width:84%; }
.tb-thread-loading__line--tiny{ width:24%; }

html[data-theme="light"] .tb-thread-loading__card{
  border-color: rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
html[data-theme="light"] .tb-thread-loading__line{ background: rgba(0,0,0,.12); }

@keyframes tbpulse{
  0%, 100%{ opacity:.45; }
  50%{ opacity:1; }
}

.tb-thread-shell{border-top:1px solid rgba(255,255,255,.08); padding-top:14px;}
.tb-thread-shell__head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap;}
.tb-thread-shell__grid{display:grid; grid-template-columns:minmax(260px,340px) minmax(0,1fr); gap:14px; align-items:start;}
.tb-thread-list{display:grid; gap:10px; max-height:440px; overflow:auto; padding-right:4px;}
.tb-thread-row{border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:12px; background:rgba(255,255,255,.02); cursor:pointer;}
.tb-thread-row.is-active{outline:2px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05);}
.tb-thread-row__top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.tb-thread-row__title{font-weight:700;}
.tb-thread-row__preview{margin-top:6px; font-size:.94rem; opacity:.9;}
.tb-thread-row__meta{margin-top:8px; display:flex; gap:8px; flex-wrap:wrap;}
.tb-thread-detail-panel{border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:12px; min-height:220px; background:rgba(255,255,255,.02);}
.tb-thread-detail-panel .tb-thread-scroll{display:grid; gap:10px; max-height:360px; overflow:auto; padding-right:4px;}
.tb-thread-detail-panel .tb-thread-msg{border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px;}
.tb-thread-detail-panel .tb-thread-msg--outgoing{background:rgba(120,180,255,.06);}
.tb-thread-detail-panel .tb-thread-msg--incoming{background:rgba(255,255,255,.03);}
@media (max-width: 980px){
  .tb-thread-shell__grid{grid-template-columns:1fr;}
  .tb-thread-list{max-height:260px;}
}


.tb-thread-card__header{display:grid; gap:10px; margin-bottom:14px;}
.tb-thread-card__eyebrow{font-size:.72rem; line-height:1; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:800;}
.tb-thread-card__head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap;}
.tb-thread-card__titlewrap{min-width:0;}
.tb-thread-card__counterpart{margin-bottom:4px;}
.tb-thread-card__title{margin:0;}
.tb-thread-card__badges{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.tb-thread-card__meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.tb-thread-card__helper{margin:0;}
.tb-thread-history,.tb-thread-contact,.tb-thread-composer{border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px; background:rgba(255,255,255,.02);}
.tb-thread-contact,.tb-thread-composer{margin-top:14px;}
.tb-thread-contact[hidden]{display:none !important;}
.tb-thread-contact__helper{margin:0 0 10px;}
.tb-thread-contact__grid{margin-top:0;}
.tb-thread-contact__actions{margin-top:12px; gap:8px; flex-wrap:wrap;}
.tb-thread-sectionlabel{font-size:.74rem; line-height:1; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--muted); margin-bottom:10px;}
.tb-thread-scroll{display:grid; gap:10px; overflow:auto; padding-right:4px;}
.tb-thread-msg{border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px; background:rgba(255,255,255,.02);}
.tb-thread-msg--outgoing{background:rgba(120,180,255,.06);}
.tb-thread-msg--incoming{background:rgba(255,255,255,.03);}
.tb-thread-msg__meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.tb-thread-msg-body{white-space:pre-wrap; border:1px solid rgba(255,255,255,.08); padding:10px; border-radius:10px; margin-top:8px; background:rgba(255,255,255,.03);}
.tb-thread-composer__actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.tb-thread-composer__footer{margin-top:10px;}
.tb-thread-row__titlewrap{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.tb-thread-row__active{display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; border:1px solid rgba(120,180,255,.35); color:#9fc4ff; background:rgba(120,180,255,.12); font-weight:700;}
.tb-thread-row.is-active{outline:2px solid rgba(120,180,255,.28); background:rgba(120,180,255,.08);}
.tb-thread-row:focus-visible{outline:2px solid rgba(120,180,255,.45); outline-offset:2px;}
.tb-thread-detail-panel{padding:14px;}
html[data-theme="light"] .tb-thread-history,
html[data-theme="light"] .tb-thread-contact,
html[data-theme="light"] .tb-thread-composer,
html[data-theme="light"] .tb-thread-msg{border-color:rgba(0,0,0,.08); background:rgba(0,0,0,.015);}
html[data-theme="light"] .tb-thread-msg-body{border-color:rgba(0,0,0,.10); background:#fff;}
html[data-theme="light"] .tb-thread-row.is-active{outline-color:rgba(31,108,255,.24); background:rgba(31,108,255,.05);}
html[data-theme="light"] .tb-thread-row__active{border-color:rgba(31,108,255,.25); color:#1f6cff; background:rgba(31,108,255,.08);}
@media (max-width: 800px){
  .tb-thread-card__head{display:grid; gap:10px;}
  .tb-thread-card__meta{gap:6px;}
}


/* ===============
   Theme harmonization: threads + composer
   =============== */
.tb-thread-empty{
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 18px;
  background: var(--panel-2);
}
.tb-thread-shell__grid{align-items:stretch;}
.tb-thread-list{padding-right:6px;}
.tb-thread-row{
  position:relative;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 12px 12px 14px;
  background:var(--panel);
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tb-thread-row::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background:transparent;
}
.tb-thread-row:hover{ border-color: var(--border-strong); }
.tb-thread-row.is-active{
  border-color: var(--tb-accent-border);
  background: color-mix(in srgb, var(--tb-accent) 7%, var(--panel));
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.tb-thread-row.is-active::before{ background: var(--tb-accent); }
.tb-thread-row:not(.is-active){ opacity:.92; }
.tb-thread-row__top{ gap:12px; }
.tb-thread-row__title{ font-size:1rem; line-height:1.25; }
.tb-thread-row__preview{ opacity:.78; }
.tb-thread-row__meta{ gap:6px; opacity:.88; }
.tb-thread-row__active{ font-size:.78rem; }
.tb-thread-detail-panel{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.tb-thread-card__header{
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.tb-thread-card__counterpart{ font-weight:600; }
.tb-thread-card__helper{ max-width:72ch; }
.tb-thread-history,
.tb-thread-contact{
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
  border-color: var(--border);
}
.tb-thread-composer{
  margin-top:16px;
  background: color-mix(in srgb, var(--panel) 88%, var(--tb-accent) 12%);
  border-color: color-mix(in srgb, var(--border) 70%, var(--tb-accent) 30%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.tb-thread-sectionlabel{ margin-bottom:12px; }
.tb-thread-scroll{ gap:12px; }
.tb-thread-msg{
  border-color: var(--border);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}
.tb-thread-msg--incoming{ background: color-mix(in srgb, var(--panel) 92%, transparent); }
.tb-thread-msg--outgoing{ background: color-mix(in srgb, var(--tb-accent) 10%, var(--panel)); }
.tb-thread-msg__meta{ font-weight:500; opacity:.9; }
.tb-thread-msg-body{
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}
.tb-thread-composer__actions{ padding-top:4px; }
#tbEmployerThreadMode{ font-weight:600; }
#tbEmployerThreadsList:has(.tb-thread-row.is-active) .tb-thread-row:not(.is-active){ opacity:.78; }
#tbEmployerMessageForm[data-attempted-submit="1"] input:invalid,
#tbEmployerMessageForm[data-attempted-submit="1"] textarea:invalid,
#tbEmployerMessageForm[data-attempted-submit="1"] select:invalid,
#tbEmployerMessageForm [aria-invalid="true"],
.tb-thread-composer [aria-invalid="true"]{
  border-color: var(--bad-border) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad-border) 15%, transparent);
}
#tbEmployerMessageForm:not([data-attempted-submit="1"]) input:invalid,
#tbEmployerMessageForm:not([data-attempted-submit="1"]) textarea:invalid,
#tbEmployerMessageForm:not([data-attempted-submit="1"]) select:invalid{
  border-color: var(--border) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .tb-thread-row{
  background:#fff;
  box-shadow: 0 1px 0 rgba(16,17,19,.02);
}
html[data-theme="light"] .tb-thread-row:hover{ background:#fbfcff; }
html[data-theme="light"] .tb-thread-row.is-active{
  background: rgba(37,99,235,.08);
  box-shadow: 0 10px 22px rgba(37,99,235,.09);
}
html[data-theme="light"] .tb-thread-detail-panel{
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 10px 26px rgba(15,23,42,.05);
}
html[data-theme="light"] .tb-thread-history{
  background:#f8fafc;
}
html[data-theme="light"] .tb-thread-composer{
  background:#f4f8ff;
  border-color: rgba(37,99,235,.18);
}
html[data-theme="light"] .tb-thread-msg{
  background:#ffffff;
}
html[data-theme="light"] .tb-thread-msg--incoming{ background:#ffffff; }
html[data-theme="light"] .tb-thread-msg--outgoing{ background:#eef4ff; }
html[data-theme="light"] .tb-thread-msg-body{ background:#ffffff; }
html[data-theme="light"] #tbEmployerThreadsList:has(.tb-thread-row.is-active) .tb-thread-row:not(.is-active){ opacity:.9; }
html[data-theme="dark"] .tb-thread-row{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .tb-thread-row:hover{ background: rgba(255,255,255,.05); }
html[data-theme="dark"] .tb-thread-row.is-active{
  background: rgba(96,165,250,.12);
  box-shadow: 0 12px 26px rgba(0,0,0,.26);
}
html[data-theme="dark"] .tb-thread-detail-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
html[data-theme="dark"] .tb-thread-history{
  background: rgba(255,255,255,.025);
}
html[data-theme="dark"] .tb-thread-composer{
  background: rgba(96,165,250,.08);
  border-color: rgba(96,165,250,.24);
}
html[data-theme="dark"] .tb-thread-msg{ background: rgba(255,255,255,.03); }
html[data-theme="dark"] .tb-thread-msg--incoming{ background: rgba(255,255,255,.035); }
html[data-theme="dark"] .tb-thread-msg--outgoing{ background: rgba(96,165,250,.11); }

.tb-thread-empty__title{
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.tb-thread-empty__body{
  max-width: 36ch;
}
.tb-thread-row__title{
  color: var(--ink);
}
.tb-thread-row__preview{
  color: var(--ink);
  opacity: .92;
  font-weight: 500;
}
.tb-thread-row__meta{
  color: var(--muted);
  opacity: 1;
}
.tb-thread-row.is-active .tb-thread-row__title,
.tb-thread-row.is-active .tb-thread-row__preview{
  color: var(--ink);
}
html[data-theme="light"] .tb-thread-empty{
  background: #fbfcfe;
  border-color: rgba(15,23,42,.12);
}
html[data-theme="light"] .tb-thread-row{
  border-color: rgba(15,23,42,.10);
}
html[data-theme="light"] .tb-thread-row__preview{
  color:#1f2937;
}
html[data-theme="light"] .tb-thread-row__meta{
  color:#5b6472;
}
html[data-theme="light"] .tb-thread-detail-panel{
  border-color: rgba(15,23,42,.10);
}
html[data-theme="dark"] .tb-thread-empty{
  background: rgba(255,255,255,.025);
}
html[data-theme="dark"] .tb-thread-row__preview{
  color: rgba(255,255,255,.92);
}
html[data-theme="dark"] .tb-thread-row__meta{
  color: rgba(255,255,255,.72);
}

@media (max-width: 960px){
  .tb-thread-row:not(.is-active){ opacity:1; }
  #tbEmployerThreadsList:has(.tb-thread-row.is-active) .tb-thread-row:not(.is-active){ opacity:1; }
}


/* final messaging polish */

.tb-thread-row{position:relative; align-items:flex-start;}
.tb-thread-row__title{font-weight:700;}
.tb-thread-row__preview{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.tb-thread-row__meta{gap:6px;}
.tb-thread-row__active{display:inline-flex; align-items:center; border-radius:999px; padding:2px 8px; font-weight:700; background:color-mix(in srgb, var(--tb-accent) 12%, transparent); color:var(--tb-accent);} 
.tb-thread-detail-panel .tb-thread-empty{min-height:180px; display:flex; flex-direction:column; justify-content:center;}
html[data-theme="light"] .tb-thread-row{background:linear-gradient(180deg,#ffffff 0%, #fbfcfe 100%); border:1px solid rgba(15,23,42,.12); box-shadow:0 3px 10px rgba(15,23,42,.04);} 
html[data-theme="light"] .tb-thread-row:hover{background:#f8fbff; border-color:rgba(37,99,235,.20); box-shadow:0 10px 24px rgba(37,99,235,.08);} 
html[data-theme="light"] .tb-thread-row.is-active{background:linear-gradient(180deg,#eff6ff 0%, #e8f0ff 100%); border-color:rgba(37,99,235,.38); box-shadow:0 14px 28px rgba(37,99,235,.14);} 
html[data-theme="light"] .tb-thread-row.is-active::before{content:""; position:absolute; left:0; top:10px; bottom:10px; width:4px; border-radius:999px; background:#2563eb;} 
html[data-theme="light"] .tb-thread-row__title{color:#111827;} 
html[data-theme="light"] .tb-thread-row__preview{color:#1f2937;} 
html[data-theme="light"] .tb-thread-row__meta{color:#4b5563;} 
html[data-theme="light"] .tb-thread-row__active{background:rgba(37,99,235,.14); color:#1d4ed8;} 
html[data-theme="light"] .tb-thread-detail-panel{background:linear-gradient(180deg,#ffffff 0%, #f5f8fd 100%); border:1px solid rgba(15,23,42,.10); box-shadow:0 12px 26px rgba(15,23,42,.06);} 
html[data-theme="light"] .tb-thread-empty{background:#ffffff; border:1px dashed rgba(148,163,184,.65);} 
html[data-theme="dark"] .tb-thread-row{background:linear-gradient(180deg,rgba(255,255,255,.035) 0%, rgba(255,255,255,.025) 100%);} 
html[data-theme="dark"] .tb-thread-row.is-active{border-color:rgba(96,165,250,.30); box-shadow:0 14px 28px rgba(2,8,23,.36);} 
html[data-theme="dark"] .tb-thread-row.is-active::before{content:""; position:absolute; left:0; top:10px; bottom:10px; width:4px; border-radius:999px; background:#60a5fa;} 
html[data-theme="dark"] .tb-thread-row__active{background:rgba(96,165,250,.18); color:#bfdbfe;} 
body[data-portal-mode="staff"] #tbTrackingLinks.card-help{padding:0; background:transparent; border:none; box-shadow:none;} 
body[data-portal-mode="staff"] #tbTrackingLinks .help-card{margin:0;} 


html[data-theme="light"] .tb-thread-card__title,
html[data-theme="light"] .tb-thread-card__counterpart,
html[data-theme="light"] .tb-thread-card__meta,
html[data-theme="light"] .tb-thread-card__helper,
html[data-theme="light"] .tb-thread-sectionlabel,
html[data-theme="light"] .tb-thread-msg__meta,
html[data-theme="light"] .tb-thread-msg-body,
html[data-theme="light"] .tb-thread-composer .field > span{
  color:#111827;
}
html[data-theme="light"] .tb-thread-composer .small.muted,
html[data-theme="light"] .tb-thread-card__meta.small.muted,
html[data-theme="light"] .tb-thread-msg__meta.small.muted{
  color:#4b5563;
}


html[data-theme="light"] .tb-thread-row,
html[data-theme="light"] .tb-thread-row *{
  -webkit-text-fill-color: initial;
}
html[data-theme="light"] .tb-thread-row.is-active,
html[data-theme="light"] .tb-thread-row.is-active .tb-thread-row__title,
html[data-theme="light"] .tb-thread-row.is-active .tb-thread-row__preview,
html[data-theme="light"] .tb-thread-row.is-active .tb-thread-row__meta,
html[data-theme="light"] .tb-thread-row.is-active span,
html[data-theme="light"] .tb-thread-row.is-active .badge{
  color:#111827;
}
html[data-theme="light"] .tb-thread-row.is-active .tb-thread-row__active{
  color:#1d4ed8;
}


.staff-inline-steps__meta .chip-strong{
  font-weight:700;
}
.staff-inline-steps__context{
  padding:10px 12px;
  margin:0 0 10px;
}
.staff-inline-steps__context .small strong{
  color:inherit;
}
.staff-inline-steps__list{
  margin:8px 0 0 18px;
  padding:0;
}
.staff-inline-steps__list li + li{
  margin-top:4px;
}

/* opt23 dashboard polish */
.staff-workflow-toolbar{
  position: sticky;
  top: 10px;
  z-index: 3;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(15,23,42,0.08);
}
.staff-workflow.is-dirty .staff-workflow-toolbar{
  box-shadow: 0 0 0 1px rgba(255,193,7,.22);
}
.staffWorkflowDirty{
  margin-top: 8px;
  color: var(--warning, #c58a00);
  font-weight: 600;
}
.button.button-warn{
  box-shadow: 0 0 0 1px rgba(255,193,7,.3) inset;
}
.staff-launch-readiness{
  margin: 12px 0;
  border-radius: 16px;
  background: var(--panel);
}
.staff-launch-readiness__head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:8px;
}
.staff-launch-readiness__chips,
.tb-request-review__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.staff-launch-readiness__list,
.tb-request-review__list{
  margin:10px 0 0 18px;
}
.staff-launch-readiness[data-state="ok"]{
  border-color: rgba(46, 204, 113, .28);
}
.staff-launch-readiness[data-state="warn"],
.tb-request-review[data-state="draft"]{
  border-color: rgba(255, 193, 7, .28);
}
.staff-launch-readiness[data-state="error"]{
  border-color: rgba(231, 76, 60, .28);
}
.chip.chip-ok{
  border-color: rgba(46, 204, 113, .28);
}
.chip.chip-warn{
  border-color: rgba(255, 193, 7, .28);
}
.tb-request-review{
  margin-top: 14px;
  border-radius: 16px;
  background: var(--panel);
}
.tb-request-review__head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.tb-request-review__hint{
  margin-top: 10px;
}

@media (max-width: 1360px){
  .dash-panel--right .tb-check-title-row{
    display:block;
  }
  .dash-panel--right .tb-check-actions{
    margin-top:6px;
    justify-content:flex-start;
  }
}

@media (max-width: 1220px){
  .dash-detail-grid:not(.dash-detail-grid--workflow-request) .dash-panel--right .staff-workflow{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items:start;
  }
  .dash-detail-grid:not(.dash-detail-grid--workflow-request) .dash-panel--right .staff-workflow > .field,
  .dash-detail-grid:not(.dash-detail-grid--workflow-request) .dash-panel--right .staff-workflow > .tb-checklist,
  .dash-detail-grid:not(.dash-detail-grid--workflow-request) .dash-panel--right .staff-inline-steps{
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px){
  .staff-workflow-toolbar{
    position: static;
  }
  .staff-launch-readiness__head,
  .tb-request-review__head,
  .staff-inline-steps__summary{
    flex-direction: column;
  }
}


.tb-table-state-cell{
  padding:20px 16px !important;
}

.tb-table-state{
  display:flex;
  align-items:flex-start;
  gap:12px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:16px;
  padding:16px;
  background:rgba(255,255,255,.025);
}

.tb-table-state__body{ display:grid; gap:4px; }
.tb-table-state__title{ font-weight:700; }
.tb-table-state__hint{ font-size:.92rem; color:var(--muted); max-width:68ch; }
.tb-table-state.is-error{ border-style:solid; border-color:rgba(255,120,120,.28); background:rgba(255,120,120,.06); }
.tb-table-state.is-loading{ border-style:solid; }

.dash-table td .tb-row-primary,
.dash-table td .tb-row-meta,
.dash-table td .tb-row-secondary{
  max-width: 100%;
  min-width: 0;
}
.tb-row-primary{
  display:block;
  font-weight:600;
  line-height:1.35;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.tb-row-primary--warn{ color:#b54708; }
.tb-row-primary--danger{ color:#b42318; }
.tb-row-secondary{
  display:none;
  margin-top:4px;
  font-size:.82rem;
  line-height:1.35;
  color:var(--muted);
}
.tb-row-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:6px;
  margin-top:6px;
}

.tb-row-chip{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  max-width:100%;
  min-width:0;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:.74rem;
  line-height:1.2;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.tb-row-chip--accent{
  border-color:rgba(90,170,255,.26);
  background:rgba(90,170,255,.10);
  color:rgba(214,232,255,.98);
}

.tb-row-chip--warn{
  border-color:rgba(255,193,7,.28);
  background:rgba(255,193,7,.10);
  color:rgba(255,231,166,.98);
}

.tb-row-chip--danger{
  border-color:rgba(231,76,60,.28);
  background:rgba(231,76,60,.10);
  color:rgba(255,205,198,.98);
}

.tb-row-chip--muted{
  opacity:.9;
}

.tb-staff-quickfilters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.tb-staff-quickfilter.is-active{
  border-color:rgba(90,170,255,.28);
  background:rgba(90,170,255,.12);
  color:rgba(214,232,255,.98);
}

html[data-theme="light"] .tb-table-state{
  border-color:rgba(0,0,0,.10);
  background:rgba(0,0,0,.02);
}
html[data-theme="light"] .tb-table-state.is-error{
  border-color:rgba(180,40,40,.22);
  background:rgba(180,40,40,.05);
}
html[data-theme="light"] .tb-row-chip{
  border-color:rgba(0,0,0,.09);
  background:rgba(0,0,0,.03);
  color:rgba(30,30,30,.82);
}
html[data-theme="light"] .tb-row-chip--accent{
  border-color:rgba(45,110,190,.20);
  background:rgba(45,110,190,.08);
  color:rgba(22,66,122,.95);
}
html[data-theme="light"] .tb-row-chip--warn{
  border-color:rgba(183,124,0,.22);
  background:rgba(183,124,0,.08);
  color:rgba(122,82,0,.95);
}
html[data-theme="light"] .tb-row-chip--danger{
  border-color:rgba(186,59,47,.20);
  background:rgba(186,59,47,.08);
  color:rgba(128,34,26,.95);
}
html[data-theme="light"] .tb-staff-quickfilter.is-active{
  border-color:rgba(45,110,190,.20);
  background:rgba(45,110,190,.08);
  color:rgba(22,66,122,.95);
}


.tb-pickup-grid{align-items:start}
.tb-pickup-panel{padding:10px 12px}
.tb-pickup-list{display:grid;gap:12px;margin-top:10px}
.tb-pickup-list--history{margin-top:0}
.tb-pickup-empty{padding:12px;border:1px dashed var(--border);border-radius:14px;color:var(--muted)}
.tb-pickup-item{border:1px solid var(--border);border-radius:16px;padding:12px;background:var(--surface-2, rgba(255,255,255,0.03));display:grid;gap:10px}
.tb-pickup-item__head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.tb-pickup-item__title{font-weight:700}
.tb-pickup-item__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.tb-pickup-item__meta .small{word-break:break-word}
.tb-pickup-item__actions{display:flex;flex-wrap:wrap;gap:8px}
.tb-pickup-history{border:1px solid var(--border);border-radius:16px;padding:10px 12px;background:var(--surface-2, rgba(255,255,255,0.02))}
.tb-pickup-history summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.tb-pickup-history summary::-webkit-details-marker{display:none}
.tb-pickup-history__scroller{max-height:360px;overflow:auto;padding-right:4px}
/* Staff pickup history is a nested <details>. The generic #tbStaffTools details rule has higher
   specificity than .tb-pickup-history, so restate the spacing with the staff-tools scope. */
#tbStaffTools details.tb-pickup-history{padding:10px 12px}
#tbStaffTools details.tb-pickup-history > summary{padding:0}
#tbStaffTools details.tb-pickup-history[open] > summary{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border);border-bottom-left-radius:0;border-bottom-right-radius:0}
#tbStaffTools details.tb-pickup-history > .hint{margin-top:0 !important}
#tbStaffTools details.tb-pickup-history .tb-pickup-history__scroller{padding-right:4px;padding-bottom:2px}
.tb-pickup-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--border)}
.tb-pickup-status[data-status="active"]{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-border)}
.tb-pickup-status[data-status="claimed"]{background:rgba(59,130,246,0.10);color:#1d4ed8;border-color:rgba(59,130,246,0.35)}
.tb-pickup-status[data-status="expired"]{background:rgba(245,158,11,0.10);color:#b45309;border-color:rgba(245,158,11,0.35)}
.tb-pickup-status[data-status="deleted"]{background:var(--bad-bg);color:var(--bad-ink);border-color:var(--bad-border)}
html[data-theme="dark"] .tb-pickup-status[data-status="claimed"]{color:#93c5fd;border-color:rgba(147,197,253,0.35);background:rgba(147,197,253,0.10)}
html[data-theme="dark"] .tb-pickup-status[data-status="expired"]{color:#fbbf24;border-color:rgba(251,191,36,0.35);background:rgba(251,191,36,0.10)}
@media (max-width: 780px){
  .tb-pickup-item__meta{grid-template-columns:1fr}
}