/*!
 * E42 Carbon CSS v1.0.0
 * Based on IBM Carbon Design System
 * Adapted for E42 with muted professional aesthetic
 * Licence: MIT
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================================================= */

:root {
  /* Primary Palette */
  --color-primary: #4472c4;
  --color-primary-hover: #3461b3;
  --color-primary-active: #3461b3;
  --color-primary-subtle: #f4f7fb;
  --color-primary-muted: #6b93d6;

  /* Neutrals */
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-elevated: #fafbfc;
  --color-surface-overlay: #f5f7f9;
  --color-border: #d1d9e0;
  --color-border-subtle: #e8ecef;
  --color-divider: #d1d9e0;

  /* Text */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #5a6c7d;
  --color-text-tertiary: #7a8896;
  --color-text-disabled: #9aa0a6;
  --color-text-inverse: #ffffff;
  --color-text-on-color: #ffffff;

  /* Status (ISA101-Compliant) */
  --color-success: #0d7d32;
  --color-success-subtle: #e6f4ea;
  --color-warning: #b06000;
  --color-warning-subtle: #fef7e0;
  --color-error: #d33b2c;
  --color-error-subtle: #fce8e6;
  --color-info: #1565c0;
  --color-info-subtle: #e8f0fe;

  /* Interactive States */
  --color-focus: #2d5aa0;
  --color-focus-outline: rgba(45, 90, 160, 0.4);
  --color-hover-background: #f4f7fb;
  --color-active-background: #e8f0fe;
  --color-disabled-background: #f5f7f9;

  /* Functional */
  --color-link: #1565c0;
  --color-link-hover: #0d47a1;
  --color-link-visited: #5a3a8a;

  /* Typography */
  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 
                      'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
  --font-family-mono: 'IBM Plex Mono', 'SF Mono', Monaco, 'Cascadia Code',
                      'Roboto Mono', 'Courier New', monospace;

  /* Type Scale */
  --font-size-h1: 1.75rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  --font-size-h4: 1.125rem;
  --font-size-h5: 1rem;
  --font-size-h6: 0.875rem;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;
  --font-size-lg: 1.125rem;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing Scale (2x Grid) */
  --spacing-01: 0.125rem;
  --spacing-02: 0.25rem;
  --spacing-03: 0.5rem;
  --spacing-04: 0.75rem;
  --spacing-05: 1rem;
  --spacing-06: 1.5rem;
  --spacing-07: 2rem;
  --spacing-08: 2.5rem;
  --spacing-09: 3rem;
  --spacing-10: 4rem;
  --spacing-11: 5rem;
  --spacing-12: 6rem;

  /* Transitions */
  --transition-fast: 110ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Dark Mode */
[data-theme="dark"] {
  --color-primary: #5a8fd8;
  --color-primary-hover: #7aa5e0;
  --color-primary-active: #7aa5e0;
  --color-primary-subtle: #1a2633;
  --color-primary-muted: #4a6a93;

  --color-background: #1a1f26;
  --color-surface: #212830;
  --color-surface-elevated: #2a3139;
  --color-surface-overlay: #333a42;
  --color-border: #3d4550;
  --color-border-subtle: #2f353d;
  --color-divider: #3d4550;

  --color-text-primary: #f0f2f5;
  --color-text-secondary: #b8c1cc;
  --color-text-tertiary: #8a95a3;
  --color-text-disabled: #5a6470;
  --color-text-inverse: #1a1f26;
  --color-text-on-color: #ffffff;

  --color-success: #2da44e;
  --color-success-subtle: #0d2818;
  --color-warning: #d4a545;
  --color-warning-subtle: #2d2210;
  --color-error: #e36d5f;
  --color-error-subtle: #2d1a18;
  --color-info: #58a6ff;
  --color-info-subtle: #0d2847;

  --color-focus: #5a8fd8;
  --color-focus-outline: rgba(90, 143, 216, 0.4);
  --color-hover-background: #2a3139;
  --color-active-background: #333a42;
  --color-disabled-background: #212830;

  --color-link: #58a6ff;
  --color-link-hover: #7aa5e0;
  --color-link-visited: #a78bfa;
}

/* ============================================================================
   BASE STYLES & RESET
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-background);
}

/* Focus Styles */
*:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Remove outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================================
   TYPOGRAPHY
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: var(--spacing-04);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

h1 {
  font-size: var(--font-size-h1);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--font-size-h2);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

p {
  margin-top: 0;
  margin-bottom: var(--spacing-04);
}

a:not(.btn) {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:not(.btn):hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

a:not(.btn):visited {
  color: var(--color-link-visited);
}

code, pre, kbd, samp {
  font-family: var(--font-family-mono);
  font-size: 0.9375rem;
}

code {
  padding: 0.125rem 0.25rem;
  background-color: var(--color-surface-overlay);
  border-radius: 0.25rem;
}

pre {
  padding: var(--spacing-04);
  background-color: var(--color-surface-overlay);
  border: 1px solid var(--color-border-subtle);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background-color: transparent;
}

/* Typography Utilities */
.text-heading-1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
}

.text-heading-2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

.text-body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.text-body-sm {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.text-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: 0.01em;
}

.text-mono {
  font-family: var(--font-family-mono);
  font-size: 0.9375rem;
}

/* ============================================================================
   LAYOUT
   ========================================================================= */

.container {
  width: 100%;
  max-width: 1584px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-05);
  padding-right: var(--spacing-05);
}

@media (min-width: 1312px) {
  .container {
    padding-left: var(--spacing-06);
    padding-right: var(--spacing-06);
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: var(--spacing-05);
}

@media (max-width: 672px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 672px) and (max-width: 1056px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* Column Spans */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }
.col-span-13 { grid-column: span 13; }
.col-span-14 { grid-column: span 14; }
.col-span-15 { grid-column: span 15; }
.col-span-16 { grid-column: span 16; }
.col-full { grid-column: 1 / -1; }

/* ============================================================================
   BUTTONS
   ========================================================================= */

.btn,
a.btn,
button.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-03);
  padding: var(--spacing-03) var(--spacing-05);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  text-decoration: none !important;
  white-space: nowrap;
  user-select: none;
}

a.btn:hover,
button.btn:hover {
  text-decoration: none !important;
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Primary Button */
.btn-primary,
a.btn-primary,
button.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-color) !important;
}

.btn-primary:hover:not(:disabled),
a.btn-primary:hover:not(:disabled),
button.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
  color: var(--color-text-on-color) !important;
}

.btn-primary:active:not(:disabled),
a.btn-primary:active:not(:disabled),
button.btn-primary:active:not(:disabled) {
  background-color: var(--color-primary-active);
  color: var(--color-text-on-color) !important;
}

/* Secondary Button */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary) !important;
}

.btn-secondary:hover:not(:disabled),
a.btn-secondary:hover:not(:disabled),
button.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-primary-subtle);
  color: var(--color-primary) !important;
}

.btn-secondary:active:not(:disabled),
a.btn-secondary:active:not(:disabled),
button.btn-secondary:active:not(:disabled) {
  background-color: var(--color-active-background);
  color: var(--color-primary) !important;
}

/* Tertiary/Ghost Button */
.btn-tertiary,
a.btn-tertiary,
button.btn-tertiary {
  background-color: transparent;
  color: var(--color-primary) !important;
}

.btn-tertiary:hover:not(:disabled),
a.btn-tertiary:hover:not(:disabled),
button.btn-tertiary:hover:not(:disabled) {
  background-color: var(--color-hover-background);
  color: var(--color-primary) !important;
}

.btn-tertiary:active:not(:disabled),
a.btn-tertiary:active:not(:disabled),
button.btn-tertiary:active:not(:disabled) {
  background-color: var(--color-active-background);
  color: var(--color-primary) !important;
}

/* Danger Button */
.btn-danger,
a.btn-danger,
button.btn-danger {
  background-color: var(--color-error);
  color: var(--color-text-on-color) !important;
}

.btn-danger:hover:not(:disabled),
a.btn-danger:hover:not(:disabled),
button.btn-danger:hover:not(:disabled) {
  background-color: #b52e23;
  color: var(--color-text-on-color) !important;
}

.btn-danger:active:not(:disabled),
a.btn-danger:active:not(:disabled),
button.btn-danger:active:not(:disabled) {
  background-color: #9a2820;
  color: var(--color-text-on-color) !important;
}

/* Disabled State */
.btn:disabled {
  background-color: var(--color-disabled-background);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  border-color: transparent;
}

/* Button Sizes */
.btn-sm {
  padding: var(--spacing-02) var(--spacing-04);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--spacing-04) var(--spacing-06);
  font-size: var(--font-size-lg);
}

/* ============================================================================
   FORM CONTROLS
   ========================================================================= */

.form-group {
  margin-bottom: var(--spacing-05);
}

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

.form-label.required::after {
  content: " *";
  color: var(--color-error);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--spacing-03) var(--spacing-04);
  font-family: inherit;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-text-primary);
  transition: border-color var(--transition-fast),
              outline var(--transition-fast);
}

.form-input:hover:not(:disabled),
.form-select:hover:not(:disabled),
.form-textarea:hover:not(:disabled) {
  border-bottom-color: var(--color-primary);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
  border-bottom-color: var(--color-focus);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background-color: var(--color-disabled-background);
  color: var(--color-text-disabled);
  border-color: var(--color-border-subtle);
  cursor: not-allowed;
}

/* Validation States */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-bottom-color: var(--color-error);
}

.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
  border-bottom-color: var(--color-success);
}

.form-helper-text {
  display: block;
  margin-top: var(--spacing-02);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.form-error-text {
  display: block;
  margin-top: var(--spacing-02);
  font-size: var(--font-size-sm);
  color: var(--color-error);
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-03);
  margin-bottom: var(--spacing-03);
}

.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  cursor: pointer;
}

.form-check-label {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  cursor: pointer;
}

/* ============================================================================
   CARDS
   ========================================================================= */

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  padding: var(--spacing-05);
}

.card-elevated {
  background-color: var(--color-surface-elevated);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
              0 1px 2px rgba(0, 0, 0, 0.02);
}

.card-header {
  margin-bottom: var(--spacing-04);
  padding-bottom: var(--spacing-04);
  border-bottom: 1px solid var(--color-divider);
}

.card-title {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-02);
  margin-bottom: 0;
}

.card-body {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.card-footer {
  margin-top: var(--spacing-04);
  padding-top: var(--spacing-04);
  border-top: 1px solid var(--color-divider);
}

/* ============================================================================
   BADGES
   ========================================================================= */

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

.badge-success {
  background-color: var(--color-success-subtle);
  color: var(--color-success);
}

.badge-warning {
  background-color: var(--color-warning-subtle);
  color: var(--color-warning);
}

.badge-error {
  background-color: var(--color-error-subtle);
  color: var(--color-error);
}

.badge-info {
  background-color: var(--color-info-subtle);
  color: var(--color-info);
}

.badge-neutral {
  background-color: var(--color-surface-overlay);
  color: var(--color-text-secondary);
}

/* ============================================================================
   TABLES
   ========================================================================= */

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

.table thead {
  border-bottom: 2px solid var(--color-border);
}

.table th {
  padding: var(--spacing-04);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: left;
  background-color: var(--color-surface-elevated);
}

.table td {
  padding: var(--spacing-04);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}

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

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

.table-bordered {
  border: 1px solid var(--color-border);
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--color-border-subtle);
}

/* ============================================================================
   NOTIFICATIONS/ALERTS
   ========================================================================= */

.notification {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-04);
  padding: var(--spacing-04);
  border-left: 4px solid currentColor;
  background-color: var(--color-surface-elevated);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: var(--spacing-04);
}

.notification-success {
  color: var(--color-success);
  background-color: var(--color-success-subtle);
}

.notification-warning {
  color: var(--color-warning);
  background-color: var(--color-warning-subtle);
}

.notification-error {
  color: var(--color-error);
  background-color: var(--color-error-subtle);
}

.notification-info {
  color: var(--color-info);
  background-color: var(--color-info-subtle);
}

.notification-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-01);
}

.notification-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.notification-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-secondary);
}

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

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* Flex Utilities */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.gap-sm { gap: var(--spacing-03); }
.gap-md { gap: var(--spacing-05); }
.gap-lg { gap: var(--spacing-07); }

/* Spacing */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pr-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }

/* Text Utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-disabled { color: var(--color-text-disabled); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }

/* Accessibility */
.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;
}