/* DMAISP visual foundation
 * Shared by the production screens. Page-specific CSS may extend these tokens,
 * but should not redefine the interaction states below.
 */
:root {
  --ds-brand: #c1121f;
  --ds-brand-dark: #8f1019;
  --ds-brand-soft: #fff0f1;
  --ds-text: #1f2937;
  --ds-muted: #667085;
  --ds-border: #e4e7ec;
  --ds-surface: #ffffff;
  --ds-surface-subtle: #f8fafc;
  --ds-success: #17663d;
  --ds-success-bg: #e8f7ef;
  --ds-danger: #b42318;
  --ds-danger-bg: #ffe9e7;
  --ds-focus: 0 0 0 4px rgba(193, 18, 31, .18);
  --ds-radius-sm: 10px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 18px;
  --ds-shadow-sm: 0 2px 10px rgba(16, 24, 40, .06);
  --ds-shadow-md: 0 12px 30px rgba(16, 24, 40, .10);
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
}

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

html { min-width: 320px; scroll-behavior: smooth; }

body {
  color: var(--ds-text);
  background: var(--ds-surface-subtle);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }

button, a, input, select, textarea, [tabindex]:not([tabindex="-1"]) {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid rgba(193, 18, 31, .42);
  outline-offset: 2px;
  box-shadow: var(--ds-focus);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

button, .button-link, .link-btn {
  min-height: 42px;
  transition: background-color .18s ease, border-color .18s ease,
    color .18s ease, box-shadow .18s ease, transform .18s ease;
}

button:hover:not(:disabled),
.button-link:hover,
.link-btn:hover { transform: translateY(-1px); }

input, select, textarea {
  max-width: 100%;
}

/* Long values should wrap instead of expanding cards and tables. */
pre, code, td, th, .card, .panel, .history-item, .preview-card {
  overflow-wrap: anywhere;
}

/* Keep tables usable without forcing the page itself wider on mobile. */
.table-wrap, .table-container, .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

table { max-width: 100%; }

/* Shared responsive navigation behavior. */
.main-nav {
  max-width: 100%;
}

.main-nav a {
  min-height: 42px;
}

/* Modals must remain usable above the mobile keyboard and on short screens. */
.modal {
  padding: var(--ds-space-4);
}

.modal-content {
  max-height: min(90dvh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 768px) {
  body { overflow-x: hidden; }

  .container, .page {
    width: 100%;
    max-width: 100%;
  }

  .header, .hero { border-radius: var(--ds-radius-md); }

  .main-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main-nav a {
    justify-content: center;
    min-width: 0;
    text-align: center;
  }

  .panel { padding: var(--ds-space-4); }

  .modal { align-items: flex-start; padding: 12px; }

  .modal-content {
    width: 100%;
    margin: 0;
    max-height: calc(100dvh - 24px);
    padding: var(--ds-space-4);
  }
}

@media (max-width: 460px) {
  body { padding-left: 12px !important; padding-right: 12px !important; }

  .main-nav { grid-template-columns: 1fr; }

  .header, .hero { padding: 20px !important; }

  .panel { border-radius: var(--ds-radius-md); }
}

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

@media print {
  .auth-shell, .main-nav, button, .button-link, .link-btn { display: none !important; }
  body { background: #fff; padding: 0 !important; }
  .panel, .card, .hero, .header { box-shadow: none !important; }
}