/* feature.css — MedaMeta base components
   Requires: tokens.css loaded before this file.

   Philosophy:
   - Calm, precise, clinical-grade defaults
   - Minimal decoration, clear states
   - Prefer borders over shadows
*/

/* -----------------------------
   Global helpers (optional)
------------------------------*/
:root {
  --focus-ring-color: color-mix(in srgb, var(--color-brand-teal) 55%, white);
  --focus-ring-shadow: 0 0 0 3px var(--focus-ring-color);
  --transition-standard: var(--motion-normal) var(--easing-standard);
}

@supports not (color-mix(in srgb, white, black)) {
  :root {
    /* Fallback if color-mix is unsupported */
    --focus-ring-color: rgba(63, 167, 161, 0.35);
    --focus-ring-shadow: 0 0 0 3px var(--focus-ring-color);
  }
}

.mm-visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* -----------------------------
   Buttons
------------------------------*/
.mm-btn {
  font-family: var(--font-ui);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);

  height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--button-radius);

  border: 1px solid var(--color-border-default);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background var(--transition-standard),
    border-color var(--transition-standard),
    color var(--transition-standard),
    box-shadow var(--transition-standard),
    transform var(--transition-standard);
}

.mm-btn:hover {
  background: var(--color-bg-secondary);
}

.mm-btn:active {
  transform: translateY(0.5px);
}

.mm-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-shadow);
  border-color: color-mix(in srgb, var(--color-brand-teal) 55%, var(--color-border-default));
}

.mm-btn:disabled,
.mm-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Primary (Teal) */
.mm-btn--primary {
  background: var(--color-brand-teal);
  border-color: color-mix(in srgb, var(--color-brand-teal) 70%, black);
  color: #FFFFFF;
}

.mm-btn--primary:hover {
  background: color-mix(in srgb, var(--color-brand-teal) 88%, black);
}

.mm-btn--primary:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 35%, white);
}

/* Secondary (Outline, calm) */
.mm-btn--secondary {
  background: var(--color-bg-primary);
  border-color: color-mix(in srgb, var(--color-brand-blue) 18%, var(--color-border-default));
  color: var(--color-brand-blue);
}

.mm-btn--secondary:hover {
  background: var(--color-bg-secondary);
  border-color: color-mix(in srgb, var(--color-brand-blue) 28%, var(--color-border-default));
}

/* Danger (for destructive actions only) */
.mm-btn--danger {
  background: var(--color-bg-primary);
  border-color: color-mix(in srgb, var(--color-error) 35%, var(--color-border-default));
  color: var(--color-error);
}

.mm-btn--danger:hover {
  background: color-mix(in srgb, var(--color-error) 6%, var(--color-bg-primary));
  border-color: color-mix(in srgb, var(--color-error) 50%, var(--color-border-default));
}

/* Subtle (for low-priority actions) */
.mm-btn--subtle {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

.mm-btn--subtle:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

/* Sizes */
.mm-btn--sm {
  height: 34px;
  padding: 0 12px;
  font-size: var(--font-size-sm);
}

.mm-btn--lg {
  height: 46px;
  padding: 0 18px;
  font-size: var(--font-size-lg);
}

/* -----------------------------
   Inputs (text, select, textarea)
------------------------------*/
.mm-field {
  display: grid;
  gap: 6px;
  font-family: var(--font-ui);
}

.mm-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.mm-help {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
}

.mm-error {
  font-size: var(--font-size-xs);
  color: var(--color-error);
  line-height: var(--line-height-normal);
}

.mm-input,
.mm-select,
.mm-textarea {
  font-family: var(--font-ui);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);

  border: 1px solid var(--color-border-default);
  border-radius: var(--input-radius);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);

  transition:
    border-color var(--transition-standard),
    box-shadow var(--transition-standard),
    background var(--transition-standard);
}

.mm-input,
.mm-select {
  height: var(--input-height);
  padding: 0 var(--input-padding-x);
}

.mm-textarea {
  min-height: 96px;
  padding: 10px var(--input-padding-x);
  resize: vertical;
}

.mm-input::placeholder,
.mm-textarea::placeholder {
  color: color-mix(in srgb, var(--color-text-muted) 75%, white);
}

.mm-input:focus,
.mm-select:focus,
.mm-textarea:focus {
  outline: none;
}

.mm-input:focus-visible,
.mm-select:focus-visible,
.mm-textarea:focus-visible {
  border-color: color-mix(in srgb, var(--color-brand-teal) 55%, var(--color-border-default));
  box-shadow: var(--focus-ring-shadow);
}

.mm-input:disabled,
.mm-select:disabled,
.mm-textarea:disabled {
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.mm-input[aria-invalid="true"],
.mm-select[aria-invalid="true"],
.mm-textarea[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--color-error) 55%, var(--color-border-default));
}

.mm-input[aria-invalid="true"]:focus-visible,
.mm-select[aria-invalid="true"]:focus-visible,
.mm-textarea[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, white);
}

/* Input group (prefix/suffix) */
.mm-input-group {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  border: 1px solid var(--color-border-default);
  border-radius: var(--input-radius);
  background: var(--color-bg-primary);
  overflow: hidden;
}

.mm-input-group:focus-within {
  border-color: color-mix(in srgb, var(--color-brand-teal) 55%, var(--color-border-default));
  box-shadow: var(--focus-ring-shadow);
}

.mm-input-group__affix {
  padding: 0 10px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border-default);
}

.mm-input-group__affix--right {
  border-right: none;
  border-left: 1px solid var(--color-border-default);
}

.mm-input-group .mm-input {
  border: none;
  height: var(--input-height);
  padding: 0 var(--input-padding-x);
}

/* -----------------------------
   Tables
------------------------------*/
.mm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);

  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-primary);
}

.mm-table thead th {
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-default);
  position: sticky; /* helpful in scroll containers */
  top: 0;
  z-index: 1;
}

.mm-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-default);
  vertical-align: top;
}

.mm-table tbody tr:last-child td {
  border-bottom: none;
}

.mm-table--zebra tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--color-bg-secondary) 55%, white);
}

.mm-table td.mm-num,
.mm-table th.mm-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mm-table td.mm-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Row hover (optional, calm) */
.mm-table--hover tbody tr:hover td {
  background: color-mix(in srgb, var(--color-brand-cyan) 55%, white);
}

/* Status chips (optional utility for results tables) */
.mm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  line-height: 1.2;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
}

.mm-chip--success {
  border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border-default));
  color: color-mix(in srgb, var(--color-success) 75%, black);
  background: color-mix(in srgb, var(--color-success) 8%, white);
}

.mm-chip--warning {
  border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border-default));
  color: color-mix(in srgb, var(--color-warning) 70%, black);
  background: color-mix(in srgb, var(--color-warning) 10%, white);
}

.mm-chip--error {
  border-color: color-mix(in srgb, var(--color-error) 40%, var(--color-border-default));
  color: color-mix(in srgb, var(--color-error) 80%, black);
  background: color-mix(in srgb, var(--color-error) 8%, white);
}