:root{
  --bc-primary:#0B1F3B;
  --bc-secondary:#123A63;
  --bc-accent:#D2A679;
  --bc-bg:#071426;
  --bc-glass:rgba(255,255,255,0.08);
  --bc-text:#F4F7FB;
  --bc-muted:rgba(244,247,251,0.75);
  --bc-radius:22px;

  --bc-success:#2bb673;
  --bc-warning:#f0ad4e;
  --bc-danger:#e25555;

  --bc-border:rgba(255,255,255,0.10);
  --bc-border-strong:rgba(255,255,255,0.16);
}

/* Helps native controls + scrollbars look right on dark */
html, body{ color-scheme: dark; }

/* Base */
body{
  background: var(--bc-bg);
  color: var(--bc-text);
}
a{ color: var(--bc-accent); }
a:hover{ opacity:.9; }

.text-muted, .form-text{ color: var(--bc-muted) !important; }
hr{ border-color: var(--bc-border) !important; }

/* Titles (safe: only headings) */
h1.mb-0, h1.form-signin-heading, h2.mb-0, h3.mb-0, h3.mb-1, h3.mb-2, h4.mb-2, h5.mb-0, h5.mb-1, h5.mb-2, h5.mb-3, h6.mb-2{
  background: linear-gradient(180deg, #FFFFFF 0%, #BFE3FF 70%, #7CC7FF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.45) !important;
}
.toast-body {
color:#181819 !important;
}

/* Cards */
.card, .list-group-item {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius) !important;
  color: var(--bc-text) !important;
}
.card-header,
.card-footer{
  background: transparent !important;
  border-color: var(--bc-border) !important;
}

/* Glass utility */
.bc-glass{
  background: var(--bc-glass) !important;
  border: 1px solid var(--bc-border-strong) !important;
  border-radius: var(--bc-radius) !important;
  backdrop-filter: blur(10px);
}

/* Buttons (keep Bootstrap classes) */
.btn{ border-radius: 14px !important; font-weight: 700; }

.btn-primary{
  background-color: var(--bc-accent) !important;
  border-color: var(--bc-accent) !important;
  color: #0b0b0b !important;
}
.btn-primary:hover{ filter: brightness(.95); }

.btn-success{
  background-color: var(--bc-success) !important;
  border-color: var(--bc-success) !important;
  color: #071426 !important;
}
.btn-success:hover{ filter: brightness(.95); }

.btn-outline-secondary{
  border-color: rgba(210,166,121,.45) !important;
  color: var(--bc-text) !important;
}
.btn-outline-secondary:hover{
  background: rgba(210,166,121,.12) !important;
  border-color: rgba(210,166,121,.55) !important;
}

/* =========================
   FORMS (clean) — select + date look right on dark
   ========================= */

label, .form-label{
  color: var(--bc-muted) !important;
  font-weight: 600;
}

/* Base field style */
.form-control,
.form-select,
textarea.form-control{
  border-radius: 14px !important;
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid var(--bc-border-strong) !important;
  color: rgba(244,247,251,0.95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 22px rgba(0,0,0,0.18);
}

/* Placeholders */
.form-control::placeholder,
textarea::placeholder{
  color: rgba(244,247,251,0.45) !important;
}

/* Focus */
.form-control:focus,
.form-select:focus,
textarea:focus{
  outline: none !important;
  border-color: rgba(210,166,121,.70) !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(244,247,251,0.98) !important;
  box-shadow:
    0 0 0 .25rem rgba(210,166,121,.18) !important,
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 28px rgba(0,0,0,0.22) !important;
}

/* Disabled/readonly */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly]{
  opacity: .75;
  background: rgba(255,255,255,0.03) !important;
  box-shadow: none !important;
}

/* If any controls have bg-white/bg-light, force dark (not transparent) */
.form-control.bg-white,
.form-control.bg-light,
.form-select.bg-white,
.form-select.bg-light,
textarea.bg-white,
textarea.bg-light,
input.bg-white,
input.bg-light,
div.bg-light,
select.bg-white,
select.bg-light{
  background: rgba(255,255,255,0.045) !important;
  color: rgba(244,247,251,0.95) !important;
  border: 1px solid var(--bc-border-strong) !important;
}

/* -------------------------
   FORM-SELECT (dropdown)
   ------------------------- */

/* Make the arrow look good on dark + consistent padding */
.form-select{
  padding-right: 2.5rem !important;
  background-repeat: no-repeat !important;
  background-position: right .9rem center !important;
  background-size: 16px 12px !important;

  /* Bootstrap 5.2/5.3 often uses a hard-coded dark arrow — override it */
  --bs-form-select-bg-img: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='rgba(244,247,251,0.75)' d='M4.2 6.2a.75.75 0 0 1 1.06 0L8 8.94l2.74-2.74a.75.75 0 1 1 1.06 1.06L8.53 10.53a.75.75 0 0 1-1.06 0L4.2 7.26a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") !important;
}

/* Dropdown option colors (best-effort; some browsers limit styling) */
.form-select option{
  background: #0B1F3B;
  color: var(--bc-text);
}

/* -------------------------
   DATE INPUT (type="date")
   ------------------------- */

input.form-control[type="date"]{
  color-scheme: dark;
  color: rgba(244,247,251,0.95) !important;
}

/* WebKit date parts (Chrome/Edge/Safari) */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field{
  color: rgba(244,247,251,0.95) !important;
}

/* Calendar icon */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) opacity(.8);
}

/* -------------------------
   CHECKBOX / RADIO
   ------------------------- */
.form-check-label{ color: var(--bc-text) !important; }
.form-check-input{
  background-color: rgba(255,255,255,0.08) !important;
  border: 1px solid var(--bc-border-strong) !important;
}
.form-check-input:checked{
  background-color: var(--bc-accent) !important;
  border-color: var(--bc-accent) !important;
}
.form-check-input:focus{
  box-shadow: 0 0 0 .25rem rgba(210,166,121,.18) !important;
}

/* =========================
   FIX: WHITE TABLE BODY / LINE ITEMS
   Put this at the VERY BOTTOM
   ========================= */

/* Make the table area a dark surface */
.table-responsive,
.table{
  background: rgba(255,255,255,0.035) !important;
}

/* If Bootstrap utilities are forcing white, kill them */
.table.bg-white,
.table.bg-light,
.table-responsive.bg-white,
.table-responsive.bg-light,
.table tbody.bg-white,
.table tbody.bg-light,
.table tr.bg-white,
.table tr.bg-light,
.table td.bg-white,
.table td.bg-light{
  background: transparent !important;
}

/* Keep header readable */
.table thead th{
  background: rgba(255,255,255,0.075) !important;
  color: rgba(244,247,251,0.90) !important;
  font-weight: 800 !important;
}

/* Make body rows readable (no white block) */
.table tbody,
.table tbody tr,
.table tbody td{
  background: transparent !important;
  color: var(--bc-text) !important;
}

/* Row “cards” */
.table tbody tr{
  background: rgba(0,0,0,0.14) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.table tbody tr:nth-child(even){
  background: rgba(0,0,0,0.18) !important;
}
.table tbody tr:hover{
  background: rgba(210,166,121,.10) !important;
}

/* Inputs inside tables (line items) */
.table input,
.table select,
.table textarea{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bc-border-strong) !important;
  color: var(--bc-text) !important;
}

/* Footer */
.footer{
  border-color: var(--bc-success) !important;
  background: rgba(255,255,255,0.03) !important;
}

/* =========================
   OPTIONAL: If your Customer dropdown is Select2
   (this is VERY often the “last white control”)
   ========================= */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bc-border-strong) !important;
  border-radius: 14px !important;
  color: var(--bc-text) !important;
  min-height: 42px;
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--bc-text) !important;
}
.select2-dropdown{
  background: #0B1F3B !important;
  border: 1px solid var(--bc-border-strong) !important;
}
.select2-results__option{ color: var(--bc-text) !important; }
.select2-results__option--highlighted{
  background: rgba(210,166,121,.18) !important;
  color: var(--bc-text) !important;
}

/* OPTIONAL: If your dropdown is Choices.js */
.choices__inner{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bc-border-strong) !important;
  border-radius: 14px !important;
  color: var(--bc-text) !important;
}
.choices__list--dropdown{
  background: #0B1F3B !important;
  border: 1px solid var(--bc-border-strong) !important;
}
.choices__item{ color: var(--bc-text) !important; }

/* =========================
   FORCE DARK: select + date (high specificity)
   Put at VERY BOTTOM of your theme file
   ========================= */

/* Base: beat Bootstrap */
body select.form-select,
body input.form-control,
body textarea.form-control{
  background-color: rgba(255,255,255,0.045) !important;
  border: 1px solid var(--bc-border-strong) !important;
  color: rgba(244,247,251,0.95) !important;
}

/* Placeholder */
body input.form-control::placeholder,
body textarea.form-control::placeholder{
  color: rgba(244,247,251,0.45) !important;
}

/* Focus */
body select.form-select:focus,
body input.form-control:focus,
body textarea.form-control:focus{
  background-color: rgba(255,255,255,0.06) !important;
  border-color: rgba(210,166,121,.70) !important;
  box-shadow: 0 0 0 .25rem rgba(210,166,121,.18) !important;
  color: rgba(244,247,251,0.98) !important;
}

/* -------------------------
   SELECT: make arrow readable on dark
   ------------------------- */
body select.form-select{
  padding-right: 2.5rem !important;

  /* override Bootstrap arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='rgba(244,247,251,0.75)' d='M4.2 6.2a.75.75 0 0 1 1.06 0L8 8.94l2.74-2.74a.75.75 0 1 1 1.06 1.06L8.53 10.53a.75.75 0 0 1-1.06 0L4.2 7.26a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .9rem center !important;
  background-size: 16px 12px !important;
}

/* Options dropdown */
body select.form-select option{
  background: #0B1F3B;
  color: var(--bc-text);
}

/* -------------------------
   DATE INPUT: keep it dark + readable
   ------------------------- */
body input.form-control[type="date"]{
  color-scheme: dark;
  background-color: rgba(255,255,255,0.045) !important;
  color: rgba(244,247,251,0.95) !important;
  -webkit-text-fill-color: rgba(244,247,251,0.95) !important; /* fixes “washed out” text */
}

/* Chrome/Edge internal date pieces */
body input[type="date"]::-webkit-datetime-edit,
body input[type="date"]::-webkit-datetime-edit-text,
body input[type="date"]::-webkit-datetime-edit-month-field,
body input[type="date"]::-webkit-datetime-edit-day-field,
body input[type="date"]::-webkit-datetime-edit-year-field{
  color: rgba(244,247,251,0.95) !important;
}

/* Calendar icon */
body input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) opacity(.85);
}
/* =========================
   MODALS — BarnCare dark glass theme
   ========================= */

/* Backdrop */
.modal-backdrop.show{
  opacity: .72 !important;
  background: #000 !important;
}

/* Modal container */
.modal-content{
  background: rgba(7,20,38,0.92) !important;          /* deep barncare bg */
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--bc-radius) !important;
  color: var(--bc-text) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(14px);
}

/* Header + Footer */
.modal-header{
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.03) !important;
  border-top-left-radius: var(--bc-radius) !important;
  border-top-right-radius: var(--bc-radius) !important;
}
.modal-footer{
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.03) !important;
  border-bottom-left-radius: var(--bc-radius) !important;
  border-bottom-right-radius: var(--bc-radius) !important;
}

/* Title */
.modal-title{
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(244,247,251,0.96) !important;
}

/* Body spacing + subtle panel */
.modal-body{
  color: rgba(244,247,251,0.92) !important;
}

/* Close button (Bootstrap 5 uses filter-based icon) */
.modal-header .btn-close{
  filter: invert(1) opacity(.75);
  border-radius: 12px;
}
.modal-header .btn-close:hover{
  filter: invert(1) opacity(.95);
  background: rgba(255,255,255,0.06);
}

/* Links inside modals */
.modal a{ color: var(--bc-accent); }
.modal a:hover{ opacity: .9; }

/* Inputs inside modals (inherits your form rules, but this ensures it wins) */
.modal .form-control,
.modal .form-select,
.modal textarea.form-control{
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid var(--bc-border-strong) !important;
  color: rgba(244,247,251,0.95) !important;
}

/* Tables inside modals */
.modal .table-responsive{
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: 18px !important;
}
.modal .table thead th{
  background: rgba(255,255,255,0.075) !important;
  color: rgba(244,247,251,0.90) !important;
}

/* Optional: “glass” look for the dialog itself */
.modal-dialog{
  transform: translateY(6px);
}
.modal.show .modal-dialog{
  transform: translateY(0);
  transition: transform .18s ease-out;
}

/* =========================
   REGISTER PAGE — BarnCare styling
   Targets your existing classes:
   .form-signin-heading, .alternate-background, .form-signup, .password-verification
   ========================= */

/* Page spacing / centering feel */
main.col-12.col-md-10.col-lg-8{
  margin-inline: auto;
}

/* Heading */
.form-signin-heading{
  font-weight: 900;
  letter-spacing: .02em;
}

/* If you use alternate-background for headings */
.alternate-background{
  background: linear-gradient(180deg, #FFFFFF 0%, #BFE3FF 70%, #7CC7FF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.45) !important;
}

/* The register form card (overrides bg-light + border) */
.form-signup{
  background: rgba(255,255,255,0.06) !important;            /* kills bg-light */
  border: 1px solid rgba(255,255,255,0.12) !important;      /* nicer than default border */
  border-radius: var(--bc-radius) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(12px);
}

/* Labels on the left column */
.form-signup .col-form-label,
.form-signup .form-label{
  color: var(--bc-muted) !important;
  font-weight: 700 !important;
}

/* Username availability text */
#usernameCheck{
  display: inline-block;
  margin-bottom: .35rem;
  color: var(--bc-muted);
}

/* Inputs inside register form (keeps your global form styles, but ensures it wins here) */
.form-signup .form-control,
.form-signup .form-select,
.form-signup textarea.form-control{
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid var(--bc-border-strong) !important;
  color: rgba(244,247,251,0.95) !important;
}

/* Placeholder */
.form-signup .form-control::placeholder{
  color: rgba(244,247,251,0.45) !important;
}

/* Focus glow */
.form-signup .form-control:focus,
.form-signup .form-select:focus{
  border-color: rgba(210,166,121,.70) !important;
  box-shadow: 0 0 0 .25rem rgba(210,166,121,.18) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Password “eye” link (overrides your inline style color:black) */
.form-signup a.password_view_control{
  color: var(--bc-accent) !important;
  font-weight: 700;
  opacity: .95;
}
.form-signup a.password_view_control:hover{
  opacity: 1;
  text-decoration: none;
}

/* Password requirements box */
.password-verification{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 14px 14px 10px;
}

/* Clean up that inline table */
.password-verification table{
  width: 100%;
}
.password-verification td{
  padding: .35rem .25rem;
  vertical-align: middle;
}

/* Icons + requirement text */
.password-verification i.fa{
  opacity: .9;
}
.password-verification .text-muted{
  color: rgba(244,247,251,0.62) !important;
}
.password-verification .text-success{
  color: rgba(43,182,115,0.95) !important;
}
.password-verification .text-danger{
  color: rgba(226,85,85,0.95) !important;
}

/* Register button spacing */
.form-signup .submit.btn{
  padding: .75rem 1.15rem;
}

/* Optional: make the Register button pop a bit more */
.form-signup .btn-primary{
  box-shadow: 0 12px 26px rgba(210,166,121,0.20);
}

.accordion-body{
background: #515a67 !important;
}

.bc-header{
  display:block;
  font-size: clamp(2.2rem, 4vw, 4.5rem);
  line-height:1.1;
  white-space: nowrap;   /* forces single line */
}

.bc-header-below{
  display:block;
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  line-height:1.1;
  margin-top:.4rem;
}
.bc-header,
.bc-header-below{
  display:block;
    background: linear-gradient(180deg, #FFFFFF 0%, #BFE3FF 70%, #7CC7FF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.45) !important;
}