/* Pixie Web2Print shared design system — scoped to Pixie interfaces. */
.pixie-ui,
.pixie-desk,
.pixie-workflow-admin,
.pixie-client-portal,
.pixie-order-jobs,
.pixie-w2p,
.pixie-conf-admin,
.pixie-designer,
.pixie-bridge {
  --pixie-color-brand-50: #eef8ff;
  --pixie-color-brand-100: #d9efff;
  --pixie-color-brand-500: #1384d4;
  --pixie-color-brand-600: #0871ba;
  --pixie-color-brand-700: #075b96;
  --pixie-color-ink: #142033;
  --pixie-color-muted: #5d6b7c;
  --pixie-color-line: #d9e1ea;
  --pixie-color-surface: #ffffff;
  --pixie-color-canvas: #f5f8fb;
  --pixie-color-success: #16794b;
  --pixie-color-success-bg: #edf9f2;
  --pixie-color-warning: #9a6700;
  --pixie-color-warning-bg: #fff8df;
  --pixie-color-danger: #b42318;
  --pixie-color-danger-bg: #fff1f0;
  --pixie-color-info: #175cd3;
  --pixie-color-info-bg: #eff8ff;
  --pixie-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pixie-text-xs: .75rem;
  --pixie-text-sm: .875rem;
  --pixie-text-md: 1rem;
  --pixie-text-lg: 1.25rem;
  --pixie-text-xl: clamp(1.55rem, 2vw, 2rem);
  --pixie-space-1: .25rem;
  --pixie-space-2: .5rem;
  --pixie-space-3: .75rem;
  --pixie-space-4: 1rem;
  --pixie-space-5: 1.5rem;
  --pixie-space-6: 2rem;
  --pixie-radius-sm: 6px;
  --pixie-radius-md: 10px;
  --pixie-radius-lg: 16px;
  --pixie-shadow-sm: 0 1px 2px rgba(20, 32, 51, .06);
  --pixie-shadow-md: 0 10px 30px rgba(20, 32, 51, .09);
  color: var(--pixie-color-ink);
  font-family: var(--pixie-font-sans);
}

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

.pixie-ui h1,
.pixie-ui h2,
.pixie-ui h3,
.pixie-ui h4 { color: var(--pixie-color-ink); line-height: 1.25; }
.pixie-ui h1 { font-size: var(--pixie-text-xl); letter-spacing: -.025em; }
.pixie-ui p { line-height: 1.55; }
.pixie-ui small,
.pixie-ui .description { color: var(--pixie-color-muted); }
.pixie-ui a { text-underline-offset: 2px; }

.pixie-shell { display: grid; gap: var(--pixie-space-5); max-width: 1440px; }
.pixie-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pixie-space-4); }
.pixie-page-head__title { margin: 0; }
.pixie-page-head__intro { margin: var(--pixie-space-2) 0 0; color: var(--pixie-color-muted); }
.pixie-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--pixie-space-2); color: var(--pixie-color-muted); font-size: var(--pixie-text-sm); }
.pixie-breadcrumbs > * + *::before { content: "/"; margin-right: var(--pixie-space-2); color: #98a2b3; }

.pixie-card,
.pixie-ui .card,
.pixie-workspace__panel,
.pixie-desk-job,
.pixie-job-card,
.pixie-client-job,
.pixie-notification {
  background: var(--pixie-color-surface);
  border: 1px solid var(--pixie-color-line);
  border-radius: var(--pixie-radius-lg);
  box-shadow: var(--pixie-shadow-sm);
}
.pixie-card { padding: var(--pixie-space-5); }
.pixie-card__head { display: flex; justify-content: space-between; gap: var(--pixie-space-4); align-items: flex-start; margin-bottom: var(--pixie-space-4); }
.pixie-card__title { margin: 0; font-size: var(--pixie-text-lg); }

.pixie-grid { display: grid; gap: var(--pixie-space-4); }
.pixie-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pixie-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pixie-stack { display: grid; gap: var(--pixie-space-4); }
.pixie-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pixie-space-3); }

.pixie-ui .button,
.pixie-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pixie-space-2);
  padding: .55rem .9rem;
  border-radius: var(--pixie-radius-sm);
  border: 1px solid #b8c3cf;
  background: #fff;
  color: var(--pixie-color-ink);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.pixie-ui .button:hover,
.pixie-button:hover { border-color: var(--pixie-color-brand-600); color: var(--pixie-color-brand-700); background: var(--pixie-color-brand-50); }
.pixie-ui .button-primary,
.pixie-button--primary { background: var(--pixie-color-brand-600); border-color: var(--pixie-color-brand-600); color: #fff; }
.pixie-ui .button-primary:hover,
.pixie-button--primary:hover { background: var(--pixie-color-brand-700); border-color: var(--pixie-color-brand-700); color: #fff; }
.pixie-button--danger { color: var(--pixie-color-danger); border-color: #f0b4af; }
.pixie-ui .button:disabled,
.pixie-button:disabled { cursor: not-allowed; opacity: .52; }

.pixie-ui :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(19, 132, 212, .35);
  outline-offset: 2px;
}

.pixie-ui :is(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
  min-height: 40px;
  border: 1px solid #b8c3cf;
  border-radius: var(--pixie-radius-sm);
  padding: .55rem .7rem;
  color: var(--pixie-color-ink);
  background: #fff;
}
.pixie-ui textarea { min-height: 88px; resize: vertical; }
.pixie-ui :is(input, select, textarea):focus { border-color: var(--pixie-color-brand-600); box-shadow: 0 0 0 1px var(--pixie-color-brand-600); }
.pixie-field { display: grid; gap: var(--pixie-space-2); }
.pixie-field__label { font-weight: 650; }
.pixie-field__help { color: var(--pixie-color-muted); font-size: var(--pixie-text-sm); }
.pixie-field--error :is(input, select, textarea) { border-color: var(--pixie-color-danger); }
.pixie-field__error { color: var(--pixie-color-danger); font-size: var(--pixie-text-sm); }

.pixie-badge,
.pixie-badges span,
.pixie-job-card__badges span,
.pixie-file-current {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: #eef2f6;
  color: #344054;
  border: 1px solid #d0d7e0;
  font-size: var(--pixie-text-xs);
  font-weight: 700;
}
.pixie-badge--success { color: var(--pixie-color-success); background: var(--pixie-color-success-bg); border-color: #a9dfc1; }
.pixie-badge--warning { color: var(--pixie-color-warning); background: var(--pixie-color-warning-bg); border-color: #efd487; }
.pixie-badge--danger { color: var(--pixie-color-danger); background: var(--pixie-color-danger-bg); border-color: #f0b4af; }
.pixie-badge--info { color: var(--pixie-color-info); background: var(--pixie-color-info-bg); border-color: #b2d5fa; }

.pixie-alert { padding: var(--pixie-space-4); border: 1px solid var(--pixie-color-line); border-left-width: 4px; border-radius: var(--pixie-radius-md); background: #fff; }
.pixie-alert--success { border-color: #82d4aa; background: var(--pixie-color-success-bg); }
.pixie-alert--warning { border-color: #e6c35c; background: var(--pixie-color-warning-bg); }
.pixie-alert--danger { border-color: #e89c95; background: var(--pixie-color-danger-bg); }
.pixie-alert--info { border-color: #8fc4f4; background: var(--pixie-color-info-bg); }

.pixie-state { display: grid; justify-items: center; gap: var(--pixie-space-3); padding: clamp(2rem, 6vw, 4rem); text-align: center; border: 1px dashed #b8c3cf; border-radius: var(--pixie-radius-lg); background: var(--pixie-color-canvas); }
.pixie-state__title { margin: 0; font-size: var(--pixie-text-lg); }
.pixie-state__message { margin: 0; max-width: 54ch; color: var(--pixie-color-muted); }
.pixie-state--error { border-color: #e89c95; background: var(--pixie-color-danger-bg); }
.pixie-state--loading::before { content: ""; width: 24px; height: 24px; border: 3px solid var(--pixie-color-brand-100); border-top-color: var(--pixie-color-brand-600); border-radius: 50%; animation: pixie-spin .8s linear infinite; }
@keyframes pixie-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pixie-state--loading::before { animation-duration: 1.8s; } }

.pixie-progress { display: grid; grid-template-columns: repeat(var(--pixie-progress-steps, 4), minmax(0, 1fr)); gap: var(--pixie-space-2); padding: 0; list-style: none; }
.pixie-progress__step { display: grid; gap: var(--pixie-space-2); color: var(--pixie-color-muted); font-size: var(--pixie-text-sm); }
.pixie-progress__step::before { content: ""; height: 6px; border-radius: 999px; background: #dbe2ea; }
.pixie-progress__step.is-complete::before { background: var(--pixie-color-success); }
.pixie-progress__step.is-current { color: var(--pixie-color-ink); font-weight: 700; }
.pixie-progress__step.is-current::before { background: var(--pixie-color-brand-600); }

.pixie-table-wrap { overflow: auto; border: 1px solid var(--pixie-color-line); border-radius: var(--pixie-radius-md); background: #fff; }
.pixie-ui table { border-collapse: collapse; }
.pixie-ui .widefat { border-color: var(--pixie-color-line); border-radius: var(--pixie-radius-md); box-shadow: none; }
.pixie-ui .widefat th { color: #344054; font-size: var(--pixie-text-xs); letter-spacing: .035em; text-transform: uppercase; }
.pixie-ui .widefat th,
.pixie-ui .widefat td { padding: .75rem; vertical-align: top; }
.pixie-ui .widefat tr:hover td { background: var(--pixie-color-brand-50); }

.pixie-ui details { border-radius: var(--pixie-radius-md); }
.pixie-ui summary { cursor: pointer; font-weight: 650; }
.pixie-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 900px) {
  .pixie-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pixie-page-head { display: grid; }
}
@media (max-width: 640px) {
  .pixie-grid--2,
  .pixie-grid--3 { grid-template-columns: 1fr; }
  .pixie-ui .button,
  .pixie-button { width: 100%; }
  .pixie-progress { grid-template-columns: 1fr; }
}