/*
  Repair-CRM Tabler brand overrides & AdminLTE->Tabler compatibility layer.
  Load AFTER tabler.min.css (see CSS_COMMON in lang_master/common.ltf).
*/

/* ---------------------------------------------------------------------------
   1. Brand colors (#44BEB1) — Tabler components resolve colors at use-time
      through CSS variables, so overriding them here re-brands everything.
--------------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  --rcrm-brand: #44beb1;
  --tblr-primary: #44beb1;
  --tblr-primary-rgb: 68, 190, 177;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-darken: #38a196;
  --tblr-primary-lt: #ecf9f7;
  --tblr-primary-lt-rgb: 236, 249, 247;
  --tblr-primary-text-emphasis: #1b4c47;
  --tblr-primary-bg-subtle: #e3f7f5;
  --tblr-primary-border-subtle: #b0e7e1;
  --tblr-link-color: #38a196;
  --tblr-link-color-rgb: 56, 161, 150;
  --tblr-link-hover-color: #2d857c;
  --tblr-link-hover-color-rgb: 45, 133, 124;
  --rcrm-sidebar-w: 15rem;
  --rcrm-topbar-h: 3.5rem;
  --rcrm-toolbar-control-h: 2rem;
}

[data-bs-theme=dark] {
  --rcrm-brand: #44beb1;
  --tblr-primary: #44beb1;
  --tblr-primary-rgb: 68, 190, 177;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-darken: #38a196;
  --tblr-primary-lt: #10302c;
  --tblr-primary-lt-rgb: 16, 48, 44;
  --tblr-primary-text-emphasis: #8fd9d1;
  --tblr-primary-bg-subtle: #10302c;
  --tblr-primary-border-subtle: #226058;
  --tblr-link-color: #6fcdc3;
  --tblr-link-color-rgb: 111, 205, 195;
  --tblr-link-hover-color: #8fd9d1;
  --tblr-link-hover-color-rgb: 143, 217, 209;
}

/* ---------------------------------------------------------------------------
   2. Top navbar (light surface; red in SYS_ADMIN_MODE / admin portal)
--------------------------------------------------------------------------- */
.navbar-rcrm {
  background: var(--tblr-bg-surface) !important;
  display: flex;
  align-items: center !important;
  min-height: var(--rcrm-topbar-h);
  height: var(--rcrm-topbar-h);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.navbar-rcrm > .container-fluid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center !important;
  gap: 0.5rem;
  height: 100%;
  min-height: var(--rcrm-topbar-h);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.rcrm-navbar-toolbar {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  align-self: center;
  gap: 0.5rem;
}
.rcrm-navbar-toolbar .btn-action,
.rcrm-navbar-search .input-group {
  height: var(--rcrm-toolbar-control-h);
  flex-shrink: 0;
}
.rcrm-navbar-toolbar .btn-action {
  align-items: center;
  justify-content: center;
  min-width: var(--rcrm-toolbar-control-h);
  padding: 0;
}
.rcrm-navbar-search {
  margin: 0;
  min-width: 12rem;
}
.rcrm-navbar-search .input-group {
  align-items: stretch;
}
.rcrm-navbar-search .form-control,
.rcrm-navbar-search .btn {
  height: var(--rcrm-toolbar-control-h);
  min-height: var(--rcrm-toolbar-control-h);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  box-sizing: border-box;
}
.rcrm-navbar-search .form-control {
  line-height: 1.25;
}
.navbar-rcrm .nav-link {
  color: var(--tblr-body-color);
}
.navbar-rcrm > .container-fluid > .navbar-nav {
  align-items: center;
}
/* Admin portal navbar stays red */
.navbar-rcrm.navbar-rcrm-danger,
body.rcrm-admin-mode .navbar-rcrm {
  background: var(--tblr-red, #d63939) !important;
  border-bottom: 0;
}
body.rcrm-admin-mode .navbar-rcrm .nav-link,
.navbar-rcrm.navbar-rcrm-danger .nav-link,
.navbar-rcrm.navbar-rcrm-danger .navbar-brand {
  color: #fff;
}
body.rcrm-admin-mode .rcrm-sidebar-brand .navbar-brand-image {
  background: var(--tblr-red, #d63939);
}

/* Sidebar brand: no underline; the white logo sits on a brand-colored chip */
.rcrm-sidebar-brand {
  text-decoration: none;
}
.rcrm-sidebar-brand:hover {
  text-decoration: none;
}
.rcrm-sidebar-brand .navbar-brand-image {
  background: var(--rcrm-brand);
  border-radius: 50%;
  padding: 2px;
  height: 2rem;
  width: 2rem;
}

/* Required-field marker (was inline <style> in CSS_COMMON) */
:required {
  background: url(/static/dist/img/ast.png) no-repeat;
  background-position: right top;
  background-size: 8px;
}

/* Brand background page (first_login) */
.rcrm-brand-bg {
  background-color: var(--rcrm-brand);
}

/* ---------------------------------------------------------------------------
   3. Layout glue for the server-side template order.
      The server concatenates: header -> navbar (top) -> sidebar (vertical)
      -> page content (.page-wrapper) -> footer. Tabler expects sidebar first;
      margin-based offsets left a visible gap between the fixed sidebar and the
      main column. Use a 2-column grid on desktop so the header + content share
      one flush edge with the sidebar.
--------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .page:has(> .navbar-vertical.navbar-expand-lg) {
    display: grid;
    grid-template-columns: var(--rcrm-sidebar-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
  }

  .page:has(> .navbar-vertical.navbar-expand-lg) > .navbar-vertical.navbar-expand-lg {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    width: auto !important;
    margin: 0 !important;
    z-index: 1030;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    box-shadow: none;
    border-right: var(--tblr-border-width) solid var(--tblr-border-color);
  }

  .page:has(> .navbar-vertical.navbar-expand-lg) > .navbar-rcrm {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--rcrm-topbar-h);
    min-height: var(--rcrm-topbar-h);
    max-height: var(--rcrm-topbar-h);
    border-left: 0;
  }

  .page:has(> .navbar-vertical.navbar-expand-lg) > .navbar-rcrm > .container-fluid {
    height: 100%;
    min-height: 0;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline-start: 0.75rem;
  }

  .page:has(> .navbar-vertical.navbar-expand-lg) > .page-wrapper {
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    margin-inline-start: 0 !important;
  }

  .page:has(> .navbar-vertical.navbar-expand-lg) > .footer {
    grid-column: 2;
    grid-row: 3;
    margin: 0 !important;
    margin-inline-start: 0 !important;
  }

  /* Tabler sibling margins are redundant once grid placement is active */
  .page:has(> .navbar-vertical.navbar-expand-lg) > .navbar-vertical.navbar-expand-lg ~ .navbar,
  .page:has(> .navbar-vertical.navbar-expand-lg) > .navbar-vertical.navbar-expand-lg ~ .page-wrapper {
    margin-inline-start: 0 !important;
  }

  /* Sidebar brand row: same height as top navbar, shared bottom edge */
  .page:has(> .navbar-vertical.navbar-expand-lg) .navbar-vertical > .container-fluid {
    padding: 0;
  }
  .page:has(> .navbar-vertical.navbar-expand-lg) .navbar-vertical .navbar-toggler {
    display: none;
  }
  .page:has(> .navbar-vertical.navbar-expand-lg) .rcrm-sidebar-brand {
    height: var(--rcrm-topbar-h);
    min-height: var(--rcrm-topbar-h);
    max-height: var(--rcrm-topbar-h);
    display: flex;
    align-items: center;
    padding-inline: 1rem;
    margin: 0;
    border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
    width: 100%;
    box-sizing: border-box;
  }

  /* Desktop sidebar hide toggle (pushmenu replacement) */
  .page.rcrm-sidebar-hidden:has(> .navbar-vertical.navbar-expand-lg) {
    grid-template-columns: minmax(0, 1fr);
  }
  .page.rcrm-sidebar-hidden:has(> .navbar-vertical.navbar-expand-lg) > .navbar-vertical.navbar-expand-lg {
    display: none;
  }
  .page.rcrm-sidebar-hidden:has(> .navbar-vertical.navbar-expand-lg) > .navbar-rcrm,
  .page.rcrm-sidebar-hidden:has(> .navbar-vertical.navbar-expand-lg) > .page-wrapper,
  .page.rcrm-sidebar-hidden:has(> .navbar-vertical.navbar-expand-lg) > .footer {
    grid-column: 1;
    width: 100%;
    max-width: none;
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
  }
}

/* Tabler reserves a permanent scrollbar gutter on <html> (scrollbar-gutter: stable)
   and falls back to overflow-y: scroll — both can show a track even when the page
   does not scroll. Only show scrollbars when content actually overflows. */
html {
  scrollbar-gutter: auto;
  overflow-y: auto;
}

/* Prevent incidental horizontal scrolling from wide tables, negative margins, etc.
   Use clip (not hidden) on .page so position:sticky toolbars keep working. */
html,
body {
  overflow-x: hidden;
}
.page {
  overflow-x: clip;
}

/* Fill the viewport; grid layout (above) handles sidebar pages on desktop. */
.page:not(:has(> .navbar-vertical.navbar-expand-lg)) {
  min-height: 100vh;
}
.page:not(:has(> .navbar-vertical.navbar-expand-lg)) > .page-wrapper {
  flex: 1 1 auto;
  min-height: 0;
}

/* Fixed-top navbar layouts (customer portal): offset the content below it */
.page > .navbar.fixed-top ~ .page-wrapper {
  padding-top: 3.5rem;
}

/* FontAwesome icons inside Tabler vertical nav */
.navbar-vertical .nav-link-icon {
  width: 1.25rem;
  text-align: center;
}

/* Tabler absolutely positions .nav-link .badge as a notification dot on the
   icon's corner, which pushed the sidebar counters (Jobs, Job requests) half
   outside the 15rem navbar where they got clipped. Keep them in the flex flow
   at the right edge of the menu item instead. */
.navbar.navbar-vertical .navbar-nav .nav-link .badge {
  position: static;
  transform: none;
  margin-left: auto;
}

/* AdminLTE-style active menu highlight: the server marks the current page's
   sidebar item with .active (ACTIVE_MENU tag), Tabler only recolors the text. */
.navbar.navbar-vertical .navbar-nav .nav-link.active,
.navbar.navbar-vertical .navbar-nav .nav-link.active:hover {
  background-color: var(--tblr-primary);
  color: #fff;
  border-radius: var(--tblr-border-radius);
}
.navbar.navbar-vertical .navbar-nav .nav-link.active .nav-link-icon,
.navbar.navbar-vertical .navbar-nav .nav-link.active .nav-link-title {
  color: #fff;
}

/* AdminLTE .btn-default -> light surface button (daterange pickers, filter dropdowns) */
.btn-default {
  --bs-btn-color: var(--tblr-body-color);
  --bs-btn-bg: var(--tblr-bg-surface);
  --bs-btn-border-color: var(--tblr-border-color);
  --bs-btn-hover-color: var(--tblr-body-color);
  --bs-btn-hover-bg: var(--tblr-bg-surface-secondary);
  --bs-btn-hover-border-color: var(--tblr-border-color);
  --bs-btn-active-color: var(--tblr-body-color);
  --bs-btn-active-bg: var(--tblr-bg-surface-secondary);
  --bs-btn-active-border-color: var(--tblr-border-color);
  color: var(--tblr-body-color);
  background-color: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
}

/* Jobs list filter dropdown status icons (same material-icons as the Tech column) */
.jobs-filter-status-icon {
  font-size: 1.125rem;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   4. Bootstrap 4 / AdminLTE compatibility shims
--------------------------------------------------------------------------- */

/* BS4 .form-group (removed in BS5). :where() keeps specificity at zero so
   utility classes (mb-0 etc.) still win. */
:where(.form-group) {
  margin-bottom: 1rem;
}

/* THE big form-layout regression: Tabler ships ".form-control[size]{width:auto}"
   (it honors the size attribute), but our BS4-era templates carry legacy
   size="100"/"700"/"1000" attributes on nearly every field - under BS4 the
   form-control width:100% always won. With width:auto those inputs take their
   intrinsic width (size=1000 is ~6500px!), blow the rows apart and push a
   horizontal scrollbar onto every edit form. Restore the BS4 behavior. */
.form-control[size] {
  width: 100%;
}

/* BS4 grid compat: in BS4 a .row child without a col-* class kept its natural
   width; BS5 forces width:100% on every .row child. The templates' filter
   rows, tab bars and button groups were written for the BS4 behavior.
   Deliberately scoped to inline-ish children only - block sections without a
   col class must keep the BS5 full width (e.g. #asset_location). */
.row > :where(.col-ss, .btn-group, .btn, .nav-item, .dropdown, .dropup,
  .me-1, .me-2, .me-3, .ms-1, .ms-2, .ms-3) {
  flex: 0 1 auto;
  width: auto;
}

/* The edit-form modals were designed for the Bootstrap 4 geometry: modal-lg
   was 800px wide with 1rem body padding. Tabler narrows both (720px width,
   1.5rem padding = 96px less usable form width), which crammed the
   multi-column form rows - restore the original proportions. */
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    --tblr-modal-width: 800px;
  }
}
/* keep the BS4 modal-xl width on wide screens (Tabler's own 1200px rule is
   otherwise overridden by the 992px block above, since this file loads last) */
@media (min-width: 1200px) {
  .modal-xl {
    --tblr-modal-width: 1140px;
  }
}
.modal-content {
  --tblr-modal-padding: 1rem;
}

/* BS4 data-toggle="buttons" toggle groups: BS5 dropped the plugin AND the CSS
   that hid the real radio/checkbox inputs inside the label buttons. The
   .active state is kept by the shim in repaircrm.js; hide the inputs here. */
.btn-group-toggle .btn input[type="radio"],
.btn-group-toggle .btn input[type="checkbox"],
[data-bs-toggle="buttons"] .btn input[type="radio"],
[data-bs-toggle="buttons"] .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

/* Places (New) autocomplete widget (<gmp-place-autocomplete>) brings its own
   Material-style input chrome (heavy dark border). Restyle the host to match
   the small Tabler form-control next to it and theme its internals through
   the documented --gmp-mat-* custom properties. */
gmp-place-autocomplete {
  --gmp-mat-color-surface: var(--tblr-bg-forms);
  --gmp-mat-color-on-surface: var(--tblr-body-color);
  --gmp-mat-color-on-surface-variant: var(--tblr-secondary);
  --gmp-mat-color-primary: var(--tblr-primary);
  --gmp-mat-font-family: var(--tblr-font-sans-serif);
  color-scheme: light;
  /* The widget host ships with border:1px solid black and ~50px height;
     match the small Tabler form-control it sits between. */
  border: var(--tblr-border-width) solid var(--tblr-border-color) !important;
  border-radius: var(--tblr-border-radius) !important;
  background: var(--tblr-bg-forms);
  height: 2rem;
  min-height: 0;
}
[data-bs-theme=dark] gmp-place-autocomplete {
  color-scheme: dark;
}

/* Linked result cards (global search) are stacked block elements; kill the
   BS5 ".card-link + .card-link" inline spacing that would indent them. */
.card.card-link + .card.card-link {
  margin-left: 0;
}

/* bootstrap5-tags filter widgets (clients/jobs lists): the generated
   .form-control.dropdown container has no intrinsic width, so the whole
   Tags input-group collapsed in the flex filter row - keep it usable. */
.input-group > .form-control.dropdown {
  min-width: 14rem;
}

/* Fallback height for the raw <select multiple> tags control. When the
   bootstrap5-tags script runs it collapses the native select to height:1px
   (inline style, so this non-!important rule never touches the working case)
   and shows its own input. If that script fails to load (e.g. the jsDelivr
   CDN is blocked), the native multi-select would otherwise render as a ~90px
   tall list box - cap it so it still looks like a normal field. */
select.client-tags[multiple],
select.form-select.client-tags[multiple] {
  height: calc(1.5em + 0.75rem + 2px);
}

/* Keep native multiple selects at the final Tom Select control height until
   Tom Select initializes them, preventing the multi-row list from flashing. */
select.tom-select[multiple]:not(.tomselected) {
  height: 2.5rem;
  min-height: 2.5rem;
  overflow: hidden;
}
select.tom-select.form-select-sm[multiple]:not(.tomselected) {
  height: 2rem;
  min-height: 2rem;
}

/* Tom Select's Bootstrap 5 theme expects --bs-body-bg, while Tabler exposes
   form surfaces through --tblr-bg-forms. Define the compatibility variable
   only on Tom Select wrappers so every control remains opaque in either theme. */
.ts-wrapper {
  --bs-body-bg: var(--tblr-bg-forms, #fff);
}

.ts-wrapper.form-select,
.ts-wrapper.form-control {
  background-color: var(--tblr-bg-forms, #fff);
}

/* Tom Select's Bootstrap 5 theme removes the bottom padding from small,
   populated controls, which shifts single-value text off center. Keep the
   vertical padding balanced for every small single-value Tom Select. */
.input-group-sm > .ts-wrapper.single.has-items .ts-control,
.ts-wrapper.form-control-sm.single.has-items .ts-control,
.ts-wrapper.form-select-sm.single.has-items .ts-control {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Keep the selected item and Tom Select's focused search input on one line.
   The theme gives that input a 7rem minimum width, so selecting an item can
   otherwise wrap it below the value until the control loses focus. */
.ts-wrapper.single .ts-control {
  flex-wrap: nowrap;
}
.ts-wrapper.single .ts-control > input {
  min-width: 0 !important;
}

/* select2 dropdown must render above BS5 modals (modal z-index is 1055) */
.select2-container--open .select2-dropdown,
.select2-container .select2-dropdown {
  z-index: 1060;
}

/* BS4 .input-group-prepend/-append wrappers: make children behave as direct
   input-group items. */
.input-group-prepend,
.input-group-append {
  display: contents;
}

/* AdminLTE card/modal loading overlay (used by repaircrm.js getModal/showModal) */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border-radius: inherit;
}
[data-bs-theme=dark] .overlay {
  background: rgba(24, 36, 52, 0.7);
}

/* Sidebar submenu opened by the server via the legacy "menu-open" tag value */
.navbar-vertical .collapse.menu-open:not(.show) {
  display: block;
}

/* Collapsed card state driven by [data-card-widget="collapse"] shim */
.card.rcrm-card-collapsed > .card-body,
.card.rcrm-card-collapsed > .card-footer,
.card.collapsed-card > .card-body,
.card.collapsed-card > .card-footer {
  display: none;
}

/* AdminLTE .btn-tool equivalent inside card headers */
.card-header .btn-tool {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  background: transparent;
  color: var(--tblr-secondary);
  border: 0;
}

/* Legacy safety net for not-yet-polished pages (admin/, rare templates).
   Migrated pages use .page-wrapper/.page-header/.page-body instead. */
.content-wrapper {
  flex: 1 1 auto;
  padding-bottom: 1rem;
}
.content-header {
  padding: 1rem 0 0.5rem;
}
.content-header h1 {
  font-size: 1.5rem;
  margin: 0;
}

/* Sticky action toolbars (job, client, part, list card headers, …) */
.sticky-div {
  position: sticky;
  top: var(--rcrm-topbar-h);
  z-index: 3;
  width: 100%;
  background-color: var(--tblr-bg-surface);
}

/* List/settings card-header toolbars: me-1 gap between New / Edit / Delete / … */
.card-header > .btn:not(.btn-link),
.card-header > a.btn,
.card-header > .btn-group,
.card-header > span > .btn:not(.btn-link),
.card-header > span > a.btn,
.card-header .d-flex > :is(.btn, a.btn):not(.btn-link),
.card-header .d-flex > * > :is(.btn, a.btn):not(.btn-link) {
  margin-inline-end: 0.25rem;
}

/* Jobs toolbar: prominent New (default btn), uniform btn-sm for the rest, single row */
.jobs-toolbar {
  scrollbar-width: thin;
}
.jobs-toolbar > * {
  flex-shrink: 0;
}
.jobs-toolbar .btn-sm {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
}
/* Compact page headers (list + detail pages): uniform vertical rhythm */
.rcrm-list-page {
  --rcrm-list-page-gap: 0.5rem;
}
.rcrm-list-page .page-header.rcrm-page-header-compact {
  margin: var(--rcrm-list-page-gap) 0 0 !important;
  padding: 0;
  min-height: 0;
}
.rcrm-list-page .page-header.rcrm-page-header-compact .container-fluid {
  padding-top: 0;
  padding-bottom: 0;
}
.rcrm-list-page .page-header.rcrm-page-header-compact + .page-body {
  margin-top: var(--rcrm-list-page-gap) !important;
  margin-bottom: var(--rcrm-list-page-gap) !important;
  padding-top: 0;
}
.rcrm-list-page .page-body > .row {
  margin-top: 0;
}

/* List filter row: match btn-sm and input-group-sm heights (clients, parts, …) */
.rcrm-list-filters {
  --rcrm-filter-control-h: calc(1.5em + 0.5rem + 2px);
}
.rcrm-list-filters .dropdown > .btn {
  display: inline-flex;
  align-items: center;
  height: var(--rcrm-filter-control-h);
  min-height: var(--rcrm-filter-control-h);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  line-height: 1.5;
  box-sizing: border-box;
}
.rcrm-list-filters .input-group {
  align-items: stretch;
  height: var(--rcrm-filter-control-h);
}
.rcrm-list-filters .input-group > .input-group-text {
  display: flex;
  align-items: center;
  height: var(--rcrm-filter-control-h);
  min-height: var(--rcrm-filter-control-h);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  line-height: 1.5;
  box-sizing: border-box;
}
.rcrm-list-filters .input-group > .form-control,
.rcrm-list-filters .input-group > .form-control.dropdown {
  height: var(--rcrm-filter-control-h);
  min-height: var(--rcrm-filter-control-h);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  line-height: 1.5;
  box-sizing: border-box;
}
#clientTags .input-group {
  height: var(--rcrm-filter-control-h) !important;
}
#clientTags .input-group > .input-group-text {
  height: var(--rcrm-filter-control-h) !important;
  min-height: var(--rcrm-filter-control-h) !important;
}
#clientTags .input-group > .form-control,
#clientTags .input-group > .form-control.dropdown {
  height: var(--rcrm-filter-control-h);
  min-height: var(--rcrm-filter-control-h) !important;
}

.rcrm-page-header-compact h2 {
  font-size: 1.25rem;
  line-height: 1.5;
}
.rcrm-page-header-compact .breadcrumb {
  font-size: 0.8125rem;
}

.page-header h1 {
  font-size: 1.5rem;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   5. AdminLTE components still used by a few templates (callout, timeline)
--------------------------------------------------------------------------- */
.callout {
  border-radius: var(--tblr-border-radius);
  background-color: var(--tblr-bg-surface);
  border-left: 5px solid var(--tblr-border-color);
  box-shadow: var(--tblr-shadow-card, 0 1px 2px rgba(0,0,0,.05));
  margin-bottom: 1rem;
  padding: 1rem;
}
.callout.callout-primary { border-left-color: var(--tblr-primary); }
.callout.callout-info    { border-left-color: var(--tblr-info, #4299e1); }
.callout.callout-warning { border-left-color: var(--tblr-warning, #f76707); }
.callout.callout-danger  { border-left-color: var(--tblr-danger, #d63939); }
.callout.callout-success { border-left-color: var(--tblr-success, #2fb344); }

.timeline {
  margin: 0 0 45px;
  padding: 0;
  position: relative;
}
.timeline::before {
  background-color: var(--tblr-border-color);
  border-radius: 0.25rem;
  bottom: 0;
  content: "";
  left: 31px;
  margin: 0;
  position: absolute;
  top: 0;
  width: 4px;
}
.timeline > div {
  margin-bottom: 15px;
  margin-right: 10px;
  position: relative;
}
.timeline > div > .timeline-item {
  background-color: var(--tblr-bg-surface);
  border-radius: var(--tblr-border-radius);
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  color: var(--tblr-body-color);
  margin-left: 60px;
  margin-right: 15px;
  margin-top: 0;
  padding: 0;
  position: relative;
}
.timeline > div > .timeline-item > .time {
  color: var(--tblr-secondary);
  float: right;
  font-size: 12px;
  padding: 10px;
}
.timeline > div > .timeline-item > .timeline-header {
  border-bottom: 1px solid var(--tblr-border-color);
  color: var(--tblr-body-color);
  font-size: 16px;
  line-height: 1.1;
  margin: 0;
  padding: 10px;
}
.timeline > div > .timeline-item > .timeline-body,
.timeline > div > .timeline-item > .timeline-footer {
  padding: 10px;
}
.timeline > div > .fas,
.timeline > div > .far,
.timeline > div > .fab,
.timeline > div > .fa {
  background-color: var(--tblr-secondary);
  border-radius: 50%;
  font-size: 15px;
  height: 30px;
  left: 18px;
  line-height: 30px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 30px;
  color: #fff;
}
.timeline > .time-label > span {
  background-color: var(--tblr-bg-surface);
  border-radius: 4px;
  display: inline-block;
  font-weight: 600;
  padding: 5px 10px;
}

/* Compact vertical history timeline used by client, asset, job and stock histories. */
.rcrm-history-timeline {
  --rcrm-history-axis: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0.25rem 0 0.25rem 3rem;
  position: relative;
}
.rcrm-history-timeline::before {
  background: var(--tblr-border-color);
  bottom: 0.75rem;
  content: "";
  left: var(--rcrm-history-axis);
  position: absolute;
  top: 0.75rem;
  width: 2px;
}
.rcrm-history-period {
  align-items: center;
  display: flex;
  margin: 0.125rem 0 0.125rem -2.375rem;
  min-height: 1.5rem;
  position: relative;
  z-index: 1;
}
.rcrm-history-period::before {
  background: var(--tblr-primary);
  border: 3px solid var(--tblr-bg-surface, var(--tblr-body-bg));
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--tblr-border-color);
  content: "";
  flex: 0 0 auto;
  height: 0.75rem;
  margin-right: 0.625rem;
  width: 0.75rem;
}
.rcrm-history-period > span {
  background: var(--tblr-secondary-bg);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-pill);
  color: var(--tblr-secondary-color);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.25rem 0.625rem;
}
.rcrm-history-entry {
  min-width: 0;
  position: relative;
}
.rcrm-history-marker {
  align-items: center;
  background: var(--tblr-secondary);
  border: 3px solid var(--tblr-bg-surface, var(--tblr-body-bg));
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--tblr-border-color);
  color: #fff;
  display: flex;
  height: 2rem;
  justify-content: center;
  left: -3rem;
  position: absolute;
  top: 0.5rem;
  width: 2rem;
  z-index: 1;
}
.rcrm-history-marker > .material-icons {
  font-size: 1rem;
  line-height: 1;
}
.rcrm-history-card {
  background: var(--tblr-bg-surface, var(--tblr-body-bg));
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  box-shadow: var(--tblr-box-shadow-sm);
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rcrm-history-card:hover {
  border-color: rgba(var(--tblr-primary-rgb), 0.4);
  box-shadow: var(--tblr-box-shadow);
}
.rcrm-history-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
}
.rcrm-history-title {
  align-items: baseline;
  display: flex;
  flex: 1 1 16rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  font-weight: 600;
  gap: 0.25rem 0.5rem;
  min-width: 0;
}
.rcrm-history-title .badge {
  font-size: 0.6875rem;
  font-weight: 500;
}
.rcrm-history-meta {
  align-items: center;
  color: var(--tblr-secondary-color);
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 0.25rem 0.625rem;
  justify-content: flex-end;
  line-height: 1.25;
  margin-left: auto;
}
.rcrm-history-meta > span {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
  white-space: nowrap;
}
.rcrm-history-meta .material-icons {
  font-size: 1rem;
}
.rcrm-history-body {
  border-top: 1px solid var(--tblr-border-color);
  color: var(--tblr-secondary-color);
  font-size: 0.8125rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  padding: 0.5rem 0.75rem;
  white-space: pre-wrap;
}
.rcrm-history-body .rcrm-history-note + .rcrm-history-note {
  border-top: 1px dashed var(--tblr-border-color);
  margin-top: 0.375rem;
  padding-top: 0.375rem;
}
.rcrm-history-bottom {
  padding: 0.5rem 0 0.25rem 3rem;
  text-align: center;
}
@media (max-width: 575.98px) {
  .rcrm-history-timeline {
    --rcrm-history-axis: 0.75rem;
    padding-left: 2.25rem;
  }
  .rcrm-history-period {
    margin-left: -1.875rem;
  }
  .rcrm-history-marker {
    height: 1.5rem;
    left: -2.25rem;
    top: 0.625rem;
    width: 1.5rem;
  }
  .rcrm-history-marker > .material-icons {
    font-size: 0.8125rem;
  }
  .rcrm-history-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
  .rcrm-history-title {
    flex-basis: auto;
  }
  .rcrm-history-meta {
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* AdminLTE dropdown item title (contact/location pickers) */
.dropdown-item-title {
  font-size: 1rem;
  margin: 0;
}

/* AdminLTE info-box (dispatching/job side panels) re-styled with Tabler tokens */
.info-box {
  background-color: var(--tblr-bg-surface);
  border-radius: var(--tblr-border-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  margin-bottom: 1rem;
  min-height: 80px;
  padding: 0.5rem;
  position: relative;
}
.info-box .info-box-icon {
  align-items: center;
  border-radius: var(--tblr-border-radius);
  display: flex;
  flex-shrink: 0;
  font-size: 1.875rem;
  justify-content: center;
  text-align: center;
  width: 70px;
  color: #fff;
}
.info-box .info-box-icon.bg-info    { background-color: var(--tblr-info, #4299e1); }
.info-box .info-box-icon.bg-success { background-color: var(--tblr-success, #2fb344); }
.info-box .info-box-icon.bg-warning { background-color: var(--tblr-warning, #f76707); }
.info-box .info-box-icon.bg-danger  { background-color: var(--tblr-danger, #d63939); }
.info-box .info-box-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.8;
  flex: 1;
  padding: 0 0.5rem;
  overflow: hidden;
}
.info-box .info-box-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.info-box .info-box-number {
  display: block;
  font-weight: 600;
}

/* Job image manager */
.job-image-dropzone {
  align-items: center;
  background: var(--tblr-bg-surface-secondary, var(--tblr-tertiary-bg));
  border: 1px dashed var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  min-height: 5rem;
  padding: 1rem;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.job-image-dropzone:hover,
.job-image-dropzone:focus-visible,
.job-image-dropzone.is-dragging {
  background: rgba(var(--tblr-primary-rgb), 0.06);
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--tblr-primary-rgb), 0.12);
  outline: 0;
}
.job-image-dropzone-icon {
  align-items: center;
  background: rgba(var(--tblr-primary-rgb), 0.1);
  border-radius: 50%;
  color: var(--tblr-primary);
  display: flex;
  flex: 0 0 2.75rem;
  font-size: 1.25rem;
  height: 2.75rem;
  justify-content: center;
}
.job-image-dropzone-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.job-image-card {
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.job-image-card:hover {
  box-shadow: var(--tblr-box-shadow-md, 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08));
  transform: translateY(-1px);
}
.job-image-card.is-selected {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 0.15rem rgba(var(--tblr-primary-rgb), 0.14);
}
.job-image-card.is-uploading .job-image-preview img {
  filter: saturate(0.7);
  opacity: 0.75;
}
.job-image-media {
  aspect-ratio: 4 / 3;
  background: var(--tblr-tertiary-bg);
  overflow: hidden;
  position: relative;
}
.job-image-preview {
  background: transparent;
  border: 0;
  display: block;
  height: 100%;
  padding: 0;
  width: 100%;
}
.job-image-preview img,
.job-image-preview-img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.job-image-preview-img {
  max-height: 80vh;
}
.job-image-select {
  left: 0.65rem;
  margin: 0;
  position: absolute;
  top: 0.65rem;
  z-index: 2;
}
.job-image-status {
  align-items: center;
  background: rgba(17, 24, 39, 0.78);
  border-radius: var(--tblr-border-radius);
  color: #fff;
  display: flex;
  gap: 0.375rem;
  left: 50%;
  max-width: calc(100% - 1rem);
  padding: 0.4rem 0.6rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.job-image-status.is-error {
  background: rgba(var(--tblr-danger-rgb), 0.9);
}
.job-image-description {
  line-height: 2rem;
  min-width: 0;
}
@media (max-width: 575.98px) {
  .job-image-dropzone {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .job-image-dropzone .job-image-browse {
    margin-left: 3.5rem;
  }
}