/* ──────────────────────────────────────────────────────────────
   forms.css — Apple-style global form fields (site-wide)
   Loaded on every layout: admin, dashboard, clinic-dashboard, and
   the public page.tpl.php. Uses element + attribute selectors so
   specificity beats single-class Tailwind utilities.
   ────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  font-family: var(--ocd-font-ui);
  font-size: 15px;
  line-height: 1.4;
  color: #0f172a;                         /* slate-900 */
  background: #ffffff;
  border: 1px solid #e2e8f0;              /* slate-200 hairline */
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

textarea {
  min-height: 120px;
  padding: 14px 16px;
  line-height: 1.55;
  resize: vertical;
}

select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* Hover — subtle lift */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
select:hover,
textarea:hover {
  border-color: #cbd5e1;                  /* slate-300 */
}

/* Focus — soft iOS-style ring */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
  border-color: #3D9E78;                  /* green-500 */
  box-shadow: 0 0 0 4px rgba(45, 150, 80, 0.12);
  background: #ffffff;
}

/* Placeholder — gentle hint text */
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: #94a3b8;                         /* slate-400 */
  font-weight: 400;
  opacity: 1;
}

/* Disabled */
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
input[type="number"]:disabled,
select:disabled,
textarea:disabled {
  background: #f8fafc;                    /* slate-50 */
  color: #94a3b8;
  cursor: not-allowed;
  border-color: #e2e8f0;
  box-shadow: none;
}

/* Read-only */
input[readonly],
textarea[readonly] {
  background: #f8fafc;
  color: #475569;                         /* slate-600 */
}

/* Small variant — opt-in via .ocd-input--sm or [data-size="sm"] */
input.ocd-input--sm,
select.ocd-input--sm,
textarea.ocd-input--sm,
input[data-size="sm"],
select[data-size="sm"],
textarea[data-size="sm"] {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 10px;
}

/* Inputs inside the legacy .ocd-input-wrap already have sizing —
   keep them at 44px so dashboards don't suddenly jump taller. */
.ocd-input-wrap input[type="text"],
.ocd-input-wrap input[type="email"],
.ocd-input-wrap input[type="password"],
.ocd-input-wrap input[type="tel"],
.ocd-input-wrap input[type="url"],
.ocd-input-wrap input[type="number"],
.ocd-input-wrap textarea,
.ocd-input-wrap select {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
}

/* Tables, toolbars, and inline search bars often want a tight field.
   Inputs inside these ancestors shrink automatically. */
th input[type="text"],
th input[type="search"],
td input[type="text"],
td input[type="search"],
.ocd-table input[type="text"],
.ocd-table input[type="search"],
.ocd-toolbar input[type="text"],
.ocd-toolbar input[type="search"] {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 8px;
}