/* ════════════════════════════════════════════════════════════════════
   OECTA Data Grid — AG Grid theme + workarounds  (v0.2 of the shared
   component library, added 2026-05-06).
   ────────────────────────────────────────────────────────────────────
   Apply to any AG Grid container alongside Alpine theme:

     <div class="ag-theme-alpine oecta-data-grid">

   What this file does:
     1. Maps AG Grid's --ag-* CSS variables to --oecta-* tokens so the
        grid inherits the OECTA palette + typography + spacing.
     2. Overrides Alpine's default header / row / pagination chrome to
        match the v3 Notification Hub visual language (subtle borders,
        navy-tinted hover, Manrope display font in headers).
     3. Bakes in two AG Grid v32+ quirks that have been re-discovered
        per-panel for months — neither needs per-grid CSS again:
        ─ Icon font fallback (memory: feedback_ag_grid_v32_icon_font_fallback.md
          2026-05-05) — Material Icons font is loaded globally, AG Grid
          v32 falls back to it, the wrong glyphs render. Suppress all
          .ag-icon::before/::after content + draw the few glyphs we
          actually need with CSS shapes / SVG masks.
        ─ Wrapper flex-chain (memory: feedback_ag_grid_v32_wrapper_flex_chain.md
          2026-05-05) — .ag-root-wrapper defaults to flex: 0 1 auto
          which collapses the body viewport to 0px tall. Force
          height: 100% on the wrapper chain.

   Mobile note: at ≤ 768px each panel's OctList wrapper hides the grid
   and renders .oecta-list-row cards instead. The .is-mobile-cards
   class on the grid container does the actual hide.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Token mapping ──────────────────────────────────────────────── */
.oecta-data-grid {
  /* Foreground / background */
  --ag-foreground-color:                var(--oecta-on-surface);
  --ag-secondary-foreground-color:      var(--oecta-text-muted);
  --ag-data-color:                      var(--oecta-on-surface);
  --ag-disabled-foreground-color:       var(--oecta-text-subtle);
  --ag-background-color:                var(--oecta-surface-lowest);
  --ag-control-panel-background-color:  var(--oecta-surface-lowest);
  --ag-input-background-color:          var(--oecta-surface-lowest);
  --ag-modal-overlay-background-color:  rgba(15, 20, 25, 0.4);

  /* Header */
  --ag-header-foreground-color:                  var(--oecta-text-muted);
  --ag-header-background-color:                  var(--oecta-bg-subtle);
  --ag-header-cell-hover-background-color:       var(--oecta-surface-active);
  --ag-header-cell-moving-background-color:      var(--oecta-surface-active);
  --ag-header-column-resize-handle-color:        var(--oecta-border-subtle);
  --ag-header-column-separator-color:            transparent;

  /* Rows */
  --ag-row-hover-color:                 var(--oecta-bg-subtle);
  --ag-row-border-color:                var(--oecta-border);
  --ag-selected-row-background-color:   rgba(32, 65, 100, 0.06);
  --ag-range-selection-background-color: rgba(32, 65, 100, 0.10);
  --ag-range-selection-border-color:    var(--oecta-primary-container);

  /* Borders */
  --ag-border-color:                    var(--oecta-border);
  --ag-secondary-border-color:          var(--oecta-border-subtle);
  --ag-cell-horizontal-border:          solid transparent;

  /* Inputs / focus */
  --ag-input-focus-border-color:        var(--oecta-primary-container);
  --ag-input-focus-box-shadow:          var(--oecta-focus-ring);

  /* Checkboxes */
  --ag-checkbox-background-color:               var(--oecta-surface-lowest);
  --ag-checkbox-border-color:                   var(--oecta-border-subtle);
  --ag-checkbox-checked-color:                  var(--oecta-primary-container);
  --ag-checkbox-indeterminate-color:            var(--oecta-primary-container);

  /* Typography */
  --ag-font-family:                     var(--oecta-font-body);
  --ag-font-size:                       var(--oecta-text-sm);

  /* Spacing */
  --ag-grid-size:                       6px;        /* AG Grid base unit; 6px → comfortable density */
  --ag-row-height:                      44px;
  --ag-header-height:                   44px;
  --ag-list-item-height:                32px;
  --ag-cell-horizontal-padding:         14px;
  --ag-cell-widget-spacing:             8px;
  --ag-icon-size:                       16px;
}

/* ── 2. Header + row + cell visual overrides ───────────────────────── */
.oecta-data-grid .ag-header {
  font-family: var(--oecta-font-display);
  font-weight: var(--oecta-weight-semibold);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--oecta-border);
}
.oecta-data-grid .ag-header-cell {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oecta-text-muted);
}
.oecta-data-grid .ag-header-cell-text {
  font-weight: var(--oecta-weight-semibold);
}
.oecta-data-grid .ag-header-cell-sorted-asc .ag-header-cell-text,
.oecta-data-grid .ag-header-cell-sorted-desc .ag-header-cell-text {
  color: var(--oecta-on-surface);
}

.oecta-data-grid .ag-row {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--oecta-border);
  transition: background var(--oecta-duration-fast) var(--oecta-ease);
}
.oecta-data-grid .ag-row:hover {
  background: var(--oecta-bg-subtle);
}
.oecta-data-grid .ag-row-selected {
  background: rgba(32, 65, 100, 0.06);
}
.oecta-data-grid .ag-cell {
  font-size: var(--oecta-text-sm);
  color: var(--oecta-on-surface);
  display: flex;
  align-items: center;
  border-right: 0;
}
.oecta-data-grid .ag-cell-focus,
.oecta-data-grid .ag-cell-focus.ag-cell-range-single-cell {
  border: 1px solid var(--oecta-primary-container) !important;
  outline: none;
}

/* Focus halo on selectable cells (cell-text-selection mode) */
.oecta-data-grid .ag-checkbox-input-wrapper:focus-within {
  outline: 2px solid var(--oecta-primary-container);
  outline-offset: 2px;
}

/* ── 3. Pagination panel ───────────────────────────────────────────── */
.oecta-data-grid .ag-paging-panel {
  font-size: var(--oecta-text-xs);
  color: var(--oecta-text-muted);
  border-top: 0;
  box-shadow: inset 0 1px 0 var(--oecta-border);
  background: var(--oecta-surface-lowest);
  padding: 4px 12px;
}
.oecta-data-grid .ag-paging-button {
  color: var(--oecta-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--oecta-radius-xs);
  transition: background var(--oecta-duration-fast) var(--oecta-ease);
}
.oecta-data-grid .ag-paging-button:hover {
  background: var(--oecta-bg-subtle);
  color: var(--oecta-on-surface);
}
.oecta-data-grid .ag-paging-button-disabled {
  color: var(--oecta-text-subtle);
  cursor: not-allowed;
  opacity: 0.5;
}
.oecta-data-grid .ag-paging-row-summary-panel,
.oecta-data-grid .ag-paging-page-summary-panel {
  font-variant-numeric: tabular-nums;
}

/* ── 4. Floating filters / quick filter inputs ─────────────────────── */
.oecta-data-grid .ag-floating-filter {
  background: var(--oecta-surface-lowest);
  border-top: 0;
  box-shadow: inset 0 -1px 0 var(--oecta-border);
}
.oecta-data-grid .ag-input-field-input,
.oecta-data-grid .ag-text-field-input {
  background: var(--oecta-surface-lowest);
  border: 1px solid var(--oecta-border) !important;
  border-radius: var(--oecta-radius-sm) !important;
  font-family: var(--oecta-font-body);
  font-size: var(--oecta-text-xs);
  color: var(--oecta-on-surface);
  padding: 4px 8px;
  height: 28px;
}
.oecta-data-grid .ag-input-field-input:focus,
.oecta-data-grid .ag-text-field-input:focus {
  border-color: var(--oecta-primary-container) !important;
  box-shadow: var(--oecta-focus-ring);
}

/* ── 5. Side bar / column tool panel ───────────────────────────────── */
.oecta-data-grid .ag-side-bar {
  background: var(--oecta-surface-lowest);
  box-shadow: inset 1px 0 0 var(--oecta-border);
}
.oecta-data-grid .ag-side-buttons button {
  font-family: var(--oecta-font-body);
  font-size: var(--oecta-text-xs);
  color: var(--oecta-text-muted);
}

/* ── 6. v32+ wrapper flex-chain fix ────────────────────────────────── */
/* .ag-root-wrapper defaults to flex: 0 1 auto which collapses the body
   to 0px. Force the wrapper chain to height: 100% so the grid actually
   renders. Previously fixed per-panel; now baked in here. */
.oecta-data-grid,
.oecta-data-grid .ag-root-wrapper,
.oecta-data-grid .ag-root,
.oecta-data-grid .ag-react-container {
  height: 100% !important;
}
.oecta-data-grid .ag-root-wrapper-body {
  flex: 1 1 auto;
}

/* ── 7. v32+ icon font fallback ────────────────────────────────────── */
/* Material Icons font is loaded globally for the admin chrome. AG Grid
   v32 .ag-icon class falls back to it and renders the wrong glyphs
   ("content_copy" instead of a checkbox, etc.). Strategy:
     a. Suppress every .ag-icon::before/::after content + font.
     b. Re-draw the icons we actually need with pure CSS shapes / SVG
        masks. Limited set — sort arrows, checkbox, filter funnel,
        menu hamburger, group expander chevron, column toggle.
   Rest stay invisible (no harm; AG Grid is functional without them). */

.oecta-data-grid .ag-icon::before,
.oecta-data-grid .ag-icon::after {
  content: '' !important;
  font-family: inherit !important;
  font-size: inherit !important;
}
.oecta-data-grid .ag-icon {
  display: inline-block;
  width: 16px; height: 16px;
  vertical-align: middle;
  position: relative;
  color: var(--oecta-text-muted);
}

/* Sort arrows — small triangles drawn with borders (no font dep) */
.oecta-data-grid .ag-icon-asc::before {
  content: '' !important;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
}
.oecta-data-grid .ag-icon-desc::before {
  content: '' !important;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

/* Checkbox — drawn as a 14×14 box with checkmark */
.oecta-data-grid .ag-checkbox-input-wrapper {
  width: 14px; height: 14px;
  background: var(--oecta-surface-lowest);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px var(--oecta-border-subtle);
  position: relative;
  cursor: pointer;
  transition: background var(--oecta-duration-fast) var(--oecta-ease);
}
.oecta-data-grid .ag-checkbox-input-wrapper::after,
.oecta-data-grid .ag-checkbox-input-wrapper.ag-checked::after,
.oecta-data-grid .ag-checkbox-input-wrapper.ag-indeterminate::after {
  content: '' !important;
  position: absolute;
  inset: 0;
  font: inherit !important;
}
.oecta-data-grid .ag-checkbox-input-wrapper.ag-checked {
  background: var(--oecta-primary-container);
  box-shadow: none;
}
.oecta-data-grid .ag-checkbox-input-wrapper.ag-checked::after {
  /* Drawn checkmark via two borders rotated 45° */
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg);
  inset: auto;
}
.oecta-data-grid .ag-checkbox-input-wrapper.ag-indeterminate {
  background: var(--oecta-primary-container);
  box-shadow: none;
}
.oecta-data-grid .ag-checkbox-input-wrapper.ag-indeterminate::after {
  left: 3px; top: 6px;
  width: 8px; height: 2px;
  background: white;
  inset: auto;
}
/* Hide the actual <input type="checkbox"> — we render the visual via the wrapper */
.oecta-data-grid .ag-checkbox-input {
  opacity: 0;
  width: 100%; height: 100%;
  cursor: pointer;
}

/* Filter funnel icon — SVG mask */
.oecta-data-grid .ag-icon-filter::before,
.oecta-data-grid .ag-icon-menu-alt::before {
  content: '' !important;
  position: absolute;
  inset: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18l-7 9v6l-4-2v-4z' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18l-7 9v6l-4-2v-4z' fill='black'/></svg>") center/contain no-repeat;
}

/* Menu (hamburger) icon */
.oecta-data-grid .ag-icon-menu::before {
  content: '' !important;
  position: absolute;
  inset: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 6h16M4 12h16M4 18h16' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 6h16M4 12h16M4 18h16' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
}

/* Group expander chevron */
.oecta-data-grid .ag-icon-tree-closed::before,
.oecta-data-grid .ag-icon-tree-open::before {
  content: '' !important;
  position: absolute;
  inset: 4px;
  width: 8px; height: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
  transition: transform var(--oecta-duration-fast) var(--oecta-ease);
}
.oecta-data-grid .ag-icon-tree-open::before {
  transform: rotate(90deg);
}

/* Column toggle (for column tool panel) */
.oecta-data-grid .ag-icon-columns::before {
  content: '' !important;
  position: absolute;
  inset: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='4' width='4' height='16' fill='black'/><rect x='10' y='4' width='4' height='16' fill='black'/><rect x='16' y='4' width='4' height='16' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='4' width='4' height='16' fill='black'/><rect x='10' y='4' width='4' height='16' fill='black'/><rect x='16' y='4' width='4' height='16' fill='black'/></svg>") center/contain no-repeat;
}

/* Pagination arrows */
.oecta-data-grid .ag-icon-first::before,
.oecta-data-grid .ag-icon-previous::before,
.oecta-data-grid .ag-icon-next::before,
.oecta-data-grid .ag-icon-last::before {
  content: '' !important;
  position: absolute;
  inset: 4px;
  background: currentColor;
}
.oecta-data-grid .ag-icon-first::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 4v16M18 6l-6 6 6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 4v16M18 6l-6 6 6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
}
.oecta-data-grid .ag-icon-previous::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 6l-6 6 6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 6l-6 6 6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
}
.oecta-data-grid .ag-icon-next::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
}
.oecta-data-grid .ag-icon-last::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 4v16M6 6l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 4v16M6 6l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
}

/* ── 8. Custom cell-renderer hooks (used by OctList built-ins) ─────── */
/* These classes can be applied to a cell's wrapping div from a custom
   cellRenderer to render any of the .oecta-* primitives inline. The
   built-in renderers in oecta-list.js (next file) reference these. */

.oecta-data-grid .oct-cell-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  border-radius: var(--oecta-radius-pill);
  font-size: var(--oecta-text-xs);
  font-weight: var(--oecta-weight-medium);
  white-space: nowrap;
  background: var(--oecta-bg-subtle);
  color: var(--oecta-on-surface);
}
.oecta-data-grid .oct-cell-chip.is-success { background: var(--oecta-success-soft); color: var(--oecta-success); }
.oecta-data-grid .oct-cell-chip.is-warning { background: var(--oecta-warning-soft); color: var(--oecta-warning); }
.oecta-data-grid .oct-cell-chip.is-error   { background: var(--oecta-error-soft);   color: var(--oecta-error); }
.oecta-data-grid .oct-cell-chip.is-info    { background: var(--oecta-info-soft);    color: var(--oecta-info); }

.oecta-data-grid .oct-cell-avatar {
  display: inline-flex; align-items: center; gap: 8px;
}
.oecta-data-grid .oct-cell-avatar .oecta-avatar { flex: 0 0 auto; }
.oecta-data-grid .oct-cell-avatar-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.oecta-data-grid .oct-cell-statusdot {
  display: inline-flex; align-items: center; gap: 6px;
}

.oecta-data-grid .oct-cell-pilllist {
  display: inline-flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}

/* Currency / monospace number cell */
.oecta-data-grid .oct-cell-currency,
.oecta-data-grid .oct-cell-mono {
  font-family: var(--oecta-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--oecta-text-sm);
}
.oecta-data-grid .oct-cell-currency.is-positive { color: var(--oecta-success); }
.oecta-data-grid .oct-cell-currency.is-negative { color: var(--oecta-error); }

/* ── 9. Mobile fallback hook ───────────────────────────────────────── */
/* OctList.create() adds .is-mobile-cards to the container at ≤ 768px;
   the actual card list renders into a sibling .oecta-data-grid-cards
   container. Hide the AG Grid root when this flag is on. */
.oecta-data-grid.is-mobile-cards .ag-root-wrapper { display: none; }
.oecta-data-grid-cards { display: none; }
.oecta-data-grid.is-mobile-cards + .oecta-data-grid-cards { display: block; }

@media (max-width: 768px) {
  /* Tighten cell padding when the grid IS shown on mobile (e.g., devices
     with a wider viewport that didn't trigger the JS breakpoint switch) */
  .oecta-data-grid {
    --ag-cell-horizontal-padding: 10px;
    --ag-row-height: 40px;
    --ag-header-height: 40px;
  }
}