/*
 * theme-overrides.css — brand customisations layered on top of the vendored
 * Material Dashboard 2 PRO stylesheet. Loaded AFTER material-dashboard.min.css
 * so these rules win. Keeping overrides here (rather than editing the minified
 * vendor file) means re-vendoring the theme never clobbers the brand colour.
 *
 * Primary: Material's default pink (#e91e63 / #ec407a→#d81b60) → blue
 * (#1565C0 / #3f8ee0→#1565C0).
 */

/* ── Solid / text / border primary ─────────────────────────────────────── */
.bg-primary,
.badge.bg-primary        { background-color: #1565C0 !important; background: #1565C0 !important; }
.text-primary            { color: #1565C0 !important; background-image: none; }
.border-primary          { border-color: #1565C0 !important; }

/* ── Gradient primary (buttons, icon shapes, active sidenav links) ──────── */
.bg-gradient-primary,
.btn.bg-gradient-primary { background-image: linear-gradient(195deg, #3f8ee0, #1565C0) !important; }

/* Resting button shadow (Material tints it with the primary colour). */
.btn-primary,
.btn.bg-gradient-primary {
  box-shadow: 0 2px 2px 0 rgba(21, 101, 192, .1),
              0 3px 1px -2px rgba(21, 101, 192, .18),
              0 1px 5px 0 rgba(21, 101, 192, .15);
}
.btn-primary:hover,
.btn.bg-gradient-primary:hover {
  background-color: #1565C0;
  border-color: #1565C0;
  box-shadow: 0 8px 14px -8px rgba(21, 101, 192, .3),
              0 3px 18px 0 rgba(21, 101, 192, .1),
              0 7px 8px -4px rgba(21, 101, 192, .18);
}
.btn.bg-gradient-primary.dropdown-toggle { background-color: #1565C0; }

/* Utility primary shadows + focus ring. */
.shadow-primary,
.shadow-light {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14),
              0 7px 10px -5px rgba(21, 101, 192, .4) !important;
}
.nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(21, 101, 192, .25); }

/* ── Bootstrap button variables ────────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg: #1565C0;
  --bs-btn-border-color: #1565C0;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #1257ad;
  --bs-btn-hover-border-color: #0f4a93;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #0f4a93;
  --bs-btn-active-border-color: #0f4a93;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #1565C0;
  --bs-btn-disabled-border-color: #1565C0;
  --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 21, 101, 192;
}
.btn-outline-primary {
  --bs-btn-color: #1565C0;
  --bs-btn-border-color: #1565C0;
  --bs-btn-hover-bg: #1565C0;
  --bs-btn-hover-border-color: #1565C0;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #1565C0;
  --bs-btn-active-border-color: #1565C0;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #1565C0;
  --bs-btn-disabled-border-color: #1565C0;
  --bs-btn-focus-shadow-rgb: 21, 101, 192;
}
.btn-outline-primary:hover:not(.active) { color: #1565C0; }
.btn-link {
  --bs-btn-color: #1565C0;
  --bs-btn-hover-color: #1565C0;
  --bs-btn-active-color: #1565C0;
  --bs-btn-focus-shadow-rgb: 21, 101, 192;
}

/* ── Bare form controls: visible box in dark mode ──────────────────────────
 * Material's plain .form-control is transparent with a faint border, so on the
 * dark theme a bare input (one NOT wrapped in a Material .input-group floating-
 * label group) reads as "black on black" — you can't tell there's a field.
 * Give every bare control a clear fill + border site-wide. We exclude
 * .input-group descendants so Material's animated outline/underline inputs keep
 * their own styling (no double border).
 */
.dark-version .form-control:not(.input-group .form-control),
.dark-version .form-select:not(.input-group .form-select),
.dark-version textarea.form-control:not(.input-group .form-control) {
  background-color: #2a2a2a !important;
  border: 1px solid #4a5568 !important;
  border-radius: .5rem !important;
  color: #fff !important;
  padding: .55rem .75rem;
}
.dark-version .form-control:not(.input-group .form-control):focus,
.dark-version .form-select:not(.input-group .form-select):focus,
.dark-version textarea.form-control:not(.input-group .form-control):focus {
  background-color: #2a2a2a !important;
  border-color: #1565C0 !important;
  color: #fff !important;
  box-shadow: 0 0 0 .15rem rgba(21, 101, 192, .35) !important;
}
.dark-version .form-control:not(.input-group .form-control)::placeholder,
.dark-version textarea.form-control:not(.input-group .form-control)::placeholder {
  color: #8392ab;
  opacity: 1;
}

/* ── Selects: must clearly read as dropdowns ────────────────────────────────
 * Bootstrap's <select.form-select> chevron is near-black (#262626) — invisible
 * on the dark theme, so a select looks like a plain text box. Swap in a LIGHT
 * chevron (and reserve room for it + a pointer cursor) for every select,
 * site-wide. Applies regardless of input-group wrapping. */
.dark-version .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c8d2e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-image: var(--bs-form-select-bg-img) !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 14px 11px !important;
  padding-right: 2.25rem !important;
  cursor: pointer;
}

/* Some forms wrap inputs in .input-group-outline but put the <label> ABOVE the
 * group (no floating .form-label inside) — Material then leaves them with a
 * near-invisible 4%-white border. Detect that case (no inner .form-label) and
 * give them the same visible box. Real floating-label inputs (login/register/
 * account — .form-label sits inside the group) are left as Material designed. */
.dark-version .input-group-outline:not(:has(.form-label)):not(:has(.input-group-text)) > .form-control,
.dark-version .input-group-outline:not(:has(.form-label)):not(:has(.input-group-text)) > .form-select {
  background-color: #2a2a2a !important;
  border: 1px solid #4a5568 !important;
  border-radius: .5rem !important;
  color: #fff !important;
  padding: .55rem .75rem !important;
}
.dark-version .input-group-outline:not(:has(.form-label)):not(:has(.input-group-text)) > .form-control:focus,
.dark-version .input-group-outline:not(:has(.form-label)):not(:has(.input-group-text)) > .form-select:focus {
  background-color: #2a2a2a !important;
  border-color: #1565C0 !important;
  color: #fff !important;
  box-shadow: 0 0 0 .15rem rgba(21, 101, 192, .35) !important;
}

/* Label-less input-group-outline WITH an addon (e.g. the £ rate/cost fields):
 * box the whole group so the addon + input read as one field, and let the inner
 * parts be transparent (no double border/seam). */
.dark-version .input-group-outline:not(:has(.form-label)):has(.input-group-text) {
  background-color: #2a2a2a !important;
  border: 1px solid #4a5568 !important;
  border-radius: .5rem !important;
}
.dark-version .input-group-outline:not(:has(.form-label)):has(.input-group-text):focus-within {
  border-color: #1565C0 !important;
  box-shadow: 0 0 0 .15rem rgba(21, 101, 192, .35) !important;
}
.dark-version .input-group-outline:not(:has(.form-label)):has(.input-group-text) > .form-control,
.dark-version .input-group-outline:not(:has(.form-label)):has(.input-group-text) > .input-group-text {
  background-color: transparent !important;
  border: 0 !important;
  color: #fff !important;
}

/* ── Form fields: focused / filled outline inputs ──────────────────────── */
.input-group-outline.is-filled .form-label + .form-control,
.input-group.input-group-outline.is-focused .form-label + .form-control {
  border-color: #1565C0 !important;
  box-shadow: inset 1px 0 #1565C0, inset -1px 0 #1565C0, inset 0 -1px #1565C0;
}
.input-group-outline.is-filled .form-label,
.input-group.input-group-outline.is-focused .form-label { color: #1565C0; }
.input-group-outline.is-filled .form-label:after,
.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-focused .form-label:after,
.input-group.input-group-outline.is-focused .form-label:before {
  border-top-color: #1565C0;
  box-shadow: inset 0 1px #1565C0;
}
.input-group.input-group-dynamic .form-control:focus,
.input-group.input-group-static .form-control,
.input-group.input-group-static .form-control:focus {
  background-image: linear-gradient(0deg, #1565C0 2px, rgba(21, 101, 192, 0) 0),
                    linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
}
.input-group.input-group-dynamic.is-focused label,
.input-group.input-group-static.is-focused label { color: #1565C0; }

/* ── Checkboxes / radios ───────────────────────────────────────────────── */
.form-check-input:checked[type=checkbox],
.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: linear-gradient(195deg, #3f8ee0, #1565C0);
}

/* ── Top navbar on scroll ──────────────────────────────────────────────────
 * Material's navbarBlurOnScroll adds the .blur class on scroll, whose vendor
 * rule forces a near-opaque WHITE background — which looks broken on our dark
 * theme. Re-skin the scrolled navbar with the brand blue gradient and keep its
 * text/icons white (the theme's script flips link colours to dark otherwise).
 */
.navbar.navbar-main.blur {
  background: #1565C0 !important;
  background-image: linear-gradient(195deg, #3f8ee0, #1565C0) !important;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.navbar.navbar-main.blur h6,
.navbar.navbar-main.blur .nav-link,
.navbar.navbar-main.blur .nav-link .material-symbols-rounded,
.navbar.navbar-main.blur .nav-link span { color: #fff !important; }
.navbar.navbar-main.blur .sidenav-toggler-line { background-color: #fff !important; }

/* ── Date/time picker icon ─────────────────────────────────────────────────
 * The native calendar/clock indicator is near-black and barely visible on the
 * dark theme. Invert it to white and give it a clear hit target.
 */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.9;
  cursor: pointer;
  padding: 2px;
  scale: 1.15;
}

/* ── Invalid form fields ───────────────────────────────────────────────────
 * After a failed submit (form gets .was-validated), outline empty/invalid
 * fields in red so the missing value is obvious alongside the browser bubble.
 */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.was-validated textarea:invalid {
  border: 2px solid #f44335 !important;
  border-radius: .375rem !important;
  box-shadow: 0 0 0 .2rem rgba(244, 67, 53, .25) !important;
  background-image: none !important;
}
/* Inputs that live inside an .input-group (e.g. the £ rate/cost fields):
   outline the whole group so the red border isn't hidden by the addon. */
.was-validated .input-group:has(:invalid) {
  border: 2px solid #f44335;
  border-radius: .375rem;
  box-shadow: 0 0 0 .2rem rgba(244, 67, 53, .25);
}
.was-validated .input-group:has(:invalid) .form-control {
  border: 0 !important;
  box-shadow: none !important;
}
/* Don't flag VALID fields — no green border, glow, or tick icon. We only want
   to draw attention to what's missing, not decorate everything that's fine. */
.was-validated .form-control:valid,
.was-validated .form-select:valid,
.was-validated textarea:valid {
  border-color: inherit !important;
  box-shadow: none !important;
  background-image: none !important;
}