/*
 * forms.css — Fieldsets, labels, inputs, field-width classes, upload controls,
 *              validation arrow indicators, pass-strength, inline form icons
 */

/* ─── Base Form Reset ────────────────────────────────────────────────────── */

form {
  border: 0;
  margin: 0;
}

input,
select {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
}

/* ─── Fieldset ───────────────────────────────────────────────────────────── */

form fieldset {
  border: 0;
  margin: 5px;
  padding: 0;
}
form fieldset.left,
form fieldset.right {
  float: left;
}
form fieldset.clear {
  clear: both;
}
form fieldset br {
  clear: both;
}

/* ─── Labels & Inputs ────────────────────────────────────────────────────── */

form fieldset label,
form fieldset input,
form fieldset select {
  display: block;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  width: var(--field-single);
  float: left;
}
form fieldset label {
  text-align: right;
  padding: 4px 10px 4px 0;
  line-height: 18px;
}
form fieldset input,
form fieldset select,
form fieldset textarea {
  -webkit-appearance: none; /*remove extra padding for Chrome*/
  margin: 2px 0;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
form fieldset input:focus,
form fieldset select:focus,
form fieldset textarea:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
form fieldset textarea {
  font-family: var(--font-base);
  float: left;
  font-size: var(--font-size-base);
  width: var(--field-double);
  padding-left: 2px;
}
form fieldset textarea.onepointfive { width: var(--field-triple); }
form fieldset textarea.double       { width: var(--field-quadruple); }

form fieldset input[type=checkbox],
form fieldset input[type=radio] {
  appearance: auto;
  /* -webkit-appearance: auto; */
  accent-color: var(--color-accent);
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  cursor: pointer;
  float: left;
}

/* Checkboxes/radios inside table cells flow inline with cell alignment */
form fieldset table td input[type=checkbox],
form fieldset table td input[type=radio] {
  float: none;
  display: inline-block;
  vertical-align: middle;
}

/* Right-of-field labels */
form fieldset label.right {
  text-align: left;
  padding: 4px 8px 0 3px;
  width: auto;
}
form fieldset label.right.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
form fieldset th label.right {
  text-align: inherit;
  padding-right: 0;
}
form fieldset label.sub {
  color: var(--color-muted);
}
form fieldset label.right.block {
  border: 1px solid var(--color-border);
  background: #fefefe;
  border-radius: var(--radius);
  font-family: monospace, monospace;
  margin-top: 2px;
  padding: 2px 4px 2px 3px;
}
form fieldset label.sub.or::before {
  content: '\21b3';
  font-size: 20px;
  line-height: 10px;
  font-weight: bold;
  margin-right: 5px;
}

/* ─── Inline Icon Buttons (in label.right) ───────────────────────────────── */

form fieldset label.right .icon {
  display: inline-block;
  cursor: pointer;
  vertical-align: text-top;
  width: 16px;
  height: 16px;
}
form fieldset label.right .icon.add     { background: url(../../../images/add.png)          center/contain no-repeat; }
form fieldset label.right .icon.minus   { background: url(../../../images/minus.png)        center/contain no-repeat; }
form fieldset label.right .icon.edit    { background: url(../../../images/edit.png)          center/contain no-repeat; }
form fieldset label.right .icon.refresh { background: url(../../../images/arrow_refresh.png) center/contain no-repeat; }
form fieldset label.right .icon.save    { background: url(../../../images/disk.png)          center/contain no-repeat; }
form fieldset label.right .icon.cancel  { background: url(../../../images/delete.png)        center/contain no-repeat; }
form fieldset label.right .icon.card    { background: url(../../../images/card.png)          center/contain no-repeat; }
form fieldset label.right .icon.split   { background: url(../../../images/arrow-split.png)   center/contain no-repeat; }

/* ─── Field Width Classes ────────────────────────────────────────────────── */
/* Used on label, input, select, th, td within form context */

.checkgap    { width: var(--field-checkgap); }
.athird      { width: var(--field-third); }
.half        { width: var(--field-half); }
.twothirds   { width: var(--field-twothirds); }
.single      { width: var(--field-single); }
.onepointfive{ width: var(--field-onepointfive); }
.double      { width: var(--field-double); }
.triple      { width: var(--field-triple); }
.quadruple   { width: var(--field-quadruple); }
.natural     { width: auto; }

form th.right, form td.right { text-align: right; padding-right: 5px; }
form th.left,  form td.left  { text-align: left;  padding-left:  5px; }

/* ─── Grouped Fields ─────────────────────────────────────────────────────── */

form fieldset div.group,
form fieldset div.fieldgroup {
  float: left;
}
form fieldset.split label.right.second {
  clear: left;
  width: var(--field-single);
  text-align: right;
}
form fieldset.split div.group {
  width: var(--field-double);
}
div.group span.nowrap {
  white-space: nowrap;
}
div.group span.nowrap input,
div.group span.nowrap label {
  display: inline-block;
  float: none;
  vertical-align: middle;
}
div.group span.nowrap label {
  padding-top: 3px;
}

/* ─── Info display (read-only text next to field) ────────────────────────── */

form fieldset div.infodisplay {
  padding-left: 5px;
  padding-bottom: 10px;
  width: var(--field-double);
}
form fieldset div.note {
  margin-left: var(--field-single);
}

/* ─── Upload Controls ────────────────────────────────────────────────────── */

/* Shared base for all upload action icons */
form fieldset [class^="upload-"]:not(.upload-text):not(.upload-meter):not(.upload-done) {
  float: left;
  width: 16px;
  height: 16px;
  margin: 4px 1px 0 3px;
  cursor: pointer;
}
form fieldset div.upload-select { background: url(../../../images/disk.png); }
form fieldset div.upload-stop   { background: url(../../../images/stop.png); }
form fieldset div.upload-delete { background: url(../../../images/delete.png); }
form fieldset div.upload-camera { background: url(../../../images/camera.png); }

form fieldset div.upload-text {
  z-index: 2;
  position: relative;
}
form fieldset div.upload-meter {
  background: var(--color-upload-light);
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
form fieldset div.upload-done {
  float: left;
  padding-top: 2px;
  padding-bottom: 6px;
}

/* Drag-over state */
div.group.dragover div.upload-select {
  background-image: url(../../../images/download.png);
}
div.group.dragover::before {
  display: block;
  position: absolute;
  content: 'Drop Here To Upload';
  top: 3px;
  left: 4px;
  color: var(--color-muted);
  pointer-events: none;
}

/* ─── Camera Dialog ──────────────────────────────────────────────────────── */

.camera-dialog video {
  width: 640px;
  height: 480px;
  margin: 0;
  padding: 0;
}
.camera-dialog .portrait-scrim {
  position: absolute;
  top: 6px;
  left: 13px;
  width: 640px;
  height: 480px;
  background: rgba(0,0,0,0);
  border: 40px solid rgba(200,200,200,0.3);
  border-left-width: 150px;
  border-right-width: 150px;
}
.camera-dialog .portrait-scrim div {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 400px;
  border: 1px solid #f00;
}

/* ─── Arrow Indicators (fieldset layout) ─────────────────────────────────── */
/*
 * Arrows appear to the right of form fields to indicate status.
 * The arrow is drawn with CSS borders (left-pointing chevron).
 */

form fieldset div.right {
  float: left;
  margin: 1px 0 0 5px;
  padding: 0;
}
form fieldset div.right.arrow {
  position: relative;
  pointer-events: none;
  margin-left: 10px;
  padding-left: 5px;
}
form fieldset div.right.arrow.validfail {
  scroll-margin-top: 2em;
  scroll-margin-bottom: 2em;
}
form fieldset div.right.arrow::before {
  content: '';
  display: block;
  border: 10px solid transparent;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: -22px;
}
form fieldset div.right.arrow::after {
  content: '';
  display: block;
  border: 9px solid transparent;
  position: absolute;
  top: 50%;
  margin-top: -9px;
  left: -18px;
}

/* Upload arrow (always green) */
form fieldset div.right.arrow.upload {
  border-left: 2px solid var(--color-upload);
  padding-right: 8px;
}
form fieldset div.right.arrow.upload::before { border-right-color: var(--color-upload); }
form fieldset div.right.arrow.upload::after  { border-right-color: var(--color-upload-light); }

/* Required / warning arrows (form.validate only) */
form.validate fieldset div.right.arrow.required { border-left: 2px solid var(--color-required); }
form.validate fieldset div.right.arrow.warning  { border-left: 2px solid var(--color-warn-border); }
form.validate fieldset div.right.arrow.required::before { border-right-color: var(--color-required); }
form.validate fieldset div.right.arrow.required::after  { border-right-color: var(--color-bg); }
form.validate fieldset div.right.arrow.warning::before  { border-right-color: var(--color-warn-border); }
form.validate fieldset div.right.arrow.warning::after   { border-right-color: var(--color-bg); }

/* Pass-strength arrows — use a local custom property for DRY color application */
form.validate fieldset div.right.arrow.pass-strength {
  --ps-color: transparent;
  border-left: 2px solid var(--ps-color);
}
form.validate fieldset div.right.arrow.pass-strength::before { border-right-color: var(--ps-color); }
form.validate fieldset div.right.arrow.pass-strength::after  { border-right-color: var(--color-bg); }

form.validate fieldset div.right.arrow.pass-strength.pass-0 { --ps-color: var(--color-bg); }
form.validate fieldset div.right.arrow.pass-strength.pass-1,
form.validate fieldset div.right.arrow.pass-strength.pass-2 { --ps-color: var(--color-pass-1); }
form.validate fieldset div.right.arrow.pass-strength.pass-3 { --ps-color: var(--color-pass-3); }
form.validate fieldset div.right.arrow.pass-strength.pass-4,
form.validate fieldset div.right.arrow.pass-strength.pass-5 { --ps-color: var(--color-pass-4); }
form.validate fieldset div.right.arrow.pass-strength.pass-6 { --ps-color: var(--color-pass-6); }

/* ─── Arrow Indicators (table-cell layout, top-pointing) ─────────────────── */
/*
 * When a form field lives inside a table cell, the arrow points downward
 * from a floating tooltip above the cell.
 */

form table tr td div.right.arrow {
  position: absolute;
  top: -22px;
  pointer-events: none;
  background: var(--color-bg);
  padding: 2px;
  border-radius: var(--radius);
}
form table tr td div.right.arrow::before {
  content: '';
  display: block;
  border: 10px solid transparent;
  position: absolute;
  top: 29px;
  left: 2px;
}
form table tr td div.right.arrow::after {
  content: '';
  display: block;
  border: 9px solid transparent;
  position: absolute;
  top: 27px;
  left: 3px;
}

/* Upload */
form table tr td div.right.arrow.upload                   { border: 2px solid var(--color-upload); }
form table tr td div.right.arrow.upload::before           { border-top-color: var(--color-upload);       border-right-color: transparent; }
form table tr td div.right.arrow.upload::after            { border-top-color: var(--color-upload-light); border-right-color: transparent; }

/* Required / warning */
form.validate table tr td div.right.arrow.required        { border: 2px solid var(--color-required); }
form.validate table tr td div.right.arrow.warning         { border: 2px solid var(--color-warn-border); }
form.validate table tr td div.right.arrow.required::before{ border-top-color: var(--color-required);    border-right-color: transparent; }
form.validate table tr td div.right.arrow.required::after { border-top-color: var(--color-bg);          border-right-color: transparent; }
form.validate table tr td div.right.arrow.warning::before { border-top-color: var(--color-warn-border); border-right-color: transparent; }
form.validate table tr td div.right.arrow.warning::after  { border-top-color: var(--color-bg);          border-right-color: transparent; }

/* Pass-strength (table variant) */
form.validate table tr td div.right.arrow.pass-strength {
  --ps-color: transparent;
  border: 2px solid var(--ps-color);
}
form.validate table tr td div.right.arrow.pass-strength::before {
  border-top-color: var(--ps-color);
  border-right-color: transparent;
}
form.validate table tr td div.right.arrow.pass-strength::after {
  border-top-color: var(--color-bg);
  border-right-color: transparent;
}

form.validate table tr td div.right.arrow.pass-strength.pass-0 { --ps-color: var(--color-bg); }
form.validate table tr td div.right.arrow.pass-strength.pass-1,
form.validate table tr td div.right.arrow.pass-strength.pass-2 { --ps-color: var(--color-pass-1); }
form.validate table tr td div.right.arrow.pass-strength.pass-3 { --ps-color: var(--color-pass-3); }
form.validate table tr td div.right.arrow.pass-strength.pass-4,
form.validate table tr td div.right.arrow.pass-strength.pass-5 { --ps-color: var(--color-pass-4); }
form.validate table tr td div.right.arrow.pass-strength.pass-6 { --ps-color: var(--color-pass-6); }

/* ─── Submit bar ────────────────────────────────────────────────────────────── */

div.submitDiv {
  background: var(--color-bg);
  padding: 10px 0.625rem;
  margin: 0 -0.625rem;
}

.logo-preview {
  background: #ccc;
  padding: 10px;
  width: 165px;
  height: 80px;
}