/* 2base component layer — reusable controls and surfaces. */
/* Form system */
.app-form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-body);
  line-height: 1.25rem;
  color: var(--gray-700);
}

.app-form-help {
  margin-top: 0.5rem;
  font-size: var(--text-xs);
  line-height: 1rem;
  color: var(--color-text-muted);
}

.app-form-field,
.app-form-textarea {
  width: 100%;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--gray-900);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.app-form-field {
  min-height: var(--control-height);
  padding: 0.75rem 1rem;
}

.app-form-textarea {
  min-height: 7rem;
  padding: 0.75rem 1rem;
  resize: vertical;
}

.app-form-field--sm {
  min-height: var(--control-height);
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm);
}

.app-form-field:hover,
.app-form-textarea:hover {
  border-color: var(--color-border-hover);
}

.app-form-field:focus,
.app-form-textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--ring-focus);
}

select.app-form-field {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
  background-image: var(--icon-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

.app-form-field:disabled,
.app-form-textarea:disabled {
  background: var(--color-surface-soft);
  color: var(--color-text-faint);
  cursor: not-allowed;
}

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--control-height);
  padding: 0.75rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-body);
  line-height: 1.25rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.app-btn:hover {
  transform: none;
}

.app-btn:active {
  transform: none;
}

.app-btn:focus {
  outline: none;
}

.app-btn:focus-visible {
  box-shadow: var(--ring-focus);
}

.app-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.app-btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.72;
}


.app-btn--sm {
  min-height: var(--control-height);
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

/* Mobile and touch-device override: bump compact controls to the WCAG 2.5.5
   / Apple HIG / Material 44px minimum. The width rule also covers a narrow
   desktop window, where a 32px control would still be hard to operate. */
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  .app-form-field--sm,
  .app-btn--sm,
  .app-native-select--sm,
  .app-touch-target,
  .app-header-action,
  .app-mega__trigger,
  .app-filter-list-row,
  .app-ctab-dots,
  .app-ctab-star,
  .app-ctab-sort,
  .app-ctab-menu__item,
  .app-ctab-bar__act,
  .app-cov-row,
  .app-company-action {
    min-height: var(--control-height);
  }

  .app-ctab-bar__act {
    display: inline-flex;
    align-items: center;
  }

  /* Footer link list — expand each row to a 44px tap area on touch. */
  footer ul li a,
  footer ul li {
    min-height: var(--control-height);
    display: flex;
    align-items: center;
  }
}

/* White labels require the darker accent token: #268644 keeps body-size CTA
   text at 4.59:1 contrast. Hover derives a darker shade from the same token. */
.app-btn--primary {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--color-text-inverse);
  box-shadow: none;
}

.app-btn--primary:hover {
  background: color-mix(in srgb, var(--accent-hover) 84%, var(--ink));
  border-color: color-mix(in srgb, var(--accent-hover) 84%, var(--ink));
  color: var(--color-text-inverse);
}

.app-btn--primary:focus {
  box-shadow: var(--ring-focus);
}

.app-btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border-control);
  color: var(--color-text-secondary);
}

.app-btn--secondary:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface-soft);
  color: var(--color-text-primary);
}

.app-btn--secondary:focus {
  box-shadow: var(--ring-focus-neutral);
}

.app-btn.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--color-text-inverse);
}

.app-btn--ghost {
  background: var(--accent-wash);
  border-color: var(--color-action-ghost-border);
  color: var(--ink);
}

.app-btn--ghost:hover {
  background: var(--color-action-ghost-hover);
  border-color: var(--color-action-ghost-border);
}

.app-btn--ghost:focus {
  box-shadow: var(--ring-focus);
}

.app-btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-inverse);
}

.app-btn--danger:hover {
  background: var(--color-danger-strong);
  border-color: var(--color-danger-strong);
}

.app-btn--danger:focus {
  box-shadow: var(--ring-focus-danger);
}

.app-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  line-height: 1rem;
}

/* On-state chip. Same language as .app-chip--choice.is-selected and
   .app-tool-tab--active: marker fill, ink text, no visible border. Ink stays
   reserved for money buttons — a filter that is merely "on" must not carry
   the same weight as "Открыть в базе". */
.app-chip--active {
  border-color: transparent;
  background: var(--marker);
  color: var(--ink);
  font-weight: var(--font-weight-strong);
}

/* Public surfaces and content cards */
.app-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: none;
}

.app-card--padded {
  padding: 1.5rem;
}

.app-card--stat {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.25rem;
}

.app-card--stat .app-card__label {
  font-size: var(--text-sm);
  line-height: 1.25rem;
  color: var(--color-text-muted);
}

.app-card--stat .app-card__value {
  margin-top: 0.5rem;
  color: var(--gray-900);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-strong);
}

.app-card--link {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.15rem 1.2rem;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.app-card--link:hover {
  border-color: var(--color-border-hover);
  background: var(--brand-50);
  box-shadow: none;
  transform: none;
}

/* eyebrow is decorative but Lighthouse flags it as text — bump to gray-600
   (7.5:1 on white) so it always passes WCAG AA, including on tinted card backgrounds. */
.app-card--link .app-card__eyebrow {
  font-size: var(--text-xs);
  line-height: 1rem;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-body);
}

.app-card--link .app-card__title {
  margin-top: 0.35rem;
  color: var(--gray-900);
  font-weight: var(--font-weight-strong);
}

.app-card--link .app-card__text {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  line-height: 1.35rem;
  color: var(--color-text-secondary);
}

.app-note {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  padding: 1rem 1.1rem;
  font-size: var(--text-sm);
  line-height: 1.4rem;
  color: var(--color-text-secondary);
}

.app-note--tint {
  background: var(--tint);
  border-color: var(--color-border-control);
}

/* Status note variants — referenced across 10+ templates (company unlock
   notice/error, account_wallet, order_status, wallet_topup_status, admin
   forms) but were never defined, so the status colour silently fell back to
   the neutral note surface. Palette mirrors .app-status-badge--* so a note and
   a badge for the same state read identically. */
.app-note--success {
  background: var(--marker-tint);
  border-color: var(--marker);
  color: var(--ink);
}

.app-note--danger {
  background: var(--color-danger-surface);
  border-color: var(--color-danger-border);
  color: var(--color-danger-strong);
}

/* Inline "this will cost you data" text. Same red as the danger note so the
   one remaining warning colour is declared once, not typed as a raw Tailwind
   shade at each call site. */
.app-text-danger {
  color: var(--color-danger-strong);
  font-weight: var(--font-weight-body);
}

.app-note--warning {
  background: var(--color-warning-surface);
  border-color: var(--color-warning-border);
  color: var(--color-warning-strong);
}

.app-cta-band {
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-lg);
  background: var(--tint);
  padding: 2rem;
}

/* Shared data, status, selection and pagination components. */
/* Single canonical table component (T12 unification, 2026-07-03) — used on both
   admin panels and public pages. Formerly split into .app-table (admin) and the
   near-duplicate .app-data-table (public); merged onto this definition, public
   templates renamed app-data-table -> app-table. Wrap in .app-table-wrap
   (admin, bleeds to a padded panel's edge) or a plain overflow-x-auto div
   (public) so a wide table scrolls instead of blowing out the layout. */
.app-table-wrap {
  overflow-x: auto;
}

.app-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}

.app-table thead tr {
  background: var(--gray-50);
}

.app-table th {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border-control);
  text-align: left;
  color: var(--gray-500);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
  line-height: 1rem;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}

.app-table td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--gray-700);
  vertical-align: middle;
}

.app-table tbody tr:last-child td {
  border-bottom: 0;
}

.app-table tbody tr:hover {
  background: var(--tint);
}

.app-row-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.app-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
  line-height: 1rem;
  white-space: nowrap;
}

/* Redesign 2026-07: the decorative variants join the ink system — the mockup
   palette has no green, blue or purple. Warning and danger keep their
   conventional colour: those two carry real risk and must not read as neutral
   chrome (a "заказ отменён" badge in gray is a badge nobody notices). */
.app-status-badge--success {
  background: var(--marker-tint);
  color: var(--ink);
}

.app-status-badge--warning {
  background: var(--color-warning-tint);
  color: var(--color-warning-strong);
}

.app-status-badge--danger {
  background: var(--color-danger-tint);
  color: var(--color-danger-strong);
}

.app-status-badge--neutral {
  background: var(--gray-100);
  color: var(--gray-600);
}

.app-status-badge--accent {
  background: var(--tint);
  color: var(--ink);
}

/* Compact status with a colour dot instead of a filled pill. */
.app-status-badge--dot {
  padding: 0;
  background: none;
  gap: 0.45rem;
}

.app-status-badge--dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.app-status-badge--dot.app-status-badge--success {
  background: none;
  color: var(--color-success-strong);
}

.app-status-badge--dot.app-status-badge--success::before {
  background: var(--color-success-dot);
}

.app-status-badge--dot.app-status-badge--danger {
  background: none;
  color: var(--color-danger);
}

.app-status-badge--dot.app-status-badge--danger::before {
  background: var(--color-danger-dot);
}

.app-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--gray-600);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-body);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.app-page-link:focus-visible,
.app-chip--choice:focus-visible,
.app-select__option:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--ring-focus);
}
.app-page-link:hover {
  border-color: var(--color-border-hover);
  background: var(--gray-50);
  color: var(--gray-900);
}

.app-page-link.is-current {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--color-text-inverse);
}

.app-page-link:disabled {
  color: var(--gray-300);
  cursor: default;
  background: var(--color-surface);
  border-color: var(--color-border-control);
}

.app-card--action {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.app-card--action:hover {
  border-color: var(--color-border-hover);
  background: var(--gray-50);
  box-shadow: none;
  transform: none;
}

/* Reusable select / combobox */
.app-select__native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.app-select {
  position: relative;
}

.app-select__trigger {
  width: 100%;
  min-height: var(--control-height);
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--gray-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  box-shadow: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.app-select__trigger:hover {
  border-color: var(--muted);
  background: var(--color-surface);
}

.app-select.is-open .app-select__trigger,
.app-select__trigger:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--ring-focus);
}

.app-select__value-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.app-select__label {
  font-size: var(--text-sm);
  line-height: 1.25rem;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-select__meta {
  font-size: var(--text-xs);
  line-height: 1rem;
  color: var(--muted);
}

.app-select__chevron {
  flex-shrink: 0;
  color: var(--gray-500);
  transition: transform 160ms ease;
}

.app-select__chevron svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.app-select.is-open .app-select__chevron {
  transform: rotate(180deg);
}

.app-select__panel {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  z-index: var(--z-raised);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-mega);
  overflow: hidden;
}

.app-select__search {
  position: sticky;
  top: 0;
  z-index: var(--z-base);
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-overlay);
  backdrop-filter: blur(8px);
}

.app-select__search-input {
  width: 100%;
  min-height: var(--control-height);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0 0.875rem;
  background: var(--tint);
  color: var(--gray-900);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.app-select__search-input:focus {
  border-color: var(--ink);
  box-shadow: var(--ring-focus);
  outline: none;
  background: var(--color-surface);
}

.app-select__list {
  max-height: 18rem;
  overflow: auto;
  padding: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}

.app-select__list::-webkit-scrollbar {
  width: 10px;
}

.app-select__list::-webkit-scrollbar-track {
  background: transparent;
}

.app-select__list::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-surface);
}

.app-select__option {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: var(--radius-xs);
  padding: 0.625rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  color: var(--gray-900);
  transition: background-color 140ms ease, color 140ms ease;
}

.app-select__option:hover,
.app-select__option.is-highlighted {
  background: var(--gray-50);
}

.app-select__option.is-selected {
  background: var(--tint);
  color: var(--ink);
}

.app-select__option-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.app-select__option-label {
  font-size: var(--text-sm);
  line-height: 1.25rem;
}

.app-select__option-meta {
  font-size: var(--text-xs);
  line-height: 1rem;
  color: var(--muted);
}

.app-select__empty {
  padding: 0.875rem 1rem 1rem;
  color: var(--gray-500);
  font-size: var(--text-sm);
}

.app-select__check {
  flex-shrink: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
}

/* Lightweight styled native selects for dense admin UI */
.app-native-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  min-height: var(--control-height);
  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  background-image: var(--icon-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  color: var(--gray-900);
  box-shadow: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.app-native-select:hover {
  border-color: var(--muted);
}

.app-native-select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--ring-focus);
}

.app-native-select--sm {
  min-height: var(--control-height);
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  border-radius: var(--radius-md);
  background-position: right 0.6rem center;
  background-size: 0.95rem;
  font-size: var(--text-xs);
  line-height: 1rem;
}

.app-native-select--inline {
  width: auto;
}

/* Choice pills and checkbox controls */
.app-chip--choice {
  min-height: var(--control-height);
  padding: 0.625rem 0.9rem;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.app-chip--choice:hover {
  border-color: var(--color-border-hover);
}

/* Mockup `tgl(true)`: solid marker fill, no border, semibold ink label. The
   earlier ink-outline + lime ring read as "focused", not "chosen" — with six
   sections in the modal the buyer needs the picked option to shout. */
.app-chip--choice.is-selected {
  border-color: transparent;
  background: var(--marker);
  color: var(--ink);
  font-weight: var(--font-weight-strong);
}

.app-chip--choice.is-selected:hover {
  background: var(--marker);
}

.app-chip--choice:focus-within {
  border-color: var(--ink);
  box-shadow: var(--ring-focus);
}

.app-check-inline__control {
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.app-check-inline__control::after {
  content: "";
  width: 0.35rem;
  height: 0.6rem;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(45deg) scale(0.8);
  transition: border-color 160ms ease;
}

.app-check-inline {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--gray-600);
  cursor: pointer;
}

.app-check-inline__input,
.app-chip__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.app-check-inline__label {
  font-size: var(--text-sm);
  line-height: 1.35rem;
}

.app-check-inline:focus-within .app-check-inline__control {
  border-color: var(--ink);
  box-shadow: var(--ring-focus);
}

.app-check-inline__input:checked + .app-check-inline__control {
  border-color: var(--ink);
  background: var(--ink);
}

.app-check-inline__input:checked + .app-check-inline__control::after {
  border-color: var(--color-text-inverse);
}