/* ============================================================
   premium-forms.css
   ------------------------------------------------------------
   Brand-uniform form-control system. Loaded on every page that
   has inputs, selects, textareas, or scrollable surfaces — kills
   every browser-default blue focus halo, sky-blue autofill flash,
   native chevron, and light-grey scrollbar in one sweep.

   Token palette (kept self-contained so this file works on any
   page regardless of its own --vars):
     · panel        rgba(8, 12, 20, .68)
     · panel-solid  #0b1220
     · border       rgba(255,255,255,.08)
     · border-strong rgba(255,255,255,.18)
     · text         #e5e7eb / dim #94a3b8 / mute #64748b
     · brand-cyan   #22d3ee
     · brand-red    #ef4444
     · brand-violet #a78bfa
     · brand-amber  #fbbf24
   ============================================================ */

/* ── color-scheme: dark — forces Chrome / Firefox / Safari to
   render the OPEN dropdown panel of <select> in dark mode (no
   sky-blue Chrome default). Affects ALL native UI on the page —
   scrollbars, date pickers, select panels, autofill popups. We
   set it page-wide AND on each form control as a safety net for
   pages that override `color-scheme` elsewhere. */
:root, html, body { color-scheme: dark; }
input, textarea, select, button, ::picker(select) { color-scheme: dark; }

/* ── Base inputs / textareas / selects ─────────────────────── */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input:not([type]),
textarea,
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: rgba(3, 7, 18, .72);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 11px 13px;
  line-height: 1.4;
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
  caret-color: #67e8f9;
  outline: none;
}

textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.55;
}

/* iOS auto-zoom defense — inputs at <16px trigger Safari to zoom on focus */
@media (max-width: 720px) {
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px;
  }
}

/* Hover — subtle border lift */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
input:not([type]):hover,
textarea:hover,
select:hover {
  border-color: rgba(255, 255, 255, .18);
}

/* Focus — brand-cyan ring + glow, REPLACES browser default outline */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input:not([type]):focus,
textarea:focus,
select:focus,
input[type="text"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: rgba(34, 211, 238, .55);
  background: rgba(3, 7, 18, .92);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .15);
}

/* Placeholder — slate-mute, italic-friendly */
input::placeholder,
textarea::placeholder {
  color: #475569;
  opacity: 1;
  font-weight: 400;
}

/* Disabled state */
input:disabled,
textarea:disabled,
select:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: rgba(3, 7, 18, .4);
}

/* Read-only — slightly dimmed but still legible */
input:read-only,
textarea:read-only {
  background: rgba(0, 0, 0, .35);
  color: #cbd5e1;
}

/* Invalid state (form validation) — soft red, no harsh red box */
input:invalid:not(:placeholder-shown):not(:focus),
textarea:invalid:not(:placeholder-shown):not(:focus) {
  border-color: rgba(239, 68, 68, .45);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, .1);
}

/* ── Native dropdown chevron — custom SVG so the select doesn't
   render the OS-default chevron (which clashes hard on dark UIs) */
select {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}
select:hover {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2367e8f9' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Option panel itself can't be themed cross-browser (Chrome ignores
   it on macOS), but we can theme the option text on platforms that
   honor it (Linux, some Chromium builds). */
select option,
select optgroup {
  background: #0b1220;
  color: #e5e7eb;
}

/* Date / time pickers — kill the cyan filter Chrome puts on the
   calendar / clock icon by default. Renders the icon white. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(70%) sepia(11%) saturate(316%) hue-rotate(176deg) brightness(94%) contrast(89%);
  cursor: pointer;
  opacity: .85;
  transition: opacity .15s, filter .15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  filter: invert(82%) sepia(58%) saturate(394%) hue-rotate(154deg) brightness(98%) contrast(91%);
}

/* Search input — kill the Safari "X" clear button (we'll add our own
   if needed; the native one is ugly + inconsistent) */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Number input — kill the up/down spinner buttons (always ugly,
   never themed) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* ── Autofill — kill the yellow Chrome flash + the bright blue
   highlight ring. Use webkit's clip trick so the text + bg stay
   our brand colors even after autocomplete. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(3, 7, 18, .92) inset !important;
  box-shadow: 0 0 0 1000px rgba(3, 7, 18, .92) inset !important;
  caret-color: #67e8f9 !important;
  border-color: rgba(255, 255, 255, .12) !important;
  transition: background-color 99999s ease-in-out 0s, color 99999s ease-in-out 0s;
}

/* ── Checkboxes + radios ───────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(255, 255, 255, .22);
  background: rgba(3, 7, 18, .8);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all .15s;
}
input[type="checkbox"] { border-radius: 4px; }
input[type="radio"]    { border-radius: 50%; }
input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: rgba(34, 211, 238, .5);
  background: rgba(34, 211, 238, .04);
}
input[type="checkbox"]:checked {
  background: #22d3ee
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-6' stroke='%23030712' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 11px no-repeat;
  border-color: #22d3ee;
  box-shadow: 0 0 10px rgba(34, 211, 238, .4);
}
input[type="radio"]:checked {
  border-color: #22d3ee;
  background: rgba(34, 211, 238, .12);
}
input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 8px rgba(34, 211, 238, .7);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .15);
}

/* ── Range slider ──────────────────────────────────────────── */
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  height: 22px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #22d3ee, rgba(255, 255, 255, .08));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #22d3ee;
  box-shadow: 0 0 10px rgba(34, 211, 238, .55);
  margin-top: -6px;
  cursor: pointer;
  transition: transform .12s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid #22d3ee;
  box-shadow: 0 0 10px rgba(34, 211, 238, .55);
  cursor: pointer;
}

/* ── File input ────────────────────────────────────────────── */
input[type="file"] {
  appearance: none;
  font-size: 12.5px;
  color: #94a3b8;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
  appearance: none;
  background: linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(34, 211, 238, .06));
  color: #67e8f9;
  border: 1px solid rgba(34, 211, 238, .35);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  margin-right: 12px;
  transition: background .15s, border-color .15s;
}
input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover {
  background: linear-gradient(135deg, rgba(34, 211, 238, .3), rgba(34, 211, 238, .12));
  border-color: rgba(34, 211, 238, .6);
  color: #fff;
}

/* ── Selection highlight ───────────────────────────────────── */
::selection {
  background: rgba(34, 211, 238, .35);
  color: #fff;
}
::-moz-selection {
  background: rgba(34, 211, 238, .35);
  color: #fff;
}

/* ── Scrollbars — slim, brand-tinted, dark ─────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .25) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .22);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background .15s;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(34, 211, 238, .4);
  background-clip: content-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
/* Slim horizontal scroll inside .overflow-x-auto containers — even
   skinnier so the table chrome doesn't dominate the row */
.overflow-x-auto::-webkit-scrollbar,
[class*="overflow-x"]::-webkit-scrollbar { height: 6px; }
.overflow-x-auto::-webkit-scrollbar-thumb,
[class*="overflow-x"]::-webkit-scrollbar-thumb {
  background: rgba(34, 211, 238, .25);
  background-clip: padding-box;
  border-radius: 4px;
}

/* ── Touch targets — never smaller than 44px on coarse pointers
   (WCAG 2.5.5 + iOS HIG). Applies to every interactive control. */
@media (hover: none) and (pointer: coarse) {
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  button {
    min-height: 44px;
  }
}