/* ==========================================================================
   Component primitives — layer on top of tokens.css. Import tokens first. Vanilla CSS only.
   Node Command (NC) Design System
   Shared canonical stylesheet across apps/control-plane and apps/web.
   ========================================================================== */

/* ==========================================================================
   1. BUTTONS (.btn)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-none);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-border-focus);
}

.btn:disabled,
.btn[disabled],
.btn.is-disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: var(--shadow-none);
}

/* Button Variants */
.btn-primary {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-on-brand);
}

.btn-primary:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
  background-color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

.btn-primary:active:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
  background-color: var(--color-brand-active);
  border-color: var(--color-brand-active);
}

.btn-secondary {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border-accent);
  color: var(--color-text-primary);
}

.btn-secondary:active:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
  background-color: var(--color-border-subtle);
}

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

.btn-danger:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
  background-color: var(--color-danger-border);
  border-color: var(--color-danger);
  color: var(--color-danger-text);
}

.btn-danger:active:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger);
}

.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
  background-color: var(--color-bg-elevated);
  border-color: transparent;
  color: var(--color-text-primary);
}

.btn-ghost:active:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
  background-color: var(--color-border-subtle);
}

/* Button Sizes */
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  gap: var(--space-1);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
  gap: var(--space-3);
}

/* ==========================================================================
   2. FORM CONTROLS (.input / .textarea / .select)
   ========================================================================== */

.input,
.textarea,
.select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-muted);
}

.input:hover:not(:disabled):not(:focus):not(.is-error),
.textarea:hover:not(:disabled):not(:focus):not(.is-error),
.select:hover:not(:disabled):not(:focus):not(.is-error) {
  border-color: var(--color-border-accent);
}

.input:focus,
.input:focus-visible,
.textarea:focus,
.textarea:focus-visible,
.select:focus,
.select:focus-visible {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-border-focus);
}

.input:disabled,
.input[disabled],
.input.is-disabled,
.textarea:disabled,
.textarea[disabled],
.textarea.is-disabled,
.select:disabled,
.select[disabled],
.select.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-subtle);
}

.textarea {
  min-height: calc(var(--space-10) * 2);
  resize: vertical;
}

/* Error State */
.input.is-error,
.textarea.is-error,
.select.is-error,
.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.input.is-error:focus,
.input.is-error:focus-visible,
.textarea.is-error:focus,
.textarea.is-error:focus-visible,
.select.is-error:focus,
.select.is-error:focus-visible,
.input[aria-invalid="true"]:focus,
.input[aria-invalid="true"]:focus-visible,
.textarea[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus-visible,
.select[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus-visible {
  outline: none;
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-border);
}

/* ==========================================================================
   3. BADGES (.badge)
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-none);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  white-space: nowrap;
  box-sizing: border-box;
}

.badge-success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

.badge-warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

.badge-danger {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

.badge-info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-text);
}

/* ==========================================================================
   4. CARDS (.card)
   ========================================================================== */

.card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  color: var(--color-text-primary);
  box-sizing: border-box;
}

/* ==========================================================================
   5. MODAL BACKDROP & DIALOG (.modal-backdrop / .modal)
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: var(--color-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  box-sizing: border-box;
}

.modal {
  position: relative;
  z-index: var(--z-modal);
  width: 100%;
  max-width: calc(var(--space-10) * 14);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
  color: var(--color-text-primary);
  box-sizing: border-box;
}

/* ==========================================================================
   6. ALERTS (.alert)
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  box-sizing: border-box;
}

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

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

.alert-danger {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

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

/* ==========================================================================
   7. REDUCED MOTION OVERRIDE (WCAG 2.2 AA)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   8. PRINT STYLES
   ========================================================================== */

@media print {
  *, *::before, *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }

  body,
  main,
  article,
  section,
  .admin-main-viewport,
  .admin-panel,
  .kpi-card-compact,
  .attention-section,
  .health-matrix-section,
  .container,
  .card,
  .table,
  table,
  thead,
  tbody,
  tr,
  th,
  td {
    background: #fff !important;
    color: #000 !important;
    border-color: #d1d5db !important;
  }

  h1, h2, h3, h4, h5, h6,
  .header-title h1,
  .admin-header h1,
  .kpi-compact-val,
  strong,
  b,
  [style*="color:#fff"],
  [style*="color: #fff"],
  [style*="color: white"],
  p, span, label, a, td, th, li, dt, dd, code, pre {
    color: #000 !important;
  }

  nav,
  .top-nav,
  .admin-navbar,
  .admin-sidebar,
  .page-nav-tabs,
  .admin-nav,
  .btn,
  .btn-refresh,
  .btn-nav-action,
  button,
  .skip-to-content,
  .drawer-backdrop,
  .dashboard-drawer-backdrop,
  .dashboard-drawer,
  .admin-drawer,
  .modal-backdrop,
  .modal,
  .modal-overlay,
  .nc-modal-overlay,
  .offline-banner,
  .pwa-banner,
  .nc-toast-region,
  .toast-region {
    display: none !important;
  }

  th,
  thead th,
  .sticky-table-header th {
    position: static !important;
  }
}