/* Reusable controls for overview, students and bags. */

:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(.home-primary, .home-secondary, #edit-shortcuts, #all-dashboard-notices),
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope, :is(#student-stats-scope, [data-student-control="student-stats-scope"]), #bag-stats-scope, #dashboard-year, :is(#student-stats-year, [data-student-control="student-stats-year"]), #bag-stats-year, #dashboard-year-end, :is(#student-stats-year-end, [data-student-control="student-stats-year-end"]), #bag-stats-year-end) {
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  font-size: 14px;
}

:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-year-form, :is(#student-stats-form, [data-student-control="student-stats-form"]), #bag-stats-form) {
  gap: 8px;
  font-size: 14px;
}

:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .dashboard-scope-picker {
  position: relative;
}

:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-trigger, :is(#student-stats-scope-trigger, [data-student-control="student-stats-scope-trigger"]), #bag-stats-scope-trigger) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: max-content;
  height: 40px;
  padding: 8px 34px 8px 12px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-container-low);
  font-size: 14px;
}

:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  text-align: left;
  background: transparent;
}

:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button:hover,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button:focus-visible {
  background: var(--ui-primary-container);
  outline: none;
}

:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  width: 100%;
  padding: 4px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--ui-shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button:hover:not([aria-selected="true"]),
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button:focus-visible:not([aria-selected="true"]),
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button[aria-selected="true"] {
  background: var(--ui-option-highlight);
  font-weight: 400;
  box-shadow: none;
}

:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button[aria-selected="true"]:hover,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button[aria-selected="true"]:focus-visible {
  background: var(--ui-option-selected-hover);
  box-shadow: none;
}

:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-year, :is(#student-stats-year, [data-student-control="student-stats-year"]), #bag-stats-year),
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-year-end, :is(#student-stats-year-end, [data-student-control="student-stats-year-end"]), #bag-stats-year-end) {
  width: var(--ui-year-width);
  padding-left: 12px;
  padding-right: 12px;
}

:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .dashboard-heading h1,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .metric,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .metric-label,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .metric-value,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .metric-value small,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .section-heading h2,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .shortcut,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .shortcut > span:not(.shortcut-arrow),
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .dashboard-notice strong,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .baseline-summary,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .baseline-summary strong,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .dashboard-description,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .no-tasks,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-year-form, :is(#student-stats-form, [data-student-control="student-stats-form"]), #bag-stats-form) label,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-trigger, :is(#student-stats-scope-trigger, [data-student-control="student-stats-scope-trigger"]), #bag-stats-scope-trigger),
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button:hover,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button:focus-visible,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button[aria-selected="true"],
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button[aria-selected="true"]:hover,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button[aria-selected="true"]:focus-visible,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-year, :is(#student-stats-year, [data-student-control="student-stats-year"]), #bag-stats-year),
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-year-end, :is(#student-stats-year-end, [data-student-control="student-stats-year-end"]), #bag-stats-year-end),
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) #dashboard-refresh,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) #edit-shortcuts {
  color: var(--ui-text);
}

#home-section #edit-shortcuts {
  padding: 9px 15px;
}

:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .metric,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .metric-value small,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .shortcut,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .baseline-summary,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .dashboard-description,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-year-form, :is(#student-stats-form, [data-student-control="student-stats-form"]), #bag-stats-form) label,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-trigger, :is(#student-stats-scope-trigger, [data-student-control="student-stats-scope-trigger"]), #bag-stats-scope-trigger),
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) #dashboard-refresh,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) #edit-shortcuts,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) #all-dashboard-notices,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-year-form, :is(#student-stats-form, [data-student-control="student-stats-form"]), #bag-stats-form) > .home-primary,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) #dashboard-baseline,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .metric-link,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) .dashboard-notice .text-button {
  font-weight: 400;
}

:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button:hover:not([aria-selected="true"]),
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button:focus-visible:not([aria-selected="true"]),
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button:hover,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button:focus-visible,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button[aria-selected="true"]:hover,
:is(#home-section, :is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) :is(#dashboard-scope-options, :is(#student-stats-scope-options, [data-student-control="student-stats-scope-options"]), #bag-stats-scope-options) button[aria-selected="true"]:focus-visible {
  color: var(--ui-primary-hover);
  font-weight: 400;
}

:is(#workspace, #import-dialog, #print-history-dialog) .roster-compact-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--ui-section-divider);
  white-space: nowrap;
  font-size: 14px;
}

:is(#workspace, #import-dialog, #print-history-dialog) .roster-compact-pagination button:hover:not(:disabled) {
  background: var(--ui-option-highlight);
}

:is(#workspace, #import-dialog, #print-history-dialog) .roster-compact-pagination .ui-icon {
  width: 16px;
  height: 16px;
}

#workspace .roster-compact-pagination .current-page {
  color: var(--ui-primary);
}

#workspace :is(:is(#student-filters, [data-student-control="student-filters"]), #bag-filters) .roster-filter-summary {
  align-items: center;
  gap: 12px;
  margin-left: auto;
  display: block;
  position: relative;
  padding-right: calc(var(--roster-pagination-width, 112px) + 16px);
}

#workspace :is(:is(#student-filters, [data-student-control="student-filters"]), #bag-filters) .roster-compact-pagination {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--roster-pagination-width, 112px);
  box-sizing: border-box;
}

:is(#workspace, #import-dialog, #print-history-dialog) .roster-compact-pagination button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 28px;
  min-height: 0;
  padding: 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ui-text);
  flex: 0 0 24px;
}

:is(#workspace, #import-dialog, #print-history-dialog) .roster-compact-pagination button:disabled {
  opacity: .35;
  background: transparent !important;
  color: var(--ui-disabled-text) !important;
  cursor: not-allowed !important;
}

#workspace .statistics-scope-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
}

#workspace :is(#dashboard-year-form, :is(#student-stats-form, [data-student-control="student-stats-form"]), #bag-stats-form) > label {
  margin: 0 4px 0 0;
  white-space: nowrap;
  font-weight: 400;
}

#workspace .statistics-scope-form :is(input[type="number"],.home-primary),
#import-graduation-year {
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  margin: 0;
  font-size: 14px;
}

#workspace .statistics-scope-form input[type="number"],
#import-graduation-year {
  width: var(--ui-year-width);
  padding: 8px 12px;
  border: 1px solid var(--ui-field-outline);
  background: var(--ui-surface);
  border-radius: 8px;
}

#workspace .statistics-scope-form > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

#workspace .statistics-scope-form .home-primary {
  padding: 9px 15px;
}

#workspace .statistics-scope-form .home-primary:focus-visible {
  border-color: var(--ui-primary) !important;
  box-shadow: inset 0 0 0 1px var(--ui-primary) !important;
}

/* Student and bag management share the two-row toolbar card. */
#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 24px;
}

#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar)::after {
  left: 24px;
  right: 24px;
}

#workspace :is(:is(#student-filters, [data-student-control="student-filters"]), #bag-filters) {
  padding: 16px 20px 16px 24px;
  column-gap: 8px;
}

#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]), #bags-toolbar) > .actions {
  width: auto;
  min-width: 0;
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}


#workspace #bags-toolbar:has(#bag-stats-scope-options:not([hidden])) {
  z-index: 41;
}

/* Keep the open field's dark 2px edge when focus moves into its menu. */
#workspace :is(#dashboard-scope-trigger, :is(#student-stats-scope-trigger, [data-student-control="student-stats-scope-trigger"]), #bag-stats-scope-trigger)[aria-expanded="true"],
#workspace :is(#class-filter, #bag-class-filter, #status-filter, #bag-status-filter)[open] > summary {
  background-color: var(--ui-surface) !important;
  border-color: var(--ui-primary) !important;
  box-shadow: inset 0 0 0 1px var(--ui-primary) !important;
}
#home-section #background-toggle {
  padding: 9px 15px;
}

/* The preview footer reuses the existing compact paging buttons. */
:is(#import-dialog, #print-history-dialog) .roster-compact-pagination { justify-content: center; padding-left: 0; border-left: 0; }

/* Row actions keep their original trigger and the compact scope-style popup. */
body :is(.student-action-menu,.bag-management-menu) {
  display:flex;flex-direction:column;gap:4px;width:max-content;min-width:max-content;padding:4px;
  background:var(--ui-surface);border:1px solid var(--ui-border)!important;
  border-radius:8px;box-shadow:0 8px 24px var(--ui-shadow-soft);
}
body :is(.student-action-menu,.bag-management-menu) button {
  display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;
  width:100%;height:var(--action-option-height,32px);min-height:var(--action-option-height,32px);padding:4px 12px;border-radius:4px;text-align:left;white-space:nowrap;
  color:var(--ui-text);font-size:var(--action-option-font-size,14px);line-height:var(--action-option-line-height,20px);font-weight:400;box-shadow:none;
}
body :is(.student-action-menu,.bag-management-menu) button:is(:hover,:focus-visible):not(:disabled) {
  background:var(--ui-option-highlight);color:var(--ui-primary-hover);outline:none;box-shadow:none;
}
body :is(.student-action-menu .danger-button,.bag-management-menu .bag-menu-danger),
body :is(.student-action-menu .danger-button,.bag-management-menu .bag-menu-danger):is(:hover,:focus-visible) {
  color:var(--ui-error);
}
body :is(.student-action-menu .danger-button,.bag-management-menu .bag-menu-danger):is(:hover,:focus-visible):not(:disabled) {
  background:var(--ui-error-container);color:var(--ui-error);
}

body :is(#student-action-menu,#bag-management-menu) button {
  font-size:var(--action-option-font-size,14px);
  line-height:var(--action-option-line-height,20px);
}

/* Shared fixed form table: stationary header and an inset body scrollbar. */
.fixed-data-table {
  border:1px solid var(--ui-field-outline);border-radius:8px;
  background:var(--ui-surface);overflow-x:auto;overflow-y:hidden;
}
.fixed-data-table .data-table-body-viewport {
  scrollbar-gutter:stable;
}
.fixed-data-table table {
  border-collapse:separate;border-spacing:0;table-layout:fixed;
}
.fixed-data-table .data-table-body-viewport .data-table-empty { height:100%; }
.fixed-data-table .data-table-empty td { vertical-align:middle; }

/* Pagination arrows use color alone, including their disabled state. */
body :is(#workspace, #import-dialog, #print-history-dialog) .roster-compact-pagination button {
  box-sizing: border-box;
  width: 24px !important;
  height: 28px !important;
  min-width: 24px !important;
  min-height: 0 !important;
  padding: 4px !important;
  flex: 0 0 24px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body :is(#workspace, #import-dialog, #print-history-dialog) .roster-compact-pagination button:is(:hover, :active, :focus-visible):not(:disabled) {
  color: var(--ui-primary);
}
#workspace :is(#roster-section, #bags-section, [data-storage-id="inventory-panel"]) > .roster-compact-pagination {
  border-left: 0;
}

/* The header and management cards share the dashboard's light elevation. */
#workspace .topbar,
#workspace :is(:is(#roster-toolbar, [data-student-control="roster-toolbar"]),#bags-toolbar,#roster-sticky-controls,#bags-sticky-controls,#roster-section,#bags-section) {
  box-shadow:5px 7px 14px rgba(28,52,83,.09)!important;
}
#workspace #workspace-refresh {
  box-shadow:5px 7px 14px rgba(28,52,83,.09)!important;
}

/* Once frozen, filters and the mirrored header read as one continuous surface. */
#workspace :is(#roster-sticky-controls,#bags-sticky-controls).with-frozen-header {
  box-shadow:none!important;
}
#workspace :is(#roster-section,#bags-section) .roster-frozen-header:not([hidden]) {
  box-shadow:0 8px 10px -6px rgba(28,52,83,.09)!important;
}


/* Shared table rows stay square until hovered or selected. */
.hj-data-table tbody td:first-child,
.hj-data-table tbody td:last-child {border-radius:0!important;}
.hj-data-table tbody tr:is(:hover,[aria-selected="true"],.selected,:has(input.first-column-select:checked)) td:first-child {border-radius:6px 0 0 6px!important;}
.hj-data-table tbody tr:is(:hover,[aria-selected="true"],.selected,:has(input.first-column-select:checked)) td:last-child {border-radius:0 6px 6px 0!important;}

/* Fixed-height table bodies keep their row rhythm beyond the loaded records. */
.hj-data-table .table-striped-viewport {
  background:repeating-linear-gradient(to bottom,
    var(--ui-table-row-alternate) 0,
    var(--ui-table-row-alternate) var(--table-stripe-height,56px),
    var(--ui-surface) var(--table-stripe-height,56px),
    var(--ui-surface) calc(var(--table-stripe-height,56px) * 2))!important;
  background-attachment:local!important;
}
.hj-data-table .table-striped-viewport .data-table-empty,
.hj-data-table .table-striped-viewport .data-table-empty td {background:transparent!important;}

.hj-data-table .table-striped-viewport tbody tr {--fixed-row-surface:var(--ui-surface);}
.hj-data-table .table-striped-viewport tbody tr:nth-child(odd) {--fixed-row-surface:var(--ui-table-row-alternate);}
.hj-data-table .table-striped-viewport tbody tr:hover {--fixed-row-surface:var(--ui-table-row-hover);}
.hj-data-table .table-striped-viewport table:not(.data-table-empty) tbody td {background:var(--fixed-row-surface)!important;}
.searchable-select {position:relative;}
.searchable-select > input.dropdown-trigger {box-sizing:border-box;width:100%;height:40px;min-height:40px;padding:8px 36px 8px 16px;text-align:left;color:transparent;caret-color:transparent;}
.searchable-select.editing > input.dropdown-trigger {color:var(--ui-text);caret-color:auto;}
.searchable-select > .searchable-select-value {position:absolute;left:16px;right:36px;top:50%;transform:translateY(-50%);pointer-events:none;display:flex;min-width:0;gap:0;white-space:nowrap;text-align:left;font-size:14px;}
.searchable-select-value > span {flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.searchable-select-value > small {flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ui-muted);font-size:inherit;}
.searchable-select.editing > .searchable-select-value {display:none;}
.searchable-select > .dropdown-arrow {position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;}
.searchable-select-options .shared-option {text-align:left;justify-content:flex-start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.searchable-select-options .area-location-note::before {content:none;}
.searchable-select-options .area-location-note::after {content:none;}
.searchable-select-empty {margin:8px 12px;font-size:14px;color:var(--ui-muted);}

.searchable-select-options .area-location-note {display:inline;margin:0;font-size:inherit;line-height:inherit;color:var(--ui-muted);}
body .searchable-select > .searchable-select-value,
body .searchable-select > .searchable-select-value > :is(span,small) {font-weight:400;}
body .shared-option-menu.searchable-select-options .shared-option {text-align:left;justify-content:flex-start;}

body .shared-option-menu.searchable-select-options .shared-option {display:grid;grid-template-columns:var(--option-name-width,84px) minmax(0,1fr);column-gap:12px;align-items:center;}
body .shared-option-menu.searchable-select-options .shared-option-label {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body .shared-option-menu.searchable-select-options .shared-option:not(:has(.area-location-note)) .shared-option-label {grid-column:1 / -1;}
body .shared-option-menu.searchable-select-options .area-location-note {display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.searchable-select-value > small {margin-left:8px;}