/* ===================================================== Armada Next — DataGrid Ported from the Crow's Nest grid, restyled blueprint: square corners, hairline borders, mono metadata, one indigo signal. Baked defaults: sticky header · striped rows · compact. Fenced under @scope (.armada-next). The popover element MUST stay a descendant of .armada-next (the interop positions it in place; it does not reparent to ) so these scoped rules and the design tokens still apply. ===================================================== */ @scope (.armada-next) { /* ---- frame ---------------------------------------------------- */ .armada-dg { background: var(--surface); border: 1px solid var(--border); border-radius: 0; display: flex; flex-direction: column; min-height: 0; position: relative; overflow: hidden; font-family: var(--font-sans); color: var(--fg); } /* ---- toolbar -------------------------------------------------- */ .armada-dg-toolbar { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent); flex-wrap: wrap; } .armada-dg-search { position: relative; display: inline-flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--border); padding: 0 8px 0 10px; height: 30px; min-width: 220px; flex: 1 1 280px; color: var(--muted); } .armada-dg-search:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .armada-dg-search input { appearance: none; border: 0; background: transparent; outline: none; font: inherit; font-size: 12.5px; color: var(--fg); flex: 1; min-width: 0; padding: 0; } .armada-dg-search input::placeholder { color: var(--faint); } .armada-dg-search-clear { appearance: none; border: 0; background: transparent; display: inline-grid; place-items: center; cursor: pointer; color: var(--muted); padding: 2px; } .armada-dg-search-clear:hover { color: var(--fg); } .armada-dg-tbtn { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 0; background: var(--surface); border: 1px solid var(--border); color: var(--fg); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; line-height: 1; white-space: nowrap; transition: background 80ms linear, border-color 80ms linear; } .armada-dg-tbtn:hover { background: var(--surface-2); border-color: var(--border-strong); } .armada-dg-tbtn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); } .armada-dg-tbtn.ghost:hover { background: var(--surface-2); color: var(--fg); } .armada-dg-tbtn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; } .armada-dg-tbtn.primary:hover { filter: brightness(1.08); } .armada-dg-tbtn.danger { color: var(--err); } .armada-dg-tbtn-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-left: 1px; } .armada-dg-tsep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; } .armada-dg-tspacer { flex: 1; } /* ---- combined filter + group bar ----------------------------- */ .armada-dg-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent); background: var(--bg); min-height: 38px; flex-wrap: wrap; transition: background 100ms linear; } .armada-dg-bar.drag-over { background: var(--accent-soft); outline: 1px dashed var(--accent); outline-offset: -4px; } .armada-dg-bar-btn { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 0; color: var(--fg-2); font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; white-space: nowrap; } .armada-dg-bar-btn:hover { color: var(--fg); background: var(--surface-2); border-color: var(--border-strong); } .armada-dg-bar-divider { width: 1px; height: 16px; background: var(--border); flex: 0 0 1px; margin: 0 2px; } .armada-dg-bar-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; align-items: center; } .armada-dg-bar-add { appearance: none; border: 1px dashed var(--border-strong); background: transparent; color: var(--muted); border-radius: 0; height: 24px; padding: 0 9px 0 7px; font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .armada-dg-bar-add:hover { color: var(--fg); border-color: var(--muted); background: var(--surface); } .armada-dg-bar-hint { color: var(--faint); font-size: 11px; letter-spacing: 0.01em; font-family: var(--font-mono); } /* filter chips */ .armada-dg-chip { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px 0 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 0; font: inherit; font-size: 11.5px; color: var(--fg); cursor: pointer; white-space: nowrap; max-width: 100%; } .armada-dg-chip:hover { border-color: var(--border-strong); background: var(--surface-2); } .armada-dg-chip b { color: var(--fg); font-weight: 600; } .armada-dg-chip-op { color: var(--muted); font-size: 10.5px; } .armada-dg-chip-val { color: var(--accent-ink); font-weight: 500; font-family: var(--font-mono); max-width: 200px; overflow: hidden; text-overflow: ellipsis; } .armada-dg-chip-x { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--muted); } .armada-dg-chip-x:hover { color: var(--fg); background: var(--surface-2); } .armada-dg-chip-clear { appearance: none; border: 0; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; padding: 2px 6px; white-space: nowrap; } .armada-dg-chip-clear:hover { color: var(--fg); } .armada-dg-group-chip { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 4px 0 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 0; font-size: 11.5px; color: var(--fg); white-space: nowrap; } .armada-dg-group-chip b { color: var(--accent-ink); font-weight: 600; } .armada-dg-group-chip .x { appearance: none; border: 0; background: var(--surface-2); width: 16px; height: 16px; display: inline-grid; place-items: center; color: var(--muted); cursor: pointer; } .armada-dg-group-chip .x:hover { color: var(--fg); background: var(--border); } /* multi-filter count badge in header */ .armada-dg-th-badge { display: inline-grid; place-items: center; min-width: 14px; height: 14px; padding: 0 4px; border-radius: 0; background: var(--accent); color: var(--accent-fg); font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; line-height: 1; } .armada-dg-th-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; } .armada-dg-th-sortidx { font-family: var(--font-mono); font-size: 9px; color: var(--accent-ink); font-weight: 700; } /* ---- bulk-action bar ----------------------------------------- */ .armada-dg-bulkbar { position: absolute; left: 50%; bottom: 54px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--fg); color: var(--bg); border: 1px solid var(--border-strong); box-shadow: var(--shadow-pop); width: max-content; max-width: calc(100% - 32px); } .armada-dg-bulkbar b { color: var(--accent); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .armada-dg-bulkbar .armada-dg-tbtn { height: 26px; background: transparent; border-color: color-mix(in oklch, var(--bg) 22%, transparent); color: var(--bg); } .armada-dg-bulkbar .armada-dg-tbtn:hover { background: color-mix(in oklch, var(--bg) 12%, transparent); } .armada-dg-bulkbar .armada-dg-tbtn.danger { color: var(--err); } /* ---- table --------------------------------------------------- */ .armada-dg-scroller { overflow: auto; min-height: 200px; flex: 1; } .armada-dg-table { display: flex; flex-direction: column; min-width: 100%; width: max-content; } .armada-dg-headrow, .armada-dg-row, .armada-dg-grouprow { display: flex; align-items: stretch; width: max-content; min-width: 100%; } .armada-dg-headrow { background: var(--surface); font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); font-weight: 600; position: sticky; top: 0; z-index: 3; border-bottom: 1px solid var(--border); } .armada-dg-row { font-size: 12.5px; color: var(--fg); background: var(--surface); } .armada-dg-row:nth-of-type(odd) { background: var(--surface-2); } .armada-dg-row:hover { background: var(--surface-3); } .armada-dg-row.selected { background: var(--accent-soft); } .armada-dg-cell { display: flex; align-items: center; gap: 6px; padding: 6px 10px; min-width: 0; box-sizing: border-box; background: inherit; } .armada-dg-th-cell { padding: 0; cursor: grab; position: relative; } .armada-dg-th-cell:active { cursor: grabbing; } /* header cell internals */ .armada-dg-th { display: flex; align-items: stretch; width: 100%; height: 100%; } .armada-dg-th-label { appearance: none; border: 0; background: transparent; flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 5px; padding: 8px 4px 8px 10px; font: inherit; font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); font-weight: 600; cursor: pointer; text-align: left; } .armada-dg-th-label:hover { color: var(--fg); } .armada-dg-th.sorted .armada-dg-th-label { color: var(--accent-ink); } .armada-dg-th-menu { appearance: none; border: 0; background: transparent; display: inline-grid; place-items: center; padding: 0 8px 0 4px; cursor: pointer; color: var(--faint); opacity: 0; transition: opacity 80ms linear; } .armada-dg-th-cell:hover .armada-dg-th-menu, .armada-dg-th-menu.open, .armada-dg-th.sorted .armada-dg-th-menu, .armada-dg-th.filtered .armada-dg-th-menu { opacity: 1; color: var(--muted); } .armada-dg-th-menu:hover { color: var(--fg); background: var(--surface-2); } .armada-dg-th-menu.open { color: var(--accent-ink); background: var(--accent-soft); } /* resize handle */ .armada-dg-resize { position: absolute; top: 0; right: -4px; bottom: 0; width: 9px; cursor: col-resize; z-index: 5; display: flex; align-items: center; justify-content: center; touch-action: none; } .armada-dg-resize-line { width: 1px; height: 60%; background: transparent; transition: background 80ms linear, width 80ms linear; } .armada-dg-th-cell:hover .armada-dg-resize-line { background: var(--border-strong); height: 80%; } .armada-dg-resize:hover .armada-dg-resize-line, .armada-dg-resize:active .armada-dg-resize-line { background: var(--accent); width: 2px; height: 100%; } /* pinned cells */ .armada-dg-cell--pinL, .armada-dg-cell--pinR { position: sticky; z-index: 2; } .armada-dg-headrow .armada-dg-cell--pinL, .armada-dg-headrow .armada-dg-cell--pinR { z-index: 4; } .armada-dg-cell--pinL-edge::after, .armada-dg-cell--pinR-edge::before { content: ""; position: absolute; top: 0; bottom: 0; width: 12px; pointer-events: none; } .armada-dg-cell--pinL-edge::after { right: -12px; background: linear-gradient(to right, color-mix(in oklch, var(--fg) 9%, transparent), transparent); } .armada-dg-cell--pinR-edge::before { left: -12px; background: linear-gradient(to left, color-mix(in oklch, var(--fg) 9%, transparent), transparent); } /* selection column */ .armada-dg-cell--sel { flex: 0 0 38px !important; min-width: 38px !important; max-width: 38px; justify-content: center; padding: 0; } .armada-dg-cell--sel input[type="checkbox"] { width: 13px; height: 13px; accent-color: var(--accent); cursor: pointer; margin: 0; border-radius: 0; } /* cell content */ .armada-dg-mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .armada-dg-mono--warn { color: var(--warn); font-weight: 600; } .armada-dg-txt { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .armada-dg-name { color: var(--fg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .armada-dg-id { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-ink); font-weight: 500; } .armada-dg-ava { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; flex: 0 0 22px; } /* badge extensions for grid states (reuse .badge base from components.css) */ .armada-dg .badge.healthy { color: var(--ok); } .armada-dg .badge.degraded { color: var(--warn); } .armada-dg .badge.down { color: var(--err); } .armada-dg .badge.tier { color: var(--fg-2); } .armada-dg .badge.tier-enterprise { color: var(--accent-ink); } .armada-pop .badge { height: 18px; padding: 1px 6px; } /* group rows */ .armada-dg-grouprow { background: var(--bg); padding: 8px 14px; font-size: 12px; color: var(--fg); cursor: pointer; gap: 8px; align-items: center; position: sticky; left: 0; width: max-content; min-width: 100%; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); } .armada-dg-grouprow:hover { background: var(--surface-2); } .armada-dg-group-label { color: var(--muted); font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 600; } .armada-dg-group-value { display: inline-flex; align-items: center; } .armada-dg-group-count { font-size: 11px; color: var(--muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; margin-left: 4px; } .armada-dg-group-meta { margin-left: auto; display: inline-flex; gap: 14px; align-items: center; font-size: 11px; color: var(--muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; padding-right: 14px; } .armada-dg-group-meta b { color: var(--fg); font-weight: 600; } .armada-dg-group-meta span { display: inline-flex; gap: 4px; align-items: center; } /* empty state */ .armada-dg-empty { padding: 60px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); text-align: center; } .armada-dg-empty b { color: var(--fg); font-size: 13px; } /* footer / pagination */ .armada-dg-footer { display: flex; align-items: center; gap: 14px; padding: 7px 12px; border-top: 1px solid var(--border); background: var(--surface); font-size: 11.5px; color: var(--muted); } .armada-dg-footer b { color: var(--fg); font-weight: 600; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .armada-dg-pagesize { display: inline-flex; align-items: center; gap: 6px; } .armada-dg-pagesize select { appearance: none; background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 3px 22px 3px 8px; font: inherit; font-size: 11.5px; color: var(--fg); background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 13px) calc(50% - 1px), calc(100% - 9px) calc(50% - 1px); background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } .armada-dg-pageinfo { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); font-size: 11.5px; } .armada-dg-pager { display: inline-flex; align-items: center; gap: 2px; } .armada-dg-pager button { appearance: none; border: 1px solid var(--border); background: var(--surface); width: 26px; height: 26px; border-radius: 0; display: inline-grid; place-items: center; color: var(--muted); cursor: pointer; } .armada-dg-pager button:hover { background: var(--surface-2); color: var(--fg); } .armada-dg-pager button:disabled { opacity: 0.35; cursor: not-allowed; } .armada-dg-pageno { padding: 0 8px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); font-size: 11.5px; } /* toast */ .armada-dg-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); border-radius: 0; padding: 8px 16px; font-size: 12px; display: inline-flex; align-items: center; gap: 8px; z-index: 100; box-shadow: var(--shadow-pop); animation: armada-dg-toast-in 200ms ease-out; } .armada-dg-toast .ok { color: var(--ok); display: inline-flex; } @keyframes armada-dg-toast-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ===================================================== Popovers (shared) — .armada-pop ===================================================== */ .armada-pop { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: 0; box-shadow: var(--shadow-pop); z-index: 200; font-size: 12px; color: var(--fg); overflow: hidden; min-width: 180px; } .armada-pop-head { display: flex; align-items: center; padding: 9px 12px 7px; font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; border-bottom: 1px solid var(--border); background: var(--surface-2); } .armada-pop-item { appearance: none; border: 0; display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 12px; background: transparent; color: var(--fg); font: inherit; font-size: 12px; text-align: left; cursor: pointer; } .armada-pop-item:hover { background: var(--surface-2); } .armada-pop-item:disabled { opacity: 0.4; cursor: not-allowed; } .armada-pop-item.active { background: var(--accent-soft); color: var(--accent-ink); } .armada-pop-item.danger { color: var(--err); } .armada-pop-item-ic { display: inline-grid; place-items: center; width: 14px; color: var(--muted); } .armada-pop-item.active .armada-pop-item-ic { color: var(--accent-ink); } .armada-pop-item.danger .armada-pop-item-ic { color: var(--err); } .armada-pop-item-label { flex: 1; } .armada-pop-item-hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); } .armada-pop-item.active .armada-pop-item-hint { color: var(--accent-ink); } .armada-pop-sep { height: 1px; background: var(--border); margin: 2px 0; } .armada-pop-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .armada-pop-foot { padding: 8px 10px; border-top: 1px solid var(--border); display: flex; gap: 6px; justify-content: flex-end; background: var(--surface-2); } .armada-pop-btn { appearance: none; border: 1px solid var(--border); background: var(--surface); padding: 5px 12px; border-radius: 0; font: inherit; font-size: 11.5px; font-weight: 500; color: var(--fg); cursor: pointer; } .armada-pop-btn:hover { background: var(--surface-2); border-color: var(--border-strong); } .armada-pop-btn.ghost { background: transparent; border-color: transparent; color: var(--muted); } .armada-pop-btn.ghost:hover { color: var(--fg); background: var(--surface-2); } .armada-pop-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; } .armada-pop-btn.primary:hover { filter: brightness(1.08); } .armada-pop-select, .armada-pop-input { appearance: none; background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 6px 8px; font: inherit; font-size: 12px; color: var(--fg); width: 100%; } .armada-pop-select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) calc(50% - 1px), calc(100% - 10px) calc(50% - 1px); background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; padding-right: 24px; } .armada-pop-input:focus, .armada-pop-select:focus { outline: 0; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .armada-pop-row { display: flex; gap: 6px; align-items: center; } .armada-pop-list { display: flex; flex-direction: column; padding: 4px 0; max-height: 280px; overflow: auto; } .armada-pop-check { display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 12px; color: var(--fg); cursor: pointer; } .armada-pop-check:hover { background: var(--surface-2); } .armada-pop-check input { accent-color: var(--accent); width: 13px; height: 13px; border-radius: 0; } .armada-pop-ava { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; flex: 0 0 20px; } .armada-pop-search { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border-bottom: 1px solid var(--border); color: var(--muted); } .armada-pop-search input { flex: 1; appearance: none; border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--fg); outline: none; min-width: 0; padding: 2px 0; } .armada-pop-search input::placeholder { color: var(--faint); } .armada-pop-list--cols { padding: 6px 0; max-height: 360px; } .armada-pop-col-row { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; cursor: grab; } .armada-pop-col-row:hover { background: var(--surface-2); } .armada-pop-col-row.dragging { opacity: 0.4; } .armada-pop-col-row.over { background: var(--accent-soft); } .armada-pop-grip { color: var(--faint); width: 14px; display: inline-grid; place-items: center; } .armada-pop-eye { appearance: none; border: 0; background: transparent; cursor: pointer; width: 22px; height: 22px; border-radius: 0; display: inline-grid; place-items: center; color: var(--muted); } .armada-pop-eye:hover { background: var(--surface-2); color: var(--fg); } .armada-pop-col-label { flex: 1; font-size: 12px; color: var(--fg); } .armada-pop-pin { appearance: none; border: 1px solid var(--border); background: var(--surface); border-radius: 0; padding: 3px 6px; font: inherit; font-size: 10.5px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; } .armada-pop-pin:hover { background: var(--surface-2); color: var(--fg); } .armada-pop-pin.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); font-weight: 600; } .armada-pop-radio { padding: 8px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; } .armada-pop-radio label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--fg); } .armada-pop-radio label.disabled { color: var(--faint); cursor: not-allowed; } .armada-pop-radio em { font-style: normal; color: var(--muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; margin-left: auto; } .armada-pop-radio input { accent-color: var(--accent); } .armada-pop-filters { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 4px; } .armada-pop-filter-chip { display: flex; align-items: center; gap: 7px; padding: 5px 6px 5px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 0; font-size: 11.5px; color: var(--fg); } .armada-pop-filter-op { color: var(--muted); font-size: 10.5px; } .armada-pop-filter-val { color: var(--accent-ink); font-weight: 500; flex: 1; font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .armada-pop-filter-x { appearance: none; border: 0; background: transparent; width: 18px; height: 18px; border-radius: 0; display: inline-grid; place-items: center; color: var(--muted); cursor: pointer; } .armada-pop-filter-x:hover { color: var(--fg); background: var(--border); } .armada-pop-section-head { padding: 6px 12px 4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); font-weight: 600; border-top: 1px solid var(--border); margin-top: 4px; } .armada-pop-filters + .armada-pop-section-head { border-top: 0; margin-top: 0; } .armada-pop-head-count { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; } /* footer spacer pushes pagination to the right */ .armada-dg-footer-spacer { flex: 1; } /* density modifiers (compact is the baked default) */ .armada-dg--comfortable .armada-dg-cell { padding: 9px 10px; } .armada-dg--dense .armada-dg-cell { padding: 3px 10px; } }