/*! @agromatiq/aq-grid CSS — structural + light theme. */
/**
 * aq-grid.css — structural styles only (§13).
 *
 * Structural means: layout, spacing, and state classes. No colours, no
 * fonts, no shadows — those belong in a theme (e.g. themes/light.css).
 * Splitting the CSS this way means the host can swap the light theme for a
 * field / dark / corporate theme without re-downloading the structural rules.
 *
 * Every visual token is exposed as a `--aq-*` custom property so integrators
 * can override just the token they care about from a parent stylesheet —
 * no need to touch the theme file.
 */

/* ─── Layout ──────────────────────────────────────────────────────── */

.aq-grid-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 240px;
  box-sizing: border-box;
  font-family: var(--aq-font-family, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  font-size: var(--aq-font-size, 14px);
  color: var(--aq-fg, #1f2937);
  background: var(--aq-bg, #ffffff);
}

.aq-grid-root *,
.aq-grid-root *::before,
.aq-grid-root *::after {
  box-sizing: border-box;
}

.aq-grid-body {
  flex: 1 1 auto;
  min-height: 200px;
}

/* ─── Toolbar ─────────────────────────────────────────────────────── */

.aq-toolbar {
  display: flex;
  align-items: center;
  gap: var(--aq-gap, 12px);
  padding: var(--aq-toolbar-padding, 10px 12px);
  border-bottom: 1px solid var(--aq-border, #e5e7eb);
  background: var(--aq-toolbar-bg, #f9fafb);
}

.aq-toolbar__title {
  margin: 0;
  font-size: var(--aq-toolbar-title-size, 16px);
  font-weight: 600;
  line-height: 1.2;
}

.aq-toolbar__actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ─── Buttons ─────────────────────────────────────────────────────── */

.aq-btn {
  appearance: none;
  border: 1px solid var(--aq-btn-border, #d1d5db);
  background: var(--aq-btn-bg, #ffffff);
  color: var(--aq-btn-fg, #1f2937);
  padding: 6px 14px;
  border-radius: var(--aq-btn-radius, 6px);
  font: inherit;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.aq-btn:hover { background: var(--aq-btn-bg-hover, #f3f4f6); }
.aq-btn:focus-visible {
  outline: 2px solid var(--aq-focus, #2563eb);
  outline-offset: 2px;
}
.aq-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.aq-btn--primary {
  background: var(--aq-primary, #2563eb);
  border-color: var(--aq-primary, #2563eb);
  color: var(--aq-primary-fg, #ffffff);
}
.aq-btn--primary:hover {
  background: var(--aq-primary-hover, #1d4ed8);
  border-color: var(--aq-primary-hover, #1d4ed8);
}

.aq-btn--secondary { /* default .aq-btn styling is already the secondary look */ }

.aq-btn--danger {
  background: var(--aq-danger, #dc2626);
  border-color: var(--aq-danger, #dc2626);
  color: var(--aq-danger-fg, #ffffff);
}
.aq-btn--danger:hover {
  background: var(--aq-danger-hover, #b91c1c);
  border-color: var(--aq-danger-hover, #b91c1c);
}

/* ─── Row action buttons (×, duplicate, etc.) ─────────────────────── */

.aq-row-action {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--aq-muted, #6b7280);
  border-radius: 4px;
}
.aq-row-action:hover { color: var(--aq-danger, #dc2626); background: var(--aq-btn-bg-hover, #f3f4f6); }

/* ─── Cell base classes ───────────────────────────────────────────── */

.aq-cell { /* baseline — type-specific cells layer on top */ }

.aq-cell--number,
.aq-cell--currency { justify-content: flex-end; text-align: right; }

.aq-cell--readonly {
  color: var(--aq-muted, #6b7280);
  background: var(--aq-readonly-bg, #f9fafb);
  font-style: italic;
}

.aq-cell--actions {
  padding: 0 !important;
  text-align: center;
}

/* ─── Required + invalid highlighting (§8.2, §9) ──────────────────── */

/* Required column header — trailing asterisk styling */
.aq-grid-root .ag-header-cell[aria-colindex]:has(.aq-cell--required) {
  /* AG Grid renders headers separately; the * is appended into headerName
     in column-builder. This selector is kept to give themes a place to
     style it if :has() is available. */
}

/* Required-but-empty cells get a gentle background + left accent bar. */
.aq-cell--required {
  background: var(--aq-required-bg, rgba(253, 224, 71, 0.08));
}
.aq-cell--required-empty {
  background: var(--aq-required-empty-bg, rgba(253, 224, 71, 0.22));
  box-shadow: inset 3px 0 0 var(--aq-warn, #f59e0b);
}

/* Validation errors win over required-empty. */
.aq-cell--invalid {
  background: var(--aq-invalid-bg, rgba(220, 38, 38, 0.12)) !important;
  box-shadow: inset 3px 0 0 var(--aq-danger, #dc2626) !important;
}

/* ─── Editors ─────────────────────────────────────────────────────── */

.aq-editor {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 8px;
  font: inherit;
  color: inherit;
  background: transparent;
}
.aq-editor:focus { background: var(--aq-editor-focus-bg, #ffffff); }

.aq-editor--date { padding: 0 4px; }
.aq-editor--number { text-align: right; }

/* ─── Sync indicator (§10.2) ──────────────────────────────────────── */

.aq-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--aq-sync-bg, #e5e7eb);
  color: var(--aq-sync-fg, #111827);
  white-space: nowrap;
}
.aq-sync::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aq-muted, #6b7280);
  flex: 0 0 auto;
}

.aq-sync--allSaved  { background: var(--aq-ok-bg, #dcfce7); color: var(--aq-ok-fg, #166534); }
.aq-sync--allSaved::before  { background: var(--aq-ok, #16a34a); }

.aq-sync--saving    { background: var(--aq-info-bg, #dbeafe); color: var(--aq-info-fg, #1e3a8a); }
.aq-sync--saving::before    { background: var(--aq-info, #2563eb); }

.aq-sync--retrying  { background: var(--aq-warn-bg, #fef3c7); color: var(--aq-warn-fg, #92400e); }
.aq-sync--retrying::before  { background: var(--aq-warn, #f59e0b); }

.aq-sync--conflicts { background: var(--aq-danger-bg, #fee2e2); color: var(--aq-danger-fg-muted, #991b1b); }
.aq-sync--conflicts::before { background: var(--aq-danger, #dc2626); }

.aq-sync--offline   { background: var(--aq-muted-bg, #f3f4f6); color: var(--aq-muted, #6b7280); }

/* ─── Dialog ──────────────────────────────────────────────────────── */

.aq-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: var(--aq-backdrop, rgba(15, 23, 42, 0.4));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.aq-dialog {
  background: var(--aq-dialog-bg, #ffffff);
  border-radius: var(--aq-dialog-radius, 10px);
  max-width: 440px;
  width: calc(100% - 32px);
  padding: 20px 24px;
  box-shadow: var(--aq-dialog-shadow, 0 10px 25px rgba(0,0,0,0.15));
}
.aq-dialog__title { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.aq-dialog__body  { margin: 0 0 18px; color: var(--aq-muted-strong, #374151); line-height: 1.5; }
.aq-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ─── Conflict banner (§14) ───────────────────────────────────────── */

.aq-conflict-banner-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aq-conflict-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--aq-warn-bg, #fef3c7);
  color: var(--aq-warn-fg, #92400e);
  border-bottom: 1px solid var(--aq-warn, #f59e0b);
}
.aq-conflict-banner__text { flex: 1 1 auto; }
.aq-conflict-banner__fields { opacity: 0.85; font-style: italic; }
.aq-conflict-banner__actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* ─── Row state (Phase 1 uses cell-level; reserved for Phase 2) ───── */

.aq-row { /* no-op in Phase 1 */ }

/* ─── Undo toast (§17) ────────────────────────────────────────────── */

.aq-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px 14px;
  min-width: 260px;
  max-width: 480px;
  background: var(--aq-toast-bg, #1f2937);
  color: var(--aq-toast-fg, #ffffff);
  border-radius: var(--aq-toast-radius, 8px);
  box-shadow: var(--aq-toast-shadow, 0 8px 24px rgba(0,0,0,0.25));
  overflow: hidden;
}
.aq-toast__message { flex: 1 1 auto; }
.aq-toast__action {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: inherit;
}
.aq-toast__action:hover { background: rgba(255,255,255,0.1); }
.aq-toast__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--aq-primary, #2563eb);
  transform-origin: left center;
  animation: aq-toast-countdown linear forwards;
}
@keyframes aq-toast-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── fk editor (Phase 2) ──────────────────────────────────────────── */

.aq-cell--fk {
  /* The displayed label is formatted like plain text. The editor
     replaces the cell's contents while editing. */
}

.aq-editor--fk {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.aq-editor--fk .aq-editor__input {
  width: 100%;
  height: 100%;
  padding: 0 8px;
  border: 1px solid var(--aq-input-border, #c7d2fe);
  border-radius: 3px;
  background: var(--aq-input-bg, #ffffff);
  color: inherit;
  font: inherit;
  box-sizing: border-box;
}

.aq-editor--fk .aq-editor__input:focus {
  outline: none;
  border-color: var(--aq-primary, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.aq-editor--fk .aq-editor__listbox {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--aq-popup-z, 50);
  margin: 2px 0 0 0;
  padding: 4px 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: var(--aq-popup-bg, #ffffff);
  border: 1px solid var(--aq-popup-border, #e5e7eb);
  border-radius: 4px;
  box-shadow: var(--aq-popup-shadow, 0 6px 18px rgba(0, 0, 0, 0.12));
}

.aq-editor--fk .aq-editor__listbox[hidden] {
  display: none;
}

.aq-editor--fk .aq-editor__option {
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aq-editor--fk .aq-editor__option--highlighted,
.aq-editor--fk .aq-editor__option:hover:not([aria-disabled="true"]) {
  background: var(--aq-option-hover-bg, #eff6ff);
  color: var(--aq-option-hover-fg, #1e3a8a);
}

.aq-editor--fk .aq-editor__option--status {
  color: var(--aq-muted-fg, #6b7280);
  font-style: italic;
  cursor: default;
}

/* Visually-hidden aria-live region */
.aq-editor--fk .aq-editor__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Strict-mode rejection pulse */
.aq-editor--rejected .aq-editor__input {
  animation: aq-fk-reject-pulse 600ms ease-out;
  border-color: var(--aq-error, #dc2626);
  background: var(--aq-error-bg, #fee2e2);
}

@keyframes aq-fk-reject-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
  60%  { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}


/**
 * Light theme — the default Phase 1 theme (§13).
 *
 * All colours, shadows, and font stacks live here. The structural CSS
 * (aq-grid.css) uses `var(--aq-*, <fallback>)` throughout so this file
 * merely sets the tokens.
 *
 * To theme the grid, the host app either:
 *   1. Swaps this stylesheet for a different theme file, OR
 *   2. Overrides individual `--aq-*` tokens from an outer CSS rule.
 *
 * A future "field" theme will bump font-size, widen row padding, and shift
 * palette for high-sunlight tablet use.
 */

.aq-grid-root,
:root {
  --aq-font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --aq-font-size: 14px;

  /* Base canvas */
  --aq-bg: #ffffff;
  --aq-fg: #1f2937;
  --aq-muted: #6b7280;
  --aq-muted-strong: #374151;
  --aq-muted-bg: #f3f4f6;
  --aq-border: #e5e7eb;

  --aq-toolbar-bg: #f9fafb;
  --aq-toolbar-title-size: 16px;
  --aq-toolbar-padding: 10px 12px;
  --aq-gap: 12px;

  /* Primary / interactive */
  --aq-primary: #2563eb;
  --aq-primary-hover: #1d4ed8;
  --aq-primary-fg: #ffffff;
  --aq-focus: #2563eb;

  --aq-btn-bg: #ffffff;
  --aq-btn-bg-hover: #f3f4f6;
  --aq-btn-border: #d1d5db;
  --aq-btn-fg: #1f2937;
  --aq-btn-radius: 6px;

  /* Status palettes */
  --aq-ok: #16a34a;
  --aq-ok-bg: #dcfce7;
  --aq-ok-fg: #166534;

  --aq-info: #2563eb;
  --aq-info-bg: #dbeafe;
  --aq-info-fg: #1e3a8a;

  --aq-warn: #f59e0b;
  --aq-warn-bg: #fef3c7;
  --aq-warn-fg: #92400e;

  --aq-danger: #dc2626;
  --aq-danger-hover: #b91c1c;
  --aq-danger-bg: #fee2e2;
  --aq-danger-fg: #ffffff;
  --aq-danger-fg-muted: #991b1b;

  /* Mandatory / validation highlighting (§8.2, §9) */
  --aq-required-bg: rgba(253, 224, 71, 0.08);
  --aq-required-empty-bg: rgba(253, 224, 71, 0.22);
  --aq-invalid-bg: rgba(220, 38, 38, 0.12);

  /* Readonly cells */
  --aq-readonly-bg: #f9fafb;

  /* Editor focus ring */
  --aq-editor-focus-bg: #ffffff;

  /* Dialog */
  --aq-backdrop: rgba(15, 23, 42, 0.4);
  --aq-dialog-bg: #ffffff;
  --aq-dialog-radius: 10px;
  --aq-dialog-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

  /* Sync indicator */
  --aq-sync-bg: #e5e7eb;
  --aq-sync-fg: #111827;
}