/* =========================================================
   BASE.CSS
   Global utilities and small base app polish.

   Theme tokens live in:
   - 00-theme-tokens.css

   Shared surfaces live in:
   - app-surfaces.css

   Page/component visual cleanup lives in:
   - *-theme-cleanup.css
========================================================= */

/* =========================================================
   1. GLOBAL SCROLLBARS
========================================================= */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--app-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--app-scrollbar-thumb);
  border: 2px solid var(--app-scrollbar-track);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--app-scrollbar-thumb-hover);
}

.workorder-detail,
.workorder-sidebar,
.technician-picker {
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  scrollbar-width: thin;
}

/* =========================================================
   2. GLOBAL COMPONENT DEFAULTS
========================================================= */
.mobile-tabs,
.view-list-toggle {
  display: none;
}



body.theme-dark .btn-close {
  filter: invert(1);
  opacity: 0.85;
}

body.theme-dark input[type="date"],
body.theme-dark input[type="time"] {
  color-scheme: dark !important;
}

body.theme-dark input[type="date"]::-webkit-calendar-picker-indicator,
body.theme-dark input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

::placeholder {
  color: var(--app-placeholder) !important;
  opacity: 1;
}

/* =========================================================
   3. BOOTSTRAP UTILITY CONTRAST SAFETY
   Protects older Razor/JS markup that still uses utility classes.
========================================================= */
body.theme-dark .bg-white,
body.theme-dark .bg-light {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
}

body.theme-dark .text-dark,
body.theme-dark .text-body,
body.theme-dark .text-black {
  color: var(--app-text) !important;
}

body.theme-dark .border,
body.theme-dark .border-top,
body.theme-dark .border-end,
body.theme-dark .border-bottom,
body.theme-dark .border-start {
  border-color: var(--app-border) !important;
}

body:not(.theme-dark) .text-white.on-surface,
body:not(.theme-dark) .text-light.on-surface {
  color: var(--app-text) !important;
}

body:not(.theme-dark) .bg-dark.on-surface,
body:not(.theme-dark) .bg-black.on-surface {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
}

/* =========================================================
   4. LOGIN PAGE
========================================================= */
.login-shell {
  background: var(--app-page-gradient);
}

body.theme-dark .login-shell {
  background: var(--app-page-bg);
}

.login-page-logo {
  height: auto;
  margin-bottom: 2rem;
  max-width: 280px;
  object-fit: contain;
}

.technician-hours-input {
  min-width: 110px;
}

/* =========================================================
   6. JOB STATUS FINAL LAYOUT
========================================================= */
.workorder-job-status-row {
  align-items: flex-start !important;
}

.workorder-job-status-row > .col-md-2,
.workorder-job-status-row > .col-md-3,
.workorder-job-status-row > .col-md-4 {
  width: auto !important;
}

.workorder-job-status-row > .col-md-2 {
  flex: 0 0 170px !important;
  max-width: 170px !important;
}

.workorder-job-status-row > .col-md-3 {
  flex: 1 1 250px !important;
  max-width: none !important;
}

.workorder-job-status-row > .col-md-4 {
  flex: 1.4 1 420px !important;
  max-width: none !important;
}

.workorder-job-status-row .workorder-eta-group {
  margin-bottom: 0.4rem !important;
}

/* =========================================================
   7. SOURCE QUOTE LINK FIELD
========================================================= */
.source-quote-link {
  color: var(--app-primary) !important;
  cursor: pointer;
  text-decoration: none !important;
}

.source-quote-link:hover {
  color: var(--app-primary-hover) !important;
  text-decoration: underline !important;
}

/* =========================================================
   8. SOURCE QUOTE + ARRIVAL WINDOW ROW
========================================================= */
#sourceQuoteNumberGroup {
  flex: 0 0 32% !important;
  max-width: 32% !important;
}


@media (max-width: 767.98px) {
  #sourceQuoteNumberGroup {
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    max-width: 100% !important;
  }
}