/*
  TRUE Provenance CMS — Form Contrast Override
  File: form-contrast.css
  Date: 2026-06-12
  Purpose: Field usability fix for all verticals.
           Dark-room readable. Replaces #1c1c1c input backgrounds
           with high-contrast alternatives.
  
  Import in index.html AFTER Vite bundle:
  <link rel="stylesheet" href="/form-contrast.css">
  
  Or add to src/index.css as the final import.
*/

/* ── CSS CUSTOM PROPERTIES ──────────────────────────────────────────────────── */
:root {
  /* TRUE palette */
  --true-espresso:   #1A0F0A;
  --true-bone:       #F0ECE2;
  --true-orange:     #C44A1A;
  --true-dim:        #2A1810;
  --true-mid:        #7A5C4E;
  --true-hairline:   #2E1E16;

  /* High-contrast form tokens */
  --form-bg:         #2C1C12;   /* was #1c1c1c — warmer, lighter, readable */
  --form-bg-focus:   #381E10;   /* on focus — visible lift */
  --form-border:     #5A3A28;   /* was #2e2e2e — now clearly visible */
  --form-border-focus: #C44A1A; /* orange on focus */
  --form-text:       #F0ECE2;   /* bone — full brightness */
  --form-placeholder:#6A4A38;   /* was invisible — now readable */
  --form-label:      #F0ECE2;   /* bone — full brightness */
  --form-hint:       #9A7060;   /* was #6a6660 — brighter */
  --form-disabled-bg:#1E1008;
  --form-disabled-text: #4A3028;

  /* Tab tokens */
  --tab-inactive:    #9A7A6A;   /* was #7a7670 — much more readable */
  --tab-active:      #C44A1A;   /* orange — unchanged */
  --tab-border:      #3A2018;   /* was #1a1a1a — visible */

  /* Section tokens */
  --section-subtitle: #9A8070;  /* was #6a6660 — readable italic */
  --section-title:   #C8A96E;   /* gold — unchanged */
}

/* ── INPUT, SELECT, TEXTAREA — ALL VERTICALS ─────────────────────────────────*/
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  background: var(--form-bg) !important;
  border: 1px solid var(--form-border) !important;
  color: var(--form-text) !important;
  padding: 10px 12px !important;    /* was 8px 10px — larger tap target */
  border-radius: 3px !important;
  font-size: 13px !important;       /* was 12px — more readable */
  font-family: 'Courier New', monospace !important;
  width: 100% !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, background 0.15s !important;
  -webkit-appearance: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  background: var(--form-bg-focus) !important;
  border-color: var(--form-border-focus) !important;
  box-shadow: 0 0 0 1px rgba(196, 74, 26, 0.2) !important;
}

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

/* Select arrow visibility */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C44A1A' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
}

select option {
  background: #2C1C12 !important;
  color: #F0ECE2 !important;
}

/* Disabled inputs */
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--form-disabled-bg) !important;
  color: var(--form-disabled-text) !important;
  border-color: #2A1A10 !important;
  cursor: not-allowed !important;
}

/* ── FIELD LABELS ─────────────────────────────────────────────────────────────*/
/* VTAG: flabel, GLAM: fieldLabel pattern */
[style*="letterSpacing:2"][style*="fontSize:9"],
[style*="letter-spacing:2"][style*="font-size:9"] {
  color: var(--form-label) !important;
}

/* Broader label catch */
div[style*="marginBottom:4"][style*="fontWeight:600"],
div[style*="margin-bottom:4"][style*="font-weight:600"] {
  color: var(--form-label) !important;
}

/* Hint text */
div[style*="fontStyle:italic"][style*="fontSize:11"],
div[style*="font-style:italic"][style*="font-size:11"] {
  color: var(--form-hint) !important;
}

/* Section subtitles */
div[style*="fontStyle:`italic`"],
div[style*="font-style:italic"][style*="color:`#6a6660`"] {
  color: var(--section-subtitle) !important;
}

/* ── TAB BAR ──────────────────────────────────────────────────────────────────*/
/* Section navigation tabs — make inactive tabs clearly readable */
div[style*="display:`flex`"][style*="borderBottom"] button,
div[style*="display:flex"][style*="border-bottom"] button {
  color: var(--tab-inactive) !important;
}

/* Active tab highlight */
button[style*="color:`#c8a96e`"],
button[style*="color: rgb(200, 169, 110)"] {
  color: var(--tab-active) !important;
}

/* ── PHOTO SLOTS ──────────────────────────────────────────────────────────────*/
/* Make empty photo slots visible */
div[style*="borderColor:`#2a2a2a`"],
div[style*="border-color: rgb(42, 42, 42)"] {
  border-color: var(--form-border) !important;
}

/* Photo slot labels and hints */
div[style*="pslabel"], div[style*="pshint"],
div[style*="photoSlotLabel"], div[style*="photoSlotHint"] {
  color: var(--form-hint) !important;
}

/* ── CHECKBOXES ───────────────────────────────────────────────────────────────*/
input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #C44A1A !important;
  cursor: pointer !important;
}

/* Checkbox label text */
span[style*="checklabel"],
label[style*="checklabel"],
span[style*="checkLabel"],
label[style*="checkLabel"] {
  color: #C0B8AE !important;   /* was #888 — visible */
}

/* ── CONDITION CRITERIA BOX ───────────────────────────────────────────────────*/
div[style*="critbox"],
div[style*="conditionCriteria"] {
  background: #2C1C12 !important;
  border: 1px solid var(--form-border) !important;
  border-radius: 3px !important;
}

div[style*="critlabel"],
div[style*="conditionCriteriaLabel"] {
  color: var(--section-title) !important;
}

div[style*="crittext"],
div[style*="conditionCriteriaText"] {
  color: #B0A898 !important;   /* was invisible */
}

/* ── EMPTY STATES ─────────────────────────────────────────────────────────────*/
div[style*="emptyprov"],
div[style*="emptyProv"] {
  color: var(--form-hint) !important;
  border: 1px dashed var(--form-border) !important;
  padding: 16px !important;
  border-radius: 3px !important;
  text-align: center !important;
}

/* ── PROVENANCE / CUSTODY ENTRY BLOCKS ───────────────────────────────────────*/
div[style*="proventry"],
div[style*="provEntry"] {
  background: #241410 !important;
  border: 1px solid var(--form-border) !important;
  border-radius: 3px !important;
  padding: 16px !important;
  margin-bottom: 10px !important;
}

div[style*="proventryhd"],
div[style*="provEntryHead"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

div[style*="proventrynum"],
div[style*="provEntryNum"] {
  color: var(--section-title) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
}

/* Gap badge */
span[style*="gapbadge"],
span[style*="gapBadge"] {
  background: rgba(239, 83, 80, 0.15) !important;
  color: #ef5350 !important;
  border: 1px solid rgba(239, 83, 80, 0.4) !important;
  padding: 2px 8px !important;
  border-radius: 2px !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
}

/* ── CHAR COUNT ───────────────────────────────────────────────────────────────*/
div[style*="charcount"],
div[style*="charCount"] {
  color: #6A5048 !important;  /* was #555 — slightly brighter */
  font-size: 10px !important;
  text-align: right !important;
  margin-top: 4px !important;
}

/* ── REVIEW GRID ──────────────────────────────────────────────────────────────*/
div[style*="reviewgrid"],
div[style*="reviewGrid"] {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

/* Review field items */
div[style*="sblabel"] {
  color: var(--form-hint) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
}

div[style*="sbval"] {
  color: var(--form-text) !important;
  font-size: 12px !important;
}

/* ── AUTH CONFIRM BOX ─────────────────────────────────────────────────────────*/
div[style*="authbox"],
div[style*="authConfirmBox"] {
  background: #241410 !important;
  border: 1px solid var(--form-border) !important;
  border-radius: 3px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}

/* ── MULTI-SELECT TOGGLE BUTTONS ─────────────────────────────────────────────*/
button[style*="accentColor"] {
  border-radius: 2px !important;
  font-size: 10px !important;
  padding: 5px 10px !important;
  cursor: pointer !important;
  transition: all 0.12s !important;
}

/* ── NEXT/PREV NAVIGATION ────────────────────────────────────────────────────*/
div[style*="secnavfooter"],
div[style*="secNavFooter"] {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 32px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--form-border) !important;
}

/* ── GLOBAL BODY CONTRAST FLOOR ──────────────────────────────────────────────*/
/* Anything rendering in dark grey text gets a contrast lift */
[style*="color:`#555`"],
[style*="color: rgb(85, 85, 85)"],
[style*="color:`#888`"],
[style*="color: rgb(136, 136, 136)"] {
  color: #8A7060 !important;  /* lift dark grey text to readable range */
}

[style*="color:`#6a6660`"],
[style*="color: rgb(106, 102, 96)"] {
  color: var(--form-hint) !important;
}

/* Footer permanence text — keep dim but readable */
[style*="color:`#2a2a24`"] {
  color: #4A3A30 !important;  /* was #2a2a24 — nearly invisible */
}

/* ── MOBILE FIELD SIZE BOOST ─────────────────────────────────────────────────*/
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;   /* prevents iOS zoom on focus */
    padding: 12px 14px !important; /* larger tap targets in field */
  }

  /* Field labels bigger on mobile */
  div[style*="letterSpacing:2"][style*="fontSize:9"] {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }
}