/* ==========================================================================
   Quercia viva — AG Grid skin (brand §5.3 tables)
   AG Grid v36 uses the legacy quartz CSS theme; here we remap its --ag-*
   variables onto the --qc-* brand tokens. Quartz derives most colors from
   background/foreground/active, so setting those (which flip under
   [data-bs-theme="dark"] via the token cascade) themes light AND dark with no
   JS. This file also covers the surrounding chrome (toolbar, wrapper, in-cell
   badges/actions, overlays).
   ========================================================================== */

/* ---- Theme: map quartz --ag-* onto --qc-* tokens ----
   Doubled class (.ag-theme-quartz.ag-theme-quartz) raises specificity above
   quartz's own single-class declarations, which the importmap injects AFTER
   this file — otherwise the defaults would win and dark mode would stay light. */
.ag-theme-quartz.ag-theme-quartz {
  --ag-background-color: var(--qc-surface);
  --ag-foreground-color: var(--qc-text-primary);
  --ag-border-color: var(--qc-divider);
  --ag-header-background-color: var(--qc-surface-light);
  --ag-header-foreground-color: var(--qc-text-secondary);
  --ag-row-hover-color: color-mix(in srgb, var(--qc-primary) 7%, transparent);
  --ag-selected-row-background-color: color-mix(in srgb, var(--qc-primary) 12%, transparent);
  --ag-active-color: var(--qc-primary);
  --ag-input-focus-border-color: var(--qc-primary);
  --ag-font-family: var(--qc-font-body);
  --ag-font-size: 0.9375rem;
  --ag-cell-horizontal-padding: 1rem;
  /* Roomier rows (mockup §5.3): eliminates the cramped, always-truncated feel
     and gives two-line cells (twoLine renderer) space to breathe. */
  --ag-row-height: 3.25rem;
  --ag-header-height: 2.75rem;
  /* Only horizontal (row) separators — no vertical column separators, matching
     the mockup. Quartz already defaults columns to none; make it explicit. */
  --ag-cell-horizontal-border: transparent;
  --ag-border-radius: var(--qc-radius-sm);
  --ag-wrapper-border-radius: var(--qc-radius-card);
  --ag-header-column-resize-handle-color: var(--qc-border);
}
/* Two-line cells (twoLine renderer: <b>primary</b><br><small>secondary</small>).
   Tight leading so both lines sit centered within the taller row. */
.ag-theme-quartz .ag-cell { line-height: 1.3; }
.ag-theme-quartz .ag-cell b { color: var(--qc-text-primary); font-weight: 600; }
.ag-theme-quartz .ag-cell small { color: var(--qc-text-tertiary); font-size: .8125rem; }
/* subtle zebra striping (quartz has no odd-row var by default) */
.ag-theme-quartz .ag-row-odd {
  background-color: color-mix(in srgb, var(--qc-surface-light) 45%, transparent);
}
/* header labels: uppercase, tracked — quiet and scannable (Attio/Linear feel) */
.ag-theme-quartz .ag-header-cell-text {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .74rem;
}

/* Wrapper: a card framing the toolbar + grid.
   width:100% so it fills flex parents (Tabler .row-deck makes .col-* a
   flex-direction:column container, which would otherwise shrink us to content). */
.qc-grid {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: 100%;
}
.qc-grid__overlay { width: 100%; }

/* Toolbar above the grid: quick search + column chooser + CSV export */
.qc-grid__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.qc-grid__search {
  position: relative;
  flex: 1 1 240px;
  max-width: 360px;
}
.qc-grid__search input {
  width: 100%;
  height: 40px;
  padding: 0 .75rem 0 2.25rem;
  border-radius: var(--qc-radius-input);
  border: 1px solid var(--qc-border);
  background: var(--qc-field-bg);
  color: var(--qc-text-primary);
  font-family: var(--qc-font-body);
}
.qc-grid__search input:focus {
  outline: none;
  border-color: var(--qc-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--qc-primary-rgb), .30);
}
.qc-grid__search .qc-grid__search-icon {
  position: absolute;
  left: .7rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--qc-text-tertiary);
  pointer-events: none;
}
.qc-grid__toolbar-spacer { flex: 1 1 auto; }

/* Contextual bulk-action bar (lives in the toolbar_start slot; shown only when
   rows are selected). */
.qc-grid__bulkbar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-right: auto;
  padding: .3rem .45rem .3rem .7rem;
  border-radius: var(--qc-radius-btn);
  background: color-mix(in srgb, var(--qc-primary) 10%, var(--qc-surface));
  border: 1px solid color-mix(in srgb, var(--qc-primary) 25%, transparent);
  box-shadow: var(--qc-shadow-sm);
}
.qc-grid__bulkbar[hidden] { display: none; }
.qc-grid__bulkbar-count { font-size: .8125rem; font-weight: 600; color: var(--qc-text-secondary); white-space: nowrap; }
.qc-grid__bulkbar-count:empty { display: none; }

/* Toolbar buttons — the column chooser and the "Senza data" filter share the
   brand ghost-primary look from the mockup (not the default grey outline). */
.qc-grid__colmenu > button,
.qc-grid__filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 40px;
  padding: 0 .85rem;
  font: 600 .85rem var(--qc-font-body);
  cursor: pointer;
  color: var(--qc-primary);
  background: color-mix(in srgb, var(--qc-primary) 14%, transparent);
  border: 1px solid transparent;
  border-radius: var(--qc-radius-btn);
  backdrop-filter: blur(10px);
  transition: background var(--qc-dur-fast, .18s) var(--qc-ease-fast, ease),
              border-color var(--qc-dur-fast, .18s) var(--qc-ease-fast, ease);
}
.qc-grid__colmenu > button svg,
.qc-grid__filter-toggle svg { width: 18px; height: 18px; }
/* Keep the pointer target on the button itself so its native `title` tooltip
   surfaces reliably even when hovering the icon or label. */
.qc-grid__filter-toggle svg { pointer-events: none; }
.qc-grid__colmenu > button:hover,
.qc-grid__filter-toggle:hover {
  background: color-mix(in srgb, var(--qc-primary) 20%, transparent);
  color: var(--qc-primary);
  border-color: transparent;
}
/* Active ("Senza data" filter on): a solid filled pill, clearly distinct from the
   ghost look of the inactive state so it reads as toggled at a glance. */
.qc-grid__filter-toggle[aria-pressed="true"],
.qc-grid__filter-toggle.active {
  background: var(--qc-primary);
  color: var(--qc-on-primary);
  border-color: var(--qc-primary);
  box-shadow: var(--qc-shadow-sm);
}
.qc-grid__filter-toggle[aria-pressed="true"]:hover,
.qc-grid__filter-toggle.active:hover {
  background: color-mix(in srgb, var(--qc-primary) 88%, #000);
  color: var(--qc-on-primary);
  border-color: var(--qc-primary);
}

/* Bulk-action buttons: compact glass pills matching the mockup. */
.qc-grid__bulkbar .btn {
  height: 34px;
  padding: 0 .8rem;
  border-radius: 10px;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .qc-grid__colmenu > button,
  .qc-grid__filter-toggle { transition: none; }
}

/* Column-chooser dropdown (Community has no Enterprise tool panel) */
.qc-grid__colmenu {
  position: relative;
}
.qc-grid__colmenu-panel {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  z-index: 30;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  padding: .5rem;
  background: var(--qc-surface);
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius-panel);
  box-shadow: var(--qc-shadow-lg);
}
.qc-grid__colmenu-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .5rem;
  border-radius: var(--qc-radius-sm);
  cursor: pointer;
  color: var(--qc-text-primary);
}
.qc-grid__colmenu-item:hover {
  background: color-mix(in srgb, var(--qc-primary) 8%, transparent);
}

/* The grid host: card frame + brand radius */
.qc-grid__grid {
  width: 100%;
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius-card);
  overflow: hidden;
}

/* Works table: merge the grid flush with its card frame — no box-in-a-box.
   The card supplies the border/radius, so the grid drops its own and reaches
   the card edges; the toolbar keeps an inset and a hairline separates it from
   the rows. */
.qc-worktable-card > .card-body {
  padding: 0;
}
.qc-worktable-card .qc-grid {
  gap: 0;
}
.qc-worktable-card .qc-grid__toolbar {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--qc-border);
}
.qc-worktable-card .qc-grid__grid {
  border: 0;
  border-radius: 0 0 var(--qc-radius-card) var(--qc-radius-card);
}
/* AG Grid's own root wrapper carries --ag-wrapper-border-radius, which would
   round the header's top corners even though the grid is flush with the card.
   Square it off; the host's overflow:hidden + bottom radius clip the bottom to
   the card. */
.qc-worktable-card .ag-theme-quartz .ag-root-wrapper {
  border-radius: 0;
}

/* Vertically center row cell content (two-line cells, chips, badges, numbers).
   flex-direction:column keeps horizontal text-align (e.g. right-aligned numbers)
   working while centering the block vertically within the row height. */
.ag-theme-quartz .ag-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* In-page tooltip for in-cell elements (action icons, service/vehicle pills,
   operator avatars). Appended to <body> so it is not clipped by cell overflow. */
.qc-tip {
  position: fixed;
  transform: translate(-50%, calc(-100% - 8px));
  z-index: 10000;
  pointer-events: none;
  padding: .25rem .5rem;
  border-radius: 8px;
  font: 600 .72rem var(--qc-font-body);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--qc-surface);
  background: var(--qc-text-primary);
  box-shadow: var(--qc-shadow-lg);
}
.qc-tip::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--qc-text-primary);
}

/* In-cell content: status badges keep their pill look; numeric = tabular */
.ag-cell .badge { font-size: .8125rem; vertical-align: middle; }
.ag-cell.qc-numeric,
.ag-cell .qc-numeric { font-variant-numeric: tabular-nums; }

/* Preventivo (estimate): the `currency` renderer marks the column numeric, which
   would right-align the header + value. Keep it left-aligned like every other
   column in the brand table so the header sits above its numbers (scoped by
   col-id so no other numeric grid is affected). */
#workTable .ag-cell[col-id="estimate.total_string"] { text-align: left; }
#workTable .ag-header-cell[col-id="estimate.total_string"] .ag-header-cell-label { flex-direction: row; }

/* Status badge ("All works"): keep the label on a single line — shrink the font
   so a long status still fits inside the cell instead of wrapping to two rows. */
.ag-theme-quartz .qc-status-cell .badge {
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
  font-size: .6875rem;
  padding-inline: .5em;
}

/* Action buttons rendered inside a cell — comfortable hit targets, brand
   outline, visible hover/focus (replaces the cramped default btn-sm look). */
.qc-grid-actions {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 100%;
}
.qc-grid-actions .btn {
  --tblr-btn-padding-y: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: .375rem .75rem;
  border-radius: var(--qc-radius-btn);
  border-color: var(--qc-border);
  color: var(--qc-text-secondary);
  background: var(--qc-surface);
  transition: background var(--qc-dur-fast) var(--qc-ease-fast),
              border-color var(--qc-dur-fast) var(--qc-ease-fast),
              color var(--qc-dur-fast) var(--qc-ease-fast);
}
.qc-grid-actions .btn:hover {
  background: color-mix(in srgb, var(--qc-primary) 8%, var(--qc-surface));
  border-color: color-mix(in srgb, var(--qc-primary) 40%, transparent);
  color: var(--qc-primary);
}
.qc-grid-actions .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(var(--qc-primary-rgb), .30);
  border-color: var(--qc-primary);
}
/* Icon-only variant (hideButtonText pref): square, icon centered. */
.qc-grid-actions__icon {
  width: 2.25rem;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* pointer-events:none so the hover/tooltip target is the button itself, not the
   inner SVG — otherwise the browser won't surface the button's title tooltip. */
.qc-grid-actions .btn svg { display: block; width: 19px; height: 19px; pointer-events: none; }
/* Semantic outline buttons keep their intent color on hover. */
.qc-grid-actions .btn-outline-success:hover {
  background: color-mix(in srgb, var(--qc-success) 12%, var(--qc-surface));
  border-color: var(--qc-success); color: var(--qc-success);
}
.qc-grid-actions .btn-outline-danger:hover {
  background: color-mix(in srgb, var(--qc-error) 12%, var(--qc-surface));
  border-color: var(--qc-error); color: var(--qc-error);
}
.qc-grid-actions .btn-outline-warning:hover {
  background: color-mix(in srgb, var(--qc-warning) 16%, var(--qc-surface));
  border-color: var(--qc-warning); color: var(--qc-warning);
}
.qc-grid-actions .btn.disabled { color: var(--qc-text-tertiary); }
@media (prefers-reduced-motion: reduce) {
  .qc-grid-actions .btn { transition: none; }
}

/* Loader / empty states FLOAT over the grid host.
   The grid element stays in the layout at its measured width for the whole load
   cycle — it is never display:none — so revealing fresh data never makes AG Grid
   re-flow its flex columns (the right-to-left "slide" glitch on work-tab change).
   While busy, `.is-busy` reserves vertical room so the centered loader/empty art
   isn't clipped by the header-only height of a still-empty grid. */
.qc-grid__overlay {
  position: relative;
}
.qc-grid__overlay.is-busy {
  min-height: 320px;
}
.qc-grid__overlay > [data-ag-grid-target="loading"]:not([hidden]),
.qc-grid__overlay > [data-ag-grid-target="empty"]:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  background: var(--qc-surface);
  border-radius: var(--qc-radius-card);
}
/* The rings loader sits ABOVE the grid (and the empty state) and covers it
   opaquely while AG Grid paints + settles the rows underneath; on reveal it
   fades out to uncover the finished table — no layout jitter is ever seen. */
.qc-grid__overlay > [data-ag-grid-target="loading"]:not([hidden]) {
  z-index: 6;
  opacity: 1;
  transition: opacity .25s var(--qc-ease-fast, ease);
}
.qc-grid__overlay > [data-ag-grid-target="loading"].is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .qc-grid__overlay > [data-ag-grid-target="loading"]:not([hidden]) { transition: none; }
}