/* css/ea-audit.css — NBC-AE 2019 s.9.36 form styling */

/* ── Form containers ────────────────────────────────────────────────────── */
.ea-form {
  text-align: left;
  font-size: 0.6em;
}
.ea-form table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.4em 0;
}
.ea-form th, .ea-form td {
  border: 1px solid #999;
  padding: 0.25em 0.4em;
  text-align: left;
  vertical-align: middle;
}
.ea-form th {
  background: #2a4365;
  color: #fff;
  font-weight: 600;
  font-size: 0.9em;
}
.ea-form td:first-child {
  font-weight: 500;
  white-space: nowrap;
}

/* ── Inputs (Project Info) ──────────────────────────────────────────────── */
.ea-form input[type="text"],
.ea-form input[type="number"],
.ea-form select {
  width: 100%;
  padding: 0.2em 0.3em;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1em;
  box-sizing: border-box;
  background: #fff;
}
.ea-form input:focus, .ea-form select:focus {
  outline: 2px solid #4299e1;
  border-color: #4299e1;
}

/* ── Section header row ─────────────────────────────────────────────────── */
.ea-section-hdr td {
  background: #1a365d;
  color: #fff;
  font-size: 0.95em;
  font-weight: 600;
  text-align: left;
  padding: 0.3em 0.5em;
}

/* ── Zone badge ─────────────────────────────────────────────────────────── */
.ea-zone {
  float: right;
  background: #e53e3e;
  color: #fff;
  padding: 0.05em 0.5em;
  border-radius: 3px;
  font-weight: 700;
}

/* ── Summary tables (section overview slides) ───────────────────────────── */
.ea-summary-table {
  width: 100%;
  border-collapse: collapse;
}
.ea-summary-table th,
.ea-summary-table td {
  border: 1px solid #999;
  padding: 0.35em 0.5em;
}
.ea-summary-table th {
  background: #2a4365;
  color: #fff;
}
.ea-summary-table tr.ea-pass td { background: #f0fff4; }
.ea-summary-table tr.ea-fail td { background: #fff5f5; color: #c53030; font-weight: 600; }
.ea-summary-table tr.ea-na td   { background: #f7fafc; color: #a0aec0; font-style: italic; }
.ea-summary-table tr.ea-unset td { background: #fffbeb; color: #975a16; }
.ea-summary-table .ea-req  { font-size: 0.85em; color: #718096; white-space: nowrap; }
.ea-summary-table .ea-check { text-align: center; font-size: 1.2em; white-space: nowrap; }

/* Drill-down arrow link */
.ea-drill {
  display: inline-block;
  text-decoration: none;
  color: #4299e1;
  font-size: 1.3em;
  font-weight: 700;
  margin-left: 0.3em;
  vertical-align: middle;
}
.ea-drill:hover { color: #2b6cb0; }

/* ── Validation colours ─────────────────────────────────────────────────── */
.ea-pass-msg   { color: #276749; font-weight: 600; }
.ea-fail-msg   { color: #c53030; font-weight: 600; }
.ea-warn-msg   { color: #975a16; font-weight: 600; }

/* ── Area input (trade-off) ─────────────────────────────────────────────── */
.ea-area-input {
  margin-top: 0.5em;
  padding: 0.4em 0.6em;
  background: #fefcbf;
  border: 1px solid #ecc94b;
  border-radius: 4px;
}
.ea-area-input label { font-weight: 500; color: #744210; }
.ea-area-input input {
  width: 8em;
  margin-left: 0.3em;
  padding: 0.2em 0.3em;
  border: 1px solid #d69e2e;
  border-radius: 3px;
  font-size: 1em;
}

/* ── Trade-off table ────────────────────────────────────────────────────── */
.ea-tradeoff-table { font-size: 0.9em; }
.ea-tradeoff-table th { font-size: 0.85em; }
.ea-tradeoff-table td { text-align: right; }
.ea-tradeoff-table td:first-child { text-align: left; }

/* ── Radio list (sub-slide option selector) ─────────────────────────────── */
.ea-radio-list {
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ea-radio-option {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.6em;
  margin: 0.25em 0;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.ea-radio-option:hover {
  border-color: #4299e1;
  background: #ebf8ff;
}
.ea-radio-option.ea-selected {
  border-color: #4299e1;
  background: #ebf8ff;
}
.ea-radio-option.ea-radio-na {
  border-style: dashed;
  color: #718096;
}
.ea-radio-option.ea-radio-na.ea-selected {
  border-color: #a0aec0;
  background: #f7fafc;
}

.ea-radio-option input[type="radio"] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

.ea-opt-name {
  flex: 1;
  font-weight: 500;
}
.ea-opt-value {
  font-family: monospace;
  font-size: 0.9em;
  color: #2d3748;
  white-space: nowrap;
}
.ea-opt-check {
  font-size: 1.2em;
  font-weight: 700;
}
.ea-opt-check.ea-pass { color: #38a169; }
.ea-opt-check.ea-fail { color: #e53e3e; }

/* Pass/fail tint on radio option cards */
.ea-radio-option.ea-opt-pass { border-left: 4px solid #38a169; }
.ea-radio-option.ea-opt-fail { border-left: 4px solid #e53e3e; }

/* Delete button on radio options */
.ea-btn-delete {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9em;
  opacity: 0.3;
  padding: 0.1em 0.3em;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.ea-btn-delete:hover { opacity: 1; }

/* ── Detail panel (shown for selected item) ─────────────────────────────── */
.ea-detail {
  margin: 0.3em 0 0.3em 2em;
  padding: 0.5em;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 0.95em;
}
.ea-detail-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.ea-detail-table td {
  border: none;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.2em 0.4em;
}
.ea-detail-table td:first-child {
  font-weight: 600;
  color: #4a5568;
  width: 40%;
}

/* ── Requirement reminder ───────────────────────────────────────────────── */
.ea-req-reminder {
  margin-top: 0.5em;
  padding: 0.4em 0.6em;
  background: #ebf8ff;
  border: 1px solid #bee3f8;
  border-radius: 4px;
  color: #2a4365;
  font-weight: 600;
  font-size: 0.95em;
}

/* ── Add-custom form ────────────────────────────────────────────────────── */
.ea-add-custom {
  margin: 0.4em 0;
}
.ea-btn-add {
  background: #edf2f7;
  color: #4a5568;
  border: 2px dashed #cbd5e0;
  font-weight: 500;
}
.ea-btn-add:hover { background: #e2e8f0; border-color: #a0aec0; }

.ea-add-form {
  position: fixed;
  top: 5vh;
  left: 5vw;
  right: 5vw;
  max-height: 90vh;
  z-index: 100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  padding: 0.6em;
  background: #fffff0;
  border: 1px solid #ecc94b;
  border-radius: 6px;
}
.ea-add-form h4 { margin: 0 0 0.4em; color: #744210; }

.ea-add-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3em;
}
.ea-add-fields label {
  display: grid;
  grid-template-columns: minmax(6em, 1fr) 3fr;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  font-size: 0.9em;
  color: #4a5568;
}
/* Info icon — clickable, toggles tooltip */
.ea-info {
  cursor: pointer;
  color: #4299e1;
  font-size: 0.85em;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}
.ea-info-tip {
  display: none;
  position: absolute;
  left: 1.5em;
  top: -0.3em;
  z-index: 110;
  background: #2d3748;
  color: #fff;
  font-weight: 400;
  font-size: 0.85em;
  padding: 0.4em 0.6em;
  border-radius: 4px;
  width: max-content;
  max-width: 28em;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  line-height: 1.35;
}
.ea-info-tip.ea-tip-visible { display: block; }
.ea-add-fields input,
.ea-add-fields select {
  margin-top: 0.1em;
  padding: 0.3em;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1em;
}

.ea-add-actions {
  margin-top: 0.5em;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.ea-btn {
  display: inline-block;
  background: #4299e1;
  color: #fff;
  border: none;
  padding: 0.4em 1.1em;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  margin: 0.15em;
  font-weight: 500;
}
.ea-btn:hover        { background: #3182ce; }
.ea-btn-secondary    { background: #718096; }
.ea-btn-secondary:hover { background: #4a5568; }

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .reveal .slides            { position: static !important; overflow: visible !important; }
  .reveal .slides section    { position: static !important; display: block !important;
                               page-break-inside: avoid; margin: 0 !important;
                               padding: 0.5em !important; width: 100% !important;
                               height: auto !important; transform: none !important; }
  .ea-btn, .ea-btn-delete, .ea-add-custom, .ea-add-form, .ea-drill,
  .reveal .controls,
  .reveal .progress,
  .navigate-left, .navigate-right { display: none !important; }
  .ea-form table             { font-size: 9pt; }
  .ea-radio-list             { max-height: none; overflow: visible; }
  /* Only show selected option in print */
  .ea-radio-option:not(.ea-selected) { display: none !important; }
  .ea-radio-option.ea-selected input[type="radio"] { display: none; }
}

/* ── iPad / mobile ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ea-form { font-size: 0.55em; }
  .ea-form input[type="text"],
  .ea-form input[type="number"],
  .ea-form select,
  .ea-add-fields input,
  .ea-add-fields select     { font-size: 16px; /* prevent iOS zoom */ }
  .ea-radio-option           { padding: 0.6em; }
}