/* ==========================================================================
   forms.css
   Shared dark-theme form system for the i.G.C. Portal.
   This file intentionally loads AFTER main.css so it wins globally.
   ========================================================================== */

:root{
  --form-bg:#141821;
  --form-bg-soft:#1b1f2a;
  --form-bg-focus:#10141d;
  --form-text:#f4f4ff;
  --form-muted:rgba(244,244,255,.62);
  --form-border:rgba(255,255,255,.16);
  --form-border-hover:rgba(255,255,255,.26);
  --form-focus:#46d4ff;
  --form-focus-soft:rgba(70,212,255,.16);
  --form-danger:#ef4444;
  --form-ok:#22c55e;
  --form-radius:14px;
  --form-min-height:44px;
}

input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]),
textarea,
select{
  width:100%;
  max-width:100%;
  min-height:var(--form-min-height);
  padding:10px 12px;
  border-radius:var(--form-radius);
  border:1px solid var(--form-border);
  background-color:var(--form-bg) !important;
  background:var(--form-bg) !important;
  color:var(--form-text) !important;
  caret-color:var(--form-text);
  font-size:16px;
  line-height:1.35;
  outline:none;
  box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

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

input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,
textarea:hover,
select:hover{ border-color:var(--form-border-hover); }

input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
textarea:focus,
select:focus{
  border-color:var(--form-focus) !important;
  background:var(--form-bg-focus) !important;
  box-shadow:0 0 0 3px var(--form-focus-soft) !important;
}

input::placeholder,
textarea::placeholder{ color:var(--form-muted); opacity:1; }

/* Native dropdown fix: every portal select, every option, every browser that decides to be difficult. */
select,
select *{
  color-scheme:dark;
}

select option,
select optgroup,
option,
optgroup{
  background-color:#151a24 !important;
  background:#151a24 !important;
  color:#f4f4ff !important;
}

select option:checked,
select option:hover,
option:checked,
option:hover{
  background-color:#22314a !important;
  background:#22314a !important;
  color:#ffffff !important;
}

select optgroup,
optgroup{
  color:#46d4ff !important;
  font-weight:900;
}

input[type=file]{
  width:100%;
  max-width:100%;
  min-height:var(--form-min-height);
  padding:8px 10px;
  border-radius:var(--form-radius);
  border:1px solid var(--form-border);
  background:var(--form-bg) !important;
  color:var(--form-text) !important;
}

input[type=file]::file-selector-button{
  margin-right:12px;
  border:1px solid rgba(70,212,255,.28);
  border-radius:11px;
  background:rgba(70,212,255,.14);
  color:var(--form-text);
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
}
input[type=file]::file-selector-button:hover{ background:rgba(70,212,255,.22); }

input[type=checkbox],
input[type=radio]{ width:16px; height:16px; min-width:16px; accent-color:var(--form-focus); }

input:disabled,
textarea:disabled,
select:disabled,
input[readonly],
textarea[readonly]{ opacity:.62; cursor:not-allowed; background:rgba(255,255,255,.045) !important; }

.input,.projInput,.projSelect,.ideaInput,.ideaSelect,.ideaTextarea,.feedbackInput,.feedbackSelect,.feedbackTextarea,.feedbackFile,
.taskInput,.taskTextarea,.taskSelect,.igm-input,.igm-select,.igm-textarea,.igm-admin-input,.igm-admin-select,.igm-admin-textarea,
.igm-artist-input,.igm-artist-select,.igm-artist-textarea,.igm-app-select,.igm-app-textarea,.igm-discovery-input,.igm-discovery-select,
.igm-discovery-textarea,.igm-submissions-input,.igm-submissions-select,.igm-submissions-textarea,.hm-input,.hm-select,.hm-textarea{
  background:var(--form-bg) !important;
  color:var(--form-text) !important;
  border-color:var(--form-border) !important;
  border-radius:var(--form-radius) !important;
}

.ideaSelect option,.feedbackSelect option,.projSelect option,.taskSelect option,.igm-select option,.igm-admin-select option,.igm-artist-select option,
.igm-app-select option,.igm-discovery-select option,.igm-submissions-select option,.hm-select option{
  background:#151a24 !important;
  color:#f4f4ff !important;
}

.form-help,.form-hint,.help-text{ margin-top:5px; color:var(--form-muted); font-size:12px; line-height:1.4; }
.form-error{ margin-top:6px; color:#fecaca; font-size:12px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-stack{ display:grid; gap:14px; }
.field,.form-field{ display:grid; gap:7px; }
.label,.form-label{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(233,238,252,.72); font-weight:850; }

/* Tom Select dark mode */
.ts-wrapper{ width:100%; color:var(--form-text); }
.ts-control{
  min-height:var(--form-min-height) !important;
  border-radius:var(--form-radius) !important;
  border:1px solid var(--form-border) !important;
  background:var(--form-bg) !important;
  color:var(--form-text) !important;
  box-shadow:none !important;
}
.ts-control input{ color:var(--form-text) !important; background:transparent !important; }
.ts-control .item{ border-radius:999px !important; border:1px solid rgba(70,212,255,.22) !important; background:rgba(70,212,255,.10) !important; color:var(--form-text) !important; }
.ts-dropdown{ background:rgba(12,15,22,.98) !important; border:1px solid var(--form-border) !important; border-radius:var(--form-radius) !important; color:var(--form-text) !important; overflow:hidden; }
.ts-dropdown .option{ color:var(--form-text) !important; padding:10px 12px !important; }
.ts-dropdown .option.active,.ts-dropdown .active{ background:rgba(70,212,255,.13) !important; color:#fff !important; }

@media (max-width:820px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]),
  textarea,select{ min-height:46px; font-size:16px; }
  .form-row{ grid-template-columns:1fr; }
}

/* Mission Control Phase 3C - Global Form Visibility Fix */
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="url"],
input[type="tel"]{
  color:#f8fbff !important;
  background:#101722 !important;
  border:1px solid rgba(148,163,184,.28) !important;
  border-radius:12px;
}
select option,
select optgroup{
  color:#f8fbff !important;
  background:#101722 !important;
}
select:focus,
textarea:focus,
input:focus{
  outline:none !important;
  border-color:rgba(56,189,248,.62) !important;
  box-shadow:0 0 0 3px rgba(56,189,248,.16) !important;
}
::placeholder{ color:#7f8da8 !important; }