/* ═══════════════════════════════════════════════════════
   804 AVENUE — Form UI extras
   Core select/input/checkbox styling now in ui-modern.css
   This file keeps nav-dropdown, catalog, and theme-switcher overrides
   ═══════════════════════════════════════════════════════ */

/* ----- Admin form font size overrides ----- */
.admin-form select:not([multiple]) { font-size: 0.92rem; }
.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="url"],
.admin-form input[type="number"],
.admin-form input[type="password"],
.admin-form textarea { font-size: 0.92rem; }

/* ----- Navbar services dropdown ----- */
.nav-dropdown-menu {
  padding: 6px 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(165deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border: 1px solid var(--border);
  box-shadow:
    0 20px 50px rgba(15, 23, 42, 0.12),
    0 0 0 1px var(--accent-10),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.nav-dropdown-menu::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  opacity: 0.95;
}

.nav-dropdown-menu a {
  position: relative;
  margin: 2px 6px;
  border-radius: var(--radius-sm);
  padding: 12px 16px !important;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {
  background: linear-gradient(90deg, var(--accent-10), transparent) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

.nav-dropdown-menu a.active {
  background: linear-gradient(90deg, var(--accent-15), transparent) !important;
  color: var(--accent) !important;
  font-weight: 700;
}

/* ----- Catalog / filter chips (properties page) ----- */
.catalog-toolbar a {
  border-radius: 999px !important;
  padding: 10px 20px !important;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.catalog-toolbar a:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.catalog-toolbar a.active {
  background: linear-gradient(135deg, var(--accent-15), var(--accent-10)) !important;
  border-color: var(--border-accent) !important;
  box-shadow: 0 4px 16px var(--accent-glow);
}

/* ----- Theme switcher ----- */
.theme-switcher-btn {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-elevated)) !important;
  border: 1px solid var(--border-accent) !important;
  box-shadow:
    0 4px 16px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

.theme-switcher-btn:hover {
  background: linear-gradient(145deg, var(--bg-elevated), var(--bg-card)) !important;
}

.theme-panel {
  background: linear-gradient(165deg, var(--bg-card) 0%, var(--bg-elevated) 100%) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 24px 56px rgba(15, 23, 42, 0.14),
    0 0 0 1px var(--accent-10),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* ----- Validation states ----- */
.admin-form input.input-validation-error,
.admin-form select.input-validation-error,
.admin-form textarea.input-validation-error,
.modal-field input.input-validation-error,
.modal-field select.input-validation-error,
.modal-field textarea.input-validation-error {
  border-color: rgba(220, 38, 38, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

/* ----- Textarea scrollbar ----- */
.admin-form textarea,
.modal-field textarea {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-20) transparent;
}

.admin-form textarea::-webkit-scrollbar,
.modal-field textarea::-webkit-scrollbar { width: 5px; }

.admin-form textarea::-webkit-scrollbar-thumb,
.modal-field textarea::-webkit-scrollbar-thumb {
  background: var(--accent-20);
  border-radius: 999px;
}

/* ----- Focus label in modal fields ----- */
.modal-field:focus-within > label:first-child,
.admin-form .row:focus-within > label:first-of-type {
  color: var(--accent);
  transition: color 0.2s ease;
}

/* ----- Modal field select option ----- */
.modal-field select option { background: var(--bg-card); color: var(--text-primary); }

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  select:not([multiple]),
  .catalog-toolbar a,
  .nav-dropdown-menu a,
  .theme-switcher-btn,
  .theme-option,
  .modal-field input,
  .modal-field textarea,
  .admin-form input,
  .admin-form textarea {
    transition: none !important;
  }
}