/*
 * Pristine workspace design system
 *
 * This layer deliberately loads after the legacy shell and feature styles.
 * It centralizes the visual and interactive contract used by the manager and
 * employee workspace without changing feature markup or command wiring.
 *
 * Components: ds-control (buttons/fields), ds-card (panels), ds-status
 * (status and notification states), ds-table (responsive tables), and the
 * modal shell. Focus is always visible, motion is optional, and controls
 * retain a 44px target on touch devices.
 */
:root {
  --ds-font-sans: var(--ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --ds-font-display: var(--disp, var(--ds-font-sans));
  --ds-font-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  --ds-space-1: .25rem;
  --ds-space-2: .5rem;
  --ds-space-3: .75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.5rem;
  --ds-space-6: 2rem;
  --ds-radius-control: .5rem;
  --ds-radius-card: .75rem;
  --ds-control-height: 2.5rem;
  --ds-focus: #005fcc;
  --ds-focus-halo: rgba(0, 95, 204, .24);
  --ds-canvas: var(--canvas, #f1f4f7);
  --ds-surface: var(--plate, #fff);
  --ds-surface-subtle: var(--sunk, #e8edf2);
  --ds-text: var(--ink, #14222e);
  --ds-text-muted: var(--ink2, #3d5364);
  --ds-border: var(--rule2, #c2ceda);
  --ds-action: var(--blue, #1d5fa8);
  --ds-action-strong: var(--blue-d, #164a85);
  --ds-action-subtle: var(--blue-w, #e8f1fa);
  --ds-positive: var(--ok, #0e7a50);
  --ds-positive-subtle: var(--ok-w, #e4f3ec);
  --ds-warning: var(--amber-t, #7a5406);
  --ds-warning-subtle: var(--amber-w, #fdf3e0);
  --ds-danger: var(--stop-t, #7a241b);
  --ds-danger-subtle: var(--stop-w, #fbeae8);
}

/* Tokens are also exposed through the existing workspace vocabulary so new
 * screens can share this layer while the established views remain intact. */
.turf-workspace {
  --tw-bg: var(--ds-canvas);
  --tw-paper: var(--ds-surface);
  --tw-ink: var(--ds-text);
  --tw-muted: var(--ds-text-muted);
  --tw-line: var(--ds-border);
  --tw-blue: var(--ds-action);
  --tw-soft: var(--ds-action-subtle);
  --tw-green: var(--ds-positive);
  --tw-greens: var(--ds-positive-subtle);
  --tw-amber: var(--ds-warning);
  --tw-ambers: var(--ds-warning-subtle);
  font-family: var(--ds-font-sans);
}
.turf-workspace .tw-skip {
  position: fixed;
  z-index: 5000;
  top: var(--ds-space-2);
  left: var(--ds-space-2);
  transform: translateY(-200%);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-control);
  background: var(--ds-surface);
  color: var(--ds-action-strong);
}
.turf-workspace .tw-skip:focus { transform: none; }

/* Shared control contract — default, hover, keyboard focus, disabled and
 * invalid form states. It is deliberately scoped to the new SaaS surfaces. */
:where(.turf-workspace, .turf-saas-auth, .turf-saas-modal, .turf-saas-account) :is(button, input, select, textarea) {
  font-family: var(--ds-font-sans);
}
:where(.turf-workspace, .turf-saas-auth, .turf-saas-modal) :is(button, input, select, textarea) {
  border-radius: var(--ds-radius-control);
}
:where(.turf-workspace, .turf-saas-auth, .turf-saas-modal) :is(input, select, textarea) {
  min-height: var(--ds-control-height);
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
}
:where(.turf-workspace, .turf-saas-auth, .turf-saas-modal) :is(input, select, textarea)[aria-invalid="true"],
:where(.turf-workspace, .turf-saas-auth, .turf-saas-modal) :is(input, select, textarea):user-invalid {
  border-color: var(--ds-danger);
}
:where(.turf-workspace, .turf-saas-auth, .turf-saas-modal) :is(button, input, select, textarea, a):focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ds-focus-halo);
}
:where(.turf-workspace, .turf-saas-auth, .turf-saas-modal) :is(button, input, select, textarea):disabled,
:where(.turf-workspace, .turf-saas-auth, .turf-saas-modal) [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
}

/* Cards, forms and notifications use the same spacing and semantic colors. */
:is(.turf-workspace .tw-panel, .turf-workspace .tw-stat, .turf-saas-section) {
  border-radius: var(--ds-radius-card);
  border-color: var(--ds-border);
}
:is(.turf-workspace .tw-queue-controls, .turf-saas-form) {
  gap: var(--ds-space-3);
}
:is(.tw-command-status, .workspace-tools[role="alert"], .turf-saas-error) {
  border: 1px solid var(--ds-danger);
  border-radius: var(--ds-radius-control);
  background: var(--ds-danger-subtle);
  color: var(--ds-danger);
  padding: var(--ds-space-3) var(--ds-space-4);
}
.tw-command-status:not(.tw-command-status--error) {
  border-color: var(--ds-positive);
  background: var(--ds-positive-subtle);
  color: var(--ds-positive);
}

/* Status colors retain text contrast without relying on color alone: the
 * existing UI supplies a named state/icon, and this layer supplies its frame. */
.turf-workspace .tw-badge { border: 1px solid currentColor; border-radius: 999px; font-weight: 700; }
.turf-workspace .tw-badge--attention,
.turf-workspace .tw-phase--attention,
.turf-workspace .tw-stat--attention { background: var(--ds-warning-subtle) !important; color: var(--ds-warning); }
.turf-workspace .tw-stat--attention { border-color: var(--ds-warning); }
.turf-workspace .tw-phase--progress { background: var(--ds-action-subtle) !important; color: var(--ds-action-strong); }
.turf-workspace .tw-phase--complete,
.turf-workspace .tw-phase--complete-text { background: var(--ds-positive-subtle) !important; color: var(--ds-positive); }

/* A stage remains one whole button, but its explanatory copy reads from the
 * left while the numeric state stays anchored at the far edge. */
.turf-workspace .tw-stage :is(.tw-row-main, .tw-stage-label) { margin-right: auto; text-align: left; }
.turf-workspace .tw-stage .tw-row-main :is(.tw-row-title, .tw-muted) { text-align: left; }

/* Tables can opt in with .ds-table; established commerce tables inherit the
 * same readable headers, separators, and horizontal overflow at narrow widths. */
:is(.ds-table, .turf-workspace table, #commerceScreen .table) { width: 100%; border-collapse: collapse; }
:is(.ds-table, .turf-workspace table, #commerceScreen .table) :is(th, td) { border-bottom: 1px solid var(--ds-border); padding: var(--ds-space-3) var(--ds-space-4); text-align: left; }
:is(.ds-table, .turf-workspace table, #commerceScreen .table) th { background: var(--ds-surface-subtle); color: var(--ds-text-muted); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }

/* Dialog state: the scripting layer provides role, modal semantics and focus;
 * these rules keep the panel visible, scrollable, and safely sized. */
.turf-saas-modal[role="dialog"] { isolation: isolate; }
.turf-saas-modal .turf-saas-panel { border: 1px solid var(--ds-border); }

@media (max-width: 750px) {
  :is(.ds-table, .turf-workspace table, #commerceScreen .table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (pointer: coarse) {
  :where(.turf-workspace, .turf-saas-auth, .turf-saas-modal) :is(button, input, select, textarea) { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.turf-workspace, .turf-saas-auth, .turf-saas-modal) *,
  :where(.turf-workspace, .turf-saas-auth, .turf-saas-modal) *::before,
  :where(.turf-workspace, .turf-saas-auth, .turf-saas-modal) *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}