/* Vision Module — Residual Styles
   Layout and form classes have been migrated to Tailwind CSS.
   This file retains only styles needed for JS-injected content
   and interactive states not expressible in static Tailwind classes.
*/

/* -------------------------------------------------------
   Filter chip active state
   Used by plat-filter and formula-eye-choice JS toggles
   ------------------------------------------------------- */
.choice.active {
  background: #EEF2FF; /* indigo-50 */
  border-color: #4F46E5; /* indigo-600 */
  color: #4338CA; /* indigo-700 */
}

/* -------------------------------------------------------
   Platform table (JS-rendered)
   Styles for the IOL comparison table injected by renderPlatforms()
   ------------------------------------------------------- */
#platform-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#platform-table th {
  background: #F8FAFC;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid #E2E8F0;
  white-space: nowrap;
}

#platform-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #F1F5F9;
  color: #334155;
  vertical-align: middle;
}

#platform-table tr:last-child td {
  border-bottom: none;
}

#platform-table tr:hover td {
  background: #F8FAFC;
}

#platform-table .badge-stock {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  background: #D1FAE5;
  color: #065F46;
}

#platform-table .badge-negative {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  background: #EDE9FE;
  color: #5B21B6;
}

/* -------------------------------------------------------
   ToTA result block (JS-rendered)
   ------------------------------------------------------- */
#tota-result .tota-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

#tota-result .tota-power {
  font-size: 28px;
  font-weight: 900;
  color: #0F172A;
}

#tota-result .tota-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* -------------------------------------------------------
   Biometry auto-fill grid items (JS-rendered)
   ------------------------------------------------------- */
#fbio-od-grid .bio-item,
#fbio-os-grid .bio-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#fbio-od-grid .bio-label,
#fbio-os-grid .bio-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94A3B8;
}

#fbio-od-grid .bio-value,
#fbio-os-grid .bio-value {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------
   Final report output (JS-rendered)
   ------------------------------------------------------- */
#final-report h2 {
  font-size: 18px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #E2E8F0;
}

#final-report h3 {
  font-size: 13px;
  font-weight: 700;
  color: #4338CA;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 20px 0 8px;
}

#final-report table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 12px;
}

#final-report td, #final-report th {
  padding: 7px 10px;
  border: 1px solid #E2E8F0;
  text-align: left;
}

#final-report th {
  background: #F8FAFC;
  font-weight: 700;
  font-size: 11px;
  color: #64748B;
  text-transform: uppercase;
}

/* -------------------------------------------------------
   Print styles
   ------------------------------------------------------- */
@media print {
  body > *:not(#final-report) { display: none !important; }
  #final-report { display: block !important; }
}

/* -------------------------------------------------------
   SIA result block (JS-rendered)
   ------------------------------------------------------- */
#sia-result .sia-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 20px;
}

#sia-result .sia-vector {
  font-size: 28px;
  font-weight: 900;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}

#sia-result .sia-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* -------------------------------------------------------
   KC funnel / benchmark (JS-rendered)
   ------------------------------------------------------- */
#kc-funnel .kc-card,
#benchmark .bm-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
}

#kc-funnel .kc-risk-low  { color: #065F46; background: #D1FAE5; border-color: #6EE7B7; }
#kc-funnel .kc-risk-mod  { color: #92400E; background: #FEF3C7; border-color: #FCD34D; }
#kc-funnel .kc-risk-high { color: #7F1D1D; background: #FEE2E2; border-color: #FCA5A5; }

#kc-funnel .kc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid currentColor;
}

/* -------------------------------------------------------
   Choice chip base style (active state defined at top)
   ------------------------------------------------------- */
.choice {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: white;
  color: #475569;
  transition: all 0.2s;
  user-select: none;
  line-height: 1;
}

.choice:hover {
  border-color: #818CF8; /* indigo-400 */
  color: #4338CA;        /* indigo-700 */
  background: #EEF2FF;   /* indigo-50 */
}

/* active state is defined at the top of this file */

/* -------------------------------------------------------
   Upload dropzone (JS drag-active state only —
   static styles are in Tailwind on the element)
   ------------------------------------------------------- */
.dropzone.drag-active {
  border-color: #6366F1 !important; /* indigo-500 */
  background: #EEF2FF !important;   /* indigo-50 */
  transform: scale(1.005);
}