/*
 * RS-TH06 — Unified Form Controls & File Upload System
 * Shared by Admin, Public, Auth and standalone pages.
 */

:root {
  --herb-control-height: 46px;
  --herb-control-height-sm: 40px;
  --herb-control-height-lg: 52px;
  --herb-control-radius: .875rem;
  --herb-control-radius-sm: .7rem;
  --herb-control-padding-x: .9rem;
  --herb-control-padding-y: .625rem;
  --herb-control-font-size: .9375rem;
  --herb-control-border: var(--theme-border-strong, #b7c8bf);
  --herb-control-border-hover: color-mix(in srgb, var(--theme-brand, #137a54) 58%, var(--herb-control-border));
  --herb-control-bg: var(--theme-surface, #fff);
  --herb-control-bg-muted: var(--theme-surface-muted, #f4f7f5);
  --herb-control-text: var(--theme-text, #10251b);
  --herb-control-muted: var(--theme-muted, #5d6f66);
  --herb-control-placeholder: var(--theme-placeholder, #687c72);
  --herb-control-focus: var(--theme-brand, #137a54);
  --herb-control-focus-ring: 0 0 0 .22rem color-mix(in srgb, var(--theme-brand, #137a54) 22%, transparent);
  --herb-control-danger: var(--theme-danger, #b42318);
  --herb-control-success: var(--theme-success, #137a54);
  --herb-file-surface: color-mix(in srgb, var(--theme-brand, #137a54) 5%, var(--theme-surface, #fff));
  --herb-file-surface-hover: color-mix(in srgb, var(--theme-brand, #137a54) 10%, var(--theme-surface, #fff));
  --herb-file-border: color-mix(in srgb, var(--theme-brand, #137a54) 48%, var(--theme-border-strong, #b7c8bf));
}

html[data-theme="dark"] {
  --herb-control-border: #537366;
  --herb-control-border-hover: #7fbea0;
  --herb-control-bg: #10271f;
  --herb-control-bg-muted: #18352a;
  --herb-control-text: #f1fff7;
  --herb-control-muted: #b9d0c5;
  --herb-control-placeholder: #a7c0b4;
  --herb-file-surface: #102b22;
  --herb-file-surface-hover: #173a2d;
  --herb-file-border: #67a889;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(
  .form-control,
  .form-select,
  .input-group-text,
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea
) {
  min-height: var(--herb-control-height);
  border: 1px solid var(--herb-control-border);
  border-radius: var(--herb-control-radius);
  background-color: var(--herb-control-bg);
  color: var(--herb-control-text);
  font-family: var(--theme-font-sans, "Noto Sans Thai", Inter, system-ui, sans-serif);
  font-size: var(--herb-control-font-size);
  line-height: 1.45;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(
  .form-control,
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  textarea
) {
  padding: var(--herb-control-padding-y) var(--herb-control-padding-x);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(.form-select, select) {
  padding-top: var(--herb-control-padding-y);
  padding-bottom: var(--herb-control-padding-y);
  padding-inline-start: var(--herb-control-padding-x);
  padding-inline-end: 2.7rem;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(.form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text) {
  min-height: var(--herb-control-height-sm);
  border-radius: var(--herb-control-radius-sm);
  padding-top: .45rem;
  padding-bottom: .45rem;
  font-size: .875rem;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(.form-control-lg, .form-select-lg, .input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .input-group-text) {
  min-height: var(--herb-control-height-lg);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(textarea.form-control, textarea) {
  min-height: 112px;
  resize: vertical;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(
  .form-control:hover:not(:disabled):not([readonly]),
  .form-select:hover:not(:disabled),
  input:hover:not(:disabled):not([readonly]),
  select:hover:not(:disabled),
  textarea:hover:not(:disabled):not([readonly])
) {
  border-color: var(--herb-control-border-hover);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(
  .form-control:focus,
  .form-select:focus,
  input:focus,
  select:focus,
  textarea:focus
) {
  border-color: var(--herb-control-focus);
  background-color: var(--herb-control-bg);
  color: var(--herb-control-text);
  box-shadow: var(--herb-control-focus-ring);
  outline: 0;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(
  .form-control::placeholder,
  input::placeholder,
  textarea::placeholder
) {
  color: var(--herb-control-placeholder) !important;
  -webkit-text-fill-color: var(--herb-control-placeholder) !important;
  opacity: 1;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(
  .form-control:disabled,
  .form-select:disabled,
  input:disabled,
  select:disabled,
  textarea:disabled,
  .form-control[readonly],
  input[readonly],
  textarea[readonly]
) {
  border-color: var(--theme-border, var(--herb-control-border));
  background-color: var(--herb-control-bg-muted);
  color: var(--herb-control-muted);
  -webkit-text-fill-color: var(--herb-control-muted);
  opacity: 1;
  cursor: not-allowed;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(.form-label, .col-form-label, fieldset > legend) {
  margin-bottom: .42rem;
  color: var(--theme-text-soft, var(--herb-control-text));
  font-weight: 700;
  line-height: 1.35;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-label-required::after,
body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) label.required::after {
  content: " *";
  color: var(--herb-control-danger);
  font-weight: 800;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(.form-text, .form-help, [data-form-help]) {
  margin-top: .4rem;
  color: var(--herb-control-muted) !important;
  font-size: .8125rem;
  line-height: 1.5;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(.input-group) {
  min-width: 0;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .input-group > :where(.form-control, .form-select, .input-group-text, .btn) {
  border-radius: 0;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .input-group > :first-child {
  border-start-start-radius: var(--herb-control-radius);
  border-end-start-radius: var(--herb-control-radius);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .input-group > :last-child {
  border-start-end-radius: var(--herb-control-radius);
  border-end-end-radius: var(--herb-control-radius);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .input-group-text {
  justify-content: center;
  padding-inline: .8rem;
  background: var(--herb-control-bg-muted);
  color: var(--theme-text-soft, var(--herb-control-text));
  font-weight: 650;
}

/* Checkboxes, radios and switches */
body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .form-check {
  min-height: 1.55rem;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .form-check-input {
  width: 1.18rem;
  height: 1.18rem;
  margin-top: .15rem;
  border: 1.5px solid var(--herb-control-border);
  background-color: var(--herb-control-bg);
  box-shadow: none;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .form-check-input:hover:not(:disabled) {
  border-color: var(--herb-control-border-hover);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .form-check-input:checked {
  border-color: var(--theme-brand, #137a54);
  background-color: var(--theme-brand, #137a54);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .form-switch .form-check-input {
  width: 2.65rem;
  min-height: 1.38rem;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .form-check-input:focus-visible {
  border-color: var(--herb-control-focus);
  box-shadow: var(--herb-control-focus-ring);
}

/* Validation */
body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(.is-invalid, [aria-invalid="true"]) {
  border-color: var(--herb-control-danger) !important;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(.is-invalid, [aria-invalid="true"]):focus {
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--herb-control-danger) 22%, transparent) !important;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .is-valid {
  border-color: var(--herb-control-success) !important;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(.invalid-feedback, .valid-feedback) {
  margin-top: .4rem;
  font-size: .8125rem;
  line-height: 1.45;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .invalid-feedback { color: var(--herb-control-danger); }
body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .valid-feedback { color: var(--herb-control-success); }

/* Buttons use a consistent minimum target without changing semantic variants. */
body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .btn {
  min-height: 42px;
  border-radius: .78rem;
  padding: .52rem .9rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .btn-sm {
  min-height: 38px;
  border-radius: .68rem;
  padding: .4rem .7rem;
  font-size: .84rem;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .btn-lg {
  min-height: 50px;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .btn:focus-visible {
  outline: 0;
  box-shadow: var(--herb-control-focus-ring);
}

/* Range and color controls */
body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) input[type="range"] {
  accent-color: var(--theme-brand, #137a54);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) input[type="color"] {
  width: 3.25rem;
  min-height: var(--herb-control-height);
  padding: .3rem;
  border: 1px solid var(--herb-control-border);
  border-radius: var(--herb-control-radius);
  background: var(--herb-control-bg);
}

html[data-theme="dark"] body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"])::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.25) saturate(.6);
  opacity: .86;
}

/* Progressive-enhancement file upload UI */
body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload {
  position: relative;
  width: 100%;
  min-width: 0;
  border: 1.5px dashed var(--herb-file-border);
  border-radius: 1rem;
  background: var(--herb-file-surface);
  color: var(--herb-control-text);
  overflow: hidden;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload:hover:not(.is-disabled),
body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload.is-dragover {
  border-color: var(--theme-brand, #137a54);
  background: var(--herb-file-surface-hover);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload.is-focused {
  border-color: var(--theme-brand, #137a54);
  box-shadow: var(--herb-control-focus-ring);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload.is-invalid {
  border-color: var(--herb-control-danger);
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--herb-control-danger) 16%, transparent);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload.is-disabled {
  opacity: .66;
  cursor: not-allowed;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__dropzone {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 74px;
  margin: 0;
  padding: .75rem;
  color: var(--herb-control-text);
  cursor: pointer;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .82rem;
  background: color-mix(in srgb, var(--theme-brand, #137a54) 13%, var(--herb-control-bg));
  color: var(--theme-brand, #137a54);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__icon svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: currentColor;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__copy {
  min-width: 0;
  display: grid;
  gap: .15rem;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__title {
  color: var(--theme-text, var(--herb-control-text));
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.25;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__hint {
  color: var(--herb-control-muted);
  font-size: .78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .5rem .78rem;
  border: 1px solid color-mix(in srgb, var(--theme-brand, #137a54) 65%, var(--herb-control-border));
  border-radius: .72rem;
  background: var(--theme-brand, #137a54);
  color: var(--theme-brand-contrast, #fff);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__status {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 38px;
  padding: .5rem .7rem;
  border-top: 1px solid color-mix(in srgb, var(--herb-file-border) 62%, transparent);
  background: color-mix(in srgb, var(--herb-control-bg) 76%, transparent);
  color: var(--herb-control-muted);
  font-size: .78rem;
  line-height: 1.35;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload.has-files .herb-file-upload__status {
  color: var(--theme-text-soft, var(--herb-control-text));
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__status-icon {
  flex: 0 0 auto;
  color: var(--theme-brand, #137a54);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__status-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__clear {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 34px;
  padding: .25rem .5rem;
  border: 1px solid var(--herb-control-border);
  border-radius: .6rem;
  background: transparent;
  color: var(--theme-text-soft, var(--herb-control-text));
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__clear:hover,
body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__clear:focus-visible {
  border-color: var(--herb-control-danger);
  background: color-mix(in srgb, var(--herb-control-danger) 11%, var(--herb-control-bg));
  color: var(--herb-control-danger);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__error {
  display: none;
  padding: .45rem .7rem .6rem;
  color: var(--herb-control-danger);
  font-size: .78rem;
  font-weight: 650;
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload.is-invalid .herb-file-upload__error {
  display: block;
}

/* Keep unenhanced file inputs usable if JavaScript is disabled. */
body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) input[type="file"]:not(.herb-file-upload__native) {
  min-height: var(--herb-control-height);
  width: 100%;
  padding: .25rem;
  border: 1px solid var(--herb-control-border);
  border-radius: var(--herb-control-radius);
  background: var(--herb-control-bg);
  color: var(--herb-control-text);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) input[type="file"]:not(.herb-file-upload__native)::file-selector-button {
  min-height: 38px;
  margin-inline-end: .7rem;
  padding: .45rem .78rem;
  border: 0;
  border-radius: .65rem;
  background: var(--theme-brand, #137a54);
  color: var(--theme-brand-contrast, #fff);
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 767.98px) {
  body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(
    .form-control,
    .form-select,
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select,
    textarea
  ) {
    min-height: 48px;
    font-size: 16px !important;
  }

  body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .btn {
    min-height: 44px;
  }

  body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__dropzone {
    grid-template-columns: 2.6rem minmax(0, 1fr);
    min-height: 84px;
    padding: .7rem;
  }

  body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }

  body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__status {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__status-text {
    flex-basis: calc(100% - 3rem);
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 389.98px) {
  body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__dropzone {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: .6rem;
  }

  body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-file-upload__icon {
    width: 2.4rem;
    height: 2.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(
    .form-control,
    .form-select,
    .btn,
    .herb-file-upload
  ) {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .herb-file-upload__button,
  .herb-file-upload__clear { display: none !important; }
  .herb-file-upload { border-style: solid !important; box-shadow: none !important; }
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-inline-field {
  display: grid;
  align-content: start;
  width: 100%;
  min-width: min(220px, 100%);
}

@media (max-width: 767.98px) {
  body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) .herb-inline-field {
    max-width: none !important;
  }
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--theme-brand, #137a54);
}

body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(input[type="checkbox"], input[type="radio"]):not(.form-check-input) {
  width: 1.15rem;
  height: 1.15rem;
  vertical-align: -.18rem;
}

/* Final specificity guard: page-local styles may be embedded after the shared layout. */
html[data-theme] body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(.form-control, .form-select, .input-group-text, textarea.form-control) {
  border-color: var(--herb-control-border);
  background-color: var(--herb-control-bg);
  color: var(--herb-control-text);
}

html[data-theme] body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(.form-control, textarea.form-control)::placeholder {
  color: var(--herb-control-placeholder) !important;
  -webkit-text-fill-color: var(--herb-control-placeholder) !important;
  opacity: 1;
}

html[data-theme] body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(.form-control, .form-select, textarea.form-control):focus {
  border-color: var(--herb-control-focus);
  background-color: var(--herb-control-bg);
  color: var(--herb-control-text);
  box-shadow: var(--herb-control-focus-ring);
}

html[data-theme] body:is(.admin-body, .public-shell, .auth-shell, .theme-scope-standalone) :where(.form-control:disabled, .form-select:disabled, .form-control[readonly]) {
  border-color: var(--theme-border, var(--herb-control-border));
  background-color: var(--herb-control-bg-muted);
  color: var(--herb-control-muted);
  -webkit-text-fill-color: var(--herb-control-muted);
}