/* ═══════════════════════════════════════════════════════════════════
   804 AVENUE — Modern UI Layer
   Scrollbars · Inputs · Selects · Checkboxes · Radios · Date Picker · Sliders
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Global scrollbar ────────────────────────────────────────── */
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-20, rgba(245,158,11,.2)) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--accent-20, rgba(245,158,11,.25));
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-glow, rgba(245,158,11,.45));
}

/* ── 2. Modal dialog — premium scroll ───────────────────────────── */
.modal-dialog {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-20) transparent;
}
.modal-dialog::-webkit-scrollbar { width: 4px; }
.modal-dialog::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--cyan, #06B6D4));
  border-radius: 999px;
}

/* ── 3. Enhanced input fields ────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  min-height: 46px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
}

input[type="text"]:hover:not(:disabled),
input[type="email"]:hover:not(:disabled),
input[type="tel"]:hover:not(:disabled),
input[type="url"]:hover:not(:disabled),
input[type="number"]:hover:not(:disabled),
input[type="password"]:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: var(--border-accent);
  background: var(--bg-elevated);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow:
    0 0 0 3.5px var(--accent-15),
    inset 0 1px 2px rgba(15,23,42,.03);
}

input::placeholder, textarea::placeholder { color: var(--text-tertiary); opacity: 0.8; }
textarea { line-height: 1.6; resize: vertical; min-height: 90px; }

/* ── 4. Select dropdown — polished ──────────────────────────────── */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  min-height: 46px;
  padding: 11px 42px 11px 14px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 13px center, center;
  background-size: 16px, 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 1px 3px rgba(15,23,42,.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;
  width: 100%;
  box-sizing: border-box;
}

select:not([multiple]):hover:not(:disabled) {
  border-color: var(--border-accent);
  background-color: var(--bg-elevated);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 3px 10px rgba(15,23,42,.07);
}

select:not([multiple]):focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--bg-card);
  box-shadow:
    0 0 0 3.5px var(--accent-15),
    inset 0 1px 0 rgba(255,255,255,.6);
}

select:not([multiple]):disabled { opacity: 0.5; cursor: not-allowed; }
select option { background: var(--bg-card); color: var(--text-primary); padding: 8px 12px; }

/* ── 5. Checkbox — modern styled ────────────────────────────────── */
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--border);
  border-radius: 5px;
  background: var(--bg-surface);
  cursor: pointer;
  position: relative;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  vertical-align: middle;
  flex-shrink: 0;
}

input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-10);
}

input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 8px var(--accent-glow);
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7l3.5 3.5L12 3' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
}

input[type="checkbox"]:focus { outline: none; box-shadow: 0 0 0 3.5px var(--accent-15); }
input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── 6. Radio button — modern ────────────────────────────────────── */
input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--bg-surface);
  cursor: pointer;
  position: relative;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  vertical-align: middle;
  flex-shrink: 0;
}

input[type="radio"]:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-10);
}

input[type="radio"]:checked {
  border-color: var(--accent);
  border-width: 5px;
  background: var(--bg-card);
  box-shadow: 0 2px 8px var(--accent-glow);
}

input[type="radio"]:focus { outline: none; box-shadow: 0 0 0 3.5px var(--accent-15); }

/* ── 7. Range input (sliders) ────────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--accent) var(--range-pct, 50%), var(--border-subtle) var(--range-pct, 50%));
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  border: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2.5px solid var(--accent);
  box-shadow: 0 2px 10px var(--accent-glow), 0 0 0 4px var(--accent-10);
  cursor: grab;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2.5px solid var(--accent);
  box-shadow: 0 2px 10px var(--accent-glow);
  cursor: grab;
}

input[type="range"]:hover::-webkit-slider-thumb {
  box-shadow: 0 3px 16px var(--accent-glow), 0 0 0 6px var(--accent-15);
  transform: scale(1.1);
}

input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }

/* ── 8. Flatpickr date picker theme override ─────────────────────── */
.flatpickr-calendar {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.14), 0 0 0 1px var(--accent-10) !important;
  font-family: var(--font-body) !important;
  overflow: hidden;
}

.flatpickr-calendar::before,
.flatpickr-calendar::after { border-bottom-color: var(--border-accent) !important; }

.flatpickr-months { background: linear-gradient(135deg, var(--accent), var(--cyan, #06B6D4)) !important; padding: 6px 0 !important; border-radius: 0 !important; }
.flatpickr-month { color: #fff !important; fill: #fff !important; }
.flatpickr-current-month { font-family: var(--font-display) !important; font-size: 1rem !important; font-weight: 700 !important; color: #fff !important; }
.flatpickr-current-month .numInputWrapper span { border-color: rgba(255,255,255,.3) !important; }
.flatpickr-current-month .numInputWrapper span svg { fill: rgba(255,255,255,.8) !important; }
.flatpickr-current-month input.cur-year { color: #fff !important; font-weight: 700 !important; }
.flatpickr-current-month select.flatpickr-monthDropdown-months { color: #fff !important; font-weight: 700 !important; background: transparent !important; border: none !important; min-height: auto !important; padding: 4px 8px !important; }
.flatpickr-prev-month, .flatpickr-next-month { color: rgba(255,255,255,.85) !important; fill: rgba(255,255,255,.85) !important; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #fff !important; }
.flatpickr-weekdaycontainer { background: var(--bg-elevated) !important; }
.flatpickr-weekday { color: var(--text-tertiary) !important; font-family: var(--font-nav) !important; font-size: 0.62rem !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; }
.flatpickr-day { border-radius: var(--radius-sm) !important; color: var(--text-secondary) !important; font-family: var(--font-body) !important; font-size: 0.85rem !important; line-height: 38px !important; height: 38px !important; }
.flatpickr-day:hover { background: var(--accent-10) !important; border-color: var(--border-accent) !important; color: var(--text-primary) !important; }
.flatpickr-day.today { border-color: var(--accent) !important; color: var(--accent) !important; font-weight: 700 !important; }
.flatpickr-day.today:hover { background: var(--accent-10) !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: linear-gradient(135deg, var(--accent), var(--cyan, #06B6D4)) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px var(--accent-glow) !important;
}
.flatpickr-day.disabled, .flatpickr-day.disabled:hover { color: var(--border-subtle) !important; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-tertiary) !important; opacity: .4 !important; }

/* Input with flatpickr — hide native calendar icon */
input.flatpickr-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 16px !important;
  padding-right: 42px !important;
  cursor: pointer !important;
}
input.flatpickr-input::-webkit-calendar-picker-indicator { display: none !important; }

/* ── 9. Form label with floating effect ─────────────────────────── */
.field-float { position: relative; }
.field-float input, .field-float select, .field-float textarea { padding-top: 22px; padding-bottom: 8px; }
.field-float label {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: .9rem;
  color: var(--text-tertiary);
  pointer-events: none;
  transition: all .18s ease;
  background: transparent;
  white-space: nowrap;
}
.field-float input:focus ~ label,
.field-float input:not(:placeholder-shown) ~ label,
.field-float select:focus ~ label,
.field-float textarea:focus ~ label {
  top: 10px;
  transform: none;
  font-size: .62rem;
  font-family: var(--font-nav);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── 10. Improved priority selector cards ────────────────────────── */
.priority-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.priority-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-nav);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--bg-surface);
  color: var(--text-secondary);
  position: relative;
  overflow: hidden;
}
.priority-option::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-10), transparent);
  opacity: 0;
  transition: opacity .2s ease;
}
.priority-option:has(input:checked)::before { opacity: 1; }
.priority-option:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateY(-1px);
}
.priority-option--emergency:has(input:checked) {
  border-color: var(--danger);
  color: var(--danger);
  box-shadow: 0 4px 16px rgba(220,38,38,.25);
}
.priority-option--emergency:has(input:checked)::before {
  background: linear-gradient(135deg, rgba(220,38,38,.08), transparent);
}

/* ── 11. Improved amc service checkboxes ─────────────────────────── */
.amc-service-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all .2s ease;
  background: var(--bg-surface);
  position: relative;
}
.amc-service-check:has(input:checked) {
  background: var(--bg-card);
  border-color: var(--accent);
  color: var(--text-primary);
  box-shadow: 0 2px 10px var(--accent-10);
}
.amc-service-check:hover:not(:has(input:checked)) {
  border-color: var(--border-accent);
  background: var(--bg-elevated);
}

/* ── 12. Scroll container utility ───────────────────────────────── */
.scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-20) transparent;
}
.scroll-thin::-webkit-scrollbar { width: 5px; }
.scroll-thin::-webkit-scrollbar-thumb {
  background: var(--accent-20);
  border-radius: 999px;
}

/* ── 13. Number input — hide spinner ─────────────────────────────── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ── 14. Search input with icon ──────────────────────────────────── */
input[type="search"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 13px center;
  background-size: 16px;
  padding-left: 40px;
}

/* ── 15. Input groups ────────────────────────────────────────────── */
.input-group {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1.5px solid var(--border);
  transition: border-color .2s ease, box-shadow .2s ease;
  background: var(--bg-surface);
}
.input-group:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-15);
}
.input-group input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  flex: 1;
}
.input-group-prefix, .input-group-suffix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  font-family: var(--font-nav);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.input-group-suffix { border-right: none; border-left: 1px solid var(--border); }

/* ── 16. Admin form improvements ─────────────────────────────────── */
.admin-form .row { margin-bottom: 20px; }
.admin-form label:first-child {
  display: block;
  font-family: var(--font-nav);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.admin-form .chk label { font-size: .88rem; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 500; color: var(--text-secondary); }

/* Focus label highlight */
.admin-form .row:focus-within > label:first-child,
.modal-field:focus-within > label:first-child {
  color: var(--accent) !important;
}

/* ── 17. Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .priority-selector { grid-template-columns: 1fr; }
}