/*
 * EasiFix staff UI: one type scale and one look for every staff page, taken from the Stats page.
 * Loaded last by layouts/app; every rule is scoped to body.ui so it outranks the older per-page <style> blocks
 * (they use single-class selectors) without editing each page.
 *
 *   Every dark bar (title bars, group and in-section headers)   16px regular, white on slate #4A535A, never bold
 *   Sub-headers, form labels       14-15px semibold / medium
 *   Tables and body text           14px regular
 *   Notes, counts, hints           13px grey (#88939C)
 *   Bold only where it carries meaning (totals, key numbers, headers)
 */

body.ui {
  --ui-ink: #262626;
  --ui-ink-2: #52514e;
  --ui-muted: #88939C;
  /* Bars and dark buttons: the slate of the list Edit buttons (owner's call; was near-black #262626) */
  --ui-bar: #4A535A;
  --ui-sub-bar: #eaecef;
  --ui-line: #E3E6E8;
  font-size: 14px;
  color: var(--ui-ink);
}

/* ---- Title bars: one colour, one size, the same as "Banking Information" (owner's call; were 12 / 15 / 20 /
   24px, black or grey) ---- */
body.ui .card-header-custom,
body.ui .card-header-custom.gray-700,
body.ui .card-header-custom.gray-900 {
  background-color: var(--ui-bar) !important;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  padding: .6rem 1.25rem;
  border-bottom: 0;
}
body.ui .card-header-custom label,
body.ui .card-header-custom .custom-deal-header {
  font-size: 15px;
}
/* Dropdowns and buttons inside a black bar (e.g. the Mechanic Info mechanic picker) are compact so they never
   make one bar taller than the others */
body.ui .card-header-custom .form-control,
body.ui .card-header-custom .custom-select {
  height: 28px;
  padding: 2px 8px;
  font-size: 14px;
}
body.ui .card-header-custom .btn:not(.btn-icon) {
  height: 28px !important;
  padding: 2px 12px !important;
  font-size: 13px;
  line-height: 22px;
}
/* Group headers inside a card body ("Customer / Vehicle" style) */
body.ui .card-body .card-header-custom {
  font-size: 16px;
  padding: .6rem 1.25rem;
}
/* Text on the black bars is never bold (owner's call): titles, group headers and their <strong> tags alike */
body.ui .card-header-custom strong,
body.ui .card-header-custom b {
  font-weight: 400;
}

/* ---- Sub-header bars (light grey) ---- */
body.ui .card-header-small-custom {
  background-color: var(--ui-sub-bar);
  color: var(--ui-ink);
  font-size: 15px;
  padding: .5rem 1rem;
}
body.ui .card-header-small-custom strong {
  font-weight: 600;
}

/* ---- Tabs ---- */
body.ui .nav-tabs .nav-link {
  font-size: 15px;
  padding: .55rem .95rem;
}

/* ---- Tables ---- */
body.ui .table {
  font-size: 14px;
  color: var(--ui-ink);
}
/* Headings follow the table's own size, so they are never bigger than the rows (some lists are set to 12px) */
body.ui .table th {
  font-size: inherit;
  font-weight: 600;
  color: var(--ui-ink);
  vertical-align: middle;
}
body.ui .table td {
  vertical-align: middle;
}
body.ui .table-sm td,
body.ui .table-sm th {
  padding: .4rem .5rem;
}

/* ---- Forms ---- */
body.ui .form-group > label,
body.ui .form-row > label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ui-ink-2);
  margin-bottom: .3rem;
}
body.ui .form-control,
body.ui .custom-select,
body.ui .input-group-text {
  font-size: 14px;
}
body.ui .custom-control-label {
  font-size: 14px;
}

/* ---- Buttons: text size only; colours, shapes and fixed widths stay as they are ---- */
body.ui .btn {
  font-size: 14px;
}
body.ui .btn-sm,
body.ui .btn-group-sm > .btn {
  font-size: 13px;
}

/* ---- Small print ---- */
body.ui small,
body.ui .small,
body.ui .text-muted {
  font-size: 13px;
}
body.ui .text-muted {
  color: var(--ui-muted) !important;
}

/* ---- Cards and modal titles ---- */
body.ui .card {
  border-color: var(--ui-line);
}
body.ui .modal-title,
body.ui .modal-header h5 {
  font-size: 17px;
  font-weight: 600;
}

/* ---- List table header rows (Pending / Approved / Archived Deals, Reports, Mechanics, Reps): black bar,
   white text, like the title bars (they were grey #717E89; batch 1 had turned their text dark) ---- */
body.ui thead tr.gray-700,
body.ui thead tr.gray-900,
body.ui thead tr.dark-background {
  background-color: var(--ui-bar) !important;
}
body.ui tr.text-white th,
body.ui tr.text-white td,
body.ui .text-white th {
  color: #fff;
}

/* ---- "Mechanic: … / Deal #…" in the title bars: centred in the (slimmer) bar, one line, 15px.
   It is absolutely positioned with an inline 16-18px size, so this needs !important. ---- */
body.ui .card-header-custom {
  position: relative;
}
body.ui .card-header-custom .custom-deal-header {
  top: .8rem !important;
  right: 1.5rem !important;
  margin-top: 0 !important;
  width: auto !important;
  font-size: 15px !important;
  white-space: nowrap;
}
body.ui .card-header-custom .custom-deal-header .row {
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin: 0;
}
body.ui .card-header-custom .custom-deal-header .row > div {
  flex: 0 0 auto;
  max-width: none;
  width: auto;
  padding: 0 0 0 1.25rem;
}

/* ---- Title-bar action buttons (Documents / Loan Files: complete, incomplete, upload, delete, email):
   a compact row in the middle of the bar (title and status on the left, Mechanic / Deal # on the right) ---- */
@media (min-width: 767px) {
  body.ui .card-header-custom .doc-buttons-style {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    right: auto;
    bottom: auto;
    padding-top: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
}
body.ui .card-header-custom .btn-icon {
  width: 34px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
body.ui .card-header-custom .btn-icon .btn-icon-style {
  font-size: 14px;
}
/* The status toggle in the bar: about the size of the action buttons, in line with the 15px status text */
body.ui .card-header-custom .custom-switch {
  transform: scale(.7);
  transform-origin: left center;
}

/* ---- In-section group headers (Mechanic tab "Banking Information", loan page sections): 16px semibold on the
   same black as the title bars (one of them was grey and 24px) ---- */
body.ui .section-header-inline,
body.ui .section-header {
  font-size: 16px !important;
  font-weight: 400 !important;
  background-color: var(--ui-bar) !important;
  color: #fff;
  padding: .6rem 1.25rem !important;
}

/* ---- Headings in any dark table header row: white and regular weight, like everything else on the black bars
   (light-header tables, e.g. Stats, keep semibold headings) ---- */
body.ui thead tr.text-white th,
body.ui thead tr.dark-background th,
body.ui thead tr.gray-700 th,
body.ui thead tr.gray-900 th {
  color: #fff !important;
  font-weight: 400;
}

/* ---- On/off switches in the title bars (SMS "Automatic texts"): sized to fit the slimmer bar ---- */
body.ui .card-header-custom .override-status-toggle-label {
  transform: scale(.75);
  transform-origin: right center;
  vertical-align: middle;
}

/* ---- Two-row title bars (Documents, Loan Files): title, status toggle and status on one line, so the bar is a
   single slim row like the others (actions centred, Mechanic / Deal # on the right) ---- */
@media (min-width: 767px) {
  body.ui .card-header-custom > .mb-2 {
    display: inline-block;
    margin: 0 1.25rem 0 0 !important;
    vertical-align: middle;
  }
  body.ui .card-header-custom > .mb-2 + .d-flex {
    display: inline-flex !important;
    vertical-align: middle;
  }
  body.ui .card-header-custom > .mb-2 + .d-flex > span.mb-2 {
    margin-bottom: 0 !important;
  }
}

/* ---- The selected tab is the same black as the bar beneath it, so they read as one piece (was grey #4A535A) ---- */
body.ui .nav-tabs .nav-link.active,
body.ui .nav-tabs .nav-item.show .nav-link,
body.ui .tab .nav-tabs .nav-link.active {
  background-color: var(--ui-bar) !important;
  border-color: var(--ui-bar) !important;
  color: #fff !important;
}

/* ---- Buttons: the Export Portfolio blue (#4682b4) everywhere orange was used (owner's call). Black / grey /
   outline / round-icon buttons keep their own colours; on/off switches are not buttons and stay as they are. ---- */
body.ui .btn:not(.btn-dark-gray):not(.btn-green):not(.btn-delete):not(.btn-delete-small):not(.btn-light):not(.btn-link):not(.dark-background):not(.btn-inverted):not([class*="btn-outline"]):not(.close) {
  background-color: #4682b4;
  border-color: #4682b4;
  color: #fff;
}
body.ui .btn:not(.btn-dark-gray):not(.btn-green):not(.btn-delete):not(.btn-delete-small):not(.btn-light):not(.btn-link):not(.dark-background):not(.btn-inverted):not([class*="btn-outline"]):not(.close):hover {
  background-color: #3a6d97;
  border-color: #3a6d97;
  color: #fff;
}
body.ui .btn-orange {
  background-color: #4682b4 !important;
  border-color: #4682b4 !important;
}
body.ui .btn-orange:hover {
  background-color: #3a6d97 !important;
  border-color: #3a6d97 !important;
  color: #fff !important;
}

/* ---- Dark buttons (round file buttons, viewer controls, Close / No) use the same slate as the bars ---- */
body.ui .btn-inverted,
body.ui .dark-background,
body.ui .btn.dark-background {
  background-color: var(--ui-bar) !important;
  border-color: var(--ui-bar) !important;
}

/* ---- "Viewing as <garage> · Back to admin" while an admin is logged in through the Mechanics page backdoor:
   a slim bar pinned across the top of every page ---- */
body.ui .impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: #4682b4;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 6px 16px;
}
body.ui .impersonation-banner a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}