/**
 * MWANGI UI Components
 *
 * Framework-agnostic, accessible, beautiful components.
 * Built to extend PicoCSS with MWANGI brand personality.
 *
 * Component prefix: .mw-
 */

/* ============================================================================
   BUTTONS
   Primary, Secondary, Ghost, Danger, and size variants
   ============================================================================ */

/* ============================================================================
   BUTTON HEIGHT NORMALIZATION (CRITICAL - DO NOT MODIFY)

   This section ensures ALL button-like elements have identical heights across
   the entire application, regardless of:
   - Element type (<button>, <a>, <input>)
   - Class combination (.btn, .btn-primary, .btn-secondary, role="button")
   - PicoCSS variants (.contrast, .secondary, .outline, .primary)
   - Context (forms, modals, error pages, etc.)

   Issues this fixes:
   - Misaligned buttons in form action containers
   - Different heights between <a> and <button> elements
   - Inconsistent padding between PicoCSS and custom button classes
   ============================================================================ */

/* Step 1: Universal button element normalization */
button,
[type="button"],
[type="submit"],
[type="reset"],
[role="button"],
a[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
a[class*="btn-"],
button.btn,
button[class*="btn-"] {
  /* Force consistent display and alignment */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;

  /* Ensure consistent box model */
  box-sizing: border-box !important;

  /* Standardized dimensions - these values create perfect alignment */
  padding: 0.625rem 1.25rem !important;
  min-height: 44px !important; /* 44px = WCAG touch target minimum */

  /* Typography normalization */
  line-height: 1.4 !important;
  font-size: 0.9375rem !important; /* 15px */
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  /* Remove any inherited margins that could cause misalignment */
  margin: 0 !important;
}

/* Step 2: PicoCSS class variants - must match exact dimensions */
button.contrast,
button.secondary,
button.outline,
button.primary,
[role="button"].contrast,
[role="button"].secondary,
[role="button"].outline,
[role="button"].primary,
a[role="button"].contrast,
a[role="button"].secondary,
a[role="button"].outline,
a[role="button"].primary {
  padding: 0.625rem 1.25rem !important;
  min-height: 44px !important;
  line-height: 1.4 !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
}

/* Step 3: Custom .btn-* classes (app.css overrides) */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
a.btn,
a.btn-primary,
a.btn-secondary,
a.btn-danger {
  padding: 0.625rem 1.25rem !important;
  min-height: 44px !important;
  line-height: 1.4 !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Step 4: Size variants maintain consistent height relationships */
.btn-sm,
button.btn-sm,
[role="button"].btn-sm,
a.btn-sm {
  padding: 0.375rem 0.75rem !important;
  min-height: 36px !important;
  font-size: 0.8125rem !important;
}

.btn-lg,
button.btn-lg,
[role="button"].btn-lg,
a.btn-lg {
  padding: 0.875rem 1.75rem !important;
  min-height: 52px !important;
  font-size: 1rem !important;
}

/* Step 5: Container-level alignment enforcement */
.form-actions,
.modal-footer,
.error-actions,
div[style*="display: flex"][style*="gap"],
div[style*="display: flex"][style*="justify-content"] {
  align-items: center !important;
}

/* Step 6: Special case - buttons in grids */
.grid > button,
.grid > [role="button"],
.grid > a[role="button"],
.grid > .btn,
.grid > a.btn {
  margin: 0 !important;
}

/* Base button reset and shared styles */
.mw-btn,
[class*="mw-btn-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mw-spacing-2);
  font-family: var(--mw-font-family);
  font-weight: var(--mw-font-weight-medium);
  font-size: var(--mw-font-size-base);
  line-height: var(--mw-line-height-tight);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border: var(--mw-border-width-1) solid transparent;
  border-radius: var(--mw-radius-md);
  padding: var(--mw-spacing-2-5) var(--mw-spacing-4);
  transition: var(--mw-transition-colors), var(--mw-transition-transform);
}

.mw-btn:active,
[class*="mw-btn-"]:active {
  transform: translateY(1px);
}

.mw-btn:disabled,
[class*="mw-btn-"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.mw-btn:focus-visible,
[class*="mw-btn-"]:focus-visible {
  outline: none;
  box-shadow: var(--mw-shadow-focus);
}

/* Primary Button */
.mw-btn-primary {
  background: var(--mw-primary);
  color: white;
  border-color: var(--mw-primary);
}

.mw-btn-primary:hover:not(:disabled) {
  background: var(--mw-primary-hover);
  border-color: var(--mw-primary-hover);
}

.mw-btn-primary:active:not(:disabled) {
  background: var(--mw-primary-active);
  border-color: var(--mw-primary-active);
}

/* Secondary Button */
.mw-btn-secondary {
  background: var(--mw-secondary);
  color: white;
  border-color: var(--mw-secondary);
}

.mw-btn-secondary:hover:not(:disabled) {
  background: var(--mw-secondary-hover);
  border-color: var(--mw-secondary-hover);
}

.mw-btn-secondary:active:not(:disabled) {
  background: var(--mw-secondary-active);
  border-color: var(--mw-secondary-active);
}

/* Ghost Button - outline style */
.mw-btn-ghost {
  background: transparent;
  color: var(--mw-text-primary);
  border-color: var(--mw-border-primary);
}

.mw-btn-ghost:hover:not(:disabled) {
  background: var(--mw-hover-overlay);
  border-color: var(--mw-primary);
  color: var(--mw-primary);
}

.mw-btn-ghost:active:not(:disabled) {
  background: var(--mw-active-overlay);
}

/* Danger Button */
.mw-btn-danger {
  background: var(--mw-error);
  color: white;
  border-color: var(--mw-error);
}

.mw-btn-danger:hover:not(:disabled) {
  background: var(--mw-error-600);
  border-color: var(--mw-error-600);
}

.mw-btn-danger:active:not(:disabled) {
  background: var(--mw-error-700);
  border-color: var(--mw-error-700);
}

.mw-btn-danger:focus-visible {
  box-shadow: var(--mw-shadow-focus-error);
}

/* Button Sizes */
.mw-btn-sm,
[class*="mw-btn-"].mw-btn-sm {
  font-size: var(--mw-font-size-sm);
  padding: var(--mw-spacing-1-5) var(--mw-spacing-3);
}

.mw-btn-lg,
[class*="mw-btn-"].mw-btn-lg {
  font-size: var(--mw-font-size-md);
  padding: var(--mw-spacing-3) var(--mw-spacing-6);
}

/* Full width button */
.mw-btn-block,
[class*="mw-btn-"].mw-btn-block {
  width: 100%;
}

/* Icon-only button */
.mw-btn-icon,
[class*="mw-btn-"].mw-btn-icon {
  padding: var(--mw-spacing-2);
  width: 2.5rem;
  height: 2.5rem;
}

/* ============================================================================
   CARDS
   Basic, elevated, interactive, and bordered variants
   ============================================================================ */

.mw-card {
  background: var(--mw-bg-elevated);
  border: var(--mw-border-width-1) solid var(--mw-border-secondary);
  border-radius: var(--mw-radius-lg);
  padding: var(--mw-spacing-6);
  transition: var(--mw-transition-all);
}

.mw-card > header {
  margin-bottom: var(--mw-spacing-4);
  font-size: var(--mw-font-size-lg);
  font-weight: var(--mw-font-weight-semibold);
  color: var(--mw-text-primary);
}

.mw-card > footer {
  margin-top: var(--mw-spacing-4);
  padding-top: var(--mw-spacing-4);
  border-top: var(--mw-border-width-1) solid var(--mw-border-secondary);
  display: flex;
  gap: var(--mw-spacing-2);
  align-items: center;
  justify-content: flex-end;
}

/* Elevated card - more prominent shadow */
.mw-card-elevated {
  box-shadow: var(--mw-shadow-md);
  border-color: transparent;
}

/* Interactive card - hoverable */
.mw-card-interactive {
  cursor: pointer;
  border-color: var(--mw-border-primary);
}

.mw-card-interactive:hover {
  border-color: var(--mw-primary);
  box-shadow: var(--mw-shadow-md);
  transform: translateY(-2px);
}

.mw-card-interactive:active {
  transform: translateY(0);
}

/* Compact card */
.mw-card-compact {
  padding: var(--mw-spacing-4);
}

/* ============================================================================
   ALERTS / TOASTS
   Success, warning, error, info variants
   ============================================================================ */

.mw-alert {
  display: flex;
  gap: var(--mw-spacing-3);
  align-items: flex-start;
  padding: var(--mw-spacing-4);
  border-radius: var(--mw-radius-md);
  border-left: var(--mw-border-width-4) solid;
  font-size: var(--mw-font-size-sm);
  line-height: var(--mw-line-height-relaxed);
}

.mw-alert strong {
  font-weight: var(--mw-font-weight-semibold);
  display: block;
  margin-bottom: var(--mw-spacing-1);
}

.mw-alert-success {
  background: var(--mw-success-bg);
  border-color: var(--mw-success);
  color: var(--mw-success-700);
}

[data-theme="dark"] .mw-alert-success {
  color: var(--mw-success-300);
}

.mw-alert-warning {
  background: var(--mw-warning-bg);
  border-color: var(--mw-warning);
  color: var(--mw-warning-700);
}

[data-theme="dark"] .mw-alert-warning {
  color: var(--mw-warning-300);
}

.mw-alert-error {
  background: var(--mw-error-bg);
  border-color: var(--mw-error);
  color: var(--mw-error-700);
}

[data-theme="dark"] .mw-alert-error {
  color: var(--mw-error-300);
}

.mw-alert-info {
  background: var(--mw-info-bg);
  border-color: var(--mw-info);
  color: var(--mw-info-700);
}

[data-theme="dark"] .mw-alert-info {
  color: var(--mw-info-300);
}

/* Dismissible alert */
.mw-alert-dismissible {
  position: relative;
  padding-right: var(--mw-spacing-10);
}

.mw-alert-close {
  position: absolute;
  top: var(--mw-spacing-3);
  right: var(--mw-spacing-3);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--mw-spacing-1);
  opacity: 0.7;
  transition: var(--mw-transition-opacity);
}

.mw-alert-close:hover {
  opacity: 1;
}

/* Toast notification (position fixed) */
.mw-toast {
  position: fixed;
  top: var(--mw-spacing-4);
  right: var(--mw-spacing-4);
  max-width: 400px;
  z-index: var(--mw-z-toast);
  box-shadow: var(--mw-shadow-lg);
  animation: slideInRight var(--mw-duration-medium) var(--mw-ease-out);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.mw-toast.mw-toast-exit {
  animation: slideOutRight var(--mw-duration-medium) var(--mw-ease-in);
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ============================================================================
   FORMS
   Enhanced form controls with validation states
   ============================================================================ */

/* Form group spacing */
.mw-form-group {
  margin-bottom: var(--mw-spacing-5);
}

.mw-form-label {
  display: block;
  font-weight: var(--mw-font-weight-medium);
  margin-bottom: var(--mw-spacing-2);
  color: var(--mw-text-primary);
  font-size: var(--mw-font-size-sm);
}

.mw-form-help {
  display: block;
  font-size: var(--mw-font-size-xs);
  color: var(--mw-text-tertiary);
  margin-top: var(--mw-spacing-1);
}

.mw-form-error {
  display: block;
  font-size: var(--mw-font-size-xs);
  color: var(--mw-error);
  margin-top: var(--mw-spacing-1);
}

.mw-form-success {
  display: block;
  font-size: var(--mw-font-size-xs);
  color: var(--mw-success);
  margin-top: var(--mw-spacing-1);
}

/* Input validation states (works with PicoCSS inputs) */
input[data-valid],
textarea[data-valid],
select[data-valid] {
  border-color: var(--mw-success) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--mw-spacing-3) center;
  background-size: 1rem;
  padding-right: var(--mw-spacing-10);
}

input[data-valid]:focus,
textarea[data-valid]:focus,
select[data-valid]:focus {
  box-shadow: var(--mw-shadow-focus-success) !important;
}

input[data-invalid],
textarea[data-invalid],
select[data-invalid] {
  border-color: var(--mw-error) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--mw-spacing-3) center;
  background-size: 1rem;
  padding-right: var(--mw-spacing-10);
}

input[data-invalid]:focus,
textarea[data-invalid]:focus,
select[data-invalid]:focus {
  box-shadow: var(--mw-shadow-focus-error) !important;
}

/* Checkbox and Radio enhancements */
.mw-checkbox,
.mw-radio {
  display: flex;
  align-items: center;
  gap: var(--mw-spacing-2);
  cursor: pointer;
  margin-bottom: var(--mw-spacing-2);
}

.mw-checkbox input[type="checkbox"],
.mw-radio input[type="radio"] {
  cursor: pointer;
}

/* ============================================================================
   BADGES / TAGS
   Small status indicators and labels
   ============================================================================ */

.mw-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mw-spacing-1);
  padding: var(--mw-spacing-1) var(--mw-spacing-2);
  font-size: var(--mw-font-size-xs);
  font-weight: var(--mw-font-weight-medium);
  line-height: 1;
  border-radius: var(--mw-radius-full);
  white-space: nowrap;
}

.mw-badge-primary {
  background: var(--mw-primary-bg);
  color: var(--mw-primary);
  border: var(--mw-border-width-1) solid var(--mw-primary-200);
}

[data-theme="dark"] .mw-badge-primary {
  background: var(--mw-primary-bg);
  color: var(--mw-primary-400);
  border-color: var(--mw-primary-700);
}

.mw-badge-success {
  background: var(--mw-success-bg);
  color: var(--mw-success);
  border: var(--mw-border-width-1) solid var(--mw-success-border);
}

.mw-badge-warning {
  background: var(--mw-warning-bg);
  color: var(--mw-warning);
  border: var(--mw-border-width-1) solid var(--mw-warning-border);
}

.mw-badge-error {
  background: var(--mw-error-bg);
  color: var(--mw-error);
  border: var(--mw-border-width-1) solid var(--mw-error-border);
}

.mw-badge-info {
  background: var(--mw-info-bg);
  color: var(--mw-info);
  border: var(--mw-border-width-1) solid var(--mw-info-border);
}

.mw-badge-neutral {
  background: var(--mw-bg-tertiary);
  color: var(--mw-text-secondary);
  border: var(--mw-border-width-1) solid var(--mw-border-primary);
}

/* Dot indicator inside badge */
.mw-badge-dot::before {
  content: '';
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================================
   MODALS
   Accessible modal dialogs
   ============================================================================ */

.mw-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--mw-z-modal);
  padding: var(--mw-spacing-4);
  overflow-y: auto;
  animation: fadeIn var(--mw-duration-medium) var(--mw-ease-out);
}

.mw-modal[open],
.mw-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal backdrop */
.mw-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mw-bg-overlay);
  z-index: var(--mw-z-modal-backdrop);
  backdrop-filter: blur(2px);
}

/* Modal content container */
.mw-modal-content {
  position: relative;
  background: var(--mw-bg-elevated);
  border-radius: var(--mw-radius-lg);
  box-shadow: var(--mw-shadow-xl);
  max-width: 32rem;
  width: 100%;
  z-index: calc(var(--mw-z-modal) + 1);
  animation: slideUp var(--mw-duration-medium) var(--mw-ease-out);
}

@keyframes slideUp {
  from {
    transform: translateY(2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.mw-modal-header {
  padding: var(--mw-spacing-6);
  padding-bottom: var(--mw-spacing-4);
  border-bottom: var(--mw-border-width-1) solid var(--mw-border-secondary);
}

.mw-modal-title {
  margin: 0;
  font-size: var(--mw-font-size-xl);
  font-weight: var(--mw-font-weight-semibold);
  color: var(--mw-text-primary);
}

.mw-modal-body {
  padding: var(--mw-spacing-6);
  color: var(--mw-text-secondary);
}

.mw-modal-footer {
  padding: var(--mw-spacing-4) var(--mw-spacing-6);
  padding-top: var(--mw-spacing-4);
  border-top: var(--mw-border-width-1) solid var(--mw-border-secondary);
  display: flex;
  gap: var(--mw-spacing-2);
  justify-content: flex-end;
}

.mw-modal-close {
  position: absolute;
  top: var(--mw-spacing-4);
  right: var(--mw-spacing-4);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--mw-spacing-2);
  opacity: 0.6;
  transition: var(--mw-transition-opacity);
  font-size: var(--mw-font-size-xl);
  line-height: 1;
  color: var(--mw-text-secondary);
}

.mw-modal-close:hover {
  opacity: 1;
}

/* ============================================================================
   TABLES
   Enhanced table styling
   ============================================================================ */

.mw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mw-font-size-sm);
}

.mw-table thead {
  background: var(--mw-bg-secondary);
  border-bottom: var(--mw-border-width-2) solid var(--mw-border-primary);
}

.mw-table th {
  padding: var(--mw-spacing-3) var(--mw-spacing-4);
  text-align: left;
  font-weight: var(--mw-font-weight-semibold);
  color: var(--mw-text-primary);
  font-size: var(--mw-font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--mw-letter-spacing-wide);
}

.mw-table td {
  padding: var(--mw-spacing-3) var(--mw-spacing-4);
  border-bottom: var(--mw-border-width-1) solid var(--mw-border-secondary);
}

.mw-table tbody tr {
  transition: var(--mw-transition-colors);
}

.mw-table tbody tr:hover {
  background: var(--mw-hover-overlay);
}

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

/* Striped rows */
.mw-table-striped tbody tr:nth-child(even) {
  background: var(--mw-bg-secondary);
}

.mw-table-striped tbody tr:nth-child(even):hover {
  background: var(--mw-hover-overlay);
}

/* Compact table */
.mw-table-compact th,
.mw-table-compact td {
  padding: var(--mw-spacing-2) var(--mw-spacing-3);
}

/* Responsive table wrapper */
.mw-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   LOADING STATES
   Spinners and skeleton loaders
   ============================================================================ */

/* Spinner */
.mw-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--mw-border-secondary);
  border-top-color: var(--mw-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.mw-spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.mw-spinner-lg {
  width: 3rem;
  height: 3rem;
  border-width: 4px;
}

/* Spinner container for centered display */
.mw-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mw-spacing-8);
}

/* Skeleton loader */
.mw-skeleton {
  background: linear-gradient(
    90deg,
    var(--mw-bg-secondary) 0%,
    var(--mw-bg-tertiary) 50%,
    var(--mw-bg-secondary) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--mw-radius-base);
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.mw-skeleton-text {
  height: 1rem;
  margin-bottom: var(--mw-spacing-2);
}

.mw-skeleton-heading {
  height: 2rem;
  margin-bottom: var(--mw-spacing-3);
}

.mw-skeleton-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.mw-skeleton-rect {
  width: 100%;
  height: 8rem;
}

/* ============================================================================
   NAVIGATION
   Header, breadcrumbs, and navigation components
   ============================================================================ */

.mw-nav {
  display: flex;
  align-items: center;
  gap: var(--mw-spacing-6);
  padding: var(--mw-spacing-4) 0;
}

.mw-nav-brand {
  font-size: var(--mw-font-size-lg);
  font-weight: var(--mw-font-weight-bold);
  color: var(--mw-text-primary);
  text-decoration: none;
  transition: var(--mw-transition-colors);
}

.mw-nav-brand:hover {
  color: var(--mw-primary);
}

.mw-nav-links {
  display: flex;
  gap: var(--mw-spacing-4);
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.mw-nav-link {
  color: var(--mw-text-secondary);
  text-decoration: none;
  font-weight: var(--mw-font-weight-medium);
  transition: var(--mw-transition-colors);
  padding: var(--mw-spacing-2);
  border-radius: var(--mw-radius-base);
}

.mw-nav-link:hover {
  color: var(--mw-primary);
  background: var(--mw-hover-overlay);
}

.mw-nav-link.active {
  color: var(--mw-primary);
  background: var(--mw-primary-bg);
}

/* Breadcrumbs */
.mw-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--mw-spacing-2);
  list-style: none;
  padding: 0;
  margin: var(--mw-spacing-4) 0;
  font-size: var(--mw-font-size-sm);
}

.mw-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: var(--mw-spacing-2);
}

.mw-breadcrumbs li:not(:last-child)::after {
  content: '/';
  color: var(--mw-text-tertiary);
}

.mw-breadcrumbs a {
  color: var(--mw-text-secondary);
  text-decoration: none;
  transition: var(--mw-transition-colors);
}

.mw-breadcrumbs a:hover {
  color: var(--mw-primary);
}

.mw-breadcrumbs li:last-child a,
.mw-breadcrumbs li:last-child {
  color: var(--mw-text-primary);
  font-weight: var(--mw-font-weight-medium);
}

/* ============================================================================
   DIVIDER
   Horizontal rules with optional text
   ============================================================================ */

.mw-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--mw-spacing-6) 0;
  color: var(--mw-text-tertiary);
  font-size: var(--mw-font-size-sm);
}

.mw-divider::before,
.mw-divider::after {
  content: '';
  flex: 1;
  border-bottom: var(--mw-border-width-1) solid var(--mw-border-secondary);
}

.mw-divider:not(:empty)::before {
  margin-right: var(--mw-spacing-3);
}

.mw-divider:not(:empty)::after {
  margin-left: var(--mw-spacing-3);
}

/* ============================================================================
   UTILITY COMPONENT CLASSES
   ============================================================================ */

/* Focus ring helper */
.mw-focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--mw-shadow-focus);
  border-radius: var(--mw-radius-base);
}

/* Accessible visually hidden (for screen readers) */
.mw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}