/* Modern UI Phase 7 — Forms
   Version: var.12 grafo74
   Scope: native and viewer form controls only. */

:root {
  --mui-form-height: 44px;
  --mui-form-radius: var(--radius-md, 12px);
  --mui-form-border: rgba(16, 104, 92, 0.24);
  --mui-form-border-hover: rgba(16, 104, 92, 0.48);
  --mui-form-focus: rgba(20, 137, 120, 0.22);
  --mui-form-bg: #fff;
  --mui-form-text: #173f3a;
  --mui-form-muted: #667c78;
  --mui-form-accent: #148978;
}

/* Text inputs, search fields, textareas and native selects. */
:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], textarea, select) {
  box-sizing: border-box;
  max-width: 100%;
  min-height: var(--mui-form-height);
  padding: 0.68rem 0.88rem;
  border: 1px solid var(--mui-form-border);
  border-radius: var(--mui-form-radius);
  background-color: var(--mui-form-bg);
  color: var(--mui-form-text);
  font: inherit;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(18, 62, 56, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], textarea, select):hover:not(:disabled) {
  border-color: var(--mui-form-border-hover);
}

:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], textarea, select):focus-visible {
  outline: none;
  border-color: var(--mui-form-accent);
  box-shadow: 0 0 0 4px var(--mui-form-focus);
}

:where(input, textarea)::placeholder {
  color: var(--mui-form-muted);
  opacity: 0.86;
}

textarea {
  min-height: 7.5rem;
  resize: vertical;
}

select {
  padding-right: 2.35rem;
  cursor: pointer;
}

:where(input, textarea, select):disabled {
  cursor: not-allowed;
  opacity: 0.62;
  background-color: #f2f6f5;
}

/* Native checkbox and radio controls. */
:where(input[type="checkbox"], input[type="radio"]) {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--mui-form-accent);
  cursor: pointer;
  flex: 0 0 auto;
}

:where(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 3px solid var(--mui-form-focus);
  outline-offset: 3px;
}

:where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
  cursor: pointer;
}

/* Journal filter controls. */
.journal-filters__search,
.journal-filters__select {
  width: 100%;
}

.journal-filters__label {
  min-height: 38px;
  gap: 0.65rem;
  border-radius: 10px;
  transition: background-color 150ms ease;
}

.journal-filters__label:hover {
  background-color: rgba(20, 137, 120, 0.07);
}

.journal-filters__label:focus-within {
  background-color: rgba(20, 137, 120, 0.09);
  box-shadow: 0 0 0 3px var(--mui-form-focus);
}

/* Compact viewer selects should remain aligned with toolbar buttons. */
.doc2026__toolbar select,
.viewer-overlay select,
[data-viewer-overlay] select,
select[data-action="speed"] {
  min-width: 5.8rem;
  min-height: 44px;
  padding-block: 0.55rem;
}

/* Dynamically generated viewer search and notes controls. */
:where(.viewer5-command__input, .viewer54-search__input, .viewer61-textsearch__input,
.viewer61-ocrpanel__text, .viewer63-pdfsearch__input, .viewer64-ai__input,
.viewer55-notes__text, [data-v156-folder-search], [data-v1624-search-input],
[data-kg-search]) {
  width: 100%;
}

@media (max-width: 640px) {
  :where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], textarea, select) {
    font-size: 16px; /* prevents automatic zoom on mobile browsers */
  }

  .doc2026__toolbar select {
    flex: 1 1 7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(input, textarea, select, .journal-filters__label) {
    transition: none !important;
  }
}

@media print {
  :where(input, textarea, select) {
    border-color: #777 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #000 !important;
  }
}