/* Bounded staff shell layout; component dialogs and editor workflows stay intact. */
.shell-menu, .staff-sidebar-head [data-shell-close] { display: none; }
.staff-shell { --staff-sidebar-width: 224px; }
.staff-shell.staff-sidebar-collapsed { --staff-sidebar-width: 64px; }
.staff-shell #app > :is(.topbar, .header) { position: sticky; top: 0; z-index: 35; }
.staff-shell #app > :is(.workspace, .connection-banner, .statusbar) { margin-left: var(--staff-sidebar-width); }
.staff-sidebar { position: fixed; top: var(--staff-header-bottom, var(--staff-header-height, 72px)); bottom: 0; left: 0; width: var(--staff-sidebar-width); z-index: 30; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; }
.staff-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 14px 10px; }
.staff-sidebar-head strong { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.shell-icon { display: grid; place-items: center; background: var(--soft); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; width: 32px; height: 32px; font-size: 22px; flex: none; }
.shell-icon[data-shell-collapse] { display: flex; align-items: center; justify-content: center; padding: 0; font-size: 0; line-height: 1; }
.shell-icon[data-shell-collapse]::before { content: ''; width: 6px; height: 6px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateX(1px) rotate(45deg); }
.staff-sidebar-collapsed .shell-icon[data-shell-collapse]::before { transform: translateX(-1px) rotate(225deg); }
.staff-sidebar .nav { position: static; display: flex; flex-direction: column; align-items: stretch; height: auto; padding: 6px 10px; gap: 6px; white-space: normal; border: 0; background: transparent; }
.staff-sidebar .nav :is(.nav-tab, button, a) { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 44px; height: auto; text-align: left; font-size: 12px; padding: 10px; border: 0; border-radius: 8px; color: var(--muted); text-decoration: none; background: transparent; }
.staff-sidebar .nav :is(.active, [aria-current=page]) { background: var(--selected); color: var(--ink); font-weight: 650; }
.staff-sidebar .nav .icon { display: block; flex: none; width: 18px; height: 18px; }
.staff-sidebar .nav-label-mobile { display: none; }
.staff-sidebar .nav-label-desktop, .staff-sidebar .shell-nav-label { display: inline; }
.staff-sidebar .count { margin-left: auto; flex: none; }
.staff-sidebar .nav-meta, .staff-sidebar .tagline { display: block; padding: 18px 10px; font-size: 10px; line-height: 1.6; color: var(--muted); }
.staff-sidebar .nav-meta { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-left: 0; text-align: left; }
.staff-sidebar-collapsed .staff-sidebar-head { justify-content: center; padding: 16px 5px 10px; }
.staff-sidebar-collapsed .staff-sidebar-head strong, .staff-sidebar-collapsed .staff-sidebar :is(.nav-label-desktop, .shell-nav-label, .count, .nav-meta, .tagline) { display: none; }
.staff-sidebar-collapsed .staff-sidebar .nav :is(.nav-tab, button, a) { justify-content: center; padding: 10px 0; }
.staff-menu-backdrop { display: none; }
@media (max-width: 480px) {
  .staff-shell #app > :is(.topbar, .header) .brand { flex: 0 0 auto; }
  .staff-shell :is(.topbar, .header) .brand > div { display: none; }
  .staff-shell :is(.topbar, .header) .brand-logo { width: 28px; height: 28px; }
}
@media (max-width: 370px) {
  .staff-shell #app .shell-menu { width: 32px; padding: 6px; justify-content: center; }
  .staff-shell .shell-menu span { display: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .staff-shell { --staff-sidebar-width: 192px; }
  .staff-shell .work-grid { grid-template-columns: 260px minmax(0, 1fr); }
}
/* Only applicant rows scroll; the roster tools, headings and footer stay visible. */
.interview-applicant-workspace .work-grid > .roster, .mobile-roster-sheet > .roster {
  align-self: start; height: auto; min-height: 0;
  max-height: var(--roster-viewport-height, calc(100dvh - 240px));
}
.work-grid > .roster > :not(.roster-list), .mobile-roster-sheet > .roster > :not(.roster-list) { flex-shrink: 0; }
.interview-applicant-workspace .work-grid > .roster > .roster-list, .mobile-roster-sheet > .roster > .roster-list {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 760px) {
  .staff-shell #app > :is(.workspace, .connection-banner, .statusbar) { margin-left: 0; }
  .staff-shell #app > :is(.topbar, .header) { min-height: 56px; height: auto; padding: 8px 10px; gap: 7px; flex-wrap: wrap; }
  .staff-shell .shell-menu { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 8px; font-size: 11px; flex: none; }
  .staff-shell :is(.topbar, .header) .brand { flex: 1; }
  .staff-shell :is(.topbar, .header) .brand-sub { display: none; }
  .staff-shell :is(.topbar > .row, .header-tools) { gap: 4px; margin-left: auto; }
  .staff-shell .topbar .account-button { display: none; }
  .staff-shell :is(.topbar, .header) .brand-logo-wrap { width: 28px; height: 28px; }
  .staff-shell .header-tools .btn { padding: 6px; font-size: 11px; }
  .staff-sidebar { display: none; top: 0; width: min(300px, calc(100vw - 48px)); z-index: 75; box-shadow: var(--shadow); }
  .staff-menu-open { overflow: hidden; }
  .staff-menu-open .staff-sidebar { display: block; }
  .staff-menu-open .staff-menu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 74; background: #11223370; }
  .staff-sidebar-head [data-shell-collapse] { display: none; }
  .staff-sidebar-head [data-shell-close] { display: grid; }
  .staff-sidebar-collapsed .staff-sidebar-head { justify-content: space-between; padding: 16px 14px 10px; }
  .staff-sidebar-collapsed .staff-sidebar-head strong { display: block; }
  .staff-sidebar-collapsed .staff-sidebar :is(.nav-label-desktop, .shell-nav-label) { display: inline; }
  .staff-sidebar-collapsed .staff-sidebar .count { display: inline-flex; }
  .staff-sidebar-collapsed .staff-sidebar .nav :is(.nav-tab, button, a) { justify-content: flex-start; padding: 10px; }
  .staff-shell .page-heading { align-items: center; }
  .staff-shell .page-heading h1 { font-size: 22px; }
  .staff-shell .page-heading p { margin-top: 3px; }
  .staff-shell .mobile-toolbar { margin-bottom: 8px; }
  .staff-shell .mobile-swipe-hint { display: none; }
  .staff-shell .actionbar { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .staff-shell .actionbar .actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .staff-shell .actionbar .actions > .btn { min-height: 40px; flex: 1 1 calc(50% - 6px); padding: 7px 9px; font-size: 11px; }
  .staff-shell .actionbar .actions > .btn .icon { width: 14px; height: 14px; }
  .mobile-roster-sheet { height: auto; max-height: 100%; }
  .mobile-roster-sheet > .roster { align-self: stretch; flex: 0 1 auto; }
  .mobile-roster-sheet .candidate-row.plain-candidate { grid-template-columns: minmax(0, 1fr) 14px 59px; }
  .mobile-roster-header { flex-shrink: 0; }
}
.interview-review-workspace .detail-wrap { min-width: 0; height: auto; gap: 16px; }
.interview-review-workspace #interviewSchedulerSlot { min-width: 0; }
.interview-review-workspace #interviewSchedulerMount { width: 100%; }
.interview-review-workspace .work-status { margin: 0; }
.interview-review-workspace .applicant-status.booked {
  display: inline-block; width: fit-content; padding: 3px 7px; border-radius: 5px;
  background: var(--greenwash); color: var(--green); font-weight: 650;
}
.settings-workspace { height: auto; min-height: 0; }
.settings-workspace .settings-panel { display: grid; grid-template-columns: 215px minmax(0, 1fr); align-items: start; overflow: visible; }
.settings-nav { grid-column: 1; grid-row: 1 / span 3; padding: 20px 14px; border-right: 1px solid var(--line); }
.settings-nav .settings-tabs { display: block; padding: 0; border: 0; overflow: visible; }
.settings-nav-group + .settings-nav-group { margin-top: 22px; }
.settings-nav-group h2 { font-size: 11px; color: var(--muted); margin: 0 10px 7px; }
.settings-nav .settings-tab { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left; white-space: normal; padding: 10px; border: 0; border-radius: 7px; font-size: 12px; }
.settings-nav .settings-tab.active { background: var(--selected); color: var(--ink); }
.settings-workspace .settings-scroll { grid-column: 2; height: auto; overflow: visible; width: 100%; }
.settings-workspace .settings-footer, .settings-workspace .template-errors { grid-column: 2; }
.settings-workspace .settings-footer { flex-wrap: wrap; gap: 12px; }
.settings-section-choice { display: none; }
@media (max-width: 1150px) {
  .settings-workspace .settings-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .settings-workspace .settings-panel { display: block; }
  .settings-nav { padding: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .settings-nav .settings-tabs { display: none; }
  .settings-section-choice { display: block; }
  .settings-section-choice select { margin-top: 7px; width: 100%; }
  .settings-workspace .settings-scroll { padding: 18px 14px; }
  .settings-workspace .settings-footer .row { flex-wrap: wrap; }
}

/* The chat control occupies its own column before the video status. */
.staff-shell .candidate-row, .staff-shell .roster-columns { grid-template-columns: 18px 24px minmax(0, 1fr) 32px 16px 65px; }
.staff-shell .candidate-row.plain-candidate, .staff-shell .roster-columns.plain-columns { grid-template-columns: minmax(0, 1fr) 32px 16px 65px; }
.staff-shell .row-whatsapp { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 5px; border: 0; border-radius: 6px; background: transparent; color: var(--green); }
.staff-shell .row-whatsapp:hover { background: var(--greenwash); }
.staff-shell .row-whatsapp .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.staff-shell .row-chat-count { position: absolute; top: -1px; right: -2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--green); color: var(--paper); font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; }
.staff-shell .row-chat-unavailable { width: 32px; flex: none; }
@media (min-width: 761px) and (max-width: 1100px) {
  .staff-shell .candidate-row, .staff-shell .roster-columns { grid-template-columns: 16px 22px minmax(0, 1fr) 32px 14px 57px; gap: 4px; }
  .staff-shell .candidate-row.plain-candidate, .staff-shell .roster-columns.plain-columns { grid-template-columns: minmax(0, 1fr) 32px 14px 57px; }
}
@media (max-width: 760px) {
  .staff-shell .candidate-row, .staff-shell .roster-columns, .staff-shell .mobile-roster-sheet .candidate-row { grid-template-columns: 21px 27px minmax(0, 1fr) 40px 14px 59px; gap: 5px; }
  .staff-shell .candidate-row.plain-candidate, .staff-shell .roster-columns.plain-columns, .staff-shell .mobile-roster-sheet .candidate-row.plain-candidate { grid-template-columns: minmax(0, 1fr) 40px 14px 59px; }
  .staff-shell .row-whatsapp { width: 40px; height: 40px; }
  .staff-shell .row-chat-count { top: 3px; right: 1px; }
}
@media (max-width: 380px) {
  .staff-shell .candidate-row, .staff-shell .roster-columns, .staff-shell .mobile-roster-sheet .candidate-row { grid-template-columns: 19px 24px minmax(0, 1fr) 40px 14px 55px; gap: 4px; }
  .staff-shell .candidate-row.plain-candidate, .staff-shell .roster-columns.plain-columns, .staff-shell .mobile-roster-sheet .candidate-row.plain-candidate { grid-template-columns: minmax(0, 1fr) 40px 14px 55px; }
}

.saved-review-notes{display:grid;gap:12px;margin-bottom:16px}.saved-review-note{border:1px solid var(--line);border-radius:10px;padding:12px;min-width:0}.saved-review-note strong{font-size:12px}.saved-review-note time{display:block;font-size:11px;color:var(--muted);margin-top:3px}.saved-review-note p{white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0 0}.saved-review-note>.between{gap:10px;align-items:start}.saved-review-note .btn{flex:none}