/* inputOutline.css - consolidated outline rules for the card table.
   This file now contains all outline-related visuals so they are
   defined in a single place and can be overridden safely per-theme.
*/

/* When debug-visible is active on the body, show a subtle lime/green outline
   around every table cell in the card so the visual framing covers the whole table. */
body.debug-visible .card-table td,
body.debug-visible .card-table th {
  outline: 0.5px solid rgba(0,255,0,0.5) !important; /* lime/green */
  outline-offset: 0px !important;
  box-shadow: none !important; /* avoid double glow from other rules */
}

/* Keep the input focus glow but let the cell outline provide the framing. */
body.debug-visible .card-table td input:focus,
body.debug-visible .card-table th input:focus,
body.debug-visible .card-table td .form-input:focus,
body.debug-visible .card-table th .form-input:focus {
  /* softened spread to keep outlines <= 0.5px */
  box-shadow: 0 0 10px 0.5px rgba(0,255,0,0.06) !important;
}

/* Don't outline empty/hidden cells. */
.card-table td.hidden,
.card-table th.hidden,
.card-table td.hidden *,
.card-table th.hidden * {
  outline: none !important;
}

/* Field validation visual states (moved here so validation outlines are
   next to the input/cell outlines and not duplicated across theme files). */
.field-error{
  /* when semantic error is active, suppress other non-semantic outlines/shadows */
  outline: 0.5px solid rgba(255,80,80,0.5) !important;
  box-shadow: 0 0 0 0.5px rgba(255,80,80,0.25) inset !important;
}
.field-error ~ input.bm-focus,
.field-error ~ input.bm-default,
.field-error ~ input.bm-success {
  box-shadow: none !important; outline: none !important; border-width: 0.5px !important;
}
.field-ok{
  /* when semantic success is active, suppress other non-semantic outlines/shadows */
  outline: 0.5px solid rgba(120,255,140,0.5) !important;
  box-shadow: 0 0 0 0.5px rgba(120,255,140,0.25) inset !important;
}
.field-ok ~ input.bm-focus,
.field-ok ~ input.bm-default,
.field-ok ~ input.bm-error {
  box-shadow: none !important; outline: none !important; border-width: 0.5px !important;
}

/* Utility: keep the .hidden helper available locally (kept here for clarity).
   Other files may still rely on .hidden; this simply ensures the rule exists. */
.hidden{ display:none !important; }

/* Merges from project root inputOutline.css: ensure cell outlines available
   when debug-visible is active and keep focus glow consistent. */
body.debug-visible .card-table td.input-cell {
  outline: 0.5px solid rgba(0,255,0,0.5) !important;
  outline-offset: 0px !important;
  box-shadow: none !important;
}

body.debug-visible .card-table td.input-cell input:focus {
  box-shadow: 0 0 10px 1px rgba(0,255,0,0.06) !important;
}

/* Semantic input state visuals (moved from vMAX/hone.css) */
.form-input.error {
  border-color: rgba(255,42,42,0.5) !important;
  box-shadow: 0 0 0 2.5px rgba(255,42,42,0.5), 0 0 8px 2px rgba(255,42,42,0.34), 0 6px 18px rgba(255,0,0,0.09) !important;
  outline: 0.5px solid rgba(255,42,42,0.5) !important;
  outline-offset: 0.5px;
  transform: none !important;
}

.form-input.error, .form-input.success {
  box-shadow: none !important;
  outline: 0.5px solid transparent !important;
  border-width: 0.5px !important;
}

.form-input.success {
  border-color: rgba(0,255,0,0.5) !important;
  box-shadow: 0 0 0 0.5px rgba(0,255,0,0.25), 0 6px 18px rgba(0,255,0,0.25) !important;
}