:root {
  --cc-primary: #2563eb;
  --cc-secondary: #16a34a;
  --cc-tertiary: #f97316;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; }
button, input, select, textarea { font: inherit; }
.nav-btn.active { background: rgba(255,255,255,.15); }
.drawer-backdrop { background: rgba(15,23,42,.52); }
.brand-primary-bg { background: var(--cc-primary); }
.brand-secondary-bg { background: var(--cc-secondary); }
.brand-tertiary-bg { background: var(--cc-tertiary); }
.brand-primary-text { color: var(--cc-primary); }
.brand-primary-border { border-color: var(--cc-primary); }
.brand-secondary-border { border-color: var(--cc-secondary); }
.brand-tertiary-border { border-color: var(--cc-tertiary); }
.fade-in { animation: fadeIn .15s ease-out; }
@keyframes fadeIn { from {opacity:0; transform:translateX(12px)} to {opacity:1; transform:translateX(0)} }

.type-chip { border: 1px solid #e2e8f0; }

@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { width: 100%; }
  .desktop-grid { grid-template-columns: 1fr !important; }
  .responsive-table { overflow-x:auto; }
}

.pipeline-stage summary::-webkit-details-marker { display: none; }
.pipeline-stage[open] summary .stage-chevron { transform: rotate(90deg); }

.color-picker-visible {
  appearance: none;
  -webkit-appearance: none;
  width: 56px;
  height: 40px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.color-picker-visible::-webkit-color-swatch-wrapper {
  padding: 3px;
}

.color-picker-visible::-webkit-color-swatch {
  border: none;
  border-radius: 7px;
}

.color-picker-visible::-moz-color-swatch {
  border: none;
  border-radius: 7px;
}

.sr-only-color-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.color-swatch-button {
  width: 56px;
  height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  cursor: pointer;
  flex: 0 0 auto;
}