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

/* ─── 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;
}
/* Text-like inputs, selects, textareas. Excludes button-type inputs (styled
   in the Buttons section), checkbox/radio (their own block below), and
   file/hidden (need native chrome / no chrome). */
form fieldset input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
form fieldset select,
form fieldset textarea {
  /*-webkit-appearance: none;*/
  margin: 2px 0;
  padding: 4px 6px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background-color: var(--input-bg);
  color: var(--input-fg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
form fieldset input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):focus,
form fieldset select:focus,
form fieldset textarea:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px var(--color-focus-ring-soft);
}
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.single       { width: var(--field-double); }
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: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  margin: 2px 0;
  border: 2px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background-color: #ffffff;
  cursor: pointer;
  vertical-align: middle;
  transition: border-color 200ms, background-color 200ms, box-shadow 200ms;
  position: relative;
  display: inline-block;
  float: none;
}
form fieldset input[type=radio] { border-radius: 50%; }
form fieldset label + input[type=checkbox],
form fieldset label + input[type=radio],
form fieldset input[type=checkbox]:has(+ label.right):not(.nowrap *),
form fieldset input[type=radio]:has(+ label.right):not(.nowrap *) {
  float: left;
}

form fieldset input[type=checkbox]:hover,
form fieldset input[type=radio]:hover {
  border-color: var(--color-accent);
}
form fieldset input[type=checkbox]:focus,
form fieldset input[type=radio]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus-ring-soft);
}
form fieldset input[type=checkbox]:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3.5 3.5 6.5-7' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
}
form fieldset input[type=radio]:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center;
}
form fieldset input[type=checkbox]:disabled,
form fieldset input[type=radio]:disabled {
  /*background-color: var(--color-heading-bg);*/
  border-color: var(--color-border-soft);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
/* Default look for unclassed native buttons — replaces the dark-mode
   color-scheme rendering with a token-driven subtle style. Wrapped in
   :where() so specificity is 0 and .button-* variants win without
   needing !important. Native vertical metrics preserved (padding 2px 12px,
   no line-height override) so buttons don't extend the line box when
   sharing rows with inline checkboxes/labels. Higher-specificity rules
   for icon buttons (input.search/.clear/.add in ListingTable) still win. */

:where(input[type=submit], input[type=button], input[type=reset], button) {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 2px 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  background: var(--color-heading-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
:where(input[type=submit], input[type=button], input[type=reset], button):hover {
  border-color: var(--color-accent);
}
:where(input[type=submit], input[type=button], input[type=reset], button):disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Submit buttons get primary styling automatically */
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: 0.01em;
  border: 1px solid var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  cursor: pointer;
  transition: background-color 200ms, color 200ms, border-color 200ms, box-shadow 200ms;
}
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-text);
  box-shadow: 0 4px 12px var(--color-focus-ring-soft);
}
input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Info-display block — used for read-only customer/address details inside a
   form row. Fixed width so adjacent label.right icons (edit/view) land at the
   far edge of the row instead of flush against the text. */
form fieldset div.infodisplay {
  padding-left: 5px;
  padding-bottom: 10px;
  width: var(--field-double);  /* 300px — matches classic */
}

/* Right-of-field labels */
form fieldset label.right,
form fieldset span.right {
  text-align: left;
  padding: 4px 8px 4px 3px;
  width: auto;
}
/* Vertically center the left field-label with a button-row on the right.
   Floated labels can't use vertical-align, so match the row height via line-height. */
form fieldset label:has(+ .right.btn-row) {
  line-height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
}
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-soft);
  background: #fefefe;
  border-radius: var(--radius);
  font-family: monospace, monospace;
  margin-top: 2px;
  padding: 2px 4px 2px 3px;
}

/* ─── Field Width Classes ────────────────────────────────────────────────── */

.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;
}

/* ─── Arrow Indicators (fieldset layout) ─────────────────────────────────── */

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::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;
}

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); }

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 */
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); }

/* ─── Help icon (blue ?) ─────────────────────────────────────────────────── */
/* <label class="right help" title="..."> or <span class="help" title="..."> */

form fieldset label.help::after,
form fieldset span.help::after {
  content: '';
  display: inline-block;
  vertical-align: text-top;
  margin-left: 5px;
  width: 16px;
  height: 16px;
  background: url(../../../images/help.png) center center no-repeat;
}

/* ─── Inline form action icons ───────────────────────────────────────────── */
/* <label class="right"><span class="icon add|edit|..."></span></label> */

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 center no-repeat; }
form fieldset label.right .icon.minus   { background: url(../../../images/minus.png) center center no-repeat; }
form fieldset label.right .icon.edit    { background: url(../../../images/edit.png) center center no-repeat; }
form fieldset label.right .icon.suedit  { background: url(../../../images/suedit.png) center center no-repeat; }
form fieldset label.right .icon.refresh { background: url(../../../images/arrow_refresh.png) center center no-repeat; }
form fieldset label.right .icon.save    { background: url(../../../images/disk.png) center center no-repeat; }
form fieldset label.right .icon.cancel  { background: url(../../../images/delete.png) center center no-repeat; }
form fieldset label.right .icon.card    { background: url(../../../images/card.png) center center no-repeat; }

/* Uploader widget icons (jquery.uploader.js attaches these to input.file). */
form fieldset div.upload-select,
form fieldset div.upload-stop,
form fieldset div.upload-delete,
form fieldset div.upload-camera {
  float: left;
  width: 16px;
  height: 16px;
  margin: 4px 1px 0 3px;
  cursor: pointer;
}
form fieldset div.upload-select { background: url(../../../images/disk.png)   center center no-repeat; }
form fieldset div.upload-stop   { background: url(../../../images/stop.png)   center center no-repeat; }
form fieldset div.upload-delete { background: url(../../../images/delete.png) center center no-repeat; }
form fieldset div.upload-camera { background: url(../../../images/camera.png) center center no-repeat; }

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;
}

/* ─── Login Card ─────────────────────────────────────────────────────────── */
/* Modern stacked-card layout for the splash login form (account/login.php).
   Mirrors splash/common.css .login-card so the form renders the same way
   regardless of which layout serves it. Scoped under .login-card. */

.login-card fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 22rem;
  margin: 1rem auto;
  padding: 0;
}

.login-card label,
.login-card input,
.login-card select {
  float: none;
  display: block;
  width: 100%;
}

.login-card label {
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-muted);
}

.login-card input[type=text],
.login-card input[type=password] {
  margin: 0;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
}

.login-card input.submit {
  margin: 0.5rem 0 0;
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
  background: var(--color-accent);
  color: var(--color-accent-text);
  border: 0;
  border-radius: var(--radius-md);
  font-weight: 600;
}
.login-card input.submit:hover {
  background: var(--color-accent-hover);
  border-color: transparent;
}

.login-card label.right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  cursor: pointer;
}
.login-card label.right input[type=checkbox] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.login-card label.right:has(a):last-child {
  justify-content: center;
  cursor: default;
}

/* Cookie-prefilled email value (text + "Not You?" link). Stronger weight and
   full text color so the prefilled identity reads as the active username,
   not a muted label. */
.login-card label.right:has(a):not(:last-child) {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
}

.login-card div.note {
  margin: 0.25rem 0;
  text-align: center;
  font-size: var(--font-size-sm);
}

/* Validation message — strip floating-arrow chrome, show as
   plain inline error text. `.required`/`.warning`/`.upload`/`.pass-strength`
   are listed explicitly so specificity matches the legacy rules they replace. */
form.login-card fieldset div.right.arrow,
form.login-card fieldset div.right.arrow.required,
form.login-card fieldset div.right.arrow.warning,
form.login-card fieldset div.right.arrow.upload,
form.login-card fieldset div.right.arrow.pass-strength {
  float: none;
  margin: -0.35rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--font-size-sm);
}
form.login-card fieldset div.right.arrow.required { color: var(--color-required); }
form.login-card fieldset div.right.arrow.warning  { color: var(--color-warn-border); }
form.login-card fieldset div.right.arrow::before,
form.login-card fieldset div.right.arrow::after {
  display: none;
}

.login-card br {
  display: none;
}