/* ============================================================
   forms.css — Unified Field Design System   v1
   Single source of truth for all form field appearance.
   Load BEFORE style.css (on base.html pages) or standalone
   on portal pages alongside portal.css.
   ============================================================ */

/* ── Field design tokens — defaults (indigo/portal theme) ─── */
:root {
  --f-bg:               #ffffff;
  --f-border:           #d1d5db;
  --f-text:             #1e293b;
  --f-placeholder:      #94a3b8;
  --f-radius:           8px;
  --f-font-size:        0.9rem;
  --f-padding:          9px 12px;
  --f-primary:          #4f46e5;
  --f-primary-bg:       #eff0ff;
  --f-focus-shadow:     rgba(79, 70, 229, 0.12);
  --f-card-bg:          #ffffff;
  --f-panel-shadow:     0 8px 28px rgba(0, 0, 0, 0.14);
  --f-option-hover-bg:  #eff0ff;
  --f-option-hover-col: #3730a3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --f-bg:               #1e293b;
    --f-border:           #475569;
    --f-text:             #e2e8f0;
    --f-placeholder:      #64748b;
    --f-primary:          #818cf8;
    --f-primary-bg:       rgba(79, 70, 229, 0.18);
    --f-focus-shadow:     rgba(129, 140, 248, 0.20);
    --f-card-bg:          #1e293b;
    --f-panel-shadow:     0 8px 28px rgba(0, 0, 0, 0.35);
    --f-option-hover-bg:  rgba(79, 70, 229, 0.18);
    --f-option-hover-col: #a5b4fc;
  }
}

/* ── Base element rules ─────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="search"],
select,
textarea {
  padding: var(--f-padding);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  font-size: var(--f-font-size);
  width: 100%;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--f-bg);
  color: var(--f-text);
  box-sizing: border-box;
}

input::placeholder,
textarea::placeholder {
  color: var(--f-placeholder);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--f-primary);
  box-shadow: 0 0 0 3px var(--f-focus-shadow);
}

textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.6;
}

/* ── Native select — custom chevron decoration ─────────────── */
select {
  appearance: none;
  -webkit-appearance: none;
  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='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  select {
    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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }
}

/* ── Custom Select Component (.custom-select) ──────────────── */
/* Triggered by app.js initCustomSelects() — hides native
   <select> and builds a styled panel from its options.      */

.cs-wrap {
  position: relative;
  display: inline-block;
}

.cs-wrap[style*="100%"],
.cs-wrap.cs-full-wrap { width: 100%; }

.cs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  /* Asymmetric padding: right is smaller to leave room for chevron */
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  background: var(--f-bg);
  color: var(--f-text);
  font-size: var(--f-font-size);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  box-sizing: border-box;
}

.cs-trigger:hover {
  border-color: var(--f-primary);
}

.cs-wrap.cs-open .cs-trigger {
  border-color: var(--f-primary);
  box-shadow: 0 0 0 3px var(--f-focus-shadow);
}

.cs-trigger.cs-active {
  color: var(--f-text);
  font-weight: 500;
}

.cs-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-panel {
  display: none;
  /* Default position is absolute relative to .cs-wrap; the JS overrides
     to position: fixed when opened, so the panel can escape any ancestor
     with overflow: auto/hidden/clip (e.g. .table-responsive). */
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--f-card-bg);
  /* Indigo border + soft shadow — matches the .combo-dropdown look used on
     join.hpbteaching.app and the programme-page filters. */
  border: 1px solid var(--f-primary);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  overflow: hidden;
  padding: 4px 0;
}

.cs-wrap.cs-open .cs-panel {
  display: block;
}

.cs-option {
  padding: 8px 14px;
  font-size: 0.875rem;
  color: var(--f-text);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}

.cs-option:hover {
  background: var(--f-option-hover-bg);
  color: var(--f-option-hover-col);
}

.cs-option.cs-selected {
  color: var(--f-primary);
  font-weight: 600;
  background: var(--f-option-hover-bg);
}

/* Group label — matches .combo-group-label on join page (indigo color,
   tinted band, visible top border between groups). */
.cs-optgroup {
  padding: 6px 12px 2px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--f-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--f-primary-bg);
  pointer-events: none;
}
.cs-optgroup + .cs-option { padding-left: 16px; }
.cs-option + .cs-optgroup { margin-top: 2px; border-top: 1px solid var(--f-border); }

/* ── Label utility ─────────────────────────────────────────── */
.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--f-text);
}

/* ── Mobile touch targets ──────────────────────────────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="number"],
  input[type="search"],
  textarea,
  .cs-trigger {
    min-height: 44px;
    font-size: 16px; /* prevents iOS auto-zoom */
  }
}