/**
 * Nearly Perfect Extranet — Component Bridge (TECH-774)
 *
 * Maps legacy component class names onto the Nearly Perfect brand look, so
 * existing page templates inherit the brand WITHOUT per-page template
 * changes. The brand component rules live in the vendored np-components.css;
 * this file is the shim layer that points legacy selectors at the same
 * tokens / values.
 *
 * Loaded last (after styles.css, np-components.css, np-shell.css) so it wins
 * the cascade. styles.css and all templates are left untouched — DOM
 * structure is unchanged, so handler tests keep passing.
 *
 * NOTE: the TECH-773 token remap (--color-accent -> indigo, etc.) already
 * rebranded everything that referenced tokens (tab/sort/breadcrumb hover,
 * focus borders, checkboxes, required marks, card hover). This file fixes
 * what tokens could not: hardcoded non-brand colors (mint focus glow,
 * emerald/amber/blue alert+badge+toast tints, blue links), and aligns
 * radii / button styling with the brand component specs.
 *
 * When Page Sweep tasks (#5–#11) convert a page to native .np-* classes,
 * the corresponding legacy rules here become dead and can be removed.
 */

/* ============================================================
 * BUTTONS  (.btn family -> .np-btn family)
 * ============================================================ */
.btn {
  border-radius: var(--np-radius-sm, 12px);
  min-height: 44px; /* WCAG touch target */
  font-weight: 500;
}
.btn:hover { transform: none; }
.btn:active { transform: none; }
.btn:focus-visible {
  outline: 2px solid var(--color-indigo-400);
  outline-offset: 2px;
}

/* Standalone disabled affordance (works without legacy .btn) */
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Main / primary — indigo fill, white text */
.btn,
.btn-primary {
  background: var(--color-indigo-500);
  color: #FFFFFF;
}
.btn:hover,
.btn-primary:hover {
  background: var(--color-indigo-600);
}
.btn:active,
.btn-primary:active {
  background: var(--color-indigo-700);
}

/* Secondary — white, neutral border, indigo on hover */
.btn-secondary {
  background: #FFFFFF;
  color: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-200);
}
.btn-secondary:hover {
  background: #FFFFFF;
  border-color: var(--color-indigo-400);
  color: var(--color-indigo-500);
}

/* Destructive / positive */
.btn-danger,
.np-btn-danger {
  background: var(--color-coral-500);
  color: #FFFFFF;
}
.btn-danger:hover,
.np-btn-danger:hover { background: var(--color-coral-600); }

.btn-success,
.np-btn-success {
  background: var(--color-mint-600);
  color: #FFFFFF;
}
.btn-success:hover,
.np-btn-success:hover { background: var(--color-mint-700); }

/* ============================================================
 * FORM CONTROLS  (.form-* -> .np-input / .np-textarea / .np-select)
 * ============================================================ */
.form-input,
.form-textarea,
.form-select {
  background: #FFFFFF;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--np-radius-sm, 12px);
  color: var(--color-neutral-800);
  /* Form controls don't inherit font-family — textareas default to monospace */
  font-family: var(--font-body, 'Inter', sans-serif);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-indigo-500);
  box-shadow: 0 0 0 3px rgba(18, 11, 164, 0.1); /* indigo-500 @ 10% */
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-neutral-400);
}
.form-group.has-error .form-input,
.form-group.has-error .form-textarea,
.form-group.has-error .form-select {
  border-color: var(--color-coral-500);
  background-color: var(--color-coral-50);
}
.form-error { color: var(--color-coral-600); }

/* ------------------------------------------------------------
 * NATIVE <select> DROPDOWNS
 * `.np-select` is the class for the custom JS dropdown *widget* (rendered on a
 * <div> with a `.np-select-trigger`), so native <select class="np-select">
 * elements were left unstyled, and `.form-select` only got a partial treatment
 * (border/font, no height/padding/arrow). Style the <select> element itself so
 * every native dropdown matches the branded input field, with a custom chevron.
 * Scoped to the element, so the custom widget (no <select>) is unaffected.
 * The class-qualified selectors win over the widget/partial rules by specificity.
 * ------------------------------------------------------------ */
select,
select.np-select,
select.form-select,
select.np-input {
  height: var(--np-control-height, 44px);
  padding: 0 40px 0 16px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--np-radius-sm, 12px);
  background-color: #FFFFFF;
  color: var(--color-neutral-800);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 16px;
  line-height: 1.2;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color var(--np-transition, 0.15s ease),
              box-shadow var(--np-transition, 0.15s ease);
}
select:hover,
select.np-select:hover,
select.form-select:hover {
  border-color: var(--color-neutral-300);
}
select:focus,
select.np-select:focus,
select.form-select:focus,
select.np-input:focus {
  outline: none;
  border-color: var(--color-indigo-500);
  box-shadow: 0 0 0 3px rgba(18, 11, 164, 0.1); /* indigo-500 @ 10% */
}
select:disabled {
  background-color: var(--color-neutral-100, #F5F5F5);
  color: var(--color-neutral-400);
  cursor: not-allowed;
}
.form-group.has-error select,
.form-group.has-error select.np-select {
  border-color: var(--color-coral-500);
  background-color: var(--color-coral-50);
}

/* ============================================================
 * CARDS & SURFACES  (.card, .auth-container -> brand surface)
 * ============================================================ */
.card {
  border-radius: var(--np-radius, 16px);
}

/* ============================================================
 * TABLE  (.table-container / .data-table -> .np-table)
 * ============================================================ */
.table-container {
  border-radius: var(--np-radius, 16px);
  border-color: var(--color-neutral-200);
}
.data-table th {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

/* ============================================================
 * PAGINATION
 * ============================================================ */
.pagination-btn {
  border-radius: var(--np-radius-sm, 12px);
}

/* ============================================================
 * MODAL  (.modal-content -> .np-dialog)
 * ============================================================ */
.modal-content {
  border-radius: var(--np-radius, 16px);
}

/* ============================================================
 * ALERTS  (.alert-* -> .np-alert) — brand semantic tints, no border
 * ============================================================ */
.alert {
  border-radius: var(--np-radius-sm, 12px);
  font-weight: 500;
}
.alert-success {
  background: var(--color-mint-100);
  border: none;
  color: var(--color-mint-800);
}
.alert-error {
  background: var(--color-coral-100);
  border: none;
  color: var(--color-coral-800);
}
.alert-warning {
  background: #FEF3C7;
  border: none;
  color: #92400E;
}
.alert-info {
  background: var(--color-periwinkle-100);
  border: none;
  color: var(--color-periwinkle-800);
}

/* ============================================================
 * TOASTS  (.toast-* -> branded toast) — brand left-accent per type
 * ============================================================ */
.toast {
  border-radius: var(--np-radius-sm, 12px);
}
.toast-success { border-left-color: var(--color-mint-500); }
.toast-error   { border-left-color: var(--color-coral-500); }
.toast-warning { border-left-color: #F59E0B; }
.toast-info    { border-left-color: var(--color-periwinkle-500); }

/* ============================================================
 * BADGES  (.badge-* -> .np-chip / .np-tag) — brand tints
 * ============================================================ */
.badge { font-weight: 500; }
.badge-default {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
}
.badge-success {
  background: var(--color-mint-100);
  color: var(--color-mint-800);
}
.badge-error {
  background: var(--color-coral-100);
  color: var(--color-coral-800);
}
.badge-warning {
  background: #FEF3C7;
  color: #92400E;
}
.badge-info {
  background: var(--color-periwinkle-100);
  color: var(--color-periwinkle-800);
}

/* ============================================================
 * TABS  (.tab-btn -> .np-tab) — indigo active already via token remap
 * ============================================================ */
.tab-btn.active {
  font-weight: 600;
}

/* ============================================================
 * UTILITY LINKS  (blue -> brand indigo)
 * ============================================================ */
.text-link,
.link-accent {
  color: var(--color-indigo-500);
  text-decoration: none;
  transition: color var(--np-transition, 200ms ease);
}
.text-link:hover,
.link-accent:hover {
  color: var(--color-indigo-600);
}