/* ===========================================================================
   Native browser UI, brought into the theme.
   Loaded last so it wins over the older stylesheets. Everything here replaces
   something the browser would otherwise draw in its own colours: scrollbars,
   select chevrons, file buttons, autofill, focus rings, date pickers.
   =========================================================================== */

/* --- scrollbars ----------------------------------------------------------- */
html{scrollbar-color:#3A6153 #16302A;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#16302A}
::-webkit-scrollbar-thumb{background:#3A6153;border-radius:0;
  border:2px solid #16302A}
::-webkit-scrollbar-thumb:hover{background:#4E7566}
::-webkit-scrollbar-corner{background:#16302A}

/* --- selects: no native chevron, no native colours ------------------------ */
/* The ID is repeated deliberately. Several older rules are more specific than
   a plain #id select — #mechanicApp .workspace-actions select, and the
   .tf-pick-select rules — and they set the `background` SHORTHAND, which resets
   background-image to none and would erase the chevron below. Doubling the ID
   outranks any of them without needing to name each one, and without !important
   (which would then have to be fought again by anything layered on later). */
#mechanicApp#mechanicApp select,#clientPortal#clientPortal select,
#publicSite#publicSite select,#addVehicleModal#addVehicleModal select,
#mgAddModal#mgAddModal select,#requestModal#requestModal select,
#accessModal#accessModal select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:34px;
}
/* the open list — honoured by Chrome, Edge and Firefox on desktop */
#mechanicApp select option,#clientPortal select option,#publicSite select option,
#addVehicleModal select option,#mgAddModal select option,
#requestModal select option,#accessModal select option{
  background:#1E3E35;color:#EFE7D2;
}
#mechanicApp select optgroup,#clientPortal select optgroup,
#addVehicleModal select optgroup,#mgAddModal select optgroup{
  background:#16302A;color:#BCCBC2;font-style:normal;font-weight:600;
}
/* Chrome 135+ can style the whole control and its popup */
@supports (appearance:base-select){
  #mechanicApp select,#clientPortal select,#addVehicleModal select,#mgAddModal select{
    appearance:base-select;
  }
  #mechanicApp select::picker(select),#clientPortal select::picker(select),
  #addVehicleModal select::picker(select),#mgAddModal select::picker(select){
    background:#1E3E35;border:1px solid #2F5449;border-radius:3px;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
  }
  #mechanicApp select option:checked,#clientPortal select option:checked{
    background:#264A40;color:#E7D9B6;
  }
}

/* --- file inputs: the native button is unmistakably not ours -------------- */
#mechanicApp input[type="file"],#clientPortal input[type="file"],
#addVehicleModal input[type="file"],#mgAddModal input[type="file"]{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:#BCCBC2;
}
#mechanicApp input[type="file"]::file-selector-button,
#clientPortal input[type="file"]::file-selector-button,
#addVehicleModal input[type="file"]::file-selector-button,
#mgAddModal input[type="file"]::file-selector-button{
  margin-right:12px;padding:9px 15px;border-radius:2px;cursor:pointer;
  border:1px solid #2F5449;background:#264A40;color:#EFE7D2;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
#mechanicApp input[type="file"]::file-selector-button:hover,
#clientPortal input[type="file"]::file-selector-button:hover,
#addVehicleModal input[type="file"]::file-selector-button:hover,
#mgAddModal input[type="file"]::file-selector-button:hover{
  border-color:#E7D9B6;background:#2F5449;
}

/* --- date inputs: the calendar glyph renders black on dark ---------------- */
#mechanicApp input[type="date"]::-webkit-calendar-picker-indicator,
#clientPortal input[type="date"]::-webkit-calendar-picker-indicator,
#addVehicleModal input[type="date"]::-webkit-calendar-picker-indicator,
#mgAddModal input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(88%) sepia(11%) saturate(220%) hue-rotate(75deg) brightness(95%);
  cursor:pointer;opacity:.9;
}
#mechanicApp input[type="date"],#clientPortal input[type="date"]{color-scheme:dark}

/* --- number inputs: hide the spinners, they are unstyleable --------------- */
#mechanicApp input[type="number"],#clientPortal input[type="number"],
#addVehicleModal input[type="number"],#mgAddModal input[type="number"]{
  -moz-appearance:textfield;appearance:textfield;
}
#mechanicApp input[type="number"]::-webkit-outer-spin-button,
#mechanicApp input[type="number"]::-webkit-inner-spin-button,
#clientPortal input[type="number"]::-webkit-outer-spin-button,
#clientPortal input[type="number"]::-webkit-inner-spin-button,
#addVehicleModal input[type="number"]::-webkit-inner-spin-button,
#mgAddModal input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}

/* --- autofill: Chrome paints its own pale yellow -------------------------- */
#mechanicApp input:-webkit-autofill,#clientPortal input:-webkit-autofill,
#publicSite input:-webkit-autofill,#addVehicleModal input:-webkit-autofill,
#mgAddModal input:-webkit-autofill,#requestModal input:-webkit-autofill,
#accessModal input:-webkit-autofill{
  -webkit-text-fill-color:#EFE7D2;
  -webkit-box-shadow:0 0 0 40px #264A40 inset;
  caret-color:#EFE7D2;
}
#requestModal input:-webkit-autofill,#accessModal input:-webkit-autofill{
  -webkit-text-fill-color:#14201C;
  -webkit-box-shadow:0 0 0 40px #DCCFA9 inset;
}

/* --- text selection ------------------------------------------------------- */
#mechanicApp ::selection,#clientPortal ::selection{background:#E7D9B6;color:#16211D}
#publicSite ::selection{background:#E7D9B6;color:#16211D}

/* --- placeholders were too faint to read --------------------------------- */
#mechanicApp ::placeholder,#clientPortal ::placeholder,
#addVehicleModal ::placeholder,#mgAddModal ::placeholder{color:#8FA79B;opacity:1}

/* --- caret --------------------------------------------------------------- */
#mechanicApp input,#mechanicApp textarea,
#clientPortal input,#clientPortal textarea{caret-color:#E7D9B6}

/* ===========================================================================
   Themed dialog, replacing alert() and confirm()
   =========================================================================== */
.tfd-scrim{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:5vh 5vw;background:rgba(8,20,17,.82);backdrop-filter:blur(8px)}
.tfd{width:min(480px,100%);background:#1E3E35;color:#EFE7D2;border:1px solid #2F5449;
  border-radius:3px;box-shadow:0 36px 90px rgba(0,0,0,.55);overflow:hidden;
  font-family:"IBM Plex Sans",system-ui,sans-serif}
.tfd-head{padding:18px 22px 0}
.tfd-kind{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#BCCBC2}
.tfd-kind.is-danger{color:#F4826B}
.tfd-title{margin:9px 0 0;font-family:"Saira Condensed","Arial Narrow",sans-serif;
  font-weight:800;text-transform:uppercase;font-size:27px;line-height:1;color:#EFE7D2}
.tfd-body{padding:14px 22px 20px;font-size:14.5px;line-height:1.6;color:#D2DED6;
  white-space:pre-wrap;max-height:52vh;overflow:auto}
.tfd-foot{display:flex;justify-content:flex-end;gap:10px;padding:15px 22px;
  border-top:1px solid #2F5449;background:rgba(0,0,0,.18)}
.tfd-btn{padding:12px 20px;border-radius:2px;cursor:pointer;border:1px solid #2F5449;
  background:transparent;color:#EFE7D2;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;transition:transform .16s ease}
.tfd-btn:hover{border-color:#E7D9B6;transform:translateY(-1px)}
.tfd-btn.is-primary{background:#E7D9B6;color:#16211D;border-color:#E7D9B6}
.tfd-btn.is-danger{background:#F4826B;color:#1B0F0C;border-color:#F4826B}
.tfd-btn:focus-visible{outline:2px solid #E7D9B6;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tfd-btn{transition:none}}