/*
  Gigamach OS - Design A
  Shared screen-only visual layer. Business logic and printable documents stay
  in their owning modules.
*/

body.design-a {
  --da-bg: #f3f5f8;
  --da-surface: #ffffff;
  --da-surface-soft: #f7f8fa;
  --da-ink: #172033;
  --da-muted: #687386;
  --da-line: #dfe4ec;
  --da-line-strong: #cbd3df;
  --da-blue: #146ad8;
  --da-blue-dark: #0f56b5;
  --da-blue-soft: #eaf3ff;
  --da-orange: #c64d22;
  --da-green: #158153;
  --da-green-soft: #eaf8f0;
  --da-amber: #a86409;
  --da-amber-soft: #fff7e7;
  --da-red: #c22b24;
  --da-red-soft: #fff0ef;
  --da-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 24, 40, 0.06);
  --da-shadow-raised: 0 16px 40px rgba(16, 24, 40, 0.12);
  margin: 0;
  color: var(--da-ink);
  background: var(--da-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.design-a,
body.design-a button,
body.design-a input,
body.design-a select,
body.design-a textarea {
  letter-spacing: 0;
}

body.design-a h1,
body.design-a h2,
body.design-a h3,
body.design-a h4,
body.design-a p {
  letter-spacing: 0;
}

body.design-a .subtle,
body.design-a .meta,
body.design-a .role-subtitle,
body.design-a .role-meta,
body.design-a .subtitle {
  color: var(--da-muted);
}

body.design-a a,
body.design-a button,
body.design-a summary {
  -webkit-tap-highlight-color: transparent;
}

body.design-a input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.design-a select,
body.design-a textarea {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--da-line-strong);
  border-radius: 12px;
  background: var(--da-surface);
  color: var(--da-ink);
  box-shadow: none;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

body.design-a input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.design-a select:focus,
body.design-a textarea:focus {
  border-color: var(--da-blue);
  box-shadow: 0 0 0 3px rgba(20, 106, 216, 0.12);
  background: #ffffff;
}

body.design-a input::placeholder,
body.design-a textarea::placeholder {
  color: #9ba4b2;
  opacity: 1;
}

body.design-a input[type="checkbox"],
body.design-a input[type="radio"] {
  accent-color: var(--da-blue);
}

body.design-a :where(
  .fields,
  .grid,
  .form-grid,
  .search-box,
  .site-field-grid,
  .resource-chip-grid,
  .machine-compact-row,
  .machine-dimension-row,
  .inline-field,
  .source-search
) > * {
  min-width: 0;
}

body.design-a button,
body.design-a .btn,
body.design-a .button-link {
  border: 1px solid var(--da-line-strong);
  border-radius: 10px;
  background: var(--da-surface);
  color: var(--da-ink);
  box-shadow: none;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

body.design-a button:hover,
body.design-a .btn:hover,
body.design-a .button-link:hover {
  border-color: #aeb9c8;
  background: var(--da-surface-soft);
}

body.design-a button:active,
body.design-a .btn:active,
body.design-a .button-link:active {
  transform: translateY(1px);
}

body.design-a button.primary,
body.design-a .btn.primary,
body.design-a .button-link.primary,
body.design-a .module.primary,
body.design-a .role-actions .primary,
body.design-a .site-actions .primary {
  border-color: var(--da-blue);
  background: var(--da-blue);
  color: #ffffff;
}

body.design-a button.primary:hover,
body.design-a .btn.primary:hover,
body.design-a .button-link.primary:hover,
body.design-a .module.primary:hover {
  border-color: var(--da-blue-dark);
  background: var(--da-blue-dark);
}

body.design-a button.danger,
body.design-a .btn.danger,
body.design-a .btn.warn {
  border-color: #efc2bf;
  background: var(--da-red-soft);
  color: var(--da-red);
}

body.design-a button:disabled,
body.design-a .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

body.design-a .global-nav {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 46px;
  margin: 0 0 16px;
  padding: 6px;
  border: 1px solid var(--da-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  overflow-x: auto;
}

body.design-a .global-nav a,
body.design-a .global-nav button,
body.design-a .global-nav summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--da-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

body.design-a .global-nav a:hover,
body.design-a .global-nav a:focus-visible {
  background: var(--da-surface-soft);
  color: var(--da-ink);
}

body.design-a .global-nav a[aria-current="page"] {
  border: 0;
  background: var(--da-blue-soft);
  color: var(--da-blue-dark);
}

body.design-a .panel,
body.design-a .card,
body.design-a .module-card,
body.design-a .role-card,
body.design-a .mobile-dashboard-card {
  border: 1px solid var(--da-line);
  border-radius: 16px;
  background: var(--da-surface);
  box-shadow: var(--da-shadow);
}

body.design-a .panel > h2 {
  border-bottom: 1px solid var(--da-line);
  background: transparent;
  color: var(--da-ink);
}

body.design-a .notice {
  border: 1px solid #cfe1f9;
  border-radius: 14px;
  background: #f3f8ff;
  color: #274668;
}

body.design-a .badge,
body.design-a .role-badge,
body.design-a .status-pill {
  border: 0;
  border-radius: 999px;
  background: var(--da-blue-soft);
  color: var(--da-blue-dark);
  box-shadow: none;
}

body.design-a .badge.success,
body.design-a .role-badge.success,
body.design-a [data-tone="success"] .badge {
  background: var(--da-green-soft);
  color: var(--da-green);
}

body.design-a .topbar {
  align-items: center;
}

body.design-a .topbar h1 {
  color: var(--da-ink);
  font-weight: 780;
}

body.design-a details {
  border-color: var(--da-line);
  border-radius: 14px;
  background: var(--da-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
  overflow: visible;
}

body.design-a details > summary {
  color: var(--da-ink);
  font-weight: 750;
}

/* Home */
body.design-a .shell {
  width: min(1120px, calc(100% - 32px));
  padding-top: 24px;
}

body.design-a .shell > header {
  border-bottom: 1px solid var(--da-line);
  padding: 14px 0 24px;
}

body.design-a .brand-mark,
body.design-a .brand-logo {
  box-shadow: none;
}

body.design-a .version {
  border-color: #f0c8b9;
  border-radius: 999px;
  background: #fff7f3;
  color: #963719;
}

body.design-a .home-hero {
  border: 1px solid #cfe1f9;
  border-radius: 18px;
  background: #edf5ff;
  box-shadow: none;
}

body.design-a .home-hero-meta span {
  border-color: rgba(20, 106, 216, 0.18);
  background: rgba(255, 255, 255, 0.8);
  color: var(--da-blue-dark);
}

body.design-a .module-section {
  margin-top: 28px;
}

body.design-a .section-head {
  border-color: var(--da-line);
}

body.design-a .module {
  border-color: var(--da-line);
  border-radius: 14px;
  background: var(--da-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

body.design-a .module:hover,
body.design-a .module:focus-visible {
  border-color: #b8c8dc;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.08);
  transform: translateY(-1px);
}

body.design-a .note-card,
body.design-a .workflow-kpi {
  border-color: var(--da-line);
  border-radius: 14px;
  background: var(--da-surface-soft);
}

/* Role-based and supervisor pages */
body.design-a.role-page {
  background: var(--da-bg);
}

body.design-a .role-shell {
  padding-top: 14px;
}

body.design-a .role-hero {
  border: 1px solid var(--da-line);
  border-radius: 18px;
  background: var(--da-surface);
  box-shadow: none;
}

body.design-a .role-card {
  gap: 12px;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

body.design-a .supervisor-entry-card {
  border-color: var(--da-line);
  border-radius: 16px;
  background: var(--da-surface);
  box-shadow: none;
}

body.design-a .supervisor-entry-card.primary {
  border-color: #cfe1f9;
  background: #f1f7ff;
  color: var(--da-blue-dark);
}

body.design-a .site-section {
  border-color: var(--da-line);
  border-radius: 16px;
  background: #fbfcfd;
}

body.design-a .site-section-title {
  color: #244669;
}

body.design-a .machine-list-panel,
body.design-a .resource-chip,
body.design-a .survey-history-card {
  border-color: var(--da-line);
  background: var(--da-surface);
  box-shadow: none;
}

body.design-a .resource-chip:has(input[type="checkbox"]:checked) {
  border-color: #9dc5f4;
  background: #f0f7ff;
}

body.design-a .site-result[data-tone="success"],
body.design-a .role-status[data-tone="success"] {
  color: var(--da-green);
}

body.design-a .site-result[data-tone="error"],
body.design-a .role-status[data-tone="error"] {
  color: var(--da-red);
}

body.design-a .prepare-doc-actions a,
body.design-a .prepare-doc-actions button,
body.design-a .survey-history-actions a,
body.design-a .survey-history-actions button {
  border-color: var(--da-line);
  border-radius: 999px;
  background: var(--da-surface-soft);
}

body.design-a .prepare-doc-actions .primary,
body.design-a .survey-history-actions .primary {
  border-color: var(--da-blue);
  background: var(--da-blue);
  color: #ffffff;
}

body.design-a .role-next {
  border-left-color: var(--da-blue);
  border-radius: 12px;
  background: #f3f8ff;
}

body.design-a .role-next strong {
  color: var(--da-blue-dark);
}

/* Site and SR operational pages */
body.design-a .page {
  width: min(1480px, 100%);
}

body.design-a .grid,
body.design-a .layout {
  gap: 16px;
}

body.design-a .search-box {
  gap: 8px;
}

body.design-a .cards {
  gap: 10px;
}

body.design-a .card,
body.design-a .simple-sr-card {
  border-color: var(--da-line);
  border-radius: 15px;
  background: var(--da-surface);
  box-shadow: none;
}

body.design-a .sr-filterbar {
  border-color: var(--da-line);
  border-radius: 12px;
  background: var(--da-surface-soft);
}

body.design-a .sr-filterbar button {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--da-muted);
}

body.design-a .sr-filterbar button.is-active {
  background: var(--da-surface);
  color: var(--da-blue-dark);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

body.design-a .sr-review-item,
body.design-a .sr-review-section {
  border-color: var(--da-line);
  border-radius: 12px;
  background: var(--da-surface-soft);
}

body.design-a .module-card {
  box-shadow: none;
}

body.design-a .photo-modal {
  background: rgba(12, 20, 32, 0.72);
  backdrop-filter: blur(8px);
}

body.design-a .photo-modal-card {
  border-color: var(--da-line);
  border-radius: 18px;
  box-shadow: var(--da-shadow-raised);
}

/* Quotation Builder screen UI only. The document preview and print remain owned
   by the quotation template. */
@media screen {
  body.design-a .paper {
    font-family: Arial, Helvetica, sans-serif;
  }

  body.design-a .editor {
    border-color: var(--da-line);
    background: var(--da-bg);
  }

  body.design-a .editor > .brand {
    border-bottom: 1px solid var(--da-line);
    background: var(--da-surface);
  }

  body.design-a .editor > .brand h1 {
    color: var(--da-ink);
  }

  body.design-a .toolbar {
    border-color: var(--da-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
    backdrop-filter: blur(12px);
  }

  body.design-a .workflow-note {
    border-color: #cfe1f9;
    border-radius: 12px;
    background: #f3f8ff;
    color: #3e5874;
  }

  body.design-a .editor > details {
    margin: 12px;
  }

  body.design-a .editor > details > summary {
    padding: 13px 14px;
    border-radius: 14px;
    background: var(--da-surface);
  }

  body.design-a .editor > details[open] > summary {
    border-bottom: 1px solid var(--da-line);
    border-radius: 14px 14px 0 0;
  }

  body.design-a .section-body {
    background: var(--da-surface);
  }

  body.design-a .quote-number-summary,
  body.design-a .status-summary,
  body.design-a .linked-sr-panel,
  body.design-a .item-panel,
  body.design-a .history-results {
    border-color: var(--da-line);
    border-radius: 12px;
    background: var(--da-surface-soft);
  }

  body.design-a .preview-fab {
    border-color: var(--da-blue);
    background: var(--da-blue);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(20, 106, 216, 0.28);
  }

  body.design-a .preview-panel-bar {
    background: var(--da-surface);
    color: var(--da-ink);
  }
}

/* App-like phone treatment */
@media (max-width: 767px) {
  body.design-a {
    --mobile-brand: var(--da-blue);
    --mobile-ink: var(--da-ink);
    --mobile-muted: var(--da-muted);
    --mobile-line: var(--da-line);
    --mobile-surface: var(--da-surface);
    --mobile-soft: var(--da-surface-soft);
    --minimal-bg: var(--da-bg);
    --minimal-card: var(--da-surface);
    --minimal-ink: var(--da-ink);
    --minimal-muted: var(--da-muted);
    --minimal-line: var(--da-line);
    --minimal-brand: var(--da-blue);
    --minimal-shadow: var(--da-shadow);
  }

  body.design-a .page,
  body.design-a .app {
    padding: 10px !important;
  }

  body.design-a .role-shell {
    max-width: 680px;
    padding: 10px 10px calc(82px + env(safe-area-inset-bottom, 0));
  }

  body.design-a .mobile-app-topbar {
    min-height: 58px;
    padding-top: calc(7px + env(safe-area-inset-top, 0px));
    border-color: var(--da-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.06);
  }

  body.design-a .mobile-app-icon-button,
  body.design-a .mobile-nav-toggle {
    width: 42px;
    min-height: 42px;
    border-color: var(--da-line);
    border-radius: 12px;
    background: var(--da-surface);
  }

  body.design-a .mobile-nav-panel,
  body.design-a .mobile-more-panel {
    border-color: var(--da-line);
    border-radius: 16px;
    box-shadow: var(--da-shadow-raised);
  }

  body.design-a .mobile-nav-panel a,
  body.design-a .mobile-nav-panel button,
  body.design-a .mobile-more-panel a,
  body.design-a .mobile-more-panel button {
    border: 0;
    border-radius: 10px !important;
    background: transparent;
  }

  body.design-a .mobile-nav-panel a:hover,
  body.design-a .mobile-more-panel a:hover,
  body.design-a .mobile-more-panel button:hover {
    background: var(--da-surface-soft);
  }

  body.design-a .mobile-bottom-tabs {
    gap: 2px;
    padding-top: 6px;
    border-color: var(--da-line);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.08);
  }

  body.design-a .mobile-bottom-tabs a,
  body.design-a .mobile-bottom-tabs button {
    border-radius: 10px;
  }

  body.design-a .mobile-bottom-tabs a[aria-current="page"] {
    background: var(--da-blue-soft);
    color: var(--da-blue-dark);
  }

  body.design-a .mobile-fab {
    background: var(--da-blue);
    box-shadow: 0 10px 24px rgba(20, 106, 216, 0.28);
  }

  body.design-a .role-hero {
    border-radius: 16px;
    padding: 14px;
  }

  body.design-a .role-card,
  body.design-a .panel,
  body.design-a .card,
  body.design-a .module-card,
  body.design-a .mobile-dashboard-card {
    border-radius: 15px;
    box-shadow: none;
  }

  body.design-a .mobile-dashboard-card {
    padding: 14px !important;
  }

  body.design-a .site-section {
    padding: 12px;
  }

  body.design-a .resource-chip-grid {
    gap: 8px;
  }

  body.design-a .resource-chip {
    min-height: 48px;
    border-radius: 13px;
  }

  body.design-a .machine-compact-row,
  body.design-a .machine-dimension-row {
    gap: 8px;
  }

  body.design-a .site-actions {
    gap: 7px;
  }

  body.design-a .site-actions button {
    border-radius: 999px;
  }

  body.design-a .simple-sr-card {
    padding: 12px !important;
  }

  body.design-a .editor > details {
    margin: 10px 0;
  }

  body.design-a .toolbar {
    border-radius: 14px;
  }
}

@media print {
  body.design-a .global-nav,
  body.design-a .mobile-nav-shell,
  body.design-a .mobile-bottom-tabs,
  body.design-a .mobile-app-topbar {
    display: none !important;
  }
}