:root {
  --srm-raspberry: #b32440;
  --srm-raspberry-rgb: 179, 36, 65;
  --srm-salmon: #df4f4e;
  --srm-salmon-rgb: 223, 78, 78;
  --srm-blue: #005d7d;
  --srm-blue-rgb: 0, 93, 125;
  --srm-lightblue: #1684a9;
  --srm-lightblue-rgb: 22, 132, 169;
  --srm-darkblue: #00445c;
  --srm-darkblue-rgb: 0, 68, 92;
  --tempo-surface-border: rgba(33, 37, 41, 0.18);
  --tempo-surface-muted: rgba(33, 37, 41, 0.025);
  --tempo-app-bg: #f6f7f8;
  --tempo-surface-shadow: 0 0.25rem 0.85rem rgba(33, 37, 41, 0.07);
  --tempo-label-color: #005d7d;
  --tempo-label-color-rgb: 0, 93, 125;
  --tempo-surface-radius: 0.75rem;
  --tempo-control-radius: 0.42rem;
  --tempo-control-focus: 0 0 0 0.2rem rgba(var(--srm-lightblue-rgb), 0.18);
  --tempo-workspace-border: var(--tempo-surface-border);
  --tempo-panel-padding: 1rem;
  --tempo-field-gap: 0.35rem;
  --tempo-content-gap: 0.75rem;
  --srm-font-display: srm-script;
}

/* CoreUI uses its primary palette for checks, switches, selected options,
 * calendars, pagers, and component focus states. Keep that palette aligned
 * with Tempo rather than allowing CoreUI's default indigo to show through. */
:root,
[data-coreui-theme="dark"] {
  --cui-font-sans-serif: srm-normal;
  --cui-body-font-family: srm-normal;
  --cui-primary: var(--srm-blue);
  --cui-primary-rgb: var(--srm-blue-rgb);
  --cui-primary-text-emphasis: var(--srm-darkblue);
  --cui-primary-bg-subtle: rgba(var(--srm-blue-rgb), 0.14);
  --cui-primary-border-subtle: rgba(var(--srm-blue-rgb), 0.56);
  --cui-primary-contrast: var(--cui-white);
  --cui-primary-start: var(--srm-blue);
  --cui-primary-stop: var(--srm-lightblue);
  --cui-link-color: var(--srm-blue);
  --cui-link-color-rgb: var(--srm-blue-rgb);
  --cui-link-hover-color: var(--srm-salmon);
  --cui-link-hover-color-rgb: var(--srm-salmon-rgb);
  --cui-focus-ring-color: rgba(var(--srm-lightblue-rgb), 0.3);
  --cui-form-check-input-checked-bg-color: var(--srm-blue);
  --cui-form-check-input-checked-border-color: var(--srm-blue);
}

@font-face {
  font-family: "srm-normal";
  src:
    url("../../assets/meta/MetaOT-Norm.otf") format("opentype"),
    url("../../assets/meta/MetaOT-Norm.woff") format("woff"),
    url("../../assets/meta/MetaOT-Norm.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "srm-bold";
  src:
    url("../../assets/meta/MetaOT-Book.otf") format("opentype"),
    url("../../assets/meta/MetaOT-Book.woff") format("woff"),
    url("../../assets/meta/MetaOT-Book.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "srm-light";
  src:
    url("../../assets/meta/MetaOT-Light.otf") format("opentype"),
    url("../../assets/meta/MetaOT-Light.woff") format("woff"),
    url("../../assets/meta/MetaOT-Light.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "srm-extrabold";
  src:
    url("../../assets/meta/MetaOT-MediumBold.otf") format("opentype"),
    url("../../assets/meta/MetaOT-MediumBold.woff") format("woff"),
    url("../../assets/meta/MetaOT-MediumBold.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "srm-script";
  src:
    url("../../assets/camy/camy-black-narrow.woff") format("woff"),
    url("../../assets/camy/camy-black-narrow.otf") format("opentype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

/* Foundation */

body {
  font-family: srm-normal;
  background: var(--tempo-app-bg);
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: srm-bold;
}

label,
.form-label {
  font-family: srm-normal;
  color: var(--tempo-label-color);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.form-label {
  margin-bottom: var(--tempo-field-gap);
}

a {
  color: var(--srm-blue);
  text-decoration: none;
}

a:hover {
  color: var(--srm-salmon);
  text-decoration: none;
}

.form-control::placeholder {
  color: var(--cui-tertiary-color) !important;
  font-family: srm-light;
  font-size: inherit;
}

th,
strong {
  font-family: srm-bold;
  font-style: normal;
}

#buttons_toolbar .search input {
  width: 100px;
}

#buttons_toolbar .dropdown-item {
  font-family: srm-light;
  color: var(--cui-body-color) !important;
}

a.page-link {
  color: var(--cui-secondary-color);
}

.page-item.active a.page-link,
a.dropdown-item:hover,
.list-group-item-secondary.list-group-item-action.active {
  color: var(--cui-body-color);
  background-color: var(--cui-tertiary-bg);
  border-color: var(--cui-border-color);
}

.tr_selected {
  color: var(--cui-body-color);
  background-color: var(--cui-primary-bg-subtle);
}

/* General rules for screen UI */

.bg-tertiary {
  background: var(--cui-tertiary-bg);
}

.nav:not(:is(.tempo-primary-nav, .tempo-primary-links, .tempo-nav-utilities)) {
  background-color: transparent;
  color: var(--cui-body-color);
}

.nav:not(:is(.tempo-primary-nav, .tempo-primary-links, .tempo-nav-utilities))
  .nav-link {
  color: var(--cui-body-color);
}

.nav-pills:not(
    :is(.tempo-primary-nav, .tempo-primary-links, .tempo-nav-utilities)
  )
  .nav-link.active {
  background-color: var(--cui-tertiary-bg);
  color: var(--cui-body-color);
}

#search_form {
  margin-bottom: 10px;
}

#search_fields .btn.btn-sm {
  padding: 0.125rem 0.5rem;
}

.modal-header {
  background-color: var(--cui-tertiary-bg);
  color: var(--cui-body-color);
  border-bottom-color: var(--cui-border-color);
  justify-content: space-between;
}

.modal-title {
  font-family: srm-script;
  font-weight: normal;
}

.status_message {
  font-family: srm-light;
  font-size: 80%;
  color: var(--srm-lightblue);
}

/* Shared dynamic-screen layout.  These selectors intentionally describe
   renderer output rather than any one metadata-defined screen. */
.tempo-app-header,
main.container-fluid,
section.tempo-screen {
  margin-right: auto;
  margin-left: auto;
  padding-right: clamp(0.75rem, 1.5vw, 1.5rem);
  padding-left: clamp(0.75rem, 1.5vw, 1.5rem);
}

.tempo-app-header {
  padding-top: 0.35rem;
}

.tempo-app-header > .row {
  margin-top: 0.15rem !important;
}

.tempo-app-header .tempo-primary-nav {
  margin-top: 0 !important;
}

.tempo-screen.mt-2 {
  margin-top: 0 !important;
  padding-top: 0.4rem !important;
}

.tempo-app-header hr {
  margin: 0.35rem 0 0;
  border-color: var(--tempo-surface-border);
  opacity: 1;
}

.tempo-primary-nav {
  display: flex;
  align-items: stretch;
  gap: 0.55rem !important;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.tempo-primary-nav > .tempo-primary-cluster {
  flex: 1 1 28rem;
  min-width: 0;
}

.tempo-primary-nav > .tempo-nav-utility-cluster {
  flex: 0 1 23.5rem;
  width: clamp(18rem, 24vw, 23.5rem);
  min-width: 18rem;
  max-width: 23.5rem;
}

.nav.tempo-primary-links,
.nav.tempo-nav-utilities {
  align-items: stretch;
  height: 100%;
  padding: 0.16rem;
  border-radius: 0.65rem;
}

.nav.tempo-primary-links {
  --cui-nav-link-color: #d9f1f7;
  --cui-nav-link-hover-color: #ffffff;
  --cui-nav-pills-link-active-color: #ffffff;
  --cui-nav-pills-link-active-bg: rgba(255, 255, 255, 0.22);
  background-color: var(--srm-blue);
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.2rem 0.65rem rgba(0, 0, 0, 0.14);
}

.tempo-primary-links > .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.tempo-primary-nav .tempo-primary-links .nav-link {
  color: var(--cui-nav-link-color);
  padding: 0.38rem 0.65rem;
  border-radius: 0.48rem;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}

.tempo-primary-nav .tempo-primary-links .nav-link:hover {
  color: var(--cui-nav-link-hover-color);
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.tempo-primary-links.nav-pills .nav-link.active {
  color: var(--cui-nav-pills-link-active-color);
  background-color: var(--cui-nav-pills-link-active-bg);
  box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.18);
}

.nav.tempo-nav-utilities {
  flex-wrap: nowrap;
  gap: 0.2rem;
  background: var(--cui-tertiary-bg);
  border: 1px solid var(--tempo-surface-border);
  box-shadow: var(--tempo-surface-shadow);
}

.tempo-nav-utilities .nav-link {
  color: var(--cui-body-color);
  transition:
    color 0.18s ease,
    background-color 0.18s ease;
}

.tempo-nav-utilities .nav-link:hover,
.tempo-nav-utilities .nav-link:focus-visible {
  color: var(--cui-body-color);
  background: var(--cui-secondary-bg);
}

.tempo-nav-utilities .nav-link.active {
  color: #fff;
  background: var(--srm-darkblue);
}

.tempo-nav-utilities .tempo-screen-launcher {
  position: relative;
  flex: 1 1 12.5rem;
  min-width: 0;
}

.tempo-nav-utilities .tempo-nav-icon {
  flex: 0 0 auto;
}

.tempo-nav-utilities .tempo-nav-icon .nav-link,
.tempo-screen-launcher-toggle {
  display: grid;
  min-width: 2.15rem;
  min-height: 2.15rem;
  place-items: center;
}

.tempo-screen-launcher-toggle {
  display: none;
}

.tempo-screen-launcher-control,
.tempo-screen-launcher .tempo-autocomplete,
.tempo-screen-launcher .autocomplete {
  width: 100%;
}

.tempo-screen-launcher .autocomplete-input-group {
  min-height: 2.3rem;
  border: 1px solid var(--cui-border-color);
  border-radius: 0.48rem;
  background: var(--cui-body-bg);
}

.tempo-screen-launcher .autocomplete-input {
  min-width: 0;
  color: var(--cui-body-color);
  background: transparent;
}

.tempo-screen-launcher .autocomplete-input::placeholder {
  color: var(--cui-secondary-color);
}

.tempo-screen-launcher .autocomplete-input-group:focus-within {
  border-color: var(--srm-lightblue);
  box-shadow: 0 0 0 0.2rem rgba(var(--tempo-label-color-rgb), 0.18);
}

.tempo-screen-launcher .autocomplete-indicator,
.tempo-screen-launcher .autocomplete-cleaner {
  color: var(--cui-secondary-color);
}

#page_title {
  overflow: hidden;
  color: var(--cui-body-color);
  font-family: var(--srm-font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1;
  text-overflow: ellipsis;
}

.card {
  border-color: var(--tempo-surface-border);
  border-radius: 0.72rem;
  box-shadow: var(--tempo-surface-shadow);
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  background: var(--cui-tertiary-bg);
  border-bottom-color: var(--cui-border-color);
  border-radius: 0.68rem 0.68rem 0 0 !important;
}

.card-header > div,
.modal-header > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.card-header .card-title {
  margin: 0;
  color: var(--cui-body-color);
  font-family: srm-bold;
  font-weight: normal;
  font-size: 1.35rem;
}

.card-footer {
  padding: 0.65rem 1rem;
  background-color: var(--tempo-surface-muted);
  border-top-color: var(--cui-border-color);
}

.form-control,
.form-select,
.form-multi-select,
.date-picker,
.date-range-picker,
.autocomplete,
.tempo-autocomplete,
.autocomplete-input-group,
.autocomplete-input,
.time-picker,
.search-button {
  background-color: var(--cui-body-bg);
  border-color: var(--cui-border-color);
  border-radius: var(--tempo-control-radius);
  font-family: srm-normal;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.form-control[readonly],
.form-control:read-only {
  color: var(--cui-body-color);
  background-color: var(--cui-secondary-bg);
  opacity: 1;
}

.form-control:focus,
.form-select:focus,
.form-multi-select:focus-within,
.date-picker:focus-within,
.date-range-picker:focus-within,
.autocomplete-input-group:focus-within {
  border-color: var(--srm-lightblue);
  box-shadow: var(--tempo-control-focus);
}

/* CoreUI stores several component focus colors on the component itself, which
 * bypasses the shared primary token unless the component variables are reset. */
.form-multi-select,
*:not(.form-multi-select) > .form-multi-select-dropdown {
  --cui-form-multi-select-focus-border-color: var(--srm-lightblue);
  --cui-form-multi-select-focus-box-shadow: var(--tempo-control-focus);
  --cui-form-multi-select-option-focus-box-shadow: var(--tempo-control-focus);
}

.autocomplete,
*:not(.autocomplete) > .autocomplete-dropdown {
  --cui-autocomplete-focus-border-color: var(--srm-lightblue);
  --cui-autocomplete-focus-box-shadow: var(--tempo-control-focus);
  --cui-autocomplete-option-focus-box-shadow: var(--tempo-control-focus);
}

.date-picker,
*:not(.date-picker) > .date-picker-dropdown,
.date-range-picker,
.time-picker,
*:not(.time-picker) > .time-picker-dropdown,
.search-button {
  --cui-date-picker-focus-border-color: var(--srm-lightblue);
  --cui-date-picker-focus-box-shadow: var(--tempo-control-focus);
  --cui-time-picker-focus-border-color: var(--srm-lightblue);
  --cui-time-picker-focus-box-shadow: var(--tempo-control-focus);
  --cui-search-button-focus-border-color: var(--srm-lightblue);
  --cui-search-button-focus-box-shadow: var(--tempo-control-focus);
}

.calendar {
  --cui-calendar-nav-btn-focus-box-shadow: var(--tempo-control-focus);
  --cui-calendar-cell-focus-box-shadow: var(--tempo-control-focus);
}

/* CoreUI's range presets are navigation shortcuts, not secondary blue actions. */
.date-picker-ranges .btn-ghost-secondary {
  --cui-btn-color: var(--tempo-label-color);
  --cui-btn-hover-color: var(--cui-body-color);
  --cui-btn-hover-bg: rgba(var(--tempo-label-color-rgb), 0.16);
  --cui-btn-hover-border-color: transparent;
  --cui-btn-active-color: var(--cui-body-color);
  --cui-btn-active-bg: rgba(var(--tempo-label-color-rgb), 0.22);
  --cui-btn-active-border-color: transparent;
  --cui-btn-disabled-color: var(--tempo-label-color);
  width: 100%;
  padding-right: 0.55rem;
  padding-left: 0.55rem;
  text-align: left;
}

.accordion {
  --cui-accordion-btn-focus-box-shadow: var(--tempo-control-focus);
}

.pagination {
  --cui-pagination-focus-box-shadow: var(--tempo-control-focus);
}

/* Keep Data Grid paging quiet like the surrounding grid controls; the current
 * page remains the single blue selection cue. */
.tempo-coreui-grid .data-grid-pagination .pagination {
  --cui-pagination-color: var(--cui-secondary-color);
  --cui-pagination-hover-color: var(--cui-body-color);
  --cui-pagination-hover-bg: var(--cui-tertiary-bg);
  --cui-pagination-hover-border-color: var(--cui-border-color);
  --cui-pagination-focus-color: var(--cui-body-color);
  --cui-pagination-focus-bg: var(--cui-tertiary-bg);
  --cui-pagination-focus-box-shadow: var(--tempo-control-focus);
}

.btn {
  --cui-btn-font-family: srm-normal;
  --cui-btn-font-weight: 400;
  border-radius: 0.42rem;
  font-family: srm-normal;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.form-multi-select,
*:not(.form-multi-select) > .form-multi-select-dropdown {
  --cui-form-multi-select-font-family: srm-normal;
}

.autocomplete,
*:not(.autocomplete) > .autocomplete-dropdown {
  --cui-autocomplete-font-family: srm-normal;
}

.date-picker,
*:not(.date-picker) > .date-picker-dropdown {
  --cui-date-picker-font-family: srm-normal;
}

.time-picker,
*:not(.time-picker) > .time-picker-dropdown {
  --cui-time-picker-font-family: srm-normal;
}

.search-button {
  --cui-search-button-font-family: srm-normal;
}

.modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--cui-body-bg);
  border-top: 1px solid var(--cui-border-color);
  box-shadow: 0 -0.3rem 1rem rgba(0, 0, 0, 0.08);
}

body:has(#logon_form) {
  background: var(--tempo-app-bg);
}

.card:has(#logon_form) {
  border-color: var(--tempo-surface-border);
  box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.12);
}

.card:has(#logon_form) #welcome_img {
  width: 188px;
  height: 196px;
  filter: drop-shadow(0 0.55rem 0.9rem rgba(0, 0, 0, 0.24));
}

#logon_submit {
  color: var(--cui-white);
  background-color: var(--cui-success-text-emphasis);
  border-color: var(--cui-success-text-emphasis);
}

#logon_submit:hover,
#logon_submit:focus {
  color: var(--cui-white);
  background-color: var(--cui-success);
  border-color: var(--cui-success);
}

/* Form Switches */
.form-switch .form-check-label {
  font-family: srm-light;
  font-size: 90%;
  color: var(--cui-body-color) !important;
}

.form-switch .form-check-input:checked {
  background-color: var(--srm-blue);
  border-color: var(--srm-blue);
}

.form-check-input:focus {
  border-color: var(--srm-lightblue);
  box-shadow: var(--tempo-control-focus);
}

.form-switch .form-check-input:focus:not(:checked) {
  --cui-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28230,155,25%29'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:indeterminate {
  border-color: var(--srm-blue);
  background-color: var(--srm-blue);
}

/* Form Sliders */
.form-range::-moz-range-thumb,
.form-range::-webkit-slider-thumb {
  background-color: var(--srm-blue);
}

/* HugeRTE Styles
 * HugeRTE's dark skin ships with blue interaction states. Keep the editor's
 * chrome in Tempo charcoal and reserve blue for the active/focused tool. */
[data-coreui-theme="dark"] .tox.tox-hugerte {
  border-color: #4b4d49 !important;
  border-radius: var(--tempo-control-radius);
  background: #202220 !important;
}

[data-coreui-theme="dark"] .tox .tox-toolbar,
[data-coreui-theme="dark"] .tox .tox-toolbar__primary,
[data-coreui-theme="dark"] .tox .tox-toolbar__overflow,
[data-coreui-theme="dark"] .tox .tox-menubar,
[data-coreui-theme="dark"] .tox .tox-statusbar {
  background-color: #202220 !important;
}

[data-coreui-theme="dark"] .tox .tox-toolbar__group + .tox-toolbar__group {
  border-left-color: #454741 !important;
}

[data-coreui-theme="dark"] .tox .tox-tbtn,
[data-coreui-theme="dark"] .tox .tox-tbtn:focus,
[data-coreui-theme="dark"] .tox .tox-tbtn--disabled,
[data-coreui-theme="dark"] .tox .tox-tbtn--disabled:hover,
[data-coreui-theme="dark"] .tox .tox-tbtn:disabled,
[data-coreui-theme="dark"] .tox .tox-tbtn:disabled:hover {
  background: transparent !important;
}

[data-coreui-theme="dark"] .tox .tox-tbtn:hover,
[data-coreui-theme="dark"] .tox .tox-tbtn--bespoke,
[data-coreui-theme="dark"] .tox .tox-tbtn--bespoke:focus {
  background: #343631 !important;
}

[data-coreui-theme="dark"] .tox .tox-tbtn:active,
[data-coreui-theme="dark"] .tox .tox-tbtn--active,
[data-coreui-theme="dark"] .tox .tox-tbtn--enabled,
[data-coreui-theme="dark"] .tox .tox-tbtn--enabled:hover,
[data-coreui-theme="dark"] .tox .tox-tbtn--enabled:focus {
  background: var(--srm-darkblue) !important;
}

[data-coreui-theme="dark"] .tox .tox-tbtn:focus::after,
[data-coreui-theme="dark"] .tox .tox-tbtn--enabled:focus::after {
  box-shadow: 0 0 0 2px var(--srm-lightblue) !important;
}

[data-coreui-theme="dark"] .tox .tox-edit-area::before {
  border-color: var(--srm-lightblue) !important;
}

/* Explicit theme attributes are set before paint by tempo-theme.js. */
[data-coreui-theme="dark"] body {
  background: var(--tempo-app-bg);
}

/* Replace CoreUI's cool indigo-gray dark surfaces with neutral charcoal,
 * reserving Tempo's blue palette for controls, focus, and selection. */
[data-coreui-theme="dark"] {
  --cui-body-bg: #222324;
  --cui-body-bg-rgb: 34, 35, 36;
  --cui-secondary-bg: #2b2c2d;
  --cui-secondary-bg-rgb: 43, 44, 45;
  --cui-tertiary-bg: #272829;
  --cui-tertiary-bg-rgb: 39, 40, 41;
  --cui-border-color: #46484a;
  --cui-border-color-translucent: rgba(255, 255, 255, 0.14);
  --cui-dark: #222324;
  --cui-dark-rgb: 34, 35, 36;
  --cui-light-bg-subtle: #2b2c2d;
  --cui-dark-bg-subtle: #1e1f20;
  --cui-secondary-text-emphasis: #d8d9da;
  --tempo-surface-border: rgba(255, 255, 255, 0.14);
  --tempo-surface-muted: rgba(255, 255, 255, 0.025);
  --tempo-app-bg: #191a1b;
  --tempo-surface-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.2);
  --tempo-label-color: #7cc6dc;
  --tempo-label-color-rgb: 124, 198, 220;
}

/* Preserve the Marketing logo artwork while lifting its wordmark to Tempo's dark body-text color. */
[data-coreui-theme="dark"] img.tempo-logo {
  content: url("../../assets/tempo-logo-dark.svg?v=20260823-14");
}

:is([data-coreui-theme="dark"], [data-coreui-theme="light"])
  .nav:not(
    :is(.tempo-primary-nav, .tempo-primary-links, .tempo-nav-utilities)
  ) {
  --cui-nav-link-color: var(--cui-body-bg);
  --cui-nav-pills-link-active-color: var(--cui-white);
  --cui-nav-pills-link-active-bg: var(--srm-lightblue);
}

[data-coreui-theme="dark"]
  .nav:not(:is(.tempo-primary-nav, .tempo-primary-links, .tempo-nav-utilities))
  a:hover {
  color: var(--cui-light);
}

[data-coreui-theme="light"] body {
  background: var(--tempo-app-bg);
}

[data-coreui-theme="light"] {
  --cui-body-bg: #ffffff;
  --cui-body-bg-rgb: 255, 255, 255;
  --cui-secondary-bg: #f5f6f7;
  --cui-secondary-bg-rgb: 245, 246, 247;
  --cui-tertiary-bg: #f0f1f3;
  --cui-tertiary-bg-rgb: 240, 241, 243;
  --cui-border-color: #d7dbe0;
  --cui-border-color-translucent: rgba(33, 37, 41, 0.12);
  --tempo-surface-border: #d7dbe0;
  --tempo-surface-muted: #f8f9fa;
  --tempo-app-bg: #f7f8fa;
  --tempo-surface-shadow: 0 0.25rem 0.85rem rgba(33, 37, 41, 0.07);
}

/* Quiet actions still need a clear edge against the light application canvas. */
[data-coreui-theme="light"] .tempo-action-secondary,
[data-coreui-theme="light"] .btn-outline-secondary,
[data-coreui-theme="light"] .tempo-section-toggle,
[data-coreui-theme="light"] #buttons_toolbar .btn,
[data-coreui-theme="light"] #buttons_toolbar .btn-custom,
[data-coreui-theme="light"] #buttons_toolbar .btn.btn-custom.dropdown-toggle {
  color: #303841;
  background: #fff;
  border-color: #aeb6bf;
  box-shadow: 0 0.06rem 0.14rem rgba(33, 37, 41, 0.04);
}

[data-coreui-theme="light"] .tempo-action-secondary:hover,
[data-coreui-theme="light"] .tempo-action-secondary:focus-visible,
[data-coreui-theme="light"] #buttons_toolbar .btn:hover,
[data-coreui-theme="light"] #buttons_toolbar .btn:focus-visible,
[data-coreui-theme="light"] #buttons_toolbar .btn-custom:hover,
[data-coreui-theme="light"] #buttons_toolbar .btn-custom:focus-visible {
  color: #20262d;
  background: #f0f1f3;
  border-color: #87919c;
}

[data-coreui-theme="light"] .page-item.active a.page-link,
[data-coreui-theme="light"] a.dropdown-item:hover,
[data-coreui-theme="light"] .btn-custom,
[data-coreui-theme="light"] .btn.btn-custom.dropdown-toggle,
[data-coreui-theme="light"]
  .list-group-item-secondary.list-group-item-action.active {
  color: var(--cui-secondary-bg);
}

[data-coreui-theme="light"]
  .nav:not(:is(.tempo-primary-nav, .tempo-primary-links, .tempo-nav-utilities))
  a:hover {
  color: var(--cui-dark);
}

[data-coreui-theme="light"] #page_title {
  color: var(--srm-blue);
}

@media (max-width: 767.98px) {
  body {
    margin-top: 0;
  }

  .tempo-app-header {
    padding-top: 0.4rem;
  }

  .tempo-app-header .row {
    row-gap: 0.35rem;
  }

  .tempo-primary-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3rem !important;
    align-items: center;
  }

  .tempo-primary-nav > .tempo-primary-cluster {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .tempo-primary-nav > .tempo-nav-utility-cluster {
    width: auto;
    min-width: 0;
  }

  .tempo-primary-links {
    flex-wrap: nowrap;
    gap: 0.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .tempo-primary-links::-webkit-scrollbar {
    display: none;
  }

  .tempo-primary-links > .nav-item {
    flex: 0 0 auto;
  }

  .tempo-primary-links .nav-link {
    min-width: 4.25rem;
    padding: 0.45rem 0.65rem;
  }

  .tempo-nav-utility-cluster {
    justify-self: end;
  }

  .tempo-nav-utility-cluster.has-open-launcher {
    justify-self: stretch;
  }

  .tempo-nav-utilities {
    justify-content: flex-end;
    width: max-content;
    margin-left: auto;
  }

  .has-open-launcher .tempo-nav-utilities {
    width: 100%;
  }

  .tempo-screen-launcher {
    flex: 0 0 auto !important;
  }

  .tempo-screen-launcher-toggle {
    display: grid;
    border: 0;
    background: transparent;
  }

  .tempo-screen-launcher.is-open .tempo-screen-launcher-toggle {
    display: none;
  }

  .tempo-screen-launcher-control {
    display: none;
  }

  .tempo-screen-launcher.is-open .tempo-screen-launcher-control {
    position: static;
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .tempo-screen-launcher.is-open {
    flex: 1 1 12rem !important;
  }

  #page_title {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }

  .tempo-screen #search_form {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .tempo-screen #search_buttons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }

  .tempo-screen #search_buttons > .col,
  .tempo-screen #status_message,
  .tempo-screen #buttons_toolbar {
    width: 100%;
    text-align: left !important;
  }

  .tempo-screen #buttons_toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .card-body,
  .card-footer,
  .modal-body {
    padding: 0.8rem;
  }

  .card-header,
  .modal-header,
  .modal-footer {
    padding: 0.7rem 0.8rem;
  }

  .modal-dialog {
    width: 100%;
    max-width: none;
    min-height: 100%;
    margin: 0;
  }

  .modal-content {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

@media (max-width: 575.98px) {
  .form-control,
  .form-select,
  .form-multi-select input,
  .date-picker input,
  .date-range-picker input {
    font-size: 16px;
  }

  .form-control:not(textarea),
  .form-select,
  .form-multi-select,
  .date-picker,
  .date-range-picker,
  .btn {
    min-height: 2.75rem;
  }

  .btn-sm {
    min-height: 2.35rem;
  }

  .card-header .card-title {
    flex: 0 0 100%;
  }

  .card-header > div,
  .modal-header > div {
    width: 100%;
    justify-content: flex-start;
  }

  .modal-footer .btn {
    flex: 1 1 7rem;
  }
}

/* Shared visual language for metadata screens, native workflows, and form pages. */

.tempo-action-primary,
.tempo-action-add,
.tempo-action-save {
  color: var(--cui-white);
  background: var(--cui-success-text-emphasis);
  border-color: var(--cui-success-text-emphasis);
}

.tempo-action-primary:hover,
.tempo-action-primary:focus-visible,
.tempo-action-add:hover,
.tempo-action-add:focus-visible,
.tempo-action-save:hover,
.tempo-action-save:focus-visible {
  color: var(--cui-white);
  background: var(--cui-success);
  border-color: var(--cui-success);
}

.tempo-action-secondary,
.btn-outline-secondary,
.tempo-section-toggle {
  color: var(--cui-body-color);
  background: transparent;
  border-color: var(--cui-border-color);
}

.tempo-action-secondary:hover,
.tempo-action-secondary:focus-visible,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible,
.tempo-section-toggle:hover,
.tempo-section-toggle:focus-visible,
#buttons_toolbar .btn:hover,
#buttons_toolbar .btn:focus-visible,
#buttons_toolbar .btn-custom:hover,
#buttons_toolbar .btn-custom:focus-visible {
  color: var(--cui-body-color);
  background: var(--cui-tertiary-bg);
  border-color: var(--cui-border-color);
}

/* Destructive actions remain available but visually subordinate to the green
 * affirmative action in the same workspace. */
.btn-danger,
.btn-outline-danger,
.tempo-action-danger,
.tempo-modal-delete {
  min-height: auto;
  padding: 0.3rem 0.55rem;
  color: var(--cui-danger);
  background: transparent;
  border-color: rgba(var(--cui-danger-rgb), 0.7);
  font-size: 0.82rem;
}

.btn-danger:hover,
.btn-danger:focus-visible,
.btn-outline-danger:hover,
.btn-outline-danger:focus-visible,
.tempo-action-danger:hover,
.tempo-action-danger:focus-visible,
.tempo-modal-delete:hover,
.tempo-modal-delete:focus-visible {
  color: var(--cui-white);
  background: var(--cui-danger);
  border-color: var(--cui-danger);
}

/* Reusable workspace structure. Native pages opt into these primitives so
 * headers, tabs, facts, summaries, cards, and empty states cascade from one
 * contract instead of recreating the same component per workflow. */
.tempo-workspace-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: end;
  padding: 0 0 0.8rem;
  border-bottom: 1px solid var(--tempo-workspace-border);
}

.tempo-workspace-heading {
  min-width: 0;
}

.tempo-workspace-title {
  margin: 0;
  color: var(--cui-body-color);
  font-family: var(--srm-font-display);
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.05;
}

.tempo-workspace-subtitle {
  margin: 0.18rem 0 0;
  color: var(--cui-secondary-color);
  font-size: 0.875rem;
}

.tempo-workspace-actions,
.tempo-tab-list,
.tempo-record-header,
.tempo-panel-heading,
.tempo-search-actions,
.tempo-table-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.tempo-workspace-actions {
  justify-content: flex-end;
}

.tempo-tab {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.tempo-tab[aria-selected="true"],
.tempo-tab.active,
.tempo-choice-list .btn.active,
.tempo-choice.active {
  color: var(--cui-white);
  background: var(--srm-blue);
  border-color: var(--srm-blue);
}

.tempo-tab .badge {
  font-family: srm-normal;
}

/* Uses a darker Goodmans-derived palette so every metadata-driven grid status badge keeps one white foreground in both themes. */
.tempo-grid-badge--red {
  color: #fff;
  background-color: #c53b28;
}

.tempo-grid-badge--green {
  color: #fff;
  background-color: #4e7f12;
}

.tempo-grid-badge--orange {
  color: #fff;
  background-color: #a85d0c;
}

.tempo-grid-badge--purple {
  color: #fff;
  background-color: #511731;
}

.tempo-grid-badge--blue {
  color: #fff;
  background-color: var(--srm-blue);
}

.tempo-grid-badge--gray {
  color: #fff;
  background-color: #606162;
}

.tempo-choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tempo-choice-list .btn {
  border-radius: 999px;
}

.tempo-workspace-section {
  padding: 1.35rem 0;
}

.tempo-workspace-section + .tempo-workspace-section {
  border-top: 1px solid rgba(var(--srm-blue-rgb), 0.18);
}

.tempo-workspace-section > h2,
.tempo-panel-heading h2 {
  margin: 0 0 1.05rem;
  font-size: 1.15rem;
}

.tempo-panel-heading {
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 0.8rem;
}

.tempo-panel-heading p {
  margin: 0;
  color: var(--cui-secondary-color);
}

.tempo-fact-grid,
.tempo-reading-grid,
.tempo-summary-grid,
.tempo-related-grid {
  display: grid;
  gap: 1.2rem 2.25rem;
}

.tempo-fact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.tempo-fact-grid--three,
.tempo-summary-grid,
.tempo-related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tempo-reading-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 2.25rem;
}

:is(.tempo-fact-grid, .tempo-reading-grid) > * {
  min-width: 0;
}

.tempo-fact-grid dt,
.tempo-fact-label {
  display: block;
  margin: 0 0 0.3rem;
  color: var(--srm-blue);
  font-size: 0.78rem;
  line-height: 1.15;
}

.tempo-fact-grid dd {
  margin: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.tempo-fact-grid--lead dd {
  font-size: 1.05rem;
}

.tempo-reading-content {
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.tempo-record-list {
  display: grid;
  gap: 0.65rem;
}

.tempo-record-card {
  padding: 0.8rem;
  background: rgba(var(--srm-darkblue-rgb), 0.025);
  border: 1px solid rgba(var(--srm-blue-rgb), 0.22);
  border-radius: 0.55rem;
}

.tempo-record-header {
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.tempo-record-title {
  font-family: srm-bold;
}

.tempo-chip {
  display: inline-flex;
  margin: 0.45rem 0.35rem 0 0;
  padding: 0.16rem 0.45rem;
  background: rgba(var(--srm-blue-rgb), 0.12);
  border-radius: 10rem;
  font-size: 0.82rem;
}

.tempo-summary-grid {
  gap: 0.65rem;
  margin-bottom: 0.8rem;
}

.tempo-summary-grid > div {
  padding: 0.7rem 0.85rem;
  background: rgba(var(--srm-darkblue-rgb), 0.045);
  border-left: 3px solid var(--srm-blue);
}

.tempo-summary-grid span {
  display: block;
  color: var(--cui-secondary-color);
  font-size: 0.78rem;
}

.tempo-summary-grid strong {
  font-size: 1.2rem;
}

.tempo-empty-state {
  padding: 1.25rem;
  color: var(--cui-secondary-color);
  text-align: center;
  border: 1px dashed rgba(var(--srm-blue-rgb), 0.34);
  border-radius: 0.55rem;
}

.tempo-gallery-empty {
  display: grid;
  min-height: 15rem;
  place-items: center;
  gap: 0.15rem;
  margin-top: 1rem;
  padding: 2rem;
  color: var(--cui-secondary-color);
  text-align: center;
  border: 1px dashed var(--cui-border-color);
  border-radius: 0.65rem;
}

.tempo-asset-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cui-body-bg);
  border: 1px solid var(--cui-border-color);
  border-radius: 0.65rem;
}

.tempo-asset-preview {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--tempo-surface-muted);
  border-bottom: 1px solid var(--cui-border-color);
}

.tempo-asset-preview img {
  width: 100%;
  padding: 0.65rem;
  object-fit: contain;
}

.tempo-asset-badge {
  position: absolute;
  top: 0.55rem;
  padding: 0.2rem 0.38rem;
  color: var(--cui-secondary-color);
  background: var(--cui-tertiary-bg);
  border: 1px solid var(--cui-border-color);
  border-radius: 0.28rem;
  font-family: srm-bold;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}

.tempo-asset-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem;
}

.tempo-asset-title {
  margin: 0;
  font-family: srm-bold;
  font-size: 1rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.tempo-asset-meta {
  color: var(--cui-secondary-color);
  font-size: 0.78rem;
  line-height: 1.45;
}

.tempo-asset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
}

/* Shared calendar workspace and FullCalendar skin. */
.tempo-calendar-page .tempo-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(20rem, 0.8fr);
  gap: 1rem;
  align-items: start;
  height: calc(100dvh - 15.5rem);
  min-height: 25rem;
  margin: 0.75rem 0 1rem;
}

.tempo-calendar-page :is(.tempo-calendar-shell, .tempo-calendar-details) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 1rem;
  background: var(--cui-body-bg);
  border: 1px solid var(--cui-border-color);
  border-radius: 0.45rem;
}

.tempo-calendar-page .tempo-calendar-stage {
  flex: 1 1 auto;
  min-height: 0;
}

.tempo-calendar-page
  :is(.tempo-calendar-heading, .tempo-calendar-details-heading) {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.tempo-calendar-page .tempo-calendar-heading {
  margin-bottom: 0.9rem;
}

.tempo-calendar-page .tempo-calendar-details-heading {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--cui-border-color);
}

.tempo-calendar-page
  :is(.tempo-calendar-heading, .tempo-calendar-details-heading)
  h2 {
  margin: 0;
  font-family: var(--srm-font-display);
  font-size: 1.3rem;
}

.tempo-calendar-count {
  min-width: 2rem;
  padding: 0.18rem 0.45rem;
  color: var(--cui-secondary-color);
  background: var(--cui-tertiary-bg);
  border-radius: 999px;
  font-family: srm-bold;
  font-size: 0.78rem;
  text-align: center;
}

.tempo-calendar-page .tempo-calendar-hint,
.tempo-calendar-page .tempo-calendar-filter-label {
  margin: 0.2rem 0 0;
  color: var(--cui-secondary-color);
  font-size: 0.84rem;
  text-align: right;
}

.tempo-calendar-page .fc {
  --fc-border-color: var(--cui-border-color);
  --fc-page-bg-color: var(--cui-body-bg);
  --fc-neutral-bg-color: var(--cui-tertiary-bg);
  --fc-today-bg-color: color-mix(
    in srgb,
    var(--srm-blue) 4%,
    var(--cui-body-bg)
  );
  --fc-button-bg-color: var(--cui-body-bg);
  --fc-button-border-color: var(--cui-border-color);
  --fc-button-text-color: var(--cui-body-color);
  --fc-button-hover-bg-color: var(--cui-tertiary-bg);
  --fc-button-hover-border-color: var(--srm-blue);
  --fc-button-active-bg-color: var(--srm-blue);
  --fc-button-active-border-color: var(--srm-blue);
  --fc-event-bg-color: color-mix(
    in srgb,
    var(--srm-blue) 16%,
    var(--cui-body-bg)
  );
  --fc-event-border-color: color-mix(
    in srgb,
    var(--srm-blue) 48%,
    var(--cui-border-color)
  );
  --fc-event-text-color: var(--cui-body-color);
}

.tempo-calendar-page .fc .fc-toolbar-title {
  font-family: var(--srm-font-display);
  font-size: 1.3rem;
}

.tempo-calendar-page .fc .fc-button {
  box-shadow: none;
  font-size: 0.82rem;
}

.tempo-calendar-page .fc .fc-button:focus {
  box-shadow: var(--tempo-control-focus);
}

.tempo-calendar-page .fc .fc-event {
  overflow: hidden;
  border-left: 0.2rem solid
    color-mix(in srgb, var(--srm-blue) 78%, var(--cui-body-color));
  border-radius: 0.3rem;
  box-shadow: 0 0.1rem 0.25rem color-mix(in srgb, #000 22%, transparent);
  font-size: 0.78rem;
  line-height: 1.2;
}

.tempo-calendar-page .fc .fc-event-title {
  overflow: hidden;
  font-family: srm-bold;
  text-overflow: ellipsis;
}

.tempo-calendar-page .fc .tempo-calendar-event-content {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.15rem 0.26rem 0.16rem 0.34rem;
}

.tempo-calendar-page
  .fc
  :is(
    .tempo-calendar-event-time,
    .tempo-calendar-event-primary,
    .tempo-calendar-event-secondary
  ) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tempo-calendar-page .fc .tempo-calendar-event-time {
  color: var(--cui-secondary-color);
  font-family: srm-bold;
  font-size: 0.67rem;
}

.tempo-calendar-page .fc .tempo-calendar-event-primary {
  font-family: srm-bold;
  font-size: 0.76rem;
}

.tempo-calendar-page .fc .tempo-calendar-event-secondary {
  color: var(--cui-secondary-color);
  font-size: 0.68rem;
}

/* Collapsed time-grid events are an intentional dense-day summary, not blank space. */
.tempo-calendar-page .fc :is(.fc-more-link, .fc-timegrid-more-link) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.45rem;
  margin: 0.1rem 0.14rem;
  padding: 0.12rem 0.38rem;
  color: var(--cui-body-color);
  background: color-mix(in srgb, var(--srm-blue) 20%, var(--cui-body-bg));
  border: 1px solid
    color-mix(in srgb, var(--srm-blue) 68%, var(--cui-border-color));
  border-radius: 0.3rem;
  box-shadow: inset 0.18rem 0 0 var(--srm-blue);
  font-family: srm-bold;
  font-size: 0.68rem;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}

.tempo-calendar-page
  .fc
  :is(.fc-more-link, .fc-timegrid-more-link):is(:hover, :focus-visible) {
  color: var(--cui-body-color);
  background: color-mix(in srgb, var(--srm-blue) 30%, var(--cui-body-bg));
  border-color: var(--srm-blue);
  box-shadow:
    inset 0.18rem 0 0 var(--srm-blue),
    var(--tempo-control-focus);
  outline: 0;
}

.tempo-calendar-page .fc .fc-popover {
  border-color: color-mix(
    in srgb,
    var(--srm-blue) 54%,
    var(--cui-border-color)
  );
  box-shadow: var(--tempo-surface-shadow);
}

.tempo-calendar-page .fc .fc-popover-header {
  background: color-mix(in srgb, var(--srm-blue) 14%, var(--cui-body-bg));
  color: var(--cui-body-color);
  font-family: srm-bold;
}

.tempo-calendar-page
  .fc
  :is(.fc-timegrid-col.fc-day-today, .fc-daygrid-day.fc-day-today) {
  box-shadow: inset 0 0.15rem 0
    color-mix(in srgb, var(--srm-blue) 58%, transparent);
}

.tempo-eyebrow {
  margin: 0 0 0.15rem;
  color: var(--cui-secondary-color);
  font-family: srm-bold;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tempo-chart-shell {
  min-height: 360px;
  margin: 1rem 0;
  padding: 1rem 0 0.5rem;
  border-top: 1px solid var(--cui-border-color);
  border-bottom: 1px solid var(--cui-border-color);
}

.tempo-chart {
  min-height: 320px;
}

.tempo-search-workspace {
  overflow: visible;
  background: transparent;
}

.tempo-search-advanced-offcanvas,
.tempo-search-filters-offcanvas {
  --cui-offcanvas-width: min(26rem, 92vw);
  --cui-offcanvas-bg: var(--cui-body-bg);
  --cui-offcanvas-border-color: var(--tempo-surface-border);
  --cui-offcanvas-box-shadow: var(--tempo-surface-shadow);
}

.tempo-search-advanced-offcanvas .offcanvas-header,
.tempo-search-filters-offcanvas .offcanvas-header {
  padding: 0.9rem 1rem;
  background: var(--tempo-surface-muted);
  border-top: 3px solid var(--srm-blue);
  border-bottom: 1px solid var(--tempo-surface-border);
}

.tempo-search-advanced-offcanvas .offcanvas-title,
.tempo-search-filters-offcanvas .offcanvas-title {
  font-family: srm-script;
  font-size: 1.45rem;
  font-weight: 400;
}

.tempo-search-advanced-offcanvas #search_advanced_row,
.tempo-search-filters-offcanvas #search_filters_row {
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  border: 0;
}

.tempo-search-advanced-offcanvas #search_advanced_row > .row,
.tempo-search-advanced-offcanvas #search_advanced_row > div > .row,
.tempo-search-filters-offcanvas #search_filters_row > .row,
.tempo-search-filters-offcanvas #search_filters_row > div > .row,
.tempo-search-form #search_fields > div > .row,
.tempo-modal-form > .row {
  --cui-gutter-x: 0.75rem;
  --cui-gutter-y: 0.2rem;
  width: 100% !important;
  margin-right: 0;
  margin-left: 0;
}

.tempo-search-advanced-offcanvas #search_advanced_row [class*="col-lg-"],
.tempo-search-filters-offcanvas #search_filters_row [class*="col-lg-"] {
  flex: 0 0 100%;
  max-width: 100%;
}

.tempo-search-advanced-offcanvas .offcanvas-header-actions,
.tempo-search-filters-offcanvas .offcanvas-header-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-left: auto;
}

.tempo-search-advanced-offcanvas .offcanvas-header .btn-close,
.tempo-search-filters-offcanvas .offcanvas-header .btn-close {
  margin: 0;
}

/* Native pages use the same restrained panel treatment as generated surfaces. */
.tempo-panel {
  padding: var(--tempo-panel-padding);
  background: var(--cui-body-bg);
  border: 1px solid var(--tempo-surface-border);
  border-radius: var(--tempo-surface-radius);
}

.tempo-panel--muted {
  background: var(--tempo-surface-muted);
}

.tempo-panel--accent {
  border-left: 3px solid var(--cui-success);
}

#search_form.tempo-search-form {
  margin: 0;
  padding: 0.65rem 0 0.45rem;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* The page container owns the outer gutter. Cancel only primary-row column
 * gutters so fields align with the header and results; offcanvas rows retain
 * their own padding. Cover generated and native search markup. */
.tempo-screen .tempo-search-form #search_fields > .row,
.tempo-screen .tempo-search-form #search_fields > div:not(.offcanvas) > .row {
  --cui-gutter-x: 0.75rem;
  width: calc(100% + var(--cui-gutter-x)) !important;
  margin-right: calc(-0.5 * var(--cui-gutter-x));
  margin-left: calc(-0.5 * var(--cui-gutter-x));
}

.tempo-search-form .tempo-field {
  margin-bottom: 0.2rem !important;
}

.tempo-search-form .form-label {
  margin-bottom: 0.2rem;
}

@media (min-width: 576px) {
  .tempo-search-form
    :is(
      .form-control:not(textarea),
      .form-select,
      .form-multi-select,
      .date-picker,
      .date-range-picker,
      .autocomplete-input-group
    ) {
    min-height: 2.35rem;
  }
}

.tempo-direct-id-input-row {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
  min-width: 0;
}

.tempo-direct-id-input-row > .form-control,
.tempo-direct-id-input-row > .form-select {
  min-width: 0;
  flex: 1 1 auto;
}

.tempo-direct-id-scope {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: stretch;
  padding: 0.15rem;
  background: var(--cui-body-bg);
  border: 1px solid var(--cui-border-color);
  border-radius: var(--tempo-control-radius);
  font-size: 0.78rem;
}

.tempo-direct-id-scope-switch {
  display: inline-flex;
  align-items: center;
  width: 4.25rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: calc(var(--tempo-control-radius) - 0.15rem);
  background: transparent;
  color: var(--cui-secondary-color);
  cursor: pointer;
}

.tempo-direct-id-scope-switch i {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  width: 2.125rem;
  border-radius: calc(var(--tempo-control-radius) - 0.15rem);
  font-size: 0.95rem;
  opacity: 0.62;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.tempo-direct-id-scope-switch i:first-child {
  color: #fff;
  background: var(--srm-blue);
  opacity: 1;
}

.tempo-direct-id-scope-switch.is-filter i:first-child {
  color: var(--cui-secondary-color);
  background: transparent;
  opacity: 0.58;
}

.tempo-direct-id-scope-switch.is-filter i:last-child {
  color: #fff;
  background: var(--srm-blue);
  opacity: 1;
}

.tempo-direct-id-scope-switch:focus-visible {
  outline: 2px solid var(--cui-focus-ring-color);
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .tempo-direct-id-input-row {
    gap: 0.3rem;
  }
}

.tempo-search-form #search_advanced_row {
  margin-top: 0.45rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--tempo-surface-border);
}

.tempo-search-filter-summary {
  display: none;
}

.tempo-filter-count {
  margin-left: 0.15rem;
  color: var(--cui-body-color);
  background: var(--cui-secondary-bg);
  font-family: srm-normal;
  font-size: 0.68rem;
}

.tempo-mobile-only-filter-control {
  display: none !important;
}

.tempo-search-footer,
#search_buttons.tempo-search-footer {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0;
  background: transparent;
  border-top: 1px solid var(--tempo-surface-border);
}

.tempo-table-tools {
  justify-content: flex-end;
}

.tempo-search-actions .btn,
.tempo-workspace-actions .btn {
  min-height: 2.2rem;
  padding: 0.35rem 0.65rem;
}

.tempo-search-status,
.tempo-screen #status_message.tempo-search-status {
  min-width: 0;
  min-height: 1.25rem;
  margin: 0;
  color: var(--srm-lightblue);
  font-family: srm-normal;
  font-size: 0.84rem;
  line-height: 1.3;
  text-align: center;
}

.tempo-result-commands {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.tempo-result-view-selector {
  display: inline-flex;
  padding: 0.15rem;
  background: var(--cui-body-bg);
  border: 1px solid var(--cui-border-color);
  border-radius: 0.55rem;
}

.tempo-result-view-option {
  min-height: 2rem;
  padding: 0.32rem 0.55rem;
  color: var(--cui-secondary-color);
  font-size: 0.88rem;
  font-weight: 600;
  border: 0;
}

.tempo-result-view-option:hover {
  color: var(--cui-body-color);
  background: var(--cui-tertiary-bg);
}

.btn-check:checked + .tempo-result-view-option,
.tempo-result-view-option.active {
  color: #fff;
  background: var(--srm-blue);
  box-shadow: none;
}

.tempo-result-view-option:focus-visible {
  outline: 2px solid var(--srm-blue);
  outline-offset: 2px;
}

.tempo-screen-tools .dropdown-toggle {
  min-height: 2.3rem;
  padding: 0.36rem 0.65rem;
}

.tempo-screen-tools .dropdown-menu {
  z-index: 1060;
  min-width: 12.5rem;
  padding: 0.35rem;
  color: var(--cui-body-color);
  background: var(--cui-tertiary-bg);
  border: 1px solid var(--cui-border-color);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.18);
}

.tempo-screen-tools .dropdown-item {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  padding: 0.48rem 0.55rem;
  color: var(--cui-body-color);
  border-radius: 0.25rem;
}

.tempo-screen-tools .dropdown-item:hover,
.tempo-screen-tools .dropdown-item:focus {
  color: var(--cui-body-color);
  background: var(--cui-secondary-bg);
}

.tempo-table-tools .btn,
.tempo-table-tools .form-control,
.tempo-table-tools .form-select {
  min-height: 2.45rem;
}

/* Every CoreUI result grid inherits this shell, including native result lists. */
.tempo-table-shell {
  margin: 0.5rem 0 0;
  overflow: visible;
  background: var(--cui-body-bg);
  border: 1px solid var(--tempo-surface-border);
  border-radius: var(--tempo-surface-radius);
  box-shadow: 0 0.2rem 0.75rem rgba(0, 0, 0, 0.08);
}

.tempo-table-shell .table > :not(caption) > * > * {
  border-color: var(--cui-border-color);
}

.tempo-table-shell .table thead th {
  color: var(--tempo-label-color) !important;
  background: var(--cui-tertiary-bg);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
}

/* Shared CoreUI Data Grid skin for generated and native result lists. */
.tempo-coreui-grid.data-grid,
.tempo-coreui-grid .data-grid {
  --cui-data-grid-border-color: var(--cui-border-color);
  --cui-data-grid-header-bg: var(--cui-tertiary-bg);
  --cui-data-grid-viewport-max-height: none;
}

.tempo-coreui-grid .data-grid-toolbar,
.tempo-coreui-grid .data-grid-pagination {
  padding: 0.55rem 0.75rem;
  background: var(--tempo-surface-muted);
  border-color: var(--tempo-surface-border);
}

.tempo-coreui-grid .data-grid-toolbar {
  border-bottom: 1px solid var(--tempo-surface-border);
}

.tempo-coreui-grid .data-grid-pagination,
.tempo-grid-totals {
  border-top: 1px solid var(--tempo-surface-border);
}

.tempo-grid-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  align-items: baseline;
  padding: 0.6rem 1rem;
  color: var(--cui-body-color);
  background: var(--tempo-surface-muted);
  font-size: 0.875rem;
}

.tempo-grid-totals-label,
.tempo-grid-total {
  font-variant-numeric: tabular-nums;
}

.tempo-grid-totals-label {
  font-family: srm-bold;
}

.tempo-coreui-grid .data-grid-header,
.tempo-coreui-grid .data-grid-header > tr > th {
  background-color: var(--cui-data-grid-header-bg) !important;
  background-image: none;
}

.tempo-coreui-grid .data-grid-header {
  z-index: 5;
}

.tempo-coreui-grid .data-grid-viewport > .table {
  font-size: 0.875rem;
}

.tempo-coreui-grid .data-grid-viewport > .table > :not(caption) > * > * {
  border-color: var(--cui-border-color);
}

.tempo-coreui-grid .data-grid-cell-pinned-start,
.tempo-coreui-grid .data-grid-cell-pinned-end {
  z-index: 2;
  background-color: var(--cui-table-bg) !important;
}

/* Pinned cells need an opaque base. CoreUI applies the row stripe with an
 * inset shadow, so assigning its translucent light-theme stripe directly as
 * the cell background lets scrolling content show through. */

.tempo-coreui-grid .data-grid-header .data-grid-cell-pinned-start,
.tempo-coreui-grid .data-grid-header .data-grid-cell-pinned-end,
.tempo-coreui-grid .data-grid-header th[data-coreui-column="_actions"] {
  z-index: 6;
  background-color: var(--cui-data-grid-header-bg) !important;
}

.tempo-coreui-grid .data-grid-header th[data-coreui-column="_actions"] {
  position: sticky;
  inset-inline-start: 0;
}

/* Fixed utility columns keep their descriptive DOM labels for assistive
 * technology while using compact, unambiguous visual headings. */
.tempo-coreui-grid
  .data-grid-header
  th:is([data-coreui-column="_select"], [data-coreui-column="_actions"])
  .data-grid-header-cell {
  justify-content: center;
}

.tempo-coreui-grid
  .data-grid-header
  th:is([data-coreui-column="_select"], [data-coreui-column="_actions"])
  .data-grid-header-label {
  flex: 0 0 1rem;
  min-width: 1rem;
  overflow: visible;
  font-size: 0;
  line-height: 1;
  text-align: center;
}

.tempo-coreui-grid
  .data-grid-header
  th:is([data-coreui-column="_select"], [data-coreui-column="_actions"])
  .data-grid-header-label::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-size: 1rem;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tempo-coreui-grid
  .data-grid-header
  th[data-coreui-column="_select"]
  .data-grid-header-label::before {
  content: "\f271";
}

.tempo-coreui-grid
  .data-grid-header
  th[data-coreui-column="_actions"]
  .data-grid-header-label::before {
  content: "\f5d4";
}

.tempo-coreui-grid
  .data-grid-header
  th:is([data-coreui-column="_select"], [data-coreui-column="_actions"])
  .data-grid-menu-button {
  display: none;
}

.tempo-coreui-grid
  :is(.data-grid-menu, .data-grid-filter-menu, .data-grid-column-chooser) {
  z-index: 10;
}

#buttons_toolbar .btn,
#buttons_toolbar .btn-custom,
#buttons_toolbar .btn.btn-custom.dropdown-toggle {
  color: var(--cui-body-color);
  background: transparent;
  border-color: var(--cui-border-color);
  box-shadow: none;
}

#buttons_toolbar .dropdown-menu {
  z-index: 1060;
  min-width: 13rem;
  max-height: min(22rem, calc(100vh - 10rem));
  padding: 0.35rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--cui-body-color);
  background: var(--cui-tertiary-bg);
  border: 1px solid var(--cui-border-color);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.18);
}

#buttons_toolbar .dropdown-menu .dropdown-item {
  padding: 0.42rem 0.55rem;
  color: var(--cui-body-color) !important;
  border-radius: 0.25rem;
}

#buttons_toolbar .dropdown-menu .dropdown-item:hover,
#buttons_toolbar .dropdown-menu .dropdown-item:focus {
  background: var(--cui-secondary-bg);
}

#buttons_toolbar .dropdown-menu input[type="checkbox"] {
  accent-color: var(--srm-blue);
}

/* Grid actions have one intentional presentation, independent of whether the
   metadata action is a modal, drill-down, or a normal link. */
.tempo-table-shell tbody :is(a, button).se-action.btn {
  color: var(--cui-body-color);
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
}

.tempo-table-shell tbody :is(a, button).se-action.btn:hover,
.tempo-table-shell tbody :is(a, button).se-action.btn:focus {
  color: var(--cui-body-color);
  background: var(--cui-tertiary-bg) !important;
  border-color: transparent !important;
}

.tempo-table-shell tbody :is(a, button).se-action.btn:focus-visible {
  outline: 2px solid var(--srm-blue);
  outline-offset: 1px;
}

/* Modal actions share one compact, touch-friendly size across workflows. */
.modal :is(.modal-header, .modal-footer) .btn,
.modal .tempo-modal-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.65rem;
  font-size: 1rem;
  line-height: 1.25;
  white-space: nowrap;
}

.modal .btn-close {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.modal .tempo-result-view-option {
  padding-inline: 0.5rem;
  font-size: 0.88rem;
}

.tempo-screen-modal .modal-header {
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  color: var(--cui-body-color);
  background: var(--cui-secondary-bg);
  border-top: 3px solid var(--srm-blue);
  border-bottom: 1px solid var(--cui-border-color);
}

.tempo-screen-modal .modal-content {
  background: var(--cui-body-bg);
  border-color: var(--tempo-surface-border);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.32);
}

.tempo-screen-modal .modal-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--cui-body-color);
}

/* Mirrors the CSL editor: title left, compact Form/Notebook switch centered,
 * and save/close actions right without widening the shared modal shell. */
.tempo-screen-modal .modal-header.tempo-modal-tabbed-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.tempo-screen-modal .tempo-modal-tabbed-header .modal-title {
  grid-column: 1;
  flex: none;
}

.tempo-screen-modal .tempo-modal-view-selector {
  grid-column: 2;
  width: auto;
  justify-self: center;
  flex: 0 0 auto;
}

.tempo-screen-modal .tempo-modal-tabbed-header > div:last-child {
  grid-column: 3;
  width: auto;
  margin-left: 0;
  justify-self: end;
}

.tempo-screen-modal .tempo-modal-notebook-panel {
  min-height: 460px;
  padding-top: 0.15rem;
}

.tempo-screen-modal .tempo-modal-info {
  margin: 0 0 0.85rem;
  padding: 0.45rem 0.65rem;
  color: var(--cui-secondary-color);
  font-size: 0.875rem;
  line-height: 1.35;
  background: var(--cui-secondary-bg);
  border: 1px solid var(--cui-border-color);
  border-radius: 0.375rem;
}

.tempo-screen-modal .tempo-modal-close {
  --cui-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c7cdd3'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
  --cui-btn-close-filter: none;
  --cui-btn-close-opacity: 0.85;
  --cui-btn-close-hover-opacity: 1;
  --cui-btn-close-focus-shadow: var(--tempo-control-focus);
  border: 1px solid var(--cui-border-color);
  border-radius: 0.5rem;
  background-color: transparent;
  background-size: 1rem;
  opacity: 0.9;
}

.tempo-screen-modal .tempo-modal-close:hover,
.tempo-screen-modal .tempo-modal-close:focus-visible {
  border-color: var(--cui-secondary-color);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: var(--tempo-control-focus);
  opacity: 1;
}

.tempo-screen-modal .tempo-modal-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.tempo-screen-modal .tempo-modal-footer-start {
  grid-column: 1;
  justify-self: start;
}

.tempo-screen-modal .tempo-modal-footer-start .row {
  margin: 0;
}

.tempo-screen-modal .tempo-modal-footer-start .tempo-field {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.tempo-screen-modal .tempo-modal-form {
  background: var(--cui-body-bg);
}

.tempo-screen-modal .modal-footer {
  background: var(--cui-secondary-bg);
}

[data-coreui-theme="light"] .tempo-screen-modal .tempo-modal-close {
  --cui-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235d6873'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
}

/* Keep light-mode modal framing neutral and blue-aligned while leaving the
 * form canvas easy to scan. */
[data-coreui-theme="light"] .tempo-screen-modal .modal-content {
  border-color: rgba(var(--tempo-label-color-rgb), 0.24);
  box-shadow: 0 1.4rem 3.5rem rgba(33, 53, 62, 0.2);
}

[data-coreui-theme="light"] .tempo-screen-modal .modal-header {
  background: linear-gradient(110deg, #fbfdff 0%, #f2f8fb 100%);
  border-bottom-color: rgba(var(--tempo-label-color-rgb), 0.2);
}

[data-coreui-theme="light"] .tempo-screen-modal .modal-title {
  color: var(--srm-darkblue);
}

[data-coreui-theme="light"] .tempo-screen-modal .tempo-modal-close {
  border-color: rgba(var(--tempo-label-color-rgb), 0.26);
  background-color: rgba(255, 255, 255, 0.74);
}

[data-coreui-theme="light"] .tempo-screen-modal .tempo-modal-close:hover,
[data-coreui-theme="light"]
  .tempo-screen-modal
  .tempo-modal-close:focus-visible {
  border-color: var(--srm-blue);
  background-color: #fff;
}

[data-coreui-theme="light"] .tempo-screen-modal .modal-footer {
  background: linear-gradient(90deg, #f8fbfc 0%, #edf5f8 100%);
  border-top-color: rgba(var(--tempo-label-color-rgb), 0.18);
}

.tempo-screen-modal .tempo-modal-delete {
  grid-column: 3;
  justify-self: end;
}

.tempo-screen-modal .tempo-modal-status {
  grid-column: 2;
  margin: 0;
  text-align: center;
}

.tempo-screen-modal .card {
  box-shadow: none;
}

.tempo-screen-modal .card-header {
  color: var(--cui-body-color);
  background: var(--cui-tertiary-bg);
  border-bottom-color: var(--cui-border-color);
}

.tempo-screen-modal .subsection {
  padding: 0.75rem;
  background: var(--tempo-surface-muted);
  border: 1px solid var(--cui-border-color);
  border-radius: 0.55rem;
}

.tempo-modal-form {
  padding: clamp(1rem, 1.75vw, 1.5rem);
}

.tempo-modal-form > .row + .row {
  margin-top: 0.2rem;
}

.tempo-form-section-minimal {
  border-top: 1px solid var(--tempo-surface-border);
}

.tempo-form-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0 0.6rem;
  color: var(--cui-body-color);
}

.tempo-form-section-header > div {
  font-family: srm-bold;
}

.tempo-form-section-header i {
  color: var(--cui-secondary-color);
}

.tempo-form-section-body {
  padding: 0.1rem 0 0;
}

[data-coreui-theme="dark"] .tempo-table-shell .table {
  --cui-table-bg: var(--cui-body-bg);
  --cui-table-striped-bg: #28292a;
  --cui-table-hover-bg: #303132;
  --cui-table-active-bg: #38393a;
  --cui-table-border-color: rgba(255, 255, 255, 0.12);
}

[data-coreui-theme="dark"] .tempo-table-shell .table > :not(caption) > * > * {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-coreui-theme="dark"] .tempo-table-shell .table thead th {
  color: rgba(255, 255, 255, 0.68);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 991.98px) {
  .tempo-calendar-page .tempo-calendar-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .tempo-calendar-page :is(.tempo-calendar-shell, .tempo-calendar-details) {
    height: auto;
  }

  .tempo-calendar-page .tempo-calendar-stage {
    min-height: auto;
  }

  .tempo-search-footer,
  #search_buttons.tempo-search-footer {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tempo-search-status {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .tempo-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .tempo-calendar-page .tempo-calendar-layout {
    margin-right: 0;
    margin-left: 0;
  }

  .tempo-calendar-page .tempo-calendar-heading {
    display: block;
  }

  .tempo-calendar-page :is(.tempo-calendar-hint, .tempo-calendar-filter-label) {
    margin-top: 0.55rem;
    text-align: left;
  }

  .tempo-calendar-page .fc .fc-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
  }

  .tempo-fact-grid,
  .tempo-reading-grid,
  .tempo-summary-grid,
  .tempo-related-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tempo-panel-heading {
    display: block;
  }

  .tempo-tab-list .btn {
    flex: 1 1 auto;
  }

  #search_form.tempo-search-form {
    padding: 0.6rem 0 0.35rem;
  }

  .tempo-search-form #search_fields > div > .row {
    --cui-gutter-x: 0;
  }

  .tempo-search-footer,
  #search_buttons.tempo-search-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.35rem 0 0.3rem;
  }

  .tempo-search-actions,
  .tempo-table-tools,
  .tempo-workspace-actions {
    justify-content: flex-start;
  }

  .tempo-result-commands {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .tempo-search-status {
    grid-column: auto;
    grid-row: auto;
    text-align: left;
  }

  .tempo-table-shell {
    margin: 0.45rem 0 0;
  }

  .tempo-workspace-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 575.98px) {
  .tempo-mobile-only-filter-control {
    display: inline-flex !important;
  }

  .tempo-search-filter-summary {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin: 0 0 0.25rem;
    overflow-x: auto;
    color: var(--cui-secondary-color);
    font-size: 0.72rem;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .tempo-search-filter-summary::-webkit-scrollbar {
    display: none;
  }
  .tempo-search-filter-summary-label {
    flex: 0 0 auto;
    font-family: srm-normal;
  }
  .tempo-search-filter-token {
    flex: 0 0 auto;
    max-width: min(21rem, 78vw);
    padding: 0.18rem 0.45rem;
    overflow: hidden;
    background: var(--cui-tertiary-bg);
    border: 1px solid var(--tempo-surface-border);
    border-radius: 999px;
    text-overflow: ellipsis;
  }
  .tempo-mobile-filter-fields {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--tempo-surface-border);
  }
  .tempo-mobile-filter-fields:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .tempo-search-footer,
  #search_buttons.tempo-search-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
  }

  .tempo-screen .tempo-search-actions {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
  }

  .tempo-screen .tempo-search-actions .btn {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: auto;
    max-width: none;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  /* Keep icon-only Back compact beside the primary search commands. */
  .tempo-screen .tempo-search-actions .tempo-action-back {
    flex: 0 0 auto;
  }

  .tempo-screen .tempo-search-status {
    grid-column: 1 / -1;
    grid-row: auto;
    align-self: center;
    text-align: left;
  }
  .tempo-screen .tempo-result-commands {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .tempo-chart-shell {
    min-height: 300px;
    margin-top: 0.75rem;
  }

  .tempo-chart {
    min-height: 280px;
  }

  .tempo-panel {
    padding: 0.85rem;
  }

  .tempo-search-actions,
  .tempo-workspace-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .tempo-search-actions .btn,
  .tempo-workspace-actions .btn {
    width: 100%;
    max-width: 100%;
  }

  /* Keeps CoreUI grid tools compact on phone widths. */
  .tempo-table-tools {
    width: 100%;
    gap: 0.35rem;
  }

  .tempo-table-tools > .columns,
  .tempo-table-tools > .search {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    margin: 0 !important;
  }

  .tempo-table-tools .search .input-group {
    width: min(12rem, 100%);
  }

  .tempo-screen-modal .tempo-modal-delete {
    width: auto;
  }

  /* Keep the screen-editor title and its primary actions on one balanced row. */
  .tempo-screen-modal .modal-header {
    flex-wrap: nowrap;
    align-items: center;
  }

  .tempo-screen-modal .modal-header > div {
    width: auto;
    margin-left: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .tempo-screen-modal .modal-title {
    flex: 1 1 auto;
  }

  .tempo-screen-modal .modal-header {
    padding-inline: 0.8rem;
  }

  .tempo-screen-modal .modal-header.tempo-modal-tabbed-header {
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
  }

  .tempo-screen-modal .tempo-modal-tabbed-header .modal-title {
    grid-column: 1 / -1;
  }

  .tempo-screen-modal .tempo-modal-view-selector {
    grid-column: 1;
    justify-self: start;
    margin-left: 0;
  }

  .tempo-screen-modal .tempo-modal-tabbed-header > div:last-child {
    grid-column: 2;
  }

  .tempo-screen-modal .tempo-modal-view-selector .bi {
    display: none;
  }

  .tempo-screen-modal .tempo-modal-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
  }

  .tempo-screen-modal .tempo-modal-delete {
    grid-column: 2;
  }

  .tempo-screen-modal .tempo-modal-status {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow-wrap: anywhere;
  }
}

/* Metadata display fields: opt-in record summaries alongside normal form controls. */
.tempo-form-display {
  margin: 0;
  padding: 0.25rem 0 0.55rem;
  min-width: 0;
}
.tempo-form-display-label {
  color: var(--cui-secondary-color);
  font-family: srm-normal;
  font-weight: normal;
  font-size: 0.78rem;
  margin-bottom: 0.3rem;
}
.tempo-form-display-value {
  margin: 0;
  color: var(--cui-body-color);
  font-family: srm-bold;
  font-size: 1rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tempo-form-display-metric {
  padding: 0.8rem 0.9rem;
  background: var(--cui-tertiary-bg);
  border: 1px solid var(--cui-border-color);
  border-radius: 0.5rem;
  height: 100%;
}
.tempo-form-display-metric .tempo-form-display-value {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}
@media (max-width: 575.98px) {
  .tempo-form-display-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.8rem;
  }
  .tempo-form-display-metric .tempo-form-display-label {
    margin: 0;
  }
  .tempo-form-display-metric .tempo-form-display-value {
    text-align: right;
  }
}